/* ═══════════════════════════════════════════════════════════════════════════ Multi X · identidad corporativa ─────────────────────────────────────────────────────────────────────────── Aprobada el 17-08-2026 y aplicada a TODOS los usuarios. Antes fue un piloto acotado al rol Admin: de ahí vienen dos rasgos que conviene entender antes de tocar este archivo, porque ya no son necesarios pero sí son útiles. ⚠ Todo sigue acotado a `html[data-diseno]`, y las reservas `var(--mx-token, #elHexDeSiempre)` siguen en su lugar. Hoy el atributo lo pone siempre el `` de `index.html`, así que las reservas no se usan nunca. NO son código muerto: son lo que permite volver atrás quitando una línea del ``. Quitarlas es una decisión aparte, no una limpieza. El interruptor del tema está en `componentes/switch-tema.js` y lo ve cualquiera: los dos ejes son una preferencia personal, no un permiso. ── La tesis ─────────────────────────────────────────────────────────────── El login ya estableció el lenguaje: la página es un DOCUMENTO, y la referencia es el horizonte de un fiordo — agua profunda, cielo pálido, una línea dura entre los dos. La aplicación extiende ese mismo gesto en vez de inventar otro: el marco (topbar + sidebar) = el agua → azul #003A70 la superficie de trabajo = el cielo → papel #F4F6F9 la regla de 3px entre ambos = el horizonte → coral #FF5959 ── La regla que hereda del login, y que no se rompe ─────────────────────── El coral aparece UNA sola vez en toda la pantalla: la línea bajo el topbar. No vive en botones, ni en estados, ni en el ítem activo del menú. El motivo está escrito en login.html y sigue vigente: en este dashboard el rojo significa error —tanda fallida, divergencia— así que el acento de marca no puede aparecer en un control sin leerse como alerta. Por eso el ítem activo del menú se marca en BLANCO PAPEL, no en coral. ── Alcance, y por qué es seguro ─────────────────────────────────────────── · El marco cambia en toda la app: es un cambio de tono sobre algo que ya era oscuro, así que las 11 vistas no incluidas en el piloto siguen legibles. · La superficie clara y el rediseño de contenido se aplican SOLO a las dos vistas del piloto, acotados por `body:has(.us-container)` y `body:has(.rp-container)` — o sea, por el contenedor que cada vista pinta. Gestión de Usuarios y Gestión de Roles son las únicas del proyecto con el 100% de sus clases CSS exclusivas (38/38 y 48/48): nada de lo que se toque acá puede alcanzar a otra pantalla. · Los estilos de esas dos vistas se INYECTAN desde su propio JS, así que este archivo gana por especificidad (`body:has(.us-container) .us-table` pesa más que `.us-table`) sin depender del orden de carga. ⚠ Y por eso NO hay una sola línea de JavaScript acá. El primer intento marcaba la vista con `body[data-vista]` desde `showView`, y no funcionó: SIETE módulos de vista (usuarios, roles-permisos, payment-confirm, purchase-invoices, sales-invoices, deuda-financiera y flujo-caja) reemplazan `window.showView` encadenándose uno sobre otro, y el de `usuarios` atiende su propia vista y retorna SIN delegar. Cualquier envoltura que se instale antes que ellos queda enterrada; cualquiera que se instale después es frágil. Preguntarle al DOM qué se está mostrando no depende de esa pila. ═══════════════════════════════════════════════════════════════════════════ */ /* ⚠ Va en `html[data-diseno]`, NO en `:root`, y el motivo apareció tarde: `deuda-financiera.js` ahora escribe sus colores como `var(--mx-error,#ff8585)` —el token si el piloto está puesto, el hex de siempre si no—. Con estas variables definidas en `:root` existirían SIEMPRE, así que la reserva no se usaría nunca y el CFO vería colores de estado distintos sin que nadie haya activado nada. Acotarlas es lo que hace verdadera la promesa de que apagar el piloto deja la pantalla exactamente como estaba. */ html[data-diseno] { /* Medidos sobre el logotipo oficial. Son los mismos ocho del login: este archivo no introduce ni un color nuevo. */ --mx-navy: #003A70; --mx-navy-deep: #002A52; --mx-navy-soft: #0A4A85; /* hover sobre el agua, sin salirse del azul */ --mx-coral: #FF5959; --mx-paper: #FFFFFF; --mx-paper-2: #F4F6F9; --mx-ink: #0E1A26; --mx-ink-2: #5C6E7E; --mx-rule: #DCE3EA; --mx-error: #B3261E; /* rojo de ESTADO, deliberadamente ≠ coral */ --mx-error-bg: #FDECEA; --mx-ok: #0F7A5A; /* verde de estado, no de marca */ --mx-ok-bg: #E7F4EF; --mx-rule-w: 3px; /* el grosor del login, sin cambiar */ } /* ═══════════════════════════════════════════════════════════════════════════ LAS DOS PALETAS DEL CONTENIDO — `data-tema` ─────────────────────────────────────────────────────────────────────────── Los ocho tokens de arriba son la MARCA: fijos, medidos sobre el logotipo, no cambian nunca. Los de acá abajo son los ROLES que el contenido usa — superficie, tinta, línea, acento— y son los que el tema da vuelta. La distinción no es cosmética. `--mx-navy` cumplía los dos papeles a la vez: el fondo del topbar marino y el acento de los títulos. Con un solo nombre, oscurecer el contenido arrastraba el marco, y era imposible tener el marco azul con las tarjetas oscuras — que es justamente una de las combinaciones que se quieren comparar. ⚠ Esto vale para Gestión de Usuarios y Gestión de Roles. El resto de la app la cambia `tema-claro.css`, que da vuelta los 20 tokens de `styles.css`. Son dos archivos porque son dos capas distintas, y el tema tiene que mover las dos a la vez: si moviera solo una, la vista rediseñada quedaría clara sobre una app oscura, o al revés. ═══════════════════════════════════════════════════════════════════════════ */ /* ⚠ El claro va en `html[data-diseno]` a secas, SIN pedir `data-tema`, y eso es deliberado: es la red de seguridad. Si alguna vez el atributo del tema falta —un valor raro en `localStorage`, una variante nueva sin tema natural—, estas variables igual tienen valor. Sin esa red, las declaraciones que las usan se descartan por inválidas y la vista sale a medio pintar, sin un solo error en consola: exactamente la clase de falla muda que este proyecto ya conoce. */ html[data-diseno] { --mx-sup: var(--mx-paper); --mx-sup-2: var(--mx-paper-2); --mx-tinta: var(--mx-ink); --mx-tinta-2: var(--mx-ink-2); --mx-linea: var(--mx-rule); --mx-acento: var(--mx-navy); --mx-acento-hondo: var(--mx-navy-deep); --mx-acento-suave: var(--mx-navy-soft); --mx-avi: #8A5A00; /* aviso: el ámbar de "sin guardar" */ --mx-avi-bg: #FDF4E3; --mx-avi-linea: #E4C88A; /* ── El acento SÓLIDO es otro token, y tiene que serlo ──────────────────── `--mx-acento` es para TEXTO y BORDES: se elige para leerse SOBRE la superficie. Rellenar un botón con él y poner texto blanco encima es la operación inversa, y en tema oscuro sale mal: ahí el acento es un azul claro (#6FB2E8) y el blanco encima da 2,28:1. Medido en el botón "Ver + Autorizar" de la matriz de permisos, HABILITADO. ⚠ No lo encontró ninguna de las verificaciones anteriores porque el barrido no incluía la vista de Roles —la única del piloto con un control relleno— y porque en el rol que se abre primero, Admin, los 35 botones están deshabilitados: ahí un contraste bajo es correcto y esperable. */ --mx-acento-solido: var(--mx-navy); --mx-sobre-acento: #FFFFFF; --mx-acento-tenue: rgba(0, 58, 112, .07); /* ── Niveles que Deuda Financiera necesita y las dos primeras no ────────── Su hoja distingue tres profundidades de superficie —tarjeta, campo hundido y encabezado realzado— y tres niveles de texto. Con dos de cada uno había que aplastar distinciones que la vista usa para separar la tabla de sus encabezados y de sus campos editables. */ --mx-sup-hund: #F7F9FB; /* campos, pistas de barra, pie de tabla */ --mx-sup-alza: #EEF2F7; /* encabezado de tabla, hover, pestanas */ --mx-linea-2: #C4D0DC; /* borde de control, mas firme que el de bloque */ /* ⚠ Era #6E8093 y este comentario afirmaba "4,9:1 sobre papel". Cierto sobre el papel blanco puro, FALSO donde el token se usa de verdad: los rotulos viven sobre --mx-sup-alza (#EEF2F7), y ahi daba 3,58:1. Medir contra el fondo que el token va a tener, no contra el mas claro de la paleta. */ --mx-tinta-3: #586A7E; /* rotulos y unidades; 4,90:1 sobre --mx-sup-alza */ --mx-teal: #0E6E64; /* la serie de alimento: dato, no marca */ } html[data-diseno][data-tema="oscuro"] { /* Las superficies NO son el claro invertido: son azules desaturados, para que el marco azul y el contenido se lean como la misma familia. Un gris neutro acá hace que el topbar parezca pegado de otra aplicación. */ --mx-sup: #10233A; /* tarjetas, modales */ --mx-sup-2: #0A1828; /* fondo de la vista */ --mx-tinta: #E8EEF4; --mx-tinta-2: #94A8BC; /* 5,9:1 sobre --mx-sup */ --mx-linea: #1E3450; /* ⚠ El azul de marca #003A70 sobre un fondo oscuro da 1,4:1: como acento es invisible. Se sube en luminancia conservando el matiz — sigue siendo el mismo azul, no otro color. El de marca queda para el marco, donde va sobre blanco y sí se lee. */ --mx-acento: #6FB2E8; --mx-acento-hondo: #0A1828; --mx-acento-suave: #1B4A78; --mx-avi: #E5B25C; --mx-avi-bg: rgba(229, 178, 92, .12); --mx-avi-linea: rgba(229, 178, 92, .34); /* El sólido va al lado OPUESTO que el acento: mientras el de texto sube en luminancia para leerse sobre el fondo, este baja para que el blanco se lea sobre él. Blanco sobre #1B4A78 da 9,1:1. */ --mx-acento-solido: #1B4A78; --mx-sobre-acento: #FFFFFF; --mx-acento-tenue: rgba(111, 178, 232, .12); --mx-sup-hund: #071220; --mx-sup-alza: #16304C; --mx-linea-2: #2A4463; --mx-tinta-3: #7D93AB; --mx-teal: #5FD6C4; /* Los estados también suben: los de arriba están calculados sobre papel. */ --mx-error: #FF8A80; --mx-error-bg: rgba(255, 138, 128, .12); --mx-ok: #5FD3A6; --mx-ok-bg: rgba(95, 211, 166, .12); } /* ═══════════════════════════════════════════════════════════════════════════ EL MARCO — el agua ─────────────────────────────────────────────────────────────────────────── Escrito en DOS capas, y la separación es el punto: · el GESTO — la línea coral, el trazo de 3px del ítem activo, las versalitas del rótulo. Es lo que hace corporativo al marco, y es IGUAL en las tres variantes. · el COLOR — sale de siete variables que cada variante redefine. Las reglas de abajo no saben en qué variante están. Las dos variantes, y en qué se diferencian de verdad: papel — membrete y menú en papel. La más cercana a multi-xsalmon.com, y la elegida como diseño por defecto. marino — el agua ocupa el marco entero. La más rotunda. Hubo una tercera, `contraste` (banda de marca arriba, menú en papel). Se descartó al elegir: dejar tres marcos vivos significaba tres combinaciones más que mantener y verificar, y ninguna aportaba algo que estas dos no den. ⚠ El marco es INDEPENDIENTE del tema. Se puede tener el marco marino con el contenido claro, o el marco papel con el contenido oscuro: son dos ejes, y la gracia de tenerlos separados es poder comparar las combinaciones. Lo único que el tema le impone al marco es que `marino` mantiene su banda azul en los dos temas — esa banda ES la variante. ═══════════════════════════════════════════════════════════════════════════ */ /* ── El marco: el azul de marca ocupa el membrete y el menú ──────────────── */ /* Hubo dos variantes en evaluación —`papel`, con el membrete claro— y se eligió ésta el 17-08-2026. Con `papel` se fue lo único que dependía de ella: el cambio del logotipo. El del topbar es la versión BLANCA, y acá el membrete es azul en los dos temas, así que se lee siempre. ⚠ El marco NO sigue al tema, y es deliberado: el azul es la marca. El tema cambia la superficie de trabajo, no el membrete. Por eso `--mx-marco-*` no tiene una variante por tema. El atributo `data-diseno="marino"` se conserva aunque hoy tenga un solo valor: es lo que acota toda esta hoja, y quitarlo obligaría a reescribir 125 reglas. */ html[data-diseno="marino"] { --mx-marco-tinta: #FFFFFF; --mx-marco-suave: rgba(255, 255, 255, .72); --mx-marco-tenue: rgba(255, 255, 255, .42); --mx-marco-hueco: rgba(255, 255, 255, .10); --mx-marco-fondo: var(--mx-navy); --mx-marco-menu: var(--mx-navy-deep); --mx-marco-hover: var(--mx-navy-soft); --mx-marco-activo: var(--mx-navy); } /* ── El bloque del usuario y el botón de salir ───────────────────────────── Traen su color propio de `styles.css` (`var(--text)`), y un color propio le gana a lo que hereden del `.topbar`. Como `--text` lo mueve el TEMA y el fondo del membrete lo fija la VARIANTE, quedan desacoplados: cada combinación donde apuntan en direcciones opuestas produce texto invisible. Pasó en las dos direcciones, y ninguna existe en un solo eje: papel + oscuro → nombre casi blanco sobre membrete blanco 1,1:1 marino + claro → nombre oscuro sobre membrete azul 1,54:1 "Salir" 1,51:1 Por eso se resuelven contra `--mx-marco-*`, que cada variante ya define según el color de SU membrete: la regla no necesita saber en qué variante ni en qué tema está. ⚠ Los dos bugs los encontró un barrido de TODO el texto visible, no una lista de selectores. Las cuatro verificaciones anteriores daban verde porque este texto no estaba en la lista — y una lista escrita a mano solo encuentra lo que uno ya sospecha. */ /* ⚠ El círculo del avatar queda AFUERA: tiene fondo propio (`var(--blue)`) y su letra es blanca. La primera versión de esta regla decía `#userInfo div` a secas y le pintó la inicial del mismo color que su círculo — 1:1, la letra desapareció dentro del disco. Arreglar un texto invisible creando otro. */ html[data-diseno] #userInfo, html[data-diseno] #userInfo div:not([style*="border-radius"]) { color: var(--mx-marco-tinta) !important; } /* La segunda línea (el rol) se distingue por su tamaño, que `auth.js` fija en línea. Un `div + div` acá agarraba el contenedor de las dos líneas, no la segunda línea. */ html[data-diseno] #userInfo div[style*="font-size:11px"] { color: var(--mx-marco-suave) !important; } html[data-diseno] .topbar button, html[data-diseno] .topbar .btn-logout { color: var(--mx-marco-tinta) !important; } /* El switch del tema se pinta solo: no debe recibir la tinta del marco. * * ⚠ La regla de arriba alcanza a TODO `button` del membrete con `!important`, y el * switch es un `