/* Los tokens de las pantallas que venden. UNA sola hoja, para los cinco canales
 * y para la previa del Builder.
 *
 * Antes cada runtime traía su propio `:root` copiado letra por letra, y los
 * roles que el tema no traía —el verde del «listo», el ámbar del ensayo, el
 * velo de una hoja— se inventaban en cada archivo con el hex que hubiera a
 * mano: el éxito del QR no era el del quiosco. Aquí se escriben una vez.
 *
 * Tres escalones, y el orden importa:
 *
 *   1. Lo que PONE EL TEMA. `aplicarTema` (flux-runtime.js) lo escribe sobre
 *      el documento al arrancar; lo de aquí es solo lo que se ve antes de que
 *      corra, y por eso es neutro.
 *   2. Lo que SE DERIVA de lo anterior: escalas de espacio, de radio, de letra
 *      y de sombra. Cambia la unidad del tema y crece todo junto.
 *   3. Los ALIAS con nombre de CSS. `--c-textoTenue` salió en camelCase porque
 *      la llave del diccionario de C# se concatenó tal cual; las reglas nuevas
 *      usan `--c-texto-tenue`, y las viejas siguen valiendo.
 *
 * Una hoja de canal puede fijar su propio respaldo de `--radio` o `--u` (el
 * quiosco es más grande que un teléfono), pero no vuelve a declarar un color. */

/* Archivo, la letra de FLUX y la que traen las experiencias nuevas. Estas
 * pantallas no cargan flux.css, así que sin esto «Archivo» caería a la letra
 * del sistema. Solo se descarga si el tema la pide. */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo/Archivo-Variable.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }

