/* ===================================================================== Mosal CRM · «Bandeja clara» · ui/tokens.css (15/10/2026) --------------------------------------------------------------------- Única fuente de color, letra, espacio, radios, sombras, capas y medidas de la capa común de interfaz (ui/components.css, ui/dialogo.js). Convive con lo que ya hay en el mismo documento: · Todo lleva el prefijo --m- para no pisar --muted, --border, --ink, --blue, --r-* (seguimiento.css), --fs-* (tipografia.css) ni --brand-* (style.css, clientes.css, technical-entry.css). · No declara @font-face: Inter ya la carga tipografia.css (public/fonts/inter-latin-wght-normal.woff2). · Solo define propiedades personalizadas y las clases .m-ph-1 … .m-ph-6 (que solo asignan propiedades): cargarlo no cambia nada de lo que no use las clases .m-*. Regla: ningún color nuevo fuera de este fichero. Si falta uno, se añade aquí con su contraste medido. Contrastes medidos (WCAG 2.1): texto ≥ 4,5:1 y elementos de interfaz ≥ 3:1. Cada valor indica su relación sobre blanco salvo que se diga. ===================================================================== */ :root { /* ---------- Letra (rem; cuerpo 16 px, suelo 12 px) ---------- */ --m-font: "Inter", "Inter fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --m-font-brand: Georgia, "Times New Roman", serif; /* solo «MOSAL ELECTRIC» */ --m-fs-12: 0.75rem; /* suelo: número de fase, teclas, contadores. Nunca texto corrido */ --m-fs-14: 0.875rem; /* metadatos, celdas secundarias, etiquetas de fase */ --m-fs-15: 0.9375rem; /* celdas de tabla, elementos de la barra lateral */ --m-fs-16: 1rem; /* cuerpo, título de fila, botones */ --m-fs-18: 1.125rem; /* cuerpo del técnico, nombre en el cajón */ --m-fs-20: 1.25rem; /* verbo de «Ahora», títulos de bloque y de diálogo */ --m-fs-24: 1.5rem; /* nombre del cliente en el móvil */ --m-fs-28: 1.75rem; /* título de página */ --m-fs-32: 2rem; /* nombre en la ficha */ --m-lh-tight: 1.2; --m-lh-snug: 1.35; --m-lh-body: 1.5; /* 1.4.12: texto corrido a 1,5 */ --m-fw-regular: 400; --m-fw-medium: 500; --m-fw-semibold: 600; --m-fw-bold: 700; /* ---------- Espacio (base 4 px, en rem para que crezca con el texto) ---------- */ --m-sp-1: 0.25rem; --m-sp-2: 0.5rem; --m-sp-3: 0.75rem; --m-sp-4: 1rem; --m-sp-5: 1.25rem; --m-sp-6: 1.5rem; --m-sp-8: 2rem; --m-sp-10: 2.5rem; --m-sp-12: 3rem; --m-sp-16: 4rem; /* ---------- Radios ---------- */ --m-r-sm: 6px; --m-r-md: 8px; --m-r-lg: 12px; --m-r-xl: 16px; --m-r-pill: 999px; /* ---------- Neutros (gris con un punto verde de la marca) ---------- */ --m-bg: #f6f7f6; /* lienzo */ --m-surface: #ffffff; /* listas, tarjetas, cajón, diálogo */ --m-subtle: #eef1ef; /* cabeceras de grupo, zonas tranquilas */ --m-hover: #f2f5f3; /* fila al pasar el ratón */ --m-selected: #e8eee9; /* fila abierta en el cajón */ --m-mine: #fbfcfb; /* fila propia en una tabla de varios */ --m-line: #e2e6e3; /* separadores (decorativo) */ --m-line-strong: #c9cfcb; /* borde de tarjeta (decorativo) */ --m-control: #6f7a73; /* borde de campos, botón secundario, pista: 4,46:1 (3,92:1 sobre --m-subtle) */ --m-text: #17201b; /* 16,7:1 */ --m-text-2: #3c4741; /* 9,7:1 */ --m-muted: #56615b; /* 6,5:1 · 5,7:1 sobre --m-subtle · 5,5:1 sobre --m-selected */ /* ---------- Acción: tinta, no color ---------- El color queda para significar (fase y estado). Así ningún azul de «actúa» compite con el azul de Contratos. */ --m-action: #17201b; /* blanco encima: 16,7:1 (también al sol) */ --m-action-hover: #2c3832; --m-on-action: #ffffff; --m-link: #17201b; /* enlaces: tinta y SIEMPRE subrayados */ --m-link-line: #6f7a73; /* ---------- Foco: uno solo en todo el CRM ---------- Contorno de 3 px separado 2 px (sobrevive al modo de alto contraste). Es el mismo azul que ya usa seguimiento.css, así los paneles migrados y los que faltan enfocan igual. Sobre fondos oscuros (barra lateral, cabecera del técnico, aviso efímero) va en verde claro. */ --m-focus: #0e5ca8; /* 6,7:1 sobre blanco */ --m-focus-on-dark: #a7ebc6; /* 13,5:1 sobre --m-chrome · 12,2:1 sobre --m-text */ --m-focus-width: 3px; --m-focus-offset: 2px; /* ---------- Estado del trabajo: 5 estados, 5 colores ---------- Forma + icono + palabra, nunca solo color. Ninguno repite un color de fase. todo = Te toca · tinta, flecha (no es un botón: píldora pequeña) wait = Esperando a… · gris, borde discontinuo, reloj de arena block = Bloqueado · rojo, círculo con raya done = Hecho · verde, check (el verde es SOLO «hecho») later = Más adelante · sin caja, círculo punteado El rojo significa «parar»: bloqueado, vencido o acción destructiva. */ --m-todo-ink: #17201b; --m-todo-bg: #e3e9e5; --m-todo-line: #17201b; /* 13,6:1 */ --m-wait-ink: #3c4741; --m-wait-bg: #ffffff; --m-wait-line: #6f7a73; /* 9,7:1 · borde 4,46:1 */ --m-block-ink: #9e1033; --m-block-bg: #fdecef; --m-block-line: #c2294f; /* 7,2:1 · borde 5,6:1 */ --m-done-ink: #1f6a2b; --m-done-bg: #e6f4e8; --m-done-line: #2f8a3c; /* 5,9:1 */ --m-later-ink: #56615b; /* 6,5:1 */ /* Advertencia que NO bloquea (p. ej. «Falta la firma de la clienta: puedes cerrar la visita igualmente»). Amarillo, distinto del ámbar de Instalación; siempre con el icono de alerta y la palabra. */ --m-warn-ink: #5c4300; --m-warn-bg: #fff4cc; --m-warn-line: #a37f00; /* 8,4:1 sobre su fondo · borde 3,4:1 sobre su fondo */ /* Urgencia: va en su propia columna, no es un estado */ --m-late: #b3123a; /* «Vencido · 3 días»: 6,9:1 */ --m-danger: #b3123a; /* botón destructivo (Cancelada): blanco encima 6,9:1 */ --m-danger-hover: #8f0e2e; /* ---------- Fases: categoría, nunca estado ---------- solid = raíl y punto (≥ 3:1 sobre blanco) · ink = texto (≥ 6,3:1 sobre su bg) bg = celda pastel · line = borde del pastel · dark = sobre la barra (≥ 6:1) Regla: una fase SIEMPRE se dibuja con su número (1-6); con daltonismo el número y la posición en el raíl son la señal, el color es refuerzo. */ --m-p1-solid: #5b3fd0; --m-p1-ink: #4b2fb0; --m-p1-bg: #efebfd; --m-p1-line: #d4c8fa; --m-p1-dark: #9d8bf0; /* 1 Comercial · violeta */ --m-p2-solid: #2563d9; --m-p2-ink: #1b4fb8; --m-p2-bg: #e4effd; --m-p2-line: #bcd4f7; --m-p2-dark: #6f9ef5; /* 2 Contratos y documentación · azul */ --m-p3-solid: #b06e0b; --m-p3-ink: #844806; --m-p3-bg: #fdf2df; --m-p3-line: #f0cd8f; --m-p3-dark: #e0a040; /* 3 Instalación · ámbar */ --m-p4-solid: #a8336c; --m-p4-ink: #8a2152; --m-p4-bg: #fbe8f0; --m-p4-line: #efbdd3; --m-p4-dark: #e07aac; /* 4 Facturación y cobro · granate */ --m-p5-solid: #0f8590; --m-p5-ink: #0a5c63; --m-p5-bg: #ddf3f4; --m-p5-line: #a9dde2; --m-p5-dark: #3cc0c9; /* 5 Legalización · turquesa */ --m-p6-solid: #4b5d73; --m-p6-ink: #2f3d4f; --m-p6-bg: #eceff3; --m-p6-line: #c9d1db; --m-p6-dark: #93a3b8; /* 6 Entrega y cierre · grafito */ /* Raíl de 6 fases: hecho = gris oscuro (3,1:1), ahora = color de su fase y más alto, falta = claro */ --m-rail-done: #8a948e; --m-rail-future: #d5dbd7; /* ---------- Marca (barra lateral y cabecera del técnico) ---------- */ --m-chrome: #111512; --m-chrome-2: #1a201c; /* hover, campo de búsqueda */ --m-chrome-3: #1f2a24; /* elemento activo */ --m-chrome-4: #2c3a32; /* contador y avatar sobre la barra (blanco encima 11,9:1) */ --m-chrome-line: #2b352f; /* separadores (decorativo) */ --m-chrome-control: #66766c; /* borde de la búsqueda: 3,6:1 */ --m-on-chrome: #dfe6e1; /* 14,5:1 */ --m-on-chrome-2: #9fb0a6; /* 8,1:1 · 6,5:1 sobre el activo */ --m-on-dark: #ffffff; /* texto blanco sobre la barra o el aviso efímero */ --m-on-dark-line: rgba(255, 255, 255, .35); /* borde de botón sobre oscuro (decorativo) */ --m-on-dark-hover: rgba(255, 255, 255, .12); --m-brand-name: #f2f5f3; /* «MOSAL» sobre la barra: 16,8:1 */ --m-brand-accent: #78d6a6; /* 10,5:1: «ELECTRIC», página actual */ --m-brand-ink: #007e50; /* texto de marca sobre blanco: 5,1:1 */ --m-band: #26302a; /* banda «Sin cobertura» (texto blanco 13,7:1) */ /* ---------- Elevación ---------- */ --m-shadow-1: 0 1px 2px rgba(17, 21, 18, .06); --m-shadow-2: 0 2px 6px rgba(17, 21, 18, .07), 0 1px 2px rgba(17, 21, 18, .05); --m-shadow-pop: 0 16px 48px rgba(17, 21, 18, .20), 0 2px 6px rgba(17, 21, 18, .08); --m-shadow-drawer: -16px 0 40px rgba(17, 21, 18, .08), -1px 0 0 #e2e6e3; --m-shadow-dock: 0 -8px 24px rgba(17, 21, 18, .06); --m-scrim: rgba(17, 21, 18, .52); /* ---------- Capas (los con showModal van en la capa superior) ---------- */ --m-z-sticky: 10; --m-z-drawer: 40; /* cajón superpuesto por debajo de 1280 px */ --m-z-skip: 50; --m-z-scrim: 90; /* velo del diálogo de reserva (navegador sin ) */ --m-z-dialog: 91; --m-z-toast: 100; /* por encima de la barra lateral móvil (70) y su velo (60) */ /* ---------- Medidas ---------- */ --m-target: 44px; /* oficina y comerciales (2.5.5 AAA, por encima del 2.5.8 AA) */ --m-target-field: 48px; /* técnicos: guantes */ --m-target-hero: 56px; /* botones de cierre y paso actual del técnico */ --m-sidebar-w: 296px; --m-drawer-w: 480px; --m-dialog-w: 520px; --m-row-h: 64px; --m-toast-bottom: 24px; /* cada página la sube si tiene una barra inferior fija */ /* ---------- Movimiento ---------- */ --m-dur: 140ms; --m-ease: cubic-bezier(.2, .7, .2, 1); /* ===================================================================== EVOLUCIÓN 21/10/2026 (especificación, sección 5.1) · al CRM el 23/10 (rediseño, fase 2) Regla: NO hay colores nuevos. Lo que sigue son medidas o alias de colores que ya existían arriba (con su contraste ya medido). ===================================================================== */ /* Densidad: compacta en la oficina (36-40 px; Material «dense», Salesforce «Compact»), cómoda para el comercial, el técnico o quien la elija. Se elige con data-densidad="compacta|comoda" en la raíz .m-ui. */ --m-row-h-compact: 44px; /* ronda 2: dos líneas de 14-15 px (nombre / lugar; estado en dos líneas), así la fecha, la hora y el estado no se recortan (ronda 1: 289 recortes) */ --m-row-h-comfy: 64px; /* = --m-row-h de siempre */ --m-target-dense: 32px; /* botón en fila compacta: > 24 px de WCAG 2.5.8; la fila entera abre la ficha */ /* Cajón y lista */ --m-drawer-w-md: 440px; /* 1280-1439 px: en 1366 la lista conserva 630 px */ --m-list-min: 360px; /* por debajo, el cajón se superpone */ --m-sticky-h: 56px; /* cabecera fija: scroll-padding-top (WCAG 2.4.11, foco nunca tapado) */ /* Móvil (Material 3: barra superior 56-64, barra inferior 64-80, FAB 56) */ --m-appbar-h: 56px; --m-tabbar-h: 64px; --m-fab: 56px; /* Tiempo mínimo del aviso con «Deshacer» (WCAG 2.2.1); lo lee el JS */ --m-undo-time: 20s; /* Alias de color (sin colores nuevos) */ --m-stale-ink: var(--m-warn-ink); --m-stale-bg: var(--m-warn-bg); --m-stale-line: var(--m-warn-line); /* «Atascado»: avisa, no bloquea */ --m-unknown-ink: var(--m-warn-ink); --m-unknown-bg: var(--m-warn-bg); --m-unknown-line: var(--m-warn-line); /* etiqueta de Monday sin traducir */ --m-terminal-bg: var(--m-subtle); /* cabecera de obra cancelada, retirada o finalizada: sin color de fase */ --m-terminal-ink: var(--m-text-2); --m-skeleton: var(--m-subtle); /* filas de carga */ } /* Densidad: la raíz decide el alto de las filas */ .m-ui[data-densidad="compacta"] { --m-row-h: var(--m-row-h-compact); } .m-ui[data-densidad="comoda"] { --m-row-h: var(--m-row-h-comfy); } @media (prefers-reduced-motion: reduce) { :root { --m-dur: 0ms; } } /* Clases de fase: cualquier componente lee var(--ph-*). En las plantillas basta con class="m-ph-${fase}". */ .m-ph-1 { --ph-solid: var(--m-p1-solid); --ph-ink: var(--m-p1-ink); --ph-bg: var(--m-p1-bg); --ph-line: var(--m-p1-line); --ph-dark: var(--m-p1-dark); } .m-ph-2 { --ph-solid: var(--m-p2-solid); --ph-ink: var(--m-p2-ink); --ph-bg: var(--m-p2-bg); --ph-line: var(--m-p2-line); --ph-dark: var(--m-p2-dark); } .m-ph-3 { --ph-solid: var(--m-p3-solid); --ph-ink: var(--m-p3-ink); --ph-bg: var(--m-p3-bg); --ph-line: var(--m-p3-line); --ph-dark: var(--m-p3-dark); } .m-ph-4 { --ph-solid: var(--m-p4-solid); --ph-ink: var(--m-p4-ink); --ph-bg: var(--m-p4-bg); --ph-line: var(--m-p4-line); --ph-dark: var(--m-p4-dark); } .m-ph-5 { --ph-solid: var(--m-p5-solid); --ph-ink: var(--m-p5-ink); --ph-bg: var(--m-p5-bg); --ph-line: var(--m-p5-line); --ph-dark: var(--m-p5-dark); } .m-ph-6 { --ph-solid: var(--m-p6-solid); --ph-ink: var(--m-p6-ink); --ph-bg: var(--m-p6-bg); --ph-line: var(--m-p6-line); --ph-dark: var(--m-p6-dark); }