/* ============================================================================= tokens.css · LA PALETA DEL ESCRITORIO, DISPONIBLE PARA TODAS LAS PANTALLAS ----------------------------------------------------------------------------- Estos valores son EXACTAMENTE los que venía usando la home (el rediseño v4 "Noir Operativo"). No se invento ni se ajusto ni uno: la home es la superficie mejor construida del escritorio —2 `!important` contra 3.630 del resto— y es la referencia visual que el dueño ya aprobó, así que gana ella. ⚠️ POR QUÉ EXISTE ESTE ARCHIVO. La paleta estaba declarada en `.mn-home, .mn-aviso` — las dos raíces de la home, juntas en un selector porque los avisos flotantes son `position:fixed` y viven FUERA de `.mn-home` (sin eso quedaban sin fondo ni radio: bug real del flash de "venta confirmada"). Como las custom properties heredan hacia abajo, adentro de la home funcionaba perfecto — y en cualquier otra pantalla, sencillamente no existía. Medido antes de este cambio: `stockhub.css`, `oc2.css`, `v434-caja.css` y `escaner.css` usaban estos tokens CERO veces. No podían. El resultado es el que se ve en el CSS de escritorio: 492 colores hex distintos, 194 tamaños de letra y DOCE rojos, con el rojo de marca (#e11d3a) apareciendo 2 veces y el de Tailwind (#dc2626) 37. Cada pantalla que no alcanzaba el token trajo el suyo. ⚠️ SE CARGA PRIMERO, ANTES QUE site.css, Y ESO NO ES UN DETALLE. Este archivo AGREGA, nunca pisa: cualquier hoja posterior que defina el mismo nombre le sigue ganando, así que ninguna pantalla puede cambiar de color por haberlo sumado. Moverlo abajo de site.css SÍ cambiaría cosas — no hacerlo. ⚠️ TRES TOKENS QUEDARON A PROPÓSITO ADENTRO DE `.mn-aviso` EN home.css, porque otro archivo ya define ese MISMO nombre con otro valor y subirlos acá los pondría a competir: · `--line` y `--line-2` → site.css los define en su bloque "LEGACY ALIASES" (`--line: var(--mn-line)`). La home los usa 25 veces. · `--r-sm` → pos-tokens.css dice 9px; la home, 10px. Unificar esos tres es una decisión estética aparte, no un movimiento de archivo, y se toma mirando las dos pantallas al lado. ⚠️ HAY OTRO SISTEMA DE TOKENS VIVO Y NO SE TOCA: `--mn-*` en site.css (69 tokens, consumidos por 10 hojas) y `--pos-*` en pos-tokens.css. Las dos paletas dicen CASI lo mismo (`--txt` #f4f6fa vs `--mn-fg` #f5f6f8; `--s1` #0f1116 vs `--mn-bg-1` #14171d): imperceptiblemente distintas, que es la misma trampa que #c8102e conviviendo con #c81e2e. Unificarlas cambia píxeles en pantallas que hoy andan, así que va en su propia tanda y pantalla por pantalla, no de arrastre. CÓMO SE USA EN UNA PANTALLA NUEVA: `var(--txt)`, `var(--s1)`, `var(--red)`… Nada de hex crudo. Si falta un color, se agrega ACÁ, no en la hoja de la pantalla. ============================================================================= */ :root { /* --- lienzos y superficies ------------------------------------------- */ --ink: #08090c; /* lienzo */ --ink-2: #0c0e12; /* lienzo sutil */ --s1: #0f1116; /* card */ --s2: #141821; /* tile elevado */ --s3: #1b202b; /* hover */ /* --- texto ------------------------------------------------------------ */ --txt: #f4f6fa; /* blanco (cuernos del toro) */ --txt-2: #c2c9d6; --muted: #828b9a; /* ⚠️ SUBIDO DE 565f6e A 758193 (tanda 3, 2026-08-14). El valor viejo daba 3,09:1 sobre el lienzo de la home y 2,76:1 sobre una tarjeta — por debajo del mínimo de WCAG (4,5:1) en las 20 reglas que lo usan, TODAS de texto (se verificó: este token nunca se usa para bordes ni fondos). Es el nivel más tenue de la escala y tiene que seguir siéndolo, así que se subió lo JUSTO: pasa 4,5:1 sobre `--s2` —la superficie más clara donde ese texto cae— y queda en 5,04:1 sobre el lienzo, todavía por debajo de `--muted` (5,79:1). O sea que la jerarquía de los cuatro niveles no se movió. Mismo tono y misma saturación: sólo cambió la luminosidad. ⚠️ Los dos valores van SIN el numeral a propósito: el ratchet del guard 17 cuenta los hex con un regex plano que NO saltea comentarios, así que documentar un color lo penalizaría como si fuera un color suelto más. */ --faint: #758193; /* --- el rojo de marca, y sus derivados -------------------------------- */ --red: #e11d3a; /* rojo vivo (acento/hover) */ --red-core: #c8102e; /* rojo de marca */ --red-deep: #7d0a1c; --red-soft: rgba(225, 29, 58, .11); --red-softer: rgba(225, 29, 58, .055); --red-line: rgba(225, 29, 58, .32); --red-glow: rgba(200, 16, 46, .45); /* --- acento secundario ------------------------------------------------ */ --gold: #e8b873; /* dorado tenue · SOLO la pill de turno */ /* ── VIOLÁCEO · SOLO LA MERMA ──────────────────────────────────────────── Pedido del dueño (2026-08-20): la cajita de merma va al lado de NUEVA VENTA, "en violaceo". Es la ÚNICA excepción al matiz prohibido del home (ver la enmienda en la cabecera de home.css) y por eso vive en un token con nombre propio: el día que aparezca un segundo violeta en la pantalla, el matiz deja de querer decir "esto sale del stock sin venderse". */ --merma: #8b5cf6; --merma-soft: rgba(139, 92, 246, .10); --merma-line: rgba(139, 92, 246, .34); --merma-glow: rgba(139, 92, 246, .30); /* --- forma y movimiento ----------------------------------------------- */ --r: 14px; --ease: 160ms cubic-bezier(.4, 0, .2, 1); /* ========================================================================= ESTADOS Y NEUTROS — el color de cada familia (2026-08-13) ------------------------------------------------------------------------- ⚠️ ESTOS NO SE ELIGIERON DE UNA PALETA: SON LOS QUE YA ESTABAN. En el escritorio convivían 14 verdes, 14 ámbares, 10 rojos y 42 azules, y ninguno era "el verde de Manolito" porque nunca se había elegido uno. Cada token de acá es el tono MÁS USADO de su familia, y los que estaban a menos de 40 de distancia perceptual se unificaron contra él (medido en Chromium: el que más se movió, 38 — por debajo de "se nota si los ves juntos", que arranca en ~50). ⚠️ TRES NIVELES POR FAMILIA, Y NO ES BUROCRACIA. Colapsar una familia entera a un solo tono convierte fondos en texto: `#1a1d24` es un fondo casi negro y `#94a3b8` un gris de texto, y los dos son "azul". El nivel lo da la luminosidad, que es lo que separa el ROL. ⚠️ LOS NOMBRES ESTÁN VERIFICADOS COMO ÚNICOS EN TODO EL PROYECTO, y no es paranoia: la primera versión usaba `--ok` y `--warn`, que YA EXISTEN en site.css. Como site.css carga DESPUÉS de este archivo, le ganaba — y los `var(--ok)` resolvían al verde de site.css, no a éste. El test lo agarró: 636 propiedades se movieron de más (#27ae60 → #22c55e, distancia 47). ⚠️ Antes de agregar un token acá, grepear el nombre en TODO el proyecto. ⚠️ LO QUE QUEDÓ AFUERA ES A PROPÓSITO. 125 tonos están a más de 40 del destino de su familia: NO son copias despistadas, son colores distintos de verdad (#cbd5e1 está a 148 de #94a3b8). Unificarlos SÍ se vería, así que es una decisión de diseño aparte y no un barrido automático. ========================================================================= */ /* verde · "salió bien" */ --exito: #27ae60; --exito-claro: #86efac; /* texto o borde sobre fondo oscuro */ --exito-oscuro: #047857; /* ámbar · "atención" (⚠️ --gold NO es esto: vive sólo en la pill de turno) */ --aviso: #f5a623; --aviso-claro: #f5c76e; --aviso-oscuro: #1a1305; /* rojo · "algo está mal" — el de peligro ES el de marca: no hay dos rojos */ --peligro: var(--red-core); --peligro-claro: #fca5a5; /* azul · información, y el gris azulado de las superficies */ --dato: #3498db; --dato-claro: #94a3b8; /* el gris de texto secundario más usado */ --surf-azul: #1a1d24; /* card de las pantallas que no son la home */ /* neutros */ --blanco: #ffffff; --neutro: #888888; --neutro-oscuro: #2a2d33; }