:root {
    /* ── 1 · Lo que pone el tema ─────────────────────────────────────── */
    --c-fondo: #ffffff;
    --c-superficie: #f6f7f9;
    --c-texto: #101418;
    --c-textoTenue: #5b6672;
    --c-acento: #101418;
    --c-acentoTexto: #ffffff;
    --c-realce: #101418;
    --c-borde: #e3e7ec;

    /* Roles de estado. El tema PUEDE traerlos; si no, valen estos. */
    --c-exito: #1f9d55;
    --c-aviso: #b45309;
    --c-peligro: #7f1d1d;
    --c-peligroSuave: #fca5a5;
    --c-info: #1d4ed8;
    --c-seleccion: #2f6fe0;

    /* El MARCO de las pantallas de la casa: el lateral de la caja. Medido sobre
       la maqueta 01 —tinta #22292D—. Es un rol más: el tema puede traerlo. */
    --c-marco: #22292d;
    --c-marcoTexto: #d5dbe0;

    /* Series de gráfica (Fase 1 · kit): los MISMOS ocho tonos, en el mismo orden,
       que `--flux-serie-*` de flux.css. No los trae el tema: identifican series,
       no visten la marca. Una prueba cuida que las dos listas no se separen. */
    --c-serie-1: #7A5B22;
    --c-serie-2: #2E6F73;
    --c-serie-3: #4F6F91;
    --c-serie-4: #A8564A;
    --c-serie-5: #6A655B;
    --c-serie-6: #7D4F7A;
    --c-serie-7: #8A6A1F;
    --c-serie-8: #908B80;

    --familia: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --peso-titulo: 700;
    --peso-texto: 400;
    --escala: 1.25;
    --radio: 12px;
    --borde: 1px;
    --u: 8px;

    /* ── 2 · Lo que se deriva ────────────────────────────────────────── */

    /* Lo que va ENCIMA de un color de estado o de una foto es claro siempre:
       no depende del tema, porque el fondo tampoco. */
    --c-sobre-estado: #ffffff;
    --c-sobre-foto: #ffffff;
    /* La tinta del botón claro que va sobre una foto: tampoco es del tema. */
    --c-tinta-fija: #101418;
    /* El velo detrás de una hoja o un diálogo. */
    --c-velo: rgb(0 0 0 / .45);
    --c-velo-denso: rgb(0 0 0 / .5);
    --c-deshabilitado: color-mix(in srgb, var(--c-texto) 38%, transparent);
    --c-foco: color-mix(in srgb, var(--c-seleccion) 45%, transparent);

    /* Espacio: pasos con nombre sobre la unidad del tema. */
    --e-1: calc(var(--u) / 2);
    --e-2: var(--u);
    --e-3: calc(var(--u) * 1.5);
    --e-4: calc(var(--u) * 2);
    --e-5: calc(var(--u) * 3);
    --e-6: calc(var(--u) * 4);

    /* Radio: un valor del tema, tres tamaños y la pastilla. */
    --radio-s: calc(var(--radio) / 2);
    --radio-m: var(--radio);
    --radio-l: calc(var(--radio) * 1.5);
    --radio-pastilla: 999px;

    /* Letra: DIEZ pasos, y todos salen de `--escala`, que es del tema.
       No es una escala de libro: se diseñó sobre los tamaños que las cinco hojas
       ya usaban, así que con la escala de fábrica (1.25) cada paso mide
       exactamente lo que medía su literal. Súbele la escala al tema y los
       títulos crecen y la letra chica se achica, todo junto; bájala a 1 y todo
       mide lo mismo. */
    --t-1: calc(1rem * (1 + (var(--escala) - 1) * -1.12));   /* 0.72rem con 1.25 */
    --t-2: calc(1rem * (1 + (var(--escala) - 1) * -0.8));   /* 0.8rem con 1.25 */
    --t-3: calc(1rem * (1 + (var(--escala) - 1) * -0.6));   /* 0.85rem con 1.25 */
    --t-4: calc(1rem * (1 + (var(--escala) - 1) * -0.4));   /* 0.9rem con 1.25 */
    --t-5: 1rem;
    --t-6: calc(1rem * (1 + (var(--escala) - 1) * 0.4));   /* 1.1rem con 1.25 */
    --t-7: calc(1rem * (1 + (var(--escala) - 1) * 0.8));   /* 1.2rem con 1.25 */
    --t-8: calc(1rem * (1 + (var(--escala) - 1) * 1.2));   /* 1.3rem con 1.25 */
    --t-9: calc(1rem * (1 + (var(--escala) - 1) * 2.4));   /* 1.6rem con 1.25 */
    --t-10: calc(1rem * (1 + (var(--escala) - 1) * 4.0));   /* 2.0rem con 1.25 */
    /* Nombres de antes, que siguen valiendo. */
    --t-base: var(--t-5);
    --t-xs: var(--t-1);
    --t-s: var(--t-3);
    --t-l: var(--t-7);
    --t-xl: var(--t-9);
    --t-2xl: var(--t-10);

    /* Sombras. `--sombra` es la que pide el tema con su nivel —0 plano, 1
       apenas, 2 levantado, 3 flotando—, que `aplicarTema` deja en el atributo
       `data-sombra` del documento. */
    --sombra-0: none;
    --sombra-1: 0 1px 2px rgb(0 0 0 / .06);
    --sombra-2: 0 1px 2px rgb(0 0 0 / .06), 0 4px 14px rgb(0 0 0 / .04);
    --sombra-3: 0 8px 24px rgb(0 0 0 / .12);
    --sombra-hoja-abajo: 0 -2px 16px rgb(0 0 0 / .12);
    --sombra-aviso: 0 8px 24px rgb(0 0 0 / .3);
    --sombra: var(--sombra-1);

    /* La forma de los COMPONENTES. El botón, la tarjeta y el campo leen estos
       y no `--radio` directo, para que el tema pueda decidir su forma: una
       pastilla y una tarjeta levantada son del tema, no de cada hoja. */
    --boton-radio: var(--radio);
    --boton-peso: var(--peso-titulo);
    --tarjeta-radio: var(--radio);
    --tarjeta-borde: var(--borde);
    --tarjeta-sombra: none;
    --campo-radio: var(--radio);

    /* Capas y tiempos: los que ya se usaban, con nombre. */
    --z-barra: 20;
    --z-hoja: 30;
    --z-aviso: 80;
    --z-ensayo: 90;
    --t-rapido: .15s;

    /* ── 3 · Alias con nombre de CSS ─────────────────────────────────── */
    --c-texto-tenue: var(--c-textoTenue);
    --c-marco-texto: var(--c-marcoTexto);
    --c-acento-texto: var(--c-acentoTexto);
    --c-peligro-suave: var(--c-peligroSuave);
    --grosor-borde: var(--borde);
}

/* La forma que pide el tema, que `aplicarTema` deja como atributo. */
:root[data-botones="pastilla"] { --boton-radio: var(--radio-pastilla); }
:root[data-botones="recto"] { --boton-radio: var(--radio-s); }
:root[data-tarjetas="levantada"] { --tarjeta-borde: 0px; --tarjeta-sombra: var(--sombra); }
:root[data-tarjetas="plana"] { --tarjeta-borde: 0px; }

