/* ==========================================================================
   Header / navegación principal
   Dos barras: topbar utilitaria (fecha/hora + indicador de sesión) y barra
   principal (logo, links, buscador, acciones). El wrapper .site-header es
   sticky como bloque único: topbar y barra principal quedan SIEMPRE
   visibles, scrolles lo que scrolles — nada se oculta, nada cambia de fila.
   Al superar el scroll threshold (ver header.js) se agrega
   .site-header--scrolled, un ajuste puramente cosmético (menos padding/alto,
   sombra sutil) que no mueve elementos de una fila a otra.
   El indicador de sesión (nombre + avatar, solo si hay sesión — "Campus
   Virtual" ya cumple el rol de login) vive en la topbar, junto a la
   fecha/hora, y no en la barra principal: ahí hay espacio horizontal de
   sobra, y nombres largos no comprometen el layout de logo/links/buscador.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  transition: box-shadow var(--transition-base);
}

.site-header--scrolled {
  box-shadow: var(--shadow-md);
}

/* El header necesita más aire que el resto del sitio: 6 links + 2 botones +
   buscador no entran en los --container-max (1200px) que usa el resto de
   las secciones. Se ensancha solo acá, sin tocar .container en el resto
   del sitio. */
.site-header .container {
  max-width: calc(var(--container-max) + 220px);
}

/* ============================== TOPBAR ============================== */
/* Fondo más oscuro que --color-primary a propósito: es una franja delgada
   con texto chico, necesita más contraste del que da el violeta base. */

.site-header__topbar {
  background: var(--color-primary-dark);
}

.site-header__topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.55rem;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  transition: padding-block var(--transition-base);
}

.site-header--scrolled .site-header__topbar-inner {
  padding-block: 0.35rem;
}

.site-header__datetime {
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

/* ============================== INDICADOR DE SESIÓN ============================== */
/* Vive en la topbar (junto a la fecha/hora), no en la barra principal: ahí
   hay espacio horizontal de sobra y un nombre largo no compromete el
   layout de logo/links/buscador/CTAs. min-width:0 es necesario para que el
   ellipsis del nombre (ver .site-header__session-name) funcione dentro de
   un contenedor flex — sin esto el item no encoge por debajo de su
   contenido y el texto nunca se trunca.
   Al pasar el mouse (o tocar/enfocar — is-open via JS, para mobile y
   teclado) despliega un menú con "Cambiar contraseña" y "Cerrar sesión". */

.site-header__session {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
  min-width: 0;
}

/* .site-header__session-trigger fuerza su propio display:inline-flex, que
   pisaría [hidden] en el wrapper (misma especificidad, y las reglas de
   autor siempre le ganan a la hoja UA). Se refuerza acá para que el toggle
   de JS (session.hidden) realmente oculte todo el bloque cuando no hay
   sesión — en ese caso no se muestra nada en su lugar: "Campus Virtual" ya
   cumple el rol de "iniciar sesión". */
.site-header__session[hidden] {
  display: none;
}

.site-header__session-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
  padding: var(--space-3xs);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}

.site-header__session-trigger:hover,
.site-header__session.is-open .site-header__session-trigger {
  background: rgba(255, 255, 255, 0.12);
}

/* max-width + ellipsis: un nombre largo se trunca en vez de romper la fila
   de la topbar. flex-shrink implícito en el span (min-width:0 en los
   ancestros de arriba) es lo que permite que el ellipsis entre en juego. */
.site-header__session-name {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-white);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .site-header__session-name {
    display: none;
  }
}

/* Sin gap entre el trigger y el menú (top:100% justo pegado): un margen
   acá crearía una franja "muerta" donde el mouse deja de estar sobre
   .site-header__session al bajar del avatar al menú, y el :hover del
   padre (que es lo que mantiene el menú abierto) se cortaría de golpe. */
.site-header__session-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2xs);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-overlay);
}

.site-header__session:hover .site-header__session-menu,
.site-header__session.is-open .site-header__session-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site-header__session-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  color: var(--color-text);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.site-header__session-menu-item:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

.site-header__session-menu-item--danger:hover {
  color: var(--color-error);
}

/* flex-shrink:0 es lo que evita que el avatar se achique o se ovale cuando
   el nombre largo de al lado empuja: siempre círculo, siempre 32px. */
.site-header__avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-bg-muted);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.site-header__avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--color-success);
  animation: session-pulse 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.site-header__avatar--professional {
  background: var(--color-primary);
  color: var(--color-white);
}

.site-header__avatar--photo {
  background-size: cover;
  background-position: center;
}

@keyframes session-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}

.site-header__avatar-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-success);
  border: 2px solid var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .site-header__avatar::before {
    animation: none;
    display: none;
  }
}

/* ============================== BARRA PRINCIPAL ============================== */

.site-header__main {
  position: relative;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: var(--color-white);
  box-shadow: 0 1px 0 rgba(71, 39, 102, 0.08);
  transition: height var(--transition-base);
}

/* Ajuste cosmético al scrollear: solo reduce un poco el alto y achica el
   logo, la sombra la pone .site-header--scrolled sobre el bloque entero
   (ver arriba). Nunca oculta la topbar ni mueve elementos entre filas. */
.site-header--scrolled .site-header__main {
  height: calc(var(--header-height) - 10px);
}

.site-header--scrolled .site-header__logo img {
  height: 36px;
}

.site-header__inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-right: auto;
}

.site-header__logo img {
  height: 44px;
  width: auto;
  transition: height var(--transition-base);
}

