/* ══════════════════════════════════════════════════════════════════════════════════════════════ ERPY · Sistema de diseño — TOKENS Fase 1 del rediseño. 26-ago-2026. Lo carga `index.html` y lo consume tanto `styles.css` como `static/ui-kit.html`. ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ═══ SORA, la tipografía del brand sheet — servida desde la propia app ═══ Es una PWA de nave que trabaja sin cobertura: la fuente NO puede venir de Google en cada carga. Fuente variable (un fichero cubre los pesos 400-800), dos subconjuntos, `font-display: swap` para que el texto salga al instante con la fuente de respaldo y cambie al llegar Sora. */ @font-face { font-family: "Sora"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/sora-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Sora"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/sora-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* POR QUÉ EMPIEZA POR AQUÍ. La auditoría midió que `styles.css` no tiene un sistema de diseño: tiene SIETE apilados —siete bloques `:root`, 221 definiciones de variable— y gana el último que se escribió. De ahí salen 1.119 colores literales (402 aun agrupando por cercanía), 54 naranjas de marca, 90 tamaños de letra, 49 radios, 156 sombras y 32 valores de z-index sin escala. La regla de este fichero es una sola: **cada valor está aquí porque se ha medido**, no porque quedara bien. Los contrastes que se citan están calculados, no estimados. NOMBRES EN ESPAÑOL Y PREFIJO `--ty-`. No es capricho: garantiza CERO colisión con las 169 variables que ya viven en `styles.css`. Mientras dure la migración los dos sistemas conviven sin pisarse, y `grep --ty-` dice exactamente qué está migrado y qué no. LOS TRES ESTADOS DE TEMA. El usuario puede no haber elegido ninguno: entonces no hay marca en el `` y solo manda `prefers-color-scheme`. Por eso `:root` lleva la paleta clara COMPLETA, el bloque de medio consulta solo redefine tokens (protegido con `:not([data-tema="claro"])` para que una elección explícita gane al sistema operativo), y `[data-tema="oscuro"]` los redefine otra vez para que el interruptor gane en el otro sentido. Ningún color se define SOLO dentro de un bloque de tema: eso es lo que produce texto de un tema sobre fondo del otro. ══════════════════════════════════════════════════════════════════════════════════════════════ */ :root { /* ─── MARCA ───────────────────────────────────────────────────────────────────────────────── Del brand sheet de TYPY Spain: naranja #e46701, gris #333333, tipografía Sora. Y un dato incómodo que hay que tener delante: NINGUNA combinación de esos dos colores llega a AA sobre un relleno. Blanco sobre #e46701 son 3,37:1 y el gris de marca sobre el naranja de marca, 3,75:1; AA pide 4,5. Por eso hay DOS naranjas y cada uno tiene su trabajo: --ty-marca el de la marca, intacto. Para lo que NO lleva texto encima: bordes, iconos, railes, indicadores, el logo. WCAG 1.4.11 pide 3:1 para eso y lo cumple (3,37:1 sobre blanco, 3,09:1 sobre el papel, 5,33:1 sobre oscuro). --ty-marca-accion el mismo tono (27°) y la misma saturación (99%), 7 puntos de luminosidad más abajo. Es el único que puede llevar texto blanco encima: 4,59:1. Con 6 puntos no llegaba (4,19:1). Es el que ya está en producción desde el arreglo del botón primario del 26-ago. */ --ty-marca: #e46701; --ty-marca-accion: #c05600; /* blanco encima: 4,59:1 */ --ty-marca-accion-fuerte: #a14900; /* blanco encima: 6,05:1 — hover y final de degradado */ /* Naranja como TEXTO. Tiene que aguantar sobre el papel Y sobre su propio velo tintado, que es donde se usa de verdad (el chip de filtro activo). Con #b65201 sobre el velo daban 4,47:1 y se quedaba corto; con este, 5,40:1. Lo cazó la página de componentes. */ --ty-marca-tinta: #a14900; /* 5,40:1 sobre el velo · 5,8:1 sobre papel */ /* La tinta que va ENCIMA de un relleno de marca. NO se invierte con el tema, y ese es todo el motivo de que exista: el relleno (--ty-marca-accion) es oscuro en los dos temas, así que su texto tiene que ser blanco en los dos. Usar `--ty-tinta-inversa` aquí dejaba, en tema oscuro, texto casi negro sobre el naranja: 3,90:1. Lo cazó la propia página de componentes. */ --ty-sobre-marca: #ffffff; /* 4,59:1 sobre --ty-marca-accion, en ambos temas */ --ty-marca-velo: rgb(228 103 1 / 10%); /* ─── SUPERFICIES ─────────────────────────────────────────────────────────────────────────── Papel cálido, que es el mundo en el que ya vive el ERP: no se cambia por gusto lo que el usuario reconoce. `--ty-panel` es el blanco de las tarjetas; `--ty-panel-hondo` el rebaje para campos y bloques de código. */ --ty-fondo: #f7f5f3; --ty-panel: #ffffff; --ty-panel-alto: #ffffff; --ty-panel-hondo: #efedea; /* ─── TINTA ───────────────────────────────────────────────────────────────────────────────── La principal es el gris de marca. Las tres cumplen AA sobre papel Y sobre panel blanco: la suave se probó a 4,17:1 y hubo que bajarla hasta 4,63:1, porque un secundario que no se lee no es secundario, es decorativo. */ --ty-tinta: #333333; /* 11,62:1 sobre papel */ --ty-tinta-media: #67615b; /* 5,62:1 */ --ty-tinta-suave: #746e67; /* 4,63:1 sobre papel, 5,04:1 sobre blanco */ --ty-tinta-inversa: #ffffff; /* ─── RAYAS ───────────────────────────────────────────────────────────────────────────────── Separadores. No llevan texto, así que no se les exige 4,5: se les exige que se vean. */ --ty-raya-fina: #efedec; --ty-raya: #e3e0de; --ty-raya-fuerte: #cfcac5; /* ─── SEMÁNTICOS ──────────────────────────────────────────────────────────────────────────── Cuatro familias, tres piezas cada una: tinta, superficie y borde. Hoy el ERP tiene 72 valores distintos para "éxito", 72 para "aviso", 63 para "peligro" y 42 para "info". Aquí hay 3 por familia, y cada tinta cumple 4,5:1 tanto sobre SU superficie como sobre el papel: una etiqueta de estado se usa en los dos sitios. */ --ty-exito-tinta: #167e41; /* 4,83:1 sobre su superficie · 4,72:1 sobre papel */ --ty-exito-fondo: #effbf4; --ty-exito-borde: #b9e6cd; --ty-aviso-tinta: #93671a; /* 4,65:1 · 4,60:1 */ --ty-aviso-fondo: #fbf6ef; --ty-aviso-borde: #ecd9b6; --ty-peligro-tinta: #c33022; /* 4,99:1 · 5,13:1 */ --ty-peligro-fondo: #fbf0ef; --ty-peligro-borde: #f0c4bf; --ty-info-tinta: #2268c3; /* 4,95:1 · 5,03:1 */ --ty-info-fondo: #eff4fb; --ty-info-borde: #c2d7f0; /* ─── TIPOGRAFÍA ──────────────────────────────────────────────────────────────────────────── Sora es la tipografía del brand sheet. Hoy el ERP usa Inter y SF Pro: ninguna es la de la marca. OJO: para el ERP hay que SERVIRLA DESDE LA NAS, no desde Google Fonts — es una PWA que se usa en planta y tiene que funcionar sin red. La pila de reserva está puesta para que, si la fuente no carga, el texto siga siendo legible y no salte el diseño. Ocho tamaños, no noventa. Y el suelo son 12px: la auditoría encontró 179 declaraciones por debajo (hasta 10px, y medios píxeles como 10.5 y 11.5). Con guantes y luz de nave, 10px no se lee. Aquí no existe nada más pequeño que --ty-t-micro. */ --ty-fuente: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --ty-fuente-dato: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ty-t-micro: 12px; /* el suelo: etiquetas, unidades, pies */ --ty-t-menor: 13px; /* texto secundario, celdas densas */ --ty-t-base: 14px; /* el cuerpo del ERP */ --ty-t-medio: 16px; /* texto destacado, campos de formulario en móvil */ --ty-t-mayor: 18px; /* subtítulos */ --ty-t-titulo: 22px; /* título de panel */ --ty-t-grande: 28px; /* título de sección */ --ty-t-cifra: 36px; /* la cifra de un KPI, que es lo que se lee de lejos */ --ty-peso-normal: 400; --ty-peso-medio: 500; --ty-peso-fuerte: 600; --ty-peso-maximo: 700; --ty-linea-apretada: 1.2; /* títulos y cifras */ --ty-linea-normal: 1.45; /* interfaz */ --ty-linea-suelta: 1.6; /* párrafos largos */ /* ─── ESPACIADO ───────────────────────────────────────────────────────────────────────────── Base 4, ocho pasos. Hoy hay 218 valores distintos de `padding` y 41 de `gap`. */ --ty-e-1: 4px; --ty-e-2: 8px; --ty-e-3: 12px; --ty-e-4: 16px; --ty-e-5: 24px; --ty-e-6: 32px; --ty-e-7: 48px; --ty-e-8: 64px; /* ─── RADIOS ──────────────────────────────────────────────────────────────────────────────── Cinco, no cuarenta y nueve. El `999px` se queda porque es el del botón actual y es parte del carácter del producto; el resto se ordena en una escala. */ --ty-r-1: 6px; /* controles pequeños, etiquetas */ --ty-r-2: 10px; /* campos, botones cuadrados */ --ty-r-3: 14px; /* tarjetas y paneles */ --ty-r-4: 20px; /* diálogos y hojas */ --ty-r-pastilla: 999px; /* ─── SOMBRAS ─────────────────────────────────────────────────────────────────────────────── Cinco, no ciento cincuenta y seis. Todas del mismo tono frío para que la profundidad se lea como una sola luz y no como cinco focos distintos. */ --ty-s-0: none; --ty-s-1: 0 1px 2px rgb(20 22 26 / 6%); --ty-s-2: 0 4px 12px -4px rgb(20 22 26 / 12%); --ty-s-3: 0 12px 28px -10px rgb(20 22 26 / 20%); --ty-s-4: 0 32px 64px -24px rgb(20 22 26 / 34%); /* ─── PROFUNDIDAD ─────────────────────────────────────────────────────────────────────────── Seis niveles CON NOMBRE. Hoy hay 32 números a pelo, un `9999` al lado de un `90`, y cinco elementos con dos z-index distintos declarados a la vez. Regla: no se escribe un número, se elige un nivel. Si algo necesita un nivel que no está aquí, falta un nivel, no un número. */ --ty-z-pegado: 10; /* cabeceras sticky dentro de una lista */ --ty-z-barra: 20; /* barra superior */ --ty-z-lateral: 30; /* menú lateral y navegación inferior */ --ty-z-flotante: 60; /* menús desplegables, popovers, selectores de fecha */ --ty-z-velo: 100; /* el fondo oscuro de un diálogo */ --ty-z-dialogo: 110; /* el diálogo en sí */ --ty-z-aviso: 200; /* toasts y el banner de actualización: SIEMPRE encima de todo */ /* ─── MOVIMIENTO ──────────────────────────────────────────────────────────────────────────── Tres duraciones y dos curvas. Hoy hay 43 transiciones distintas y 12 animaciones sobre 10 `@keyframes`. Se respeta `prefers-reduced-motion` al final del fichero. */ --ty-v-rapida: 120ms; --ty-v-media: 200ms; --ty-v-lenta: 320ms; --ty-curva: cubic-bezier(0.2, 0, 0, 1); --ty-curva-entrada: cubic-bezier(0.16, 1, 0.3, 1); /* ─── DENSIDAD ────────────────────────────────────────────────────────────────────────────── Dos modos. "Cómoda" es la de la oficina; "compacta" es para las listas largas —partes, materiales, libros de IVA— donde caben 40 filas en pantalla. Se cambia poniendo `data-densidad="compacta"` en un contenedor, no reescribiendo la tabla. */ --ty-fila: 44px; --ty-celda-y: var(--ty-e-3); --ty-celda-x: var(--ty-e-4); --ty-control: 40px; /* alto de botones y campos */ /* ─── ANCHOS ──────────────────────────────────────────────────────────────────────────────── Tres tamaños de diálogo, no cuatro familias descoordinadas. Hoy conviven 720, 1200, 1520 y 1975 px según en qué estrato naciera el modal. */ --ty-dialogo-s: min(520px, 94vw); --ty-dialogo-m: min(880px, 94vw); --ty-dialogo-l: min(1280px, 95vw); --ty-dialogo-xl: min(1520px, 96vw); --ty-texto-comodo: 68ch; /* ancho máximo de lectura */ /* El velo de un diálogo. Hoy hay cuatro fondos de velo distintos según el estrato. */ --ty-velo: rgb(20 22 26 / 55%); } /* ─── TEMA OSCURO POR SISTEMA ───────────────────────────────────────────────────────────────── Solo redefine tokens. `:not([data-tema="claro"])` hace que una elección explícita del usuario gane al sistema operativo. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --ty-marca: #ff8a3d; /* sobre fondo oscuro hay que subirlo o desaparece */ --ty-marca-accion: #c05600; --ty-marca-accion-fuerte: #a14900; --ty-marca-tinta: #ff8a3d; /* 5,67:1 sobre su velo en oscuro (con #df6706: 3,85:1) */ --ty-marca-velo: rgb(255 138 61 / 12%); --ty-fondo: #15171c; --ty-panel: #1d2029; --ty-panel-alto: #242833; --ty-panel-hondo: #101216; --ty-tinta: #eceef2; /* 15,44:1 */ --ty-tinta-media: #b0b5bf; /* 8,72:1 */ --ty-tinta-suave: #8f95a3; /* 5,97:1 */ --ty-tinta-inversa: #15171c; --ty-raya-fina: #2d3139; --ty-raya: #3a3f4a; --ty-raya-fuerte: #4b515e; --ty-exito-tinta: #52e08d; --ty-exito-fondo: #183926; --ty-exito-borde: #2b6b46; --ty-aviso-tinta: #e0ac52; --ty-aviso-fondo: #392d18; --ty-aviso-borde: #6b552b; --ty-peligro-tinta: #e16256; --ty-peligro-fondo: #391b18; --ty-peligro-borde: #6b2f2b; --ty-info-tinta: #528fe0; --ty-info-fondo: #182739; --ty-info-borde: #2b4c6b; --ty-s-1: 0 1px 2px rgb(0 0 0 / 40%); --ty-s-2: 0 4px 12px -4px rgb(0 0 0 / 50%); --ty-s-3: 0 12px 28px -10px rgb(0 0 0 / 60%); --ty-s-4: 0 32px 64px -24px rgb(0 0 0 / 70%); } } /* ─── TEMA OSCURO POR ELECCIÓN ──────────────────────────────────────────────────────────────── Idéntico al anterior. Se repite a propósito: si el interruptor solo funcionara dentro del medio consulta, elegir "oscuro" con el sistema en claro no haría nada. `[data-tema-local="oscuro"]` permite pedir el mundo oscuro en UN CONTENEDOR suelto, no en toda la página. Es lo que hace falta para el diálogo "inmersivo": el modal de partes es oscuro hoy y es el que se usa a diario, así que el sistema tiene que poder expresarlo sin escribir la paleta a mano en otro sitio. Ver el apartado 8 de DESIGN-SYSTEM.md: está pendiente de tu decisión. */ :root[data-tema="oscuro"], [data-tema-local="oscuro"] { --ty-marca: #ff8a3d; --ty-marca-accion: #c05600; --ty-marca-accion-fuerte: #a14900; --ty-marca-tinta: #ff8a3d; --ty-marca-velo: rgb(255 138 61 / 12%); --ty-fondo: #15171c; --ty-panel: #1d2029; --ty-panel-alto: #242833; --ty-panel-hondo: #101216; --ty-tinta: #eceef2; --ty-tinta-media: #b0b5bf; --ty-tinta-suave: #8f95a3; --ty-tinta-inversa: #15171c; --ty-raya-fina: #2d3139; --ty-raya: #3a3f4a; --ty-raya-fuerte: #4b515e; --ty-exito-tinta: #52e08d; --ty-exito-fondo: #183926; --ty-exito-borde: #2b6b46; --ty-aviso-tinta: #e0ac52; --ty-aviso-fondo: #392d18; --ty-aviso-borde: #6b552b; --ty-peligro-tinta: #e16256; --ty-peligro-fondo: #391b18; --ty-peligro-borde: #6b2f2b; --ty-info-tinta: #528fe0; --ty-info-fondo: #182739; --ty-info-borde: #2b4c6b; --ty-s-1: 0 1px 2px rgb(0 0 0 / 40%); --ty-s-2: 0 4px 12px -4px rgb(0 0 0 / 50%); --ty-s-3: 0 12px 28px -10px rgb(0 0 0 / 60%); --ty-s-4: 0 32px 64px -24px rgb(0 0 0 / 70%); } /* ─── DENSIDAD COMPACTA ─────────────────────────────────────────────────────────────────────── Para listas largas. No cambia tamaños de letra por debajo del suelo de 12px: cambia el aire. */ [data-densidad="compacta"] { --ty-fila: 34px; --ty-celda-y: var(--ty-e-2); --ty-celda-x: var(--ty-e-3); --ty-control: 32px; } /* ─── MOVIMIENTO REDUCIDO ───────────────────────────────────────────────────────────────────── Se anula desde los tokens, así que cualquier componente que los use queda cubierto sin tener que acordarse. Hoy solo hay 3 reglas de `prefers-reduced-motion` en todo el ERP. */ @media (prefers-reduced-motion: reduce) { :root { --ty-v-rapida: 0ms; --ty-v-media: 0ms; --ty-v-lenta: 0ms; } }