:root[data-sombra="0"] { --sombra: var(--sombra-0); }
:root[data-sombra="2"] { --sombra: var(--sombra-2); }
:root[data-sombra="3"] { --sombra: var(--sombra-3); }

* { box-sizing: border-box; }

/* ── Variante accesible (UX V3.1) ───────────────────────────────────────
   UNA definición, para los cinco canales y la previa del Builder. La casa
   decide si la pantalla la OFRECE (Comportamiento › Generales › «Ofrecer modo
   accesible»); el comensal la enciende para sí y se recuerda en su aparato.
   `aplicarAccesible` (flux-runtime.js) solo pone `data-accesible="1"` en
   <html>: aquí se reescriben TOKENS, no reglas de cada pantalla. Ninguna hoja
   de canal declara reglas propias para este modo.

   Tres ejes, y cada uno se consume por los tokens que ya usa todo el sistema:
     · Letra   — el `rem` crece (toda la escala `--t-*` crece junta) y el texto
                 heredado del body también (1.18em en sus hijos: el body de
                 cada canal fija su tamaño en px).
     · Contraste — lo tenue se acerca a la tinta, los bordes y lo
                 deshabilitado se marcan y el foco se engrosa. Se mezcla
                 con los colores del TEMA: vale con cualquier tema.
     · Objetivos táctiles — `--objetivo-tactil` sube de 44 a 52 px, y el
                 espacio (`--u`) crece 25 %.

   Por qué en los hijos del body y no en <html>: el tema escribe sus tokens
   en línea sobre <html> (aplicarTema), y un estilo en línea le gana a
   cualquier hoja. El body los HEREDA y sus hijos los pueden redefinir a
   partir de ellos (`--u-heredada`), sin ciclos y sin perder lo del tema.
   Los derivados (`--e-*`, los alias) se vuelven a declarar ahí porque una
   variable heredada llega ya calculada con el valor de arriba. */
:root { --objetivo-tactil: 44px; }
:root[data-accesible="1"] { font-size: 118%; }
:root[data-accesible="1"] body { --u-heredada: var(--u); }
:root[data-accesible="1"] body > * {
    font-size: 1.18em;
    /* Objetivos táctiles y espacio */
    --objetivo-tactil: 52px;
    --u: calc(var(--u-heredada, 8px) * 1.25);
    --e-1: calc(var(--u) / 2);
    --e-2: var(--u);
    --e-3: calc(var(--u) * 1.5);
    --e-4: calc(var(--u) * 2);
    --e-5: calc(var(--u) * 3);
    --e-6: calc(var(--u) * 4);
    /* Contraste, sobre los colores del tema */
    --c-textoTenue: color-mix(in srgb, var(--c-texto) 82%, var(--c-fondo));
    --c-borde: color-mix(in srgb, var(--c-texto) 45%, var(--c-fondo));
    --c-foco: color-mix(in srgb, var(--c-seleccion) 80%, transparent);
    --c-deshabilitado: color-mix(in srgb, var(--c-texto) 55%, transparent);
    /* Los alias, otra vez: heredados, llegarían con el valor de antes. */
    --c-texto-tenue: var(--c-textoTenue);
}
/* Lo que se toca, al menos del objetivo táctil; los nombres, más firmes. */
:root[data-accesible="1"] :is(button, a, input, select, textarea, [role="button"]) { min-height: var(--objetivo-tactil); }
:root[data-accesible="1"] [class$="-item__nombre"] { font-weight: var(--peso-titulo); }
:root[data-accesible="1"] :focus-visible { outline-width: 3px; outline-color: var(--c-realce); }

