/* ============================================================ AlySec — capa oscura de la plataforma ------------------------------------------------------------ Se carga DESPUÉS de base.css y de la hoja de cada superficie, y se aplica con `class="dark"` en el . POR QUÉ ESTO Y NO REESCRIBIR LAS HOJAS. `styles.css` usa 307 referencias a variables y sólo 5 colores literales; `auth.css`, 57 y 7. O sea: la plataforma ya estaba construida sobre tokens, así que basta reasignarlos. Rehacer las hojas habría sido tirar ese trabajo y arriesgar regresiones en cinco vistas del panel. Sólo hay que interceptar a mano los pocos literales que se escaparon del sistema — están todos al final del archivo, con su motivo. ALCANCE: login, signup, panel y cuenta. NO se aplica a /ui/empresas, que sigue en claro a propósito: quien firma una autorización es un comité de compras que teme una fuga, no un investigador. Esa separación está razonada en DESIGN.md y esta hoja no la toca. Contrastes sobre `--bg` #050B14: · --ink #F1F5F9 ..... 15.6:1 · --text #CBD9E3 ..... 13.7:1 · --text-dim #A9BCC9 ..... 10.0:1 · --text-mut #8DA5B8 ..... 7.7:1 · --blue #22D3EE ..... 10.9:1 ============================================================ */ body.dark { /* — Base — */ --bg: #050B14; --surface: #0A1826; --surface-2: #0D2130; --surface-3: #16283C; /* — Texto — */ --ink: #F1F5F9; --text: #CBD9E3; --text-dim: #A9BCC9; --text-mut: #8DA5B8; /* — Bordes — */ --line: #143247; --line-2: #1D4A63; --line-3: #2A5F7A; /* — Azul de marca — #2563EB mide 3.8:1 sobre este fondo: no llega como texto. En oscuro el azul de acción pasa al cian, que es además el acento de la home. */ --blue: #22D3EE; --blue-2: #67E8F9; --blue-deep: #0E7490; --blue-tint: rgba(34,211,238,.10); --blue-tint2: rgba(34,211,238,.22); /* — Severidad — Los tonos base suben un escalón para ser legibles sobre oscuro, y los `-tint` dejan de ser rellenos claros para ser veladuras del propio tono. La regla del sistema se mantiene: "bajo" es slate, nunca azul. */ --critical: #FB7185; --critical-tint: rgba(251,113,133,.13); --critical-ink: #FDA4AF; --critical-line: rgba(251,113,133,.38); --high: #FB923C; --high-tint: rgba(251,146,60,.13); --high-ink: #FDBA74; --high-line: rgba(251,146,60,.38); --medium: #FBBF24; --medium-tint: rgba(251,191,36,.13); --medium-ink: #FCD34D; --medium-line: rgba(251,191,36,.38); --secure: #34D399; --secure-tint: rgba(52,211,153,.13); --secure-ink: #6EE7B7; --secure-line: rgba(52,211,153,.38); --low: #8DA5B8; --low-tint: rgba(141,165,184,.12); --low-ink: #A9BCC9; --low-line: rgba(141,165,184,.32); /* — Sombras — Las del sistema claro son azul-grisáceas al 6-16% de opacidad: sobre oscuro no existen. Se sustituyen por negro real, que sí separa planos. */ --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 6px 14px -4px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4); --shadow-lg: 0 18px 36px -14px rgba(0,0,0,.72), 0 4px 12px -6px rgba(0,0,0,.5); --shadow-xl: 0 32px 64px -20px rgba(0,0,0,.8), 0 8px 20px -12px rgba(0,0,0,.6); --shadow-blue: 0 8px 20px -8px rgba(34,211,238,.5); /* — Superficie "consola" — En el mundo claro era la única zona oscura. Aquí ya no puede distinguirse por ser oscura, así que se distingue por ser MÁS oscura que su entorno. */ --console: #030A11; --console-2: #050E17; --console-line: #10293B; --console-text: #CBD9E3; --console-dim: #8DA5B8; background: var(--bg); color: var(--text); color-scheme: dark; } /* ============================================================ Literales que se escaparon del sistema de tokens. Cada uno con su motivo; no hay más en toda la plataforma. ============================================================ */ /* base.css y auth.css escriben `color: #fff` sobre el relleno azul. Con el azul convertido en cian, el blanco cae a 1.8:1. La tinta pasa a oscura. */ body.dark .btn-primary, body.dark .btn-primary:hover { color: #04141A; } /* auth.css fija el fondo del campo en blanco. El campo debe leerse como hueco —más oscuro que su tarjeta—, no como saliente. */ body.dark .input { background: rgba(3,10,17,.6); } /* auth.css: la textura de puntos era tinta oscura sobre claro; invertida. */ body.dark::before { background-image: radial-gradient(rgba(203,217,227,.07) 1px, transparent 1.3px) !important; } /* auth.css: el aside iba en un degradado de azules muy claros. */ body.dark .auth-side { background: linear-gradient(160deg, #08131F 0%, #050B14 62%); border-left-color: var(--line); } body.dark .auth-side::before { background: radial-gradient(46% 52% at 70% 30%, rgba(34,211,238,.14), rgba(34,211,238,.05) 45%, transparent 72%); } /* auth.css: la tarjeta del mini-reporte era blanca. */ body.dark .mini { background: var(--surface); } /* base.css dibuja la marca como un tile azul con degradado, pensado para un icono cuadrado. El logotipo real es un escudo transparente. */ body.dark .brand .mark-logo, body.dark .topbar .brand .mark-logo { background: none; box-shadow: none; border-radius: 0; width: 28px; height: 30px; object-fit: contain; } /* styles.css: el topbar era blanco al 85% con desenfoque detrás. Es el único literal de blanco de las 616 líneas de esa hoja, y bastaba él solo para que el panel entero pareciera a medio convertir. */ body.dark .topbar { background: rgba(5,11,20,.85); } /* styles.css: el velo del modal de la vista de escaneo. */ body.dark .modal { background: rgba(0,0,0,.68) !important; } /* base.css: el velo del modal se aclara para separarse de un fondo ya oscuro. */ body.dark .modal-backdrop { background: rgba(0,0,0,.68); }