/* * Gestor Comercial — variables de diseño. * Lineamiento Gráfico §3.4 + dirección «MyS Modern Premium» (alternativa B). * * ── Qué cambió y por qué ─────────────────────────────────────────────────── * * El cliente aprobó el 20/10/2026 la alternativa B de la adenda «Modernización * de paleta y estética» (docs/fase-12/03-paleta-modern-premium.md, §7). La base * cálida arena/crema del manual de marca deja de gobernar la interfaz: los * neutrales pasan a una escala gris azulada y el amarillo `#F1A634` queda como * el único color cálido de la pantalla, reservado a la acción. * * El amarillo, el marrón y la crema de marca NO se tocaron: siguen siendo los * del manual y sostienen la identidad en el documento impreso, en el login y en * los bloques de bienvenida. Lo que se enfrió es el gris de interfaz. * * Los valores de la adenda se tomaron literales salvo donde no llegaban al * contraste mínimo; cada corrección está anotada en su línea y verificada por * `tests/Unit/Design/PaletteContrastTest.php`, que falla si alguien baja un par * por debajo del mínimo. * * Este es el ÚNICO archivo del proyecto donde puede aparecer un color escrito * en hexadecimal. Ningún componente, ninguna vista y ninguna hoja posterior * declara un color propio: si hace falta uno nuevo, se agrega acá. * * La regla no es estética. Es lo que permite que un futuro modo oscuro * redefina `:root` y nada más, y lo que impide que el amarillo de marca termine * usado como color de texto sobre fondo claro, donde da 2,05:1 y no se lee. */ /* * ╔══════════════════════════════════════════════════════════════════════════╗ * ║ ESCALA ÚNICA DE PUNTOS DE QUIEBRE (Etapa 1 de la V2) ║ * ╚══════════════════════════════════════════════════════════════════════════╝ * * Una consulta de medios no acepta `var()`: el navegador evalúa `@media` antes * de resolver las variables. Así que estos tres tokens NO se usan dentro de un * `@media` —no funcionaría— y están acá por dos motivos: son la declaración de * la escala en el único lugar donde se declara el sistema, y JavaScript los * puede leer con `getComputedStyle` si algún día hace falta coordinar un * comportamiento con el punto de quiebre. * * Quien escribe CSS usa los seis literales de la tabla de abajo y ningún otro. * `tests/Unit/Design/BreakpointScaleTest.php` falla si aparece un séptimo. * * Banda Rango Consulta a escribir * ─────────────── ───────────── ────────────────────────────────────────── * Celular 0 – 599,98 (max-width: 599.98px) * Tablet y más 600 → (min-width: 600px) * Armazón compacto 0 – 767,98 (max-width: 767.98px) * Armazón fijo 768 → (min-width: 768px) * Hasta escritorio 0 – 1023,98 (max-width: 1023.98px) * Escritorio 1024 → (min-width: 1024px) * * ── Por qué los límites llevan `,98` ────────────────────────────────────── * * Es la corrección del defecto T1 de la auditoría. Antes convivían * `max-width: 768px` y `min-width: 768px`: a 768 px exactos —el ancho de una * tablet en vertical— se aplicaban los dos juegos de reglas y ganaba el que * estuviera más abajo en el archivo. La tabla quedaba en modo tabla pero con * los importes alineados a la izquierda, y los controles pasaban a 34 px en una * pantalla que se toca con el dedo. Nadie diseñó esa franja de 1 px. * * El criterio es «`min-width` manda»: el límite entero pertenece siempre a la * banda ancha, y la banda angosta termina 0,02 px antes. No se usa 767 px a * secas porque con el zoom del sistema al 200 % el ancho de la ventana deja de * ser entero: a 767,5 px no se aplicaría ninguna de las dos reglas, que es el * mismo defecto al revés. * * ── Por qué hay tres límites y no dos ───────────────────────────────────── * * La propuesta de la V2 (documento 02, §4) define dos: 600 px y 1024 px. El * tercero, 768 px, es el límite del ARMAZÓN —dónde desaparece la barra inferior * y aparece el menú lateral fijo— y sigue vivo a propósito: moverlo a 1024 px * hoy dejaría a un administrador en tablet sin ninguna navegación, porque el * riel de iconos que la V2 pone en la banda de 600–1023 px es trabajo del Lote * C (Etapa 3). Cuando ese riel exista, el límite del armazón se funde con el de * escritorio y la escala queda en dos. Está declarado como transitorio, no como * decisión: es deuda con fecha. * * Regla práctica para elegir: si la regla depende de que haya o no menú lateral * y barra inferior, usá el par del armazón (767.98 / 768). Si depende sólo del * ancho disponible, usá 600 o 1024. */ :root { --bp-phone: 600px; --bp-shell: 768px; --bp-desktop: 1024px; /* ── Tipografía (Lineamiento §4) ───────────────────────────────────── */ /* Montserrat en toda la interfaz; Archivo para datos densos y cifras. Las * alternativas son las del propio Lineamiento. */ --font-ui: Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif; --font-data: Archivo, "Roboto", system-ui, sans-serif; /* * ── Escala tipográfica ──────────────────────────────────────────────── * * Hasta la Etapa 1 la escala del Lineamiento §4 existía sólo como px * escritos a mano en `base.css`, y las otras hojas la volvían a escribir: * 140 `font-size` y 113 `line-height` literales. El resultado previsible es * que se filtraron doce tamaños que la escala no tiene —siete de ellos de * 11 px, por debajo del mínimo legible que el propio Lineamiento fija— sin * que nada lo pudiera advertir. * * Ahora cada nivel es un par de tokens (tamaño + interlínea) y ninguna hoja * escribe un tamaño propio. `tests/Unit/Design/TypographyScaleTest.php` * falla si alguien lo hace. * * El cuerpo es el único nivel que cambia con el ancho: 16/24 en celular y * tablet, 15/22 en escritorio (propuesta V2 §1.3). El motivo no es * estético: el vendedor lee el celular a brazo extendido, de pie y con la * luz del salón; el administrador lee el escritorio sentado y a 60 cm. La * redefinición está al final del archivo, con el resto de lo que depende * del ancho. */ --fs-body: 16px; --lh-body: 24px; --fs-body-dense: 14px; --lh-body-dense: 20px; --fs-h1: 26px; --lh-h1: 34px; --fs-h2: 19px; --lh-h2: 28px; --fs-h3: 16px; --lh-h3: 24px; --fs-label: 13px; --lh-label: 18px; --fs-caption: 12px; --lh-caption: 16px; /* El rótulo de tarjeta y el encabezado de tabla. Dejó las versalitas * apretadas de 11 px cuando el cliente pidió «menos mayúsculas» * (adenda, punto 6) y con eso llegó al mínimo de 12 px del Lineamiento §4. */ --fs-overline: 12px; --lh-overline: 16px; /* El importe que manda en su bloque (Lineamiento §4). */ --fs-amount: 20px; /* * Cifras de tablero. Cuatro escalones y no uno, porque una tarjeta de KPI * tiene que mostrar «$ 3.078.900,00» entero —el sistema prohíbe abreviar un * importe— y una tasa de conversión muestra «62 %». El mismo tamaño no * sirve para los dos. * * xl → porcentaje de meta y tasas: texto corto, protagonista absoluto. * lg → importe destacado de un panel en escritorio. * md → el mismo dato en celular, donde la tarjeta es más angosta. * sm → importe de tarjeta de KPI y de panel secundario: el techo con el * que un millón con centavos entra sin cortarse. * * Aplicar estos tokens a cada tarjeta es trabajo de la Etapa 2: acá quedan * declarados y los valores que ya existían quedan apuntados a ellos, sin * cambiar de tamaño. */ --fs-figure-xl: 32px; --lh-figure-xl: 40px; --fs-figure-lg: 28px; --lh-figure-lg: 36px; --fs-figure-md: 24px; --lh-figure-md: 32px; --fs-figure-sm: 22px; --lh-figure-sm: 30px; /* Título de bienvenida del ingreso y encabezado del Smart Panel * (Lineamiento §4, nivel Display). Mide lo mismo que `--fs-figure-xl` y es * otro token a propósito: uno es texto y el otro es un número, y el día que * la cifra crezca el título no tiene por qué seguirla. */ --fs-display: 32px; --lh-display: 40px; /* * Etiqueta de la barra de navegación inferior. Es el único texto de la * interfaz por debajo de 12 px y está acá, con nombre propio, porque es una * excepción declarada y no un descuido: el Lineamiento §6.2 la fija * literalmente en 11 px, y a 12 px la palabra «Presupuestos» no entra en el * quinto de 390 px que le toca a cada destino. Compensa con peso 600, área * táctil de 48 px y el ícono de 24 px encima. Ningún otro componente puede * usar este token. */ --fs-nav-label: 11px; --lh-nav-label: 14px; /* ── Marca (Manual Marca MYS, tomados literalmente) ─────────────────── */ --brand-yellow: #F1A634; --brand-yellow-dark: #D98F1E; --brand-brown: #85715E; --brand-cream: #FFF5E9; /* El topo y la arena del manual eran los que sostenían la calidez de la * interfaz. En Modern Premium pasan a neutros fríos —ese es el cambio que * produce el efecto «premium»— y conservan su función: iconografía inactiva * y bordes de énfasis el primero, fondos de resalte y estados vacíos el * segundo. En el documento impreso la calidez sigue viniendo del marrón y * de la crema, que no se tocaron. */ --brand-taupe: #677079; --brand-sand: #DCDEDD; /* ── Neutrales fríos de interfaz (adenda Modern Premium §2) ─────────── */ /* Los cuatro valores que la adenda fija van tal cual; los intermedios se * derivaron en el mismo tono midiendo contraste antes de fijarlos. El * número al costado es la relación contra blanco. */ --n-900: #20252A; /* 15,45:1 — títulos y cifras */ --n-700: #353C43; /* 11,18:1 — cuerpo de texto */ --n-500: #57616A; /* 6,32:1 — texto secundario y etiquetas */ --n-400: #677079; /* 5,04:1 — terciario y placeholders */ --n-300: #CFD3D2; /* borde de campo */ --n-200: #E3E5E4; /* bordes y divisores */ --n-100: #F7F7F5; /* fondo general de la aplicación */ --n-000: #FFFFFF; /* superficies: tarjetas, tablas, modales */ /* ── Semánticos (Lineamiento §3.3, recalibrados a la base fría) ─────── */ /* Mismos significados y mismas familias de color; cada tono se oscureció lo * necesario para pasar 4,5:1 sobre su propio fondo suave, que es como se * usan en los chips de estado. */ --ok: #1F6E47; --ok-bg: #E8F3EE; --err: #B33A33; --err-bg: #FBECEB; --warn: #8A5A12; --warn-bg: #FBF1E1; --info: #23597E; --info-bg: #EAF1F6; --focus: #28658F; /* Verde de WhatsApp. No es un color de marca de la casa ni un semántico: * es la identidad de un servicio de terceros, y está acá por lo mismo por * lo que un botón de «Entrar con Google» lleva los colores de Google —el * vendedor lo reconoce sin leer—. Se usa exclusivamente como relleno del * botón que abre WhatsApp y en ningún otro lado. * * La tinta encima es --n-900 y no el blanco de WhatsApp: blanco sobre * #25D366 da 2,1:1 y no se lee (Lineamiento §10). Con --n-900 da 8,8:1. * Es la misma corrección que el Lineamiento §3.1 le hace al amarillo de * marca, aplicada a un color prestado. */ --whatsapp: #25D366; --whatsapp-dark: #1DA851; /* Halo de foco de los campos. Va como token y no escrito en cada regla * porque es el mismo `--focus` con transparencia, y `rgba()` no acepta una * variable de color sin `color-mix`, que todavía no cubre a todos los * navegadores de las tablets del salón. */ --focus-ring: 0 0 0 3px rgba(40, 101, 143, .18); /* Realce de fila al pasar el puntero, fijado por el Lineamiento §7. Es el * único neutral que no pertenece a la escala: está a medio camino entre * --n-000 y --n-100 justo para que la fila se distinga sin parecer * seleccionada. */ --row-hover: #FBFBFA; /* Fondo del ítem que el cliente aprobó, fijado por el Lineamiento §8. Es un * blanco apenas teñido de verde: alcanza para que la vista agrupe los ítems * aprobados sin bajarle el contraste al precio, que es lo que hay que leer. * El ítem no aprobado no se atenúa: sigue siendo editable. */ --ok-tint: #F7FAF8; /* Flecha propia de los desplegables. * * Va acá y no en `components.css` por la regla del Lineamiento §3.4: el * hexadecimal de un color no se escribe fuera de este archivo, y un SVG * embebido como `data:` lo lleva adentro. `#57616A` es --n-500, el mismo * gris terciario de los íconos inactivos; el `%23` es el `#` escapado, * obligatorio dentro de una URL. El dibujo es el `chevron-down` de Lucide, * que es el set único del sistema (Lineamiento §9). */ --select-chevron: url('data:image/svg+xml;utf8,'); /* ── Radios ────────────────────────────────────────────────────────── */ /* Nada supera los 12 px salvo el borde superior de la hoja inferior, que el * Lineamiento §7 fija en 16 px: es el gesto que dice «esto subió desde el * borde de la pantalla» y necesita más curva que una tarjeta. */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* ── Espaciado, en múltiplos de 4 ──────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* * Dos medidas que el Lineamiento §7 fija fuera de la escala de 4: el * relleno horizontal del botón (20 px) y el del chip (10 px). Están acá con * nombre propio en vez de escritas en cada regla porque eran los dos únicos * valores fuera de escala que se repetían —el del chip, tres veces copiado— * y porque un valor sin nombre se multiplica: nadie sabe si el 10 px de al * lado es el mismo 10 px o una casualidad. */ --pad-button-x: 20px; --pad-chip-x: 10px; /* * ── Anchos de borde ────────────────────────────────────────────────── * * El sistema usaba tres anchos con tres significados perfectamente * consistentes en 103 declaraciones, y ninguno tenía nombre. Ahora los * tienen, y el significado es parte del token: * * --bw-1 estructura: tarjetas, campos, filas, divisores. Es el borde que * reemplaza a la sombra (Lineamiento §5: bordes antes que sombras). * --bw-2 selección y espera: la opción elegida del configurador, el local * activo, la imagen pendiente de aprobación. * --bw-3 acento y foco: la barra lateral de 3 px que marca un aviso, el * ítem activo del menú o la franja amarilla de una tarjeta * destacada, y el anillo de foco visible. * * Un cuarto ancho no existe. Si hace falta, se agrega acá con su * significado o no se agrega. * * `--bw-1` está declarado y hoy no se consume: el borde de estructura se * sigue escribiendo `1px solid` en 134 reglas porque es el valor por * omisión del navegador y cambiarlas en masa no agrega información. El * token está para que el grosor de estructura tenga nombre cuando haga * falta nombrarlo —en un componente nuevo, o el día que la estructura * quiera engrosarse en un solo lugar— y para que la lista de los tres se * lea completa. Lo que la prueba custodia es que ningún otro grosor entre * suelto: 2 y 3 px van por token. */ --bw-1: 1px; --bw-2: 2px; --bw-3: 3px; /* ── Elevación: bordes antes que sombras (Lineamiento §5) ──────────── */ /* La adenda pide «evitar sombras pronunciadas»: la tinta pasa a la fría del * texto principal y la opacidad baja un escalón. */ --sh-1: 0 1px 2px rgba(32, 37, 42, .05); --sh-2: 0 2px 8px rgba(32, 37, 42, .07); --sh-3: 0 8px 24px rgba(32, 37, 42, .10); /* Velo de los modales y de la hoja inferior. */ --scrim: rgba(32, 37, 42, .45); /* ── Estructura (Lineamiento §5 y §6) ──────────────────────────────── */ --topbar-h: 56px; --sidenav-w: 248px; --sidenav-w-collapsed: 64px; --bottomnav-h: 56px; --content-max: 1440px; --gutter: 24px; /* ── Densidad (Lineamiento §5) ─────────────────────────────────────── */ /* Valores de la densidad cómoda, que es la predeterminada. La clase * `.density-compact` del `` los redefine. */ --row-h: 48px; --control-h: 44px; /* ── Capas ─────────────────────────────────────────────────────────── */ --z-topbar: 10; --z-sidenav: 20; --z-bottomnav: 30; --z-scrim: 40; --z-modal: 50; --z-toast: 60; /* * ── Paleta categórica de gráficos: no existe hoy, y es a propósito ───── * * El Lineamiento §8 define una rotación categórica derivada de la marca * —marrón, arena, topo— para distinguir una serie de otra. Con la base fría * esos tonos quedaron fuera de lugar, y al revisar quién los usaba resultó * que nadie: las pantallas de análisis de la V1 no tienen ningún gráfico de * varias categorías. Lo que sí tienen son series con significado, y para eso * está la paleta semántica de abajo. * * Así que la rotación categórica no se declara. Un token que no pinta nada * es una promesa sin dueño: nadie lo mantiene, nadie lo mide y el día que * alguien lo necesite va a estar desactualizado. Cuando los lotes de * maquetación traigan el primer gráfico multicategoría, vuelve acá con su * consumidor al lado y con su contraste verificado. */ /* * ── Paleta semántica de datos (Adenda del Panel Ejecutivo §3) ────── * * La identidad de Muebles y Sillones gobierna la interfaz —navegación, * fondo, tipografía, botones, formularios, tarjetas—; la visualización de * datos NO está limitada a esa paleta, porque su prioridad es comunicar y * no decorar. Estos seis tokens son semánticos: no distinguen una serie de * otra, dicen qué significa cada una. Es la paleta que efectivamente pinta * los gráficos y los medidores del sistema. * * El contrato de significado es fijo y ningún gráfico puede apartarse de * él: * * azul → dato actual, ventas, información principal neutra; * verde → cumplimiento, resultado favorable, objetivo alcanzado; * ámbar → atención, proyección, riesgo moderado, seguimiento; * rojo → desvío crítico, vencimiento, situación que exige acción; * gris → meta, referencia, período anterior, información secundaria. * * Consecuencia práctica: un ranking de vendedores se dibuja entero en azul. * El verde, el ámbar y el rojo solo aparecen cuando hay algo que decir sobre * el desempeño, y nunca solos: siempre acompañados de texto, valor y ícono * o etiqueta, porque nada en esta pantalla puede depender únicamente del * color (Lineamiento §10). */ --data-blue: #28658F; --data-blue-soft: #EAF1F6; --data-green: #27805A; --data-green-soft: #E8F3EE; /* El ámbar de la adenda da 3,01:1 sobre blanco: alcanza para una barra y no * para una palabra. Se usa sólo como relleno; cuando hay que escribir una * advertencia se usa `--warn`, que es la misma familia a 5,91:1. */ --data-amber: #C38A25; --data-amber-soft: #FBF1E1; --data-red: #C7443E; --data-red-soft: #FBECEB; /* La adenda propone #9098A0 para la referencia: 2,92:1, por debajo del * mínimo de 3:1 de un elemento gráfico. Mismo tono, un escalón más oscuro, * 3,74:1. La diferencia no se ve y la barra de la meta deja de desaparecer * en una tablet con el brillo bajo, que es la condición real del salón. */ --data-gray: #7D858D; --data-gray-soft: #E3E5E4; /* El carril sobre el que se dibuja cualquier barra de datos. */ --data-track: #EDEEED; /* El rayado que distingue una barra estimada de una barra medida. Va * translúcido a propósito: se apoya sobre el color que ya tiene la barra en * lugar de agregar un sexto color al vocabulario. */ --data-stripe: rgba(255, 255, 255, .28); /* * ── Paleta cerrada para estados configurables (Lineamiento §7) ───── * * El administrador puede crear estados propios de presupuesto y de pedido. * Elige de estos ocho tonos y no de un selector de color libre: así ningún * estado inventado rompe el contraste ni la coherencia. Cada tono va como * par texto/fondo, verificado a 4,5:1 o más por * `tests/Unit/Design/PaletteContrastTest.php`. * * El octavo tono cambió de valor y no sólo de temperatura: el marrón de * marca `#85715E` sobre su fondo daba 3,96:1 y no llegaba al mínimo. Se * conservó el tono y se bajó la luminosidad hasta `#6F5B49` (5,48:1). Era * un defecto de la V1 que esta prueba destapó. */ --state-1: #57616A; --state-1-bg: #F0F1F0; /* neutro */ --state-2: #23597E; --state-2-bg: #EAF1F6; /* azul */ --state-3: #1F6E47; --state-3-bg: #E8F3EE; /* verde */ --state-4: #8A5A12; --state-4-bg: #FBF1E1; /* naranja */ --state-5: #B33A33; --state-5-bg: #FBECEB; /* rojo */ --state-6: #6B4A00; --state-6-bg: #FAEFD8; /* ámbar */ --state-7: #0F6E6E; --state-7-bg: #E4F1F1; /* verdeazul*/ --state-8: #6F5B49; --state-8-bg: #F2ECE5; /* marrón */ } /* * Densidad compacta: solo para las pantallas de administración de escritorio, * donde el usuario está sentado y necesita ver más filas. La densidad cómoda * sigue siendo la predeterminada, porque el vendedor trabaja de pie y muchas * veces sobre una tablet (Lineamiento §5). */ .density-compact { --row-h: 36px; --control-h: 34px; } /* * El cuerpo de texto es lo único de la escala tipográfica que depende del * ancho: 16/24 en celular y tablet, 15/22 desde escritorio (propuesta V2 §1.3, * desvío 1 del Lineamiento §4, aprobado con la dirección Modern Premium Warm). * * Va como redefinición de la variable y no como regla sobre `body` para que * cualquier componente que calcule a partir de `--fs-body` acompañe el cambio * sin repetir la consulta de medios. * * Es el único `@media` de este archivo: acá se declara el sistema, no se * maqueta. */ @media (min-width: 1024px) { :root { --fs-body: 15px; --lh-body: 22px; } }