/* ===== Hik-Asistencia — tokens de diseño ===== * * Única fuente de colores, sombras, radios, medidas y curvas de movimiento de * TODAS las pantallas (index, login, kiosko, admin, asistente). Las hojas de * cada pantalla no llevan colores fijos: piden un token por su FUNCIÓN * («superficie», «borde-suave», «error-fondo») y el tema decide el valor. * * Cómo se elige el tema: * · → lo fijó la persona (localStorage['hik-tema']). * · Sin atributo → automático: sigue a prefers-color-scheme. * Por eso el bloque oscuro aparece dos veces, con los mismos valores: una para * el atributo y otra para la preferencia del sistema cuando no hay atributo. * CSS no tiene «mixins»; si cambia un valor oscuro hay que cambiarlo en ambos. * * Los tokens de marca (--primario, --secundario) los fija la empresa desde la * configuración (app.js los escribe en línea sobre ); --primario NO se * redefine en oscuro: es la identidad de la empresa y se ve igual en los dos * temas. Lo que sí cambia son sus derivados (--primario-texto, --primario-hover). */ :root { /* La página sabe pintarse en los dos esquemas: así el navegador entinta con el color correcto los controles nativos (selectores de fecha, listas desplegables, barras de desplazamiento) y el lienzo antes de cargar el CSS. */ color-scheme: light dark; /* ---- Marca (valores por omisión; la empresa los sobrescribe) ---- */ --primario: #c62828; --secundario: #263238; --primario-hover: color-mix(in srgb, var(--primario) 88%, black); --primario-texto: var(--primario); /* texto/enlaces en color de marca */ --primario-suave: color-mix(in srgb, var(--primario) 12%, var(--superficie)); /* Tinta que va ENCIMA del color de marca (botón primario, menú activo). Es blanca por omisión; app.js y kiosko.js la cambian a oscura cuando la empresa elige un color claro con el que el blanco no se lee. */ --sobre-primario: #ffffff; /* Tinta «fuerte» para cifras y encabezados: en claro es el secundario de la empresa; en oscuro es el texto normal (el secundario de la empresa suele ser oscuro y se perdería sobre fondo oscuro). No depende de --secundario en oscuro a propósito: app.js escribe --secundario en línea y ganaría siempre. */ --texto-fuerte: var(--secundario); /* ---- Fondos y superficies ---- El fondo de la página es apenas gris para que las cajas blancas «floten»; --superficie-2 es un peldaño abajo (encabezados de tabla, avisos neutros); --superficie-hover sólo se usa al pasar el ratón; --fondo-hundido es lo que se ve «detrás» (pistas de barras de progreso, celdas de descanso). */ --fondo: #f4f6f8; --fondo-hundido: #eceff1; --superficie: #ffffff; --superficie-2: #f8fafc; --superficie-hover: #f0f2f5; --caja: var(--superficie); /* nombre histórico de styles.css y saas.css */ --fondo-suave: var(--superficie-2); /* nombre histórico (ayuda, pestañas) */ /* ---- Bordes: normal para cajas y campos, suave para renglones de tabla, fuerte para separar zonas o marcar algo pendiente (borde discontinuo). ---- */ --borde: #e0e4e8; --borde-suave: #eef1f4; --borde-fuerte: #cfd8dc; /* ---- Texto: tres pesos de tinta. --texto-inverso es el texto que va sobre un fondo del color opuesto al tema (avisos flotantes). ---- */ --texto: #1f2933; --texto-suave: #5c6875; /* ≥ 4.5:1 sobre --fondo y --superficie: sirve para texto de verdad */ --texto-tenue: #a3adb8; /* SÓLO decorativo (placeholders, marcas de agua): no cumple contraste de texto */ --texto-inverso: #ffffff; /* ---- Barra lateral: siempre oscura, en los dos temas. Por eso tiene sus propios tokens en vez de reutilizar los de superficie. ---- */ --lateral-fondo: var(--secundario); --lateral-texto: #cfd8dc; --lateral-linea: rgba(255, 255, 255, .08); --lateral-hover: rgba(255, 255, 255, .08); /* ---- Estados: cada uno en par (tinta / fondo) para chips, celdas de la matriz y avisos. --aviso-texto existe porque el naranja puro no se lee sobre fondo ámbar; --aviso-fondo-2 es el ámbar pálido de «ajustado/incompleto». ---- */ --ok: #2e7d32; --ok-fondo: #e8f5e9; --aviso: #ef6c00; --aviso-texto: #9a5b00; --aviso-fondo: #fff3e0; --aviso-fondo-2: #fff8e1; /* El error NO es el rojo de marca (#c62828): «Guardar» y «Falta» no deben verse iguales. Este rojo tira a carmín y lleva su propio fondo. */ --error: #b3261e; --error-fondo: #fceeed; --info: #1565c0; --info-fondo: #e3f2fd; --neutro: #546e7a; --neutro-fondo: #eceff1; --resalte: #ffe9a8; /* marcador de búsqueda en la ayuda */ /* ---- Profundidad. La sombra normal apenas despega la caja; la alta es para lo que flota (modales, avisos). --velo oscurece detrás de un modal o del cajón del menú; --foco es el anillo de foco de campos y botones. ---- */ --sombra: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --sombra-alta: 0 12px 32px rgba(16, 24, 40, .18), 0 2px 8px rgba(16, 24, 40, .08); --velo: rgba(15, 23, 42, .5); --foco: color-mix(in srgb, var(--primario) 35%, transparent); /* Anillo de foco para teclado: azul fijo, visible sobre cualquier superficie de los dos temas y distinto del rojo de error y del color de marca. */ --foco-anillo: #1d4ed8; /* ---- Radios y medidas. --alto-toque es el mínimo cómodo para un dedo; --ancho-carril ya no lo usa esta aplicación (la tableta recibe la barra horizontal completa), pero el token se queda: lo lee saas/public/saas.css y borrarlo dejaría el panel de ISCOM con un carril de ancho cero. ---- */ --radio-s: 6px; --radio: 8px; --radio-l: 12px; --radio-xl: 14px; --ancho-lateral: 232px; --ancho-carril: 64px; --ancho-contenido: 1280px; --alto-toque: 44px; --alto-barra: 52px; /* Alto de la barra de navegación horizontal de escritorio. Va aparte de --alto-barra porque ese lo leen saas.css y kiosko.css para SU barra de 52 px: cambiarle el valor movería dos interfaces que no son ésta. */ --alto-barra-esc: 56px; /* ---- Tipografía. Escala de seis pasos; nada de texto por debajo de 12 px (los superíndices de la matriz son marcas, no texto). ---- */ --fuente: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --mono: Consolas, "SF Mono", Menlo, monospace; --tx-xs: 12px; /* etiquetas, chips, pies */ --tx-s: 13px; /* tablas, texto secundario */ --tx-m: 14px; /* cuerpo */ --tx-l: 16px; /* títulos de caja, barra superior */ --tx-xl: 20px; /* título de vista */ --tx-xxl: 24px; /* cifras destacadas */ --interlinea: 1.5; /* ---- Movimiento. Curvas de CSS demasiado flojas: no tienen el empuje que hace que una animación se sienta intencional. Nunca ease-in en interfaz: arranca lento justo en el momento que el usuario está mirando. ---- */ --salida: cubic-bezier(0.23, 1, 0.32, 1); /* entra y sale: arranca rápido */ --suave: cubic-bezier(0.77, 0, 0.175, 1); /* se mueve en pantalla */ /* Tiempos. Esto es un panel de trabajo, no una pieza de exhibición: nada pasa de 250 ms, y lo que se usa muchas veces al día no se anima. */ --t-pulsa: 140ms; --t-corto: 180ms; --t-medio: 220ms; } /* Tema fijado en claro: los controles nativos se quedan claros aunque el sistema esté en oscuro. */ :root[data-tema="claro"] { color-scheme: light; } /* ===== Tema oscuro (1 de 2): elegido por la persona ===== */ :root[data-tema="oscuro"] { color-scheme: dark; --primario-hover: color-mix(in srgb, var(--primario) 85%, white); --primario-texto: color-mix(in oklab, var(--primario) 65%, white); --secundario: var(--texto); --texto-fuerte: var(--texto); --fondo: #0f1418; --fondo-hundido: #0b0f13; --superficie: #171d23; --superficie-2: #1d252c; --superficie-hover: #232c34; --borde: #2a343d; --borde-suave: #222b33; --borde-fuerte: #3a4650; --texto: #e6ebf0; --texto-suave: #98a4b1; --texto-tenue: #5d6873; --texto-inverso: #0f1418; --lateral-fondo: #0b1116; --lateral-texto: #b8c4cc; --lateral-linea: rgba(255, 255, 255, .06); --lateral-hover: rgba(255, 255, 255, .07); --ok: #7dd487; --ok-fondo: #12301a; --aviso: #ffb266; --aviso-texto: #ffcc80; --aviso-fondo: #3a2410; --aviso-fondo-2: #33290d; --error: #f28b82; --error-fondo: #3b1a1a; --info: #7ab8ff; --info-fondo: #0f2540; --neutro: #9fb0ba; --neutro-fondo: #232c34; --resalte: #4a3d10; --sombra: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4); --sombra-alta: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .45); --velo: rgba(0, 0, 0, .66); --foco-anillo: #8ab4f8; } /* ===== Tema oscuro (2 de 2): automático, siguiendo al sistema ===== Mismos valores que arriba. Se aplica sólo si la persona no fijó «claro». */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; --primario-hover: color-mix(in srgb, var(--primario) 85%, white); --primario-texto: color-mix(in oklab, var(--primario) 65%, white); --secundario: var(--texto); --texto-fuerte: var(--texto); --fondo: #0f1418; --fondo-hundido: #0b0f13; --superficie: #171d23; --superficie-2: #1d252c; --superficie-hover: #232c34; --borde: #2a343d; --borde-suave: #222b33; --borde-fuerte: #3a4650; --texto: #e6ebf0; --texto-suave: #98a4b1; --texto-tenue: #5d6873; --texto-inverso: #0f1418; --lateral-fondo: #0b1116; --lateral-texto: #b8c4cc; --lateral-linea: rgba(255, 255, 255, .06); --lateral-hover: rgba(255, 255, 255, .07); --ok: #7dd487; --ok-fondo: #12301a; --aviso: #ffb266; --aviso-texto: #ffcc80; --aviso-fondo: #3a2410; --aviso-fondo-2: #33290d; --error: #f28b82; --error-fondo: #3b1a1a; --info: #7ab8ff; --info-fondo: #0f2540; --neutro: #9fb0ba; --neutro-fondo: #232c34; --resalte: #4a3d10; --sombra: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4); --sombra-alta: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .45); --velo: rgba(0, 0, 0, .66); --foco-anillo: #8ab4f8; } } /* ===== Documentos: tarjeta de asistencia, matriz y despacho en PDF, reporte de incidencias. Son papel: se ven igual en pantalla (vista previa), en el PDF y en la impresora, sin importar el tema. Se re-declaran aquí los tokens que sus reglas consultan, con los valores de siempre. styles.css repite este bloque a propósito: el PDF del servidor (saas/lib/nucleo.js) incrusta SÓLO styles.css, y sin esta copia el PDF se quedaría sin colores. ===== */ .tarjeta-asistencia, .matriz-pdf, .despacho-pdf, .reporte-incidencias { color-scheme: light; background: #fff; --sombra: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); /* el documento no cambia de sombra en oscuro */ --borde: #e0e4e8; --borde-suave: #eef1f4; --borde-fuerte: #cfd8dc; --superficie: #ffffff; --superficie-2: #f8fafc; --fondo-hundido: #f5f5f7; --texto: #111; --texto-suave: #555; --texto-tenue: #b5bcc4; --texto-fuerte: var(--secundario); --primario-texto: var(--primario); --ok: #2e7d32; --ok-fondo: #e8f5e9; --aviso: #ef6c00; --aviso-texto: #b26a00; --aviso-fondo: #fff3e0; --aviso-fondo-2: #fff8e1; --error: #c62828; --error-fondo: #ffebee; --info: #1565c0; --info-fondo: #e3f2fd; --neutro: #546e7a; --neutro-fondo: #eceff1; } /* ===== Impresión: siempre en claro, aunque la pantalla esté en oscuro. Se repiten los tokens que el oscuro sobrescribe; el tercer selector gana al bloque automático de prefers-color-scheme por especificidad y orden. ===== */ @media print { :root, :root[data-tema="oscuro"], :root:not([data-tema="claro"]) { color-scheme: light; --primario-hover: color-mix(in srgb, var(--primario) 88%, black); --primario-texto: var(--primario); --secundario: #263238; --texto-fuerte: var(--secundario); --fondo: #ffffff; --fondo-hundido: #eceff1; --superficie: #ffffff; --superficie-2: #f8fafc; --superficie-hover: #f0f2f5; --borde: #e0e4e8; --borde-suave: #eef1f4; --borde-fuerte: #cfd8dc; --texto: #1f2933; --texto-suave: #5c6875; --texto-tenue: #a3adb8; --texto-inverso: #ffffff; --lateral-fondo: var(--secundario); --lateral-texto: #cfd8dc; --lateral-linea: rgba(255, 255, 255, .08); --lateral-hover: rgba(255, 255, 255, .08); --ok: #2e7d32; --ok-fondo: #e8f5e9; --aviso: #ef6c00; --aviso-texto: #9a5b00; --aviso-fondo: #fff3e0; --aviso-fondo-2: #fff8e1; --error: #b3261e; --error-fondo: #fceeed; --info: #1565c0; --info-fondo: #e3f2fd; --neutro: #546e7a; --neutro-fondo: #eceff1; --resalte: #ffe9a8; --sombra: none; --sombra-alta: none; --velo: transparent; } }