/* Íconos de utilidad (buscador + botón de menú), siempre pegados al borde
   derecho del header, en desktop y en mobile por igual. */
.site-header__utility {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.site-nav__list {
  display: flex;
  gap: var(--space-lg);
}

.site-nav__list a {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-text);
  padding: var(--space-2xs) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  color: var(--color-primary);
  border-color: var(--color-accent);
}

/* Íconos de fila del drawer mobile (ver .site-nav__icon en la media query
   de abajo): ocultos en desktop, donde el nav es una lista horizontal de
   solo texto. */
.site-nav__icon {
  display: none;
}

/* Ítem "Inicio": solo existe en el drawer mobile (ver media query de
   abajo). En desktop el logo ya cumple ese rol y la nav horizontal no lo
   necesita — por eso arranca oculto acá. */
.site-nav__item--home {
  display: none;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2xs);
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__main,
  .site-header__topbar-inner {
    transition: none;
  }
}

/* El corte a menú hamburguesa arranca antes (1320px, no 900px): con 6
   secciones + buscador + 2 botones, la barra ya iba apretada en notebooks
   chicas mucho antes del corte a mobile — el contenedor del header no
   crece más allá de --container-max, así que ese ancho hay que ganarlo
   pasando la nav al panel offcanvas antes. */
@media (max-width: 1320px) {
  .nav-toggle {
    display: flex;
  }

  /* Scrim (fondo oscurecido + blur) detrás del panel flotante. Vive como
     ::before de .site-header (no de .site-nav) a propósito: .site-nav se
     anima con transform (ver más abajo), y un transform en un ancestro
     cambia el "containing block" de sus descendientes position:fixed —
     un ::before ahí adentro quedaría atado al recuadro chico del panel en
     vez de cubrir todo el viewport. .site-header no tiene transform, así
     que su ::before sí cubre la pantalla completa siempre. */
  .site-header::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) - 1);
    background: rgba(51, 27, 73, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .site-header.is-open::before {
    opacity: 1;
    pointer-events: auto;
  }

  /* Logo + buscador + botón cerrar pasan a ser su propia tarjeta flotante
     mientras el menú está abierto, con el mismo lenguaje visual (glass +
     radio + sombra) que el panel de navegación de abajo — para que dejen
     de leerse como una franja aparte y pasen a integrarse al mismo
     sistema flotante. El fondo+blur van en un ::before (no directo en
     .site-header__main) a propósito: .site-nav vive ANIDADO adentro de
     .site-header__main, y un backdrop-filter en un ancestro se vuelve el
     "containing block" de sus descendientes position:fixed — eso rompía
     por completo el top/left/width fixed de .site-nav. Un ::before no es
     ancestro de .site-nav, así que evita el problema. */
  .site-header.is-open .site-header__main {
    margin: var(--space-sm);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
  }

  .site-header.is-open .site-header__main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(250, 249, 252, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header.is-open .site-header__main::before {
      background: rgba(250, 249, 252, 0.96);
    }
  }

  /* Panel de navegación: flota con margen respecto a los bordes de
     pantalla (no full-bleed), fondo glass y sombra suave. El offset
     superior (--header-offset) lo calcula header.js a partir del alto
     real del header — no puede ser un valor fijo en CSS porque cambia
     entre el estado normal y el estado "scrolleado" (.site-header--scrolled
     reduce el alto del header). */
  .site-nav {
    position: fixed;
    top: calc(var(--header-offset, 124px) + var(--space-sm));
    right: var(--space-sm);
    left: var(--space-sm);
    /* height (no bottom): un .site-nav fixed que además es flex item de
       .site-header__inner y flex container de sus propios hijos no
       estira su alto de forma confiable con top+bottom en Chrome — con
       height explícito vía calc() no depende de ese stretch. */
    height: calc(100vh - var(--header-offset, 124px) - var(--space-sm) - var(--space-sm));
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-md);
    border-radius: 24px;
    background: rgba(250, 249, 252, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: scale(0.96);
    transform-origin: top right;
    pointer-events: none;
    overflow-y: auto;
    transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1), transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-nav {
      background: rgba(250, 249, 252, 0.97);
    }
  }

  .site-header.is-open .site-nav {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }

  /* Lista de links como card tipo "iOS Settings": filas con ícono + label,
     separadas por líneas finas de bajo contraste, sin bordes duros. El
     fondo propio (más blanco que el panel que la contiene) es lo que la
     lee como una tarjeta agrupada adentro del panel flotante. */
  .site-nav__list {
    flex-direction: column;
    gap: 0;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 18px;
    overflow: hidden;
  }

  .site-nav__list li + li {
    border-top: 1px solid rgba(71, 39, 102, 0.1);
  }

  .site-nav__list a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-md);
    border-bottom: none;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .site-nav__list a:hover,
  .site-nav__list a[aria-current="page"] {
    background: rgba(71, 39, 102, 0.08);
    color: var(--color-primary);
    border-color: transparent;
  }

  .site-nav__item--home {
    display: list-item;
  }

  .site-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--color-primary-light);
  }

  .site-nav__icon svg {
    width: 100%;
    height: 100%;
  }

  /* Acciones del menú móvil: separadas de la navegación por un divisor
     sutil y apiladas a ancho completo, para que no compitan visualmente
     con el listado de links. */
  .site-header__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(71, 39, 102, 0.1);
  }

  .site-header__actions .btn {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .site-header__topbar-inner {
    font-size: 0.7rem;
  }
}