/* ============================================================ GeoSales - Tokens semánticos del tema (los tres modos) ------------------------------------------------------------ Completa lo que gs-theme.css no define en todos los temas: semáforo, texto sobre acento, foco, superficies auxiliares, código y la paleta de gráficos. Se carga DESPUÉS de gs-theme.css (layouts main.php y login.php; gs-theme.js lo inyecta también en las ventanas flotantes). - Claro: :root (sin clase). Corporativo: html/body.gs-theme-corporativo. Oscuro: html/body.gs-theme-dark. - Va en un fichero aparte para no tocar las variantes por cliente de gs-theme (gs-theme_arcor.css, _softys, _geosales, _2): los tokens semánticos son comunes a todas. - La marca de cada instancia NO va aquí: va en assets/stylesheets/marcas/gs-marca_.css (solo variables), que se carga DESPUÉS de este fichero y puede redefinir los tokens del corporativo que dependen de la marca (--gs-on-accent, --gs-chart-2, --gs-chart-grid). - Los módulos NO usan estos tokens sueltos: los aliasan en tokens propios (---*) con respaldo. Norma: CONVENCIONES.md §6. - Los gráficos leen la paleta con GSTheme.chartPalette() y se recolorean con GSTheme.onChange() (assets/javascripts/gs-theme.js). ============================================================ */ /* --- Claro (por defecto) --- */ :root { /* Semáforo: tono base (barras, iconos, bordes, texto sobre superficie) */ --gs-success: #2c7d59; --gs-warning: #b45309; --gs-danger: #b83c3c; --gs-info: #0e7490; /* Semáforo: fondo suave, borde y texto sobre ese fondo */ --gs-success-soft: #e7f4df; --gs-success-border: #cfe7bf; --gs-success-text: #376d1d; --gs-warning-soft: #fff3df; --gs-warning-border: #f4d6a8; --gs-warning-text: #815609; --gs-danger-soft: #fbe6e4; --gs-danger-border: #f1c8c3; --gs-danger-text: #963228; --gs-info-soft: #eef6fb; --gs-info-border: #cde6f1; --gs-info-text: #1d6f90; /* Acción principal y texto sobre acento */ --gs-primary: var(--geosales-blue, #1c458a); --gs-primary-border: var(--geosales-blue, #1c458a); /* Relleno del botón de acción principal con --gs-on-primary encima (≥ 4,5:1 en los tres temas). En claro y corporativo coincide con --gs-primary; en oscuro es un azul más profundo, porque --gs-primary también se usa como color de texto y enlace sobre la superficie oscura y un mismo tono no puede servir para las dos cosas. */ --gs-primary-fill: var(--gs-primary); --gs-on-primary: #ffffff; --gs-on-accent: #ffffff; /* Texto atenuado, foco, hover y superficies auxiliares */ --gs-text-muted: var(--gs-muted, #6c757d); --gs-focus: var(--geosales-blue-focus, rgba(28, 69, 138, 0.22)); --gs-hover: var(--geosales-blue-soft, #e8eff9); --gs-surface-muted: #f1f5f9; --gs-code-bg: #f6f8fa; --gs-code-text: #24292f; /* Paleta categórica de gráficos (orden estable: serie 1, 2, ...) */ --gs-chart-1: var(--geosales-blue, #1c458a); --gs-chart-2: #168fb9; --gs-chart-3: #7db22b; --gs-chart-4: #d17c22; --gs-chart-5: #8e6bb3; --gs-chart-6: #b83c3c; --gs-chart-7: #2c7d59; --gs-chart-8: #8a94a6; /* Ejes, rejilla y fondo del área de gráfico */ --gs-chart-grid: #e5e7eb; --gs-chart-axis: #6b7280; --gs-chart-text: #374151; --gs-chart-bg: transparent; /* Severidad en gráficos (barras, tramos, leyendas): crítica, advertencia y pendiente anterior. Tonos propios, no los del semáforo de texto: validados como serie (luminosidad, croma, separación con daltonismo ≥ 8 ΔE y ≥ 3:1 sobre la superficie) el 2026-10-19 sobre #ffffff, #eef8ff y las superficies de las marcas. El corporativo hereda estos. */ --gs-viz-crit: #b42d3a; --gs-viz-warn: #b8770a; --gs-viz-pend: #2f6fd0; } /* --- Corporativo (claro con la marca de la instancia; por defecto navy/cian) --- */ html.gs-theme-corporativo, body.gs-theme-corporativo { --gs-primary: var(--gs-brand-700); --gs-primary-border: var(--gs-brand-700); --gs-primary-fill: var(--gs-primary); /* El acento de la marca por defecto es cian claro: el texto encima va en el tono más oscuro de la marca, no en blanco. Una marca de acento oscuro (p. ej. el morado de Mondelez) lo redefine a #ffffff. */ --gs-on-accent: var(--gs-brand-900); --gs-surface-muted: var(--gs-surface-2); --gs-chart-1: var(--gs-brand-700); --gs-chart-2: var(--gs-brand-600); /* Respaldo para las variantes de gs-theme que aún no declaran los canales RGB de la marca */ --gs-chart-grid: rgba(var(--gs-brand-ink-rgb, 0, 26, 102), 0.10); --gs-chart-axis: rgba(15, 23, 42, 0.62); --gs-chart-text: var(--gs-text); } /* --- Oscuro --- */ html.gs-theme-dark, body.gs-theme-dark { --gs-success: #22c55e; --gs-warning: #f59e0b; --gs-danger: #ef4444; --gs-info: #38bdf8; --gs-success-soft: rgba(34, 197, 94, 0.16); --gs-success-border: rgba(34, 197, 94, 0.38); --gs-success-text: #86efac; --gs-warning-soft: rgba(245, 158, 11, 0.18); --gs-warning-border: rgba(245, 158, 11, 0.40); --gs-warning-text: #fcd34d; --gs-danger-soft: rgba(239, 68, 68, 0.18); --gs-danger-border: rgba(239, 68, 68, 0.42); --gs-danger-text: #fca5a5; --gs-info-soft: rgba(56, 189, 248, 0.14); --gs-info-border: rgba(56, 189, 248, 0.36); --gs-info-text: #7dd3fc; --gs-primary: var(--gs-accent); --gs-primary-border: var(--gs-accent); /* 2026-10-19: relleno de la acción principal con texto blanco. El acento (#3b82f6) da 3,7:1 con blanco; este azul da 5,2:1. --gs-primary sigue en el acento porque GsAyuda y otros lo usan como texto sobre la superficie oscura (con #2563eb bajaba a 3,45:1, monitor/Ayuda/tests/ayuda_modulo.cjs). */ --gs-primary-fill: #2563eb; --gs-on-primary: #ffffff; --gs-on-accent: #ffffff; --gs-surface-muted: rgba(255, 255, 255, 0.04); --gs-code-bg: #0b1220; --gs-code-text: #e5e7eb; --gs-chart-1: #60a5fa; --gs-chart-2: #38bdf8; --gs-chart-3: #a3d977; --gs-chart-4: #f3b05b; --gs-chart-5: #b9a3d6; --gs-chart-6: #f08a8a; --gs-chart-7: #4fbf8f; --gs-chart-8: #9ca3af; --gs-chart-grid: rgba(255, 255, 255, 0.10); --gs-chart-axis: #9ca3af; --gs-chart-text: var(--gs-text); /* Severidad en gráficos sobre #0f172a (validados el 2026-10-19 como en claro). */ --gs-viz-crit: #d63b47; --gs-viz-warn: #b98a10; --gs-viz-pend: #4a86e0; }