/* ========================================================================== TOKENS.CSS — Sistema de Diseño (Master Plan V2 · Fase 5) ========================================================================== Fuente única de verdad para colores, espaciados, tipografía, sombras, radios y z-index. Sustituye a core-arquitectura.css (ver deprecación en ese archivo) y es la base sobre la que se construyen base.css, layout.css y components.css. MODO DE MARCA (dinámico, sin frameworks): El del layout recibe el atributo data-brand-mode="inhouse", "conecta" o "trabajadores" (ver HostBrandHelper + views/layouts/main.php). ========================================================================== */ :root { /* ---------- Neutros (base gris-azulada, igual para ambas marcas) ---- */ --color-neutral-0: #ffffff; --color-neutral-50: #f8fafc; --color-neutral-100: #f1f5f9; --color-neutral-200: #e2e8f0; --color-neutral-300: #cbd5e1; --color-neutral-400: #94a3b8; --color-neutral-500: #64748b; --color-neutral-600: #475569; --color-neutral-700: #334155; --color-neutral-800: #1e293b; --color-neutral-900: #0f172a; /* ---------- Semánticos (estado, iguales para ambas marcas) ---------- */ --color-success: #16a34a; --color-success-bg: #dcfce7; --color-success-text: #166534; --color-warning: #d97706; --color-warning-bg: #fef3c7; --color-warning-text: #92400e; --color-danger: #dc2626; --color-danger-bg: #fee2e2; --color-danger-text: #991b1b; --color-info: #2563eb; --color-info-bg: #dbeafe; --color-info-text: #1d4ed8; /* ---------- Escala tipográfica ---------------------------------- */ --font-family-base: 'Segoe UI', system-ui, -apple-system, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.85rem; --font-size-base: 0.95rem; --font-size-md: 1rem; --font-size-lg: 1.15rem; --font-size-xl: 1.4rem; --font-size-2xl: 1.85rem; /* ---------- Espaciado (escala 4px) ------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; /* ---------- Radios ------------------------------------------------ */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; /* ---------- Sombras ------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08); --shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, 0.15); --shadow-xl: 0 20px 40px -10px rgba(15, 23, 42, 0.25); /* ---------- Transiciones ------------------------------------------ */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; /* ---------- Capas (z-index) ---------------------------------------- */ --z-sidebar: 1000; --z-header: 900; --z-tabbar: 950; --z-dropdown: 1100; --z-modal-overlay: 2000; --z-modal: 2001; --z-toast: 3000; /* ---------- Layout --------------------------------------------------*/ --sidebar-width: 260px; --header-height: 64px; --tabbar-height: 60px; /* ===================================================================== MARCA — Modo por defecto: FIRMA TRADICIONAL (In-House) Navy / Slate + Dorado. Host despacho.estudiomorales.pe. ===================================================================== */ --brand-primary: #0f172a; --brand-primary-dark: #020617; --brand-primary-light: #1e293b; --brand-primary-soft: #eef2f7; --brand-accent: #eab308; --brand-accent-dark: #a16207; --brand-accent-soft: #fef9c3; --brand-on-primary: #ffffff; --brand-label: 'In-House'; } /* ========================================================================= MARCA — Modo MARKETPLACE (Conecta Legal) Navy #0B1F3A + ember #F15A24. Host despacho.conectalegal.pe. ========================================================================= */ [data-brand-mode="conecta"] { --brand-primary: #0B1F3A; --brand-primary-dark: #071526; --brand-primary-light: #122844; --brand-primary-soft: #e8eef6; --brand-accent: #F15A24; --brand-accent-dark: #c2410c; --brand-accent-soft: #ffedd5; --brand-on-primary: #ffffff; --brand-label: 'Conecta Legal'; } /* ========================================================================= MARCA — Modo SOLO TRABAJADORES Ink + oro. Host despacho.trabajadores.pe. ========================================================================= */ [data-brand-mode="trabajadores"] { --brand-primary: #272e42; --brand-primary-dark: #1a1f2e; --brand-primary-light: #3a4258; --brand-primary-soft: #fffbeb; --brand-accent: #ecc30e; --brand-accent-dark: #d97706; --brand-accent-soft: #fef9c3; --brand-on-primary: #ffffff; --brand-label: 'Solo Trabajadores'; } /* ========================================================================= ALIAS DE COMPATIBILIDAD (LEGACY) Mantiene funcionando el CSS histórico (compendium.css, asistentes.css, smart_organizer.css, y vistas con estilos inline) que referencia estas variables. Todas quedan mapeadas al nuevo sistema de tokens para que un cambio de marca/tema se propague también al código antiguo sin tener que reescribirlo de inmediato. ========================================================================= */ :root { /* de style.css */ --primary-color: var(--brand-primary); --secondary-color: #a92c2c; --accent-color: var(--brand-accent); --bg-color: var(--color-neutral-100); --text-color: var(--color-neutral-700); --white: var(--color-neutral-0); --shadow: var(--shadow-md); /* de core-arquitectura.css */ --color-mando-primary: var(--color-neutral-900); --color-mando-accent: #eab308; --color-abogado-primary: #1e3a8a; --color-abogado-accent: #3b82f6; --status-green-bg: var(--color-success-bg); --status-green-text: var(--color-success-text); --status-yellow-bg: #fef08a; --status-yellow-text: #854d0e; --status-red-bg: var(--color-danger-bg); --status-red-text: var(--color-danger-text); }