/* ══════════════════════════════════════════════════════════════════════════ tokens.css · KFB Tienda TODOS los colores del producto viven acá. Ninguno suelto en otro archivo. POR QUÉ ESTE ARCHIVO EXISTE Un color escrito a mano en una pantalla es un color que el día que cambie la marca queda viejo en un solo lugar, y nadie sabe en cuál. Con esto, cambiar el acento del producto entero es cambiar una línea. ⚠️ LOS VALORES YA NO SON MÍOS: SON LOS DE LA FAMILIA. Hasta el 06/09/2026 este archivo tenía colores que había elegido yo --un ámbar `#f0a020` sobre un negro azulado `#0f1115`-- y decía acá mismo que eran "una base, no una decisión de Canu". Nunca lo fueron: **KFB ya tenía una identidad y a esta sesión nadie se la había pasado.** Canu vio la app corriendo y dijo «una poronga»; tenía razón, y no por el diseño: porque no se parecía a KFB. Kiosco los mandó por la bandeja el 06/09 y los verifiqué contra su `css/tokens.css` en vez de confiar en la carta --su propio texto avisa que un brief anterior tenía un color mal y costó días--. acento #f0a020 naranja -> #c9a96e DORADO fondo #0f1115 azulado -> #1a1a1a negro cálido texto #eef1f6 azulado -> #faf9f7 títulos (no había) -> Playfair Display cuerpo system-ui -> Inter **Los nombres siguen en castellano** --`--acento`, no `--gold`-- porque es la regla de este repo y porque acá no se importa código de Kiosco: se copia el patrón y queda autocontenido. Lo que se comparte son los VALORES. LO QUE TODAVÍA NO ES DE LA FAMILIA, dicho para que no se confunda: `--plata` el color de la plata y la rentabilidad. Kiosco no tiene un token equivalente, así que este valor lo elegí yo. Un verde azulado contra el dorado separa de un vistazo lo que sólo ve el dueño. **Falta que Canu lo confirme.** el tema MARRÓN Kiosco tiene tres (`dark`, `light`, `brown`). Acá van dos. El tercero es una decisión de producto que nadie pidió. LAS DOS SUPERFICIES, que no se mezclan LANDING Y VENTA ambición completa: movimiento, profundidad, lo que impresione. Ahí se juega. APP EN USO el cajero con la cola encima necesita que el botón responda YA. Manda la velocidad, no el espectáculo. Los tokens de movimiento de abajo están pensados para la segunda: cortos. La landing puede pedir los suyos. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── SUPERFICIES ────────────────────────────────────────────────────── Tres niveles, no dos: el fondo, la tarjeta, y lo que se levanta por encima (un menú, un diálogo). Con dos, todo lo elevado se confunde con la tarjeta y la pantalla se aplana. `--fondo` y `--superficie` son de Kiosco. `--superficie-alta` no existe allá --ellos levantan con una capa translúcida-- así que es un paso más de la misma escala. */ --fondo: #1a1a1a; --superficie: #242424; --superficie-alta: #2e2e2e; --borde: rgba(250,249,247,.08); --borde-suave: rgba(250,249,247,.05); --borde-acento: rgba(201,169,110,.22); /* ── TEXTO ──────────────────────────────────────────────────────────── Tres pesos de contraste, los tres de Kiosco. El terciario es para lo que acompaña, nunca para un dato que alguien tenga que leer con la cola encima. ⚠️ Kiosco llegó a tener OCHENTA textos ilegibles en el tema claro, y el grueso eran estas dos variables puestas demasiado transparentes. Se mide el contraste, no se mira. */ --texto: #faf9f7; --texto-2: rgba(250,249,247,.68); --texto-3: rgba(250,249,247,.55); /* ── EL ACENTO — DORADO, EL DE LA FAMILIA ───────────────────────────── `#c9a96e` es el mismo de Kiosco y de Gastro. No es naranja ni amarillo, y el rojo `--fuego` NO es un color de interfaz: es sólo la palabra "Fire" del logo, y no se usa para nada más. ⚠️ EL DORADO NO SIRVE COMO TEXTO EN EL TEMA CLARO, y no es una opinión. Medido el 06/09/2026 sobre `#f7f5f0`: #c9a96e el acento .................. 2,05 NO LLEGA #a0824d el hondo de Kiosco ......... 3,33 NO LLEGA #8d6a35 ................................ 4,54 pasa 4,5 es el mínimo para que un texto se lea. Por eso hay un token aparte, `--acento-texto`: el acento sigue siendo la marca --relleno de botón, borde, ícono, donde alcanza con 3-- y el texto dorado usa el que se lee. `#8d6a35` es el MISMO tono y la MISMA saturación (36°, 45%): es el dorado de la familia, más oscuro. No es otro color. En el tema oscuro los dos son `#c9a96e`, que ahí da 7,78. */ --acento: #c9a96e; --acento-texto: #c9a96e; /* el que se LEE. Cambia en el tema claro. */ --acento-fuerte: #dcc199; /* más claro, para el hover. Derivado. */ --acento-hondo: #a0824d; /* el `--gold-dark` de Kiosco */ --acento-suave: rgba(201,169,110,.14); --sobre-acento: #1a1a1a; --fuego: #ff4d4d; /* SÓLO la "Fire" del logo */ /* ── LOS TRES ESTADOS QUE VE EL QUE ATIENDE ─────────────────────────── Salió bien · falta un paso tuyo · no se pudo. El usuario final NUNCA ve un error técnico: ve uno de estos tres y algo que pueda hacer. Los tres colores son los de Kiosco; los fondos son translúcidos para que funcionen en los dos temas sin una segunda tabla. */ --ok: #22c55e; --ok-fondo: rgba(34,197,94,.12); --atencion: #f59e0b; --atencion-fondo: rgba(245,158,11,.12); --error: #c44b4b; --error-fondo: rgba(196,75,75,.14); /* ── LO QUE SÓLO VE EL DUEÑO ────────────────────────────────────────── La plata y la rentabilidad tienen su propio color para que se distinga de un dato cualquiera. El encargado NUNCA ve esto, en ningún plan. */ --plata: #7fd1c4; /* ── TIPOGRAFÍA — LAS DOS DE LA FAMILIA ─────────────────────────────── Playfair Display para títulos y el wordmark; Inter para todo lo demás. Son las de Kiosco y las de Gastro. Antes de esto la app entera estaba en la del sistema, y los números en monoespaciada. Kiosco lo dijo sin vueltas: eso lee como una terminal, no como un producto que se vende. Los números de plata y de stock van tabulares SIEMPRE: sin eso, una columna de importes baila y no se puede leer de un vistazo. Para eso alcanza `font-variant-numeric`, no hace falta una monoespaciada. DE DONDE SALEN, y por que ese `display=swap`: Kiosco NO las sirve de su repo: las trae de Google Fonts (`dueno.html:7-8`). Mismo origen y mismos pesos aca: Playfair 700, Inter 400/500/600. `display=swap` hace que con mala conexion se lea YA con la letra de respaldo y despues cambie, en vez de dejar el texto invisible mientras baja -- una pantalla en blanco esperando es justo lo que no se acepta. Las paginas las enlazan en su ``; el porque esta aca, una sola vez, junto a los tokens que las nombran. */ --letra: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --letra-titulo: 'Playfair Display', Georgia, "Times New Roman", serif; --letra-num: var(--letra); --txt-xs: 0.75rem; --txt-sm: 0.875rem; --txt-base: 1rem; --txt-lg: 1.125rem; --txt-xl: 1.5rem; --txt-2xl: 2rem; /* El importe total de una venta. Grande a propósito: es lo que el cajero mira sin acercarse y lo que el cliente lee desde el otro lado. */ --txt-total: clamp(2rem, 1.2rem + 3vw, 3.25rem); --peso-normal: 400; --peso-medio: 550; --peso-fuerte: 700; /* ── ESPACIO ────────────────────────────────────────────────────────── Escala de 4. Ritmo intencional: los saltos se sienten, no son todos iguales. */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-6: 1.5rem; --e-8: 2rem; --e-12: 3rem; --e-16: 4rem; /* ── BOTONES QUE SE TOCAN CON EL DEDO ───────────────────────────────── 44px es el mínimo real de un dedo. En la caja, un botón chico es una venta mal cargada con gente esperando. */ --toque-min: 44px; --toque-caja: 56px; --radio-sm: 6px; --radio: 10px; --radio-lg: 16px; --radio-full: 999px; /* ── PROFUNDIDAD ────────────────────────────────────────────────────── Sombras que levantan de verdad, no un gris difuso. */ --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4); --sombra-2: 0 4px 12px rgb(0 0 0 / 0.45); --sombra-3: 0 12px 32px rgb(0 0 0 / 0.55); /* El foco tiene que verse SIEMPRE. El que carga mercadería con el teclado necesita saber dónde está parado. */ --foco: 0 0 0 3px color-mix(in oklch, var(--acento) 45%, transparent); /* ── MOVIMIENTO — para la app en uso ────────────────────────────────── Corto. Una animación de 300ms en un botón de cobrar es 300ms de más con la cola esperando. */ --rapido: 120ms; --normal: 180ms; --salida: cubic-bezier(0.16, 1, 0.3, 1); } /* ══════════════════════════════════════════════════════════════════════════ EL TEMA CLARO — Tienda no tenía ninguno hasta el 06/09/2026 ══════════════════════════════════════════════════════════════════════════ Un local con una vidriera a la calle a las tres de la tarde no ve una pantalla oscura, y hasta hoy no había forma de cambiarla. SE REDEFINEN SÓLO LOS TOKENS QUE CAMBIAN. Todo lo que no está acá abajo --el dorado, los tres estados, los espacios, las letras-- se hereda del bloque de arriba. Un tema que repite la tabla entera es un tema que se desincroniza el día que alguien agrega un token y se olvida de uno de los dos lados. `data-tema` en castellano, como el resto de este repo. Kiosco usa `data-theme` y tiene además un tercero, `brown`; acá van dos, y el tercero queda anotado como decisión de producto que nadie pidió. ⚠️ El acento dorado NO se toca entre temas: es la marca. Lo que cambia es el fondo y el texto. Y `--acento-hondo` existe justamente para esto -- el dorado claro sobre fondo claro no llega a contraste, y ahí manda el hondo. ══════════════════════════════════════════════════════════════════════════ */ :root[data-tema="claro"], :root:not([data-tema="oscuro"]) { color-scheme: light; } :root[data-tema="oscuro"] { color-scheme: dark; } /* El claro se define una vez y se aplica por los dos caminos: cuando el sistema lo pide y nadie eligió, y cuando alguien lo eligió a mano. */ @media (prefers-color-scheme: light) { :root:not([data-tema="oscuro"]) { --fondo: #f7f5f0; --superficie: #faf9f7; --superficie-alta: #ffffff; --borde: rgba(26,26,26,.1); --borde-suave: rgba(26,26,26,.06); --borde-acento: rgba(160,130,77,.35); --texto: #1a1a1a; --texto-2: rgba(26,26,26,.72); --texto-3: rgba(26,26,26,.65); --acento-texto: #8d6a35; --acento-fuerte: #a0824d; --acento-suave: rgba(160,130,77,.14); --sobre-acento: #1a1a1a; --sombra-1: 0 1px 2px rgb(0 0 0 / 0.08); --sombra-2: 0 4px 12px rgb(0 0 0 / 0.10); --sombra-3: 0 12px 32px rgb(0 0 0 / 0.14); } } :root[data-tema="claro"] { --fondo: #f7f5f0; --superficie: #faf9f7; --superficie-alta: #ffffff; --borde: rgba(26,26,26,.1); --borde-suave: rgba(26,26,26,.06); --borde-acento: rgba(160,130,77,.35); --texto: #1a1a1a; --texto-2: rgba(26,26,26,.72); --texto-3: rgba(26,26,26,.65); --acento-texto: #8d6a35; --acento-fuerte: #a0824d; --acento-suave: rgba(160,130,77,.14); --sobre-acento: #1a1a1a; --sombra-1: 0 1px 2px rgb(0 0 0 / 0.08); --sombra-2: 0 4px 12px rgb(0 0 0 / 0.10); --sombra-3: 0 12px 32px rgb(0 0 0 / 0.14); } /* ══════════════════════════════════════════════════════════════════════════ `hidden` TIENE QUE ESCONDER. SIEMPRE. ══════════════════════════════════════════════════════════════════════════ El atributo `hidden` esconde porque el navegador trae `[hidden]{display:none}` en su hoja propia -- y **cualquier `display` que escribamos nosotros le gana**, porque una regla de autor pesa más que una del navegador. Con eso, `el.hidden = true` deja de hacer nada y no avisa: la propiedad queda en `true`, el elemento sigue midiendo, y el que lee el código ve algo que parece correcto. Medido el 06/09/2026 armando `caja.html`: `entrar.css` le pone `display: flex` a `.pantalla`, así que al entrar el acceso quedaba escondido «según el DOM» y ocupando 432×800 en pantalla, empujando la app entera abajo del pliegue. La página se veía en negro y no había ni un error en la consola. `!important` acá está bien puesto y no es pereza: es la única forma de que una regla gane siempre sin ir a buscar la especificidad de cada elemento que algún día lleve un `display`. La alternativa --acordarse en cada archivo-- es la que ya falló. El armazón (`display: grid`) tenía el mismo defecto esperando. */ [hidden] { display: none !important; } /* ── EL ANCHO INCLUYE EL RELLENO Y EL BORDE ──────────────────────────────── Faltaba, y no era un detalle de prolijidad: sin esto, `max-width: 380px` mas `padding: 36px 32px` da una tarjeta de 446px, no de 380. Medido el 07/09/2026 contra Kiosco, que lo tiene en su `css/tokens.css` desde siempre: tarjeta del acceso Kiosco 380x214 Tienda 446x257 Y ese es el motivo de fondo de que Tienda "no se pareciera" a Kiosco: casi todos los valores de esta hoja se copiaron de la suya, y los suyos estan escritos SUPONIENDO esto. Copiar los numeros sin copiar la regla que los interpreta los deja diciendo otra cosa. No se arregla restandole el relleno a cada ancho --eso es compensar-- sino poniendo la regla que faltaba. Va con `*::before, *::after` porque un pseudo-elemento con relleno tiene el mismo problema y no lo hereda solo. */ *, *::before, *::after { box-sizing: border-box; } /* Quien pidió menos movimiento, no lo tiene. No es una cortesía: hay gente a la que una transición le produce mareo. */ @media (prefers-reduced-motion: reduce) { :root { --rapido: 0ms; --normal: 0ms; } } /* ── Los números de plata y de stock, tabulares ───────────────────────── Una columna de importes con cifras de ancho distinto no se puede leer rápido, y "rápido" es todo el punto en la caja. */ .num, .plata, .stock { font-family: var(--letra-num); font-variant-numeric: tabular-nums; } .plata { color: var(--plata); } /* ══════════════════════════════════════════════════════════════════════════ EL VOCABULARIO COMPARTIDO Cuatro familias que vivían en la hoja de UNA pantalla y las usa toda la app. Las encontró `barridos/una-clase-de-una-pantalla-usada-en-otra.py` el 07/09/2026: .aviso vivia en entrar.css, se usa en acceso + aparatos .campo vivia en entrar.css, se usa en acceso + cargar + empleados .campo-pista vivia en cargar.css, se usa en cargar + otras .subtitulo-seccion vivia en adentro.css, se usa en 15 pantallas NO ERA PROLIJIDAD, Y EL DÍA LLEGÓ: acá decía que las cuatro páginas de rol cargaban `entrar.css` y que por eso `.aviso` y `.campo` andaban **de casualidad**, y que el día que el acceso se mudara a un `index.html` propio esas páginas se quedarían sin la mitad de sus formularios. **Ese día fue el 07/09/2026 a la tarde.** El acceso se mudó al índice y las cuatro páginas dejaron de cargar `entrar.css`. Se midió clase por clase qué usaban fuera del bloque del acceso, y faltaban dos más: .paso las 4 páginas · TODA pantalla de la app es un `.paso` .enlace las 4 páginas · 35 usos y una tercera escondida: `.campo input:focus-visible`, que vivía en la hoja de la puerta mientras `.campo` ya estaba acá. Sin ella los campos de la app quedaban sin anillo de foco --no se ve al mirar, se ve tabulando--. Es el mismo caso que Kiosco nos contó de su `.forget-device`: la clase estaba bien, el archivo no. ══════════════════════════════════════════════════════════════════════════ */ /* ── EL AVISO ───────────────────────────────────────────────────────────── Alto fijo: sin esto, el cartel aparece y empuja hacia abajo lo que sigue justo cuando el dedo va a tocar algo. */ .aviso { min-height: 1.2rem; margin: var(--e-2) 0 0; text-align: center; font-size: .82rem; color: var(--texto-2); } .aviso.mal { color: var(--error); } .aviso.ojo { color: var(--atencion); } .aviso.bien { color: var(--ok); } .aviso[hidden] { display: none !important; } /* ── UN CAMPO CON SU ETIQUETA ARRIBA ──────────────────────────────────── */ .campo { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-4); } .campo[hidden] { display: none; } .campo-nombre { font-size: .78rem; color: var(--texto-2); } .campo input { min-height: var(--toque-min); padding: var(--e-3) var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); color: var(--texto); font: inherit; } .campo input:focus-visible { outline: none; box-shadow: var(--foco); } /* La línea de ayuda abajo de un campo. */ .campo-pista { font-size: var(--txt-sm); color: var(--texto-3); line-height: 1.35; } /* ── EL RÓTULO DE UNA SECCIÓN ───────────────────────────────────────────── Pegado a lo suyo: el espacio de arriba lo pone el que viene antes. Un título a la misma distancia de lo de arriba y de lo de abajo no agrupa nada. */ .subtitulo-seccion { margin: 0 0 var(--e-3); font-size: var(--txt-sm); font-weight: var(--peso-medio); color: var(--texto-3); letter-spacing: 0.08em; text-transform: uppercase; } /* ── UNA PANTALLA ───────────────────────────────────────────────────────── Toda pantalla de la app es un `.paso`, y los dos pasos de la puerta también. Aparecen subiendo: 350ms, sólo al cambiar de pantalla. ⚠️ EL ANCHO NO ESTÁ ACÁ, Y ES A PROPÓSITO. Este bloque tenía además un `max-width: 380px` --el de la tarjeta del acceso-- que `armazon.css:194` pisaba con 68rem para las pantallas de trabajo. O sea: el valor de la puerta viajaba a toda la app y otra hoja lo compensaba. Al mudarse acá se fue esa línea, y el ancho lo pone cada lado: la puerta con su `.pantalla > *`, la app con su `.contenido > .paso`. Compensar dos veces da el mismo pixel y esconde de quién es el número. */ .paso { width: 100%; animation: paso-sube .35s cubic-bezier(.16, 1, .3, 1); } .paso[hidden] { display: none; } @keyframes paso-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── UN ENLACE DE TEXTO ─────────────────────────────────────────────────── El botón que no es un botón: «Vaciar», «Cambiar de local», «Todavía no». Lleva subrayado porque un texto sin subrayar y sin caja no se lee como algo que se toca. */ .enlace { display: block; width: fit-content; margin: var(--e-4) auto 0; padding: var(--e-2); border: none; background: none; color: var(--texto-3); font: inherit; font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .enlace:hover { color: var(--texto-2); } .enlace:focus-visible { outline: none; box-shadow: var(--foco); }