/*
* La paleta de la aplicación, en un solo sitio.
*
* Antes de esto había 138 colores repartidos por 2.541 puntos entre hojas de estilo, atributos
* `style=` y cadenas inyectadas por JavaScript, sin ninguna capa que los relacionara. Diez de esos
* valores cubrían el 87 %, así que lo que parecía una paleta era en realidad una docena de
* decisiones repetidas a mano.
*
* Aquí se nombran por intención, no por aspecto: `--fg`, no `--azul-marino`. Esa es la diferencia
* que permite que exista un tema oscuro — un nombre que describe un color no se puede reasignar,
* uno que describe un papel sí.
*
* `var()` funciona en las tres formas en que este código pinta: reglas CSS, `style=` en línea y
* HTML construido en JavaScript. Por eso una sola capa sirve para todo.
*
* Se carga antes que site.css. El tema lo fija `data-theme` en , puesto por un guion en
* línea en la cabecera antes de cualquier hoja de estilo — si se pusiera después, cada carga
* enseñaría un fotograma del tema equivocado.
*/
:root {
/* ---- Superficie y texto ---------------------------------------------------------------- */
/* Neutros, no azulados. El azul como sustrato es lo que hacía que la aplicación se viera de
otra época; aquí queda reservado para lo interactivo. */
--bg: #F7F8FA;
--surface: #FFFFFF;
--surface-2: #F1F3F6;
--surface-3: #E7EAEF;
--border: #E3E7ED;
--border-strong: #8B95A3;
--fg: #1A1F27;
--fg-muted: #5C6773;
--fg-subtle: #8A94A2;
/* Texto sobre una superficie de acento. */
--fg-on-accent: #FFFFFF;
/* ---- Acento ---------------------------------------------------------------------------- */
/* 4,9:1 sobre --surface: pasa AA como texto, no sólo como elemento de interfaz. */
--accent: #0B5FCC;
--accent-hover: #094FAA;
--accent-active: #073E88;
--accent-subtle: #EAF2FE;
--accent-border: #B9D5F9;
/* ---- Intención ------------------------------------------------------------------------- */
--success: #17803D;
--success-subtle: #EAF6EE;
--success-border: #B7E0C5;
--warning: #A16207;
--warning-subtle: #FDF6E3;
--warning-border: #EBD9A6;
--danger: #C22B36;
--danger-subtle: #FDECEE;
--danger-border: #F3C2C7;
/* ---- Iconos ---------------------------------------------------------------------------- */
/* Los monocromos se pintan con esto vía máscara; los semánticos (verde, rojo) conservan el
suyo, porque su color *es* la información. */
--icon: var(--fg-muted);
--icon-strong: var(--fg);
/* ---- Forma y espacio ------------------------------------------------------------------- */
/* Iguales en ambos temas: la forma no depende de la luz. */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 14px;
--radius-pill: 999px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
--shadow-2: 0 4px 8px rgba(16, 24, 40, .08), 0 12px 24px rgba(16, 24, 40, .10);
/* ---- Tipografía ------------------------------------------------------------------------ */
/* Dos pesos, no cuatro. Con más de dos, el énfasis deja de significar nada. */
--font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
--weight-normal: 400;
--weight-strong: 600;
--text-xs: 0.75rem;
--text-sm: 0.8125rem;
--text-base: 0.875rem;
--text-md: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.5rem;
--leading-tight: 1.25;
--leading-normal: 1.5;
}
/*
* Oscuro.
*
* Sin negro puro: el blanco sobre negro absoluto produce halo y cansa a las horas. La base es un
* neutro frío y las superficies suben desde ella, así que la profundidad se lee por luminancia y
* no hace falta cargarla de bordes.
*
* El acento se aclara respecto al claro. No es una preferencia estética: #0B5FCC sobre #161A21 da
* 2,6:1 y sería ilegible.
*/
[data-theme="dark"] {
--bg: #0E1116;
--surface: #161A21;
--surface-2: #1E242D;
--surface-3: #272E39;
--border: #2A313B;
--border-strong: #6C7683;
--fg: #E6EAF0;
--fg-muted: #9BA6B4;
--fg-subtle: #6E7987;
--fg-on-accent: #0E1116;
--accent: #5AA0F5;
--accent-hover: #7DB5F8;
--accent-active: #9AC7FA;
--accent-subtle: #16273D;
--accent-border: #2E4A6B;
--success: #46B36B;
--success-subtle: #14261A;
--success-border: #24512F;
--warning: #D9A441;
--warning-subtle: #2A2113;
--warning-border: #52411D;
--danger: #F0707C;
--danger-subtle: #2C1619;
--danger-border: #5A2A30;
/* Las sombras dejan de funcionar por oscurecimiento cuando el fondo ya es oscuro, así que se
apoyan más y sirven sobre todo para separar capas superpuestas. */
--shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .45);
--shadow-2: 0 4px 8px rgba(0, 0, 0, .40), 0 12px 24px rgba(0, 0, 0, .50);
color-scheme: dark;
}
:root {
color-scheme: light;
}
/*
* Base.
*
* `body` nunca ha pintado fondo: heredaba el blanco del navegador, que en claro daba lo correcto
* por casualidad. En oscuro eso sería una página blanca con las tarjetas oscuras encima, así que
* el fondo tiene que decirse explícitamente.
*/
html {
background: var(--bg);
}
body {
background: var(--bg);
color: var(--fg);
}
/*
* Los SVG que `site.js` mete en el DOM.
*
* El submenú no usa ![]()
: trae el fichero con fetch y pega su marcado dentro de la página. Eso
* cambia todo, porque un SVG en el DOM sí lo alcanza el CSS — y una regla gana a un atributo de
* presentación como fill="#003C7D".
*
* Por eso los 71 ficheros de /img se quedan como están. Convertirlos a currentColor los volvería
* negros en cada ![]()
que los usa, incluidas las ~20 pantallas AngularJS que no entran en este
* cambio: se arreglaría lo tematizado rompiendo lo que no lo está.
*/
.primary-sidebar svg [fill]:not([fill="none"]),
.secondary-sidebar svg [fill]:not([fill="none"]),
.primary-sidebar svg[fill]:not([fill="none"]),
.secondary-sidebar svg[fill]:not([fill="none"]) {
fill: currentColor;
}
.primary-sidebar svg [stroke]:not([stroke="none"]),
.secondary-sidebar svg [stroke]:not([stroke="none"]) {
stroke: currentColor;
}
/*
* Los que sí son ![]()
. La máscara recorta la forma del SVG sobre un fondo de color, así que el
* icono adopta el del tema sin que importe con qué venga relleno el fichero.
*
* Sólo para monocromos. Los que llevan verde o rojo siguen siendo ![]()
con su color intacto: ahí
* el color no es decoración, es lo que distingue un estado de otro, y ambos siguen legibles sobre
* fondo oscuro (rojo 3,2:1, verde 7,5:1).
*/
.icon-mask {
display: inline-block;
flex: 0 0 auto;
background-color: var(--icon);
-webkit-mask: var(--icon-src) center / contain no-repeat;
mask: var(--icon-src) center / contain no-repeat;
}
.icon-mask.is-strong { background-color: var(--icon-strong); }
.icon-mask.is-accent { background-color: var(--accent); }
/*
* Selector de tema.
*
* Los dos iconos viven en el marcado y aquí se decide cuál se ve, según `data-theme` — el tema que
* se está *viendo*, no el modo guardado. Con «automático» eso importa: lo que el botón debe
* mostrar es si ahora mismo hay claro u oscuro, no de dónde salió esa decisión.
*
* Así el guion sólo escribe un atributo: no construye ni sustituye nada, y el botón no puede
* quedarse a medio pintar si algo falla.
*/
.theme-icon {
display: none;
}
[data-theme="light"] .theme-icon-light,
[data-theme="dark"] .theme-icon-dark {
display: inline-block;
}
/* Sin atributo — guion bloqueado — se enseña el de claro, que es el defecto seguro. */
html:not([data-theme]) .theme-icon-light {
display: inline-block;
}