@charset "utf-8";
/* Inter v4. Si no hay red, el sistema cae a la pila nativa sin romper nada:
   todas las medidas de este archivo son absolutas, no dependen de la fuente. */
@import url("https://rsms.me/inter/inter.css");

/* =========================================================================
   TACOTE MX · SISTEMA
   Hoja única. Sustituye a assets/estilos.css.

   Principio: la jerarquía se construye con LUMINOSIDAD, ESPACIO y TAMAÑO.
   El color no jerarquiza: sólo informa (verde/ámbar/rojo = estado de pago).
   El oro de marca aparece dos o tres veces por pantalla, nunca más.

   Todo valor de este archivo sale de un token. Si ves un número suelto en un
   componente, es un error.
   ========================================================================= */


/* =========================================================================
   1. TOKENS
   ========================================================================= */

:root {

    /* ---------------------------------------------------------------------
       1.1 Tipografía — escala modular de razón ~1.25 redondeada a enteros.
       El cuerpo es 14px, no 16px: un producto denso con cuerpo de 16 parece
       una página de aterrizaje. La excepción dura son los campos de texto,
       que van a 16px o iOS Safari hace zoom al enfocar y rompe la maqueta
       justo en el segundo en que 33 personas están apartando.
       --------------------------------------------------------------------- */

    --f-11: 11px;   --f-12: 12px;   --f-13: 13px;   --f-14: 14px;
    --f-16: 16px;   --f-18: 18px;   --f-21: 21px;   --f-26: 26px;
    --f-32: 32px;   --f-40: 40px;   --f-52: 52px;

    /* Alturas de línea ABSOLUTAS y múltiplos de 4: así dos columnas con
       tipografías distintas alinean sus líneas base en la misma retícula. */
    --lh-11: 16px;  --lh-12: 16px;  --lh-13: 20px;  --lh-14: 20px;
    --lh-16: 24px;  --lh-18: 24px;  --lh-21: 28px;  --lh-26: 32px;
    --lh-32: 36px;  --lh-40: 44px;  --lh-52: 52px;
    --lh-lectura: 1.6;              /* sólo para párrafos largos */

    /* Interletrado por la curva de métricas dinámicas de Inter:
       tracking = -0.0223 + 0.185·e^(-0.1745·z), z en px.
       Negativo y creciente en títulos; positivo en versalitas. */
    --tr-11:  0.005em;  --tr-12:  0em;      --tr-13: -0.003em;
    --tr-14: -0.006em;  --tr-16: -0.011em;  --tr-18: -0.014em;
    --tr-21: -0.018em;  --tr-26: -0.020em;  --tr-32: -0.022em;
    --tr-40: -0.022em;  --tr-52: -0.0223em;
    --tr-versalita: 0.07em;         /* mayúsculas de 11px: al revés, abren */

    /* Sólo tres pesos en toda la interfaz. El 700 está prohibido: cuando
       todo grita, nada jerarquiza. */
    --p-normal: 400;
    --p-medio:  500;
    --p-fuerte: 600;

    --fuente: "InterDisplay", "InterVariable", "Inter",
              -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
              "Segoe UI", Roboto, system-ui, sans-serif;
    --fuente-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
                   "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;

    /* ---------------------------------------------------------------------
       1.2 Espaciado — unidad base 4. Sin valores intermedios inventados.
       --------------------------------------------------------------------- */

    --e-2:  2px;    --e-4:  4px;    --e-8:  8px;    --e-12: 12px;
    --e-16: 16px;   --e-20: 20px;   --e-24: 24px;   --e-32: 32px;
    --e-40: 40px;   --e-48: 48px;   --e-64: 64px;   --e-80: 80px;
    --e-96: 96px;

    /* ---------------------------------------------------------------------
       1.3 Medidas de dibujo y de control.
       La densidad se define por la ALTURA DEL CONTROL, no por el relleno.
       --------------------------------------------------------------------- */

    --grosor-1: 1px;                /* filete */
    --grosor-2: 2px;                /* regla, subrayado activo, anillo */
    --grosor-3: 3px;
    --punto:    8px;                /* punto de estado */
    --ico-16: 16px; --ico-20: 20px; --ico-24: 24px; --ico-40: 40px;

    --alto-xs: 24px;
    --alto-s:  28px;
    --alto-m:  32px;
    --alto-l:  40px;
    --alto-xl: 44px;                /* área táctil mínima (Apple HIG) */
    --alto-xxl: 48px;

    --alto-encabezado: 56px;        /* fijo: la barra pegajosa depende de él */
    /* Altura reservada de la cuenta regresiva. Medida sobre el estado más
       alto (reloj + fecha a dos renglones) para que el instante de la
       apertura, cuando el reloj se sustituye por el aviso, no mueva ni un
       píxel de la página. Ese es EL momento del producto. */
    --alto-regresiva: 196px;
    --alto-regresiva-movil: 204px;
    --ancho-contenedor: 1120px;
    --ancho-angosto: 560px;
    --ancho-lectura: 65ch;
    --ancho-modal: 420px;
    --ancho-acceso: 380px;
    --ancho-aviso: 480px;           /* el aviso flotante de deshacer */
    --ancho-doc: 720px;

    /* Anchos de columna. Todos son mínimos de retícula, no medidas fijas. */
    --col-club: 288px;              /* mínimo de columna en la cuadrícula */
    --col-portada: 240px;
    --col-ficha: 112px;
    --col-resumen: 120px;
    --col-cifra: 128px;
    --col-campo: 200px;
    --col-precio: 120px;
    --min-boton: 96px;
    --min-boton-ancho: 160px;
    --alto-sugerencias: 280px;
    --alto-lista-min: 240px;       /* acota el colapso mientras carga */

    --r-1:  4px;
    --r-2:  6px;
    --r-3: 10px;
    --r-4: 14px;
    --r-full: 999px;

    /* ---------------------------------------------------------------------
       1.4 Color — escala funcional. Cada paso tiene un trabajo asignado.
       Neutros con matiz CÁLIDO (OKLCh h≈85, croma 0.005–0.008): ni negro
       puro ni el azul-gris de GitHub, que es lo que el cliente ya había
       visto mil veces. El matiz cálido emparenta el gris con el oro de
       marca, así el acento no se ve pegado encima.
       --------------------------------------------------------------------- */

    /* Superficies. L* = .178 / .208 / .238 / .272 / .310 / .355 */
    --s-app:   #12110F;   /* fondo de la aplicación */
    --s-1:     #191815;   /* bloque elevado */
    --s-2:     #201F1B;   /* componente en reposo */
    --s-3:     #292723;   /* componente en hover */
    --s-4:     #32302C;   /* componente activo / seleccionado */
    --s-5:     #3E3C37;   /* sólido neutro */

    /* Texto. Nunca #fff: el blanco puro sobre fondo oscuro produce halo. */
    --t-1:     #EEEDE9;   /* primario */
    --t-2:     #B5B2AD;   /* secundario */
    --t-3:     #87847F;   /* terciario, etiquetas */
    /* Sube de #65635E a #837F79 porque el anterior daba 3,17:1 sobre el fondo
       y este token viste las etiquetas de 11 y 12 px que sustituyen al color:
       "Apartado", la categoría, el "MXN". Justo donde el diseño presume no
       depender del color, el texto no se leía. Ahora 4,8:1, sobre AA. */
    --t-4:     #837F79;   /* apagado: etiquetas pequeñas, aún legible */
    --t-5:     #65635E;   /* solo trazos decorativos, nunca texto */

    /* Bordes translúcidos: se adaptan a cualquier superficie debajo.
       La profundidad se construye con 1px translúcido + 2-4% de diferencia
       de luminosidad, no con sombras grandes. */
    --b-1: rgba(255, 250, 235, .07);   /* filete sutil, no interactivo */
    --b-2: rgba(255, 250, 235, .12);   /* borde interactivo en reposo */
    --b-3: rgba(255, 250, 235, .20);   /* borde de énfasis / hover */

    /* Oro de marca. Uso contado: logotipo, categoría premium, un realce. */
    --oro:      #E3B551;
    --oro-alto: #F1C772;
    --oro-txt:  #F2CE85;
    --oro-tinta:#201808;
    --oro-velo: rgba(227, 181, 81, .12);

    /* Acción primaria: casi blanco. La máxima jerarquía es luminosidad,
       no un color de marca. Es lo que hacen Linear, Arc y Vercel. */
    --pri:       #F3F2EF;
    --pri-alto:  #FFFFFF;
    --pri-tinta: #151411;

    /* Estado. NO son acento: sólo texto, punto y regla. Nunca fondo pleno. */
    --verde:      #5BC27C;
    --verde-txt:  #91DCA7;
    --verde-velo: rgba(91, 194, 124, .12);
    --ambar:      #FBA355;
    --ambar-txt:  #FFC080;
    --ambar-velo: rgba(251, 163, 85, .12);
    --rojo:       #E85C57;
    --rojo-txt:   #F9978C;
    --rojo-velo:  rgba(232, 92, 87, .12);
    --azul:       #5BA6EA;
    --azul-txt:   #8EC5FA;

    /* Categorías del break. Monocromas a propósito: la categoría se lee por
       LUMINOSIDAD, de más clara a más apagada, así se puede escanear por
       valor. Cuatro matices distintos sólo producen un arcoíris ilegible. */
    /* La categoría se lee por LUMINOSIDAD, no por color: cuatro pasos de la
       misma escala de grises. Antes premium era oro, y como el orden por
       omisión agrupa a los premium arriba, la primera pantalla acababa con
       catorce marcas doradas. El oro queda reservado al logo: si el acento
       aparece en todas partes, deja de acentuar. */
    --cat-premium: var(--t-1);
    --cat-alto:    var(--t-2);
    --cat-medio:   var(--t-3);
    --cat-bajo:    var(--t-4);

    /* ---------------------------------------------------------------------
       1.5 Sombras por capas. Sutiles: una sombra negra sobre un fondo casi
       negro no se ve, sólo cuesta pintar.
       --------------------------------------------------------------------- */

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .40);
    --sombra-2: 0 2px 4px -2px rgba(0, 0, 0, .40),
                0 6px 16px -6px rgba(0, 0, 0, .45);
    --sombra-3: 0 8px 16px -8px rgba(0, 0, 0, .50),
                0 24px 56px -16px rgba(0, 0, 0, .70);

    /* ---------------------------------------------------------------------
       1.6 Movimiento — dos rangos y curvas declaradas.
       Nunca ease/linear por defecto. Techo de 320ms.
       --------------------------------------------------------------------- */

    --d-toque:  90ms;    /* hover y pulsación */
    --d-corta: 140ms;
    --d-media: 220ms;    /* entradas y salidas */
    --d-larga: 320ms;    /* barras de progreso, hojas */

    --c-salida:  cubic-bezier(.16, 1, .3, 1);      /* desacelera al llegar */
    --c-entrada: cubic-bezier(.6, 0, .9, .3);
    --c-suave:   cubic-bezier(.32, .72, 0, 1);
    --c-firme:   cubic-bezier(.2, 0, 0, 1);

    /* ---------------------------------------------------------------------
       1.7 Compatibilidad. El JavaScript y los bloques <style> heredados
       piden estas variables por nombre. Se conservan como alias del sistema
       nuevo para no romper nada; no usar en código nuevo.
       --------------------------------------------------------------------- */

    --fondo:    var(--s-app);
    --fondo-2:  var(--s-1);
    --fondo-3:  var(--s-2);
    --borde:    var(--b-2);
    --texto:    var(--t-1);
    --texto-2:  var(--t-2);
    --acento:   var(--oro);
    --acento-2: var(--oro-alto);
    --premium:  var(--cat-premium);
    --alto:     var(--cat-alto);
    --medio:    var(--cat-medio);
    --bajo:     var(--cat-bajo);
    --radio:    var(--r-3);
    --radio-sm: var(--r-2);
    --sombra:   var(--sombra-2);
}