/* La franja de «ambiente de pruebas» de los cobros: igual en los cinco canales. */
.flux-cobro-pruebas { position: sticky; top: 0; z-index: 60; padding: 6px 12px; text-align: center;
    font: 600 13px/1.3 var(--familia, system-ui, sans-serif); letter-spacing: .02em;
    background: #F6C744; color: #1B1B1B; }

/* Orden Ventas y Experiencias · VE-01 (VF-01): la franja de la previa del
   constructor, la misma en los cinco canales (la pone flux-runtime.js antes de
   la raíz). Arriba y fija mientras se desplaza: la previa pinta la vista real y
   quien mira tiene que saber siempre que ahí no se vende. */
.flux-previa { position: sticky; top: 0; z-index: 95; flex: 0 0 auto; padding: 6px 12px; text-align: center;
    font: 600 13px/1.3 var(--familia, system-ui, sans-serif); letter-spacing: .02em;
    background: var(--c-aviso); color: var(--c-sobre-estado); }
/* La caja y el mesero miden el alto exacto de la pantalla: con la franja, la
   raíz se queda con lo que sobra en vez de empujar su pie (Cobrar, Enviar)
   fuera de la vista. */
html.flux-en-previa body:has(> #pos), html.flux-en-previa body:has(> #mesero) { display: flex; flex-direction: column; }
html.flux-en-previa body > #pos, html.flux-en-previa body > #mesero { flex: 1 1 auto; min-height: 0; height: auto; }

/* ── El fondo de la experiencia ─────────────────────────────────────────
 * Una capa fija debajo de todo, que `aplicarFondo` (flux-runtime.js) crea
 * cuando el tema trae fondo. Con fondo, el body se vuelve transparente para
 * que se vea; sin él, sigue mandando `--c-fondo`. */
.flux-fondo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background-color: var(--c-fondo); }
.flux-fondo__imagen, .flux-fondo__velo, .flux-fondo__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.flux-fondo__imagen { inset: -12px; width: auto; height: auto; }
/* El body deja de pintar su color para que la capa se vea; la capa trae ese
 * mismo color debajo de la imagen, así que donde la imagen no llega sigue el tema. */
html[data-fondo] body { background: transparent !important; }
.flux-con-fondo { background-repeat: no-repeat; }

/* ── El pie de página (redes y legales) que pinta el motor ─────────────── */
.flux-pie { padding: calc(var(--u) * 3) var(--u); color: var(--c-textoTenue); font-size: var(--t-2, .85rem); text-align: center; border-top: 1px solid var(--c-borde); }
.flux-pie ul { list-style: none; margin: 0 0 calc(var(--u) * 1.5); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--u) calc(var(--u) * 2); }
.flux-pie a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.flux-pie__legal { margin: 0; max-width: 64ch; margin-inline: auto; }

