/* base.css — lo comun a los 4 estilos.
   Aqui NO va nada que decida el layout: solo el reset, la franja, el selector y
   la degradacion sin JavaScript. El layout vive en el CSS de cada estilo, porque
   SPEC 9 exige cuatro layouts y no cuatro recolores.

   REGLA QUE SOSTIENE G9 y G10c: en este fichero NADA se oculta con opacity:0 ni
   display:none a la espera de que JavaScript lo enseñe. Las animaciones se hacen
   con gsap.from(), que oculta EN TIEMPO DE EJECUCION. Si GSAP no carga, o si el
   navegador tiene el JS apagado, la pagina se ve entera. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;line-height:1.6}
img{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:inherit}
h1,h2,h3{line-height:1.08;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* El selector es una barra baja FIJA (SPEC 8). Riesgo 7 de la SPEC: en movil se
   come pantalla y puede tapar el ultimo elemento. Se compensa reservando sitio
   abajo en el body, no confiando en que el contenido acabe antes. */
body[data-selector-visible="1"]{padding-bottom:calc(var(--sel-alto,88px) + env(safe-area-inset-bottom,0px))}

/* ── D2 (27/08): el enlace a /carta ────────────────────────────────────────
   Un boton, no una decision de estilo: hereda color y tipografia del estilo por
   `currentColor`. 48px de alto y 1rem de aire alrededor, que es lo que la guia de
   toque pide para algo que se pulsa con el pulgar en la barra de un bar. */
.ir-carta{margin:2.2rem 0;text-align:center}
.ir-carta-btn{display:inline-block;min-height:48px;line-height:1.2;
  padding:.95rem 1.6rem;border:2px solid currentColor;border-radius:4px;
  text-decoration:none;font-weight:700;letter-spacing:.04em;color:inherit}
.ir-carta-btn:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* ===== FRANJA / MARQUEE ================================================== */
.franja{overflow:hidden}
.marquee{display:flex;gap:2.5rem;white-space:nowrap;width:max-content;will-change:transform}
.marquee span{display:inline-block}

/* ===== VOLVER, ARRIBA (SPEC 8 linea 332) ================================= */
/* Fija arriba y alcanzable a cualquier altura del scroll. El destino lo decide
   el generador segun haya chat configurado o no; ver barra_vuelta() en
   plantillas/comun.py, donde esta escrita la decision de F1. */
