/* =========================================================================== KW — TOKENS DE COLOR: los dos temas --------------------------------------------------------------------------- Todo el color de la app vive acá. `kw.css` no declara ni un hex propio: si una regla necesita un color, sale de una variable de este archivo. ⚠️ Por qué existe este archivo aparte: el segundo tema NO se resuelve sobrescribiendo reglas al final de la hoja. Se resuelve cambiando el VALOR de las variables y dejando las 1.074 líneas de `kw.css` intactas. Si algún día una regla vuelve a escribir un `#hex` a mano, esa regla queda muda en uno de los dos temas y nadie se entera hasta que alguien mire la pantalla. ⚠️⚠️ EL TEMA POR OMISIÓN ES EL CLARO (decisión del negocio, 2026-08-28). Antes el orden era al revés y el oscuro vivía en `:root`. Se invirtió el archivo entero —no se agregó un bloque encima— porque `:root` es lo que ve quien llega SIN JavaScript, y dejarlo oscuro con la app por omisión clara habría producido justo el fogonazo que el script del `` existe para evitar. Los valores de cada tema no cambiaron: cambió cuál es la base. ⚠️⚠️ EL MANUAL DE MARCA ES 100 % OSCURO. Las 6 láminas de `KILOWATT V1.pdf` son sobre negro: no hay una sola aplicación en claro. O sea que el tema claro NO es una lectura del manual, es una decisión de KW — y las reglas que la marca sí impone están medidas en `docs/marca.md §8`: · el degradado del logo termina en BLANCO → sobre claro se plancha · #67C6FF (1,89:1) y #A8E0FF (1,42:1) son ILEGIBLES sobre blanco: en oscuro son tinta, en claro son fondo. Se invierte el papel. · #0D6BFF da 4,60:1 sobre blanco — pasa AA por 0,1. Demasiado justo para texto de 10-12 px, que es casi todo el texto secundario de esta app. Por eso en claro el azul de tinta es #085CF0 (5,53:1) — que resulta ser el único color del manual que el CSS NO tenía. Cómo se elige el tema: `data-tema` en el , puesto por el script de `base.html` ANTES de pintar. La preferencia («claro», «oscuro» o «auto») vive en localStorage; el atributo solo recibe el resultado ya resuelto, así que esta hoja nunca tiene que saber de `prefers-color-scheme`. Sin JS queda el `:root` de abajo, que es el tema por omisión. =========================================================================== */ /* --------------------------------------------------------------------------- CLARO — el tema por omisión. También es el fallback sin JS. Contrastes medidos sobre #FFFFFF y sobre --surface-3 (#E4EAF4), que es la superficie más clara y por lo tanto el peor caso de cada tinta. --------------------------------------------------------------------------- */ :root{ color-scheme:light; /* superficies, del fondo hacia arriba */ --ground:#FFFFFF; --surface:#F7F9FC; --surface-2:#EFF3F9; --surface-3:#E4EAF4; --line:#D6DEEA; --line-soft:#E8EDF5; /* tinta. La escala NO es la del tema oscuro invertida: invertir #8A94A8 da #756B57, un caqui. Lo que se conserva es la RELACIÓN, que es lo que hace que --ink-3 se lea como secundario y no como texto apagado: --ink #0D0D0D 19,44:1 sobre blanco (el negro del manual) --ink-2 #3F4A5C 8,95:1 · 7,41:1 sobre --surface-3 --ink-3 #566175 6,25:1 · 5,17:1 sobre --surface-3 y entre --ink-2 y --ink-3 quedan 1,43:1 — exactamente la misma distancia que en oscuro. */ --ink:#0D0D0D; --ink-2:#3F4A5C; --ink-3:#566175; --ink-fuerte:#000000; /* el dentro de un párrafo: sube, no baja */ --ink-eco:#C7D0E0; /* cifras enormes de puro decorado (el 404) */ /* marca. Los seis azules del manual + el hondo del botón. ⚠️ Acá se invierte el papel de los azules, que es la regla de marca: el «claro» (--led-bright) es el AZUL PROFUNDO, porque sobre blanco el que tiene que leerse es el oscuro. Ninguna regla de `kw.css` se entera: sigue pidiendo --led-bright para «el azul que resalta». */ --led:#085CF0; --led-hondo:#0645B8; --led-bright:#092676; --led-pale:#16357F; --deep:#092676; --deep-2:#050A34; --led-rgb:8,92,240; --led-bright-rgb:9,38,118; /* ⚠️⚠️ LA RAMPA DEL MAPA DE CALOR (2026-10-27): cinco pasos de UN tono, de poco a mucho, con su par en oscuro. Era el azul de la marca con opacidad de 0,12 a 1, y el paso más bajo daba 1,19:1 contra el fondo: «una carga a las 3 a. m.» y «ninguna» se veían casi iguales. Validada con el validador de la skill dataviz (`--ordinal --surface #F7F9FC`): luminosidad monótona, saltos visibles entre pasos y el más bajo a 2,21:1 de la superficie. Se cambia volviendo a correr el validador, nunca a ojo. */ --calor-1:#7AAAFE; --calor-2:#4486FD; --calor-3:#1C62DD; --calor-4:#0445B0; --calor-5:#012E7B; /* El logotipo. El degradado de marca muere en blanco: sobre claro desaparecería la mitad del logotipo. Se plancha al azul profundo (`docs/marca.md §8.1`). En oscuro vuelve el degradado. */ --logo-fondo:none; --logo-color:var(--deep); --logo-clip:border-box; /* semánticos. El triplete va suelto para poder componer las tintas con alfa sin repetir el color: `rgba(var(--ok-rgb),.13)`. Así el otro tema cambia UN valor y las nueve tintas que salen de él lo siguen. ⚠️ Sobre blanco hay que bajarlos MÁS de lo que pide el blanco, porque el peor caso NO es el blanco: es su PROPIA pastilla. Una `.pill.ok` se pinta con `rgba(--ok-rgb,.09)` encima de la superficie, o sea que el fondo se le acerca al texto justo donde el texto es más chico (10 px). El primer intento fue #0E7C46 —5,26:1 sobre blanco, de sobra— y `capturar_temas.py` lo cazó en 4,20:1 dentro de su pastilla, en el mapa. Los de abajo están medidos contra el fondo teñido, no contra blanco: --ok #0B6B3C 6,60:1 sobre blanco · 5,26:1 en su pastilla --warn #855700 6,25:1 sobre blanco --crit #A80F1A 7,64:1 sobre blanco */ --ok:#0B6B3C; --ok-rgb:11,107,60; --ok-ink:#0B6238; /* ⚠️⚠️ EL VERDE VIVO — es un PUNTO, no un texto, y por eso puede ser vibrante. Pedido así (2026-10-16): «esto es operación eléctrica, el online resaltando un verde vibrante». Pero `--ok` no sirve para eso: está bajado a #0B6B3C justo para que el TEXTO pase contraste dentro de su propia pastilla, y un verde legible nunca va a verse encendido. La salida es separar los dos trabajos: el rótulo sigue en `--ok` (6,60:1) y el INDICADOR usa este, que no lleva texto encima y por lo tanto no tiene que pasar ninguna razón de contraste — solo despegarse del fondo. ⚠️ No se reusó `--pin-libre-brillo`: ese existe solo en claro porque va sobre teselas del mapa, que no cambian con el tema. Este sí tiene su par. */ --vivo:#12B76A; --vivo-rgb:18,183,106; --warn:#855700; --warn-rgb:133,87,0; --warn-ink:#7A5000; --crit:#A80F1A; --crit-rgb:168,15,26; --crit-ink:#9E0E19; --crit-ink-suave:#8E0C16; /* ⚠️ La tinta SOBRE un relleno macizo de `--crit` (la burbuja de avisos). No es lo mismo que `--crit-ink`, que es el rojo escrito sobre la superficie de la app. Estaba escrito `#fff` a mano en `kw.css` y en OSCURO daba 3,24:1 —`--crit` ahí es #FF4D5E, un rojo claro—: blanco sobre rosado, en 10 px. El medidor lo caza apenas hay un aviso sin leer, o sea justo cuando importa. Acá 7,58:1; en oscuro, el negro del manual sobre el rojo claro da 5,80:1. */ --crit-sobre:#FFFFFF; /* cromo */ --nav-bg:rgba(255,255,255,.92); /* La barra de arriba EN EL MAPA, de vidrio (2026-11-02): el mapa sube hasta el borde y se ve detrás. 72 % es la opacidad mínima que ya probó la casa; la letra encima se midió contra el satelital, el fondo más cargado. */ --nav-vidrio:rgba(255,255,255,.72); /* El velo es OSCURO también en claro: un modal apaga la página de atrás, y un velo blanco sobre fondo blanco no apaga nada. */ --velo:rgba(16,24,40,.55); --sombra-modal:0 24px 60px rgba(16,24,40,.18); --sombra-flota:0 10px 26px rgba(16,24,40,.14); --sombra-toast:0 12px 28px rgba(16,24,40,.16); /* ⚠️ El ícono de capas de Leaflet es un SVG en un data-URI, y un `var()` NO se sustituye adentro de una cadena: `url("…var(--x)…")` es UN solo token para el parser, así que el `var()` viaja literal hasta el SVG y no pinta nada. El único camino es que la variable sea la `url()` ENTERA. Por eso el icono completo está acá y no en `kw.css` — el tema oscuro lo redefine con otro `stroke` (escapado `%23` porque `#` corta el data-URI). */ --leaflet-capas:url("data:image/svg+xml;charset=UTF-8,\ %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \ stroke='%233F4A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E\ %3Cpath d='M12 2 2 7l10 5 10-5-10-5Z'/%3E%3Cpath d='m2 17 10 5 10-5'/%3E\ %3Cpath d='m2 12 10 5 10-5'/%3E%3C/svg%3E"); /* mapa. NO cambia con el tema de la app: el fondo del mapa lo elige la persona en el selector de capas de Leaflet (`body.fondo-claro`), que es otra cosa. Un pin verde tiene que despegarse de la tesela, no del tema. Por eso este bloque entero vive solo acá y el tema oscuro NO lo redefine. Color de los marcadores. Va en variables porque lo usan DOS lugares —el marcador y la leyenda de abajo— y al oscurecerlos para que el número blanco se leyera, la leyenda se quedó con los tonos viejos: el mapa decía un verde y su propia leyenda otro. Hay un compromiso medido: cuanto más oscuro el marcador, mejor se lee su número blanco pero menos se despega del mapa oscuro. Estos son el punto de equilibrio — texto 4,99:1 y 4,58:1, y ~4:1 contra el mapa. */ --pin-libre:#227F4D; --pin-ocupado:#A16A08; --pin-fuera:#C0303E; /* El anillo de proporción del pin suelto (`.mk-pin-anillo`) pinta ENCIMA de `--pin-libre` cuando hay cupo — es la única vez que dibuja algo, porque en los otros tres estados el arco mide 0. El negocio pidió el anillo EN VERDE (no en el azul de marca, que sí se probó y funcionaba, pero no era lo pedido): con el MISMO verde oscuro se habría vuelto invisible sobre su propio cuerpo. Este es un verde bastante más claro que `--pin-libre`, para que la proporción se lea por CONTRASTE DE LUZ y no de matiz. */ --pin-libre-brillo:#3DD68C; /* Sin datos: el equipo dice estar en línea pero no habla hace rato. Gris neutro a propósito —no es verde ni rojo porque no sabemos—, medido en el mismo compromiso que los otros tres: 4,69:1 contra el número blanco, que lo deja entre --pin-ocupado (4,58) y --pin-libre (4,99). */ --pin-sindatos:#6B7488; /* El globo de puntos AGRUPADOS. No es un estado: es la marca. ⚠️ Estaba pintado con `--deep` (#092676) y en satelital desaparecía: mide 13,5:1 contra el número blanco, o sea casi negro, y el satelital es una imagen oscura. Los otros cuatro pines están todos en la banda 4,58–4,99:1 — no por casualidad, es el compromiso medido entre «el número se lee» y «el pin se despega de la tesela». Este es #0D6BFF, el azul eléctrico del manual, que mide 4,60:1 contra el blanco: cae dentro de la misma banda y además es EL color de la marca, no un hex inventado. */ --pin-grupo:#0D6BFF; --mapa-bg:#0B0D13; --mapa-chrome:rgba(14,16,22,.88); /* la cajita de créditos, sobre teselas */ --mapa-pin-borde:#FFFFFF; /* el halo del pin; lo cambia `fondo-claro` */ --mapa-pin-borde-claro:#0E1016; /* ⚠️ La caja de créditos tiene fondo OSCURO fijo (`--mapa-chrome`), así que su texto también tiene que ser claro fijo. Con `--ink-3` heredaba la tinta del tema y en claro quedaba gris oscuro sobre negro: medido 3,05:1, y el enlace «Leaflet» 2,13:1. Es letra de 10 px, la más chica de la app. */ --mapa-chrome-ink:#8A94A8; --mapa-chrome-ink-2:#A9B2C6; /* tipografía. Tampoco depende del tema. */ --sora:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace; --nav:56px; } /* --------------------------------------------------------------------------- OSCURO — el tema del manual de marca. Se pide a mano (el botón de la barra o «Mi cuenta»), o lo resuelve «El del dispositivo». --------------------------------------------------------------------------- */ :root[data-tema="oscuro"]{ color-scheme:dark; --ground:#08080A; --surface:#0E1016; --surface-2:#141824; --surface-3:#1A2030; --line:#1E2434; --line-soft:#171C28; /* ⚠️ `--ink-3` era #6B7488 y daba entre 3,46:1 y 4,27:1 contra las cuatro superficies — por debajo del mínimo legible (4,5) en TODAS. Y es el color del texto secundario, que en esta app es casi siempre de 9,5 a 11,5 px: direcciones, notas de panel, unidades. Medido, #8A94A8 da 5,32:1 en el peor caso y sigue leyéndose como secundario frente a --ink-2 (1,43:1 entre los dos), que es lo que hay que conservar: legible, no protagonista. */ --ink:#EEF2FA; --ink-2:#A9B2C6; --ink-3:#8A94A8; --ink-fuerte:#FFFFFF; --ink-eco:#2E384C; /* Sobre negro los azules vuelven a su papel del manual: el claro es tinta. */ --led:#0D6BFF; --led-hondo:#0A57D6; --led-bright:#67C6FF; --led-pale:#A8E0FF; --deep:#092676; --deep-2:#050A34; --led-rgb:13,107,255; --led-bright-rgb:103,198,255; /* La rampa del mapa de calor en oscuro: «más» es más CLARO, porque sobre negro lo que resalta es la luz. Validada contra `--surface` (#0E1016): el paso más bajo a 2,22:1. Con la opacidad de antes daba 1,11:1 y una hora con una carga se veía igual que una vacía (`--surface-2`). */ --calor-1:#004B96; --calor-2:#0267C7; --calor-3:#3186E9; --calor-4:#61A7FE; --calor-5:#9EC7FC; /* Acá sí va el degradado de marca: el blanco en que termina es legible. */ --logo-fondo:linear-gradient(96deg,#fff 0%,#fff 40%,var(--led) 72%,var(--led-pale) 100%); --logo-color:transparent; --logo-clip:text; /* Los tres semánticos de claro son demasiado oscuros sobre negro. */ --ok:#3DD68C; --ok-rgb:61,214,140; --ok-ink:#9BE9C4; /* El verde vivo del indicador: sobre negro puede ser más claro todavía. */ --vivo:#3DD68C; --vivo-rgb:61,214,140; --warn:#FFB020; --warn-rgb:255,176,32; --warn-ink:#FFD98A; --crit:#FF4D5E; --crit-rgb:255,77,94; --crit-ink:#FF8A94; --crit-ink-suave:#FFB3B9; /* Sobre el rojo claro del tema oscuro, la tinta es el negro del manual. */ --crit-sobre:#0D0D0D; --nav-bg:rgba(14,16,22,.92); --nav-vidrio:rgba(14,16,22,.66); /* la barra de vidrio del mapa */ --velo:rgba(4,6,10,.72); /* el fondo detrás de un modal */ --sombra-modal:0 24px 60px rgba(0,0,0,.55); --sombra-flota:0 10px 30px rgba(0,0,0,.45); --sombra-toast:0 12px 30px rgba(0,0,0,.55); --leaflet-capas:url("data:image/svg+xml;charset=UTF-8,\ %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \ stroke='%23C7D0E0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E\ %3Cpath d='M12 2 2 7l10 5 10-5-10-5Z'/%3E%3Cpath d='m2 17 10 5 10-5'/%3E\ %3Cpath d='m2 12 10 5 10-5'/%3E%3C/svg%3E"); /* --pin-*, --mapa-*, --sora, --mono y --nav NO se redefinen: no dependen del tema. Se heredan del :root de arriba. */ } /* --------------------------------------------------------------------------- AL IMPRIMIR, SIEMPRE LA PALETA CLARA (2026-10-28). Quien usa el tema oscuro e imprime su recibo sacaría texto claro sobre papel blanco: el navegador quita los fondos al imprimir pero deja el color del texto. Son los mismos valores del `:root` claro de arriba; si cambian allá, cambian acá. --------------------------------------------------------------------------- */ @media print{ :root,:root[data-tema="oscuro"]{ color-scheme:light; --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#EFF3F9; --surface-3:#E4EAF4; --line:#D6DEEA; --line-soft:#E8EDF5; --ink:#0D0D0D; --ink-2:#3F4A5C; --ink-3:#566175; --ink-fuerte:#000000; --led:#085CF0; --led-bright:#092676; --led-pale:#16357F; --led-rgb:8,92,240; --ok:#0B6B3C; --ok-rgb:11,107,60; --ok-ink:#0B6238; --warn:#855700; --warn-rgb:133,87,0; --warn-ink:#7A5000; --crit:#A80F1A; --crit-rgb:168,15,26; --crit-ink:#9E0E19; } }