/* ====================================================================================== SISTEMA VISUAL DE FITINTRADE — la fuente única (Hito 1.5) ====================================================================================== QUÉ ES ESTO Y POR QUÉ EXISTE -------------------------------------------------------------------------------------- El App Shell quedó congelado el 17/07/2026 y con él seis cosas: navegación, barra, logo, iconografía, comportamiento móvil y estructura. Pero tipografía, color, espaciado y componentes NO vivían en ningún sitio: los ponía cada página. La auditoría (`tools_auditar_estilos.py`) contó lo que había: 52 tamaños de letra distintos (23 aparecen en 3+ ficheros) 307 colores hex escritos a mano (125 se usan UNA sola vez) 31 valores de padding tres juegos de tokens sin hablarse: `--fs-*`, `--ft-*` y los sueltos 20 tokens definidos en más de un fichero 2 tokens USADOS y nunca definidos: `--card` y `--txt` Y una cosa importante, que sale de medir y no de suponer: de esos 20 duplicados, **14 dicen exactamente lo mismo en todas partes**. Eso es redundancia, no deriva. Y de los 6 que difieren, cuatro son `login.html`, que es una pantalla oscura a propósito y reusa los mismos nombres con valores oscuros — eso tampoco es deriva, es un tema. O sea: los valores ya eran coherentes. Lo que faltaba era que alguien fuera su dueño. Por eso esto no es un rediseño. Es ponerle nombre a lo que la app ya usa. CÓMO ESTÁ ORDENADO -------------------------------------------------------------------------------------- 1) TOKENS CANÓNICOS `--fit-*`: semánticos (qué ES), no descriptivos (de qué COLOR es). `--fit-text-2` sobrevive a un cambio de paleta; `--gray` no, porque el día que el gris deje de ser gris el nombre miente. 2) ALIAS: los nombres viejos apuntan aquí. No se borran. Miles de usos siguen funcionando y la migración va módulo a módulo, no de golpe. LA REGLA DURA DE ESTE FICHERO -------------------------------------------------------------------------------------- NO PUEDE CAMBIAR NI UN PÍXEL de lo que ya se ve. Cada alias resuelve exactamente al mismo valor que tenía antes. Lo comprueba `tools_smoke_design_system.py`, que compara los valores computados de la app con y sin este fichero: si algo se mueve, salta. Por eso `--card` y `--txt` —los dos que se usan sin estar definidos— NO se definen aquí todavía. Definirlos arreglaría Timing (sus botones salen hoy sin fondo), pero arreglaría Timing, y este hito tiene prohibido tocar módulos. Se anota y se cierra cuando le toque a Timing. ====================================================================================== */ :root { /* ==================================================================================== COLOR — semántico ==================================================================================== Los valores salen de `app_shell.css`, que es donde vivía el sistema de facto. No se inventa ni un color: se le pone nombre al que ya había. */ /* ---- marca ---- */ --fit-brand: #00C896; /* el verde de la casa */ --fit-brand-deep: #00A77E; /* sobre blanco, para texto: el claro no contrasta */ --fit-brand-soft: #e9faf4; /* fondos teñidos */ /* ---- superficies ---- `bg` es el lienzo; `surface` es lo que se apoya encima; `raised` es lo que además proyecta sombra. Hoy surface y raised son el mismo blanco y se distinguen por la sombra: se separan igualmente porque el día que haya modo oscuro dejarán de serlo. */ --fit-bg: #f5f5f7; --fit-surface: #ffffff; --fit-surface-raised: #ffffff; --fit-surface-sunken: #f5f5f7; /* ---- borde ---- */ --fit-border: #e8e8ed; --fit-border-strong: #d7d7de; /* ---- texto ---- Tres niveles y no más. `--ink`/`--gray`/`--soft` ya eran esto; solo que había que leerles el pensamiento para saber cuál era cuál. */ --fit-text: #1d1d1f; /* principal */ --fit-text-2: #6e6e73; /* secundario */ --fit-text-3: #86868b; /* tenue */ --fit-text-on-brand: #06231b; /* encima del verde */ --fit-text-on-dark: #f5f5f7; /* encima de la barra */ /* ---- señales ---- `positivo` y `error` valen hoy lo mismo que `negativo`, y aun así son tokens distintos: una subida en verde y un formulario mal rellenado no son la misma idea, y el día que una de las dos cambie no queremos buscar cuál era cuál. */ --fit-positive: #00A77E; --fit-negative: #E5484D; --fit-neutral: #6e6e73; --fit-info: #2f6fed; /* estaba como respaldo de `var(--accent,…)` */ --fit-warning: #c8860d; /* estaba como respaldo de `var(--warn,…)` */ --fit-error: #E5484D; --fit-focus: #00C896; --fit-active: rgba(0, 200, 150, .12); /* ---- superficie oscura ---- No es un capricho: `login.html` YA es una pantalla oscura y redefine `--bg`, `--panel`, `--line` y `--gray` con valores oscuros. Un sistema que solo supiera de claro dejaría al login fuera desde el primer día, y a la futura app móvil también. */ --fit-dark-bg: #0a0a0a; --fit-dark-surface: #121212; --fit-dark-border: #262626; --fit-dark-text: #f5f5f7; --fit-dark-text-2: #9a9a9a; /* ---- barra lateral (congelada con el App Shell) ---- */ --fit-side: #2b2d31; --fit-side-text: #f5f5f7; --fit-side-text-2: #b0b2b8; /* ---- gráficos ---- Serie 1 es la de la casa. Las demás se eligen para distinguirse ENTRE ELLAS, no por bonitas: un gráfico con dos series parecidas no se lee. */ --fit-chart-1: #00C896; --fit-chart-2: #6e6e73; --fit-chart-3: #2f6fed; --fit-chart-4: #E8A33D; --fit-chart-5: #9b5de5; --fit-chart-6: #E5484D; --fit-chart-grid: #e8e8ed; /* ==================================================================================== TIPOGRAFÍA — nueve papeles, ni uno más ==================================================================================== Había 52 tamaños. Esto no son 52 decisiones: son 9 decisiones y 43 accidentes. Cada valor de abajo es el que YA se usaba, elegido por frecuencia real (la auditoría los cuenta). No se redondea a una escala bonita: 12,5px aparece 118 veces en 18 ficheros, así que 12,5px es un tamaño de esta casa, guste o no. Cambiarlo a 12 sería un rediseño encubierto de toda la app. `--fit-fs-*` es el tamaño; el papel completo (tamaño + peso + interlineado) está en las clases de `fit_components.css`. */ --fit-fs-h1: 26px; /* título principal de página */ --fit-fs-h2: 20px; /* título de sección */ --fit-fs-h3: 15px; /* título de tarjeta */ --fit-fs-body: 14px; /* cuerpo */ --fit-fs-secondary: 13px; /* texto secundario */ --fit-fs-label: 11.5px; /* etiqueta (va en mayúsculas) */ --fit-fs-table: 14px; /* tabla: igual que el cuerpo, a propósito */ --fit-fs-metric: 26px; /* cifra destacada */ --fit-fs-metric-sm: 18px; /* cifra compacta */ /* Nunca por debajo de esto. En navegación 14px ya era la regla del App Shell; aquí se hace explícita para todo: un dato financiero que no se lee no es un dato. */ --fit-fs-min: 12px; --fit-fw-normal: 400; --fit-fw-medium: 600; --fit-fw-semi: 650; --fit-fw-bold: 700; --fit-fw-black: 800; --fit-lh-tight: 1.15; /* titulares y cifras */ --fit-lh-normal: 1.45; /* interfaz */ --fit-lh-text: 1.6; /* párrafos que se leen de verdad */ --fit-ls-label: .07em; /* las mayúsculas necesitan aire o se apelmazan */ --fit-ls-h1: -.02em; /* los titulares grandes, lo contrario */ --fit-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fit-font-num: var(--fit-font); /* ==================================================================================== ESPACIADO — múltiplos de 4 ==================================================================================== Había 31 valores de padding, con 7px, 11px y 3px entre ellos. La escala es de 4 en 4 porque es la que ya describe la mayoría de lo que hay, no porque sea canónica en abstracto. Las excepciones son legítimas —un chip de 7px puede estar bien pensado—, pero una excepción se justifica; 31 excepciones son el sistema, y entonces no hay sistema. */ --fit-sp-0: 0; --fit-sp-1: 4px; /* mínimo: separar un icono de su texto */ --fit-sp-2: 8px; /* dentro de un control */ --fit-sp-3: 12px; /* controles */ --fit-sp-4: 16px; /* tarjetas */ --fit-sp-5: 24px; /* entre bloques */ --fit-sp-6: 32px; /* secciones */ --fit-sp-7: 48px; /* separaciones grandes */ /* El aire lateral de la página. Ya lo definía el App Shell (`--fs-gutter`) y aquí queda como token del sistema; el shell lo aliasa más abajo para que no haya dos. */ --fit-gutter: clamp(14px, 1.6vw, 24px); /* ---- radios ---- Había 18 valores. La auditoría dice que 8, 10, 12 y 14 se llevan casi todo. */ --fit-radius-sm: 8px; /* chips, badges, inputs pequeños */ --fit-radius: 10px; /* lo normal */ --fit-radius-lg: 14px; /* tarjetas y paneles */ --fit-radius-pill: 999px; /* ---- sombras ---- */ --fit-shadow-1: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04); --fit-shadow-2: 0 4px 14px rgba(0, 0, 0, .10); --fit-shadow-3: 0 20px 60px rgba(0, 0, 0, .25); /* ==================================================================================== TÁCTIL Y MÓVIL ==================================================================================== 44px no es una preferencia estética: es el mínimo que se toca sin fallar. Va aquí, como token, para que un componente nuevo no tenga que acordarse. */ --fit-touch: 44px; --fit-control-h: 40px; /* alto de un control en escritorio */ --fit-control-h-touch: 44px; /* y en móvil */ --fit-safe-b: env(safe-area-inset-bottom, 0px); --fit-safe-t: env(safe-area-inset-top, 0px); --fit-safe-l: env(safe-area-inset-left, 0px); --fit-safe-r: env(safe-area-inset-right, 0px); --fit-bp-tablet: 768px; --fit-bp-desktop: 1024px; } /* En móvil, los controles crecen. La densidad de escritorio con un dedo encima no se puede usar, y reducir el escritorio a 390px es justo lo que no queremos. */ @media (max-width: 1023px) { :root { --fit-control-h: var(--fit-control-h-touch); --fit-fs-h1: 22px; /* 26 en 360px de ancho parte los titulares */ --fit-fs-metric: 22px; } } /* ====================================================================================== ALIAS — la capa de compatibilidad ====================================================================================== Los nombres de siempre apuntan aquí. Nada se borra: `--gray` se usa 422 veces, `--line` 407, `--green` 257. Reescribir eso de golpe sería un cambio de miles de líneas sin una sola prueba detrás, y justo lo que el encargo prohíbe. La migración va módulo a módulo. Cuando un módulo se cierre, se cambian sus `var(--gray)` por `var(--fit-text-2)`. Cuando no quede ninguno, el alias se retira. `tools_auditar_estilos.py` dice cuántos quedan: eso convierte «adopción progresiva» en un número que baja, y no en una intención. OJO CON EL ORDEN: este fichero se carga DESPUÉS de app_shell.css, así que estos alias ganan a las definiciones de allí — y resuelven al mismo valor, por eso no se mueve nada. Y las páginas que redefinen un token en su propio `