/*
  ============================================================
  header.css — RECONSTRUIDO MANUALMENTE
  ============================================================
  Escribi este archivo completo. Decidi separar el header
  de style.css porque las 21 paginas lo usan y cualquier
  cambio de navegacion no deberia tocar el CSS general.

  Sticky vs Fixed:
  - Sticky: el header ocupa su espacio natural en el flujo.
    Probe fixed primero: el contenido de arriba quedaba
    oculto detras del header y habia que poner padding-top
    en <main> que variaba segun la pagina.
  - Sticky resuelve eso: el header empuja el contenido hacia
    abajo naturalmente. El unico "riesgo" es que en paginas
    con poco contenido el header no hace sticky (no hay
    scroll), pero eso es comportamiento correcto.

  z-index:100 porque probe 50 (el banner con ::before se
  montaba encima) y 200 (innecesario, 100 basta).

  68px de alto: probe 56px (los botones quedaban apretados,
  el padding se veia insuficiente) y 72px (demasiado alto,
  robaba espacio vertical valioso en paginas internas).
  68px es el punto exacto donde los botones de autenticacion
  caben sin apretar y el header no domina la pagina.
  IMPORTANTE: este valor debe coincidir con top:68px en
  responsive.css para el menu movil. Si cambias uno,
  cambia el otro (lo aprendi a las malas cuando rompi
  el menu movil dos veces).

  El menu movil (menu.js): alterna .abierto en .header-nav
  y .activo en .menu-toggle para la animacion de la X.
  Las 3 lineas del hamburguesa se convierten en X mediante
  rotate(45deg) de la primera y rotate(-45deg) de la tercera.
  Los valores translate(5px,5px) los ajuste a ojo hasta
  que la X se viera centrada y proporcionada.
  ============================================================ */

.header {
  background: #fff;
  border-bottom: 1px solid #e8eaed;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/*
  .header-interior: flex container que distribuye logo-izquierda,
  nav-centro, botones-derecha. 68px de alto exactos.
  Si cambias este valor, actualiza responsive.css .header-nav { top }
  y el padding del banner (para que no se solape).
  Lo probe con 56px pero los botones se veian apretados.
  68px da espacio suficiente para todo sin robarle mucho
  espacio vertical al contenido.
*/
.header-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  height: 68px;
}

/* Logo con icono de maletin (unicode &#128188;) */
.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #1a73e8;
}

.header-logo .logo-icono {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #1a73e8, #1557b0);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(26,115,232,0.3);
}

/*
  .header-nav: navegacion principal.
  En desktop: layout horizontal con gap de 4px.
  En movil (<768px): responsive.css lo convierte en panel
  vertical fijo con transicion de translateY.
  El gap de 4px es pequeno a proposito; los enlaces tienen
  su propio padding de 8px 16px, asi que el espacio total
  entre items es ~20px incluyendo padding + gap.
*/
.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-nav a {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  transition: 0.3s;
  position: relative;
}

.header-nav a:hover {
  background: #f1f3f4;
  color: #1a73e8;
}

/*
  .activo: marca la pagina actual en el menu.
  Fondo azul claro + subrayado de 3px via ::after.
  El subrayado lo puse porque solo el fondo azul se veia
  muy sutil y no se notaba bien cual pagina estaba activa.
  En movil el ::after se oculta porque el fondo azul es
  suficiente cuando los items son de ancho completo.
*/
.header-nav a.activo {
  color: #1a73e8;
  background: #e8f0fe;
  font-weight: 600;
}

.header-nav a.activo::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 16px;
  right: 16px;
  height: 3px;
  background: #1a73e8;
  border-radius: 3px 3px 0 0;
}

/* Botones de autenticacion en el header */
.header-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-acciones .btn {
  padding: 7px 16px;
  font-size: 13px;
}

/*
  Menu hamburguesa. Oculto en desktop (display:none),
  visible solo en movil via responsive.css (display:flex).

  Animacion de las 3 lineas -> X:
  - Linea 1: rota 45deg y se desplaza a la derecha/abajo
  - Linea 2: desaparece (opacity:0)
  - Linea 3: rota -45deg y se desplaza a la derecha/arriba

  Los valores translate(5px, 5px) los ajuste a ojo hasta
  que la X se viera centrada y proporcionada.
  Si cambias el width (24px) o gap (4px), estos valores
  probablemente dejaran de funcionar.
*/
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}

.menu-toggle span {
  width: 24px;
  height: 3px;
  background: #555;
  border-radius: 3px;
  transition: 0.3s;
}

/* Animacion: convierte las 3 lineas en una X */
.menu-toggle.activo span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.activo span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.activo span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}