/* =========================================================================
   2. REINICIO Y BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-color: var(--s-4) transparent;
    scrollbar-width: thin;
}

body {
    background: var(--s-app);
    color: var(--t-1);
    font-family: var(--fuente);
    font-size: var(--f-14);
    line-height: var(--lh-14);
    letter-spacing: var(--tr-14);
    font-weight: var(--p-normal);
    font-optical-sizing: auto;
    font-synthesis-weight: none;     /* prohibido el negrita sintético */
    font-feature-settings: "cv05" 1; /* la ele con cola: se distingue del 1 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100%;
    /* clip, no hidden: recorta un desbordamiento accidental sin convertir al
       body en contenedor de desplazamiento (eso rompería position: sticky). */
    overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    background: none;
    border: 0;
}

button { cursor: pointer; }

button:disabled, a[aria-disabled="true"] { cursor: not-allowed; }

ul, ol { list-style: none; }

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--oro-velo); color: var(--t-1); }

::-webkit-scrollbar { width: var(--e-8); height: var(--e-8); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--s-4);
    border-radius: var(--r-full);
    border: var(--grosor-2) solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--s-5); background-clip: padding-box; }

/* Foco: sólo para teclado, y con outline (no altera la maqueta ni un píxel).
   El desplazamiento deja ver el fondo, así el anillo se lee sobre cualquier
   superficie sin necesidad de un segundo anillo. */
:focus { outline: none; }
:focus-visible {
    outline: var(--grosor-2) solid var(--oro-txt);
    outline-offset: var(--grosor-2);
    border-radius: var(--r-1);
}


/* =========================================================================
   3. TIPOGRAFÍA
   ========================================================================= */

h1, h2, h3, h4 {
    font-weight: var(--p-fuerte);
    color: var(--t-1);
    text-wrap: balance;
}

h1 { font-size: var(--f-32); line-height: var(--lh-32); letter-spacing: var(--tr-32); }
h2 { font-size: var(--f-21); line-height: var(--lh-21); letter-spacing: var(--tr-21); }
h3 { font-size: var(--f-16); line-height: var(--lh-16); letter-spacing: var(--tr-16); }
h4 { font-size: var(--f-14); line-height: var(--lh-14); letter-spacing: var(--tr-14); }

p { text-wrap: pretty; }

strong, b { font-weight: var(--p-medio); color: var(--t-1); }

small { font-size: var(--f-12); line-height: var(--lh-12); letter-spacing: var(--tr-12); }

code, kbd, samp, .mono {
    font-family: var(--fuente-mono);
    font-size: 0.92em;
    letter-spacing: 0;
    font-variant-numeric: slashed-zero;
}

/* Versalita: 11px, mayúsculas, interletrado ABIERTO. Una versalita apretada
   es la marca de la interfaz barata. */
.etq, .tier, .reloj-etq, .titulo-reg, .etiqueta,
.cifra .etq, .folio .etq, .total-caja .etq {
    font-size: var(--f-11);
    line-height: var(--lh-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    font-weight: var(--p-medio);
    color: var(--t-3);
    font-feature-settings: "cv05" 1, "case" 1;
}

/* Cifras tabulares en todo número que cambie, se compare o se apile.
   Sin esto la regresiva se mueve horizontalmente cada segundo (el 1 es más
   angosto que el 8) y app.js la repinta cuatro veces por segundo. */
.reloj-num, .monto, .precio, .val, .valor, .num, .total, .cifra .val,
.reloj-espera, .ref-grande, .folio, .contadores b, .tel,
.total-caja .monto, .datos-pago .linea span:last-child,
#regresiva, #cobrado, #meta, #c-total, #c-disponibles, #c-apartados,
#listo-monto, #modal-precio, table.rep .num, table.rep th.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Claves de rastreo y folios: cero rebanado, para no confundir 0 con O. */
.ref-grande, .ref-grande .valor, .folio .num, .dato-copiable .val {
    font-variant-numeric: tabular-nums slashed-zero;
}


/* =========================================================================
   4. COMPONENTES
   ========================================================================= */

/* -------------------------------------------------------------------------
   4.1 Estructura: encabezado, navegación, contenedor
   ------------------------------------------------------------------------- */

.encabezado {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--alto-encabezado);
    background: var(--s-app);
    background: color-mix(in srgb, var(--s-app) 88%, transparent);
    backdrop-filter: blur(var(--e-12)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--e-12)) saturate(1.4);
    border-bottom: var(--grosor-1) solid var(--b-1);
}

.encabezado-interior {
    max-width: var(--ancho-contenedor);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--e-16);
    display: flex;
    align-items: center;
    gap: var(--e-24);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--e-4);
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-versalita);
    font-weight: var(--p-fuerte);
    text-transform: uppercase;
    white-space: nowrap;
    flex: 0 0 auto;
}
.logo .taco { color: var(--t-1); }
/* Uso 1 de 3 del oro en pantalla: la marca. */
.logo .mx {
    color: var(--oro);
    border: var(--grosor-1) solid var(--b-2);
    border-radius: var(--r-1);
    padding: 0 var(--e-4);
    font-size: var(--f-11);
    line-height: var(--lh-16);
}

.nav {
    display: flex;
    align-items: center;
    /* Sin min-width:0 un hijo flexible con desplazamiento propio impone su
       ancho máximo al padre y desborda la página en el celular. */
    min-width: 0;
    flex: 0 1 auto;
    gap: var(--e-20);
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
    color: var(--t-3);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
    white-space: nowrap;
    height: 100%;
    display: flex;
    align-items: center;
    /* La regla inferior existe siempre, transparente: al activarse no mueve
       nada. Un estado que empuja la maqueta se siente barato. */
    border-bottom: var(--grosor-2) solid transparent;
    transition: color var(--d-toque) var(--c-firme),
                border-color var(--d-toque) var(--c-firme);
}
.nav a:hover { color: var(--t-2); }
.nav a.activo { color: var(--t-1); border-bottom-color: var(--t-1); }
.nav a:active { color: var(--t-1); }

.envivo {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--e-8);
    font-size: var(--f-11);
    line-height: var(--lh-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    font-weight: var(--p-medio);
    color: var(--t-3);
    white-space: nowrap;
    flex: 0 0 auto;
}

/* El punto no parpadea: parpadear para siempre dentro de un encabezado fijo
   es ruido. Late el halo, que es composición pura y casi imperceptible. */
.punto-vivo {
    position: relative;
    width: var(--punto);
    height: var(--punto);
    border-radius: 50%;
    background: var(--rojo);
    flex: 0 0 auto;
}
.punto-vivo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--rojo);
    animation: halo 2400ms var(--c-salida) infinite;
}
@keyframes halo {
    0%   { transform: scale(1);   opacity: .5; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

.contenedor {
    max-width: var(--ancho-contenedor);
    margin: 0 auto;
    padding: var(--e-32) var(--e-16) var(--e-96);
}
.contenedor.angosto, .angosto {
    max-width: var(--ancho-angosto);
}

/* -------------------------------------------------------------------------
   4.2 Portada del break
   ------------------------------------------------------------------------- */

.portada {
    display: grid;
    grid-template-columns: var(--col-portada) minmax(0, 1fr);
    gap: var(--e-40);
    align-items: start;
    padding-bottom: var(--e-40);
    margin-bottom: var(--e-32);
    border-bottom: var(--grosor-1) solid var(--b-1);
}

/* Placa del producto: superficie, filete y tipografía. Sin degradado
   radial ni emoji de trofeo haciendo de héroe. */
.portada-imagen {
    aspect-ratio: 4 / 5;
    border: var(--grosor-1) solid var(--b-1);
    border-radius: var(--r-3);
    background: var(--s-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e-12);
    text-align: center;
    padding: var(--e-24);
}
/* Marca de caja sellada dibujada con bordes: sin emoji, idéntica en todos
   los sistemas operativos. */
.portada-imagen .copa {
    font-size: 0;
    position: relative;
    width: var(--ico-40);
    height: var(--ico-40);
    border: var(--grosor-1) solid var(--b-3);
    border-radius: var(--r-2);
    margin-bottom: var(--e-4);
}
.portada-imagen .copa::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: var(--grosor-1);
    background: var(--b-3);
}
.portada-imagen .copa::after {
    content: "";
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: var(--grosor-1);
    background: var(--b-3);
}
.portada-imagen .marca-producto {
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    font-weight: var(--p-medio);
    color: var(--t-1);
}
.portada-imagen .sub-producto {
    font-size: var(--f-12);
    line-height: var(--lh-12);
    letter-spacing: var(--tr-12);
    color: var(--t-3);
}

.etiqueta-formato {
    display: inline-flex;
    align-items: center;
    height: var(--alto-xs);
    padding: 0 var(--e-8);
    border: var(--grosor-1) solid var(--b-2);
    border-radius: var(--r-1);
    font-size: var(--f-11);
    line-height: var(--lh-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    font-weight: var(--p-medio);
    color: var(--t-2);
    margin-bottom: var(--e-16);
}

.portada h1 {
    font-size: var(--f-40);
    line-height: var(--lh-40);
    letter-spacing: var(--tr-40);
    margin-bottom: var(--e-8);
    /* Reserva medida contra el contenido REAL, no contra un renglón. Los
       títulos del sector siguen una convención larga y rondan los 85
       caracteres: "2025-26 Topps Chrome UEFA Club Competitions Hobby 2 Box
       Break #1". A este tamaño son dos renglones en escritorio. Reservar uno
       solo hacía que la página diera un salto al llegar los datos. */
    min-height: calc(var(--lh-40) * 2);
}

.portada .subtitulo,
.subtitulo {
    color: var(--t-2);
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-16);
    max-width: var(--ancho-lectura);
    margin-bottom: var(--e-24);
    min-height: calc(var(--lh-16) * 2);
}

/* Ficha técnica: pares etiqueta/valor separados por filete vertical.
   Sin cajas: la proximidad basta para agrupar (dentro 4px, entre 24px). */
.ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--col-ficha), 1fr));
    gap: var(--e-16) var(--e-24);
    padding: var(--e-16) 0;
    border-top: var(--grosor-1) solid var(--b-1);
    border-bottom: var(--grosor-1) solid var(--b-1);
    margin-bottom: var(--e-24);
    min-height: var(--e-64);         /* reserva: se llena por JS */
}
.ficha-dato { display: flex; flex-direction: column; gap: var(--e-4); }
.ficha-dato .val {
    font-size: var(--f-14);
    line-height: var(--lh-14);
    letter-spacing: var(--tr-14);
    font-weight: var(--p-medio);
    color: var(--t-1);
}

