/* ============================================================ TOKENS DE DISEÑO Sistema visual de referencia: azul eléctrico metálico, retícula técnica, líneas de 1 px, esquinas rectas y tipografía condensada en títulos y cifras. Claro / oscuro con [data-theme] en , que escribe js/app.js. Todo token existe en los dos temas: uno que falte rompe el oscuro. ============================================================ */ :root, [data-theme="light"] { /* Fondos — papel frío */ --bg-app: #f2f4f8; --bg-surface: #ffffff; --bg-surface-2: #f6f8fb; --bg-surface-3: #e7ecf5; /* Tinta */ --text-primary: #0b1a31; --text-secondary: #33445e; --text-muted: #5b6a82; --text-inverse: #ffffff; /* Líneas: tres pesos (marco, pelo interno, activo) */ --border: rgba(11, 26, 49, 0.18); --border-hair: rgba(11, 26, 49, 0.10); --border-strong: rgba(11, 26, 49, 0.34); --corner-ink: rgba(11, 26, 49, 0.55); --grid-line: rgba(11, 107, 225, 0.09); /* Marca */ --accent: #0b6be1; --accent-hover: #0a51ab; --accent-ink: #0a51ab; --accent-light: rgba(11, 107, 225, 0.10); --accent-gradient: linear-gradient(135deg, #0b6be1 0%, #2e9bff 100%); /* Botón macizo: el degradado de acción, y un paso más profundo al pasar */ --btn-bg: linear-gradient(135deg, #0b6be1 0%, #2e9bff 100%); --btn-bg-hover: linear-gradient(135deg, #0a5cc4 0%, #2489e8 100%); --btn-ink: #ffffff; --btn-line: rgba(11, 107, 225, 0.45); /* Barra lateral: siempre navy, en los dos temas */ --sidebar-bg: #071b39; --sidebar-text: rgba(233, 239, 247, 0.58); --sidebar-text-active: #e9eff7; --sidebar-item-active-bg: rgba(76, 154, 255, 0.14); --sidebar-item-hover-bg: rgba(233, 239, 247, 0.07); --sidebar-border: rgba(233, 239, 247, 0.14); --sidebar-mark: #4c9aff; /* Estado */ --success: #0f7a4a; --success-bg: rgba(15, 122, 74, 0.10); --danger: #b3261e; --danger-ink: #ffffff; --danger-bg: rgba(179, 38, 30, 0.09); --warning: #8a6100; --warning-bg: rgba(138, 97, 0, 0.10); --info: #0b6be1; --info-bg: rgba(11, 107, 225, 0.10); /* Sombras: solo donde algo flota de verdad (modal, menú, toast) */ --shadow-sm: 0 1px 2px rgba(11, 26, 49, 0.10); --shadow-md: 0 2px 10px rgba(11, 26, 49, 0.12); --shadow-lg: 0 18px 48px rgba(11, 26, 49, 0.22); /* Cabecera */ --header-bg: rgba(255, 255, 255, 0.82); --header-border: rgba(11, 26, 49, 0.18); --overlay: rgba(7, 27, 57, 0.55); } [data-theme="dark"] { /* Fondos — la misma navy del sitio, en tres pisos */ --bg-app: #071b39; --bg-surface: #0b2242; --bg-surface-2: #0f2a4f; --bg-surface-3: #14335c; /* Tinta */ --text-primary: #e9eff7; --text-secondary: rgba(233, 239, 247, 0.80); --text-muted: rgba(233, 239, 247, 0.58); --text-inverse: #071b39; --border: rgba(233, 239, 247, 0.22); --border-hair: rgba(233, 239, 247, 0.12); --border-strong: rgba(233, 239, 247, 0.38); --corner-ink: rgba(233, 239, 247, 0.55); --grid-line: rgba(76, 154, 255, 0.10); --accent: #4c9aff; --accent-hover: #7fb8ff; --accent-ink: #7fb8ff; --accent-light: rgba(76, 154, 255, 0.14); --accent-gradient: linear-gradient(135deg, #0b6be1 0%, #2e9bff 100%); --btn-bg: linear-gradient(135deg, #0b6be1 0%, #2e9bff 100%); --btn-bg-hover: linear-gradient(135deg, #0a5cc4 0%, #2489e8 100%); --btn-ink: #ffffff; --btn-line: rgba(76, 154, 255, 0.50); /* Un piso por debajo del fondo: la barra sostiene, no compite */ --sidebar-bg: #040e21; --sidebar-text: rgba(233, 239, 247, 0.58); --sidebar-text-active: #e9eff7; --sidebar-item-active-bg: rgba(76, 154, 255, 0.16); --sidebar-item-hover-bg: rgba(233, 239, 247, 0.06); --sidebar-border: rgba(233, 239, 247, 0.12); --sidebar-mark: #4c9aff; --success: #35c07a; --success-bg: rgba(53, 192, 122, 0.14); /* Sobre el coral del tema oscuro la tinta va oscura: el blanco no llega al contraste mínimo */ --danger: #ff6b5e; --danger-ink: #2b0806; --danger-bg: rgba(255, 107, 94, 0.14); --warning: #e0a92a; --warning-bg: rgba(224, 169, 42, 0.14); --info: #4c9aff; --info-bg: rgba(76, 154, 255, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55); --header-bg: rgba(7, 27, 57, 0.82); --header-border: rgba(233, 239, 247, 0.22); --overlay: rgba(2, 9, 20, 0.72); } /* ============================================================ TIPOGRAFÍA Dos familias: Barlow Condensed 600 para títulos, cifras y marca; Barlow para todo el resto. --font-data existe para los rótulos en versalitas con interletrado abierto. ============================================================ */ :root { --font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif; --font-data: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 16px; --text-lg: 17px; --text-xl: 22px; --text-2xl: 26px; --text-3xl: 34px; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.15; --lh-normal: 1.55; --lh-loose: 1.75; /* Interletrado de los rótulos: .12em en etiquetas, .16em en rúbricas */ --track-label: 0.12em; --track-rubric: 0.16em; --track-action: 0.04em; } /* ============================================================ ESPACIADO ============================================================ */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; } /* ============================================================ LAYOUT ============================================================ */ :root { --sidebar-width: 220px; --header-height: 64px; --mobile-nav-height: 60px; --border-radius: 0px; /* Radios en 0 en todo el sistema */ --transition: 0.18s ease; }