/* ============================================================ MV Design System v3 — TOKENS ------------------------------------------------------------ Unica fuente de verdad de colores, radios, sombras y tipografia. NO declarar reglas de componentes aqui: solo variables. Los valores NO son inventados: se extrajeron de webroot/css/rto_optimizer.css + View/CustomerZones/rto_proposal.ctp (el modulo /CustomerZones/rtoProposal), contando frecuencia real de uso. La paleta neutra/acento coincide con la escala slate/blue/ emerald de Tailwind, que fue la que se copio a mano en ese modulo. Convencion: prefijo --mv3-* para no colisionar con Bootstrap 4 ni con el tema Material existente. ============================================================ */ :root { /* ── Neutros (slate) ───────────────────────────────────── Los 10 pasos que realmente se usan en el modulo. */ --mv3-slate-50: #f8fafc; --mv3-slate-100: #f1f5f9; --mv3-slate-200: #e2e8f0; --mv3-slate-300: #cbd5e1; --mv3-slate-400: #94a3b8; --mv3-slate-500: #64748b; --mv3-slate-600: #475569; --mv3-slate-700: #334155; --mv3-slate-800: #1e293b; --mv3-slate-900: #0f172a; /* ── Acento primario (blue) ──────────────────────────── */ --mv3-blue-50: #eff6ff; --mv3-blue-100: #dbeafe; --mv3-blue-200: #bfdbfe; --mv3-blue-500: #3b82f6; --mv3-blue-600: #2563eb; --mv3-blue-700: #1d4ed8; --mv3-blue-800: #1e40af; /* ── Exito (emerald / green) ───────────────────────────── El modulo original mezcla ambas familias; se conservan las dos para poder reproducirlo fielmente. */ --mv3-green-50: #ecfdf5; --mv3-green-100: #dcfce7; --mv3-green-500: #10b981; --mv3-green-600: #059669; --mv3-green-700: #16a34a; --mv3-green-900: #064e3b; /* ── Peligro (red) ──────────────────────────────────── */ --mv3-red-50: #fef2f2; --mv3-red-200: #fecaca; --mv3-red-500: #ef4444; --mv3-red-600: #dc2626; --mv3-red-700: #be123c; /* ── Advertencia (amber) ────────────────────────────── */ --mv3-amber-50: #fffbeb; --mv3-amber-100: #fef3c7; --mv3-amber-200: #fde047; --mv3-amber-600: #d97706; --mv3-amber-700: #b45309; --mv3-amber-800: #92400e; /* ── Extra ──────────────────────────────────────────── */ --mv3-violet-600: #7c3aed; --mv3-white: #ffffff; /* ── Canales RGB ───────────────────────────────────────── Necesarios para sombras tenidas: rgba(var(--x), .25). Una sombra teñida del color de acento (en vez de negra) es una de las decisiones que dan el look del modulo. */ --mv3-primary-rgb: 37, 99, 235; --mv3-success-rgb: 5, 150, 105; --mv3-danger-rgb: 220, 38, 38; --mv3-black-rgb: 0, 0, 0; /* ── Alias semanticos ──────────────────────────────────── Usar SIEMPRE estos en los componentes, no los crudos. Asi un cambio de marca se hace en un solo lugar. */ --mv3-bg-page: var(--mv3-slate-50); --mv3-bg-surface: var(--mv3-white); --mv3-bg-subtle: var(--mv3-slate-100); --mv3-border: var(--mv3-slate-200); --mv3-border-strong: var(--mv3-slate-300); /* Barra superior: derivada de la paleta del menu lateral (#0d2b45) en vez de los grises neutros, para que lea como la misma familia. Se mantiene clara a proposito: el menu ya ancla la izquierda y un marco oscuro en L compite con el contenido. */ --mv3-topbar-bg: #eaf0f6; --mv3-topbar-border: #cfdae6; --mv3-topbar-text: #1e3a52; --mv3-topbar-muted: #526a80; --mv3-topbar-field: #ffffff; --mv3-text: var(--mv3-slate-800); --mv3-text-strong: var(--mv3-slate-900); --mv3-text-muted: var(--mv3-slate-500); --mv3-text-subtle: var(--mv3-slate-400); --mv3-text-on-accent: var(--mv3-white); /* Etiquetas de campo. Gris propio, fuera de la escala slate. No usar --mv3-text-subtle aqui: con #94a3b8 el contraste sobre blanco es 2.6:1, por debajo del minimo WCAG AA (4.5:1). Este valor da 8.5:1. Las etiquetas identifican el campo, tienen que leerse. */ --mv3-text-label: #494d53; --mv3-primary: var(--mv3-blue-600); --mv3-primary-hover: var(--mv3-blue-700); --mv3-primary-soft: var(--mv3-blue-50); --mv3-primary-strong: var(--mv3-blue-800); --mv3-success: var(--mv3-green-600); --mv3-success-soft: var(--mv3-green-50); --mv3-danger: var(--mv3-red-600); --mv3-danger-soft: var(--mv3-red-50); --mv3-warning: var(--mv3-amber-600); --mv3-warning-soft: var(--mv3-amber-50); /* ── Tipografia ────────────────────────────────────────── Inter se vendoriza en css/v3/fonts/ (ver base.css). Antes se pedia 'Inter' sin cargarla nunca, asi que el modulo renderizaba con la sans-serif del sistema y se veia distinto en cada equipo. */ --mv3-font-sans: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* Escala tipografica (rem). Los clusters reales del modulo eran 0.6-0.85rem para UI y 1.1-1.25rem para titulos. */ --mv3-fs-2xs: 0.625rem; --mv3-fs-xs: 0.7rem; --mv3-fs-sm: 0.75rem; --mv3-fs-base: 0.8rem; --mv3-fs-md: 0.85rem; --mv3-fs-lg: 1.1rem; --mv3-fs-xl: 1.25rem; --mv3-fs-2xl: 1.5rem; /* Pesos. El diseño es deliberadamente pesado: 700 es el peso "normal" de UI aqui, no 400. */ --mv3-fw-normal: 400; --mv3-fw-medium: 500; --mv3-fw-semibold: 600; --mv3-fw-bold: 700; --mv3-fw-extrabold: 800; --mv3-fw-black: 900; /* Tracking. Negativo en titulos grandes, muy abierto en etiquetas pequeñas en mayusculas: ese contraste es justamente lo que hace legible el look. */ --mv3-tracking-tighter: -0.04em; --mv3-tracking-tight: -0.025em; --mv3-tracking-normal: 0; --mv3-tracking-wide: 0.05em; --mv3-tracking-wider: 0.08em; --mv3-tracking-widest: 0.1em; --mv3-leading-tight: 1.2; --mv3-leading-normal: 1.5; --mv3-leading-loose: 1.6; /* ── Radios ────────────────────────────────────────────── Escalonados y generosos: es el otro rasgo distintivo. */ --mv3-radius-sm: 0.5rem; --mv3-radius-md: 0.75rem; --mv3-radius-lg: 1rem; --mv3-radius-xl: 2rem; --mv3-radius-2xl: 2.5rem; --mv3-radius-3xl: 3rem; --mv3-radius-pill: 999px; --mv3-radius-circle: 50%; /* ── Bordes ────────────────────────────────────────────── 2px (no 1px) en todo lo seleccionable: el estado activo se lee sin necesidad de cambiar el layout. */ --mv3-border-width: 1px; --mv3-border-width-interactive: 2px; /* ── Sombras ───────────────────────────────────────────── */ --mv3-shadow-xs: 0 1px 2px rgba(var(--mv3-black-rgb), 0.04); --mv3-shadow-sm: 0 1px 4px rgba(var(--mv3-black-rgb), 0.06); --mv3-shadow-md: 0 4px 12px rgba(var(--mv3-black-rgb), 0.1); --mv3-shadow-lg: 0 10px 25px -5px rgba(var(--mv3-black-rgb), 0.1); --mv3-shadow-xl: 0 25px 50px -12px rgba(var(--mv3-black-rgb), 0.35); --mv3-shadow-inset: inset 0 2px 4px rgba(var(--mv3-black-rgb), 0.04); /* Sombras tenidas del acento */ --mv3-shadow-primary: 0 4px 12px rgba(var(--mv3-primary-rgb), 0.25); --mv3-shadow-primary-lg: 0 8px 16px rgba(var(--mv3-primary-rgb), 0.3); --mv3-shadow-success: 0 4px 12px rgba(var(--mv3-success-rgb), 0.25); --mv3-shadow-danger: 0 4px 12px rgba(var(--mv3-danger-rgb), 0.25); /* Anillo de foco (accesibilidad: nunca quitar outline sin esto) */ --mv3-ring: 0 0 0 3px rgba(var(--mv3-primary-rgb), 0.25); --mv3-ring-danger: 0 0 0 3px rgba(var(--mv3-danger-rgb), 0.25); /* ── Transiciones ──────────────────────────────────────── */ --mv3-transition-fast: 0.15s ease; --mv3-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --mv3-transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* ── Espaciado ─────────────────────────────────────────── */ --mv3-space-1: 0.25rem; --mv3-space-2: 0.5rem; --mv3-space-3: 0.75rem; --mv3-space-4: 1rem; --mv3-space-5: 1.25rem; --mv3-space-6: 1.5rem; --mv3-space-8: 2rem; --mv3-space-10: 2.5rem; /* ── Alturas de control ────────────────────────────────── */ --mv3-control-height-sm: 28px; --mv3-control-height: 36px; --mv3-control-height-lg: 44px; /* ── Capas ─────────────────────────────────────────────── */ --mv3-z-dropdown: 1000; --mv3-z-overlay: 1060; --mv3-z-toast: 1080; }