/* ═══════════════════════════════════════════════════════════════════════════ SISTEMA VISUAL DE DATA · ALEGRA Fuente única. Se consume, no se copia: `make setup` la sincroniza y el verificador avisa si la copia divergió. TRES NIVELES DE AUTORIDAD, y confundirlos es cómo se degrada un sistema: 1. OFICIAL, Smile Design System (skill `alegra-smile-visual-brand`). El color completo. No se aproxima, no se ajusta, no se reemplaza por "un teal parecido". 2. ASUNCIÓN PRÁCTICA de Data, declarándolo. Tipografía, espacio, radios, sombras, elevación, grid y movimiento. Smile declara que NO los define y su instrucción es textual: no inventar reglas de marca y presentarlas como oficiales. Se reemplaza cuando Smile las publique. 3. EXTENSIÓN DE DATA: los componentes de tablero y la paleta categórica de gráficos, que Smile no cubre. Cada una con su decisión registrada. CONTRASTE, medido el 2026-08-28 sobre estos valores. La matriz completa son 220 pares y está en design-system.html. La regla que sale de ella: LOS 500 PINTAN. LOS 800 Y 900 ESCRIBEN. El acento sobre blanco da 2,42 y no pasa AA. slate-400 nunca es texto. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ─── OFICIAL · Primary, Alegra Green ──────────────────────────────────── */ --sm-primary-50: #E9FAFA; --sm-primary-100: #CFF2F1; --sm-primary-200: #B8ECE9; --sm-primary-300: #98E4E0; --sm-primary-400: #72D5D1; --sm-primary-500: #30B8B7; /* relleno · 2,42 sobre blanco: NO como texto */ --sm-primary-600: #30ABA9; --sm-primary-700: #299E9C; /* 3,25 · trazo de gráfico y texto de 24px+ */ --sm-primary-800: #208080; /* 4,71 · el acento cuando es texto o link */ --sm-primary-900: #1A7E7F; /* 4,84 */ /* ─── OFICIAL · Neutros Slate. Cargan la interfaz ──────────────────────── */ --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; /* el hairline por defecto */ --slate-300: #CBD5E1; --slate-400: #94A3B8; /* 2,56 · NUNCA como texto. Bordes e iconos */ --slate-500: #64748B; /* 4,76 · el mínimo que pasa AA */ --slate-600: #475569; /* 7,58 */ --slate-700: #334155; /* 10,35 · cuerpo. Y el color del wordmark */ --slate-800: #1E293B; --slate-900: #0F172A; /* 17,85 · titulares y cifras */ /* ─── OFICIAL · Semánticos. Solo cuando el significado es real ─────────── */ --indigo-50: #EEF2FF; --indigo-100: #E0E7FF; --indigo-500: #6366F1; --indigo-600: #4F46E5; --indigo-900: #312E81; --green-50: #F0FDF4; --green-500: #22C55E; --green-900: #14532D; --amber-50: #FFFBE8; --amber-500: #F59E08; --amber-900: #78350F; --rose-50: #FFF1F2; --rose-500: #F43F5E; --rose-900: #881337; /* ─── OFICIAL · alto contraste ─────────────────────────────────────────── */ --white: #FFFFFF; --black: #1A1A1A; /* ─── MARCA ──────────────────────────────────────────────────────────────── * El verde del isotipo. NO es color de interfaz: 1,85 sobre blanco. * El wordmark del logo completo es exactamente --slate-700 (#334155), * medido sobre el asset oficial. */ --iso: #00D6BC; /* ═══ MAPEO SEMÁNTICO · intención → token ══════════════════════════════ */ --bg: var(--slate-50); --surface: var(--white); --surface-sunk: var(--slate-50); --hairline: var(--slate-200); --border-strong: var(--slate-300); --tx-title: var(--slate-900); --tx: var(--slate-700); --tx-muted: var(--slate-600); --tx-label: var(--slate-500); --tx-invert: var(--white); --accent-fill: var(--sm-primary-500); /* barras, chips activos, énfasis */ --accent-text: var(--sm-primary-800); /* texto y links */ --accent-stroke: var(--sm-primary-700); /* trazo de línea de gráfico */ --accent-tint: var(--sm-primary-50); /* fondo suave, filtro global */ --accent-tint-bd:var(--sm-primary-200); --context: var(--slate-300); /* el gris no significa nada */ --ok-fill: var(--green-500); --ok-text: var(--green-900); --ok-tint: var(--green-50); --warn-fill: var(--amber-500); --warn-text: var(--amber-900); --warn-tint: var(--amber-50); --bad-fill: var(--rose-500); --bad-text: var(--rose-900); --bad-tint: var(--rose-50); --info-fill: var(--indigo-500); --info-text: var(--indigo-900); --info-tint: var(--indigo-50); /* ═══ SERIES CON IDENTIDAD FIJA · decisión registrada ══════════════════ */ --serie-core: var(--sm-primary-500); --serie-lite: var(--indigo-500); --serie-involuntario: #6e6a8c; /* el único fuera de Smile, a propósito */ --canal-chat: var(--sm-primary-500); --canal-telefono: var(--rose-500); --canal-correo: var(--amber-500); --canal-whatsapp: var(--indigo-500); /* ═══ PALETA CATEGÓRICA DE GRÁFICOS ═══════════════════════════════════════ * Máximo cinco series. Con más, se agrupa el resto en "otros". * El green va último a propósito: con deuteranopia se confunde con el * primary y con el amber. Esta protección se mantiene firme: la 5ta y 6ta * posición no se reordenan por gusto (decisión del 23-sep-2026, con Jhon, * tras preguntar explícitamente antes de tocarlas). * * 7 y 8 son la extensión: mismos tonos que ya usa "País/Versión" abajo * (violeta de Panamá, cian de Argentina), no un color inventado. Sirven * para el caso raro de más de 6 series reales en un mismo gráfico; con * datos normales, un gráfico nunca debería llegar a usarlos. */ --cat-1: var(--sm-primary-500); --cat-2: var(--indigo-500); --cat-3: var(--amber-500); --cat-4: var(--rose-500); --cat-5: var(--slate-500); --cat-6: var(--green-500); --cat-7: var(--pais-panama-fill); --cat-8: var(--pais-argentina-fill); /* ═══ EXTENSIÓN DE DATA · PASTEL ══════════════════════════════════════════ * Para series que piden un tono más suave que el CAT saturado (pedido * 23-sep-2026: "pasteles vivos, pero no tanto"), sin caer en el gris ni el * verde de la categórica protegida. No reemplaza a CAT: es una paleta * hermana, para el bloque que la necesite. */ --pastel-violeta: #A78BFA; --pastel-durazno: #FDBA74; --pastel-rosa: #F9A8D4; --pastel-celeste: #7DD3FC; /* ═══ EXTENSIÓN DE DATA · PAÍS / VERSIÓN ══════════════════════════════════ * Pedido por Santiago el 9-sep-2026 para que el país tenga siempre el mismo * color en todos los tableros. NO es oficial de Smile: es extensión de Data, * y por eso vive acá y no entre los tonos oficiales de arriba. * * Tres tonos por país y cada uno tiene su trabajo, que es la misma regla del * resto del sistema: el 500 pinta áreas, el 700 dibuja líneas y puntos, el * 900 escribe. Medido el 9-sep-2026 contra el fondo (slate-50): * · los nueve tonos -900 pasan AA como texto (de 8,67 a 10,95) * · los nueve tonos -700 pasan 3:1 y además AA (de 4,79 a 7,24) * · cuatro de los -500 NO llegan a 3:1 contra el fondo (Colombia 2,05, * México 2,18, Argentina 2,65, España 2,68), así que sirven para el área * de una barra pero no para una línea de 1px ni un punto chico. Para eso * está el -700. Es la misma trampa de "los 500 pintan, los 900 escriben". * * Costa Rica y Panamá venían sin definir: Santiago pidió verde para Costa Rica, * el mismo de México, y dos países del mismo verde son indistinguibles en un * gráfico. Se propuso azul para Costa Rica (que además está en su bandera) y * violeta para Panamá, y Santiago las CONFIRMÓ el 9-sep-2026. Los nueve países * quedan firmes. */ --pais-colombia-fill: #F59E08; --pais-colombia-line: #B45309; --pais-colombia-text: #78350F; --pais-mexico-fill: #22C55E; --pais-mexico-line: #15803D; --pais-mexico-text: #14532D; --pais-rep-dom-fill: #EF4444; --pais-rep-dom-line: #B91C1C; --pais-rep-dom-text: #7F1D1D; --pais-espana-fill: #F97316; --pais-espana-line: #C2410C; --pais-espana-text: #7C2D12; --pais-argentina-fill: #0EA5E9; --pais-argentina-line: #0369A1; --pais-argentina-text: #0C4A6E; --pais-peru-fill: #EC4899; --pais-peru-line: #BE185D; --pais-peru-text: #831843; --pais-costa-rica-fill: #3B82F6; --pais-costa-rica-line: #1D4ED8; --pais-costa-rica-text: #1E3A8A; --pais-panama-fill: #8B5CF6; --pais-panama-line: #6D28D9; --pais-panama-text: #4C1D95; --pais-otros-fill: #64748B; --pais-otros-line: #475569; --pais-otros-text: #334155; /* Secuencial, para heatmaps */ --seq-1: var(--sm-primary-100); --seq-2: var(--sm-primary-300); --seq-3: var(--sm-primary-500); --seq-4: var(--sm-primary-700); --seq-5: var(--sm-primary-900); /* Divergente, para desvíos: bad ← neutro → accent */ --div-neg: var(--rose-500); --div-mid: var(--slate-200); --div-pos: var(--sm-primary-500); /* Andamiaje del gráfico. Un paso más claro que el hairline de la interfaz (slate-100, no slate-200): la grilla es referencia, no un borde que compite con el dato. Bajado el 23-sep-2026, a pedido de Jhon. */ --chart-grid: var(--slate-100); /* solo horizontal */ --chart-text: var(--slate-500); /* ═══ TIPOGRAFÍA · ASUNCIÓN PRÁCTICA ══════════════════════════════════════ * Inter para cuerpo, interfaz y datos: la altura de x más alta entre las * tipografías de interfaz, 1/l/I y 0/O inequívocos, y cifras tabulares * reales. Lexend para titulares y cifras: diseñada para facilidad de * lectura, y ya en uso en los tableros. JetBrains Mono para código. * Tres familias es el techo. */ --font-display: Lexend, Inter, system-ui, sans-serif; --font-body: Inter, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --display-l-size: 36px; --display-l-lh: 1.10; --display-l-ls: -.02em; --display-m-size: 28px; --display-m-lh: 1.15; --display-m-ls: -.02em; --title-l-size: 21px; --title-l-lh: 1.25; --title-l-ls: -.015em; --title-m-size: 17px; --title-m-lh: 1.30; --title-m-ls: -.01em; --title-s-size: 15px; --title-s-lh: 1.35; --title-s-ls: -.005em; --body-l-size: 16px; --body-l-lh: 1.65; --body-size: 14.5px; --body-lh: 1.70; --body-s-size: 13px; --body-s-lh: 1.60; --label-size: 12px; --label-lh: 1.45; --label-ls: .01em; --overline-size: 10.5px; --overline-lh: 1.40; --overline-ls: .09em; --metric-l-size: 32px; --metric-l-lh: 1.00; --metric-l-ls: -.03em; --metric-m-size: 25px; --metric-m-lh: 1.00; --metric-m-ls: -.03em; --metric-s-size: 18px; --metric-s-lh: 1.10; --metric-s-ls: -.02em; --code-size: 12.5px; --code-lh: 1.70; /* Los pesos. Existían dentro de cada rol tipográfico y no como token propio, así que cada vez que alguien quería resaltar algo escribía el número a mano: medido el 21-sep-2026, la propia librería de componentes tenía cuatro. Un peso escrito a mano es una decisión de marca que no se puede cambiar en un solo lugar. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; --prose: 72ch; /* ancho máximo de lectura */ /* ═══ ESPACIO · ASUNCIÓN PRÁCTICA · base 4, ritmo 8 ════════════════════ */ --space-0: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --card-pad-y: 24px; --card-pad-x: 26px; /* ═══ RADIOS · ASUNCIÓN PRÁCTICA ══════════════════════════════════════════ * Un elemento anidado lleva radio MENOR que su contenedor, nunca mayor. */ --radius-xs: 4px; /* badge, celda resaltada */ --radius-s: 6px; /* input, botón chico */ --radius-m: 8px; /* botón, chip */ --radius-l: 10px; /* grupo de controles, tabla */ --radius-xl: 12px; /* card */ --radius-2xl: 16px; /* modal, panel */ --radius-full: 999px; /* píldora, avatar */ /* ═══ BORDES Y FOCO ═══════════════════════════════════════════════════════ */ --bd: 1px solid var(--hairline); --bd-accent: 3px; /* borde izquierdo semántico */ --focus-w: 2px; --focus-color: var(--sm-primary-700); --focus-offset: 2px; /* ═══ ELEVACIÓN · ASUNCIÓN PRÁCTICA ═══════════════════════════════════════ * La elevación es un recurso de jerarquía. El nivel 1 es el default y casi * siempre alcanza: con sombra media, veinte superficies flotan y ninguna * destaca. */ --elev-0: none; --elev-1: 0 1px 2px rgba(15, 23, 42, .05); --elev-2: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04); --elev-3: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .05); --elev-4: 0 20px 25px -5px rgba(15, 23, 42, .10), 0 8px 10px -6px rgba(15, 23, 42, .06); /* ═══ GRID Y TAMAÑOS · ASUNCIÓN PRÁCTICA ══════════════════════════════════ */ --content-max: 1040px; --sidebar-w: 266px; --gutter: 16px; --h-control-xs: 28px; --h-control-s: 32px; --h-control: 36px; --h-control-l: 40px; --touch-min: 40px; --icon-xs: 14px; --icon: 16px; --icon-l: 20px; --icon-xl: 24px; --icon-stroke: 1.5; /* ═══ MOVIMIENTO · ASUNCIÓN PRÁCTICA ══════════════════════════════════════ * Se animan opacidad y transform. NO se animan el fondo de superficies * grandes ni el height de listas largas. */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 240ms; --ease-in: cubic-bezier(.2, .8, .2, 1); /* al entrar */ --ease-out: cubic-bezier(.4, 0, 1, 1); /* al salir */ } /* Los números alinean siempre */ .tnum { font-variant-numeric: tabular-nums; } /* El foco es visible siempre. Nunca outline:none sin reemplazo. */ :focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); } /* No es opcional */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; } }