/* Author: Nicolas Almonacid
Date: 26/08/2025
Version: 1.1.5 (modals glow + proyectos hover match certs) */

@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");

/* ===========================
   Variables
=========================== */
:root{
  --bg-negro:#1d1d1f;
  --bg-general:#0B061F;
  --blanco:#ffffff;
  --celeste:#00BFFF;
  --celeste-rgb: 0,191,255;
  --topbar-h:56px;
}

/* ===========================
   Base / Reset
=========================== */
*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; overflow-x:hidden; }

body{
  margin:0;
  font-size:15pt;
  font-family:"Jost", sans-serif;
  background:var(--bg-general);
  color:var(--blanco);
}

/* ===========================
   Sidebar
=========================== */
.aside{ background:var(--bg-negro); }
@media (min-width:992px){
  .aside{
    position:sticky; top:0; min-height:100vh;
    justify-content:flex-start !important;
    padding-top:2rem !important;
  }
}
.logo{
  font-size:20pt; font-weight:700; letter-spacing:2pt;
  color:var(--blanco); text-decoration:none; margin-bottom:2rem !important;
}
.logo span{ font-weight:800; letter-spacing:2pt; color:var(--celeste); }

.nav-aside{ list-style:none; margin:0; padding:0; }
.nav-aside .nav-link{
  color:var(--blanco); border-radius:.75rem; padding:.65rem 1rem;
  display:flex; align-items:center; gap:.5rem; opacity:.9; transition:.2s;
}
.nav-aside .nav-link:hover,
.nav-aside .nav-link:focus{
  opacity:1; background:rgba(0,191,255,.12);
  box-shadow:0 0 0 1px var(--celeste) inset; color:var(--celeste);
}
.nav-aside .nav-link.active{
  background:rgba(0,191,255,.18);
  box-shadow:0 0 0 1px var(--celeste) inset; color:var(--celeste);
}

/* ===========================
   Tab panes / contenedor
=========================== */
@media (min-width:992px){
  .tab-pane{
    min-height:auto !important;
    display:block;
    align-items:initial;
    padding:1.5rem 1rem 2rem 1rem;
  }
}
@media (max-width:992px){
  .tab-pane{ padding:1rem; }
}

/* Empuje por topbar fija en móvil + anclas */
@media (max-width:991.98px){
  .tab-content{ padding-top: calc(var(--topbar-h) + .75rem); }
  html{ scroll-padding-top: calc(var(--topbar-h) + .75rem); }
  :target{ scroll-margin-top: calc(var(--topbar-h) + .75rem); }
  section.tab-pane > .center-wrap > h1:first-child,
  section.tab-pane > .center-wrap > h2:first-child{ margin-top:.25rem; }
}

.center-wrap{ width:min(100%,980px); padding:0; margin-inline:auto; }

/* ===========================
   Hero / Presentación
=========================== */
.hero-row{ align-items:stretch; padding-top:1rem; }
#presentacion{ padding:0; }
#presentacion p{ text-align:justify; margin:20px 0; font-size:15pt; line-height:25pt; }
#presentacion h1{ font-size:36pt; font-weight:600; color:#00bbff; margin-top:0; }
#presentacion h2,#presentacion h3{ margin-top:0; }
#presentacion span{ color:#06bafb; }

#sobre-mi p{ text-align:justify; }

/* Social */
#socialHeader a{
  display:inline-flex; width:40px; height:40px; background:transparent;
  border:2px solid #06bafb; border-radius:50%;
  box-shadow:0 0 10px rgba(0,0,0,.1);
  font-size:20pt; text-decoration:none; color:#06bafb;
  justify-content:center; align-items:center; transition:.3s;
}
#socialHeader a:hover{ background:#37a1f2; color:#f0f3fd; }