/* ── Los bloques de contenido que pinta el motor (maqueta 3) ───────────── */
.flux-bloque { margin: calc(var(--u) * 2) var(--u); }
.flux-banner { position: relative; display: flex; align-items: center; padding: calc(var(--u) * 3); border-radius: var(--tarjeta-radio); background: var(--c-superficie) center / cover no-repeat; color: var(--c-texto); overflow: hidden; }
.flux-banner--foto { color: #fff; }
.flux-banner--centro { justify-content: center; text-align: center; }
.flux-banner--derecha { justify-content: flex-end; text-align: right; }
.flux-banner__texto { max-width: 36ch; display: grid; gap: var(--u); }
.flux-banner__titulo { margin: 0; font-size: var(--t-6, 1.6rem); font-weight: var(--peso-titulo, 700); line-height: 1.1; }
.flux-banner__sub { margin: 0; opacity: .9; }
.flux-banner__boton { justify-self: start; }
.flux-banner--centro .flux-banner__boton { justify-self: center; }
.flux-banner--derecha .flux-banner__boton { justify-self: end; }
.flux-boton-accion { display: inline-block; cursor: pointer; }
.flux-boton-accion--ancho { display: block; width: calc(100% - var(--u) * 2); }
.flux-boton-accion--secundario { background: transparent; color: var(--c-texto); border: var(--borde) solid var(--c-borde); }
.flux-boton-accion--enlace { background: none; border: 0; color: var(--c-acento); text-decoration: underline; padding: 0; font: inherit; }
.flux-texto-imagen { display: grid; gap: calc(var(--u) * 2); align-items: center; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.flux-texto-imagen--derecha { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.flux-texto-imagen--derecha .flux-texto-imagen__foto { order: 2; }
.flux-texto-imagen--arriba { grid-template-columns: 1fr; }
.flux-texto-imagen__foto { width: 100%; border-radius: var(--tarjeta-radio); object-fit: cover; aspect-ratio: 4 / 3; }
.flux-texto-imagen__texto h3 { margin: 0 0 var(--u); font-size: var(--t-5, 1.3rem); }
.flux-texto-imagen__texto p { margin: 0 0 var(--u); color: var(--c-textoTenue); }
@media (max-width: 600px) { .flux-texto-imagen, .flux-texto-imagen--derecha { grid-template-columns: 1fr; } .flux-texto-imagen--derecha .flux-texto-imagen__foto { order: 0; } }
.flux-separador { position: relative; }
.flux-separador--linea::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: var(--borde) solid var(--c-borde); }
.flux-separador--puntos::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dotted var(--c-borde); }
.flux-video { border-radius: var(--tarjeta-radio); overflow: hidden; background: #000; }
.flux-video__cinta { width: 100%; height: 100%; object-fit: cover; display: block; }
.flux-html { color: var(--c-texto); line-height: 1.5; }
.flux-html img { max-width: 100%; border-radius: var(--tarjeta-radio); }
.flux-html table { width: 100%; border-collapse: collapse; }
.flux-html th, .flux-html td { border: var(--borde) solid var(--c-borde); padding: calc(var(--u) / 2) var(--u); text-align: left; }

/* ── El diseño de tarjeta de la rejilla (maqueta 3) ─────────────────────── */
.flux-catalogo__titulo { padding: var(--u) var(--u) 0; }
.flux-catalogo__titulo h2 { margin: 0; font-size: var(--t-6, 1.6rem); }
.flux-catalogo__titulo p { margin: calc(var(--u) / 2) 0 0; color: var(--c-textoTenue); }
[style*="--foto-ratio"] [class$="-item__foto"] { aspect-ratio: var(--foto-ratio); height: auto; object-fit: cover; }
[data-esquinas="rectas"] [class$="-item"] { border-radius: 0; }
[data-esquinas="rectas"] [class$="-item__foto"] { border-radius: 0; }
[data-esquinas="redondeadas"] [class$="-item"] { border-radius: 16px; }
[data-sombra="1"] [class$="-item"] { box-shadow: 0 6px 20px rgb(0 0 0 / .12); }
[data-estilo="compacto"] [class$="-item__desc"] { display: none; }
[data-estilo="destacado"] [class$="-item__nombre"] { font-size: var(--t-4, 1.15rem); }
.flux-item__boton { padding: calc(var(--u) / 2) var(--u); border-radius: 999px; background: var(--c-acento); color: var(--c-acentoTexto); font-size: var(--t-1, .8rem); font-weight: 600; width: auto; height: auto; line-height: 1; }

/* ── La animación al agregar (maqueta 4): la elige la casa por acción ────── */
@keyframes flux-suave { from { box-shadow: 0 0 0 0 var(--c-acento); } to { box-shadow: 0 0 0 10px transparent; } }
@keyframes flux-rebote { 0% { transform: translateY(0); } 40% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
html[data-animacion="suave"] [class$="-item"].es-en-la-orden { animation: flux-suave .5s ease-out 1; }
html[data-animacion="rebote"] [class$="-item"].es-en-la-orden { animation: flux-rebote .35s ease-out 1; }
@media (prefers-reduced-motion: reduce) { html[data-animacion] [class$="-item"].es-en-la-orden { animation: none; } }

/* ── Componentes (Experiencias de venta): forma y tamaño de la foto de la tarjeta ──
   Sin seña se pinta como siempre («tema» y «mediana»). El tamaño en la rejilla
   es cuánto del ancho de la tarjeta ocupa la foto; en la lista, el renglón. */
[data-forma-imagen="redondeada"] [class$="-item__foto"] { border-radius: 12px; }
[data-forma-imagen="recta"] [class$="-item__foto"] { border-radius: 0; }
[data-forma-imagen="circulo"] [class$="-item__foto"] { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }
[data-tamano-imagen="chica"] [class$="-rejilla"] [class$="-item__foto"] { width: 60%; margin-inline: auto; }
[data-tamano-imagen="grande"] [class$="-rejilla"] [class$="-item__foto"] { min-height: 12rem; object-fit: cover; }
[data-tamano-imagen="chica"] [class$="-lista"] [class$="-item__foto"] { width: 56px; height: 56px; }
[data-tamano-imagen="grande"] [class$="-lista"] [class$="-item__foto"] { width: 128px; height: 104px; }

/* ── EV-1 (13-oct-2026) · lo común de las seis plantillas ───────────────
   «Personalizable» sobre la foto del producto que tiene opciones (M65, M75):
   se elige antes de agregar y sin preselección. Lo agotado va en gris y no
   se pide (la caja lo alcanza para deshacerlo). */
[class$="-item__personalizable"] {
    position: absolute; left: 8px; top: 8px; z-index: 1;
    padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700;
    background: var(--c-fondo); color: var(--c-acento);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--c-texto) 15%, transparent);
}
.es-personalizable { position: relative; }
.es-agotado { filter: grayscale(1); opacity: .65; }