/* ============================================================================= SPHINX RISK — TOKENS DE COLOR El ÚNICO archivo donde se escribe un color. Todo lo demás (app.css, las plantillas, el JavaScript de los gráficos) lee estos tokens o los mezcla con color-mix(); nunca escribe un hexadecimal ni un rgba() suelto. Reglas de uso, roles y contraste verificado: docs/ui-audit/sistema-color.md. Guardado por tests/test_paleta.py (contraste, techo, y que no haya literales de color fuera de este archivo). Se carga ANTES que app.css. Los bloques conservan el orden que tenían dentro de app.css, así que la cascada entre ellos no cambia. ============================================================================= */ /* ---- movido desde app.css (línea 110 antes de la auditoría) ---- */ /* ============================================================================= EL TEMA CLARO ES EL DE BASE, Y ANTES ERA EL OSCURO. El motivo es de público y lo puso Sergio: esto se vende a inversores particulares, a menudo de más de cuarenta años, y un fondo casi negro es una preferencia de programador, no la suya. El oscuro sigue estando entero, a un clic, y quien lo elija lo conserva entre visitas. Y SE HA QUITADO EL SEGUIMIENTO AUTOMÁTICO DEL SISTEMA, que es la decisión discutible de aquí, así que va dicha en voz alta. `prefers-color-scheme` es lo correcto por defecto y lo era mientras el oscuro era nuestra cara; con el claro como cara, seguir al sistema significa que la mitad de las visitas ven una versión que ya no es la principal. El interruptor cubre a quien necesite el oscuro, y su elección se recuerda. Volver a seguir al sistema es añadir un bloque @media y nada más. DE TRES COPIAS DE LOS TOKENS A DOS. Antes había tres —la base, la de la media query y la explícita— y mantener tres listas idénticas a mano es como se acaba con un tema al que le falta un color en un solo sitio. Ahora hay una base y una sobrescritura. ============================================================================= */ :root { /* --- NEUTROS --------------------------------------------------------- Una escala de grises con nombre, no hexadecimales sueltos repartidos por la hoja: los gráficos, los bordes y los fondos beben de LA MISMA escala, así que un tema no puede quedarse a medias en un sitio. El matiz es AZULADO y muy desaturado. Un gris neutro puro se ve muerto al lado de un acento saturado, y uno cálido tira a sepia. El frío es lo que hace que esto se lea como un instrumento y no como un folleto. */ --g-0: #ffffff; /* ======================================================================= EL FONDO BAJA UN ESCALÓN DE VERDAD, Y ES LA MITAD DEL ARREGLO DE LA "PALETA PESADA". Antes el fondo era #fafafc y las tarjetas #ffffff: dos valores que se distinguen apenas, así que la separación la hacía ENTERA el borde. Una página larga se convertía entonces en una rejilla de contornos, y una rejilla de contornos cansa aunque cada tarjeta esté bien. Con un escalón real, la tarjeta flota por TONO y el borde solo la remata. Es menos tinta en pantalla haciendo más trabajo. ======================================================================= */ --g-5: #f2f2f9; --g-10: #e9eaf4; --g-20: #dcdeeb; --g-30: #c2c6d9; --g-50: #5f6484; --g-70: #4b4f6d; --g-85: #2d3050; /* ======================================================================= Y EL TEXTO DEJA DE SER CASI NEGRO, que es la otra mitad. #101124 sobre blanco daba 18,4:1. Suena a virtud y no lo es para leer: por encima de unos 16:1 el texto empieza a "vibrar" sobre el fondo —halación— y eso es literalmente lo que cansa después de cinco minutos. #20233a da 15,4:1 sobre blanco y 13,8:1 sobre el fondo de la página. Sigue tres veces por encima del 4,5:1 que pide la norma AA y se lee bastante más cómodo durante un rato largo. LA REGLA GENERAL, y es la que casi nadie aplica: el contraste tiene un máximo útil, no solo un mínimo. La norma solo pone suelo, así que un tema puede cumplirla entera y seguir siendo incómodo. tests/test_paleta.py comprueba las dos puntas. ======================================================================= */ --g-95: #1f2140; --fondo: var(--g-5); --fondo-alt: var(--g-10); --superficie: var(--g-0); --superficie-tenue: var(--g-10); --linea: var(--g-20); --linea-fuerte: var(--g-30); --texto: var(--g-95); --texto-medio: var(--g-70); --texto-tenue: var(--g-50); /* --- EL ACENTO ------------------------------------------------------- ÍNDIGO ELÉCTRICO, y el verde azulado anterior se ha ido por dos motivos, uno de gusto y otro estructural. El estructural manda: el verde y el rojo ya están ocupados por el SIGNO de un número, que es la señal más leída de toda la aplicación. Un acento de marca verdoso compite con ella todo el rato — un botón verde al lado de una cifra verde obliga a decidir, cada vez, cuál de los dos verdes significa "ha subido". Un acento que no puede confundirse con un signo deja esa señal limpia. Y el índigo no es azul corporativo de banco: está lo bastante hacia el violeta para tener carácter sin irse a lo fantasioso. */ --acento: #4438ca; --acento-claro: #6c5ce7; --acento-tenue: #eeecfd; --sobre-acento: #ffffff; /* ======================================================================= EL ACENTO SE CONVIERTE EN RAMPA, Y ES LA VARIACIÓN QUE PEDÍA SERGIO SIN METER UN COLOR NUEVO. El problema no era el índigo, era que TODO lo índigo tenía la misma saturación: el botón que hay que pulsar, el número de sección, el punto de ayuda y el borde de un aviso. Cuatro cosas de importancia muy distinta pintadas con la misma intensidad — y una pantalla donde todo grita queda plana y pesa. `--acento-chrome` es el mismo tono con la saturación bajada, para lo que ESTRUCTURA (índices de sección, reglas, apoyos) frente a lo que ACCIONA. Añadir un segundo tono saturado se probó y era ruido, como ya decía el comentario de la capa de IA; bajar la saturación del mismo da variedad sin inventar un idioma nuevo. ======================================================================= */ --acento-chrome: #615d99; --acento-chrome-tenue: #ecebf4; /* La capa de IA va en el mismo índigo pero más claro y siempre sobre superficie tenue. Se probó con un segundo tono y era ruido: dos acentos saturados en la misma pantalla se pelean y ninguno significa ya nada. */ --ia: #6c5ce7; --ia-tenue: #f1effe; /* La marca tiene sus propios tokens porque NO sigue al tema: el cuadrado es oscuro en claro y en oscuro, igual que un logotipo impreso. Un logo que cambia de color de fondo con el tema deja de ser un logo. */ --marca-fondo: #101124; --marca-tinta: #f2f3ff; --positivo: #0f7a52; --negativo: #c2361f; --aviso: #8a5a00; --aviso-fondo: #fdf8ec; /* LAS TINTAS DEL SIGNO (UI-2c): el fondo leve de un dato positivo, negativo o de aviso, con nombre, para que un lavado de tarjeta, una cifra en línea y una pastilla de icono cojan EL MISMO verde y no tres mezclas parecidas. */ --positivo-tinta: #e2f3ea; --negativo-tinta: #fbe7e3; --aviso-tinta: #f8efd8; /* LA RAMPA DE LOS GRÁFICOS DE COMPOSICIÓN: seis escalones del mismo índigo, de oscuro a claro. Vivían escritos en el JavaScript del panel y no sabían de temas: en oscuro salían tinta sobre tinta. */ --rampa-1: #3a2eb8; --rampa-2: #5647d6; --rampa-3: #7466e8; --rampa-4: #9a8ff2; --rampa-5: #c0b9f8; --rampa-6: #4b6fd8; /* ======================================================================= ROLES AÑADIDOS EN LA AUDITORÍA DE COLOR (2026-09-28). Ver docs/ui-audit/sistema-color.md: qué es cada uno y cuándo se usa. ======================================================================= */ /* Cuarto nivel de superficie: menús, tooltips, popovers. En claro la elevación la hace la sombra; en oscuro, la luminosidad. */ --superficie-elevada: #ffffff; /* Borde de un control (campo, interruptor): tiene que leerse a 3:1. */ --linea-control: #858aa8; /* Información: lo que no es ganancia, ni pérdida, ni alerta. */ --info: #2f5fb3; --info-tinta: #e6eefb; /* Texto sobre un fondo de pérdida (botón de borrar). */ --sobre-negativo: #ffffff; /* LA PLACA: el único bloque intenso de una página. Índigo profundo en claro (no casi negro), variación de la noche en oscuro. */ --placa-1: #2b2677; --placa-2: #1d1a55; --placa-luz: #3a31a3; --placa-texto: #f3f2ff; --placa-texto-medio: #c3c0ea; --placa-acento: #b8aeff; --placa-positivo: #8ae6b8; --placa-negativo: #ffaa9c; --placa-serie-2: #7dd3c0; --placa-serie-3: #e9b65a; --placa-elevada: #3a3488; /* Las tres tintas de las que salen sombras, brillos y máscaras. Un componente las mezcla con color-mix(); nunca escribe rgba() suelto. */ --sombra-tinta: #1f2140; --brillo: #ffffff; --mascara: #000000; color-scheme: light; } /* ---- movido desde app.css (línea 288 antes de la auditoría) ---- */ :root[data-theme="dark"] { /* El oscuro tiene la misma enfermedad que tenía el claro y la misma cura: el fondo era #080913, o sea casi negro puro, con texto casi blanco encima. Ese contraste extremo produce halación —las letras claras "sangran" sobre el fondo— y es lo que hace que un tema oscuro canse antes que uno claro pese a tener menos luz. El fondo sube un escalón y el texto baja otro. */ --g-0: #191b2e; --g-5: #16182b; --g-10: #1f2237; --g-20: #2a2d47; --g-30: #393d5c; --g-50: #8e93b0; --g-70: #b3b7cd; --g-85: #d8dbec; --g-95: #e6e7f3; --fondo: #121423; --fondo-alt: var(--g-5); --superficie: var(--g-0); --superficie-tenue: var(--g-10); --linea: var(--g-20); --linea-fuerte: var(--g-30); --texto: var(--g-95); --texto-medio: var(--g-70); --texto-tenue: var(--g-50); --acento: #9b8dff; --acento-claro: #aea3ff; --acento-tenue: #25234d; --sobre-acento: #14122a; --acento-chrome: #8f8cbf; --acento-chrome-tenue: #23213c; --ia: #aea3ff; --ia-tenue: #1f1c40; /* El cuadrado de la marca se aclara lo justo para separarse de un fondo casi negro, sin dejar de ser el mismo signo. */ --marca-fondo: #1b1d38; --marca-tinta: #f2f3ff; --positivo: #4bd193; --negativo: #ff8677; --aviso: #e6b95e; --aviso-fondo: #241e14; --positivo-tinta: #163126; --negativo-tinta: #3a201d; --aviso-tinta: #362c16; --rampa-1: #6d5cf0; --rampa-2: #8676f5; --rampa-3: #a094f7; --rampa-4: #b9b0fa; --rampa-5: #d3cdfc; --rampa-6: #6f8ff0; /* El navegador pinta las barras de scroll y los controles nativos según esto. Sin ello, un tema oscuro elegido a mano sobre un sistema claro deja barras de scroll blancas que delatan el truco. */ /* Roles añadidos en la auditoría de color (ver el bloque claro). */ --superficie-elevada: #24273f; --linea-control: #6d7292; --info: #7fa8ef; --info-tinta: #1b2740; --sobre-negativo: #2a0f0b; --placa-1: #1b1848; --placa-2: #100f2c; --placa-luz: #3b3385; --placa-elevada: #2a2660; --sombra-tinta: #05060d; color-scheme: dark; } /* ---- movido desde app.css (línea 928 antes de la auditoría) ---- */ /* ============================================================================= v4 — ATMÓSFERA QUÉ LE FALTABA AL SISTEMA v3, mirando las referencias que Sergio reunió. v3 resolvió la escala, la tipografía y el movimiento, y eso arregló que la web pareciera un informe impreso. Lo que sigue faltando es PROFUNDIDAD: en v3 todo vive en un solo plano, y las cuatro referencias —Cobalt, Framer, Nixtio, Shakuro— tienen en común que construyen espacio. Lo hacen con cuatro recursos, y ninguno es caro: 1. UN RESPLANDOR DETRÁS DEL CONTENIDO. Un degradado radial muy tenue y muy grande, del color de la marca, detrás de lo importante. No se ve como un degradado: se ve como que la pantalla tiene fondo. Es lo que hace que un titular sobre negro no parezca un titular sobre negro. 2. BORDES DE UN PÍXEL CON DEGRADADO. Un borde plano sobre fondo oscuro desaparece o se ve sucio. Un borde que va de claro arriba a oscuro abajo imita cómo cae la luz sobre un canto, y es lo que hace que una tarjeta parezca una pieza en vez de un rectángulo pintado. 3. SUPERFICIES QUE NO SON PLANAS. Un degradado casi imperceptible dentro de la tarjeta, más clara arriba. Tres por ciento de diferencia; no se percibe conscientemente y se nota si se quita. 4. UNA RETÍCULA DE FONDO. Líneas finísimas a intervalos regulares. Comunica "instrumento de medida" sin decir nada, y es literalmente lo que hace un papel milimetrado. Para un producto de análisis es la textura correcta. TODO ESTO ES CSS PURO. Ni una imagen, ni una librería, ni un kilobyte de JavaScript — que importa porque cada una de esas cosas es algo que puede fallar, tardar o quedar desactualizado. ============================================================================= */ :root { /* El resplandor se define como variable para que cada sección pueda colocarlo donde le convenga sin repetir la receta. */ --halo: color-mix(in srgb, var(--acento) 26%, transparent); --halo-tenue: color-mix(in srgb, var(--acento) 10%, transparent); /* La retícula. El tamaño es el mismo que el ritmo vertical del texto, para que las dos cosas no se peleen: una retícula que no cuadra con nada es ruido visual y se nota aunque no se sepa por qué. */ --sombra-flotante: 0 1px 0 color-mix(in srgb, var(--brillo) 4%, transparent) inset, 0 24px 60px -32px color-mix(in srgb, var(--sombra-tinta) 65%, transparent), 0 2px 8px -4px color-mix(in srgb, var(--sombra-tinta) 40%, transparent); /* La pastilla de la pestaña activa: en oscuro se levanta con un filo claro arriba y una sombra dura debajo. */ --sombra-pestana: 0 1px 0 color-mix(in srgb, var(--brillo) 5%, transparent) inset, 0 1px 3px color-mix(in srgb, var(--sombra-tinta) 35%, transparent); } /* ---- movido desde app.css (línea 984 antes de la auditoría) ---- */ :root[data-theme="light"], :root:not([data-theme="dark"]) { /* En claro el mismo recurso necesita mucha menos intensidad: sobre blanco un resplandor del 26% no es atmósfera, es una mancha. */ --halo: color-mix(in srgb, var(--acento) 12%, transparent); --halo-tenue: color-mix(in srgb, var(--acento) 5%, transparent); --sombra-flotante: 0 1px 2px color-mix(in srgb, var(--sombra-tinta) 4%, transparent), 0 24px 60px -34px color-mix(in srgb, var(--sombra-tinta) 18%, transparent); /* En claro el filo blanco no existe y la sombra tiene que ser mucho más suave: sobre blanco, una sombra dura no eleva, ensucia. */ --sombra-pestana: 0 1px 2px color-mix(in srgb, var(--sombra-tinta) 8%, transparent); } /* ---- movido desde app.css (línea 3630 antes de la auditoría) ---- */ /* ============================================================================= LA PÁGINA DE EMPRESA, SEGUNDA VERSIÓN: GRÁFICOS, PUNTUACIONES Y EL DCF COMPLETO UNA PALETA PROPIA PARA LAS SERIES DE LOS GRÁFICOS. El verde y el rojo están reservados al signo de un número en toda la web, así que una línea de "flujo de caja" en verde diría "positivo" sin serlo. LOS TOKENS --serie-N YA NO VIVEN AQUÍ (ronda 5, 2026-09-28): eran cuatro tonos casi todos del mismo índigo, y ahora son seis colores distintos y comprobados que usa toda la web. Están en el bloque "RONDA 5 · GRÁFICOS", al final de la hoja. ============================================================================= */ :root { --asig-capex: var(--acento); --asig-compras: #a397f2; --asig-dividendos: #0b8a99; --asig-recompras: #5fc4cf; } /* ---- movido desde app.css (línea 3648 antes de la auditoría) ---- */ :root[data-theme="dark"] { --asig-compras: #5a4fb3; --asig-dividendos: #2dc3d3; --asig-recompras: #1d7f8a; } /* ---- movido desde app.css (línea 4603 antes de la auditoría) ---- */ /* ============================================================================= REVISIÓN 3 (Sergio, 2026-09-28): EL ESCENARIO INVADE, SE VA, Y TIENE DOS TONOS "Que cuando me meta en la web ese header me invada y luego se vaya cuando escroleo; todavía has dejado muchos márgenes; y quiero una versión distinta para el tono claro y el oscuro." Salió de un panel de tres diseños (sistema, editorial, cinematográfico) con jueces; esta es la síntesis: la base del diseño "sistema" (tokens por tema, cabecera que se posa, telón que se retira) con los márgenes mínimos y el titular grande del "editorial". EL ESCENARIO SE DEFINE UNA VEZ Y SE PINTA DOS VECES: todo lo que cambia entre claro y oscuro son tokens `--escena-*` en los dos bloques de tema. En claro es DÍA —un campo pálido de índigo con la luz arriba y tinta oscura—; en oscuro es NOCHE —el índigo profundo de antes—. Los dos se funden con la página por abajo, así que al retirarse no dejan un borde duro. 1. INVADE. Sube debajo de la cabecera (margen negativo = el aire de
más la cabecera), mide la pantalla entera y la cabecera es transparente mientras está encima; en los primeros 220 px de scroll se posa (tinte, borde y desenfoque), con una animación ligada al scroll. Sin JavaScript. 2. SE VA. Al bajar se atenúa, se aleja y se redondea: pasa de pantalla a pieza que cede el sitio. 3. SIN MÁRGENES DE SOBRA. El hueco de 56 px bajo la cabecera era el relleno de
: la regla que lo anulaba exigía que el hero fuera el primer hijo de
, y vivía dentro de un
de 880 px (quitado en landing.html). Los lados pasan a un margen de portada de 24–64 px, y la cabecera de la portada se alinea con ese margen: marca y titular caen en el mismo borde. 4. EL AVISO DE IDIOMA flota abajo en vez de empujar la página: es una sugerencia, no una sección, y así no impide que el escenario suba. 5. Y UN ARREGLO QUE NO SE VEÍA: el grano del escenario heredaba de `.hero::before` un ancho del 60 %, 340 px de alto y un desenfoque de 46 px — o sea, no existía. Ahora cubre el escenario entero. ============================================================================= */ /* --- 1. LOS TOKENS DEL ESCENARIO, UNO POR TEMA ------------------------------ */ :root { --escena-fondo: radial-gradient(120% 95% at 50% 40%, transparent 55%, color-mix(in srgb, var(--acento) 10%, transparent) 100%), radial-gradient(90% 70% at 85% 8%, color-mix(in srgb, var(--acento) 22%, transparent) 0%, transparent 60%), radial-gradient(60% 50% at 8% 100%, color-mix(in srgb, var(--acento-claro) 14%, transparent) 0%, transparent 60%), linear-gradient(165deg, color-mix(in srgb, var(--acento) 5%, var(--placa-texto)) 0%, color-mix(in srgb, var(--acento) 13%, var(--placa-texto)) 100%); --escena-pie: linear-gradient(180deg, transparent 85%, var(--fondo) 100%); --escena-halo: color-mix(in srgb, var(--acento) 32%, transparent); /* EL GRANO EN CLARO ES NEGRO Y MULTIPLICA: el ruido blanco en «soft-light» sobre un fondo casi blanco no se ve, y «multiply» con blanco no hace nada. */ --escena-grano: .12; --escena-grano-mezcla: multiply; --escena-grano-textura: url("data:image/svg+xml;utf8,"); --escena-texto: var(--g-95); --escena-tenue: var(--texto-medio); --escena-fuerte: var(--acento); --escena-acento: var(--acento); --escena-titular: linear-gradient(180deg, var(--g-95) 30%, color-mix(in srgb, var(--g-95) 70%, var(--acento)) 100%); --escena-linea: color-mix(in srgb, var(--acento) 18%, transparent); --escena-vidrio: color-mix(in srgb, var(--brillo) 62%, transparent); --escena-vidrio-sombra: 0 24px 60px -30px color-mix(in srgb, var(--acento) 38%, transparent), inset 0 1px 0 #fff; --escena-boton: color-mix(in srgb, var(--brillo) 55%, transparent); --escena-boton-linea: color-mix(in srgb, var(--acento) 30%, transparent); --escena-boton-hover: #fff; --escena-pos: var(--positivo); --escena-neg: var(--negativo); /* El margen de la portada: lo que queda entre el borde de la ventana y el contenido del escenario (y de la cabecera, en la portada). */ } /* ---- movido desde app.css (línea 4670 antes de la auditoría) ---- */ :root[data-theme="dark"] { --escena-fondo: radial-gradient(90% 70% at 85% 24%, color-mix(in srgb, var(--acento) 45%, var(--placa-2)) 0%, transparent 60%), radial-gradient(60% 50% at 8% 100%, color-mix(in srgb, var(--acento) 30%, var(--placa-2)) 0%, transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--acento) 14%, var(--placa-2)) 0%, var(--placa-2) 100%); --escena-pie: linear-gradient(180deg, transparent 85%, var(--fondo) 100%); --escena-halo: color-mix(in srgb, var(--acento) 55%, transparent); --escena-grano: .28; --escena-grano-mezcla: soft-light; --escena-grano-textura: url("data:image/svg+xml;utf8,"); --escena-texto: var(--placa-texto); --escena-tenue: color-mix(in srgb, var(--placa-texto) 68%, transparent); --escena-fuerte: #fff; --escena-acento: color-mix(in srgb, var(--acento) 45%, var(--placa-texto)); --escena-titular: linear-gradient(180deg, var(--placa-texto) 30%, color-mix(in srgb, var(--brillo) 72%, transparent) 100%); --escena-linea: color-mix(in srgb, var(--brillo) 14%, transparent); --escena-vidrio: color-mix(in srgb, var(--brillo) 7%, transparent); --escena-vidrio-sombra: 0 20px 50px -20px color-mix(in srgb, var(--sombra-tinta) 60%, transparent), inset 0 1px 0 color-mix(in srgb, var(--brillo) 12%, transparent); --escena-boton: color-mix(in srgb, var(--brillo) 6%, transparent); --escena-boton-linea: color-mix(in srgb, var(--brillo) 28%, transparent); --escena-boton-hover: color-mix(in srgb, var(--brillo) 12%, transparent); --escena-pos: color-mix(in srgb, var(--positivo) 70%, #fff); --escena-neg: color-mix(in srgb, var(--negativo) 75%, var(--placa-texto)); } /* ---- movido desde app.css (línea 6545 antes de la auditoría) ---- */ /* ============================================================================= RONDA 5 · GRÁFICOS (Sergio, 2026-09-28) "Me gustaría que ese tipo de gráficas lineales tuviesen un poco más de cuerpo, porque queda como muy cutrillo una sola línea ahí finita y con un ligero degradado hacia arriba o hacia abajo." Y, en la misma revisión, que la paleta de la página entera acaba cansando. Este bloque es la parte de CSS de las dos cosas. La otra mitad vive en el