/* ========================================================================== TOKENS DE COLOR — Clave Bursátil ========================================================================== QUÉ ES. Los colores de la plataforma definidos UNA vez, con nombre. Nada más: este archivo no pinta nada por sí solo, sólo declara variables. Por eso se puede cargar sin riesgo — hasta que alguien use un token, no cambia un pixel. POR QUÉ. Medido el 2026-08-21: **161 colores distintos** escritos a mano en las vistas, 2.177 apariciones en 151 archivos, y **ni una sola variable CSS en todo el proyecto**. El problema no es la cantidad: es que **el mismo rol tiene dos o tres colores** según quién escribió cada pantalla —`#28a745` y `#4caf50` para "ok", `#dd3333` y `#dc3545` para "error", siete grises distintos para el mismo texto secundario—. ALCANCE. Sólo **pantallas**. Los emails quedan afuera a propósito: son 1.692 de las 2.177 apariciones (78%), y ahí las variables CSS **no funcionan** — Gmail y Outlook no las soportan, el hex tiene que ir escrito. No es deuda pendiente, es una limitación del medio. CÓMO SE MIGRA. De a poco y sin apuro: primero `app.custom.css` y `app.dark-mode.css`, después las pantallas nuevas. No hace falta tocar los 72 archivos de una — un token sin usar no molesta a nadie. LA ESCALA DE GRISES es **slate**, y no es una elección de la nada: el modo oscuro ya venía usando `#0f172b` y `#1e293b`, que son exactamente slate-900 y slate-800. Ya estaba ahí, sin nombre. Modelo: el bloque `@theme` de Flux, donde toda la identidad visual son diez líneas y cambiar el acento de la app es editar una. ========================================================================== */ :root { /* ---------------------------------------------------------------------- GRISES. Derivados del AZUL DE MARCA (`#082146`, hue 215°), no de una escala genérica: así los grises, los fondos y la estructura son la misma familia que la identidad, en vez de un azulado cualquiera al lado de otro. Reemplazan a los siete que conviven hoy: #333333, #666666, #888888, #6c757d, #eeeeee, #ebebeb, #f5f5f5. LA SATURACIÓN ES BAJA en los tonos medios y sube en los extremos. El azul de marca tiene 82%, y mantenerla daba grises violáceos justo donde vive el texto secundario de toda la app. Con 16-30% queda el matiz sin teñir el texto; en el 900 y el 950 sube, que es donde el azul tiene que leerse. El propio `#082146` cae entre el 900 y el 950 de esta escala. ---------------------------------------------------------------------- */ --cb-gris-50: #f7f8fb; --cb-gris-100: #f0f3f7; --cb-gris-200: #dfe4ec; --cb-gris-300: #c8cfda; --cb-gris-400: #9aa5b7; --cb-gris-500: #718198; --cb-gris-600: #58677e; --cb-gris-700: #425167; --cb-gris-800: #2b3a50; --cb-gris-900: #152337; --cb-gris-950: #081221; /* ---------------------------------------------------------------------- MARCA. **La marca tiene DOS colores** (dicho por Miguel el 2026-08-21): el verde `#009966` y el azul `#082146`. Toda la paleta gira alrededor de esos dos — el verde es la ACCIÓN (botones, links, lo que se toca) y el azul es la ESTRUCTURA (la barra lateral, los encabezados, y el matiz del que sale la escala de grises entera). NO es lo que la plataforma usa hoy: hoy predomina el azul `#2949ef` (299 apariciones) y conviven `#4f46e5`, `#667eea`, `#764ba2` y `#312e81` sin criterio. La migración es justamente pasar todos ésos a estos tokens. CONTRASTE, medido: `#009966` con texto blanco da **3,65:1** — alcanza para botones y texto grande (WCAG pide 3,0), no para texto chico (pide 4,5). Igual **mejora lo que hay**: el verde de Bootstrap que ya está en toda la plataforma (`#28a745`) da 3,13:1. Para texto chico sobre el verde, usar `--cb-marca-oscuro`, que da 5,75:1. `#1d2530` con blanco da **15,45:1**: sirve para cualquier texto. PENDIENTE, ENCONTRADO EL 2026-08-21 Y SIN RESOLVER: los dos colores ya están en el código, pero **con cuatro valores distintos**. #072146 8 usos app.custom.css, public.css, widget de TradingView #082146 11 usos subscription.css, comunidad.css #08ba58 27 usos subscription.css, comunidad.css ← OTRO VERDE #009966 1 uso sólo la pantalla de paleta El azul difiere en un dígito entre archivos, y sobre todo: **las páginas públicas ya usan la dupla azul + verde**, pero con `#08ba58`, que es más claro y brillante que el `#009966` de acá — casi siempre en degradés: background: linear-gradient(135deg, #082146 0%, #08ba58 100%); Falta decidir cuál manda: si `#009966` y hay que migrar los 27, si el bueno es `#08ba58`, o si son dos verdes distintos a propósito —uno del panel y otro del sitio público—. **Hasta que se decida no se toca ninguno**: cambiar el verde equivocado rompería las páginas de suscripción y comunidad. Cambiar el acento de toda la plataforma es editar estas líneas. ---------------------------------------------------------------------- */ --cb-marca: #009966; --cb-marca-hover: #007a52; --cb-marca-oscuro: #00593c; /* para texto chico sobre claro: 5,75:1 */ --cb-marca-suave: #e6f5ef; --cb-marca-contraste: #ffffff; --cb-secundario: #082146; --cb-secundario-hover: #344967; --cb-secundario-suave: #ebedf0; --cb-secundario-contraste: #ffffff; /* ---------------------------------------------------------------------- SEMÁNTICOS. Un color por SIGNIFICADO, no por tono: lo que hay que elegir al escribir una vista es "esto está bien" o "esto es un problema", no "verde" o "rojo". Es lo que evita que aparezca un segundo verde. ---------------------------------------------------------------------- */ --cb-ok: #28a745; /* el verde de Bootstrap, el más usado */ --cb-ok-hover: #23933d; --cb-ok-suave: #e8f5e9; --cb-ok-contraste: #ffffff; --cb-alerta: #f9a825; /* pausado, en riesgo, pendiente */ --cb-alerta-hover: #db9421; --cb-alerta-suave: #fff8e1; --cb-alerta-contraste: #7a5c00; --cb-error: #dc3545; /* el de Bootstrap; convive con #dd3333 */ --cb-error-hover: #c22f3d; --cb-error-suave: #fdecea; --cb-error-contraste: #ffffff; --cb-info: #1e88e5; --cb-info-hover: #1a78ca; --cb-info-suave: #e8f4fd; --cb-info-contraste: #0d47a1; /* ---------------------------------------------------------------------- SUPERFICIES. El fondo de la página, el de las cards y los bordes. ---------------------------------------------------------------------- */ --cb-fondo: #f5f5f5; /* El área de contenido tiene su propio token y no un paso de la escala: es un lavanda muy claro, elegido por Miguel el 2026-08-21, y no pertenece a la familia del verde. Tenerlo aparte evita la tentación de "corregirlo" para que combine — es una decisión, no un descuido. */ --cb-area: #edf2fa; /* La barra lateral tiene su propio token porque es la única superficie que es OSCURA en modo claro. Meterla en la escala de grises obligaría a leerla al revés que todo lo demás: la escala se invierte con el tema y la barra no, es oscura siempre. El valor es `#2c2f48`, el del tema — se probó `#0b1324` el 2026-08-21 y se volvió atrás: ese navy es parte de la identidad de la marca y no un color cualquiera que convenga uniformar. */ --cb-sidebar: #082146; /* El hover del menú: la barra aclarada un 12%. NO sale de la escala de grises a propósito — la escala se invierte con el tema y la barra no, así que `--cb-gris-800` valdría `#dfe4ec` en oscuro y el hover quedaría blanco sobre el azul. Este token es el mismo en los dos modos, como la barra. */ --cb-sidebar-hover: #263c5c; --cb-superficie: #ffffff; /* La capa que FLOTA sobre la superficie: desplegables, modales, popovers. En claro casi no se nota porque la superficie ya es blanca; existe para que la regla se escriba una sola vez y en oscuro haga su trabajo. */ --cb-elevada: #ffffff; --cb-borde: #dee2e6; --cb-texto: #333333; --cb-texto-suave: #6c757d; } /* ========================================================================== MODO OSCURO Se REDEFINEN los tokens, no se reescriben las reglas. Es la diferencia con `app.dark-mode.css`, que hoy repite cada color en cada selector: por eso son 8 KB para decir cosas que acá entran en veinte líneas. El selector es `body.dark`, que es el que ya usa la plataforma. ========================================================================== */ body.dark { /* La escala se invierte: el 50 pasa a ser el más oscuro. Así una regla escrita con `--cb-gris-100` sigue significando "el fondo apenas separado", sin tener que escribirla dos veces. */ --cb-gris-50: #081221; --cb-gris-100: #152337; --cb-gris-200: #2b3a50; --cb-gris-300: #425167; --cb-gris-400: #58677e; --cb-gris-500: #718198; --cb-gris-600: #9aa5b7; --cb-gris-700: #c8cfda; --cb-gris-800: #dfe4ec; --cb-gris-900: #f0f3f7; --cb-gris-950: #f7f8fb; /* CADA TOKEN OSCURO SALE DEL CLARO, NO DE OTRA PALETA. Ésta es la regla y vale para todos los de abajo: se toma **el matiz exacto** del token del modo claro y se le sube la luminosidad hasta que dé ~6:1 contra la card (`#243042`). Nada se elige "a ojo" ni se hereda del tema viejo. Antes no era así y se notaba: `--cb-ok` era `#4caf50` (el verde de Material, **12° fuera** del `#28a745` de la paleta) y `--cb-error` era `#fe4d2e` —el naranja rojizo del tema comprado, **15° fuera** del `#dc3545`—, o sea que "correcto" y "error" cambiaban de color al prender el modo oscuro. Justo lo que los tokens vienen a evitar. LOS `-contraste` SE INVIERTEN. En claro los sólidos son oscuros y llevan texto blanco; acá son claros y llevan texto oscuro del mismo matiz. Todos dan 6:1 o más sobre su propio fondo. LOS ACENTOS VAN SATURADOS, no apagados. Pedido por Miguel el 2026-08-21: "más HDR". Sobre un fondo oscuro un color desaturado se ve lavado, así que la saturación sube a 85-95% y la luminosidad se ajusta para que el contraste NO baje — es la diferencia entre subir el brillo y subir el rango. Las superficies no se tocaron: el fondo ya estaba bien. Al saturar, `error` e `info` PERDÍAN contraste (4,21 y 4,74) porque el matiz saturado es más oscuro. Se les subió la luminosidad hasta 5,3:1 y 6,2:1. Los otros tres ganaron solos: marca 6,7 → 7,7. */ --cb-marca: #06e097; /* 7,7:1 sobre la card */ --cb-marca-hover: #34f4b4; --cb-marca-oscuro: #06e097; /* en oscuro no hace falta bajar el tono */ --cb-marca-suave: #112c23; --cb-marca-contraste: #09251c; /* texto OSCURO sobre el verde claro */ /* El secundario NO se convierte en un azul brillante: es la alternativa al primario, no un segundo acento. Se invierte a un gris azulado que conserva el matiz 216° de la marca en vez de quedar neutro. */ --cb-secundario: #bbc5d3; --cb-secundario-hover: #dadfe7; --cb-secundario-suave: #172130; --cb-secundario-contraste: #091a34; --cb-ok: #1fd649; /* derivado de #28a745, mismo matiz 134° */ --cb-ok-hover: #51e674; --cb-ok-suave: #112c17; --cb-ok-contraste: #092510; --cb-alerta: #faac2e; /* derivado de #f9a825, matiz 37° */ --cb-alerta-hover: #f8c572; --cb-alerta-suave: #2c2211; --cb-alerta-contraste: #251a09; --cb-error: #f5808b; /* derivado de #dc3545, matiz 354° */ --cb-error-hover: #f9aeb5; --cb-error-suave: #2c1114; --cb-error-contraste: #25090c; --cb-info: #6eb7f7; /* derivado de #1e88e5, matiz 208° */ --cb-info-hover: #a3d1fa; --cb-info-suave: #11202c; --cb-info-contraste: #091825; /* LAS CAPAS SON UNA ESCALERA, y ése era el problema del oscuro anterior. Estaba en sidebar 10%, fondo 11%, card 17%: la barra y la página al MISMO nivel, nada se despegaba de nada, y los desplegables usaban `#0f172b`, más oscuro que la card — al revés de lo que corresponde, porque algo que flota tiene que ser más CLARO, no más oscuro. Se rehízo mirando GitHub Dark, Material 3 y la escala slate de Tailwind (que es la que el proyecto ya usaba). Las tres suben la luminosidad de a 4-6 puntos por capa Y **bajan la saturación al oscurecer** — GitHub va de 28% a 12%. Acá pasaba lo contrario: el sidebar tenía **80%** de saturación a 10% de luz, y eso es lo que daba el negro azulado duro. La escalera nueva, todo en el matiz 215° de la marca: sidebar L 9% S 55% la capa que ancla, la más oscura fondo L 14% S 38% la página superficie L 20% S 30% las cards elevada L 26% S 24% desplegables, modales borde L 34% S 20% El texto (`#eff3f5`) da 11,9:1 sobre la card y nunca baja de 9,4:1. */ --cb-fondo: #162131; --cb-area: #162131; /* en oscuro el área se funde con el fondo */ --cb-sidebar: #0a1524; /* la capa más oscura: ancla el layout */ --cb-sidebar-hover: #1c2b42; /* un escalón por encima de la barra */ --cb-superficie: #243042; --cb-elevada: #324052; --cb-borde: #455468; /* El texto sale de la escala de grises, no de un valor suelto: son `--cb-gris-900` y `--cb-gris-600` de este mismo bloque. Los de antes (`#eff3f5` y `#a1a8ad`) venían del dark mode viejo y el suave era casi neutro, sin el matiz de la familia. 11,97:1 y 5,35:1 sobre la card. */ --cb-texto: #f0f3f7; --cb-texto-suave: #9aa5b7; }