/* === TOKENS (Ful-Mar) === Paleta, tipografías, escalas, sombras y “semantic tokens”. ✔ Soporta claro/oscuro con (AppThemeService) */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Roboto:wght@400;500&display=swap'); /* Tema CLARO (por defecto) */ :root { /* Marca */ --color-primary: #CC0000; --color-primary-alt: #E31314; --color-primary-soft: #FFE9E9; /* Base UI */ --color-bg: #F5F5F5; /* fondo general */ --color-surface: #FFFFFF; /* cards/diálogos/tablas */ --color-surface-elevated: #FCFCFC; --color-text: #2B2928; /* texto principal */ --color-text-2: #525252; /* texto secundario */ --color-border: #E5E7EB; /* bordes discretos */ /* Feedback */ --color-success: #1f9d55; --color-warning: #f59e0b; --color-danger: #d32f2f; /* Tipografías */ --font-title: 'Montserrat', sans-serif; --font-body: 'Roboto', sans-serif; /* Escalas tipográficas */ --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; /* Ritmo espacial */ --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; /* Radius & sombra */ --radius: 12px; --radius-sm: 8px; --shadow-sm: 0 2px 6px rgba(0,0,0,.06); --shadow: 0 4px 12px rgba(0,0,0,.08); /* Layout */ --sidebar-w: 260px; --header-h: 60px; /* Semánticos adicionales */ --table-header: #f7f7f7; --gridline: #e8e8e8; --surface-0: #FFFFFF; /* base */ --surface-1: #F8F8F8; /* zebra / list rows */ --surface-2: #F1F3F5; /* hover / control */ --backdrop: rgba(15,15,16,.42); --divider: #E1E4E8; /* líneas suaves */ --divider-strong: #C7CCD1; /* separadores principales */ } /* Tema OSCURO */ :root[data-theme="dark"] { --color-bg: #151618; --color-surface: #1E1F22; --color-surface-elevated: #232428; --color-text: #ECEDEF; --color-text-2: #C0C4CA; --color-border: #2E3238; --color-primary-soft: #3A1E1E; --shadow-sm: 0 2px 8px rgba(0,0,0,.35); --shadow: 0 6px 18px rgba(0,0,0,.40); --table-header: #232428; --gridline: #2C3036; --surface-0: #1B1C1F; --surface-1: #232428; --surface-2: #2A2D33; --backdrop: rgba(0,0,0,.55); --divider: #2C2F34; --divider-strong: #3A3F46; } /* Preferencia SO: oscuro por defecto si no hay preferencia guardada */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #151618; --color-surface: #1E1F22; --color-text: #ECEDEF; --color-text-2: #C0C4CA; --color-border: #2E3238; --color-primary-soft: #3A1E1E; --table-header: #232428; --gridline: #2C3036; --surface-0: #1B1C1F; --surface-1: #232428; --surface-2: #2A2D33; --backdrop: rgba(0,0,0,.55); } }