/* ========================================================================== Don Parqueo · tokens.css Paleta y tipografia del sistema: BLANCO Y AZUL. El azul es el color de un parqueadero: orden, senalizacion y confianza. El resto es gris azulado, y los demas colores solo entran donde significan algo (rojo, verde, ambar). LOS COLORES SON PUROS Y SATURADOS (2026-09-19). El azul es el de la senal de transito de parqueadero (la "P" blanca sobre azul, RAL 5017 Azul trafico): tono 206, sin rojo. El azul anterior (#0066FF, tono 216) mezclado con el gris del fondo se leia morado. Azul de marca #0063B1 (tono 206, saturacion 100). Blanco encima 6.1:1, cumple WCAG 2.2 AA. Como texto sobre el gris del fondo, #005CA5 (6.1:1 sobre #F2F2F2). Escala azul #E5F1FB · #99CBEF · #4AA3EC · #3597E3 · #0063B1 · #004F8E · #003E70 · #002A4D. En oscuro el texto azul es #4AA3EC. Verde #00853A (blanco encima 4.76:1) · Rojo #E11D2A (4.76:1) · Amarillo #FFD400 (siempre con tinta oscura encima; de texto sobre blanco NO se usa nunca, para eso esta --amb-ink). Grises: escala slate de Radix; los grises no se tocaron. El RELLENO del boton principal es el mismo azul en los dos temas; en oscuro solo se aclara el azul de TEXTO y de borde, que sobre fondo oscuro necesita mas luz. Esta app se usa a pleno sol y la auditan: manda WCAG AA. JERARQUIA POR COLOR, de mayor a menor peso: --marca relleno solido. La accion que se espera. --marca-ink el mismo azul como TEXTO y BORDE: es accion, no la principal. neutro gris: la salida (volver, omitir). --rojo solo para lo que no se puede deshacer. La tinta encima de cada fondo nunca se escribe a mano: sale de --sobre-*. El tema vive en y ademas en el propio marco, como en el prototipo, porque la regla de escritorio es [data-tema][data-ps="marco"]. ========================================================================== */ /* Una sola familia, variable de 400 a 800, servida desde el propio sitio: sin pedirle nada a Google y sin un salto de fuente a mitad de carga. */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fuentes/PlusJakartaSans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fuentes/PlusJakartaSans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root, [data-tema="claro"] { --bg: #F2F2F2; --sup: #FFFFFF; --sup-glass: rgba(255,255,255,.94); --sup-glass-2: rgba(255,255,255,.86); --sup-modal: rgba(255,255,255,.98); --glass-hd: rgba(255,255,255,.18); --borde-glass: rgba(255,255,255,.6); --borde-glass-2: rgba(255,255,255,.35); --ink: #121619; --ink2: #4D5358; --ink3: #60646C; --linea: #DDE1E6; --borde-sup: rgba(18,22,25,.08); --borde-input: #C1C7CD; --suave: #F2F2F2; --marca: #0063B1; --marca-osc: #004F8E; --marca-clara: #4AA3EC; --marca-ink: #005CA5; --marca-borde: #0063B1; --sobre-marca: #FFFFFF; --acento: #0063B1; --acento-osc: #004F8E; --acento-suave: #E5F1FB; --sobre-acento: #FFFFFF; --cabecera: #121619; --velo: rgba(12,17,22,.38); --btn-off: rgba(255,255,255,.70); --btn-off-ink: #4D5358; --press-ghost: #DDE1E6; --press-row: #F2F2F2; --ok-suave: #E1F6E8; --mal-suave: #FDE4E5; --amb-suave: #FFF3C7; --amb-ink: #6E5000; --skel: #DDE1E6; --skel-2: #EAEDF1; --tit-banda: #FFFFFF; --sub-banda: rgba(255,255,255,.85); } [data-tema="oscuro"] { /* Gris azulado de Radix slate. El relleno de la accion NO cambia de color (Blue 60, como manda Carbon); lo que se aclara es el azul de texto y de borde, que sobre fondo oscuro necesita mas luz. */ --bg: #1C1C1F; --sup: #26262A; --sup-glass: rgba(38,38,42,.94); --sup-glass-2: rgba(38,38,42,.86); --sup-modal: rgba(44,44,49,.98); --glass-hd: rgba(255,255,255,.08); --borde-glass: rgba(255,255,255,.12); --borde-glass-2: rgba(255,255,255,.14); --ink: #EDEEF0; --ink2: #B0B4BA; --ink3: #8D919A; --linea: #34343A; --borde-sup: rgba(255,255,255,.09); --borde-input: #4A4A52; --suave: #2E2E33; --marca: #0063B1; --marca-osc: #004F8E; --marca-clara: #3597E3; --marca-ink: #4AA3EC; --marca-borde: #3597E3; --sobre-marca: #FFFFFF; --acento: #0063B1; --acento-osc: #004F8E; --acento-suave: rgba(53, 151, 227,.18); --sobre-acento: #FFFFFF; --cabecera: #26262A; --velo: rgba(0,0,0,.5); --btn-off: rgba(255,255,255,.12); --btn-off-ink: #B0B4BA; --press-ghost: #38383E; --press-row: #2A2A2F; --ok-suave: #10331F; --mal-suave: #3A1416; --amb-suave: #362A08; --amb-ink: #FDDC69; --skel: #34343A; --skel-2: #2A2A2F; --tit-banda: #EDEEF0; --sub-banda: rgba(237,238,240,.78); } :root { /* --- semanticos: el prototipo los escribe como literales, no como token. Se guardan aca con el valor exacto que el prototipo usa, para no repetir el hex en cada regla. --- */ /* Los tres colores que SI significan algo: el semaforo. Nada mas entra por gusto. Verde y rojo puros con blanco encima por encima de 4.5:1. El amarillo, como toda su familia, SIEMPRE lleva tinta oscura encima. El rojo se reserva para lo que no se deshace, como pide el Design System de GOV.UK para sus botones de advertencia. El del medio era ambar #FFC20E, un oro apagado: ahora es amarillo limpio, que es como se lee el escalon de en medio de un semaforo. Amarillo de texto sobre blanco no existe: donde haga falta tinta de ese tono va --amb-ink, que es el mismo amarillo bajado a tinta legible. */ --verde: #00853A; /* pildora("ok"), boton de WhatsApp */ --sobre-verde: #FFFFFF; --rojo: #E11D2A; /* pildora("mal"), linea y ayuda en error */ --sobre-rojo: #FFFFFF; --ambar: #FFD400; /* pildora("amb"), avisos, "por vencer" */ --sobre-ambar: #21272A; /* tinta sobre amarillo: nunca blanca */ /* --amb-ink: la tinta que se lee sobre --amb-suave (el tinte claro), que NO es la misma que va sobre el color lleno. Vive con los temas. */ /* --- complementos: colores primarios y secundarios que acompañan al azul. No son marca: identifican una métrica (un medio de pago, un tipo de reporte) para que se reconozca de un vistazo. Violeta, cian, turquesa, naranja y magenta a saturacion plena; en oscuro, un paso mas claro. --- */ --c-violeta: #8B3DFF; --c-cian: #009FE0; --c-turquesa: #00B3A4; --c-naranja: #FF6A00; --c-magenta: #E6187A; /* Destellos de luz de las esquinas del fondo. */ --destello-1: rgba(0, 99, 177, .20); --destello-2: rgba(74, 163, 236, .22); /* --- espaciado: seis valores, nada a ojo (ESPECIFICACION) --- */ --e1: 4px; /* dentro de una etiqueta */ --e2: 8px; /* rotulo y su dato */ --e3: 12px; /* entre botones */ --e4: 16px; /* margen de pantalla */ --e5: 24px; /* entre bloques */ --e6: 32px; /* separar secciones */ /* --- alturas fijas (prototipo; las que venian de ESPECIFICACION se remidieron) --- */ --h-boton: 56px; --h-fila: 88px; /* prototipo esInicio: min-height 88, no 64 */ --h-toque: 48px; /* area tactil minima 48x48 */ --h-paso: 56px; /* botones de paso - / + */ --h-chip: 56px; /* prototipo chip(): minHeight 56 por defecto */ --h-boton-fila: 44px; /* prototipo: el boton Cobrar de la fila mide 118x44 */ --a-boton-fila: 118px; /* --- interruptor (ESPECIFICACION, "Interruptores de Configuracion") --- */ --sw-ancho: 56px; --sw-alto: 32px; --sw-bola: 26px; /* --- esquinas (ESPECIFICACION + prototipo) --- */ --r-boton: 16px; --r-chip: 16px; --r-tarjeta: 20px; --r-glass: 24px; /* tarjeta de vidrio del login / salogin */ --r-modal: 28px; --r-marco: 32px; --r-pastilla: 999px; /* --- tipografia: una sola familia, servida desde /fuentes --- */ --fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, Menlo, Consolas, monospace; /* escala tipografica (ESPECIFICACION + prototipo) */ --t-titular: 34px; /* titular comercial: la portada de planes */ --t-pantalla: 24px; /* titulo de pantalla 24/700 */ --t-seccion: 18px; /* titulo de seccion 18/700 */ --t-normal: 16px; /* texto normal 16/400 */ --t-rotulo: 12px; /* rotulo pequeno 12/700 mayusculas, letra +10% */ --t-boton: 18px; /* boton principal 18/700 */ --t-min-campo: 16px; /* minimo en campos de entrada */ /* dato grande: el prototipo NO usa un solo tamano. Cuatro, cada uno medido donde el prototipo lo pinta. El de 40 era el unico que traia ESPECIFICACION. */ --t-dato: 44px; /* esSalida total, esQr valor: 44/700, letra -2% */ --t-dato-caja: 40px; /* esCierre "saldo restante en caja": 40/700, letra -2% */ --t-dato-turno: 32px; /* esCierre "Entro en el turno": 32/700, sin letra */ --t-dato-banda: 26px; /* esInicio barra de turno "Recaudado": 26/700 */ /* placa: tampoco es un solo tamano. Cuatro medidos en el prototipo. El de 32 de ESPECIFICACION no aparece en ninguna pantalla del operador. */ --t-placa: 20px; /* esInicio fila: 20/700 mono, letra +10% */ --t-placa-grande: 24px; /* la misma fila con config.letraGrande */ --t-placa-recibo: 26px; /* esRecibo: 26/700 mono, letra +10% */ --t-placa-campo: 34px; /* esSalida cabecera: 34/700 mono, letra +12% */ --letra-rotulo: .10em; --letra-placa: .10em; /* prototipo esInicio y esRecibo: .10em, no .12em */ --letra-placa-campo: .12em; /* prototipo esSalida: .12em */ --letra-dato: -.02em; /* --- medidas de pantalla (prototipo, [data-ps="marco"]) --- */ --ref-ancho: 390px; --ref-alto: 844px; --max-escritorio: 1180px; --quiebre: 1000px; color-scheme: light; } [data-tema="oscuro"] { color-scheme: dark; --c-violeta: #A970FF; --c-cian: #2EC8FF; --c-turquesa: #12D6C6; --c-naranja: #FF8A2E; --c-magenta: #FF66AA; --destello-1: rgba(53, 151, 227, .26); --destello-2: rgba(153, 199, 255, .12); }