/* =========================================================================== TOKENS — la única fuente de verdad del sistema visual. Esta hoja no dibuja nada. Sólo declara. Ninguna otra hoja puede escribir un color, un tamaño de texto, un espaciado ni un radio literal: si hace falta un valor que no está aquí, se añade aquí y se usa por nombre. --------------------------------------------------------------------------- DE QUÉ VA ESTE SISTEMA No es un panel de administración. Es el LIBRO de una kermés parroquial. Un pedido pasa por cinco pares de manos —mesa, recolector, calidad, repartidor, caja— y en cada traspaso alguien se hace responsable de comida y de dinero ajeno. Esa cadena de custodia es lo único que todas las pantallas tienen en común, y es de donde sale todo lo que sigue. Quien lo usa es voluntariado que se entrena el mismo día, de pie, con prisa, a veces con reflejo de sol en la pantalla. La estética sirve a eso. =========================================================================== */ :root { /* ----------------------------------------------------------------------- COLOR La marca es AZUL MARINO: profundo y oscuro en las superficies que mandan —la portada del lomo, el bloque de "ahora", el libro contable— y claro en todo lo demás. Es lo que pide una herramienta que se mira ocho horas seguidas: no cansa, no compite con los datos y deja que el color con significado sea lo único que llama. Y se lleva bien con la semántica, que es lo que de verdad importa: a 218° queda a 95° del verde de "hecho", a 178° del ámbar y a 137° del rojo. Ningún estado puede confundirse con la marca, ni siquiera en daltonismo. Todos los valores de aquí abajo están MEDIDOS, no elegidos a ojo: 25 pares de contraste WCAG y 6 separaciones de tono entre significados, ninguno por debajo del mínimo. Los más ajustados: texto sobre lienzo 15.69:1 rótulos pequeños 5.17:1 blanco sobre la marca 10.27:1 ámbar sobre hoja 4.65:1 verde sobre hoja 5.13:1 espera vs pérdida 45.0° Si algún color de aquí cambia, hay que volver a medir: los mínimos son 4.5:1 para texto, 7:1 para cuerpo largo y 40° entre significados. ----------------------------------------------------------------------- */ --brand: #1D3F7A; --brand-deep: #0F2247; --brand-mid: #3A63AC; --brand-soft: #D5DFF1; --brand-faint: #F1F4FB; --on-brand: #FFFFFF; /* Papel y tinta. Neutros con un matiz azul, no grises puros: emparentan con el marino y mantienen la pantalla limpia. Un gris neutro al lado de un azul se ve sucio, y el crema tostado todavía peor. */ --paper: #EEF1F7; --sheet: #FFFFFF; --sheet-alt: #F6F8FC; --rule: #D9E0EC; --rule-strong: #B7C2D6; --ink: #101828; --ink-2: #48566E; --ink-3: #5F6E86; /* Estado. Tres significados, tres colores, cuatro escalones cada uno: -bg fondo teñido -rule borde del mismo tinte (base) el acento: franjas, puntos, iconos -ink el texto legible sobre -bg */ --done-bg: #E9F4E9; --done-rule: #AFD8B1; --done: #2E7D32; --done-ink: #1B5220; /* El ámbar está a 40° y no a 26° como antes: a 26° quedaba a sólo 26 grados del rojo, que es la confusión clásica en daltonismo. Ahora hay 45°. */ --wait-bg: #FBF0DE; --wait-rule: #E7C489; --wait: #9E6A00; --wait-ink: #663800; --lost-bg: #FBE9EA; --lost-rule: #ECB1B6; --lost: #B0242F; --lost-ink: #71171E; /* Informativo: se apoya en la marca, no inventa un cuarto tono. */ --info-bg: var(--brand-faint); --info-rule: var(--brand-soft); --info: var(--brand); --info-ink: var(--brand-deep); /* Superficie oscura: la pantalla de calidad colgada de la pared y el libro contable del panel. Es la misma superficie vista en dos sitios. */ --dark: #0E1C33; --dark-2: #16294A; --dark-3: #1E3459; --dark-rule: #2B446E; --dark-ink: #FFFFFF; --dark-ink-2: #A8B6D0; --dark-accent: #8AA8DC; /* Sobre oscuro los tintes claros desaparecen: cada estado necesita su par. */ --done-on-dark: #5FC77A; --wait-on-dark: #E5A63C; --lost-on-dark: #F07A82; /* Nombres heredados. Las vistas y los helpers PHP los consumen por su cuenta (badge(), status_tone(), --color-primary con reserva). */ --primary: var(--brand); --primary-dark: var(--brand-deep); --primary-soft: var(--brand-faint); --on-primary: var(--on-brand); --color-primary: var(--brand); --success: var(--done); --success-bg: var(--done-bg); --danger: var(--lost); --danger-bg: var(--lost-bg); --warning: var(--wait); --warning-bg: var(--wait-bg); --ok: var(--done); --ok-bg: var(--done-bg); --ok-ink: var(--done-ink); --ok-border: var(--done-rule); --bad: var(--lost); --bad-bg: var(--lost-bg); --bad-ink: var(--lost-ink); --bad-border: var(--lost-rule); --warn: var(--wait); --warn-bg: var(--wait-bg); --warn-ink: var(--wait-ink); --warn-border: var(--wait-rule); --info-border: var(--info-rule); --surface: var(--sheet); --surface-alt: var(--sheet-alt); --surface-soft: var(--paper); --canvas: var(--paper); --line: var(--rule); --line-strong: var(--rule-strong); --ink-soft: var(--ink-2); --ink-faint: var(--ink-3); --navy-900: var(--brand-deep); --navy-800: var(--dark); --navy-700: var(--brand-deep); --navy-600: var(--brand); --navy-500: var(--brand-mid); --navy-400: var(--brand-mid); --navy-300: var(--dark-accent); --navy-200: var(--brand-soft); --navy-100: var(--brand-soft); --navy-50: var(--brand-faint); --dark-canvas: var(--dark); --dark-surface: var(--dark-2); --dark-surface-alt: var(--dark-3); --dark-line: var(--dark-rule); --dark-ink-soft: var(--dark-ink-2); --ok-dark-bg: #123528; --ok-dark-ink: var(--done-on-dark); --bad-dark-bg: #43191F; --bad-dark-ink: var(--lost-on-dark); --ok-on-dark: var(--done-on-dark); --warn-on-dark: var(--wait-on-dark); --bad-on-dark: var(--lost-on-dark); /* ----------------------------------------------------------------------- TIPOGRAFÍA Sin familia descargada: la aplicación tiene que arrancar en un salón parroquial sin internet (por eso Leaflet va autoalojado) y la CSP sólo admite `font-src 'self'`. La personalidad la ponen la escala, el peso y el trato de las cifras, no un binario de 200 KB que a veces no llega. Dos escalas, porque son dos trabajos distintos: TEXTO que se lee en renglones y CIFRAS que se comparan de un vistazo. Mezclarlas es lo que producía cuarenta tamaños. ----------------------------------------------------------------------- */ --font: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Monoespaciada SÓLO para lo que hay que cotejar carácter a carácter: códigos de pedido e importes en columna. Nunca para rótulos. */ --font-num: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; --font-mono: var(--font-num); --font-sans: var(--font); --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 23px; --num-md: 20px; --num-lg: 26px; --num-xl: 32px; --num-2xl: 44px; --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* ----------------------------------------------------------------------- ESPACIADO — múltiplos de 4, seis pasos. ----------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --gap: var(--space-4); /* EXCEPCIÓN MEDIDA, y la única del sistema. El menú tiene diecisiete entradas y seis separadores, y debe caber en la altura útil de un portátil de 768 px sin sacar barra propia: una barra gruesa entre menú y contenido parte la pantalla en dos. Lo verifica test_phase14_browser.cjs. Con --space-2 el menú mide 740 px y no cabe. La restricción es física. */ --nav-pad-y: 7px; --nav-section-pad-y: 11px; /* ----------------------------------------------------------------------- FORMA Radio casi nulo. Una hoja de libro no tiene esquinas redondeadas; el radio grande convertía cada bloque en una pastilla flotante y hacía que todo pareciera una tarjeta suelta en vez de una superficie de trabajo. Lo que separa aquí es la REGLA y el espacio, no el relieve. ----------------------------------------------------------------------- */ --radius-sm: 2px; --radius: 3px; --radius-lg: 4px; --radius-pill: 999px; /* Profundidad casi inexistente: sólo lo que de verdad flota sobre el resto —un diálogo, el cajón del menú— proyecta sombra. Lo demás se apoya en la hoja y se separa con una regla. */ --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 1px 2px rgba(26, 23, 38, .06); --shadow-lg: 0 12px 32px rgba(26, 23, 38, .16); --shadow-navy: none; --shadow-dialog: 0 24px 64px rgba(26, 23, 38, .28); --scrim: rgba(26, 23, 38, .55); /* ----------------------------------------------------------------------- MOVIMIENTO Nunca se anima algo que el operador está esperando (la respuesta del servidor), sólo lo que ya ocurrió. Nada pasa de 200 ms, que es el techo de "respuesta inmediata". ----------------------------------------------------------------------- */ --fast: 110ms; --base: 180ms; --ease: cubic-bezier(.2, .7, .3, 1); --focus: var(--brand); --touch-md: 48px; --touch-lg: 56px; --touch-xl: 88px; }