/* ===================================================================== ARK · Sistema cromático — ark-tokens.css --------------------------------------------------------------------- Dos capas: 1. LA PALETA. Las 49 variables de la especificación del 12.08.2026. No cambian nunca, ni de día ni de noche. Son el material. 2. LOS ROLES. Qué papel cumple cada color en la interfaz. Esta capa SÍ cambia según el modo, y es la única que las pantallas deben usar. Una pantalla nunca pide «verde ark»: pide «el acento». Modo: (por defecto) · data-tema="dia" Cómo se leen los sufijos: -100 el más claro · -300 aclarado · -500 el color tal cual -700 oscurecido · -900 el más oscuro ===================================================================== */ /* ===================================================================== 1. LA PALETA · las 49 variables, tal cual la especificación ===================================================================== */ :root { /* Negro Basalto */ --negro-basalto: #0e1214; --negro-basalto-rgb: 14, 18, 20; --negro-basalto-100: #d4d4d5; --negro-basalto-300: #828485; --negro-basalto-500: #0e1214; --negro-basalto-700: #090b0c; --negro-basalto-900: #040606; /* Grafito Ark */ --grafito-ark: #181d21; --grafito-ark-rgb: 24, 29, 33; --grafito-ark-100: #d5d6d7; --grafito-ark-300: #87898c; --grafito-ark-500: #181d21; --grafito-ark-700: #0f1214; --grafito-ark-900: #08090b; /* Verde Ark */ --verde-ark: #10665f; --verde-ark-rgb: 16, 102, 95; --verde-ark-100: #d4e3e2; --verde-ark-300: #83afac; --verde-ark-500: #10665f; --verde-ark-700: #0a3f3b; --verde-ark-900: #05211e; /* Ámbar Ark */ --ambar-ark: #b45309; --ambar-ark-rgb: 180, 83, 9; --ambar-ark-100: #f2e0d3; --ambar-ark-300: #d8a67f; --ambar-ark-500: #b45309; --ambar-ark-700: #703306; --ambar-ark-900: #3a1b03; /* Niebla */ --niebla: #e4e9ea; --niebla-rgb: 228, 233, 234; --niebla-100: #fafbfb; --niebla-300: #f1f4f4; --niebla-500: #e4e9ea; --niebla-700: #8d9091; --niebla-900: #494b4b; /* Gris Acero */ --gris-acero: #8b979c; --gris-acero-rgb: 139, 151, 156; --gris-acero-100: #eaeced; --gris-acero-300: #c3c9cc; --gris-acero-500: #8b979c; --gris-acero-700: #565e61; --gris-acero-900: #2c3032; /* Rojo Óxido */ --rojo-oxido: #b4453a; --rojo-oxido-rgb: 180, 69, 58; --rojo-oxido-100: #f2dedc; --rojo-oxido-300: #d89e99; --rojo-oxido-500: #b4453a; --rojo-oxido-700: #702b24; --rojo-oxido-900: #3a1613; /* ----------------------------------------------------------------- Tipografía: seis familias, cada una con su función. No cambian entre modos: el sistema tipográfico es uno solo. ----------------------------------------------------------------- */ --f-interfaz: 'Inter', sans-serif; /* nav, formularios */ --f-cifras: 'JetBrains Mono', monospace; /* importes y números */ --f-titular: 'EB Garamond', serif; /* titulares de sección*/ --f-resumen: 'League Spartan', sans-serif; /* cifras de cabecera */ --f-estado: 'Bebas Neue', sans-serif; /* etiquetas de estado */ --f-nota: 'Vollkorn', serif; /* descripciones/notas */ } /* ===================================================================== 2. LOS ROLES · MODO NOCHE (por defecto) --------------------------------------------------------------------- Los tonos intermedios no son grises nuevos: salen de mezclar dos pasos de una escala que ya existe, que es justo lo que pide el documento. Las superficies van un punto por encima de --grafito-ark para que las tarjetas se despeguen del fondo sin necesidad de sombra. ===================================================================== */ :root, [data-tema="noche"] { color-scheme: dark; /* Superficies */ --fondo: var(--negro-basalto); --superficie: color-mix(in srgb, var(--grafito-ark) 92%, var(--niebla)); --superficie-alta: color-mix(in srgb, var(--grafito-ark) 84%, var(--niebla)); --borde: var(--grafito-ark-700); /* separadores: se hunden */ --borde-control: color-mix(in srgb, var(--gris-acero-700) 55%, var(--gris-acero)); /* Borde de BOTÓN. No es el mismo que el de separador: un separador se hunde a propósito, un botón tiene que verse. Con --borde el botón de contorno quedaba a 1.00:1 en noche y 1.51:1 en día, o sea invisible. */ --borde-boton: var(--gris-acero); /* Contorno de tarjeta: se ve, pero sin gritar como el de un control */ --borde-tarjeta: color-mix(in srgb, var(--gris-acero-900) 45%, var(--gris-acero-700)); --filo: rgba(var(--niebla-rgb), .08); /* hilo de luz */ --sombra-tarjeta: none; /* nada de sombras */ /* Texto */ --texto: var(--niebla); --texto-suave: color-mix(in srgb, var(--gris-acero) 55%, var(--gris-acero-300)); --texto-tenue: color-mix(in srgb, var(--gris-acero) 60%, var(--gris-acero-300)); --sobre-relleno: var(--niebla-100); /* texto sobre CUALQUIER relleno */ --sobre-relleno-suave: var(--niebla); /* su apoyo, un punto por debajo */ /* Marca · el tono base es relleno; como texto va la variante aclarada */ --acento: color-mix(in srgb, var(--verde-ark) 84%, var(--verde-ark-300)); --acento-texto: color-mix(in srgb, var(--verde-ark-300) 70%, var(--verde-ark-100)); --acento-hover: var(--verde-ark); --acento-fondo: var(--verde-ark-900); /* Aviso */ --aviso: var(--ambar-ark); --aviso-texto: color-mix(in srgb, var(--ambar-ark-300) 72%, var(--ambar-ark-100)); --aviso-fondo: var(--ambar-ark-900); --aviso-fondo-texto: var(--aviso-texto); /* texto DENTRO de la caja */ /* Error */ --peligro: var(--rojo-oxido); --peligro-texto: color-mix(in srgb, var(--rojo-oxido-300) 72%, var(--rojo-oxido-100)); --peligro-fondo: var(--rojo-oxido-900); --peligro-fondo-texto: var(--peligro-texto); /* Neutro (botón sin color, etiqueta inactiva) */ --neutro-relleno: var(--superficie-alta); --neutro-texto: var(--texto); /* Cabecera de tabla. Antes iba más oscura «para que se hundiera», y sobre una tarjeta eso funciona; pero muchas tablas van directas sobre el fondo de página, y ahí hundirla la volvía invisible: la tabla parecía el propio fondo. Ahora sube: página → tabla → cabecera, tres escalones que se ven. */ --tabla-cabecera: color-mix(in srgb, var(--grafito-ark) 78%, var(--niebla)); --tabla-cabecera-texto: var(--texto); /* Contorno de la tabla, para que el bloque entero se lea como una pieza */ --tabla-borde: var(--borde-control); /* Auxiliares */ --velo-rgb: var(--negro-basalto-rgb); /* fondo de las ventanas */ --luz-rgb: var(--niebla-rgb); /* tintes y realces */ --halo: 0 0 0 3px rgba(var(--verde-ark-rgb), .45); --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c3c9cc' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } /* ===================================================================== 3. LOS ROLES · MODO DÍA --------------------------------------------------------------------- El mismo material, del revés. Niebla pasa a ser el fondo y Basalto el texto. Sobre claro los colores de marca SÍ funcionan como texto en su tono base, así que no hace falta la variante -300. ===================================================================== */ [data-tema="dia"] { color-scheme: light; /* Superficies */ --fondo: var(--niebla-300); --superficie: var(--niebla-100); --superficie-alta: var(--niebla); --borde: var(--gris-acero-300); /* separadores */ --borde-control: color-mix(in srgb, var(--gris-acero-700) 60%, var(--gris-acero)); /* campos */ --borde-boton: color-mix(in srgb, var(--gris-acero-700) 60%, var(--gris-acero)); /* botones */ --borde-tarjeta: var(--gris-acero-300); /* contorno de tarjeta */ --filo: rgba(var(--negro-basalto-rgb), .05); --sombra-tarjeta: 0 1px 3px rgba(var(--negro-basalto-rgb), .07); /* Texto */ --texto: var(--negro-basalto); --texto-suave: var(--gris-acero-700); --texto-tenue: color-mix(in srgb, var(--gris-acero-700) 88%, var(--gris-acero)); --sobre-relleno: var(--niebla-100); --sobre-relleno-suave: var(--niebla); /* Marca */ --acento: var(--verde-ark); --acento-texto: var(--verde-ark); --acento-hover: var(--verde-ark-700); --acento-fondo: var(--verde-ark-100); /* Aviso */ --aviso: var(--ambar-ark); --aviso-texto: var(--ambar-ark); --aviso-fondo: var(--ambar-ark-100); --aviso-fondo-texto: var(--ambar-ark-700); /* el tono base no llega dentro */ /* Error */ --peligro: var(--rojo-oxido); --peligro-texto: var(--rojo-oxido); --peligro-fondo: var(--rojo-oxido-100); --peligro-fondo-texto: var(--rojo-oxido-700); /* Neutro */ --neutro-relleno: var(--niebla); --neutro-texto: var(--negro-basalto); /* Cabecera de tabla: oscura sobre tabla clara */ --tabla-cabecera: var(--negro-basalto); --tabla-cabecera-texto: var(--niebla); --tabla-borde: var(--gris-acero-300); /* Auxiliares */ --velo-rgb: var(--negro-basalto-rgb); --luz-rgb: var(--negro-basalto-rgb); --halo: 0 0 0 3px rgba(var(--verde-ark-rgb), .22); --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23565e61' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } /* Al cambiar de modo, que la transición no dé un tirón */ body, .header, .footer, .tabla, .tabla th, .tabla td, .modulo, .fz-tarjeta, .fz-mes-card, .fz-zona, .cliente-card, .tarjeta-form, .formulario, .pnl-kpi, input, select, textarea { transition: background-color .22s ease, color .22s ease, border-color .22s ease; } @media (prefers-reduced-motion: reduce) { body, .header, .footer, .tabla, .tabla th, .tabla td, .modulo, .fz-tarjeta, .fz-mes-card, .fz-zona, .cliente-card, .tarjeta-form, .formulario, .pnl-kpi, input, select, textarea { transition: none; } }