/* -------------------------------------------------------------------------
   4.3 Escasez
   El único indicador que todas las tiendas serias repiten. Aquí es una
   línea de texto con una barra fina, no una alerta de colores.
   ------------------------------------------------------------------------- */

.escasez {
    display: flex;
    align-items: center;
    gap: var(--e-12);
    min-height: var(--alto-m);       /* reserva la altura desde el primer
                                        pintado: sin salto al llenarse */
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
    font-weight: var(--p-medio);
    color: var(--t-2);
    margin-bottom: var(--e-16);
}
.escasez:empty { border: 0; background: none; }   /* vacío = invisible, no roto */
.escasez.pocos { color: var(--ambar-txt); }
.escasez.lleno { color: var(--verde-txt); }
.escasez .barrita {
    flex: 1;
    height: var(--grosor-3);
    min-width: var(--e-64);
    background: var(--b-1);
    border-radius: var(--r-full);
    overflow: hidden;
}
.escasez .barrita i {
    display: block;
    height: 100%;
    background: currentColor;
    border-radius: var(--r-full);
    /* La barra sí puede animar: cambia como mucho una vez cada 3 s. */
    transition: width var(--d-larga) var(--c-salida);
}
.modal .escasez { margin-bottom: var(--e-16); font-size: var(--f-12); }

/* -------------------------------------------------------------------------
   4.4 Cuenta regresiva — el elemento más importante de la página pública

   app.js reconstruye este subárbol cada 250 ms. Por eso aquí:
     · CERO transiciones y CERO animaciones (parpadearían para siempre),
     · cifras tabulares y anchos mínimos reservados por bloque,
     · altura del bloque completo reservada, para que el instante de la
       apertura —cuando el reloj se sustituye por el aviso— no brinque.
   La sensación de instrumento de precisión viene de la estabilidad
   numérica, no del movimiento.
   ------------------------------------------------------------------------- */

.regresiva {
    min-height: var(--alto-regresiva);
    padding: var(--e-20) 0 0;
    border-top: var(--grosor-1) solid var(--b-2);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.regresiva .titulo-reg { color: var(--t-3); margin-bottom: var(--e-16); }
.regresiva.abierto { border-top-color: var(--verde); }
.regresiva.abierto .titulo-reg { color: var(--verde-txt); }

.reloj {
    display: flex;
    align-items: flex-start;
    gap: var(--e-4);
}
.reloj-bloque {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e-8);
    min-width: var(--e-64);          /* ancho fijo: nada se corre al cambiar */
}
.reloj-num {
    display: block;
    font-size: var(--f-52);
    line-height: var(--lh-52);
    letter-spacing: var(--tr-52);
    font-weight: var(--p-fuerte);
    color: var(--t-1);
    font-feature-settings: "tnum" 1, "ss01" 1;
}
.reloj-etq { color: var(--t-3); }
.reloj-sep {
    font-size: var(--f-40);
    line-height: var(--lh-52);       /* misma caja que el número: alinea */
    font-weight: var(--p-normal);
    color: var(--t-4);
    padding-right: var(--e-4);
}

.hora-local {
    margin-top: var(--e-16);
    font-size: var(--f-12);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-12);
    color: var(--t-3);
    max-width: var(--ancho-lectura);
}
.hora-local strong { color: var(--t-2); font-weight: var(--p-medio); }

.aviso-abierto {
    display: flex;
    align-items: center;
    gap: var(--e-12);
    font-size: var(--f-26);
    line-height: var(--lh-26);
    letter-spacing: var(--tr-26);
    font-weight: var(--p-fuerte);
    color: var(--verde-txt);
}
.aviso-abierto .punto-vivo { background: var(--verde); }
.aviso-abierto .punto-vivo::after { background: var(--verde); }

/* -------------------------------------------------------------------------
   4.5 Barra de estado y filtros
   ------------------------------------------------------------------------- */

.barra {
    position: sticky;
    top: calc(var(--alto-encabezado) - var(--grosor-1));
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-16);
    padding: var(--e-12) 0;
    margin-bottom: var(--e-8);
    background: var(--s-app);
    background: color-mix(in srgb, var(--s-app) 92%, transparent);
    backdrop-filter: blur(var(--e-12));
    -webkit-backdrop-filter: blur(var(--e-12));
    border-bottom: var(--grosor-1) solid var(--b-1);
}

.contadores {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    min-width: 0;
    gap: var(--e-20);
    font-size: var(--f-12);
    line-height: var(--lh-12);
    letter-spacing: var(--tr-12);
    color: var(--t-3);
}
.contadores > div { display: flex; align-items: baseline; gap: var(--e-4); }
.contadores b {
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-16);
    font-weight: var(--p-fuerte);
    color: var(--t-1);
}
.c-total b       { color: var(--t-1); }
.c-disponibles b { color: var(--verde-txt); }
.c-apartados b   { color: var(--t-2); }

.filtros { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; min-width: 0; }
/* El separador del HTML es un <span> vacío con estilo en línea: sin altura
   propia salta de renglón en el celular. Aquí se le da caja. */
.filtros > span {
    flex: 0 0 auto;
    align-self: center;
    height: var(--e-20);
    margin: 0 var(--e-4);
}

.filtro {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--alto-m);
    padding: 0 var(--e-12);
    border: var(--grosor-1) solid transparent;
    border-radius: var(--r-2);
    background: transparent;
    color: var(--t-3);
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
    font-weight: var(--p-medio);
    white-space: nowrap;
    transition: background-color var(--d-toque) var(--c-firme),
                color var(--d-toque) var(--c-firme),
                border-color var(--d-toque) var(--c-firme);
}
/* El control mide 32px pero el área táctil llega a 44: el pulgar no falla. */
.filtro::after {
    content: "";
    position: absolute;
    inset: calc((var(--alto-xl) - var(--alto-m)) / -2) 0;
}
.filtro:hover { color: var(--t-1); background: var(--s-2); }
.filtro:active { background: var(--s-3); }
.filtro.activo {
    background: var(--s-3);
    border-color: var(--b-2);
    color: var(--t-1);
}

/* -------------------------------------------------------------------------
   4.6 Cuadrícula de clubes

   No son tarjetas: son 33 renglones de una lista, alineados en columnas,
   separados por un filete. Con 33 elementos en un celular eso se escanea de
   un vistazo; seis columnas de cajas iguales, no.
   Libre y apartado se distinguen SIN depender del color: el apartado lleva
   precio tachado, etiqueta "Apartado" y contraste bajado.
   ------------------------------------------------------------------------- */

.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--col-club), 1fr));
    column-gap: var(--e-32);
    border-bottom: var(--grosor-1) solid var(--b-1);
    min-height: var(--e-96);
    margin-bottom: var(--e-48);
}

.equipo {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--e-16);
    row-gap: var(--e-2);
    width: 100%;
    min-height: var(--e-64);
    padding: var(--e-12) var(--e-12) var(--e-12) var(--e-16);
    border-top: var(--grosor-1) solid var(--b-1);
    border-radius: 0;
    text-align: left;
    color: inherit;
    background: transparent;
    transition: background-color var(--d-toque) var(--c-firme);
}
/* Marca de categoría: una regla de 2px cuya LUMINOSIDAD ordena por valor. */
.equipo::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--e-16);
    bottom: var(--e-16);
    width: var(--grosor-2);
    background: var(--cat-bajo);
    border-radius: var(--r-full);
}
.equipo.t-premium::before { background: var(--cat-premium); }
.equipo.t-alto::before    { background: var(--cat-alto); }
.equipo.t-medio::before   { background: var(--cat-medio); }
.equipo.t-bajo::before    { background: var(--cat-bajo); }

.equipo .club {
    grid-area: 1 / 1;
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-16);
    font-weight: var(--p-medio);
    color: var(--t-1);
}
.equipo .tier { grid-area: 2 / 1; color: var(--t-4); }
/* Sin excepción dorada: la categoría se distingue por luminosidad, igual que
   el resto. Ver el comentario de --cat-premium. */
.equipo.t-premium .tier { color: var(--t-2); }

/* Con un modal abierto, el fondo no se desplaza. Se resuelve en CSS puro para
   no tocar el JavaScript: mientras exista un velo abierto en el documento,
   el cuerpo queda quieto. Así el pulgar no arrastra la lista de atrás
   mientras alguien está escribiendo su WhatsApp. */
body:has(.velo.abierta) {
    overflow: hidden;
}

/* Un fallo no se ve como un estado vacío: lleva anillo rojo y barra vertical,
   frente al círculo neutro con raya horizontal de "aquí no hay nada". */
