/* ═══════════════════════════════════════════════════════════════════════════
   LA BARRA SUPERIOR, POR TRAMOS DE ANCHO
   ═══════════════════════════════════════════════════════════════════════════

   Carga LA ÚLTIMA de las hojas generales (después de app, marca, oscuro y la
   portada), y por eso manda: la barra acumulaba parches en cuatro hojas que se
   pisaban unos a otros —se ve en los comentarios de app.css— y el último, del
   23-09-2026 (`.nav-links a{display:inline-flex}`, app.css), sacó a la vista
   en escritorio tres enlaces que eran sólo del móvil. Con sesión, a 1280 px, la
   barra se salía 409 px de la pantalla: el saldo, los puntos y «Mi cuenta»
   quedaban fuera. Rafael: «ese menú superior se descuadra».

   Los tramos (móvil primero; lo de escritorio es la excepción):

     A · ≤767      dos filas: logo · carrito · saldo · ☰   /   buscador entero
     B · 768–1139  una fila: logo · buscador elástico · botones · ☰
     C · ≥1140     una fila con los enlaces de la tienda a la vista y sin ☰
                   (con sesión son 4 enlaces, sin sesión 6: ver header.php)
     .nav--recogida  la pone app.js si aun así algo no cabe (un saldo de cinco
                   cifras, el enlace Admin, el nombre de otra marca): fuerza B.

   Medido en el banco en 13 anchos, con y sin sesión: pruebas/area-cliente.js.
   ═══════════════════════════════════════════════════════════════════════════ */

.nav-inner { position: relative; flex-wrap: nowrap }
.nav-logo  { order: 1; flex: 0 0 auto }
.nav-inner > .bus { order: 2; flex: 1 1 auto; min-width: 160px; max-width: 680px; margin: 0 }
/* El campo ocupa SU formulario. Antes el formulario crecía hasta 665 px y el
   campo se quedaba en los 230 de marca.css: el resto era un hueco muerto
   —el «mucho espacio» de la barra entre 1024 y 1279 px—. */
.nav-inner > .bus input,
.nav-inner > .bus input:focus { width: 100% }
.nav-actions { order: 3; margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap; gap: 8px }
.nav-toggle  { display: inline-flex }

/* El saldo: 44 px de alto como el resto de botones (medía 42), y texto oscuro
   sobre el cian. El blanco daba 2,66:1 de contraste, el mínimo es 4,5:1: el
   dato más mirado de la barra era el que peor se leía. */
.wallet-pill { height: 44px }
.wallet-pill, .wallet-pill:hover, .wallet-pill:focus, .wallet-pill:visited { color: #0A0A12 }

/* ── El panel del ☰ ──────────────────────────────────────────────────────────
   Anclado a la derecha bajo el botón que lo abre, no de lado a lado (a 1180 px
   medía 1.146 px de ancho con nueve palabras centradas). Filas de 46 px a la
   izquierda: se pulsa en toda la fila, no sólo sobre la palabra. */
.nav-links {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; left: auto;
  z-index: 70; width: min(560px, 100%);
  max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px);
  overflow-y: auto; overscroll-behavior: contain;
  grid-template-columns: 1fr 1fr; gap: 4px 16px; align-items: start;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.45); white-space: normal;
}
.nav-links.open { display: grid }
.nav:not(.nav--auth) .nav-links { width: min(300px, 100%); grid-template-columns: 1fr }
.nav:not(.nav--auth) .nav-grupo { display: none }
.nav-col   { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.nav-grupo { display: block; padding: 6px 12px 4px; font-size: 13px; font-weight: 700;
             letter-spacing: .06em; text-transform: uppercase; color: var(--muted-fg) }
.nav-links .nav-col a {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  min-height: 46px; padding: 10px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 600; line-height: 1.25; white-space: normal;
}
.nav-links .nav-col a:not(.active)::after { display: none }
/* Lo que la barra ya enseña no se repite en el panel (los puntos salían dos
   veces a diez centímetros). */
.nav-links a.menu-dup { display: none }
.nav-links .nav-store-label { padding: 6px 12px 0; font-size: 13px; color: var(--muted-fg) }

/* ── A · móvil ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .nav-inner { flex-wrap: wrap; row-gap: 8px }
  .nav-inner > .bus { order: 5; flex: 1 0 100%; max-width: none; min-width: 0 }
  .nav-actions { gap: 6px }
  .wallet-pill { padding: 0 10px; font-size: 13px; gap: 5px }
  /* Puntos, gift cards y «Mi cuenta» viven en el ☰: la primera fila ya no se
     parte (a 360 px la barra medía 180 px en tres filas). */
  .nav--auth .nav-actions .wallet-pill-puntos,
  .nav--auth .nav-actions .icon-btn-gift,
  .nav--auth .nav-actions .icon-btn-cuenta { display: none }
  .nav-links, .nav:not(.nav--auth) .nav-links { left: 0; right: 0; width: auto; grid-template-columns: 1fr }
  .nav-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px }
  .nav-col .nav-grupo { grid-column: 1 / -1 }
}
/* En los móviles más estrechos, una columna: «Tarjetas prepagadas» no cabe
   en media fila de 320 px sin partirse en tres líneas. */
