/* ============================================================ CAPA 2 de tres: SEMÁNTICA. El puente entre lo que la pantalla quiere decir y el valor crudo de /shared/tokens.css. Las tres capas, y por qué importan: 1 · primitiva `tokens.css` — `--acento:#0C4243`. El valor. No opina. 2 · semántica este fichero — `--accent:var(--acento)`. La intención. 3 · componente la hoja de cada pantalla — `.btn-save{background:var(--accent)}` La regla: **una pantalla habla con la capa 2, nunca con la 1.** Si una hoja escribe `var(--acento)` se salta la intención, y el día que el acento deje de ser el color de los botones hay que ir a buscarlo a mano por cinco ficheros. `node scripts/ui/drift-tokens.mjs` lo cuenta y no deja que crezca. Los nombres de aquí son los viejos (`--bg`, `--text`, `--accent`) a propósito: ya los usan 3.000 líneas de las cinco pantallas y renombrarlos sería churn sin ganancia. Lo que faltaba no era el nombre, era que la capa estuviera COMPLETA — que no hubiera nada que sólo se pudiera pedir a la capa 1. Eso es lo que cierra el bloque de abajo. Cinco pantallas (consola del turno, admin, formulario público, consola de plataforma y el pre-turno) nacieron cada una con su propio bloque :root y la misma paleta oscura copiada a mano. Cambiar un color obligaba a tocar cinco ficheros y siempre quedaba uno atrás. Aquí se traduce UNA vez: ningún color literal por debajo de esta línea, y tokens.css sigue siendo la única fuente. Carga siempre DESPUÉS de tokens.css y ANTES de la hoja de la pantalla. ============================================================ */ /* ===== ALIAS — los nombres que usa la app apuntan a /shared/tokens.css ===== La piel vive en tokens.css (medida de superhuman.com, ver docs/ui/superhuman-medido.json). Aquí sólo se traduce. Ningún color literal por debajo de esta línea. Los tres temas antiguos (night/day/sunset) se colapsaron en dos: papel (por defecto) y noche. `data-theme=night|sunset` siguen resolviendo a noche para no dejar a nadie con la consola sin pintar tras el despliegue. */ :root{ --bg:var(--papel); --surface:var(--papel); --surface2:var(--papel-2); --surface3:var(--papel-3); --scrim:var(--velo); --border:var(--linea); --border-hi:var(--linea-fuerte); --text:var(--tinta); --muted:var(--tinta-70); --accent:var(--acento); --accent-dim:var(--acento-06); --accent-border:var(--acento-14); --accent-text:var(--sobre-hondo); --lilac:var(--acento); --lilac-dim:var(--acento-06); --lilac-border:var(--acento-14); --r:var(--r-2); --r-lg:var(--r-4); --r-sm:var(--r-1); --c-confirmed:var(--e-confirmada); --c-reconfirmed:var(--e-reconfirmada); --c-delayed:var(--e-demorada); --c-seated:var(--e-sentada); --c-in-service:var(--e-en-servicio); --c-completed:var(--e-completada); --c-no-show:var(--e-no-vino); --c-cancelled:var(--e-cancelada); --c-new:var(--e-nueva); /* «No cabe» es el décimo estado de una reserva, no un adorno: comparte el rojo de «no llegó» porque las dos cosas piden acción ya, pero tiene nombre propio en la capa 2 para poder separarse el día que haga falta. */ --c-unseatable:var(--e-no-vino); /* Ocasiones: una sola familia alrededor del acento; el estado manda el color de la fila, la ocasión sólo matiza. */ --oc-birthday:var(--acento); --oc-anniversary:var(--e-demorada); --oc-honeymoon:var(--acento); --oc-proposal:var(--e-no-vino); --oc-celebration:var(--e-en-servicio); --oc-vip:var(--acento); --oc-press:var(--e-sentada); --oc-other:var(--tinta-45); --green:var(--ok); --red:var(--malo); --amber:var(--aviso); --warn:var(--aviso); --danger:var(--malo); /* Faltaban tres nombres para lo que sale bien y para los tres fondos suaves: sin ellos, una pantalla que quisiera decir «esto fue bien» no tenia mas remedio que bajar a la capa 1 y pedir --ok. Y --green nombra el color, no la intencion. */ --success:var(--ok); --success-dim:var(--ok-suave); --warn-dim:var(--aviso-suave); --danger-dim:var(--malo-suave); /* El gris de segundo orden: mas apagado que --muted, para lo que acompana. */ --muted-soft:var(--tinta-45); --theme-icon:'°0'; /* ===== Lo que faltaba en la capa 2 ===== Hasta el 27-ago-2026 esto sólo existía como primitiva, así que las hojas no tenían más remedio que saltarse la capa. Ahora hay nombre de intención para todo lo que una pantalla necesita pedir. */ /* Forma. `--r-sm/--r/--r-lg` ya existían; faltaba la píldora y el marco. */ --r-pill:var(--r-max); --r-frame:var(--r-3); /* Elevación: hay UN techo y no hay escala. Que se llame así lo recuerda. */ --shadow:var(--sombra-max); --focus-ring:var(--foco); /* Movimiento. Nunca `all`: sólo color y opacidad (DIRECCION.md §3). */ --motion:var(--trans); /* Movimiento por INTENCION, no por milisegundo. La hoja pide el papel que cumple; el numero vive en la capa 1 y el motivo en docs/design/MOVIMIENTO.md. */ --ease-out:var(--ease-sale); --ease-in-out:var(--ease-mueve); --ease-drawer:var(--ease-cajon); --dur-press:var(--dur-1); --dur-color:var(--dur-2); --dur-enter:var(--dur-3); --dur-panel:var(--dur-4); --motion-press:transform var(--dur-1) var(--ease-sale); --motion-color:color var(--dur-2) var(--ease-sale), background-color var(--dur-2) var(--ease-sale), border-color var(--dur-2) var(--ease-sale); --motion-enter:opacity var(--dur-3) var(--ease-sale), transform var(--dur-3) var(--ease-sale); --motion-panel:transform var(--dur-4) var(--ease-cajon); /* Tipografía por papel, no por tamaño: la hoja pide el papel que cumple. */ --font-ui:var(--sans); --font-brand:var(--serif); --font-num:var(--mono); --type-meta:var(--t-sm); --lh-meta:var(--lh-sm); --type-body:var(--t-md); --lh-body:var(--lh-md); --type-entry:var(--t-lg); --lh-entry:var(--lh-lg); --type-title:var(--t-xl); --lh-title:var(--lh-xl); --type-micro:var(--t-xs); --lh-micro:var(--lh-xs); --weight-body:var(--w-cuerpo); --weight-mid:var(--w-medio); --weight-strong:var(--w-fuerte); /* Ritmo. */ --gap-xs:var(--s1); --gap-sm:var(--s2); --gap:var(--s3); --gap-md:var(--s4); --gap-lg:var(--s5); --gap-xl:var(--s6); /* Lo que se pulsa en servicio. 56 px es dedo de kiosco, no de móvil. */ --touch:var(--dedo); /* El papel. Únicos dos tokens que NO se invierten con el tema: una hoja impresa es blanca con tóner negro salga de la consola en noche o en día. */ --paper-print:var(--papel-impreso); --ink-print:var(--tinta-impresa); /* Bloques a sangre: el único sitio donde el texto va sobre color. */ --on-solid:var(--sobre-hondo); --on-state:var(--sobre-estado); --on-solid-dim:var(--sobre-hondo-80); --border-on-solid:var(--linea-hondo); } [data-theme="noche"],[data-theme="night"],[data-theme="sunset"]{ --theme-icon:'³D' } ::-webkit-scrollbar-thumb{background:var(--tinta-12)} ::-webkit-scrollbar-thumb:hover{background:var(--tinta-45)}