/* ========================================================================== EonLifeX Design System — Tokens (Brand OS v2.0) -------------------------------------------------------------------------- Fuente: design_handoff_eonlifex_design_system/README.md + brand.tokens.json PRINCIPIO RECTOR: "cambia el color, no la identidad". Los portales comparten forma, radio, sombra, tipografia y ritmo de animacion; solo se mueve el matiz del acento. ADITIVO Y OPT-IN ---------------- 1. Los tokens de marca viven en :root con prefijo --eds-. Ese prefijo no existe en ninguna otra hoja del proyecto, asi que cargar este archivo NO cambia el aspecto de nada. 2. Los nombres cortos que consumen los componentes (--accent, --ink, --surface, --r...) solo se definen dentro de .eon-ds. Una pagina sin esa clase se ve exactamente igual que antes. 3. No se redefine ninguna variable legacy (--dark-blue, --brand-blue, --bm-*, --hc-*, --mk-*, --finance-*). Siguen mandando en su propio CSS. USO --- Portales validos en data-portal: publica, oficina, academia, cedis, staff, super-admin, capital-humano, marketing, finanzas, travel. ========================================================================== */ /* ========================================================================== 1 · CONSTANTES DE MARCA Fijas en los 10 portales. Nunca se recolorean. ========================================================================== */ :root { /* --- Paleta oficial --- */ --eds-blue: #2e2c72; /* Azul Cosmico · titulos y encabezados */ --eds-blue-lt: #4a47a3; /* Azul Claro · hover, acento secundario*/ --eds-green: #00965e; /* Verde EonLifeX · CTA primario, exito */ --eds-green-lt: #00c277; /* Verde Claro · activos, highlights */ --eds-aqua: #00c6ff; /* Aqua · gradientes decorativos */ --eds-gold: #d7b46a; /* Gold · premium, exclusivo */ --eds-white: #ffffff; --eds-grey-text: #4d4d4d; /* Gris Texto · parrafos, secundarios */ --eds-grey-bg: #f4f7fc; /* Gris Fondo · fondos, secciones */ --eds-error: #dc3545; /* Rojo Error */ /* Estados derivados (no estan en el manual, se necesitan para feedback) */ --eds-warning: #d7b46a; --eds-info: #00c6ff; --eds-success: #00965e; /* --- Gradientes oficiales --- */ --eds-grad-principal: linear-gradient(135deg, #2e2c72, #00965e); --eds-grad-dashboard: linear-gradient(135deg, #00694a 0%, #2e2c72 60%, #1a1852 100%); --eds-grad-cristalino: linear-gradient(135deg, #00c6ff, #00c277 55%, #d7b46a); /* --- Tipografia --- */ --eds-font-body: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --eds-font-display: 'MuseoModerno', 'Montserrat', system-ui, sans-serif; --eds-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Escala tipografica. El hero y el h1 usan clamp para sostener movil. */ --eds-fs-hero: clamp(44px, 6.2vw, 92px); --eds-fs-h1: clamp(30px, 3.4vw, 40px); --eds-fs-h2: clamp(23px, 2.2vw, 28px); --eds-fs-h3: 20px; --eds-fs-body: 16px; --eds-fs-caption: 13px; --eds-fs-mono: 14px; --eds-fs-micro: 11px; --eds-lh-hero: 0.98; --eds-lh-title: 1.15; --eds-lh-body: 1.65; --eds-ls-hero: -0.035em; --eds-ls-eyebrow: 0.16em; /* --- Forma y espacio --- */ /* Invariante del manual: un solo radio para panel, tarjeta, boton e input. */ --eds-r: 33px; --eds-r-pill: 999px; --eds-space: 8px; /* rejilla base: todo es multiplo de 8 */ --eds-space-1: 8px; --eds-space-2: 16px; --eds-space-3: 24px; --eds-space-4: 32px; --eds-space-5: 40px; --eds-space-6: 48px; --eds-space-8: 64px; --eds-space-10: 80px; /* Alturas de control */ --eds-h-lg: 52px; --eds-h-md: 44px; --eds-h-sm: 34px; --eds-h-row: 64px; /* fila minima de lista o tabla */ /* --- Movimiento --- */ --eds-dur-1: 180ms; /* hover, focus, color */ --eds-dur-2: 320ms; /* paneles y acordeones */ --eds-dur-3: 800ms; /* barras, medidores, KPIs */ --eds-dur-hoja: 1100ms; /* trazo, exito y transicion */ --eds-ease-1: cubic-bezier(0.4, 0, 0.2, 1); --eds-ease-2: cubic-bezier(0.22, 1, 0.36, 1); --eds-ease-hoja: cubic-bezier(0.65, 0, 0.35, 1); --eds-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* --- La hojita --- */ /* Longitud real del contorno vectorial: 88 nodos en viewBox 0 0 200 200. Este numero es lo que permite animar el trazo y usarlo de medidor. */ --eds-hoja-length: 1140; /* --- Capas --- */ --eds-z-sticky: 20; --eds-z-drawer: 900; --eds-z-modal: 1000; --eds-z-toast: 1100; --eds-z-tooltip: 1200; } /* ========================================================================== 2 · ALCANCE DEL SISTEMA Todo lo de aqui abajo solo existe dentro de .eon-ds. ========================================================================== */ .eon-ds { /* Alias cortos que consumen los componentes */ --brand-blue: var(--eds-blue); --brand-blue-lt: var(--eds-blue-lt); --brand-green: var(--eds-green); --brand-green-lt: var(--eds-green-lt); --brand-aqua: var(--eds-aqua); --brand-gold: var(--eds-gold); --brand-error: var(--eds-error); --r: var(--eds-r); --r-pill: var(--eds-r-pill); --space: var(--eds-space); --dur-1: var(--eds-dur-1); --dur-2: var(--eds-dur-2); --dur-3: var(--eds-dur-3); --dur-hoja: var(--eds-dur-hoja); --ease-1: var(--eds-ease-1); --ease-2: var(--eds-ease-2); --ease-bounce: var(--eds-ease-bounce); --h-lg: var(--eds-h-lg); --h-md: var(--eds-h-md); --h-sm: var(--eds-h-sm); /* Acento por defecto: verde EonLifeX. Cada portal lo pisa mas abajo. */ --accent: var(--eds-green); --accent-lt: var(--eds-green-lt); --grad-portal: linear-gradient(135deg, var(--accent), var(--accent-lt)); } /* ========================================================================== 3 · TEMA -------------------------------------------------------------------------- DESVIACION DELIBERADA DEL PROTOTIPO: alli el modo oscuro vive en :root y el claro en [data-theme="light"]. Aqui se invierte. Motivo: varias bases del repo (eon_staff_base.html entre otras) no emiten el atributo data-theme. Con el orden del prototipo esas paginas caerian en oscuro sin pedirlo. Con el orden de abajo, la ausencia del atributo da claro, que es lo que se ve hoy. El resultado visual es identico donde el atributo si esta presente. ========================================================================== */ .eon-ds { --surface: #f4f7fc; --surface-2: #ffffff; --panel: rgba(255, 255, 255, 0.78); --panel-2: #ffffff; --line: rgba(46, 44, 114, 0.10); --line-2: rgba(46, 44, 114, 0.18); --ink: #1b1a45; --ink-2: #4d4d4d; --ink-3: rgba(27, 26, 69, 0.42); --shadow: 0 20px 52px -18px rgba(46, 44, 114, 0.22); --glow: 0 14px 34px -12px color-mix(in oklab, var(--accent) 62%, transparent); } [data-theme="dark"] .eon-ds, .eon-ds[data-theme="dark"] { --surface: #05061a; --surface-2: #0c0e2a; --panel: rgba(255, 255, 255, 0.045); --panel-2: rgba(255, 255, 255, 0.075); --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.18); --ink: #f0f2ff; --ink-2: rgba(240, 242, 255, 0.66); --ink-3: rgba(240, 242, 255, 0.40); --shadow: 0 24px 64px rgba(0, 0, 0, 0.45); --glow: 0 12px 40px -10px color-mix(in oklab, var(--accent) 70%, transparent); } /* Respaldo para navegadores sin color-mix (Safari < 16.2). Sin esto la sombra de acento se cae entera y el boton primario pierde relieve. */ @supports not (color: color-mix(in oklab, red 50%, blue)) { .eon-ds { --glow: 0 14px 34px -12px rgba(46, 44, 114, 0.38); } } /* ========================================================================== 4 · ACENTO POR PORTAL -------------------------------------------------------------------------- Estos son los colores REALES que cada panel usa hoy, leidos de su propia hoja. NO son los tonos oklch del manual: la instruccion del proyecto es conservar el color al que cada equipo ya esta acostumbrado. Se anota el hue del manual por si algun panel decide migrar despues. ========================================================================== */ /* Publica · verde de marca (manual: hue 162) */ .eon-ds[data-portal="publica"] { --accent: #00965e; --accent-lt: #00c277; } /* Oficina Virtual · verde accesible de office/base.css --bright-green OJO: #007b55 no es el verde oficial #00965e. Es una variante mas oscura que el panel ya usa. Se conserva a proposito. (manual: hue 162) */ .eon-ds[data-portal="oficina"] { --accent: #007b55; --accent-lt: #00a873; } /* Academia (manual: hue 196) */ .eon-ds[data-portal="academia"] { --accent: #0e7490; --accent-lt: #22b8cf; } /* CEDIS · Logistica (manual: hue 245) */ .eon-ds[data-portal="cedis"] { --accent: #2e2c72; --accent-lt: #4a47a3; } /* Staff Nexus · azul cosmico de staff/css/tokens.css --c-primary (manual: hue 285) */ .eon-ds[data-portal="staff"] { --accent: #2e2c72; --accent-lt: #4a47a3; } /* Super Admin · super_admin.css declara --accent: #00965e en :root. Ojo: el sistema define --accent sobre el , y eso le gana al :root de esa hoja. Si aqui se pusiera otro color, Super Admin cambiaria de acento sin que nadie lo pidiera. Por eso se repite su verde exacto. (manual: hue 310) */ .eon-ds[data-portal="super-admin"] { --accent: #00965e; --accent-lt: #00c277; } /* Capital Humano · capital_humano.css --hc-primary (manual: hue 340) */ .eon-ds[data-portal="capital-humano"] { --accent: #2e2c72; --accent-lt: #4a47a3; } /* Marketing Hub · marketing.css --mk-accent (manual: hue 25) */ .eon-ds[data-portal="marketing"] { --accent: #f97316; --accent-lt: #fb923c; } /* Finanzas · finance.css --finance-primary El manual propone hue 95 (verde oliva); el panel usa azul petroleo desde siempre. Gana el panel. (manual: hue 95) */ .eon-ds[data-portal="finanzas"] { --accent: #146c94; --accent-lt: #2596be; } /* Travel Incentives · dorado de travel_agency/base.html */ .eon-ds[data-portal="travel"] { --accent: #a97831; --accent-lt: #d7b46a; } /* ========================================================================== 5 · BASE TIPOGRAFICA Solo dentro de .eon-ds y sin tocar h1..h6 globales, para no pelearse con Bootstrap ni con las hojas legacy de cada panel. ========================================================================== */ .eon-ds .eds-display, .eon-ds .eds-hero, .eon-ds .eds-h1 { font-family: var(--eds-font-display); font-weight: 700; line-height: var(--eds-lh-title); color: var(--ink); margin: 0; } .eon-ds .eds-hero { font-size: var(--eds-fs-hero); line-height: var(--eds-lh-hero); letter-spacing: var(--eds-ls-hero); } .eon-ds .eds-h1 { font-size: var(--eds-fs-h1); letter-spacing: -0.02em; } .eon-ds .eds-h2 { font-family: var(--eds-font-body); font-size: var(--eds-fs-h2); font-weight: 700; line-height: var(--eds-lh-title); color: var(--ink); margin: 0; } .eon-ds .eds-h3 { font-family: var(--eds-font-body); font-size: var(--eds-fs-h3); font-weight: 600; line-height: 1.3; color: var(--ink); margin: 0; } .eon-ds .eds-body { font-family: var(--eds-font-body); font-size: var(--eds-fs-body); font-weight: 400; line-height: var(--eds-lh-body); color: var(--ink-2); text-wrap: pretty; } .eon-ds .eds-caption { font-family: var(--eds-font-body); font-size: var(--eds-fs-caption); font-weight: 500; line-height: 1.45; color: var(--ink-2); } /* Datos tecnicos: IDs de afiliado, folios, montos. Siempre tabular para que las columnas de numeros no bailen entre filas. */ .eon-ds .eds-mono { font-family: var(--eds-font-mono); font-size: var(--eds-fs-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; } /* Etiqueta en versalitas, el patron de eyebrow del manual */ .eon-ds .eds-eyebrow { font-family: var(--eds-font-body); font-size: var(--eds-fs-micro); font-weight: 700; letter-spacing: var(--eds-ls-eyebrow); text-transform: uppercase; color: var(--accent-lt); } /* Texto con el degradado de marca recortado. Necesita el fallback de color por si background-clip:text no aplica, o el texto queda invisible. */ .eon-ds .eds-text-grad { color: var(--accent); background: linear-gradient(100deg, var(--eds-blue-lt), var(--accent) 50%, var(--accent-lt)); -webkit-background-clip: text; background-clip: text; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .eon-ds .eds-text-grad { color: transparent; -webkit-text-fill-color: transparent; } } /* ========================================================================== 6 · UTILIDADES DE SUPERFICIE ========================================================================== */ .eon-ds .eds-surface { background: var(--surface); color: var(--ink); } .eon-ds .eds-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); } .eon-ds .eds-grad-principal { background: var(--eds-grad-principal); } .eon-ds .eds-grad-dashboard { background: var(--eds-grad-dashboard); } .eon-ds .eds-grad-cristalino { background: var(--eds-grad-cristalino); } .eon-ds .eds-grad-portal { background: var(--grad-portal); } /* Anillo de foco unico del sistema. Se declara aqui y no en cada componente para que ningun control del DS quede sin indicador de teclado. Se limita a elementos con clase eon-*: un `.eon-ds :focus-visible` global habria repintado el foco de TODOS los controles legacy de la pagina en cuanto el body adopta la clase, que es justo lo que no queremos. */ .eon-ds [class*="eon-"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: inherit; }