.vacio.fallo .icono::before { border-color: var(--rojo); }
.vacio.fallo .icono::after {
    background: var(--rojo);
    width: var(--grosor-2);
    height: 10px;
}
.vacio.fallo { color: var(--t-2); }
.equipo.t-alto .tier    { color: var(--t-2); }
.equipo .precio {
    grid-area: 1 / 2;
    justify-self: end;
    font-size: var(--f-18);
    line-height: var(--lh-18);
    letter-spacing: var(--tr-18);
    font-weight: var(--p-fuerte);
    color: var(--t-1);
    white-space: nowrap;
}
.equipo .precio small {
    font-size: var(--f-11);
    letter-spacing: var(--tr-versalita);
    font-weight: var(--p-normal);
    color: var(--t-4);
    margin-left: var(--e-2);
}
.tomado {
    grid-area: 2 / 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: var(--e-4);
    font-size: var(--f-11);
    line-height: var(--lh-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    font-weight: var(--p-medio);
    color: var(--t-4);
}
.tomado .pagado { color: var(--verde-txt); }

/* Estados del renglón libre. Sólo cambia el fondo y el filete: nada crece,
   nada se desplaza, así el repintado cada 3 s no produce brincos. */
.equipo:not(:disabled):hover { background: var(--s-1); }
.equipo:not(:disabled):active { background: var(--s-2); }
.equipo:not(:disabled):focus-visible { outline-offset: calc(var(--grosor-2) * -1); }

/* Apartado: sigue siendo legible, pero deja de invitar. */
.equipo.ocupado { cursor: not-allowed; }
.equipo.ocupado .club { color: var(--t-3); font-weight: var(--p-normal); }
.equipo.ocupado .precio {
    color: var(--t-4);
    font-weight: var(--p-normal);
    text-decoration: line-through;
    text-decoration-thickness: var(--grosor-1);
}
.equipo.ocupado::before { opacity: .35; }

/* Antes de la apertura NADIE está apartado: la lista es lo que 33 personas
   miran durante los minutos previos. Se mantiene a contraste pleno; sólo se
   retira la invitación. Bajarla al 45% la hace ver apagada o rota. */
.equipo.cerrado { cursor: default; }
.equipo.cerrado:hover { background: transparent; }

/* Alguien acaba de apartar: un realce de fondo, corto, que no mueve nada. */
@keyframes destello {
    from { background-color: var(--oro-velo); }
    to   { background-color: transparent; }
}
.equipo.nuevo { animation: destello var(--d-larga) var(--c-salida) 1; }

/* -------------------------------------------------------------------------
   4.7 Reglas de la casa
   ------------------------------------------------------------------------- */

.reglas { margin-top: var(--e-48); }
.reglas h3 { margin-bottom: var(--e-16); }
.reglas ul { display: grid; gap: var(--e-8); max-width: var(--ancho-lectura); }
.reglas li {
    position: relative;
    padding-left: var(--e-20);
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
    color: var(--t-2);
}
.reglas li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--lh-13) / 2);
    width: var(--e-8);
    height: var(--grosor-1);
    background: var(--t-4);
}
.reglas p { color: var(--t-2); line-height: var(--lh-lectura); max-width: var(--ancho-lectura); }

/* -------------------------------------------------------------------------
   4.8 Ventana modal
   En el celular es una hoja anclada abajo: crece hacia arriba, así el botón
   principal NUNCA se mueve de debajo del pulgar cuando aparece un error.
   ------------------------------------------------------------------------- */

.velo {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: var(--e-48) var(--e-16);
    overflow-y: auto;
    background: rgba(0, 0, 0, .72);
    background: color-mix(in srgb, var(--s-app) 78%, transparent);
    backdrop-filter: blur(var(--e-4));
    -webkit-backdrop-filter: blur(var(--e-4));
}
.velo.abierta { display: flex; animation: velo-entra var(--d-corta) var(--c-firme); }
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }

.modal {
    width: 100%;
    max-width: var(--ancho-modal);
    padding: var(--e-24);
    background: var(--s-1);
    border: var(--grosor-1) solid var(--b-2);
    border-radius: var(--r-4);
    box-shadow: var(--sombra-3);
    animation: modal-entra var(--d-media) var(--c-salida);
}
@keyframes modal-entra {
    from { opacity: 0; transform: translateY(var(--e-8)) scale(.99); }
    to   { opacity: 1; transform: none; }
}
.modal h2 { margin-bottom: var(--e-4); }
.modal .modal-sub {
    color: var(--t-3);
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
    margin-bottom: var(--e-24);
}

.resumen-spot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-16);
    padding: var(--e-12) 0;
    margin-bottom: var(--e-20);
    border-top: var(--grosor-1) solid var(--b-1);
    border-bottom: var(--grosor-1) solid var(--b-1);
}
.resumen-spot .club-sel {
    font-size: var(--f-21);
    line-height: var(--lh-21);
    letter-spacing: var(--tr-21);
    font-weight: var(--p-medio);
}
.resumen-spot .precio-sel {
    font-size: var(--f-21);
    line-height: var(--lh-21);
    letter-spacing: var(--tr-21);
    font-weight: var(--p-fuerte);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Icono de éxito dibujado con bordes: sin emoji, idéntico en todos lados. */
.exito-icono {
    position: relative;
    font-size: 0;
    width: var(--ico-40);
    height: var(--ico-40);
    margin: 0 auto var(--e-16);
    border: var(--grosor-1) solid var(--verde);
    border-radius: 50%;
}
.exito-icono::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: var(--e-16);
    height: var(--e-8);
    margin: calc(var(--e-8) * -1) 0 0 calc(var(--e-8) * -1);
    border-left: var(--grosor-2) solid var(--verde);
    border-bottom: var(--grosor-2) solid var(--verde);
    transform: rotate(-45deg) translate(var(--e-2), calc(var(--e-2) * -1));
}

/* -------------------------------------------------------------------------
   4.9 Formularios
   ------------------------------------------------------------------------- */

.campo { margin-bottom: var(--e-16); }
.campo label {
    display: block;
    margin-bottom: var(--e-8);
    font-size: var(--f-12);
    line-height: var(--lh-12);
    letter-spacing: var(--tr-12);
    font-weight: var(--p-medio);
    color: var(--t-2);
}
.campo input,
.campo select,
.campo textarea,
.buscador input,
.caja-enlace input,
select.selector {
    width: 100%;
    height: var(--alto-xl);
    padding: 0 var(--e-12);
    background: var(--s-app);
    border: var(--grosor-1) solid var(--b-2);
    border-radius: var(--r-2);
    color: var(--t-1);
    /* 16px obligatorio: por debajo, iOS Safari hace zoom al enfocar y
       rompe la maqueta en el peor momento posible. */
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-16);
    transition: border-color var(--d-toque) var(--c-firme),
                background-color var(--d-toque) var(--c-firme);
}
.campo textarea {
    height: auto;
    min-height: var(--e-96);
    padding: var(--e-12);
    line-height: var(--lh-16);
    resize: vertical;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--t-4); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--b-3); }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible,
select.selector:focus-visible {
    border-color: var(--oro-txt);
    background: var(--s-1);
    outline-offset: 0;
}
.campo input:disabled, .campo select:disabled, .campo textarea:disabled {
    color: var(--t-4);
    background: var(--s-1);
    cursor: not-allowed;
}
.campo input.invalido, .fila-lugar input.invalido {
    border-color: var(--rojo);
}
.campo .ayuda, .ayuda {
    margin-top: var(--e-8);
    font-size: var(--f-12);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-12);
    color: var(--t-3);
    max-width: var(--ancho-lectura);
}
.campo.chico input { height: var(--alto-l); }
.campo.chico label { font-size: var(--f-11); letter-spacing: var(--tr-versalita); text-transform: uppercase; }

select.selector {
    height: var(--alto-l);
    font-size: var(--f-14);
    font-weight: var(--p-medio);
    max-width: 100%;
    appearance: none;
    padding-right: var(--e-32);
    /* Flecha dibujada en SVG en línea: sin dependencias, sin emoji. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2387847F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--e-12) center;
}

/* -------------------------------------------------------------------------
   4.10 Botones
   Primario = casi blanco. La máxima jerarquía es luminosidad, no color.
   ------------------------------------------------------------------------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-8);
    width: 100%;
    min-height: var(--alto-xl);
    padding: 0 var(--e-16);
    background: var(--pri);
    color: var(--pri-tinta);
    border: var(--grosor-1) solid transparent;
    border-radius: var(--r-2);
    font-size: var(--f-14);
    line-height: var(--lh-14);
    letter-spacing: var(--tr-14);
    font-weight: var(--p-medio);
    text-align: center;
    transition: background-color var(--d-toque) var(--c-firme),
                color var(--d-toque) var(--c-firme),
                border-color var(--d-toque) var(--c-firme),
                opacity var(--d-toque) var(--c-firme);
}
.boton:hover { background: var(--pri-alto); }
.boton:active { background: var(--t-2); }
/* "Cargando" y "deshabilitado" no son lo mismo y no pueden verse igual.
   Mientras el botón dice "Apartando..." el texto tiene que leerse: es el
   único momento en que el usuario necesita saber que algo está pasando. */
.boton:disabled {
    background: var(--s-4);
    color: var(--t-2);
    cursor: progress;
}
.boton:disabled[aria-disabled="true"] {
    background: var(--s-3);
    color: var(--t-4);
    cursor: not-allowed;
}
/* Cargando: el texto lo cambia el JS; aquí sólo se marca el compás. */
.boton:disabled::after {
    content: "";
    width: var(--e-8);
    height: var(--e-8);
    border-radius: 50%;
    background: currentColor;
    animation: pulso 1000ms var(--c-suave) infinite;
}
@keyframes pulso { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.boton.secundario {
    background: transparent;
    color: var(--t-2);
    border-color: var(--b-2);
    margin-top: var(--e-8);
}
.boton.secundario:hover { background: var(--s-2); color: var(--t-1); border-color: var(--b-3); }
.boton.secundario:active { background: var(--s-3); }
.boton.secundario:disabled { background: transparent; color: var(--t-4); border-color: var(--b-1); }
.boton.secundario:disabled::after { content: none; }

.boton.chico {
    width: auto;
    min-height: var(--alto-m);
    font-size: var(--f-13);
    letter-spacing: var(--tr-13);
}

.btn-simple, .btn-exportar, .b-copiar, .acciones button, .sugerencia button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-8);
    min-height: var(--alto-l);
    padding: 0 var(--e-12);
    background: var(--s-2);
    color: var(--t-1);
    border: var(--grosor-1) solid var(--b-2);
    border-radius: var(--r-2);
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
    font-weight: var(--p-medio);
    white-space: nowrap;
    transition: background-color var(--d-toque) var(--c-firme),
                border-color var(--d-toque) var(--c-firme),
                color var(--d-toque) var(--c-firme);
}
.btn-simple:hover, .btn-exportar:hover, .b-copiar:hover,
.acciones button:hover, .sugerencia button:hover {
    background: var(--s-3);
    border-color: var(--b-3);
}
.btn-simple:active, .btn-exportar:active, .acciones button:active { background: var(--s-4); }
.btn-simple:disabled, .acciones button:disabled { opacity: .5; cursor: wait; }
.b-copiar.listo { color: var(--verde-txt); border-color: var(--verde); }

.botones-fila { display: flex; gap: var(--e-8); flex-wrap: wrap; }
.botones-fila .boton { width: auto; flex: 1 1 auto; }

/* -------------------------------------------------------------------------
   4.11 Mensajes: error, éxito, aviso
   ------------------------------------------------------------------------- */

.error-caja {
    display: none;
    padding: var(--e-12);
    margin-bottom: var(--e-16);
    background: var(--rojo-velo);
    border: var(--grosor-1) solid transparent;
    border-left: var(--grosor-2) solid var(--rojo);
    border-radius: var(--r-2);
    color: var(--rojo-txt);
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
}
.error-caja.visible { display: block; }
.error-caja ul { display: grid; gap: var(--e-4); margin-top: var(--e-8); }
.error-caja li { padding-left: var(--e-12); position: relative; }
.error-caja li::before {
    content: "";
    position: absolute;
    left: 0; top: calc(var(--lh-13) / 2);
    width: var(--e-4); height: var(--grosor-1);
    background: currentColor;
}

