/* ══════════════════════════════════════════════════════════════════════════ 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); /* El destello del degradado del wordmark: un dorado más claro que el acento, y el ÚNICO lugar donde se usa. Vive acá igual, porque la regla «ningún color suelto» sólo sirve si no tiene excepciones: una sola excepción y el barrido que la vigila se apaga. */ --acento-brillo: #e8d5b0; /* ── LAS CHAPAS DE PLAN ──────────────────────────────────────────────── Los tres primeros son los de Kiosco, copiados de su `css/app.css:74-79` -- Canu pidio «el color respectivo a full segun quiosco». El de PRO no existe alla, porque ellos tienen tres planes y Tienda tiene cuatro: se eligio de la misma familia (el violeta del mismo juego del que salieron el verde y el azul) para que los cuatro se lean como una escalera. */ --plan-full: #22c55e; --plan-full-fondo: rgba(34,197,94,.12); --plan-pro: #8b5cf6; --plan-pro-fondo: rgba(139,92,246,.12); --plan-std: #3b82f6; --plan-std-fondo: rgba(59,130,246,.12); --plan-bas: #b98b4f; --plan-bas-fondo: rgba(139,90,43,.16); --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; } /* ⚠️ EL MARGEN DEL NAVEGADOR, QUE NADIE HABIA SACADO. Canu, mirando la app en el celular el 08/09/2026: «se le ve todo un borde blanco al costado». Era esto: `body` trae `margin: 8px` de fábrica y ni `html` ni `body` tenían fondo --los dos en `rgba(0,0,0,0)`-- así que el blanco de la página del navegador se veía como un marco alrededor de la aplicación oscura. El fondo va en los DOS. Con sólo el de `body`, al estirar la página de más en un teléfono --el rebote del scroll-- se ve el blanco arriba y abajo. */ html, body { margin: 0; background: var(--fondo); } /* 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); } } /* ── EL BOTÓN ───────────────────────────────────────────────────────────── ⚠️ ESTA CLASE SE USABA EN 28 LUGARES Y NO ESTABA DEFINIDA EN NINGUNA HOJA. Medido el 08/09/2026 en la página del encargado, con sesión de verdad: los once `.boton` a la vista salían con el estilo por defecto del navegador -- gris `rgb(240,240,240)`, texto negro, borde `outset`, radio 0 y **Arial** -- arriba de una aplicación oscura. Y no son botones cualquiera: son «Cargar», «Recibir» y «Anotar», que son las acciones principales de las pantallas del que maneja la mercadería. Es el punto 8 de la referencia de Kiosco al pie de la letra: *una clase estilada en una hoja que esa página no carga se ve exactamente igual que un estilo que no existe*. Acá era la segunda mitad: no existía. NO SE INVENTÓ NADA. Los valores son los que este repo ya usaba en `.calc-boton` y `.volver-boton`, que son el mismo botón con otro nombre. Ahora hay uno solo y esos dos son sus casos particulares. `border: 1px solid transparent` Y NO `border: none`: los modificadores que ya existían --`.stock-boton-baja`, que pinta «Dar de baja» de rojo-- setean `border-color` y nada más. Sin un borde transparente abajo, ese `border-color` no dibuja nada. Estaban escritos suponiendo esta base. */ .boton { min-height: var(--toque-caja); padding: var(--e-3) var(--e-6); border: 1px solid transparent; border-radius: var(--radio); background: var(--acento); color: var(--sobre-acento); /* ⚠️ LA FAMILIA VA EXPLÍCITA, NO `font: inherit`. Con `inherit` el botón toma la del padre, y medido acá el 08/09: «Cargar», «Recibir» y «Anotar» salieron en **Times New Roman** --el serif de respaldo-- porque cuelgan de contenedores que no fijan familia, mientras «Dar de baja» salía en Inter. Tres botones hermanos con dos tipografías distintas. */ font-family: var(--letra); font-size: var(--txt-base); font-weight: var(--peso-medio); cursor: pointer; transition: filter var(--rapido), background var(--rapido); } .boton:hover:not(:disabled) { filter: brightness(1.08); } .boton:active:not(:disabled) { transform: translateY(1px); } .boton:disabled { opacity: .6; cursor: default; } /* ── EL HOVER DE LO QUE SE DESPLIEGA ────────────────────────────────────── Regla de la referencia compartida (punto 6, la otra mitad): **todo lo que se puede tocar tiene un hover**. Medido acá el 08/09 sobre la página del encargado: de 66 controles, 24 no tenían ninguno, y cuatro eran los `select` --el de «qué producto» del remito, el del proveedor, el de stock y el de a dónde va la devolución--. Va con `:where()` por lo mismo que el foco: es un piso de especificidad cero, así que la pantalla que quiera otro hover se lo pone y gana. */ :where(select):hover:not(:disabled) { border-color: var(--acento); } /* ── EL PISO DEL FOCO ───────────────────────────────────────────────────── Copiado de Kiosco (`referencias/el-diseno-de-adentro.md`, punto 6), que lo escribió después de medir que de 19 controles visibles de una pantalla **uno solo** mostraba algo al recibir el foco. MEDIDO ACÁ IGUAL, el 08/09/2026, sobre la página del encargado con sesión de verdad: **91 controles, 22 sin ninguna regla de foco.** Y no eran los raros: button.talle 13 los chips de talle de la grilla de variantes, que son EL control propio de Tienda button.boton 8 la acción principal de casi todas las pantallas input 1 Había 28 selectores con `:focus-visible` desparramados en las hojas de cada pantalla. No era una decisión: se fue poniendo donde alguien se acordó. LAS TRES DECISIONES QUE VIENEN ADENTRO DE ESTAS CUATRO LÍNEAS: 1. `:where()` da especificidad CERO, así que esto es un PISO y no un override: las 28 reglas propias le siguen ganando sin pelear. Sin eso habría que ir a apagarlo caso por caso. 2. `:focus-visible` y no `:focus`: el que toca con el dedo no tiene por qué ver un anillo. Lo decide el navegador, que sabe cómo llegó el foco. 3. `outline` y no `box-shadow`, aunque el resto del repo use `box-shadow: var(--foco)`. Un `box-shadow` lo recorta cualquier antepasado con `overflow: hidden` --y la grilla de talles y las listas largas lo tienen--. El outline se dibuja afuera y no se recorta. > Un foco invisible es peor que ninguno: la persona sabe que se movió y no > sabe adónde. */ :where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* ── 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); }