/*========================================================= EVOL-IA DESIGN SYSTEM Variables Globales ==========================================================*/ :root{ /*========================================= COLORES CORPORATIVOS =========================================*/ /* ========================================================== DEGRADADO EVOL-IA -- fuente unica de verdad ========================================================== Nacio en .sidebar nav a.active con dos paradas (#00b7ff -> #8d3cff). Se le anade la parada intermedia #4f7cff, que NO es un color nuevo: es el azul que el anillo de proteccion ya usaba. Asi el boton activo y el indicador pasan a hablar el mismo idioma sin inventar nada. Significa ACCION, SELECCION, ACTIVIDAD y PROGRESO. No es decoracion: si todo lo lleva, deja de senalar nada. ========================================================== */ --evol-gradiente: linear-gradient(90deg, #00b7ff, #4f7cff, #8d3cff); /* Misma rampa en diagonal, para superficies que no son barras. */ --evol-gradiente-diag: linear-gradient(135deg, #00b7ff, #4f7cff, #8d3cff); /* Las tres paradas sueltas, para conic-gradient y casos donde hace falta interpolar a mano. */ --evol-c1: #00b7ff; --evol-c2: #4f7cff; --evol-c3: #8d3cff; --primary-blue:#0F5DFF; --secondary-blue:#22C8FF; --cyan:#19D4FF; --primary-purple:#8C42FF; --secondary-purple:#B04DFF; --success:#00D47E; --warning:#FFC857; --danger:#FF4D6D; /*========================================= FONDOS =========================================*/ --bg-main:#050B22; --bg-secondary:#09163A; /* Apunta a --recuadro. Antes era #0D1E4E, un azul distinto, y por eso el cambio de color solo se vio en Inicio: dashboard.css es la hoja de esa pagina, y las demas pintan sus recuadros con .stat-card, .content-card y .modal-card, que beben de aqui. Las publicas no se ven afectadas: /login usa .glass-card, que sale de --glass-bg, y la portada tiene su propia hoja. Comprobado clase por clase antes de tocarlo. No se cambia --bg-secondary: eso son los renglones interiores de las fichas de detalle, una superficie SECUNDARIA. Igualarla dejaria el contenido anidado sin separacion visual del recuadro que lo contiene, igual que en Inicio se conservaron mas claros los renglones del resumen de proteccion. */ --bg-card:var(--recuadro); /* Color unico de los recuadros del panel. Antes cada regla de dashboard.css llevaba el suyo escrito a mano -- rgba(12,25,65,.90) en cuatro sitios, rgba(8,22,51,.82) en uno y blanco al 3% en otro -- asi que "cambiar el color de los recuadros" eran seis ediciones y era cuestion de tiempo que una se quedara atras. OPACO a proposito. Los valores antiguos dejaban pasar el degradado de la pagina, y por eso cada tarjeta tomaba un tono distinto segun lo que tuviera detras: las de la izquierda tiraban a azul y las de la derecha a morado. Sin alfa, todos los recuadros son el mismo color. */ --recuadro:#0E1841; /* Fondo del panel autenticado. Va aqui, al lado de --recuadro, porque los dos son la misma decision: el par de colores sobre el que se lee todo el panel. Cambiar uno sin mirar el otro es como se pierde el contraste. */ --fondo-panel:#242350; --glass-bg:rgba(10,20,55,.55); --glass-bg-hover:rgba(14,28,70,.70); --glass-border:rgba(255,255,255,.08); --glass-border-active:rgba(34,200,255,.28); /*========================================= TEXTO =========================================*/ --text-primary:#FFFFFF; --text-secondary:#D8E6FF; --text-muted:#97A6D8; --text-disabled:#7082B5; /*========================================= BOTONES =========================================*/ --button-gradient: linear-gradient( 90deg, #22C8FF, #8C42FF ); --button-gradient-hover: linear-gradient( 90deg, #33D3FF, #A255FF ); /*========================================= SOMBRAS =========================================*/ --shadow-sm: 0 4px 15px rgba(0,0,0,.18); --shadow-md: 0 12px 35px rgba(0,0,0,.30); --shadow-lg: 0 30px 80px rgba(0,0,0,.45); --shadow-glow: 0 0 45px rgba(34,200,255,.20); --shadow-purple: 0 0 55px rgba(140,66,255,.25); /*========================================= RADIOS =========================================*/ --radius-xs:6px; --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:36px; /*========================================= ESPACIADOS =========================================*/ --space-xs:6px; --space-sm:12px; --space-md:18px; --space-lg:30px; --space-xl:50px; --space-xxl:80px; /*========================================= TRANSICIONES =========================================*/ --transition-fast:.20s; --transition-normal:.35s; --transition-slow:.60s; /*========================================= DESENFOQUE =========================================*/ --blur-sm:8px; --blur-md:16px; --blur-lg:28px; --blur-xl:42px; /*========================================= FUENTES =========================================*/ --font-family: "Segoe UI", Arial, Helvetica, sans-serif; --font-xs:12px; --font-sm:14px; --font-md:16px; --font-lg:18px; --font-xl:24px; --font-xxl:42px; } /* ========================================================== Fase 1 — Sistema visual base (2026-08-11) Tokens nuevos para el sistema de componentes compartido (ver claude/fase0-auditoria-frontend-evolia.md y prompt-maestro-evolia.md seccion 31). Ningun valor existente arriba de este bloque fue modificado -- CSS permite varios bloques :root, las propiedades se combinan. ========================== */ :root{ /*========================================= COLOR SEMANTICO ADICIONAL (success/warning/danger ya existian arriba; se agregan "info" y "neutral" para completar el set que necesitan badges/alertas/estados) =========================================*/ --info:#22C8FF; --neutral:#97A6D8; /*========================================= FONDOS TENUES (mismo patron ya usado por .badge y .kpi: color solido de texto + fondo traslucido del mismo tono) =========================================*/ --success-bg:rgba(0,212,126,.12); --warning-bg:rgba(255,200,87,.12); --danger-bg:rgba(255,77,109,.12); --info-bg:rgba(34,200,255,.12); --neutral-bg:rgba(151,166,216,.12); /*========================================= RADIO "PILL" (ya se usaba 999px suelto en .badge; queda documentado como token reutilizable) =========================================*/ --radius-pill:999px; } /* Referencia de breakpoints del sistema -- documental unicamente: una custom property no puede usarse dentro de la condicion de un @media query en CSS estandar, asi que esto no es funcional. Es la referencia que deben usar a mano los @media nuevos para que todos los componentes compartan los mismos cortes: sm: 560px · md: 700px · lg: 900px · xl: 1280px */ /* ========================================================================== TEMA CLARO -- homologacion visual con EVOL-IA CRM (2026-09-10) ========================================================================== Referencia oficial: la interfaz de EVOL-IA CRM (crm.evolia.com.co). Quien pase de una aplicacion a la otra debe sentir que sigue en el mismo ecosistema: fondo claro, sidebar azul marino, tarjetas blancas, botones en degradado azul -> morado. La estructura y el funcionamiento de Contracts no cambian; solo su piel. ALCANCE: el panel autenticado y los dos portales externos. - :root:has(.sidebar) es verdadero en las 23 pantallas que incluyen partials/app_shell.html (mismo criterio que ya usaba style.css para el fondo del panel). - :root:has(.firma-body) y :root:has(.inv-body) son los portales de firma (/firmar/) y de invitacion (/invitaciones/): son pantallas de TRABAJO para alguien de fuera -- revisar, verificar, firmar, activar la cuenta -- y el CRM trabaja en claro. La ENTRADA (/ y /login) queda fuera A PROPOSITO: la portada del propio CRM es oscura, con fondo en video y panel de borde degradado ("mismo lenguaje visual que EVOL-IA Contracts", segun su propio codigo: pantalla_login en evolia_crm.py). Entrada oscura y trabajo en claro es el patron del CRM, y las pruebas 1.4.0 protegen ese video. Va en :root y no en body para que alcance tambien a la barra de desplazamiento de la pagina, que pertenece a . COMO FUNCIONA: aqui solo se dan VALORES. Las hojas leen estos tokens con su color de siempre como reserva -- var(--token, ) -- asi que en la entrada, o en un navegador sin :has(), todo se ve exactamente como antes. Retirar este bloque devuelve el tema oscuro sin tocar nada mas. OJO al redeclarar: un token de :root definido como var(--otro) se resuelve en la raiz y se hereda ya resuelto (--bg-card: var(--recuadro) llega como #0E1841). Por eso aqui cada token se declara de forma explicita, sin fiarse de que siga a otro. ========================================================================== */ :root:has(.sidebar), :root:has(.firma-body), :root:has(.inv-body){ /* ---- Paleta de EVOL-IA CRM (medida sobre su captura de referencia) ---- */ --crm-fondo:#EEF3FA; --crm-sidebar:#0A2154; --crm-azul:#2196F3; --crm-azul-suave:#D9E7FB; --crm-morado:#635BEB; --crm-blanco:#FFFFFF; --crm-texto:#1F2937; /* ---- Derivados de esa paleta (misma familia, ningun color nuevo) ---- --crm-azul-texto: el azul del CRM oscurecido. #2196F3 sobre blanco da 3,1:1 y no alcanza AA para texto; #1565C0 da 5,75:1. El #2196F3 se reserva para rellenos y degradados, donde el texto va en blanco. --crm-borde / --crm-borde-campo: el azul suave oscurecido un punto y dos; un campo de formulario debe leerse como campo. */ --crm-azul-texto:#1565C0; --crm-borde:#D6E2F3; --crm-borde-campo:#C5D5EC; /* ---- Fondos y superficies ---- */ --fondo-panel:#EEF3FA; --recuadro:#FFFFFF; --bg-card:#FFFFFF; /* Renglones interiores y cabeceras de tabla: el fondo del CRM, que sobre una tarjeta blanca separa sin necesidad de borde. */ --bg-secondary:#EEF3FA; --glass-bg:rgba(255,255,255,.92); --glass-bg-hover:rgba(33,150,243,.07); --glass-border:#D6E2F3; --glass-border-active:rgba(33,150,243,.40); /* Estos dos no existian en :root: las hojas los leian con reserva oscura (var(--border, #2A3560)). */ --border:#D6E2F3; --primary:#2196F3; /* ---- Texto (gris oscuro del CRM y grises azulados, todos AA) ---- */ --text-primary:#1F2937; --text-secondary:#374151; --text-muted:#5B6B85; --text-disabled:#94A3B8; /* Titulos de seccion, de tarjeta y de modal en el azul marino del CRM. */ --color-titulo:#0A2154; /* El titulo PRINCIPAL de cada pagina, en el azul del CRM, como el "EVOL-IA CRM" de su cabecera. Siempre es texto grande (>= 24px, o >= 18,66px en negrita): sobre #EEF3FA da 4,13:1 y sobre blanco 4,6:1, y AA pide 3:1 para texto grande. */ --color-titulo-pagina:#1976D2; /* Cabecera de Inicio: una banda marina con el saludo, como la cabecera "Registrar Venta" del CRM (marino con un reflejo morado a la derecha). Titulo en blanco (16:1) y subtitulo en azul claro (8,8:1). */ --topbar-bg:radial-gradient(420px 170px at 88% 15%, rgba(99,91,235,.38), transparent 70%), linear-gradient(135deg, #0A2154 0%, #10307A 100%); --topbar-relleno:22px 26px; --topbar-radio:20px; --topbar-sombra:0 12px 30px rgba(10,33,84,.22); --topbar-titulo:#FFFFFF; --topbar-subtitulo:#90CAF9; --texto-claro:#374151; --texto-tenue:#5B6B85; --texto-mas-tenue:#5B6B85; /* ---- Acentos ---- */ --primary-blue:#2196F3; --secondary-blue:#1565C0; --cyan:#2196F3; --primary-purple:#635BEB; --secondary-purple:#7A73F0; /* El degradado de ACCION es el del CRM, azul -> morado, con el azul inicial oscurecido a #1976D2. Lo usan los botones primarios, la opcion activa del sidebar, la llamada a la accion de Inicio, la pagina actual de la paginacion y los botones de los portales; en todos el texto va en blanco, y con #2196F3 ese extremo daba 3,12:1. Con #1976D2 da 4,6:1 y cumple AA; el morado da 4,97:1. Decision de Kely, 2026-09-10. El hover de los botones primarios va MAS OSCURO que el reposo, no mas claro: #1565C0 -> #5E35B1 da 5,75:1 y 8,02:1 con texto blanco (el de antes, #42A5F5 -> #7A73F0, daba 2,65:1 y 3,79:1). Tambien decision de Kely, 2026-09-10. --evol-c1..c3 son otra cosa: las paradas del donut de progreso de Inicio, un grafico sin texto encima que conserva el azul exacto del CRM. La parada intermedia es su punto medio. */ --evol-c1:#2196F3; --evol-c2:#4278EF; --evol-c3:#635BEB; --evol-gradiente:linear-gradient(90deg, #1976D2, #635BEB); --evol-gradiente-diag:linear-gradient(135deg, #1976D2, #635BEB); --button-gradient:linear-gradient(90deg, #1976D2, #635BEB); --button-gradient-hover:linear-gradient(90deg, #1565C0, #5E35B1); /* ---- Estados: mismo significado, tonos oscurecidos para leerse sobre blanco (texto >= 4,5:1 sobre su propio fondo tenue) ---- */ /* Verde y ambar un punto mas oscuros que su primera version: un distintivo puede ir directamente sobre el fondo #EEF3FA (cabecera de la ficha de empresa) y no solo sobre blanco, y ahi #0E7A4D daba 4,22:1 y #9A5B00 4,37:1. Medido con la auditoria de contraste del panel. */ --success:#0B6E45; --warning:#8A5100; --danger:#B42342; --info:#1565C0; --neutral:#52627D; --success-bg:rgba(14,122,77,.10); --warning-bg:rgba(245,158,11,.16); --danger-bg:rgba(220,53,85,.10); --info-bg:rgba(33,150,243,.12); --neutral-bg:rgba(82,98,125,.12); --success-borde:rgba(14,122,77,.28); --warning-borde:rgba(154,91,0,.28); --danger-borde:rgba(180,35,66,.28); --info-borde:rgba(33,150,243,.35); --success-borde-accion:rgba(14,122,77,.30); --warning-borde-accion:rgba(154,91,0,.30); --danger-borde-accion:rgba(180,35,66,.30); --success-bg-hover:rgba(14,122,77,.16); --warning-bg-hover:rgba(245,158,11,.24); --danger-bg-hover:rgba(220,53,85,.16); --estado-ok-bg:rgba(14,122,77,.10); --estado-ok-texto:#0B6E45; /* ---- Sombras: discretas y tenidas de azul marino, no de negro ---- */ --shadow-sm:0 2px 8px rgba(10,33,84,.06); --shadow-md:0 8px 24px rgba(10,33,84,.10); --shadow-lg:0 18px 48px rgba(10,33,84,.18); --shadow-glow:0 6px 16px rgba(33,150,243,.28); --shadow-purple:0 8px 22px rgba(99,91,235,.30); --sombra-tarjeta:0 1px 2px rgba(10,33,84,.04), 0 6px 18px rgba(10,33,84,.05); --sombra-panel:0 10px 28px rgba(10,33,84,.08); --sombra-flotante:0 12px 32px rgba(10,33,84,.14); /* ---- Lineas y velos: antes blanco translucido sobre oscuro ---- */ --linea:#D6E2F3; --linea-suave:#E4ECF8; --linea-fuerte:#C5D5EC; --velo:#F5F8FD; --velo-hover:#EAF2FC; --icono-fondo:#D9E7FB; --fila-hover:rgba(33,150,243,.05); --fantasma-hover:rgba(33,150,243,.08); --codigo-bg:#EEF3FA; --donut-centro:#FFFFFF; /* ---- Avatares ---- Iniciales del usuario: azul de texto del CRM -> morado del CRM. Antes cian -> #A855F7, un violeta que no esta en la paleta del CRM; el blanco encima da ahora 5,75:1 y 4,97:1 en las dos paradas (antes 3,96 en la violeta). El halo de EVOL, en el azul del CRM y mas contenido: un resplandor cian pensado para fondo oscuro ensucia el blanco. */ --iniciales-bg:linear-gradient(135deg, #1565C0, #635BEB); --avatar-evol-brillo:drop-shadow(0 0 16px rgba(33,150,243,.25)); /* ---- Iconos: en el azul del CRM, no en el gris del texto ---- En el CRM los iconos llevan el color de la marca (azul sobre azul suave, o blanco sobre un circulo azul). Aqui todos los iconos son SVG con stroke="currentColor", asi que basta con darles color. */ --icono-color:#1976D2; /* Iconos de las tarjetas KPI de Inicio: el recuadro pasa de un tinte al 20% a su color solido, con el glifo en blanco. El color de cada tarjeta se alinea con la paleta del CRM: contratos en su azul y proyectos en su morado; empresas y autorizados conservan verde y ambar, un punto mas profundos para que el blanco se lea encima. */ --kpi-icono-mezcla:100%; --kpi-icono-borde-mezcla:100%; --kpi-icono-glifo:#FFFFFF; --kpi-color-contratos:#1976D2; --kpi-color-proyectos:#635BEB; --kpi-color-empresas:#0E9F6E; --kpi-color-autorizados:#D97706; /* Botones secundarios: texto en el azul del CRM (5,75:1 sobre blanco) sobre su borde azul de siempre, como los botones de contorno del CRM. */ --boton-secundario-texto:#1565C0; /* ---- Campos de formulario ---- */ --campo-bg:#FFFFFF; --campo-borde:#C5D5EC; --campo-foco-halo:0 0 0 3px rgba(33,150,243,.18); --campo-opaco-bg:#FFFFFF; /* ---- Modales: el velo, en azul marino translucido ---- */ --velo-modal:rgba(10,33,84,.45); --velo-modal-nativo:rgba(10,33,84,.30); /* ---- Barras de desplazamiento ---- */ --scroll-via:#E4ECF8; --scroll-pulgar:#9DB2D8; --scroll-pulgar-hover:#635BEB; /* ---- Sidebar: el azul marino del CRM ---- */ --sidebar-bg:linear-gradient(180deg, #0A2154 0%, #0D2A66 100%); --sidebar-borde:rgba(255,255,255,.08); --sidebar-hover:rgba(33,150,243,.22); /* El boton de salida lleva el mismo tinte rojo de antes, recompuesto sobre el azul del CRM (antes: sobre #081633). */ --sidebar-salida-bg:#222A58; --sidebar-salida-hover:#3B325B; --sidebar-asistente-bg:linear-gradient(135deg, rgba(33,150,243,.16), rgba(99,91,235,.20)); /* Iconos del menu en azul claro, como los acentos azules del sidebar del CRM (8,8:1 sobre el marino). El del enlace activo sigue en blanco. */ --sidebar-icono:#90CAF9; /* ---- Campos: texto y contorno de foco (los usan los portales, que no cargan components.css y pintan sus propios campos) ---- */ --campo-texto:#1F2937; --campo-foco-contorno:rgba(33,150,243,.55); /* ---- Portales externos (firma e invitacion) ---- No tienen sidebar: la franja de marca es la cabecera, en el mismo azul marino del sidebar del CRM, y ahi el logo claro de siempre se sigue leyendo sin cambiar de imagen. Debajo, el fondo plano del CRM y el recuadro blanco. */ --portal-fondo:#EEF3FA; --portal-cabecera-bg:#0A2154; --portal-cabecera-borde:rgba(255,255,255,.08); /* Azul claro sobre el marino: 8,6:1. */ --portal-sello-texto:#93C5FD; --portal-sello-borde:rgba(147,197,253,.45); --portal-panel-bg:#FFFFFF; --portal-panel-borde:#D6E2F3; --portal-panel-sombra:0 12px 32px rgba(10,33,84,.10); /* Paso activo: el azul suave del CRM con texto marino (12,35:1), no el degradado con texto blanco, que a .8rem quedaria en el limite (4,6:1). */ --portal-paso-activo-bg:#D9E7FB; --portal-paso-activo-texto:#0A2154; --portal-paso-activo-borde:rgba(33,150,243,.55); --portal-icono-doc-bg:linear-gradient(135deg, #1976D2, #635BEB); --portal-icono-ok-bg:linear-gradient(135deg, rgba(14,122,77,.14), rgba(33,150,243,.12)); --portal-icono-alerta-bg:linear-gradient(135deg, rgba(220,53,85,.12), rgba(245,158,11,.14)); --portal-boton-bg:linear-gradient(135deg, #1976D2, #635BEB); --portal-boton-sombra:0 8px 20px rgba(33,150,243,.25); --portal-boton-sombra-hover:0 12px 28px rgba(99,91,235,.32); --portal-boton-sec-bg:#FFFFFF; --portal-boton-sec-borde-hover:rgba(33,150,243,.55); --portal-boton-texto-hover:#0A2154; } /* RECUADROS EN GRIS AZULADO -- solo el panel (Kely, 2026-09-13) -------------------------------------------------------------------------- En blanco sobre el fondo #EEF3FA los recuadros se separaban 1,11:1 y se veian palidos. Pasan a un gris azulado mas marcado que el fondo (1,18:1, y ademas con tinte), y el fondo claro se conserva. Solo :root:has(.sidebar): los portales de firma e invitacion siguen con su recuadro blanco. Por dentro, las piezas que ya iban en --velo (#F5F8FD) y --bg-secondary (#EEF3FA) quedan ahora mas CLARAS que su recuadro y se leen como fichas encima de el. Los campos de formulario siguen en blanco (--campo-bg). Sobre #D8E1EE bajaban de AA (4,5:1) el texto tenue (#5B6B85 daba 4,10), el azul de enlace (#1565C0, 4,36) y el texto de las insignias de estado sobre su propio tinte (hasta 3,93 la de informacion). Cada tono se oscurece lo MINIMO para dar >= 4,6:1 sobre el recuadro, el fondo, las fichas #F5F8FD, el blanco y su insignia: misma familia, un 2-11% mas oscuro. Las lineas bajan un punto para seguir marcando dentro del recuadro; las de antes eran casi de su mismo color. */ :root:has(.sidebar){ --recuadro:#D8E1EE; --bg-card:#D8E1EE; --glass-bg:#D8E1EE; --text-muted:#54627A; --texto-tenue:#54627A; --texto-mas-tenue:#54627A; --secondary-blue:#135AAB; --crm-azul-texto:#135AAB; --info:#135AAB; --boton-secundario-texto:#135AAB; --success:#0A6741; --estado-ok-texto:#0A6741; --warning:#874F00; --danger:#AB213F; --neutral:#4B5972; --linea:#C3D0E3; --linea-suave:#CBD6E7; --linea-fuerte:#B3C2D9; --border:#C3D0E3; --glass-border:#C3D0E3; --crm-borde:#C3D0E3; } /* El sidebar sigue siendo OSCURO: dentro de el, el texto vuelve a sus valores del tema oscuro (los mismos de :root). */ :root:has(.sidebar) .sidebar{ --text-primary:#FFFFFF; --text-secondary:#D8E6FF; --text-muted:#97A6D8; --glass-border-active:rgba(33,150,243,.35); color:var(--text-primary); } /* EVOL (el asistente flotante) conserva su propio panel oscuro. Se le devuelven los valores oscuros de los tokens que lee; --border y --primary vuelven a "sin definir" para que sus reglas usen su reserva de siempre. */ :root:has(.sidebar) .evol-fab, :root:has(.sidebar) .evol-panel{ --text-primary:#FFFFFF; --text-secondary:#D8E6FF; --text-muted:#97A6D8; --secondary-blue:#22C8FF; --success:#00D47E; --warning:#FFC857; --danger:#FF4D6D; --info:#22C8FF; --bg-secondary:#09163A; /* La tarjeta de EVOL al pasar el raton lee --bg-card: sin esto heredaba el recuadro claro del panel debajo de su texto blanco. */ --bg-card:#0D1E4E; --glass-border-active:rgba(34,200,255,.28); --evol-gradiente:linear-gradient(90deg, #00b7ff, #4f7cff, #8d3cff); --evol-gradiente-diag:linear-gradient(135deg, #00b7ff, #4f7cff, #8d3cff); --border:initial; --primary:initial; color:var(--text-primary); }