/* Botón primario */
.butn{
  display:inline-block; padding:11px 32px;
  background:#37a1f2; border:2px solid #37a1f2; border-radius:35px;
  box-shadow:0 0 10px rgba(0,0,0,.1); font-size:13pt; color:#f0f3fd;
  text-decoration:none; letter-spacing:1px; font-weight:700; transition:.3s;
}
.butn:hover{ background:transparent; color:#37a1f2; }

/* Foto de perfil (manteniendo tu id actual) */
#fotoPerfil{ display:flex; }
#fotoPerfil img{
  width:100%; height:100%; object-fit:cover; border-radius:10px;
  max-height:none; min-height:0;
}

/* Animación de texto */
.text-animation{
  font-size:clamp(20px, 1.2vw + 16px, 26pt);
  line-height:1.2; display:flex; gap:.5rem;
}
.text-animation span{
  position:relative; display:inline-block; max-width:100%;
  white-space:nowrap; overflow:hidden;
}
.text-animation span::before{
  content:"Estudiante Ing. en Ciberseguridad";
  color:#06bafb; animation:words 12s steps(1,end) infinite;
}
.text-animation span::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:100%;
  background:var(--bg-general); border-left:2px solid #06bafb;
  transform:translateX(0%); animation:typing 4s steps(24,end) infinite, blink .8s step-end infinite;
}
@keyframes typing{
  0%{ transform:translateX(0%); }
  40%{ transform:translateX(100%); }
  70%{ transform:translateX(100%); }
  100%{ transform:translateX(0%); }
}
@keyframes blink{ 50%{ border-color:transparent; } }
@keyframes words{
  0%,33%{ content:"Estudiante Ing. en Ciberseguridad"; }
  34%,66%{ content:"Programador autodidacta"; }
  67%,100%{ content:"Futuro ethical hacker"; }
}
@media (prefers-reduced-motion:reduce){
  .text-animation span::after,.text-animation span::before{ animation:none !important; }
}
@media (max-width:576px){
  #presentacion h1{ font-size:28pt; }
  .text-animation{
    font-size:clamp(18px,5.2vw,22px); line-height:1.25;
    flex-wrap:wrap; gap:.4rem;
  }
  .text-animation span{ white-space:normal; }
  .text-animation span::after{ content:none; }
}

/* ===========================
   Topbar móvil + Offcanvas
=========================== */
.mobile-topbar{ background:var(--bg-negro); z-index:1030; }
/* usa hermano general por si hay nodos entre medio */
@media (max-width:991.98px){
  .mobile-topbar ~ .container-fluid{ padding-top:56px; }
}
.offcanvas-start{ background:var(--bg-negro) !important; color:var(--blanco) !important; }
.offcanvas-header .btn-close{ filter:invert(1); }
.offcanvas-body .nav-pills .nav-link{
  color:var(--blanco); border-radius:.75rem; padding:.65rem 1rem;
  display:flex; align-items:center; gap:.5rem; opacity:.9; transition:.2s; margin-bottom:.25rem;
}
.offcanvas-body .nav-pills .nav-link:hover,
.offcanvas-body .nav-pills .nav-link:focus{
  opacity:1; background:rgba(0,191,255,.12); box-shadow:0 0 0 1px var(--celeste) inset; color:var(--celeste);
}
.offcanvas-body .nav-pills .nav-link.active{
  background:rgba(0,191,255,.18); box-shadow:0 0 0 1px var(--celeste) inset; color:var(--celeste);
}

/* ===========================
   Certificaciones (cards)
=========================== */
.cert-grid > .col{ display:flex; }

.cert-card{
  /* Base: celeste (igualada con tu decisión) */
  background:#141321;
  border:1px solid rgba(0,191,255,.40);
  box-shadow:0 0 0 1px var(--celeste) inset;
  color:var(--celeste);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
  border-radius:1rem;
  white-space:normal;     /* evita herencias nowrap de .btn */
  overflow:hidden;
  display:flex; align-items:center; gap:14px;
  width:100%; height:128px; padding:16px !important;
}
.cert-card:hover,
.cert-card:focus-visible{
  /* Hover: estilo gris (el “antes” de tus tarjetas) */
  border-color: rgb(141,141,141);
  box-shadow: 0 0 0 1px rgba(141,141,141,.9) inset;
  transform: translateY(-2px);
}