.aviso-ok, .exito-caja {
    padding: var(--e-12);
    margin-bottom: var(--e-16);
    background: var(--verde-velo);
    border-left: var(--grosor-2) solid var(--verde);
    border-radius: var(--r-2);
    color: var(--verde-txt);
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
}
.aviso-chico {
    font-size: var(--f-12);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-12);
    color: var(--t-3);
    margin-top: var(--e-8);
}
.nota, .nota-folio {
    font-size: var(--f-12);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-12);
    color: var(--t-3);
}
.nota strong, .nota-folio b { color: var(--t-2); font-weight: var(--p-medio); }

/* -------------------------------------------------------------------------
   4.12 Datos de pago
   ------------------------------------------------------------------------- */

.datos-pago {
    padding: var(--e-12) 0;
    margin: var(--e-16) 0;
    border-top: var(--grosor-1) solid var(--b-1);
    border-bottom: var(--grosor-1) solid var(--b-1);
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
}
.datos-pago .linea, .linea {
    display: flex;
    justify-content: space-between;
    gap: var(--e-16);
    padding: var(--e-4) 0;
}
.datos-pago .linea span:first-child { color: var(--t-3); }
.datos-pago .linea span:last-child { font-weight: var(--p-medio); color: var(--t-1); }

/* =========================================================================
   4.13 PANEL DEL BREAKER
   Se opera con UNA mano, desde el celular, con la cámara encendida.
   Aquí la velocidad de lectura manda sobre la belleza: áreas táctiles de
   44px, jerarquía que se resuelve en medio segundo y separación real entre
   "Marcar pagado" y "Liberar".
   ========================================================================= */

.acceso {
    max-width: var(--ancho-acceso);
    margin: var(--e-80) auto;
    padding: 0 var(--e-16);
}
.acceso h2 { margin-bottom: var(--e-4); }
.acceso p {
    color: var(--t-3);
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
    margin-bottom: var(--e-32);
}

.barra-superior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-16);
    flex-wrap: wrap;
    margin-bottom: var(--e-24);
}
.barra-superior h1 { font-size: var(--f-26); line-height: var(--lh-26); letter-spacing: var(--tr-26); }
.barra-superior .sub, .sub {
    margin-top: var(--e-4);
    color: var(--t-3);
    font-size: var(--f-12);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-12);
}

/* Resumen: cifras separadas por filete vertical, sin tarjetas. */
.resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--col-resumen), 1fr));
    gap: var(--e-16) 0;
    padding: var(--e-16) 0;
    border-top: var(--grosor-1) solid var(--b-1);
    border-bottom: var(--grosor-1) solid var(--b-1);
    margin-bottom: var(--e-24);
}
.tarjeta-dato {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    padding-left: var(--e-16);
    border-left: var(--grosor-1) solid var(--b-1);
}
.tarjeta-dato:first-child { border-left-color: transparent; padding-left: 0; }
.tarjeta-dato .val {
    font-size: var(--f-26);
    line-height: var(--lh-26);
    letter-spacing: var(--tr-26);
    font-weight: var(--p-fuerte);
    color: var(--t-1);
}
.val.verde { color: var(--verde-txt); }
.val.ambar { color: var(--ambar-txt); }
.val.rojo  { color: var(--rojo-txt); }
.val.gris  { color: var(--t-3); }

.progreso-caja { margin-bottom: var(--e-24); }
.progreso-texto {
    display: flex;
    justify-content: space-between;
    gap: var(--e-16);
    margin-bottom: var(--e-8);
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
    color: var(--t-2);
}
.progreso-texto .meta { color: var(--t-3); }
.progreso-texto strong { font-variant-numeric: tabular-nums; }
.progreso-barra {
    height: var(--e-4);
    background: var(--b-1);
    border-radius: var(--r-full);
    overflow: hidden;
}
.progreso-relleno {
    height: 100%;
    background: var(--verde);
    border-radius: var(--r-full);
    transition: width var(--d-larga) var(--c-salida);
}

/* Pestañas: subrayado, no píldoras de color. La regla existe siempre en
   transparente, así activar una no mueve nada. */
.pestanas {
    display: flex;
    gap: var(--e-20);
    margin-bottom: var(--e-16);
    border-bottom: var(--grosor-1) solid var(--b-1);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
    position: relative;
    flex: 0 0 auto;
    min-height: var(--alto-xl);
    padding: 0 0 var(--e-8);
    background: none;
    border: 0;
    border-bottom: var(--grosor-2) solid transparent;
    margin-bottom: calc(var(--grosor-1) * -1);
    color: var(--t-3);
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
    font-weight: var(--p-medio);
    white-space: nowrap;
    transition: color var(--d-toque) var(--c-firme),
                border-color var(--d-toque) var(--c-firme);
}
.pestana:hover { color: var(--t-2); }
.pestana.activa { color: var(--t-1); border-bottom-color: var(--t-1); }

/* Sin este piso, panel.js sustituye la lista por "Cargando la hoja..." y
   la página colapsa y vuelve a explotar en cada cambio de pestaña. */
#lista { min-height: var(--alto-lista-min); }

.lista-tarjetas { display: grid; gap: 0; border-bottom: var(--grosor-1) solid var(--b-1); }

/* Comanda: un renglón por apartado. Semáforo a la izquierda + antigüedad a
   la derecha; el color es información, no decoración. */
.comanda {
    position: relative;
    display: grid;
    gap: var(--e-12);
    padding: var(--e-16) var(--e-12) var(--e-16) var(--e-16);
    border-top: var(--grosor-1) solid var(--b-1);
}
.comanda::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--e-16);
    bottom: var(--e-16);
    width: var(--grosor-2);
    border-radius: var(--r-full);
    background: var(--t-4);
}
.comanda.sem-verde::before { background: var(--verde); }
.comanda.sem-ambar::before { background: var(--ambar); }
.comanda.sem-rojo::before  { background: var(--rojo); }
.comanda.sem-listo::before { background: var(--verde); opacity: .4; }
/* Ya pagado: baja de jerarquía sin desaparecer. Opacidad global no: apagaría
   también el texto que a veces hay que leer. */
.comanda.sem-listo .club,
.comanda.sem-listo .monto { color: var(--t-2); font-weight: var(--p-medio); }

.comanda-fila {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e-16);
}
.comanda-fila > * { min-width: 0; }
/* Proximidad: dentro del grupo 6/4px, entre grupos 12px. El ojo agrupa sin
   que existan cajas. */
.comanda .club {
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-16);
    font-weight: var(--p-fuerte);
    color: var(--t-1);
    margin-bottom: var(--e-4);
}
.comanda .persona {
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
    color: var(--t-2);
    margin-bottom: var(--e-2);
}
.comanda .tel, .tel {
    font-size: var(--f-12);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-12);
    color: var(--t-3);
}
.comanda .monto, .monto {
    font-size: var(--f-18);
    line-height: var(--lh-18);
    letter-spacing: var(--tr-18);
    font-weight: var(--p-fuerte);
    color: var(--t-1);
    white-space: nowrap;
}
.reloj-espera {
    display: block;
    margin-top: var(--e-4);
    font-size: var(--f-12);
    line-height: var(--lh-12);
    letter-spacing: var(--tr-12);
    font-weight: var(--p-medio);
    color: var(--t-3);
    white-space: nowrap;
}
.reloj-espera.verde { color: var(--verde-txt); }
.reloj-espera.ambar { color: var(--ambar-txt); }
.reloj-espera.rojo  { color: var(--rojo-txt); }

.comprobante {
    display: flex;
    align-items: center;
    gap: var(--e-12);
    padding: var(--e-8) var(--e-12);
    background: var(--s-1);
    border-radius: var(--r-2);
    font-size: var(--f-12);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-12);
    color: var(--t-2);
}
/* Glifo de comprobante dibujado con bordes: reemplaza el emoji del JS. */
.comprobante .mini {
    font-size: 0;
    position: relative;
    flex: 0 0 auto;
    width: var(--ico-24);
    height: var(--ico-24);
    border: var(--grosor-1) solid var(--b-3);
    border-radius: var(--r-1);
}
.comprobante .mini::before,
.comprobante .mini::after {
    content: "";
    position: absolute;
    left: var(--e-4);
    right: var(--e-4);
    height: var(--grosor-1);
    background: var(--b-3);
}
.comprobante .mini::before { top: var(--e-8); }
.comprobante .mini::after  { top: var(--e-12); right: var(--e-12); }
.comprobante strong { color: var(--t-1); font-weight: var(--p-medio); }

.acciones { display: flex; align-items: center; gap: var(--e-12); flex-wrap: wrap; }
.acciones button { flex: 1 1 auto; min-width: var(--min-boton); min-height: var(--alto-xl); }
/* La acción principal del panel: casi blanca, la más ancha. */
.acciones .b-pagado {
    flex: 2 1 auto;
    background: var(--pri);
    border-color: transparent;
    color: var(--pri-tinta);
    font-weight: var(--p-medio);
}
.acciones .b-pagado:hover { background: var(--pri-alto); }
.acciones .b-pagado:active { background: var(--t-2); }
.acciones .b-wa { flex: 1 1 auto; }
.acciones .b-wa::before {
    content: "";
    width: var(--punto);
    height: var(--punto);
    border-radius: 50%;
    background: var(--verde);
}
/* "Liberar" es destructivo y vive al lado de "Marcar pagado": se separa a la
   derecha, se despinta y sólo se tiñe de rojo al tocarla. Un toque errado
   frente a la audiencia es el peor momento posible. */
.acciones .b-liberar {
    flex: 0 0 auto;
    margin-left: auto;
    background: transparent;
    border-color: transparent;
    color: var(--t-3);
}
.acciones .b-liberar:hover {
    background: var(--rojo-velo);
    border-color: transparent;
    color: var(--rojo-txt);
}
.acciones .b-liberar:active { background: var(--rojo-velo); }

/* Deshacer: flota fijo sobre el pulgar. En flujo empujaba la lista 50px
   hacia abajo y la devolvía sola cinco segundos después, mientras el
   breaker estaba cobrando. */
.deshacer {
    position: fixed;
    left: var(--e-16);
    right: var(--e-16);
    bottom: max(var(--e-16), env(safe-area-inset-bottom));
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-16);
    max-width: var(--ancho-aviso);
    margin: 0 auto;
    min-height: var(--alto-xl);
    padding: var(--e-8) var(--e-8) var(--e-8) var(--e-16);
    background: var(--s-3);
    border: var(--grosor-1) solid var(--b-2);
    border-radius: var(--r-3);
    box-shadow: var(--sombra-3);
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
    color: var(--t-1);
    animation: deshacer-entra var(--d-media) var(--c-salida);
}
@keyframes deshacer-entra {
    from { opacity: 0; transform: translateY(var(--e-12)); }
    to   { opacity: 1; transform: none; }
}
.deshacer button {
    flex: 0 0 auto;
    min-height: var(--alto-m);
    padding: 0 var(--e-12);
    border-radius: var(--r-2);
    color: var(--oro-txt);
    font-size: var(--f-13);
    font-weight: var(--p-medio);
    transition: background-color var(--d-toque) var(--c-firme);
}
.deshacer button:hover { background: var(--s-4); }

