/* ############################################################################ ESTE ARCHIVO NO LO CARGA NADIE. NINGUNO DE ESTOS TOKENS EXISTE EN PANTALLA. ############################################################################ Medido el 2026-08-27: ningún `.html` de public/ lo enlaza y ninguna hoja lo importa. Cero ``, cero `@import`. El navegador nunca lo ve. Consecuencia exacta, que es lo que hace esto peligroso y no sólo inútil: escribir `var(--radius-lg)` en una pantalla del panel **no es un error**. No avisa la consola, no avisa el build, no avisa nada. La propiedad se queda sin valor y el elemento sale con el radio por defecto — o sea, con un defecto silencioso que parece una decisión de diseño. LOS 92 NOMBRES DE ESTE ARCHIVO SON 92 NOMBRES QUE NO RESUELVEN. Ninguno. (Eran 85; E11 añadió siete —las familias de acento que pedía el diseño de Contabilidad— y los añadió TAMBIÉN a kallpa-shared.css, que es de donde la pantalla los lee de verdad. Escribirlos sólo aquí habría sido exactamente la trampa que este aviso describe.) Lo que sí existe en tiempo de ejecución son los 25 tokens de `kallpa-shared.css` + `kallpa-panel.css`, con OTROS NOMBRES. Algunos valen lo mismo que los de acá —`--bg` es `--color-surface`, `--ink` es `--color-text`, y hay una prueba que vigila que sigan coincidiendo— pero tres familias enteras de este archivo NO TIENEN EQUIVALENTE VIVO BAJO NINGÚN NOMBRE: --radius-* (4) no hay ningún token de radio en las hojas vivas --space-* (13) no hay ningún token de espaciado --shadow-* (3) sólo existe --sombra-tip, que es de los tooltips Las pantallas escriben esos valores literales: `border-radius:18px`, `padding:26px 28px`. No es descuido: es que no hay token que usar. POR QUÉ EL AVISO VA ACÁ DENTRO Y NO SÓLO EN LA DOCUMENTACIÓN. Este archivo se presenta seis líneas más abajo como «Fuente única de verdad», y DESIGN.md lo respalda. Quien lo abra buscando el token correcto va a encontrar exactamente lo que buscaba, escrito con autoridad, y lo va a usar. La documentación es la que se equivoca; por eso el desmentido tiene que estar donde está la trampa. Es la misma forma que `scripts/generar-sri-html.py`: un ANDAMIO CON ASPECTO DE HERRAMIENTA VIVA. Allí el riesgo era regenerar y borrar trabajo; acá es construir encima de nombres que no existen. NO SE ARREGLA EN ESTA RAMA, a propósito: enlazarlo cambiaría el aspecto de las 26 pantallas de una vez. Ver docs/pendientes-panel.md §64 para la medición y las tres salidas posibles. ############################################################################ */ /* ============================================================================ KALLPA AI — Tokens de diseño ============================================================================ Fuente única de verdad para color, tipografía, espaciado, radios, sombras, transiciones y foco. Ver DESIGN.md en la raíz del repositorio para la tabla completa, el uso asignado a cada escalón y las reglas de trabajo. MECANISMO DE TEMA — el que ya usa el proyecto, no uno nuevo: un script inline en el lee localStorage.kallpa_theme y, si vale 'light', pone data-theme="light" en antes del primer pintado. El OSCURO es el estado por defecto (ausencia del atributo) y el claro la excepción. Por eso :root define el tema oscuro y :root[data-theme="light"] solo lo que cambia. ESTE ARCHIVO TODAVÍA NO ESTÁ ENLAZADO EN NINGUNA PÁGINA. Define el vocabulario; aplicarlo es un trabajo posterior y componente a componente. ========================================================================== */ :root { /* ── Color: superficies ───────────────────────────────────────────────── Tres niveles porque el producto usa tres de forma sistemática. */ --color-surface: #080C14; /* fondo de página */ --color-surface-raised: #0C1220; /* tarjetas, paneles, modales */ --color-surface-sunken: #101828; /* celdas, campos, zonas hundidas */ /* ── Color: texto ─────────────────────────────────────────────────────── text-subtle es #748197 y no el #707E94 del panel ni el #5C6A7E de la landing: es el valor mínimo que alcanza 4.5:1 sobre los TRES fondos. #707E94 se quedaba en 4.31:1 sobre surface-sunken. */ --color-text: #EAF0F7; --color-text-muted: #9AA7B8; --color-text-subtle: #748197; /* ── Color: bordes ────────────────────────────────────────────────────── Dos papeles distintos, y mezclarlos es el error a evitar: - border es decorativo (separadores, contorno de tarjeta). WCAG 1.4.11 no le exige contraste y subirlo destruiría el aspecto del producto: da 1.20:1 a propósito. - border-strong es para controles cuyo límite es el único indicio de que son interactivos (campos, botón fantasma). Cumple 3:1 sobre los tres fondos. */ --color-border: rgba(154, 167, 184, .13); --color-border-soft: rgba(154, 167, 184, .07); --color-border-strong: #5C6A7E; /* ── Color: marca ─────────────────────────────────────────────────────── DOS tokens verdes, y no es redundancia. Ver DESIGN.md § "Por qué hay dos verdes". En oscuro coinciden; la distinción solo muerde en tema claro, pero el token existe en ambos para que el código nunca ramifique. */ --color-brand: #3DBF8C; /* identidad: logo, display, decorativo */ --color-brand-text: #3DBF8C; /* texto normal, enlaces, relleno de botón */ --color-brand-hover: #4ED49E; --color-brand-subtle: rgba(61, 191, 140, .14); --color-on-brand: #06231A; /* texto sobre relleno de marca */ /* ── Color: estado ──────────────────────────────────────────────────────*/ --color-success: #3DBF8C; --color-warning: #E8B44A; --color-danger: #E86A5A; --color-info: #6C9FE0; /* Fondos tintados de estado, al mismo alfa que --color-brand-subtle. Son SIEMPRE fondo, nunca texto ni borde: a .14 sobre la superficie no llegan a 3:1 con nada, y usarlos para otra cosa sería inaccesible. El texto que va encima sigue siendo --color-danger / --color-warning. */ --color-danger-subtle: rgba(232, 106, 90, .14); --color-warning-subtle: rgba(232, 180, 74, .14); /* ── Color: las familias que el diseño de Contabilidad necesita ───────── El export declara, para cada acento, un trío relleno / borde / TEXTO. De los catorce nombres que trae y el producto no tenía, siete se resuelven con tokens que ya están aquí —brand-subtle, warning-subtle, warning, danger-subtle, surface-raised, text-muted, text-subtle— y estos SIETE son los que faltaban. Los valores son los de la paleta viva de kallpa-shared.css, no los del export. `-line` es borde de 1px, `-subtle` es relleno y `-text` es texto: la misma separación que DESIGN.md ya hace entre --color-brand y --color-brand-text, ahora extendida al azul, al morado y al ámbar. --color-accent-text NO es --color-brand-text, y por eso es un token y no un alias: en oscuro brand-text vale #3DBF8C y el que el producto usa de verdad para texto es #4ED49E (--mint-2). Esa discrepancia ya está documentada en tokens-sincronizados.test.js; aquí se declara el valor que la pantalla usa, en vez de heredar el que no usa. */ --color-accent-line: rgba(61, 191, 140, .3); --color-accent-text: #4ED49E; --color-info-subtle: rgba(108, 159, 224, .16); --color-info-line: rgba(108, 159, 224, .3); --color-purple-subtle: rgba(154, 107, 196, .18); --color-purple-line: rgba(154, 107, 196, .3); /* Entre --color-border y --color-border-strong: separa dentro de una tarjeta sin llegar al borde de control. El alfa sale de --color-border por 1,67, que es la relación que el export da entre sus dos líneas. */ --color-border-medium: rgba(154, 167, 184, .22); /* ── Color: foco ──────────────────────────────────────────────────────── Un único anillo para todo el producto. Verificado ≥3:1 en ambos temas. */ --color-focus-ring: #3DBF8C; --focus-ring-width: 2px; --focus-ring-offset: 3px; /* ── Color: cromo ───────────────────────────────────────────────────────*/ --color-header-bg: rgba(8, 12, 20, .85); /* ── Tipografía: familias ─────────────────────────────────────────────── Las que ya usa la marca. No se añade ninguna. */ --font-display: 'Space Grotesk', sans-serif; --font-sans: 'IBM Plex Sans', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --font-hand: 'Kalam', cursive; /* solo acentos editoriales */ /* ── Tipografía: siete escalones ──────────────────────────────────────── Sustituyen a los 56 tamaños en rem que había en uso. Los dos clamp() son los que ya usaba la landing, copiados literalmente. */ --text-display-size: clamp(2.4rem, 4.6vw, 3.8rem); --text-display-line: 1.05; --text-display-weight: 500; --text-display-font: var(--font-display); --text-section-size: clamp(1.8rem, 3.2vw, 2.6rem); --text-section-line: 1.12; --text-section-weight: 500; --text-section-font: var(--font-display); --text-card-size: 1.22rem; --text-card-line: 1.25; --text-card-weight: 500; --text-card-font: var(--font-display); --text-body-size: 0.92rem; --text-body-line: 1.60; --text-body-weight: 400; --text-body-font: var(--font-sans); --text-body-sm-size: 0.85rem; --text-body-sm-line: 1.55; --text-body-sm-weight: 400; --text-body-sm-font: var(--font-sans); --text-label-size: 0.78rem; --text-label-line: 1.40; --text-label-weight: 500; --text-label-font: var(--font-sans); --text-eyebrow-size: 0.72rem; --text-eyebrow-line: 1.30; --text-eyebrow-weight: 500; --text-eyebrow-font: var(--font-mono); --text-eyebrow-track: .24em; /* ── Espaciado ────────────────────────────────────────────────────────── Base 4 con subnivel de 2 hasta 16px. El subnivel no es un capricho: 10px (37 usos), 14px (24) y 6px (16) aparecen como relleno interior de componentes pequeños (button.mini, .tabs button, .fp-head, .plan li). Sin él la escala cubría el 33% de los usos; con él, el 62%. El número del token ES su valor en px. */ --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px; /* ── Grosor de borde ──────────────────────────────────────────────────── Fuera de la escala de espaciado a propósito: 1px y 2px son grosores, no ritmo. Mezclarlos con --space-* fue lo que llevó a tratar 1/2/3px como si fueran escalones de espaciado. */ --border-width: 1px; --border-width-thick: 2px; /* ── Radios: cuatro escalones ───────────────────────────────────────────*/ --radius-sm: 6px; /* insignias, píldoras pequeñas */ --radius-md: 10px; /* botones, campos, controles */ --radius-lg: 16px; /* tarjetas, paneles, modales */ --radius-full: 999px; /* circulares y cápsulas */ /* ── Sombras: tres niveles ────────────────────────────────────────────── En tema oscuro una sombra sobre #080C14 casi no se ve, así que el papel de separar del fondo lo hace un anillo de 1px y la sombra solo aporta profundidad. En claro es al revés: la sombra basta. */ --shadow-sm: 0 0 0 1px rgba(154, 167, 184, .10); --shadow-md: 0 8px 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(154, 167, 184, .10); --shadow-lg: 0 20px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(154, 167, 184, .13); /* ── Movimiento ───────────────────────────────────────────────────────── .15s domina el proyecto (64 usos). base absorbe .2s y .3s, que sumaban 70 usos repartidos sin criterio. La curva ya existía en el proyecto, escrita de dos formas distintas (con y sin ceros a la izquierda). */ --duration-fast: .15s; --duration-base: .25s; --duration-slow: .5s; --easing-standard: cubic-bezier(.23, 1, .32, 1); --easing-linear: linear; /* solo para progreso real, no para UI */ /* ── Disposición ────────────────────────────────────────────────────────*/ --layout-max: 1200px; } /* ============================================================================ TEMA CLARO ---------------------------------------------------------------------------- No es el oscuro invertido. Dos diferencias deliberadas: - Los bordes necesitan menos alfa: sobre blanco, rgba(21,27,38,.12) pesa visualmente más que rgba(154,167,184,.13) sobre casi negro. - El verde de marca se oscurece para no apagarse contra fondos claros. ========================================================================== */ :root[data-theme="light"] { --color-surface: #F5F7FA; --color-surface-raised: #FFFFFF; --color-surface-sunken: #EEF1F5; --color-text: #151B26; --color-text-muted: #4B5566; --color-text-subtle: #5E6779; --color-border: rgba(21, 27, 38, .12); --color-border-soft: rgba(21, 27, 38, .06); --color-border-strong: #5E6779; /* AQUÍ ESTÁ LA DIFERENCIA ENTRE LOS DOS VERDES. brand (#17976A) es el color de identidad y no se toca. Pero como TEXTO normal da 3.27–3.70:1 y como relleno de botón con texto blanco encima, 3.70:1 — ambos por debajo del 4.5:1 de AA. brand-text (#0F7D57) es el mismo verde un peldaño más oscuro: 4.53–5.13:1 como texto y 5.13:1 con blanco encima. Es OBLIGATORIO para texto normal, epígrafes, enlaces y para el relleno del botón primario. */ --color-brand: #17976A; --color-brand-text: #0F7D57; --color-brand-hover: #17976A; --color-brand-subtle: rgba(23, 151, 106, .10); --color-on-brand: #FFFFFF; --color-success: #0F7D57; --color-warning: #986300; /* #9A6400 daba 4.42:1 sobre surface-sunken */ --color-danger: #C22A2A; --color-info: #2A63C2; --color-danger-subtle: rgba(194, 42, 42, .10); --color-warning-subtle: rgba(152, 99, 0, .10); /* Los siete del diseño de Contabilidad, en claro. Ver el bloque oscuro. Los bordes suben a .35 y los rellenos bajan a .10/.11: sobre blanco un tinte al mismo alfa del oscuro se ve más fuerte y un borde se pierde — el mismo ajuste que ya traían --azul-line y --morado-dim en la hoja viva. accent-text es #0F7D57, que aquí SÍ coincide con brand-text: la discrepancia del par sólo existe en oscuro. */ --color-accent-line: rgba(23, 151, 106, .35); --color-accent-text: #0F7D57; --color-info-subtle: rgba(42, 99, 194, .10); --color-info-line: rgba(42, 99, 194, .35); --color-purple-subtle: rgba(123, 79, 168, .11); --color-purple-line: rgba(123, 79, 168, .35); --color-border-medium: rgba(21, 27, 38, .20); --color-focus-ring: #17976A; --color-header-bg: rgba(255, 255, 255, .85); --shadow-sm: 0 1px 2px rgba(21, 27, 38, .08); --shadow-md: 0 8px 24px rgba(21, 27, 38, .12); --shadow-lg: 0 20px 40px rgba(21, 27, 38, .18); }