/* ========================================================== CRM - TEMA CLARO Se enciende con data-tema="claro" en . Lo pone js/apariencia.js antes del primer pintado, asi que no hay destello oscuro al cargar. COMO ESTA ARMADO Casi todo sale de redefinir las mismas variables que usa el tema oscuro: si una regla dice var(--surf-1), cambia sola. Lo que hay abajo de las variables son los lugares donde el proyecto tenia el color escrito a mano —blancos con alfa usados como borde, sombras negras, textos en #fff— que una variable no alcanza. EL FONDO NO ES BLANCO PURO #f4f5f8, un blanco apenas apagado. Con #ffffff de fondo las tarjetas —que SI son blancas— desaparecen: no hay forma de ver donde termina una y empieza la otra sin dibujarles un borde grueso, y eso es justo el aire de planilla que se saco del panel lateral. EL ACENTO El color de acento lo elige cada uno y varios de los ocho son claros. Sobre blanco, un verde menta al 100% no se lee. Para TEXTO se usa --acento-legible, que es el mismo color mezclado con negro; los rellenos y los bordes siguen usando el acento tal cual, porque ahi no hay que leer nada. ========================================================== */ html[data-tema="claro"] { color-scheme: light; --bg-main: #f4f5f8; --bg-surface: #ffffff; --bg-card: #ffffff; /* --surf-0 es el LIENZO, no una tarjeta: ui.css lo usa para pintar . En el tema oscuro es un escalon mas claro que --bg-main porque ahi las superficies suben hacia la luz; en claro tiene que ir para el otro lado, o el fondo queda blanco puro y las tarjetas —que si son blancas— desaparecen contra el. Es el "blanco casi opaco" que se pidio. */ --surf-0: #f4f5f8; --surf-1: #ffffff; --surf-2: #eef0f4; --surf-3: #e3e6ec; --border-color: #dee1e8; --borde-fuerte: #ced3dd; --borde-luz: rgba(16, 20, 30, 0.10); --text-main: #14161c; --text-secondary: #3d434f; --text-muted: #5b6272; /* El gris mas apagado no puede ser tan claro como su equivalente oscuro. Sobre negro, #5c5c66 se lee porque el fondo es casi negro; sobre blanco hace falta bajar bastante mas para llegar al mismo contraste. Con el valor "espejo" (#878e9e) los rotulos de la grilla quedaban en 2.9 a 1. */ --text-dim: #6e7585; /* El acento ya viene oscurecido para este tema: lo hace js/apariencia.js al pintarlo, porque el color se usa como texto en unas ciento cuarenta reglas y parchearlas una por una era imposible. Este alias queda para las pocas reglas de abajo que necesitan nombrarlo. */ --acento-legible: var(--primary); /* Las sombras del tema oscuro son negro puro con alfa alto: sobre blanco eso es una mancha gris. Bajan a un azul muy oscuro con poca opacidad, que es como cae la luz en una interfaz clara. */ --elev-1: 0 1px 2px rgba(16, 20, 30, 0.06); --elev-2: 0 2px 8px rgba(16, 20, 30, 0.07); --elev-3: 0 8px 24px rgba(16, 20, 30, 0.10); } /* ========================================================== 1. LA BASE ========================================================== */ html[data-tema="claro"], html[data-tema="claro"] body { background: var(--bg-main); color: var(--text-main); } /* index.css y legibilidad.css pintan el lienzo en oscuro con !important y sin pasar por variables. */ html[data-tema="claro"] body, html[data-tema="claro"] #app-container, html[data-tema="claro"] #crm-workspace, html[data-tema="claro"] #crm-workspace:not(.hidden) { background-color: var(--bg-main) !important; color: var(--text-main); } html[data-tema="claro"] .top-navbar, html[data-tema="claro"] .main-tabs { background: var(--bg-main) !important; color: var(--text-main); } /* ========================================================== 2. SUPERFICIES Todo lo que en oscuro era "una caja un escalon mas clara que el fondo" en claro es al reves: la caja es blanca y el fondo el que esta apagado. El velo translucido de los paneles de vidrio se saca: sobre claro deja un gris sucio. ========================================================== */ html[data-tema="claro"] .glass-panel, html[data-tema="claro"] .metric-card, html[data-tema="claro"] .resumen-item, html[data-tema="claro"] .chart-card, html[data-tema="claro"] .dashboard-card, html[data-tema="claro"] .users-container, html[data-tema="claro"] .pool-container, html[data-tema="claro"] .bitacora-panel, html[data-tema="claro"] .chat-panel, html[data-tema="claro"] .barra-filtros, html[data-tema="claro"] .stat-card, html[data-tema="claro"] .custom-table { background: var(--surf-1) !important; border-color: var(--border-color) !important; color: var(--text-main); box-shadow: var(--elev-1) !important; } /* Las tarjetas anidadas no vuelven a pintar de blanco sobre blanco: se quedan sin fondo, como en oscuro. */ html[data-tema="claro"] .glass-panel .glass-panel, html[data-tema="claro"] .glass-panel .metric-card, html[data-tema="claro"] .glass-panel .resumen-item { background: transparent !important; box-shadow: none !important; } /* Modales y globos: blancos, con la sombra suave. */ html[data-tema="claro"] .modal-content, html[data-tema="claro"] .modal-box, html[data-tema="claro"] #ap-panel, html[data-tema="claro"] .avisos-panel, html[data-tema="claro"] .dialogo-caja, html[data-tema="claro"] .picker-pop { background: var(--surf-1) !important; border-color: var(--borde-fuerte) !important; color: var(--text-main); box-shadow: var(--elev-3) !important; } /* El telon de fondo de los modales es negro al 45%: sobre una interfaz clara tapa de mas. */ html[data-tema="claro"] .modal-overlay, html[data-tema="claro"] .chat-fondo, html[data-tema="claro"] .dialogo-fondo { background: rgba(16, 20, 30, 0.28) !important; } /* ========================================================== 3. TEXTO Los tres grises del tema oscuro salen de las variables y no hace falta tocarlos. Lo que si hay que corregir es el texto escrito en blanco a mano, que sobre blanco desaparece. ========================================================== */ html[data-tema="claro"] h1, html[data-tema="claro"] h2, html[data-tema="claro"] h3, html[data-tema="claro"] h4, html[data-tema="claro"] h5, html[data-tema="claro"] .metric-value, html[data-tema="claro"] .fila-nombre, html[data-tema="claro"] .user-name { color: var(--text-main) !important; } /* Los titulos y numeros del acento: mismo color, mas oscuro. */ html[data-tema="claro"] .tab-btn.active, html[data-tema="claro"] .section-head h2 i, html[data-tema="claro"] .contactar-titulo i, html[data-tema="claro"] .grid-th.ordenando, html[data-tema="claro"] .grid-th.ordenable:hover, html[data-tema="claro"] a:not(.btn) { color: var(--acento-legible) !important; } /* ========================================================== 4. CONTROLES ========================================================== */ html[data-tema="claro"] input, html[data-tema="claro"] select, html[data-tema="claro"] textarea, html[data-tema="claro"] .select-field, html[data-tema="claro"] .buscador input { background: var(--surf-1) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; } html[data-tema="claro"] input::placeholder, html[data-tema="claro"] textarea::placeholder { color: var(--text-dim) !important; } html[data-tema="claro"] input:focus, html[data-tema="claro"] select:focus, html[data-tema="claro"] textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(var(--acento-rgb), 0.18) !important; } /* Los botones de icono y los secundarios eran "un blanco al 4% sobre negro". Sobre claro ese blanco es invisible. */ html[data-tema="claro"] .btn-icon, html[data-tema="claro"] .btn-icono, html[data-tema="claro"] .btn-secondary, html[data-tema="claro"] .btn-fila { background: var(--surf-2) !important; border-color: var(--border-color) !important; color: var(--text-muted) !important; } html[data-tema="claro"] .btn-icon:hover, html[data-tema="claro"] .btn-icono:hover, html[data-tema="claro"] .btn-secondary:hover, html[data-tema="claro"] .btn-fila:hover { background: var(--surf-3) !important; color: var(--text-main) !important; } /* El boton principal se queda con el acento de fondo, pero el texto encima tiene que contrastar con EL, no con la pagina. Con acentos claros (menta, lima) el blanco no alcanza. */ html[data-tema="claro"] .btn-primary-3d, html[data-tema="claro"] .btn-primary { color: #05140e !important; } /* ========================================================== 5. BLANCOS CON ALFA El proyecto usa rgba(255,255,255,.04-.09) para tres cosas: separar filas, marcar el hover y dibujar el borde superior de una caja. Las tres se apoyan en que el fondo es oscuro. Se invierten a negro con el mismo peso visual. ========================================================== */ html[data-tema="claro"] .grid-fila { border-bottom-color: rgba(16, 20, 30, 0.07) !important; } html[data-tema="claro"] .grid-head { background: var(--surf-2) !important; border-bottom-color: var(--border-color) !important; box-shadow: none !important; } html[data-tema="claro"] .main-tabs .tab-btn:hover:not(.active), html[data-tema="claro"] .custom-table tbody tr:hover, html[data-tema="claro"] .lead-row:hover { background: rgba(16, 20, 30, 0.045) !important; } html[data-tema="claro"] .triage-chip { background: color-mix(in srgb, var(--triage-color, #5b6272) 16%, #ffffff) !important; color: color-mix(in srgb, var(--triage-color, #5b6272) 72%, #05070c) !important; } /* ========================================================== 6. LA MARCA El logotipo son dos mascaras: una pintada de blanco y otra del acento. La blanca sobre fondo claro no existe. Pasa a ser casi negra, que es como se imprime la marca en papel. ========================================================== */ html[data-tema="claro"] .marca-nombre__blanco, html[data-tema="claro"] .marca-iso__blanco { background: #14161c; } /* El resplandor del isotipo era para que no quedara plano sobre negro. Sobre blanco es una mancha. */ html[data-tema="claro"] .marca-iso__acento { filter: none; } /* La marca de agua del fondo es el logo al 3% en blanco: sobre claro no se ve, y subirle la opacidad lo unico que hace es ensuciar. Se apaga. */ html[data-tema="claro"] .watermark-logo-glow-wrapper { display: none !important; } /* ========================================================== 7. LOS FONDOS ANIMADOS Las cuatro tramas estan dibujadas en blanco o en acento sobre negro. En claro se invierten: la trama pasa a ser oscura y baja de intensidad, porque sobre blanco el mismo contraste se ve el doble. La lluvia de codigo es un canvas y no se puede alcanzar desde aca: los colores se los da js/fondo.js, que lee el tema (ver `tonos()`). ========================================================== */ html[data-tema="claro"][data-fondo="puntos"] body::before { background-image: radial-gradient(rgba(16, 20, 30, 0.075) 1px, transparent 1px); } html[data-tema="claro"][data-fondo="malla"] body::before { background-image: linear-gradient(rgba(var(--acento-rgb), 0.085) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--acento-rgb), 0.085) 1px, transparent 1px); } /* El orbe de luz del fondo es un resplandor del acento pensado para brillar en la oscuridad. Sobre blanco queda como una mancha de color: se baja a un velo. */ html[data-tema="claro"] #ambient-background-glow::before { opacity: 0.18 !important; } /* ========================================================== 8. BARRAS DE DESPLAZAMIENTO ========================================================== */ html[data-tema="claro"] ::-webkit-scrollbar-track { background: var(--surf-2); } html[data-tema="claro"] ::-webkit-scrollbar-thumb { background: #c4cad6; border-radius: 8px; } html[data-tema="claro"] ::-webkit-scrollbar-thumb:hover { background: #aab2c2; } /* ========================================================== 9. EL PANEL LATERAL Hereda casi todo de las variables. Lo unico propio es la pastilla de la seccion activa: el lavado del acento al 12% sobre negro se ve; sobre blanco hay que subirlo. ========================================================== */ html[data-tema="claro"].nav-lateral body .main-tabs .tab-btn.active { background: rgba(var(--acento-rgb), 0.16) !important; color: var(--acento-legible) !important; } html[data-tema="claro"].nav-lateral body .grid-consultas .grid-fila { background: linear-gradient(180deg, color-mix(in srgb, var(--estado-color, var(--primary)) 12%, transparent) 0%, transparent 60%), var(--surf-1); box-shadow: var(--elev-1); } /* El globo de la seccion, con el panel plegado. */ html[data-tema="claro"].nav-lateral.nav-plegada body .main-tabs .tab-btn::before { background: #14161c; border-color: #14161c; color: #ffffff; }