.vacio {
    padding: var(--e-64) var(--e-16);
    text-align: center;
    color: var(--t-3);
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
}
/* El JS mete un emoji aquí; se anula y se dibuja una marca neutra. */
.vacio .icono, .icono {
    font-size: 0;
    display: block;
    position: relative;
    width: var(--ico-24);
    height: var(--ico-24);
    margin: 0 auto var(--e-16);
    border: var(--grosor-1) solid var(--b-2);
    border-radius: 50%;
}
.vacio .icono::after, .icono::after {
    content: "";
    position: absolute;
    left: var(--e-8);
    right: var(--e-8);
    top: 50%;
    height: var(--grosor-1);
    background: var(--b-3);
}
.vacio a { color: var(--oro-txt); text-decoration: underline; text-underline-offset: var(--e-2); }

/* Sugerencia: el sistema sugiere, el breaker decide (D-05). Tono informativo,
   no de alarma. */
.sugerencia {
    padding: var(--e-16);
    margin-bottom: var(--e-16);
    background: var(--s-1);
    border-left: var(--grosor-2) solid var(--ambar);
    border-radius: var(--r-2);
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
    color: var(--t-2);
}
.sugerencia strong { color: var(--t-1); font-weight: var(--p-medio); }
.acciones-sug, .sugerencia .acciones-sug {
    display: flex;
    gap: var(--e-8);
    flex-wrap: wrap;
    margin-top: var(--e-12);
}

/* -------------------------------------------------------------------------
   4.14 Reporte y hoja del break
   ------------------------------------------------------------------------- */

.reporte { display: grid; gap: var(--e-32); }
.bloque-reporte { display: grid; gap: var(--e-12); }
.bloque-reporte h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-16);
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    font-weight: var(--p-medio);
    color: var(--t-3);
    padding-bottom: var(--e-8);
    border-bottom: var(--grosor-1) solid var(--b-2);
}

table.rep {
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
}
table.rep th, table.rep td {
    padding: var(--e-12) var(--e-8);
    text-align: left;
    vertical-align: top;
    border-bottom: var(--grosor-1) solid var(--b-1);
}
table.rep th {
    font-size: var(--f-11);
    line-height: var(--lh-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    font-weight: var(--p-medio);
    color: var(--t-3);
    padding-top: 0;
}
table.rep th:first-child, table.rep td:first-child { padding-left: 0; }
table.rep th:last-child, table.rep td:last-child { padding-right: 0; }
table.rep td { color: var(--t-2); }
table.rep td strong { color: var(--t-1); font-weight: var(--p-medio); }
table.rep .num, table.rep th.num { text-align: right; white-space: nowrap; }
table.rep tr:last-child td { border-bottom: 0; }
table.rep tr.total td {
    font-weight: var(--p-fuerte);
    color: var(--t-1);
    border-top: var(--grosor-1) solid var(--b-3);
    border-bottom: 0;
}

.pastilla {
    display: inline-block;
    width: var(--punto);
    height: var(--punto);
    border-radius: 50%;
    margin-right: var(--e-8);
    vertical-align: baseline;
    background: var(--t-4);
}
.p-verde { background: var(--verde); }
.p-ambar { background: var(--ambar); }
.p-rojo  { background: var(--rojo); }
.p-gris  { background: var(--t-4); }

/* =========================================================================
   4.15 ASISTENTE DE CREACIÓN (crear.html)
   ========================================================================= */

.titulo-pantalla {
    font-size: var(--f-32);
    line-height: var(--lh-32);
    letter-spacing: var(--tr-32);
    font-weight: var(--p-fuerte);
    margin-bottom: var(--e-8);
}
.bajada {
    color: var(--t-3);
    font-size: var(--f-16);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-16);
    max-width: var(--ancho-lectura);
    margin-bottom: var(--e-40);
}

.tarjeta {
    padding: var(--e-24) 0;
    border-top: var(--grosor-1) solid var(--b-1);
    margin-bottom: var(--e-8);
}
.tarjeta > h2 {
    display: flex;
    align-items: center;
    gap: var(--e-12);
    font-size: var(--f-18);
    line-height: var(--lh-18);
    letter-spacing: var(--tr-18);
    margin-bottom: var(--e-20);
}
.paso-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--ico-24);
    height: var(--ico-24);
    border: var(--grosor-1) solid var(--b-2);
    border-radius: 50%;
    font-size: var(--f-12);
    font-weight: var(--p-medio);
    font-variant-numeric: tabular-nums;
    color: var(--t-3);
    letter-spacing: 0;
}
.ayuda-bloque {
    padding: var(--e-12) var(--e-16);
    margin-bottom: var(--e-20);
    background: var(--s-1);
    border-left: var(--grosor-2) solid var(--b-3);
    border-radius: var(--r-2);
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
    color: var(--t-2);
}
.ayuda-bloque strong { color: var(--t-1); font-weight: var(--p-medio); }

.rejilla-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--col-campo), 1fr));
    gap: var(--e-16);
}
.rejilla-campos .campo { margin-bottom: 0; }
.dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-16);
}

.buscador { position: relative; }
.lista-sug {
    display: none;
    position: absolute;
    left: 0; right: 0; top: calc(100% + var(--e-4));
    z-index: 30;
    max-height: var(--alto-sugerencias);
    overflow-y: auto;
    background: var(--s-2);
    border: var(--grosor-1) solid var(--b-2);
    border-radius: var(--r-2);
    box-shadow: var(--sombra-3);
}
.lista-sug.abierta { display: block; }
.sug {
    padding: var(--e-8) var(--e-12);
    border-bottom: var(--grosor-1) solid var(--b-1);
    cursor: pointer;
    transition: background-color var(--d-toque) var(--c-firme);
}
.sug:last-child { border-bottom: 0; }
.sug:hover, .sug.marcada { background: var(--s-3); }
.sug .linea-1 {
    font-size: var(--f-14);
    line-height: var(--lh-14);
    letter-spacing: var(--tr-14);
    font-weight: var(--p-medio);
    color: var(--t-1);
}
.sug .linea-2 {
    font-size: var(--f-12);
    line-height: var(--lh-12);
    letter-spacing: var(--tr-12);
    color: var(--t-3);
}

.frase-config {
    padding: var(--e-16) 0;
    font-size: var(--f-16);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-16);
    color: var(--t-2);
}
.frase-config strong { color: var(--t-1); font-weight: var(--p-medio); }

.modos { display: flex; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-20); }
.modo {
    display: inline-flex;
    align-items: center;
    min-height: var(--alto-l);
    padding: 0 var(--e-16);
    background: transparent;
    border: var(--grosor-1) solid var(--b-1);
    border-radius: var(--r-2);
    color: var(--t-3);
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
    font-weight: var(--p-medio);
    transition: background-color var(--d-toque) var(--c-firme),
                border-color var(--d-toque) var(--c-firme),
                color var(--d-toque) var(--c-firme);
}
.modo:hover { color: var(--t-1); background: var(--s-2); }
.modo.activo { background: var(--s-3); border-color: var(--b-3); color: var(--t-1); }

.panel-modo { display: none; }
.panel-modo.visible { display: block; }

.encabezado-lista {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-16);
    flex-wrap: wrap;
    padding-bottom: var(--e-8);
    margin-bottom: var(--e-8);
    border-bottom: var(--grosor-1) solid var(--b-2);
}
.encabezado-lista .boton { width: auto; min-height: var(--alto-m); }

.lista-lugares { display: grid; }
.fila-lugar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--col-precio) var(--alto-l);
    align-items: center;
    gap: var(--e-8);
    padding: var(--e-8) var(--e-8) var(--e-8) var(--e-16);
    border-bottom: var(--grosor-1) solid var(--b-1);
}
.fila-lugar::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--e-12);
    bottom: var(--e-12);
    width: var(--grosor-2);
    border-radius: var(--r-full);
    background: var(--cat-bajo);
}
.fila-lugar.t-premium::before { background: var(--cat-premium); }
.fila-lugar.t-alto::before    { background: var(--cat-alto); }
.fila-lugar.t-medio::before   { background: var(--cat-medio); }
.fila-lugar input {
    width: 100%;
    height: var(--alto-l);
    padding: 0 var(--e-12);
    background: transparent;
    border: var(--grosor-1) solid transparent;
    border-radius: var(--r-2);
    color: var(--t-1);
    font-size: var(--f-16);
    letter-spacing: var(--tr-16);
    transition: background-color var(--d-toque) var(--c-firme),
                border-color var(--d-toque) var(--c-firme);
}
.fila-lugar input:hover { border-color: var(--b-1); background: var(--s-1); }
.fila-lugar input:focus-visible { border-color: var(--oro-txt); background: var(--s-1); outline-offset: 0; }
.fila-lugar input.precio {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: var(--p-medio);
}
.fila-lugar button {
    width: var(--alto-l);
    height: var(--alto-l);
    border-radius: var(--r-2);
    color: var(--t-4);
    font-size: var(--f-16);
    transition: background-color var(--d-toque) var(--c-firme),
                color var(--d-toque) var(--c-firme);
}
.fila-lugar button:hover { background: var(--rojo-velo); color: var(--rojo-txt); }

.sin-lugares {
    padding: var(--e-40) var(--e-16);
    text-align: center;
    color: var(--t-3);
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
}

.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--col-cifra), 1fr));
    gap: var(--e-16) 0;
    padding: var(--e-16) 0;
    border-top: var(--grosor-1) solid var(--b-1);
    border-bottom: var(--grosor-1) solid var(--b-1);
}
.cifra {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    padding-left: var(--e-16);
    border-left: var(--grosor-1) solid var(--b-1);
}
.cifra:first-child { border-left-color: transparent; padding-left: 0; }
.cifra .val {
    font-size: var(--f-21);
    line-height: var(--lh-21);
    letter-spacing: var(--tr-21);
    font-weight: var(--p-fuerte);
    color: var(--t-1);
}
.cifra .val.verde { color: var(--verde-txt); }
.cifra .val.rojo  { color: var(--rojo-txt); }
.cifra .val.ambar { color: var(--ambar-txt); }
.cifra .nota { font-size: var(--f-11); line-height: var(--lh-11); color: var(--t-4); }

