/* * Gestor Comercial — variables de diseño. * Lineamiento Gráfico §3.4. * * 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. */ :root { /* ── 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; /* ── Marca (Manual Marca MYS, tomados literalmente) ─────────────────── */ --brand-yellow: #F1A634; --brand-yellow-dark: #D98F1E; --brand-taupe: #878071; --brand-brown: #85715E; --brand-sand: #C8AC8B; --brand-cream: #FFF5E9; /* ── Neutrales cálidos de interfaz (derivados; Lineamiento §3.2) ────── */ --n-900: #1A1A1A; --n-700: #3D3833; --n-500: #6B655C; --n-400: #878071; --n-300: #D8D2C6; --n-200: #E9E4DA; --n-100: #F5F2EC; --n-000: #FFFFFF; /* ── Semánticos (Lineamiento §3.3) ─────────────────────────────────── */ --ok: #2E7D52; --ok-bg: #E6F2EC; --err: #C0392B; --err-bg: #FBEAE7; --warn: #9C4A0E; --warn-bg: #FBEDE3; --info: #1F5F8B; --info-bg: #E7F0F7; --focus: #1F5F8B; /* 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(31, 95, 139, .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: #FBF9F5; /* 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: #FCFDFC; /* ── Radios ────────────────────────────────────────────────────────── */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --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; /* ── Elevación: bordes antes que sombras (Lineamiento §5) ──────────── */ --sh-1: 0 1px 2px rgba(26, 26, 26, .06); --sh-2: 0 2px 8px rgba(26, 26, 26, .08); --sh-3: 0 8px 24px rgba(26, 26, 26, .12); /* Velo de los modales y de la hoja inferior. */ --scrim: rgba(26, 26, 26, .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 (Lineamiento §8) ───────────────── * * Derivada de la marca. El amarillo NO está en la lista a propósito: queda * reservado para la serie «actual» o «seleccionada», y por eso se declara * aparte. Si entrara en la rotación dejaría de significar algo. */ --chart-1: #85715E; --chart-2: #C8AC8B; --chart-3: #1F5F8B; --chart-4: #2E7D52; --chart-5: #9C4A0E; --chart-6: #878071; --chart-current: #F1A634; /* * ── 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, ya verificado a 4,5:1 o más. */ --state-1: #6B655C; --state-1-bg: #F5F2EC; /* neutro */ --state-2: #1F5F8B; --state-2-bg: #E7F0F7; /* azul */ --state-3: #2E7D52; --state-3-bg: #E6F2EC; /* verde */ --state-4: #9C4A0E; --state-4-bg: #FBEDE3; /* naranja */ --state-5: #C0392B; --state-5-bg: #FBEAE7; /* rojo */ --state-6: #6B4A00; --state-6-bg: #FDF0D9; /* ámbar */ --state-7: #0F6E6E; --state-7-bg: #E4F1F1; /* verdeazul*/ --state-8: #85715E; --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; }