.badge-img{
  width:72px; height:72px; object-fit:contain;
  border-radius:10px; padding:6px; background:rgba(255,255,255,.06);
  flex:0 0 72px; max-width:72px;
}

.cert-card .d-flex{ align-items:center; gap:14px; }
.cert-card .d-flex > div{ min-width:0; flex:1 1 auto; }

.text-muted{ color: rgba(255,255,255,.6) !important; font-size:medium; }

.cert-card h5{
  font-size:1rem; line-height:1.2; margin:0 0 .25rem 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word; overflow-wrap:anywhere;
  min-height: calc(1.2em * 2);
  color:inherit; transition:color .2s ease;
}
.cert-card:hover h5,
.cert-card:focus-visible h5{ color:#fff; }

.cert-card small{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:.85; max-width:100%;
}

@media (max-width:575.98px){
  .cert-card{ height:116px; }
  .badge-img{ width:64px; height:64px; }
}

/* ===========================
   Contacto
=========================== */
#form-contacto{ padding:20pt; }
.form-group .form-control{
  border:3px solid #00bbff; background-color: var(--bg-negro);
  border-radius:15px; color:#f0f0f1; padding:10pt;
}
.form-group .form-control::placeholder{ color:#fff; opacity:.8; }
.form-group .btn{
  border-radius:15px; padding:10pt 20pt; font-weight:bold; color:#fff;
  background-color:var(--bg-negro); transition:all .3s ease-in-out;
}
.btn-submit{ border:3px solid #00bbff; background-color:var(--bg-negro); border-radius:15px; color:#fff; }
.btn-submit:hover{ background-color:#00bbff; color:#fff; }

#form-contacto .form-control,#form-contacto select{ min-height:48px; }
#form-contacto textarea.form-control{ min-height:140px; }
#contacto h2{ margin-bottom:1rem; }

/* ===========================
   Timeline
=========================== */
.timeline-title{
  font-weight:700; display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem;
}
.timeline-col{
  --line: rgba(255,255,255,.12);
  --dot: var(--celeste);
  --card-bg: #141321;
  position:relative; margin:0; padding:0; list-style:none;
}
.timeline-col::before{
  content:""; position:absolute; top:0; bottom:0; left:26px; width:2px; background:var(--line);
}
.timeline-entry{ position:relative; margin:0 0 1.75rem 0; padding-left:64px; }
.timeline-entry::before{
  content:""; position:absolute; top:.6rem; left:18px; width:16px; height:16px;
  border-radius:50%; background:var(--dot); box-shadow:0 0 0 4px rgba(0,191,255,.15);
}
.timeline-card{
  background:var(--card-bg); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:1rem 1.25rem; box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.t-header{ display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; }
.t-role{ font-weight:700; }
.t-bullets{ margin:0; padding-left:1.1rem; }
.t-bullets li{ margin-bottom:.25rem; }
.t-icon{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,191,255,.12); color:var(--celeste); flex:0 0 36px;
}
.timeline-acad .timeline-entry::before{ background:#ffd86b; box-shadow:0 0 0 4px rgba(255,216,107,.18); }
.t-icon.acad{ background:rgba(255,255,255,.08); color:#ffd86b; }
#experiencia.tab-pane{ place-items:start center; }
#experiencia .center-wrap{ max-height:none; overflow:visible; }

/* ===========================
   Proyectos (cards + modal)
=========================== */

/* Cards */
.list-unstyled li{ margin-bottom:10pt; }

.project-card{
  /* Base: celeste (igual que cert-card) */
  background:#141321;
  border:1px solid rgba(0,191,255,.40);
  border-radius:1rem;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
  box-shadow:0 0 0 1px var(--celeste) inset;
  color:var(--celeste);
}
.project-card:hover{
  transform:translateY(-2px);
  /* Hover: estilo gris como en cert-card hover */
  box-shadow:0 0 0 1px rgba(141,141,141,.9) inset;
  border-color:rgba(141,141,141,1);
}

/* Imagen + overlay */
.project-card .thumb{ position:relative; }
.project-img{ width:100%; height:100%; object-fit:cover; display:block; }
.project-card .overlay{
  position:absolute; left:0; right:0; bottom:0; padding:.75rem 1rem;
  background:linear-gradient(180deg, rgba(8,10,20,0.10) 0%, rgba(8,10,20,0.55) 40%, rgba(8,10,20,0.88) 100%);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.project-card .overlay .meta{ opacity:.85; }
.project-card .overlay .title,
.project-card .overlay .meta{
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);
}
.project-card .overlay .title{ font-weight:700; letter-spacing:.2px; }

/* Tags/chips */
.tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tag{
  font-size:.8rem; line-height:1; padding:.4rem .6rem; border-radius:999px;
  background:rgba(0,191,255,.12); color:var(--celeste);
  border:1px solid rgba(0,191,255,.25);
}

/* Modal proyectos */
.project-modal{
  background:var(--bg-negro); color:var(--blanco);
  border-radius:1rem;
  border:2px solid var(--celeste);
  box-shadow:
    0 0 0 2px rgba(var(--celeste-rgb), .45),
    0 0 24px rgba(var(--celeste-rgb), .40),
    0 0 60px rgba(var(--celeste-rgb), .22),
    0 12px 26px rgba(0,0,0,.45);
  transition: box-shadow .25s ease, border-color .25s ease;
  position:relative; z-index:1; /* para el bloom opcional */
}

#projectCarousel{ border:2px solid rgba(0,191,255,.35); border-radius:5pt; }
#projectCarousel .carousel-inner{ border-radius:.75rem; overflow:hidden; }
#projectCarousel img{ width:100%; height:420px; object-fit:cover; }

/* Status badge */
#projectStatus.badge{ font-weight:600; }
#projectStatus.online{ background:rgba(0,191,255,.15); color:var(--celeste); border:1px solid rgba(0,191,255,.35); }
#projectStatus.offline{ background:rgba(255,99,71,.15); color:#ff6b6b; border:1px solid rgba(255,99,71,.35); }

#proyectos.tab-pane{ place-items:start center; }
#proyectos .center-wrap{ max-height:none; overflow:visible; }

/* ===========================
   Cert Modal (glow + bloom)
=========================== */
#certModal .modal-content{
  background:var(--bg-negro); color:var(--blanco);
  border-radius:1rem;
  border:2px solid var(--celeste);
  box-shadow:
    0 0 0 2px rgba(var(--celeste-rgb), .45),
    0 0 24px rgba(var(--celeste-rgb), .40),
    0 0 60px rgba(var(--celeste-rgb), .22),
    0 12px 26px rgba(0,0,0,.45);
  transition: box-shadow .25s ease, border-color .25s ease;
  position:relative; z-index:1;
}
#certModal .btn-close{ filter:invert(1); }

/* Intensifica halo al abrir */
#certModal.show .modal-content,
.modal.show .project-modal{
  box-shadow:
    0 0 0 2px rgba(var(--celeste-rgb), .55),
    0 0 32px rgba(var(--celeste-rgb), .46),
    0 0 90px rgba(var(--celeste-rgb), .25),
    0 14px 30px rgba(0,0,0,.5);
}

/* Bloom suave con pseudo-elemento (opcional ya incluido) */
#certModal .modal-content::after,
.project-modal::after{
  content:"";
  position:absolute; inset:-6px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 120% at 50% -10%,
              rgba(var(--celeste-rgb), .28) 0%,
              rgba(var(--celeste-rgb), .18) 25%,
              rgba(var(--celeste-rgb), .08) 55%,
              transparent 75%);
  filter: blur(8px); z-index:0;
}

/* Backdrop más oscuro para destacar el glow */
.modal-backdrop.show{ background-color:#060414; opacity:.85; }