@media (max-width: 379px) { .nav-col { grid-template-columns: 1fr } }
/* Y a ≤359 px el logo baja un poco y el saldo se aprieta: a 320 px el logo se
   quedaba solo en su fila y la barra volvía a medir 168 px en tres filas. */
@media (max-width: 359px) {
  .nav-logo img { height: 30px }
  .nav-inner { gap: 6px }
  .nav-actions { gap: 5px }
  .wallet-pill { padding: 0 8px; font-size: 12.5px; gap: 4px }
}

/* ── B · puntos y gift cards en el ☰ mientras no quepan en la barra ─────── */
@media (max-width: 1023px) {
  .nav--auth .nav-actions .wallet-pill-puntos,
  .nav--auth .nav-actions .icon-btn-gift { display: none }
  .nav-links a.menu-dup { display: flex }
}

/* ── C · los enlaces de la tienda, a la vista ──────────────────────────────── */
@media (min-width: 1140px) {
  .nav:not(.nav--recogida) .nav-links {
    display: flex; position: static; width: auto; max-height: none; overflow: visible;
    flex-direction: row; align-items: center; gap: 6px; order: 2; flex: 0 1 auto;
    background: none; border: 0; padding: 0; box-shadow: none; white-space: nowrap;
  }
  .nav:not(.nav--recogida) .nav-col-tienda { display: contents }
  .nav:not(.nav--recogida) .nav-col-cuenta,
  .nav:not(.nav--recogida) .nav-grupo { display: none }
  .nav:not(.nav--recogida) .nav-links .nav-col a {
    min-height: 44px; padding: 9px 12px; border-radius: 12px; font-size: 14px; white-space: nowrap }
  .nav:not(.nav--recogida) .nav-links .nav-col a:not(.active)::after { display: block }
  .nav:not(.nav--recogida) .nav-inner > .bus { order: 3; flex: 1 1 180px; min-width: 180px; max-width: 340px }
  .nav:not(.nav--recogida) .nav-actions { order: 4; margin-left: 0 }
  .nav:not(.nav--recogida) .nav-toggle { display: none }
}

/* ── La barra, alineada con el contenido ─────────────────────────────────────
   El contenido vive en .container (1200 px con 20 de relleno, 16 a ≤860): su
   borde está a 1160 px como mucho. La barra iba a 1200 (1240 con sesión) y con
   16 px de margen, así que su borde nunca caía donde empezaban el título y las
   tarjetas: 4 px de diferencia a 1024 y 40 a 1280. Ahora coinciden en todos los
   anchos. */
.nav { margin-left: 20px; margin-right: 20px }
.nav-inner, .nav--auth .nav-inner { max-width: 1160px }
@media (max-width: 860px) { .nav { margin-left: 16px; margin-right: 16px } }

/* ── El ☰, pulido ────────────────────────────────────────────────────────────
   · Iconos en una caja de ancho fijo y los enlaces de «Tienda», que no llevan
     icono, con el mismo sangrado: el texto de todas las opciones empieza en la
     misma vertical (había tres bordes distintos en un mismo panel).
   · La página de detrás se oscurece mientras está abierto: el panel flotaba
     sobre el contenido y asomaban píldoras y botones por los lados. */
.nav-links .nav-col a > span[aria-hidden] { display: inline-flex; justify-content: center; flex: 0 0 20px; width: 20px }
.nav--auth .nav-links .nav-col-tienda a { padding-left: 40px }
body:has(.nav-links.open)::after {
  content: ""; position: fixed; inset: 0; z-index: 40;
  background: rgba(5, 5, 10, .55);
}
/* Dentro de la cuenta, desde 1024 px, «Mi cuenta» ya está en la columna lateral:
   el ☰ no la repite (salía al lado, y con otra lista). */
@media (min-width: 1024px) {
  body:has(.cuenta-marco) .nav-col-cuenta { display: none }
}
/* ⚠️ El ancho del panel, SÓLO donde hay panel (el ☰). La primera versión iba en
   todo el tramo ≥1024 y, con más especificidad que el modo escritorio, dejaba
   la fila de enlaces en 300 px desde 1140: «Marcas» se metía debajo del
   buscador dentro de la cuenta. La barra no desbordaba, así que ni la prueba
   ni el vigilante lo veían; por eso pruebas/barra-tramos.js mira ahora
   también los solapes. */
@media (min-width: 1024px) and (max-width: 1139px) {
  body:has(.cuenta-marco) .nav--auth .nav-links { width: min(300px, 100%); grid-template-columns: 1fr }
  body:has(.cuenta-marco) .nav--auth .nav-links .nav-col-tienda a { padding-left: 12px }
  body:has(.cuenta-marco) .nav--auth .nav-links .nav-grupo { display: none }
}
@media (min-width: 1140px) {
  body:has(.cuenta-marco) .nav--auth.nav--recogida .nav-links { width: min(300px, 100%); grid-template-columns: 1fr }
  body:has(.cuenta-marco) .nav--auth.nav--recogida .nav-links .nav-col-tienda a { padding-left: 12px }
  body:has(.cuenta-marco) .nav--auth.nav--recogida .nav-links .nav-grupo { display: none }
}