/* Barra fija de acción: siempre al alcance del pulgar. */
.barra-fija {
    position: sticky;
    bottom: 0;
    z-index: 60;
    margin-top: var(--e-32);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--s-app);
    background: color-mix(in srgb, var(--s-app) 92%, transparent);
    backdrop-filter: blur(var(--e-12));
    -webkit-backdrop-filter: blur(var(--e-12));
    border-top: var(--grosor-1) solid var(--b-2);
}
.barra-fija .interior {
    max-width: var(--ancho-contenedor);
    margin: 0 auto;
    padding: var(--e-12) var(--e-16);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-16);
}
.barra-fija .boton { width: auto; min-width: var(--min-boton-ancho); }
.resumen-fijo {
    font-size: var(--f-12);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-12);
    color: var(--t-3);
}
.resumen-fijo b {
    color: var(--t-1);
    font-weight: var(--p-medio);
    font-variant-numeric: tabular-nums;
}
.resumen-fijo .margen-ok b  { color: var(--verde-txt); }
.resumen-fijo .margen-mal b { color: var(--rojo-txt); }

.caja-enlace {
    display: flex;
    gap: var(--e-8);
    margin: var(--e-16) 0;
}
.caja-enlace input { flex: 1; font-family: var(--fuente-mono); font-size: var(--f-13); }
.caja-enlace button { flex: 0 0 auto; }

/* =========================================================================
   4.16 PASE DEL COMPRADOR (pase.html)
   ========================================================================= */

.cabeza-pase { margin-bottom: var(--e-32); }
.cabeza-pase h1 {
    font-size: var(--f-26);
    line-height: var(--lh-26);
    letter-spacing: var(--tr-26);
    margin-bottom: var(--e-8);
}
.cabeza-pase .de-quien {
    font-size: var(--f-13);
    line-height: var(--lh-13);
    letter-spacing: var(--tr-13);
    color: var(--t-3);
}
.cabeza-pase .de-quien b { color: var(--t-1); font-weight: var(--p-medio); }

/* Banner de estado del pase: filete de color a la izquierda, nunca un
   bloque pleno de color. */
.banner {
    display: grid;
    gap: var(--e-4);
    padding: var(--e-16);
    margin-bottom: var(--e-24);
    background: var(--s-1);
    border-left: var(--grosor-2) solid var(--t-4);
    border-radius: var(--r-2);
}
.banner .marca {
    font-size: var(--f-11);
    line-height: var(--lh-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    font-weight: var(--p-medio);
    color: var(--t-3);
}
.banner .titulo {
    font-size: var(--f-18);
    line-height: var(--lh-18);
    letter-spacing: var(--tr-18);
    font-weight: var(--p-fuerte);
    color: var(--t-1);
}
.banner .detalle {
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
    color: var(--t-2);
}
.banner.gris  { border-left-color: var(--t-4); }
.banner.gris  .titulo { color: var(--t-2); }
.banner.ambar { border-left-color: var(--ambar); background: var(--ambar-velo); }
.banner.ambar .titulo { color: var(--ambar-txt); }
.banner.verde { border-left-color: var(--verde); background: var(--verde-velo); }
.banner.verde .titulo { color: var(--verde-txt); }
.banner.rojo  { border-left-color: var(--rojo); background: var(--rojo-velo); }
.banner.rojo  .titulo { color: var(--rojo-txt); }

.motivo-rechazo {
    padding: var(--e-12);
    margin-bottom: var(--e-16);
    background: var(--s-1);
    border-radius: var(--r-2);
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
    color: var(--t-2);
}
.motivo-rechazo .quien {
    font-size: var(--f-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    color: var(--t-4);
}

.lugar {
    display: flex;
    align-items: center;
    gap: var(--e-16);
    padding: var(--e-16) 0;
    border-bottom: var(--grosor-1) solid var(--b-1);
}
.lugar:last-child { border-bottom: 0; }
.lugar .cuerpo { flex: 1; min-width: 0; }
.lugar .club {
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-16);
    font-weight: var(--p-medio);
    color: var(--t-1);
}
.lugar .sello {
    font-size: var(--f-11);
    line-height: var(--lh-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    color: var(--t-4);
    margin-top: var(--e-4);
}
.lugar .precio {
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-16);
    font-weight: var(--p-fuerte);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lugar.liberado .club { color: var(--t-4); text-decoration: line-through; }
.lugar.liberado .folio { opacity: .5; }
.lugar.liberado .folio .num, .lugar.liberado .folio .etq { color: var(--t-4); }

.folio {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-2);
    min-width: var(--e-48);
    padding: var(--e-8);
    border: var(--grosor-1) solid var(--b-1);
    border-radius: var(--r-2);
}
.folio .num {
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-16);
    font-weight: var(--p-fuerte);
    color: var(--t-1);
}

.pastilla-pago {
    display: inline-flex;
    align-items: center;
    gap: var(--e-4);
    height: var(--alto-xs);
    padding: 0 var(--e-8);
    border: var(--grosor-1) solid var(--b-2);
    border-radius: var(--r-1);
    font-size: var(--f-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    font-weight: var(--p-medio);
    color: var(--t-3);
    white-space: nowrap;
}
.pastilla-pago.confirmado { color: var(--verde-txt); border-color: var(--verde); }
.pastilla-pago.revision   { color: var(--ambar-txt); border-color: var(--ambar); }
.pastilla-pago.rechazado  { color: var(--rojo-txt); border-color: var(--rojo); }

/* Total a pagar: la cifra más grande del pase. */
.total-caja {
    display: grid;
    gap: var(--e-4);
    padding: var(--e-20) 0;
    margin: var(--e-24) 0;
    border-top: var(--grosor-1) solid var(--b-2);
    border-bottom: var(--grosor-1) solid var(--b-2);
}
.total-caja .monto {
    font-size: var(--f-40);
    line-height: var(--lh-40);
    letter-spacing: var(--tr-40);
    font-weight: var(--p-fuerte);
    color: var(--t-1);
}
.total-caja .monto small {
    font-size: var(--f-13);
    letter-spacing: var(--tr-versalita);
    font-weight: var(--p-normal);
    color: var(--t-4);
    margin-left: var(--e-4);
}
.total-caja .pie {
    font-size: var(--f-12);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-12);
    color: var(--t-3);
}
.total-caja.saldado { border-color: var(--verde); }
.total-caja.saldado .etq { color: var(--verde-txt); }
.total-caja.saldado .monto { color: var(--verde-txt); }

/* Clave de rastreo: el dato que el comprador teclea o copia. Cifras
   tabulares, cero rebanado y espacio holgado para no equivocarse. */
.ref-grande {
    display: grid;
    gap: var(--e-4);
    padding: var(--e-12) var(--e-16);
    margin: var(--e-16) 0;
    background: var(--s-1);
    border: var(--grosor-1) dashed var(--b-2);
    border-radius: var(--r-2);
}
.ref-grande .valor {
    font-family: var(--fuente-mono);
    font-size: var(--f-21);
    line-height: var(--lh-21);
    letter-spacing: 0.02em;
    font-weight: var(--p-medio);
    color: var(--t-1);
    word-break: break-all;
}
.ref-grande .valor.sin-dato {
    font-family: var(--fuente);
    font-size: var(--f-14);
    color: var(--t-4);
    letter-spacing: var(--tr-14);
}

.dato-copiable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-16);
    padding: var(--e-12) 0;
    border-bottom: var(--grosor-1) solid var(--b-1);
}
.dato-copiable:last-child { border-bottom: 0; }
.dato-copiable .col { min-width: 0; display: grid; gap: var(--e-2); }
.dato-copiable .val {
    font-size: var(--f-14);
    line-height: var(--lh-14);
    letter-spacing: var(--tr-14);
    font-weight: var(--p-medio);
    color: var(--t-1);
    word-break: break-all;
}
.dato-copiable .val.mono { font-family: var(--fuente-mono); letter-spacing: 0; }
.b-copiar { flex: 0 0 auto; }

.b-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-8);
    min-height: var(--alto-xl);
    padding: 0 var(--e-16);
    border: var(--grosor-1) solid var(--b-2);
    border-radius: var(--r-2);
    background: var(--s-2);
    color: var(--t-1);
    font-size: var(--f-14);
    letter-spacing: var(--tr-14);
    font-weight: var(--p-medio);
    transition: background-color var(--d-toque) var(--c-firme),
                border-color var(--d-toque) var(--c-firme);
}
.b-wa:hover { background: var(--s-3); border-color: var(--b-3); }
.b-wa.claro { background: var(--pri); color: var(--pri-tinta); border-color: transparent; }
.b-wa.claro:hover { background: var(--pri-alto); }

.estado-carga {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-12);
    padding: var(--e-80) var(--e-16);
    color: var(--t-3);
    font-size: var(--f-13);
    letter-spacing: var(--tr-13);
}
.estado-carga .giro {
    width: var(--ico-16);
    height: var(--ico-16);
    border: var(--grosor-2) solid var(--b-2);
    border-top-color: var(--t-2);
    border-radius: 50%;
    animation: girar 700ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.pantalla-fallo { padding: var(--e-80) var(--e-16); text-align: center; }
.pantalla-fallo h2 { margin-bottom: var(--e-8); }
.pantalla-fallo p {
    color: var(--t-3);
    font-size: var(--f-13);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-13);
    margin-bottom: var(--e-24);
    max-width: var(--ancho-lectura);
    margin-inline: auto;
}
.pantalla-fallo .boton { width: auto; }

.pie-pase, .pie {
    padding-top: var(--e-24);
    margin-top: var(--e-32);
    border-top: var(--grosor-1) solid var(--b-1);
    font-size: var(--f-12);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-12);
    color: var(--t-4);
}
.pie a { color: var(--t-3); text-decoration: underline; text-underline-offset: var(--e-2); }
.pie a:hover { color: var(--t-1); }

/* =========================================================================
   4.17 DOCUMENTO DE REGLAS (reglas.html)
   ========================================================================= */

