/* * ============================================================================ * DEGAS — Design tokens (fuente única de la paleta, theme-aware) * ============================================================================ * Esta es la ÚNICA fuente de verdad para colores, tipografía, espaciado, * radios, sombras, foco y z-index de la app Blazor. Reglas: * * 1. Los componentes y páginas SIEMPRE usan estos tokens — nunca hex * hardcodeados sueltos (ej. `color: var(--degas-text)`, no `#1f2329`). * 2. NO escribir fallbacks en los var() de CSS propio * (`var(--degas-text)` y no `var(--degas-text, #1f2329)`): este archivo * carga globalmente antes de todo uso, y los fallbacks divergen de la * paleta real con el tiempo (deuda detectada y limpiada en DEGAS-593). * 3. Los overrides de Telerik (telerik-overrides.css) mapean las variables * --kendo-* a estos tokens — un cambio de paleta se hace en un solo lugar. * 4. Los estados (ok/warn/err/info/pending) tienen pares fg + bg para * badges/chips consistentes en grids, notificaciones y procesos. * 5. TEMA OSCURO: el bloque `:root[data-theme="dark"]` redefine los tokens * semánticos. El switch es DEGAS-538: (header) setea * el atributo `data-theme` en via window.degasTheme (script * inline de App.razor, que también aplica la preferencia persistida en * localStorage `degas.theme` ANTES del primer paint — sin flash). Los * valores están validados WCAG AA (DesignTokensContrastTests, Tests.Unit). * 6. Este archivo contiene SOLO tokens. El CSS del shell (header, login, * dashboard, favoritos) vive en degas-app-shell.css. * * Contraste: todos los pares fg/bg documentados acá cumplen WCAG 2.2 AA * (4.5:1 texto normal, 3:1 componentes de UI) en AMBOS temas. Excepciones * deliberadas: --degas-text-subtle es el tier "deshabilitado/decorativo" * (exento por definición en WCAG — NO usarlo para texto informativo; para * hints/labels usar --degas-text-muted). --degas-border es decorativo * (separadores); los bordes de CONTROLES usan --degas-border-input (≥3:1). * * Breakpoints (las media queries no aceptan var(); valores canónicos que * DEGAS-537 extenderá — hoy el único en uso es 560px): * 560px — colapso de form-grid a 1 columna / wrap de filter bar * 960px — reservado (tablet) * 1280px — reservado (desktop ancho) * ============================================================================ */ :root { /* Chrome nativo del browser (scrollbars, calendario del date input, etc.) acompaña al tema. El bloque dark lo redeclara. */ color-scheme: light; /* ---- Marca / primario ------------------------------------------------ */ --degas-primary: #1f5bb4; --degas-primary-hover: #174a96; --degas-primary-active: #143e7d; --degas-primary-soft: #e8f0fb; /* fondo tenue para chips/hover primario */ --degas-primary-soft-hover: #dbe7f8; --degas-primary-soft-active: #cddcf3; --degas-on-primary: #ffffff; /* texto sobre CUALQUIER relleno sólido de marca/estado (botones primarios, success, danger…). En claro es blanco; en oscuro los rellenos son claros y el texto pasa a casi-negro. */ --degas-on-emphasis: #ffffff; /* ---- Superficies / neutros ------------------------------------------ */ /* Rediseño "Consola" (oct-2026): el contenido es blanco plano (muted = surface), sunken es apenas perceptible (encabezados de grilla, filas de totales) y el hover de filas / botones ghost tiene su propio token. */ --degas-surface: #ffffff; --degas-surface-muted: #ffffff; --degas-surface-sunken: #fafbfc; /* headers de grid, zonas hundidas */ --degas-surface-hover: #f1f3f6; /* hover de filas y de botones ghost */ --degas-border: #e4e7eb; /* decorativo: separadores, hairlines */ --degas-border-strong: #cdd2d9; --degas-border-input: #7b8592; /* bordes de CONTROLES — ≥3:1 (1.4.11) también sobre sunken/hover */ --degas-text: #1f2329; --degas-text-muted: #5b6573; --degas-text-subtle: #8a93a0; /* SOLO deshabilitado/decorativo */ /* ---- Sidebar global (OSCURO en ambos temas — rediseño Consola) -------- */ /* El único chrome de la app: marca, buscador, navegación y usuario. Es oscuro también en tema claro, por eso tiene su propia familia de tokens en vez de reusar las superficies. Pares validados en DesignTokensContrastTests (texto 4.5:1, bordes de control 3:1). */ --degas-sidebar-bg: #15181d; --degas-sidebar-border: #262a31; --degas-sidebar-text: #b4bcc8; --degas-sidebar-text-muted: #7d8694; /* rótulos de grupo / de módulo */ --degas-sidebar-hover-bg: #1f2329; --degas-sidebar-active-bg: #262a31; --degas-sidebar-active-text: #ffffff; --degas-sidebar-active-icon: #7aa9e8; --degas-sidebar-input-bg: #1f2329; /* buscador */ --degas-sidebar-input-border: #6b7482; /* ≥3:1 sobre input-bg y sobre bg */ --degas-sidebar-kbd-bg: #262a31; --degas-sidebar-chip-bg: #2a3a52; /* badge del tenant, avatar */ --degas-sidebar-chip-fg: #9fc3f5; /* ---- Colores de estado (fg / bg) ------------------------------------- */ --degas-success: #1e7a35; --degas-success-hover: #1a6b2e; --degas-success-active: #175d29; --degas-success-bg: #e6f4ea; --degas-warning: #92510a; --degas-warning-bg: #fef3c7; --degas-danger: #b32d2e; --degas-danger-hover: #9e2829; --degas-danger-active: #8a2324; --degas-danger-bg: #fdecea; --degas-info: #3340a7; --degas-info-bg: #e0e7ff; --degas-pending: #5b6573; --degas-pending-bg: #f1f2f4; /* highlight de fila (proc-row-highlight, llegadas desde NotificationCenter) */ --degas-highlight: #fff7d6; --degas-highlight-strong: #ffe89e; /* fondo de ítem no leído (NotificationCenter) */ --degas-unread-bg: #f6f9ff; /* acento "favorito" (estrella) — decorativo, exento de contraste */ --degas-accent-star: #f5a623; --degas-accent-star-soft: rgba(245, 166, 35, 0.12); /* ---- Gráficos: paleta categórica de series (DEGAS-533) ---------------- * * Se asignan POR ORDEN DE DECLARACIÓN de la serie, nunca cicladas: el * color sigue a la entidad, no a su posición en un ranking (filtrar una * serie no debe repintar a las sobrevivientes). Tope 8 — una novena serie * no genera un hue nuevo: se agrupa en "Otros" o se separa en dos gráficos. * * El ORDEN es el mecanismo de seguridad para daltonismo, no cosmética. * Validado con el validador del skill `dataviz` (OKLab ΔE) contra * --degas-surface de cada tema: los 8 pasan el gate ADYACENTE (CVD ΔE ≥ 8, * visión normal ≥ 15, contraste ≥ 3:1) y los 3 PRIMEROS pasan además * all-pairs. Medido el 08/09/2026 con --pairs adjacent: * claro peor par chart-4↔chart-3 ΔE 8.4 protan / 17.0 normal * oscuro peor par chart-4↔chart-3 ΔE 8.4 protan / 15.4 normal * * ALL-PAIRS CON LOS 8: FALLA, igual que fallaba con 6. Medido el * 08/09/2026 con --pairs all: * claro chart-8↔chart-2 ΔE 1.7 protan; chart-6↔chart-1 ΔE 8.7 NORMAL * oscuro chart-5↔chart-3 ΔE 1.6 deutan; chart-7↔chart-1 ΔE 9.5 NORMAL * No alcanza con elegir otro subconjunto de 4 — fallan 1-2-3-5, 1-2-3-6, * 1-3-4-5, 2-3-4-6 y 1-2-4-5. * (OJO al editar este comentario: NADA de llaves, ni en ejemplos ni en * regexes. El parser de DesignTokenCss toma el bloque :root con una * clase negada de llave de cierre, asi que una sola llave de cierre * dentro de un comentario le corta el bloque: los tokens de abajo * dejan de verse y 13 tests de paleta se caen sin razon aparente.) * DECISIÓN 08/09/2026 (DEGAS-930): el gráfico "según selección" pasa a * ofrecer los 8 slots, por PARIDAD con el chart del WinForms, aceptando * que con 4+ series simultáneas el color es un canal AUXILIAR: la * identificación la dan la grilla equivalente que la pantalla debe mostrar * al lado (regla de ui-ux-standards § 5.10) y el tooltip, que nombra cada * serie. Antes se topeaba en 3 para no exceder lo validado all-pairs. * Peor contraste: claro chart-2 4.03:1, oscuro chart-5 3.86:1. * * Los slots 7 y 8 se eligieron MIDIENDO, no a ojo: son las dos únicas * zonas de hue libres (cian entre azul y aqua, oliva entre aqua y ámbar) y * se probaron 14 combinaciones. La elegida NO empeora los peores pares que * ya tenían los 6: en claro el piso de visión normal queda idéntico (8.7, * el mismo par chart-6↔chart-1) y el peor CVD pasa de 1.9 a 1.7; en oscuro * el peor CVD queda igual (1.6) y el de visión normal va de 9.8 a 9.5. Los * descartes: marrón en oscuro se funde con el naranja (normal 6.9) y un * gris pizarra no pasa el piso de croma (lee como banda). * * El slot 6 es VIOLETA y no verde a propósito: un verde #008300 chocaba * con el aqua del slot 3 (ΔE 9.5 en visión NORMAL) y con el ámbar del * slot 4 (ΔE 0.4 en protanopía) — medido, no estimado. * * Gate en CI: DegasChartPaletteTests (Tests.Unit). Para re-validar con * simulación CVD completa: * node scripts/validate_palette.js "" --mode light --surface "#ffffff" * node scripts/validate_palette.js "" --mode dark --surface "#22262b" * (el script vive en el skill `dataviz`, no en el repo). * * El color NUNCA es el único canal: con ≥3 series hay que variar además * el trazo (Dash) o los marcadores, y la pantalla debe mostrar la grilla * equivalente al lado del gráfico. */ --degas-chart-1: #1f5bb4; /* azul (marca) */ --degas-chart-2: #d4581f; /* naranja */ --degas-chart-3: #0f8f66; /* aqua */ --degas-chart-4: #a97400; /* ámbar */ --degas-chart-5: #c0417a; /* magenta */ --degas-chart-6: #4a3aa7; /* violeta */ --degas-chart-7: #0b8ab0; /* cian */ --degas-chart-8: #5c7a10; /* oliva */ /* Banda / corredor de tolerancia: NO es una entidad, no consume slot. El relleno es un wash de bajo contraste a propósito (va por debajo de las líneas); quien carga el ≥3:1 es el borde. */ --degas-chart-band: #c7d0da; --degas-chart-band-line: #7b8592; /* ---- Scrims (overlays de modales / spinner global) -------------------- */ --degas-scrim: rgba(15, 23, 42, 0.45); /* detrás de modales */ --degas-scrim-surface: rgba(255, 255, 255, 0.55); /* spinner global */ /* ---- Tipografía ------------------------------------------------------- */ /* Hanken Grotesk / JetBrains Mono self-hosteadas (degas-fonts.css, wwwroot/fonts); el fallback de sistema pinta hasta que cargan (font-display: swap). */ --degas-font-sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --degas-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; /* Escala tipográfica (única fuente de font-size — no usar rem sueltos). Guía (rediseño Consola): 2xs badges/eyebrows/kbd/encabezados de grilla · xs labels de form y de filtro, metadata · sm cuerpo de UI, controles y grillas (el default del body y de Telerik) · md texto de lectura (descripciones, alertas) · lg títulos de card/sección/modal · xl subtítulos grandes · 2xl título de página (h1, 20px). */ --degas-text-2xs: 0.6875rem; /* 11px */ --degas-text-xs: 0.75rem; /* 12px */ --degas-text-sm: 0.8125rem; /* 13px */ --degas-text-md: 0.875rem; /* 14px */ --degas-text-lg: 1rem; /* 16px */ --degas-text-xl: 1.125rem; /* 18px */ --degas-text-2xl: 1.25rem; /* 20px */ --degas-font-weight-medium: 500; --degas-font-weight-semibold: 600; --degas-font-weight-bold: 700; --degas-leading-tight: 1.2; --degas-leading-normal: 1.4; /* ---- Espaciado (escala 4px) ----------------------------------------- */ --degas-space-1: 0.25rem; /* 4px */ --degas-space-2: 0.5rem; /* 8px */ --degas-space-3: 0.75rem; /* 12px */ --degas-space-4: 1rem; /* 16px */ --degas-space-5: 1.5rem; /* 24px */ --degas-space-6: 2rem; /* 32px */ /* ---- Radios / sombras ----------------------------------------------- */ --degas-radius-sm: 3px; --degas-radius: 4px; --degas-radius-lg: 8px; --degas-radius-full: 999px; /* pill / circulo: avatar del usuario, chips */ /* Consola: sin sombras en el chrome ni en las cards — sólo las superficies que FLOTAN (modales, dropdowns, command palette, toasts) usan -lg. Los tokens chicos quedan en `none` para que nadie los reviva por accidente. */ --degas-shadow-sm: none; --degas-shadow: none; --degas-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* ---- Foco (anillo :focus-visible global — ver degas-app-shell.css) ---- */ --degas-focus-ring-color: var(--degas-primary); --degas-focus-ring-width: 2px; --degas-focus-ring-offset: 2px; /* ---- Motion ---------------------------------------------------------- Duraciones y curva unicas. La curva es ease-out-quart: desacelera de forma natural, sin rebote. El kill-switch de prefers-reduced-motion vive en degas-app-shell.css, asi que estas reglas no necesitan guarda propia. */ --degas-duration-fast: 120ms; --degas-duration: 180ms; --degas-ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* ---- Z-index (escala única — no inventar valores sueltos) ------------ */ --degas-z-sidebar: 100; /* menú del módulo: el link desplegado al pasar el mouse tapa el contenido, que usa z-index locales de 1 a 3 (grillas, pivots) */ --degas-z-lanzador: 900; /* pestaña del asistente en el margen derecho: sobre el contenido, debajo de todo lo demás */ --degas-z-drawer: 1000; /* drawers persistentes (asistente) */ --degas-z-dropdown: 1100; /* dropdowns propios (campana) */ --degas-z-overlay: 9000; /* modales propios no-Telerik (jkv) */ --degas-z-palette: 99000; /* command palette */ --degas-z-spinner: 99999; /* spinner global */ --degas-z-toast: 100000; /* toaster Telerik — SIEMPRE arriba de todo */ /* ---- Layout / densidad ------------------------------------------------ */ /* Rediseño Consola: no hay header. El chrome es el sidebar global (256px), que se contrae a un rail de íconos (56px). Nada flota sobre el contenido: el asistente se abre desde un ícono del pie del sidebar o desde una pestaña que vive en el margen derecho del contenido (ui-ux-standards § 5.7). */ --degas-shell-sidebar-width: 256px; --degas-shell-rail-width: 56px; /* Margen del contenido (.app-main) a los costados. El derecho queda LIBRE para la pestaña del asistente, que mide 4px menos: ninguna página lo invade. */ --degas-shell-gutter: var(--degas-space-5); --degas-control-height: 30px; /* alto base de inputs/botones */ --degas-control-height-compact: 28px; /* botones ghost de ícono: toolbar de grilla, acciones por fila, paginador */ --degas-grid-row-height: 36px; /* fila de grilla: 20px de línea + 8px arriba/abajo */ --degas-target-min: 24px; /* mínimo WCAG 2.5.8 para clickables*/ } /* * ============================================================================ * TEMA OSCURO — valores validados WCAG AA (ver DesignTokensContrastTests). * Lo activa el toggle de DEGAS-538 (data-theme="dark" en , persistido * en localStorage `degas.theme`). * Nota: on-primary/on-emphasis se INVIERTEN (texto oscuro sobre rellenos * claros) — blanco sobre los azules/verdes claros de dark NO cumple AA. * ============================================================================ */ :root[data-theme="dark"] { color-scheme: dark; --degas-primary: #7aa9e8; --degas-primary-hover: #93bbee; --degas-primary-active: #5f94dd; --degas-primary-soft: #1f3251; --degas-primary-soft-hover: #253b60; --degas-primary-soft-active: #1a2b47; --degas-on-primary: #10151b; --degas-on-emphasis: #10151b; --degas-surface: #16191e; --degas-surface-muted: #16191e; --degas-surface-sunken: #1b1f24; --degas-surface-hover: #22272e; --degas-border: #2a2f36; --degas-border-strong: #3a414b; --degas-border-input: #78828f; /* ≥3:1 también sobre primary-soft (fila seleccionada) */ --degas-text: #e4e7eb; --degas-text-muted: #9aa3ae; --degas-text-subtle: #7f8894; /* Sidebar en oscuro: un escalón más oscuro que el contenido (#16191e) para que el chrome siga leyéndose como chrome. */ --degas-sidebar-bg: #0f1114; --degas-sidebar-border: #2a2f36; --degas-sidebar-text: #b4bcc8; --degas-sidebar-text-muted: #7d8694; --degas-sidebar-hover-bg: #1a1e24; --degas-sidebar-active-bg: #22272e; --degas-sidebar-active-text: #ffffff; --degas-sidebar-active-icon: #7aa9e8; --degas-sidebar-input-bg: #16191e; --degas-sidebar-input-border: #5f6875; --degas-sidebar-kbd-bg: #22272e; --degas-sidebar-chip-bg: #2a3a52; --degas-sidebar-chip-fg: #9fc3f5; --degas-success: #85d197; --degas-success-hover: #97d9a6; --degas-success-active: #74c987; --degas-success-bg: #1d3323; --degas-warning: #e7b566; --degas-warning-bg: #3a2e15; --degas-danger: #f2938e; --degas-danger-hover: #f4a29e; --degas-danger-active: #ef837d; --degas-danger-bg: #42201f; --degas-info: #adb8f8; --degas-info-bg: #262c52; --degas-pending: #a6aeb8; --degas-pending-bg: #2b3037; --degas-highlight: #3b3722; --degas-highlight-strong: #564e28; --degas-unread-bg: #1d2635; --degas-accent-star: #e8b64c; --degas-accent-star-soft: rgba(232, 182, 76, 0.15); /* Series de gráfico: los MISMOS 8 hues re-escalonados para la superficie oscura (no es un flip automático del claro — se eligieron y validaron como set contra #22262b). Ver el bloque claro para el detalle. */ --degas-chart-1: #3987e5; --degas-chart-2: #d95926; --degas-chart-3: #199e70; --degas-chart-4: #c98500; --degas-chart-5: #d55181; --degas-chart-6: #9085e9; --degas-chart-7: #1391b0; --degas-chart-8: #8a9c2e; --degas-chart-band: #39424e; --degas-chart-band-line: #8a94a1; --degas-scrim: rgba(0, 0, 0, 0.6); --degas-scrim-surface: rgba(26, 29, 33, 0.55); --degas-shadow-sm: none; --degas-shadow: none; --degas-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); }