/* ========================================================================= ESSENCELAB ERP — DESIGN TOKENS Fuente única de verdad para color, tipografía, espaciado, radios, sombras, movimiento y breakpoints. REGLAS 1. Ningún componente define un color, radio o duración literal. Si necesitas un valor que no está aquí, se añade aquí primero. 2. Todos los pares texto/fondo de esta paleta cumplen WCAG AA (>=4.5:1). Verificado con scripts/check-contrast.js — no cambiar un color sin volver a correrlo. 3. Espaciado sobre rejilla de 4px. No hay valores impares. Dirección (2026-09-15): base clara cálida, verde profundo como acción y oro sólo como señal de marca. Sustituye a la dirección oscura anterior. Elevación por borde y escalón de fondo, nunca por sombra. NINGÚN NOMBRE DE TOKEN HA CAMBIADO EN ESTA REVISIÓN — sólo los valores. Es deliberado: hay ~448 atributos style="" en js/ que referencian estos nombres, más los alias de compatibilidad del final del archivo y los pares de scripts/check-contrast.js. Cambiar un nombre obligaría a editar cientos de sitios y a tocar lógica de negocio para conseguir exactamente el mismo resultado visual. ========================================================================= */ :root { /* ── SUPERFICIES ─────────────────────────────────────────────────────── Escalera de 5 pasos, ahora ascendente en claridad invertida: el lienzo es el blanco cálido y las tarjetas son el blanco puro, de modo que una tarjeta "flota" por ser MÁS clara que el fondo sin necesitar sombra. */ --surface-canvas: #faf9f7; /* fondo de la app — blanco cálido */ --surface-base: #ffffff; /* tarjetas, sidebar, topbar, modales */ --surface-raised: #f3f1ed; /* thead, inputs, celdas anidadas, filas alternas */ --surface-hover: #edeae4; /* hover de fila / item */ --surface-active: #e4e0d9; /* pressed / seleccionado */ /* ── BORDES ── El separador es el borde, no la sombra: por eso hay tres pesos. */ --border-subtle: #eeebe5; /* separadores internos (filas de tabla) */ --border-default: #e4e0d9; /* borde de tarjeta, input, botón */ --border-strong: #cfc9bf; /* hover de tarjeta, divisores marcados */ /* Borde de CAMPO de formulario (input, select, textarea, buscador). WCAG 1.4.11 exige 3:1 al contorno de un control cuando es lo único que lo identifica — y un campo vacío no tiene otra cosa. Los dos bordes de arriba se quedan en 1.32:1 y 1.65:1, así que no sirven aquí. Botones y tarjetas no lo usan: un botón se identifica por su etiqueta y su relleno, y una tarjeta no es un control. */ --border-control: #938f88; /* 3.2:1 sobre blanco · 3.1:1 sobre el lienzo */ /* ── TEXTO — todos AA sobre las cuatro superficies de arriba ── El fondo más exigente es --surface-hover (#edeae4); los ratios anotados son los de ESE peor caso, no los del blanco puro. */ --text-primary: #1c1b19; /* 14.3:1 — títulos, valores, datos */ --text-secondary: #57534c; /* 6.9:1 — cuerpo secundario, labels */ --text-tertiary: #6c6862; /* 4.6:1 — metadatos, th, placeholders. Es el suelo: por debajo se falla AA. */ --text-on-accent: #ffffff; /* 10.2:1 sobre --accent */ --text-inverse: #ffffff; /* sobre superficies oscuras (banda de marca) */ /* Único gris por debajo del suelo AA. WCAG 1.4.3 exime explícitamente a los controles deshabilitados, y SÓLO ahí se puede usar. No vale para placeholders ni para metadatos: para eso está --text-tertiary. */ --text-disabled: #9a958c; /* ── ACENTO ─────────────────────────────────────────────────────────── Verde profundo. Un solo acento con tres funciones: acción primaria, estado activo y foco. Sin degradados, sin glow. Si algo es verde, es accionable o está activo. */ --accent: #1f3a34; /* 10.2:1 — acción primaria, activo, foco */ --accent-hover: #162b26; /* hover del botón primario */ --accent-pressed: #0f1f1b; --accent-subtle: #e8edeb; /* fondo de estado activo/seleccionado */ --accent-muted: #c3d2ce; /* borde de estado activo */ /* ── ORO DE MARCA ───────────────────────────────────────────────────── Con extrema moderación: subrayado de pestaña activa, icono destacado, banda de marca de los documentos impresos. NUNCA como texto de cuerpo ni como fondo de botón. Oscurecido un 9% respecto al #b08d57 propuesto para alcanzar el 3:1 que AA exige a un indicador no textual. */ --accent-gold: #a0804f; /* 3.1:1 sobre el peor fondo — sólo detalle */ /* ── SEMÁNTICOS — texto AA sobre cualquier superficie ── Apagados, nunca puros. --warning va un 9% más oscuro que el #9a6b1f propuesto: a ese valor se quedaba en 3.89:1 sobre --surface-hover. */ --success: #2f6b4f; /* 5.2:1 */ --danger: #8c2f2f; /* 6.8:1 */ --warning: #8c611c; /* 4.6:1 */ --info: #2f5a6b; /* 6.3:1 */ /* Fondos y bordes de badge. Opacos, no rgba: sobre un fondo claro una capa translúcida del propio color se lava y pierde el borde. */ --success-bg: #edf3ef; --success-border: #c8ddd2; --danger-bg: #f7ecec; --danger-border: #e3c7c7; --warning-bg: #f7f0e3; --warning-border: #e2d2b3; --info-bg: #ebf1f4; --info-border: #c6d7de; --neutral-bg: #f3f1ed; --neutral-border: #ddd8cf; /* ── SERIE CATEGÓRICA DE GRÁFICOS ───────────────────────────────────── Ocho colores para barras y líneas. Tonal, no arcoíris: una rampa del verde de acento alternada con el oro de marca y dos neutros fríos. Un desglose de gasto no necesita once colores saturados, necesita que se distingan entre sí y no compitan con el dato. Se leen desde JS con Views.token() — no se duplican en js/. */ --chart-1: #1f3a34; /* verde de acento */ --chart-2: #a0804f; /* oro de marca */ --chart-3: #3f6b62; /* verde medio */ --chart-4: #2f5a6b; /* azul apagado */ --chart-5: #8c611c; /* ámbar */ --chart-6: #5e7a72; /* verde grisáceo */ --chart-7: #8c2f2f; /* terracota */ --chart-8: #6b6152; /* topo */ /* ── TIPOGRAFÍA ─────────────────────────────────────────────────────── Una sola familia. Sin serif de titulares: en un ERP denso la mezcla no aporta y cuesta una segunda descarga. Los numerales tabulares de Inter cubren el caso de las cifras. */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; /* Escala. Cualquier tamaño fuera de esta lista es un bug. --fs-xs (12px) se conserva fuera de la escala de 6 pasos pedida: es el tamaño de los metadatos de celda y de los pies de tarjeta, y subirlo a 13px ensancharía filas en todas las tablas — es decir, un cambio de layout, que está fuera del alcance de este rediseño. */ --fs-micro: 0.6875rem; /* 11px — labels en versalitas, kbd */ --fs-xs: 0.75rem; /* 12px — metadatos, celdas densas */ --fs-sm: 0.8125rem; /* 13px — cuerpo de tabla, botones */ --fs-md: 0.875rem; /* 14px — cuerpo por defecto */ --fs-lg: 1rem; /* 16px — subtítulo, título de tarjeta */ --fs-xl: 1.25rem; /* 20px — título de sección, modal, topbar */ --fs-2xl: 1.25rem; /* 20px — valor de KPI (era 24px: fuera de escala) */ --fs-3xl: 1.75rem; /* 28px — título de página */ /* Sin pesos por encima de 600. --fw-bold se mantiene como nombre porque lo referencian componentes existentes, pero apunta a 600. */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 600; --lh-tight: 1.25; /* titulares, valores de KPI */ --lh-snug: 1.4; /* celdas de tabla, UI densa */ --lh-normal: 1.5; /* párrafos */ --tracking-label: 0.06em; /* versalitas de 11px */ /* ── ESPACIADO — rejilla de 4px. Sin cambios en este rediseño. ── */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ /* ── RADIOS — 6px en controles, 10px en contenedores. Uniforme. ── */ --r-xs: 4px; /* checkbox, kbd, chip pequeño */ --r-sm: 6px; /* botón pequeño, badge */ --r-md: 6px; /* botón, input, select, nav item */ --r-lg: 10px; /* tarjeta, modal, panel */ --r-xl: 10px; /* barra flotante */ --r-full: 999px; /* pill, avatar */ /* ── SOMBRAS — casi inexistentes ── Sobre fondo claro una sombra fuerte ensucia. Las tarjetas NO llevan sombra: se separan por borde y escalón de fondo. Estos dos valores son sólo para capas que flotan de verdad sobre el contenido. */ /* Velo de modal y de drawer. Sobre lienzo claro un negro al 75% resulta brutal: basta con apagar el fondo lo justo para que el diálogo mande. */ --scrim: rgba(28, 27, 25, 0.35); --shadow-popover: 0 1px 2px rgba(28, 27, 25, 0.04); /* Mismo valor que el popover: el techo de la dirección es 0 1px 2px al 4%. Un modal no necesita más sombra para destacar — lo separan su borde --border-strong y el velo --scrim de detrás. */ --shadow-overlay: 0 1px 2px rgba(28, 27, 25, 0.04); /* ── FOCO ───────────────────────────────────────────────────────────── Outline de 2px en --accent con 2px de separación. 10.2:1 contra cualquier superficie, muy por encima del 3:1 que exige AA a un indicador. Es `outline` y no `box-shadow` (como era antes) por una razón práctica: el modo de alto contraste de Windows (forced-colors) BORRA las sombras, así que un anillo hecho con box-shadow desaparece justo para quien más lo necesita. El outline lo conserva y además sigue el radio del elemento sin reglas extra. Nunca se quita. */ --focus-color: var(--accent); --focus-width: 2px; --focus-offset: 2px; /* ── MOVIMIENTO — sin rebote, sólo opacity y transform. ── */ --dur-fast: 120ms; --dur-base: 160ms; --dur-slow: 240ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); --t-fast: var(--dur-fast) var(--ease); --t-base: var(--dur-base) var(--ease); /* ── LAYOUT — sin cambios en este rediseño. ── */ --sidebar-w: 248px; --topbar-h: 56px; --content-max: 1600px; --control-h: 36px; --control-h-sm: 28px; --control-h-lg: 44px; /* mínimo táctil WCAG 2.5.5 */ /* ── BREAKPOINTS (referencia — @media no acepta var()) ── sm 480px · md 768px · lg 1024px · xl 1280px · 2xl 1600px */ } /* ========================================================================= ALIAS DE COMPATIBILIDAD `js/views.js`, `js/modals.js` y `js/app.js` referencian los nombres antiguos desde cientos de atributos style="" inline. Los nombres viejos se redefinen apuntando a los tokens nuevos en vez de editarlos uno a uno. Estos alias se van retirando conforme cada pantalla se migra. No añadir alias nuevos. ========================================================================= */ :root { --bg-primary: var(--surface-canvas); --bg-secondary: var(--surface-raised); --bg-card: var(--surface-base); --bg-hover: var(--surface-hover); --bg-input: var(--surface-base); --border: var(--border-default); --border-light: var(--border-strong); /* El "oro" de los componentes existentes pasa a ser el verde de acción. Es intencionado: casi todos sus usos son acción primaria, estado activo o foco, que en la dirección nueva son --accent. El oro de marca real tiene nombre propio (--accent-gold) y se aplica a mano donde toca. */ --gold: var(--accent); --gold-light: var(--accent-hover); --gold-dark: var(--accent-pressed); --gold-glow: var(--accent-subtle); --gold-glow-lg: var(--accent-muted); --white: #ffffff; /* --text-primary y --text-secondary ya son tokens del sistema nuevo y se llaman igual que los antiguos: NO se re-declaran aquí. Escribir `--text-secondary: var(--text-secondary)` crea una referencia cíclica que, según la spec de Custom Properties, deja la propiedad como "invalid at computed-value time" — es decir, vacía. El síntoma es sutil: todo lo que la usa hereda el color del padre en vez de fallar visible. */ --text-muted: var(--text-tertiary); --success-light: var(--success); --warning-light: var(--warning); --danger-light: var(--danger); --info-light: var(--info); --sidebar-width: var(--sidebar-w); --header-height: var(--topbar-h); --radius-sm: var(--r-xs); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); --shadow-sm: var(--shadow-popover); --shadow-md: var(--shadow-popover); --shadow-lg: var(--shadow-overlay); --transition: var(--t-base); --transition-slow: var(--dur-slow) var(--ease); --transition-bounce: var(--t-base); } /* Rellenos sólidos de color semántico (bordes de columna kanban, botón de borrar). En la dirección oscura eran tonos muy oscuros sobre los que iba texto blanco; aquí son los fondos suaves del badge, con el texto en el semántico correspondiente. */ :root { --fill-success: var(--success-bg); --fill-danger: var(--danger-bg); --fill-warning: var(--warning-bg); --fill-info: var(--info-bg); }