.doc { max-width: var(--ancho-doc); margin: 0 auto; }
.doc-titulo {
    font-size: var(--f-40);
    line-height: var(--lh-40);
    letter-spacing: var(--tr-40);
    font-weight: var(--p-fuerte);
    margin-bottom: var(--e-12);
}
.doc-entrada {
    font-size: var(--f-16);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-16);
    color: var(--t-2);
    max-width: var(--ancho-lectura);
    margin-bottom: var(--e-24);
}
.fecha-sello {
    font-size: var(--f-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    color: var(--t-4);
    margin-bottom: var(--e-48);
}

.indice {
    padding: var(--e-24) 0;
    margin-bottom: var(--e-48);
    border-top: var(--grosor-1) solid var(--b-1);
    border-bottom: var(--grosor-1) solid var(--b-1);
}
.indice h2 {
    font-size: var(--f-11);
    line-height: var(--lh-11);
    letter-spacing: var(--tr-versalita);
    text-transform: uppercase;
    color: var(--t-3);
    margin-bottom: var(--e-12);
}
.indice ol { counter-reset: idx; display: grid; gap: var(--e-4); }
.indice li { counter-increment: idx; }
.indice a {
    display: block;
    padding: var(--e-4) 0;
    color: var(--t-2);
    font-size: var(--f-14);
    letter-spacing: var(--tr-14);
    transition: color var(--d-toque) var(--c-firme);
}
.indice a::before {
    content: counter(idx, decimal-leading-zero) "  ";
    color: var(--t-4);
    font-variant-numeric: tabular-nums;
}
.indice a:hover { color: var(--t-1); }

.seccion { margin-bottom: var(--e-48); scroll-margin-top: var(--e-80); }
.seccion h2 {
    display: flex;
    align-items: baseline;
    gap: var(--e-12);
    font-size: var(--f-26);
    line-height: var(--lh-26);
    letter-spacing: var(--tr-26);
    margin-bottom: var(--e-16);
}
.seccion h2 .num {
    font-size: var(--f-13);
    font-weight: var(--p-medio);
    color: var(--t-4);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tr-versalita);
}
.seccion h3 {
    margin: var(--e-24) 0 var(--e-8);
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-16);
}
.seccion p {
    color: var(--t-2);
    font-size: var(--f-14);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-14);
    max-width: var(--ancho-lectura);
    margin-bottom: var(--e-16);
}
.seccion p:last-child { margin-bottom: 0; }
.seccion strong { color: var(--t-1); font-weight: var(--p-medio); }

.lista { display: grid; gap: var(--e-8); margin-bottom: var(--e-16); max-width: var(--ancho-lectura); }
.lista li {
    position: relative;
    padding-left: var(--e-24);
    color: var(--t-2);
    font-size: var(--f-14);
    line-height: var(--lh-lectura);
    letter-spacing: var(--tr-14);
}
.lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--e-8) + var(--e-2));
    width: var(--e-8);
    height: var(--grosor-1);
    background: var(--t-4);
}
/* Sí / No dibujados con bordes, sin emoji: la palomita y la equis. */
.lista.si li::before, .lista.no li::before {
    background: none;
    width: var(--e-12);
    height: var(--e-8);
    top: var(--e-8);
}
.lista.si li::before {
    border-left: var(--grosor-2) solid var(--verde);
    border-bottom: var(--grosor-2) solid var(--verde);
    transform: rotate(-45deg);
}
.lista.no li::before {
    height: var(--grosor-2);
    background: var(--rojo);
    top: calc(var(--e-12) - var(--grosor-1));
}

.tabla-envio { display: grid; gap: var(--e-8); margin-bottom: var(--e-16); }
.tabla-envio div {
    display: flex;
    justify-content: space-between;
    gap: var(--e-16);
    padding: var(--e-8) 0;
    border-bottom: var(--grosor-1) solid var(--b-1);
    font-size: var(--f-13);
    letter-spacing: var(--tr-13);
    color: var(--t-2);
}
.tabla-envio div b { color: var(--t-1); font-weight: var(--p-medio); font-variant-numeric: tabular-nums; }

.arriba, .volver {
    display: inline-flex;
    align-items: center;
    gap: var(--e-8);
    min-height: var(--alto-m);
    color: var(--t-3);
    font-size: var(--f-13);
    letter-spacing: var(--tr-13);
    transition: color var(--d-toque) var(--c-firme);
}
.arriba:hover, .volver:hover { color: var(--t-1); }


/* -------------------------------------------------------------------------
   4.18 Red de seguridad
   El JavaScript genera algunas de estas clases fuera de su contenedor
   habitual. Aquí quedan definidas con la mínima especificidad posible, para
   que nunca aparezca texto sin estilo si un componente cambia de sitio.
   ------------------------------------------------------------------------- */

.val, .valor {
    font-size: var(--f-14);
    line-height: var(--lh-14);
    letter-spacing: var(--tr-14);
    font-weight: var(--p-medio);
    color: var(--t-1);
}
.precio, .num, .total {
    font-weight: var(--p-medio);
    color: var(--t-1);
}
.titulo {
    font-size: var(--f-16);
    line-height: var(--lh-16);
    letter-spacing: var(--tr-16);
    font-weight: var(--p-medio);
    color: var(--t-1);
}
.detalle, .quien, .sello, .marca { color: var(--t-3); }
.cuerpo, .col { min-width: 0; }


/* =========================================================================
   5. UTILIDADES
   ========================================================================= */

.oculto { display: none !important; }
.visible { display: block; }
.tabular { font-variant-numeric: tabular-nums; }
.silencio { color: var(--t-3); }
.centrado { text-align: center; }
.no-salto { white-space: nowrap; }

/* Sólo para lectores de pantalla. */
.solo-lectura-pantalla {
    position: absolute;
    width: var(--grosor-1); height: var(--grosor-1);
    padding: 0; margin: calc(var(--grosor-1) * -1);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* =========================================================================
   6. CELULAR
   El breaker opera desde el teléfono: esta parte no es un remate, es el
   caso principal.
   ========================================================================= */

@media (max-width: 900px) {
    .portada {
        grid-template-columns: 1fr;
        gap: var(--e-24);
        padding-bottom: var(--e-32);
        margin-bottom: var(--e-24);
    }
    .portada-imagen { aspect-ratio: 16 / 7; gap: var(--e-8); padding: var(--e-16); }
    .portada-imagen .copa { margin-bottom: 0; }
    .portada h1 { font-size: var(--f-32); line-height: var(--lh-32); letter-spacing: var(--tr-32); }
    .dos-columnas { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .contenedor { padding: var(--e-24) var(--e-16) var(--e-96); }

    /* La navegación no desaparece: se desplaza. Ocultarla dejaba al usuario
       sin manera de llegar a las reglas desde el celular. */
    .nav { gap: var(--e-16); font-size: var(--f-12); }
    .envivo { display: none; }
    .encabezado-interior { gap: var(--e-16); }

    .portada h1 { font-size: var(--f-26); line-height: var(--lh-26); letter-spacing: var(--tr-26); }
    .portada .subtitulo { font-size: var(--f-14); line-height: var(--lh-14); letter-spacing: var(--tr-14); }

    /* Regresiva: baja un escalón de tamaño pero conserva su altura
       reservada, para que la apertura no brinque. */
    .regresiva { min-height: var(--alto-regresiva-movil); }

    /* La barra de escasez pasa a renglón propio: en 390px, compartir línea
       con el texto la dejaba en 30px y no comunicaba nada. */
    .escasez { flex-wrap: wrap; min-height: var(--e-48); }
    .escasez .barrita { flex: 1 0 100%; }
    .reloj-num { font-size: var(--f-40); line-height: var(--lh-40); letter-spacing: var(--tr-40); }
    .reloj-sep { font-size: var(--f-26); line-height: var(--lh-40); }
    .reloj-bloque { min-width: var(--e-48); }
    .aviso-abierto { font-size: var(--f-21); line-height: var(--lh-21); letter-spacing: var(--tr-21); }

    .barra { position: static; padding: var(--e-12) 0; }
    .contadores { gap: var(--e-16); }
    /* Los filtros pasan a renglón propio y se desplazan en horizontal: con
       siete filtros no caben, y envolverlos empujaría la cuadrícula. */
    .filtros {
        flex: 1 1 100%;
        width: 100%;
        gap: var(--e-4);
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .filtros::-webkit-scrollbar { display: none; }
    .filtro { height: var(--alto-l); }

    .rejilla { column-gap: 0; }
    .equipo { padding-block: var(--e-12); }
    .equipo .club { font-size: var(--f-14); line-height: var(--lh-14); letter-spacing: var(--tr-14); }
    .equipo .precio { font-size: var(--f-16); line-height: var(--lh-16); letter-spacing: var(--tr-16); }

    /* El modal se convierte en hoja anclada abajo: crece hacia arriba, así
       el botón principal no se mueve de debajo del pulgar cuando aparece
       un error de validación. */
    .velo { align-items: flex-end; padding: 0; }
    .modal {
        max-width: none;
        max-height: 92vh;
        max-height: 92dvh;
        overflow-y: auto;
        border-radius: var(--r-4) var(--r-4) 0 0;
        border-bottom: 0;
        padding: var(--e-24) var(--e-16) calc(var(--e-24) + env(safe-area-inset-bottom));
        animation-name: hoja-entra;
    }
    @keyframes hoja-entra {
        from { opacity: 0; transform: translateY(var(--e-24)); }
        to   { opacity: 1; transform: none; }
    }

    .resumen { grid-template-columns: 1fr 1fr; }
    .tarjeta-dato:nth-child(odd) { border-left-color: transparent; padding-left: 0; }
    .tarjeta-dato .val { font-size: var(--f-21); line-height: var(--lh-21); letter-spacing: var(--tr-21); }

    .comanda { padding-inline: var(--e-12) var(--e-4); }
    /* En el celular las acciones ocupan toda la fila: 44px de alto reales y
       12px de separación entre ellas. */
    .acciones button { min-width: 0; }
    .acciones .b-liberar { margin-left: auto; }

    .cifras { grid-template-columns: 1fr 1fr; }
    .cifra:nth-child(odd) { border-left-color: transparent; padding-left: 0; }
    .fila-lugar { grid-template-columns: minmax(0, 1fr) var(--e-96) var(--alto-l); }
    .barra-fija .interior { padding: var(--e-12); }
    .barra-fija .boton { min-width: 0; flex: 1 1 auto; }
    .resumen-fijo { flex: 1 1 100%; }

    .total-caja .monto { font-size: var(--f-32); line-height: var(--lh-32); letter-spacing: var(--tr-32); }
    .doc-titulo { font-size: var(--f-32); line-height: var(--lh-32); letter-spacing: var(--tr-32); }
    .titulo-pantalla { font-size: var(--f-26); line-height: var(--lh-26); letter-spacing: var(--tr-26); }
}

@media (max-width: 400px) {
    .lugar { gap: var(--e-12); }
    .folio { min-width: var(--e-40); }
    .filtro { padding-inline: var(--e-8); }
}

/* Pantallas con barra de navegador que aparece y desaparece: dvh evita que
   la hoja del modal quede cortada por debajo del borde visible. */
@supports (height: 100dvh) {
    .velo { height: 100dvh; }
}


/* =========================================================================
   7. MOVIMIENTO
   Dos rangos, curvas declaradas y techo de 320ms. Y una regla dura: nada se
   mueve dentro de #regresiva ni de .rejilla por su cuenta, porque el JS los
   repinta cuatro veces por segundo y cada 3 segundos respectivamente; una
   transición ahí es un parpadeo perpetuo.
   ========================================================================= */

#regresiva, #regresiva *,
.reloj, .reloj *, .reloj-num, .reloj-sep, .reloj-bloque {
    transition: none !important;
    animation: none !important;
}

/* Respeto total a quien pide menos movimiento: se conserva el cambio de
   estado (que es información), se elimina el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }

    .punto-vivo::after { display: none; }
    .estado-carga .giro { border-top-color: var(--t-2); }
}