/* ═══════════════════════════════════════════════════════════════════
   nav-sticky.css — Nav con position:sticky nativo.
   Compartido por: index.html, catalogo.php, producto.php, quiz.php,
   cliente/mi-cuenta.php. La sombra la alterna js/nav-sticky.js
   (index.html usa un script equivalente inline).

   Reemplaza al antiguo css/nav-fijo.css + js/nav-fijo.js (nav fixed movido con JS):
   · El nav NO es fixed ni se mueve con JS. Está en el flujo, justo debajo de la
     topbar. Al subir el scroll, el navegador lo pega en top:0 él solo (en el
     compositor, sin pasar por JavaScript), así que no puede quedar un hueco
     entre la topbar y el nav.
   · La altura NUNCA cambia (mismo padding en reposo y con scroll): el nav ocupa
     espacio real en el flujo, y si su alto cambiara el contenido de abajo
     saltaría. La única señal de "scrolled" es la sombra (opacidad, sin layout).
   · No hace falta reservar espacio (.topbar{margin-bottom}, body{padding-top}): el
     nav ya lo ocupa en el flujo. --nav-h es solo la referencia de altura para otras
     reglas (aside de catalogo.php), no una reserva.
   · Misma forma: base negra + ::before blanco con esquinas superiores redondeadas.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --nav-radio: 40px;
  --nav-h: 68px;   /* altura ÚNICA y constante del nav (no hay versión "compactada"). Otras reglas
                      (ej. el aside de filtros de catalogo.php) la usan para su offset. */
}

nav.nav-fijo {
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  background: #000;              /* base negra: se ve en el recorte de las esquinas */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);          /* fija: no cambia con el scroll ni con el contenido (avatar de 38px) */
  padding: 16px 36px;            /* constante: sin compactación */
  border-bottom: 0;
}

/* Forma blanca con las esquinas superiores redondeadas (sobre la base negra, bajo el contenido) */
nav.nav-fijo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  border-radius: var(--nav-radio) var(--nav-radio) 0 0;
}

/* Sombra: única señal de "scrolled". Se anima la opacidad (compuesta), sin afectar el layout. */
nav.nav-fijo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
  opacity: 0;
  transition: opacity .35s ease;
}
nav.nav-fijo.scrolled::after { opacity: 1; }

/* Íconos siempre a la derecha (el logo va absoluto, centrado). */
nav.nav-fijo .nav-actions { margin-left: auto; }

@media (max-width: 860px) {
  nav.nav-fijo { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  nav.nav-fijo::after { transition: none; }
}