.volver-chat{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;
  align-items:center;min-height:36px;padding:.35rem 1rem;
  font-size:.7rem;letter-spacing:.16em;text-decoration:none;
  background:#111;color:#fff}
body[data-volver-visible="1"]{padding-top:36px}

/* ===== SELECTOR DE ESTILOS ============================================== */
/* Cada boton va tematizado con SU estetica: es una muestra, no una etiqueta.
 *
 * DOS FILAS Y REJILLA, NO UNA TIRA CON SCROLL. Arreglo del 18/08; el motivo va
 * escrito porque la version anterior parecia correcta y no lo era:
 *
 *   .sel-tira era `display:flex; overflow-x:auto` con `scrollbar-width:none` Y
 *   `::-webkit-scrollbar{display:none}`, compartiendo fila con el boton verde.
 *   Los cuatro botones tematizados mas el verde no caben en el ancho de un
 *   movil, asi que el CUARTO -POP- se quedaba FUERA DE PANTALLA, y las dos
 *   reglas de scrollbar borraban la unica pista de que hubiera algo a la
 *   derecha. En el movil de Sergio se veian tres estilos.
 *
 *   SPEC 8 dice "selector de cuatro estilos SIEMPRE visible abajo". Un boton que
 *   hay que descubrir deslizando a ciegas no esta visible.
 *
 * Ahora: fila 1 = N columnas iguales que SIEMPRE caben; fila 2 = el verde a todo
 * el ancho. `--sel-n` lo escribe el generador con el numero real de estilos, para
 * que dar de alta un quinto no deje la rejilla cuadrada en 4 en silencio.
 *
 * Y esto ya no se comprueba contando ocurrencias en el HTML: banco/medir-encaje.py
 * lo RENDERIZA en un Chrome de verdad a 380 px y mide los rectangulos. Contar
 * botones fue exactamente el error que dejo pasar este fallo. */
.selector{position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;gap:.35rem;
  padding:.45rem .5rem calc(.45rem + env(safe-area-inset-bottom,0px));
  background:#12120f;border-top:1px solid #ffffff22}
.sel-tira{display:grid;grid-template-columns:repeat(var(--sel-n,4),minmax(0,1fr));gap:.35rem}
.sel-btn{min-width:0;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.5rem .25rem;border-radius:6px;text-decoration:none;
  font-size:clamp(.5rem,2.2vw,.72rem);letter-spacing:.02em;line-height:1.1;
  white-space:nowrap;overflow:hidden;border:2px solid transparent;cursor:pointer}
.sel-btn[aria-current="true"]{outline:2px solid #7ee27e;outline-offset:-4px}
/* El estilo que el dueno ha CERRADO con el boton verde queda marcado aparte de
   "el que estoy viendo": son dos cosas distintas y confundirlas es mentir. */
.sel-btn[data-elegido="1"]::after{content:"✓";margin-left:.35em;color:#2f8f3f;font-weight:700}

.sel-rustico{background:#2b1a0c;color:#f0e6cf;border-color:#8a5a33;
  font-family:"Alfa Slab One",Georgia,serif}
.sel-bistro{background:#fbf7ec;color:#2c2a24;border-color:#c9bfa4;
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:.9rem}
.sel-noche{background:#0b0b10;color:#8ff0ff;border-color:#2de2f0;
  font-family:"Oswald",Arial,sans-serif;text-transform:uppercase}
.sel-pop{background:#ffd93d;color:#20200f;border-color:#f06a2a;
  font-family:"Baloo 2",Verdana,sans-serif;font-weight:800;border-radius:999px}

/* ME VALE ESTE — SPEC 8 linea 331, "Boton verde para cerrar la eleccion".
 *
 * En F1 su respuesta es LOCAL y esta es la parte que hay que tener clara: marca
 * el estilo con un ✓, se pone en estado "elegido" y saca un aviso que dice la
 * verdad -que queda guardado en este movil y que todavia no se ha enviado a
 * nadie-. El cierre de verdad, el que se lo cuenta al sistema, es F2.
 *
 * Lo que NO puede volver a pasar: que se toque y no responda nada. Eso fue el
 * fallo del 18/08 en el movil de Sergio. El aviso y el ✓ son la respuesta, y
 * banco/medir-encaje.py PULSA el boton en un Chrome de verdad y comprueba que
 * algo cambia. */
.sel-vale{min-height:48px;width:100%;padding:.55rem 1rem;border:0;border-radius:6px;
  background:#2f8f3f;color:#fff;font:inherit;font-size:.78rem;letter-spacing:.1em;
  cursor:pointer}
.sel-vale:active{background:#27772f}
.sel-vale[data-elegido="1"]{background:#1f6b2c}

/* El aviso nace oculto por ATRIBUTO hidden, no por opacity ni display a la
   espera de JS: sin JS nunca aparece porque nunca se pulsa nada, y eso es
   correcto. Asi no rompe G9. */
.sel-aviso[hidden]{display:none}
.sel-aviso{margin:0;padding:.55rem .7rem;border-radius:6px;
  background:#1f6b2c;color:#fff;font-size:.78rem;line-height:1.35;text-align:center}
.sel-aviso b{display:block;font-size:.86rem;letter-spacing:.06em}

/* ===== PIN — la degradacion que mide G10c ================================
   El pin entra en los 4 estilos desde el 18/08 (Sergio lo midio en el movil real
   de Alvarito's y el gesto no tironea). Que estilos lo llevan lo decide
   `pin_pintxos_en` de la config, no este fichero.

   SIN JavaScript -html sin la clase .js- NO se toca nada: la via se queda con la
   reticula propia de su estilo y se recorre con el scroll de siempre. Antes aqui
   habia un `display:grid;grid-template-columns:1fr` que forzaba una columna en
   los cuatro y le cambiaba el layout a POP sin necesidad. La regla correcta es
   no meterse: lo unico que hay que garantizar sin JS es que no haya desborde
   horizontal, y eso se mide RENDERIZANDO con el JS apagado, no leyendo el CSS.

   Solo cuando el JS confirma que esta vivo la via pasa a fila, y solo entonces
   GSAP la fija. El ancho de cada pieza lo pone el CSS de su estilo. */
html.js .pintxos-via{display:flex;flex-wrap:nowrap;align-items:center;
  width:max-content;will-change:transform}
html.js .pintxos-nota{display:none}

@media (prefers-reduced-motion: reduce){
  /* Con movimiento reducido no hay pin y no hay fila: se vuelve al scroll normal
     del estilo. */
  html.js .pintxos-via{display:block;width:auto}
  .marquee{width:auto;flex-wrap:wrap;white-space:normal}
}