/* ═══════════════════════════════════════════════════════════════════════ TOKENS — la paleta neutra del CRM, en un solo sitio. ═══════════════════════════════════════════════════════════════════════ Por qué existe esta hoja ──────────────────────── El modo oscuro de este proyecto se intentó dos veces y las dos se cayó. La causa, medida: el 53% del color del CRM (1913 valores de 3612) estaba escrito a mano en el CSS. Un tema no puede repintar lo que está fijado, así que el intento anterior lo peleó con 468 `!important` dentro de reglas `.dark-theme` — y aun así perdió, hasta acabar desactivado a la fuerza en js/core/theme-init.js. El arreglo no es añadir más overrides: es que los colores neutros dejen de estar escritos a mano y pasen por estas variables. Entonces el modo oscuro es redefinirlas una vez, aquí abajo, sin un solo `!important`. Qué entra aquí y qué NO ─────────────────────── Entran los NEUTROS: superficies, líneas y texto. Son los que tienen que invertirse al cambiar de tema. NO entran los colores de acento (el azul #2563eb, el rojo #ef4444, el ámbar #f59e0b, el verde #10b981…). Esos significan algo — "peligro", "aviso", "primer lugar" — y significan lo mismo en claro y en oscuro. Tokenizarlos sería cambiarles el sentido. Tampoco entra el blanco que va SOBRE un acento: el texto de un botón azul es blanco en los dos temas. Por eso la conversión se hizo mirando la PROPIEDAD y no el valor — `background: #fff` es superficie y se invierte; `color: #fff` sobre un botón de color se queda como está. Los nombres son semánticos a propósito (--sup-1, --texto-3) y no descriptivos (--gris-900): un nombre descriptivo miente en cuanto el tema cambia y el "gris 900" pasa a ser casi blanco. Hojas que NO se tokenizan, y por qué ──────────────────────────────────── - componentes/sidebar-static.css: el sidebar ya es oscuro en el tema claro (un degradado que acaba en #04102f). Sus blancos son blancos SOBRE oscuro y deben seguir siéndolo en los dos temas. Tokenizarlo apagó el chip blanco del icono activo contra el propio sidebar; se revirtió. El sidebar no participa del tema: ya está resuelto. - componentes/glass-cards.css: es el estilo oscuro de lead.html, chat.html y 404.html. Esas tres páginas son oscuras a propósito. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Superficies ───────────────────────────────────────────────── 1 = la que queda más arriba (tarjetas, paneles, modales) 2 = el lienzo de la página 3 = zonas hundidas: cabeceras de tabla, hover de fila, chips */ --sup-1: #ffffff; --sup-2: #f8fafc; --sup-3: #f1f5f9; /* ── Líneas ──────────────────────────────────────────────────── */ --linea: #e2e8f0; --linea-fuerte: #cbd5e1; /* ── Texto, de más a menos contraste ───────────────────────────── 1 = títulos y cifras 2 = cuerpo 3 = etiquetas y apoyo 4 = placeholders y texto deshabilitado */ --texto-1: #0f172a; --texto-2: #334155; --texto-3: #64748b; --texto-4: #94a3b8; /* Variante de --texto-1 un punto más suave, ya usada en el CRM. */ --texto-1b: #1e293b; /* Variante de --texto-2 un punto más suave. */ --texto-2b: #475569; /* ── Sombras ───────────────────────────────────────────────────── En oscuro una sombra negra no se ve: lo que da relieve es el borde. Por eso son tokens y no valores sueltos. */ --sombra-1: 0 1px 3px rgba(15, 23, 42, .06); --sombra-2: 0 4px 16px rgba(15, 23, 42, .08); } /* ═══════════════════════════════════════════════════════════════════════ MODO OSCURO ═══════════════════════════════════════════════════════════════════════ Todo el tema son estas dieciocho líneas. Ni un `!important`: como las hojas de página consumen las variables en vez de escribir el color, basta con redefinirlas bajo la clase del . Las superficies no se invierten sin más (blanco -> negro): se escalonan igual que en claro, de forma que la tarjeta siga quedando por encima del lienzo. Con negro plano se pierde toda la jerarquía. Las líneas pasan a blanco translúcido en vez de a un gris fijo: sobre cualquier superficie oscura se leen igual, y no hay que afinar un gris distinto por cada nivel. Va en Y en : theme-init.js marca antes de que body exista, para que no haya fogonazo blanco, y lo copia a body porque las hojas del CRM llevan años escribiendo `body.dark-theme`. */ html.dark-theme, body.dark-theme { --sup-1: #1e293b; /* la tarjeta, por encima del lienzo */ --sup-2: #0f172a; /* el lienzo, el más oscuro */ --sup-3: #334155; /* zonas hundidas */ --linea: rgba(255, 255, 255, .10); --linea-fuerte: rgba(255, 255, 255, .18); --texto-1: #f1f5f9; --texto-1b: #e2e8f0; --texto-2: #cbd5e1; --texto-2b: #cbd5e1; --texto-3: #94a3b8; --texto-4: #64748b; --sombra-1: 0 1px 3px rgba(0, 0, 0, .35); --sombra-2: 0 4px 16px rgba(0, 0, 0, .45); /* Que el navegador pinte de oscuro lo suyo: barras de scroll, los desplegables nativos de . Sin esto quedan paneles blancos flotando sobre la página oscura. */ color-scheme: dark; }