/* ============================================================
HORIZON DARK — "Night Watch"
El modo oscuro del producto. La paleta NO es nueva: es la que
ya tenia la estetica anterior (2050/horizon_*_dark.html, tema
"Dawn over deep water" / dark = night watch), portada a los
tokens del kit 2026.
Como funciona: se activa con data-theme="dark" en . El
selector html[data-theme="dark"] tiene especificidad (0,1,1),
mayor que el :root (0,1,0) con que el diseñador declara los
tokens, asi que la capa 1 gana sin importar el orden de carga.
Para las reglas de elemento si importa: esta hoja va ULTIMA en
el de cada pagina.
Es hoja NUESTRA, no del diseñador: por eso vive aca y no dentro
de horizon-skin.css ni de cloudbeach.css, que se recopilan
enteras desde hrzn-finops/ con cada entrega. Mismo criterio que
hrzn-viewswitch.css. Hay que reponerla en compilar-horizon-2026.sh
(pasos 0 y 7.5) y el lo inyecta rewrite.pl.
De donde salen los colores. Las TINTAS y los ESTADOS vienen de la
estetica anterior (2050/horizon_*_dark.html), leidos de sus
computed styles:
--ink #EAF2FF -> --hz-ink, --ink
--muted #9AADC9 -> --hz-ink-3, --muted
--faint #8093B3 -> --hz-ink-4
--stroke rgba(148,184,255,.09) -> --hz-line-soft
--stroke-2 rgba(148,184,255,.16) -> --hz-line
--high #3DDC97 -> --hz-ok
--med #FFB224 -> --hz-warn
--low #FF5C7A -> --hz-bad, pero aclarado a #FF8A9E (ver
la nota del coral en los tokens)
--sky-text #7FBAFF -> --hz-sky
--on-brand #06121C -> --hz-on-accent
Las SUPERFICIES no: salen del navy del propio sidebar (#011A3B).
La paleta vieja las tenia en otro tono — un azul casi negro,
#070D18 el fondo y #0D1626 la tarjeta — y el efecto era que
ninguna pantalla combinaba con su rail. Ahora es un solo color en
cuatro intensidades; ver el bloque de tokens abajo.
Secciones:
1 Tokens
2 Shell: rail, header, canvas
3 El hero se hace de noche
4 Superficies: tarjetas, paneles, KPI
5 Controles: botones, pills, inputs, tablas
6 Estados y badges
7 Capa cockpit (horizon-skin.css)
8 Paginas: adoption, score, score-config
9 Bridge
10 Flotantes: modales, menus, bot
11 Transicion e impresion
============================================================ */
/* ============================================================
1 · TOKENS
============================================================ */
html[data-theme="dark"] {
/* --- Superficies: TODAS derivadas del navy del sidebar ---
El punto de partida es el rail, #011A3B, que ya existia en modo
claro. De ahi salen los cuatro niveles: el fondo es ese mismo
navy apenas bajado, y arriba se abren dos escalones mas claros
en el mismo tono para el contenido.
Antes cada nivel venia de la paleta vieja (canvas #070D18, un
azul casi negro de otro tono que el rail), y el resultado era
que ninguna pantalla combinaba con su propio sidebar. Ahora el
tema entero es UN color en cuatro intensidades.
Ojo que es al REVES del light, donde la tarjeta es blanca y la
bandeja gris: en dark lo que se acerca al ojo es mas CLARO.
fondo #011530 apenas mas oscuro que el rail (1.05:1),
lo justo para que se distinga
[rail] #011A3B no se toca, viene de cloudbeach-assets.css
bandeja #062240 1.14:1 sobre el fondo
tarjeta #0E3058 1.37:1 sobre el fondo, 1.31:1 sobre el rail
elevado #153B69 panel dentro de panel
No hay un quinto nivel a proposito: mas claro que #153B69 la
tinta tenue (--hz-ink-4, 9-11px) baja de 4.5:1 y hay que
empezar a parchear texto. Dos escalones de contenido alcanzan
y ademas dejan todas las pantallas mas parejas. --- */
--hz-canvas: #011530;
--hz-sunken: #062240;
--hz-surface: #0E3058;
--hz-panel-2: #153B69;
/* El rail NO tiene token de tema, a proposito: no se toca. Es la
fuente de la que sale todo lo de arriba. Ver la seccion 2. */
/* Tinta. El light tiene cuatro niveles y los cuatro se usan;
se mapean a ink / (interpolado) / muted / faint. */
--hz-ink: #EAF2FF;
--hz-ink-2: #C6D6EE;
--hz-ink-3: #9AADC9;
/* El --faint de la paleta vieja era #8093B3, pero ahi vivia sobre
el canvas. Aca el mismo texto cae dentro de tarjetas, que son
mas claras, y quedaba en 3.03:1 — por debajo de AA justo en el
tamaño en que se usa (eyebrows y timestamps de 9-11px). Se
aclara lo necesario: 5.75:1 sobre la tarjeta, 4.89:1 sobre el
panel elevado. Es el token que fija cuan claro puede ser el
escalon mas alto de superficie. */
--hz-ink-4: #99ACC9;
/* Tinta para lo que se apoya SOBRE un acento. En light los
rellenos de marca son oscuros y el texto va blanco; en dark el
acento se aclara y el blanco encima queda en 2.7:1. Es el
--on-brand de la paleta vieja. */
--hz-on-accent: #06121C;
/* Lineas. En dark no se dibuja con negro mas oscuro sino con
azul claro translucido: sobre #0E3058 un borde negro no
existe. Son los --stroke de la paleta vieja. */
--hz-line: rgba(148, 184, 255, .16);
--hz-line-soft: rgba(148, 184, 255, .09);
/* Marca y semantica. Los tonos del light estan calculados para
contraste sobre blanco (--hz-ok-ink #127A45 y compañia) y
sobre #0E3058 quedan casi ilegibles. En dark el par se
colapsa: el color de texto ES el color del estado, igual que
hacia la hoja vieja (--high-text == --high). */
--hz-blue: #6BADFF;
--hz-sky: #7FBAFF;
--hz-orange: #FF8A4C;
--hz-ok: #3DDC97;
--hz-warn: #FFB224;
/* El coral sube de #FF5C7A (el --low de la paleta vieja) a #FF8A9E.
Con las superficies en el tono del navy, el original quedaba en
4.46:1 como texto — por debajo de AA — y aparecia en diez
lugares: los badges "3 OPEN", el boton Reconnect, las cifras
proyectadas, los avisos de sobregiro.
Se sube el token en vez de cambiar cada uso a --hz-bad-ink
porque el coral hace de relleno y de texto a la vez, y como
relleno lleva tinta oscura encima (--hz-on-accent), asi que
aclararlo mejora los dos roles. Mismo criterio que --hz-blue,
que por lo mismo paso de #4D9FFF a #6BADFF.
Por eso los tres pares *-ink quedan colapsados con su estado: ya
no hace falta un tono aparte para texto. */
--hz-bad: #FF8A9E;
--hz-ok-ink: #3DDC97;
--hz-warn-ink: #FFB224;
--hz-bad-ink: #FF8A9E;
/* Sombras. La hoja vieja ponia --card-shadow:none en dark: sin
fondo claro no hay nada que ensombrecer, y una sombra negra
sobre casi negro solo ensucia. Lo que si conserva sombra es
lo que FLOTA de verdad (pastilla de utilidad, menus, modal),
y ahi es negra y profunda en vez de azulada. */
--hz-sh-hair: 0 1px 2px rgba(0, 0, 0, .34);
--hz-sh-soft: 0 10px 28px -14px rgba(0, 0, 0, .62);
--hz-sh-deep: 0 26px 64px -22px rgba(0, 0, 0, .78);
/* Recetas de tarjeta de estado. Se conserva la gramatica del
light — radial de color en la esquina superior derecha sobre
un gradiente de superficie — con el tinte subido de .12 a .16
porque sobre oscuro un velo de color al 12% no se ve, y el
interior en un panel apenas teñido en vez de blanco. */
--hz-card-blue-line: #4D9FFF;
--hz-card-blue-border: rgba(77, 159, 255, .30);
--hz-card-blue-bg: radial-gradient(circle at 92% 0, rgba(77, 159, 255, .16), transparent 36%), linear-gradient(145deg, #123A66, #0E3058 64%);
--hz-card-orange-line: #FF8A4C;
--hz-card-orange-border: rgba(255, 138, 76, .32);
--hz-card-orange-bg: radial-gradient(circle at 92% 0, rgba(255, 138, 76, .16), transparent 36%), linear-gradient(145deg, #26355F, #0E3058 64%);
--hz-card-red-line: #FF8A9E;
--hz-card-red-border: rgba(255, 138, 158, .32);
--hz-card-red-bg: radial-gradient(circle at 92% 0, rgba(255, 138, 158, .15), transparent 36%), linear-gradient(145deg, #25325C, #0E3058 64%);
--hz-card-green-line: #3DDC97;
--hz-card-green-border: rgba(61, 220, 151, .28);
--hz-card-green-bg: radial-gradient(circle at 92% 0, rgba(61, 220, 151, .14), transparent 36%), linear-gradient(145deg, #0F3B5E, #0E3058 64%);
--hz-card-neutral-line: #93A8CC;
--hz-card-neutral-border: rgba(147, 168, 204, .24);
--hz-card-neutral-bg: radial-gradient(circle at 92% 0, rgba(147, 168, 204, .12), transparent 36%), linear-gradient(145deg, #183866, #0E3058 64%);
--hz-card-state-shadow: none;
/* --- Tokens de cloudbeach.css (el shell). Nombres cortos y
genericos, del diseñador; se redefinen igual.
--navy y --navy-deep quedan afuera: son del rail, que no se
toca. (De paso: cloudbeach.css los declara y despues no los
consume — no hay un solo var(--navy) en todo el proyecto.) --- */
--ink: #EAF2FF;
--muted: #9AADC9;
--blue: #4D9FFF;
--blue-2: #7FBAFF;
--sky: #9DC4FF;
--surface: #0E3058;
--page: #011530;
--line: rgba(148, 184, 255, .16);
--red: #FF8A9E;
--orange: #FF8A4C;
--shadow: 0 8px 24px rgba(0, 0, 0, .55);
/* --- Tokens de bridge.css. Ya eran oscuros en light (el Bridge
es una pantalla nocturna de por si), asi que solo se los
alinea al canvas del tema para que no floten en otro azul. --- */
--bridge-navy: #011530;
--bridge-navy-2: #0E3058;
--bridge-line: rgba(148, 184, 255, .16);
--bridge-text: #EAF2FF;
--bridge-muted: #9AADC9;
/* Atmosfera. Los dos radiales que la hoja vieja ponia sobre el
canvas para que el negro no fuera plano. */
--hz-atmo:
radial-gradient(1200px 420px at 62% -8%, rgba(77, 159, 255, .10), transparent 62%),
radial-gradient(900px 360px at 30% -6%, rgba(47, 230, 200, .07), transparent 60%);
color-scheme: dark;
}
/* ============================================================
2 · SHELL: RAIL, HEADER, CANVAS
============================================================ */
[data-theme="dark"] body {
background-color: var(--hz-canvas);
color: var(--hz-ink);
}
/* El canvas no es negro plano: lleva los dos radiales de
atmosfera, fijos, para que el scroll no los arrastre. */
[data-theme="dark"] body::before {
content: "";
position: fixed;
z-index: 0;
inset: 0;
background: var(--hz-atmo);
pointer-events: none;
}
[data-theme="dark"] .app-shell,
[data-theme="dark"] main {
position: relative;
z-index: 1;
}
/* ------------------------------------------------------------
EL RAIL NO SE TOCA
No hay ni una regla de tema para el rail, y es deliberado: el
sidebar ya es navy oscuro en modo claro, con texto blanco, el
faro, el pill azul del activo y las tarjetas de empresa y
perfil. Es la unica parte del producto que nacio nocturna, asi
que en modo oscuro se queda EXACTAMENTE igual — no hay dos
versiones que mantener.
Lo que habia antes aca (rail en #0A1220, tinta remapeada a
--hz-ink-*, tarjetas del pie translucidas, faro atenuado al 50%,
avatar con el degrade profundizado) se saco entero. El rail
volvia a inventarse una version nocturna de algo que ya era
nocturno, y quedaba mas apagado que en claro.
Consecuencia a tener presente: sobre el canvas oscuro el navy
del rail (#011A3B, lo pone cloudbeach-assets.css) queda a 1.12:1
del fondo — se distingue por el tinte azul, no por la
luminancia. En claro esa separacion la hacia la sombra
`8px 0 26px`, que sobre fondo oscuro no se ve. Si hace falta
marcar el limite, alcanza con un `border-right` de 1px en
--hz-line-soft; se saco a proposito para que el rail quede
identico al claro, como se pidio.
Tampoco se tocan las piezas del rail plegable que trajo la
entrega del 2026-08-13 (.sidebar-toggle, los rotulos flotantes,
el flyout del grupo AI): misma razon, ya estan pintadas sobre
navy.
------------------------------------------------------------ */
/* "No tocar" no alcanza con no escribir reglas: el rail CONSUME
tokens que el tema si mueve, asi que cambiaba solo. El caso que
lo delato es .profile-avatar, que hrzn-sidebar.css pinta con
var(--hz-blue): al aclarar el azul para el contenido, el avatar
se iba con el, y con las iniciales blancas encima quedaba en
2.3:1 — peor que en claro.
La salida no es parchear ese avatar, porque el rail usa mas
tokens (--hz-sh-* en las tarjetas del pie, --hz-blue tambien en
el activo del submenu) y el diseñador puede sumar consumos
nuevos en cualquier entrega. En vez de enumerarlos, el rail se
declara ISLA DE TEMA CLARO: los tokens vuelven a sus valores de
modo claro para todo lo que viva adentro. Cualquier regla que
entre despues los resuelve como en claro sin que haya que
acordarse de nada.
Los valores son los del :root de horizon-pages.css, no
aproximados. Los radios no estan porque no son de color y no
cambian con el tema. */
[data-theme="dark"] .sidebar {
--hz-ink: #0A1E46;
--hz-ink-2: #24365C;
--hz-ink-3: #3A4A66;
--hz-ink-4: #55668A;
--hz-blue: #2450E4;
--hz-sky: #58A9F4;
--hz-orange: #F97435;
--hz-ok: #1FA95C;
--hz-warn: #F59E0B;
--hz-bad: #E5484D;
--hz-ok-ink: #127A45;
--hz-warn-ink: #A05F02;
--hz-bad-ink: #C4272C;
--hz-canvas: #F1F5FB;
--hz-surface: #FFFFFF;
--hz-sunken: #EAF0FB;
--hz-panel-2: #FBFCFE;
--hz-line: #DCE4F5;
--hz-line-soft: #E9EEF9;
--hz-sh-hair: 0 1px 2px rgba(10, 30, 70, .06);
--hz-sh-soft: 0 10px 28px -14px rgba(10, 30, 70, .20);
--hz-sh-deep: 0 26px 64px -22px rgba(10, 30, 70, .34);
/* Y los de cloudbeach.css, por lo mismo. */
--ink: #071f49;
--muted: #536b96;
--blue: #0864ee;
--blue-2: #2b8bff;
--sky: #cbe6ff;
--surface: #fff;
--page: #f2f6fc;
--line: #d9e3f0;
--red: #f1392f;
--orange: #ff681c;
--shadow: 0 8px 24px rgba(23, 66, 119, .08);
}
/* El atajo de teclado que salta al contenido. Mismo bug de tema
que el aviso emergente: cloudbeach.css lo escribe como
`background: white` con `color: var(--ink)`, y en dark --ink es
claro. Solo se ve al tabular, asi que no aparece en ninguna
captura — pero es el primer elemento que toca quien navega con
teclado. */
[data-theme="dark"] .skip-link {
color: var(--hz-on-accent);
background: var(--hz-sky);
}
/* Franja de estado (la barra fina bajo el hero de las paginas
de skin+pages). */
[data-theme="dark"] .hz-strip {
color: var(--hz-ink-3);
background: rgba(6, 34, 64, .94);
border-bottom: 1px solid var(--hz-line-soft);
}
[data-theme="dark"] .hz-strip b { color: var(--hz-ink-2); }
[data-theme="dark"] .hz-strip small {
color: var(--hz-ink-3);
border-left-color: var(--hz-line);
}
[data-theme="dark"] .hz-strip button { color: var(--hz-ink-3); }
[data-theme="dark"] .hz-strip button:hover { color: var(--hz-sky); }
/* ============================================================
3 · EL HERO SE HACE DE NOCHE
El hero no es una imagen: es una escena costera dibujada en
CSS — cielo (.hero-coast), sol (.sunset), agua (.coast-water),
montañas (.mountains i/b/em) y nubes (.hero-cloud). El dark
viejo ya tenia la idea, con --sun-opacity como perilla.
Aca se repinta capa por capa en vez de tirarle un filtro
encima: un invert/brightness sobre el hero entero tambien
voltea el texto y la pastilla de utilidad, que son hijos.
============================================================ */
/* El cielo: del amanecer celeste-durazno a azul profundo, con el
horizonte apenas mas claro. */
[data-theme="dark"] .hero-coast {
background: linear-gradient(178deg, #010F26 0%, #011733 46%, #04264A 74%, #032040 100%);
border-bottom: 1px solid var(--hz-line-soft);
}
/* La linea de rompiente al pie del hero. */
[data-theme="dark"] .hero-coast::after {
background:
repeating-linear-gradient(180deg, rgba(148, 184, 255, .10) 0 1px, transparent 1px 4px),
linear-gradient(180deg, rgba(4, 38, 74, .72), rgba(1, 21, 48, .88));
}
/* El sol se pone: queda una luna fria y chica, sin el halo
ambar. Es la misma pieza, no se oculta — el hero perderia su
punto de fuga. */
[data-theme="dark"] .sunset {
background: radial-gradient(circle, #EAF2FF 0 35%, rgba(200, 224, 255, .58) 58%, rgba(125, 169, 218, .16) 72%, transparent 73%);
box-shadow: 0 0 38px rgba(157, 196, 255, .34);
opacity: .82;
}
[data-theme="dark"] .coast-water {
background: linear-gradient(180deg, rgba(20, 74, 128, .30), rgba(6, 44, 84, .58));
}
[data-theme="dark"] .coast-water::before {
background: repeating-linear-gradient(180deg, rgba(148, 184, 255, .16) 0 1px, transparent 1px 3px);
}
/* Las tres cordilleras: mismo escalonado de claro a oscuro que
el light, corrido a la gama nocturna. */
[data-theme="dark"] .mountains i { background: #0E3A63; }
[data-theme="dark"] .mountains b { background: #092C51; }
[data-theme="dark"] .mountains em { background: #05203D; opacity: .9; }
[data-theme="dark"] .hero-cloud {
background: rgba(148, 184, 255, .13);
}
/* Texto del hero. */
[data-theme="dark"] .hero-copy > p:first-child { color: var(--hz-ink-3); }
[data-theme="dark"] .hero-copy > p:first-child strong { color: var(--hz-ink); }
[data-theme="dark"] .hero-copy h1,
[data-theme="dark"] .bridge-page .hero-copy h1 { color: var(--hz-ink-2); }
[data-theme="dark"] .bridge-page .hero-copy h1 > span { color: var(--hz-ink); }
[data-theme="dark"] .bridge-page .hero-copy h1 > small { color: var(--hz-ink-2); }
[data-theme="dark"] .hero-sub,
[data-theme="dark"] .bridge-page .hero-sub,
[data-theme="dark"] .bridge-page .hero-copy > p { color: var(--hz-ink-2); }
[data-theme="dark"] .hero-sub strong,
[data-theme="dark"] .bridge-page .hero-sub strong { color: var(--hz-bad); }
/* --- El otro hero: .hz-hero ---
Las paginas de skin+pages (Insights, Users, Automations,
Settings, Classic View) no dibujan la costa: la filman. El hero
es un