/* ═══════════════════════════════════════════════════════════════════════ Tradebe GMAO · Sistema de temas: HUD (oscuro) / Blueprint (claro) Mecanismo de activación ─────────────────────── · Automático : prefers-color-scheme del SO · Forzado : data-theme="dark" + data-bs-theme="dark" en data-theme="light" + data-bs-theme="light" en Tokens comunes (no cambian entre temas): · --font-display, --font-mono, --tracking-wide · --clip-card, --clip-button (biseles de esquina recortada) ═══════════════════════════════════════════════════════════════════════ */ /* ── Tokens inmutables ─────────────────────────────────────────────────── */ :root { --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", "Fira Code", Menlo, Consolas, monospace; --tracking-wide: 0.12em; /* Biseles: esquina superior-derecha e inferior-izquierda recortadas */ --clip-card: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); --clip-button: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); /* Sidebar */ --sb-w: 214px; --sb-w-min: 62px; --radius-sm: 6px; --trans: .15s ease; } /* ══════════════════════════════════════════════════════════════════════ HUD — Modo oscuro (por defecto) Estética: cabina / ciencia ficción. Cian luminoso sobre negro azulado. Las variables oscuras van SOLO en [data-theme="dark"], no en :root, para que [data-theme="light"] pueda sobrescribirlas sin conflicto. ══════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Fondos */ --bg: #080c16; --surface: #0d1422; --surface-raised: #131b2e; /* Tipografía */ --text: #dceef4; --text-muted: #5d7a8a; /* Acento — cian luminoso */ --accent: #2dd4ee; --accent-strong:#22c4de; --accent-soft: rgba(45, 212, 238, 0.12); /* Texto sobre fondo de acento (contraste ~9.5:1) */ --btn-on-accent: #060a12; /* Bordes */ --border: rgba(45, 212, 238, 0.30); --border-danger: rgba(220, 38, 38, 0.35); /* Glows — lo que en oscuro brilla, en claro se traza */ --glow-accent: 0 0 12px rgba(45, 212, 238, 0.45); --glow-text: 0 0 10px rgba(45, 212, 238, 0.35); --glow-filter: drop-shadow(0 0 8px rgba(45, 212, 238, 0.45)); --shadow-hover: 0 4px 24px rgba(0, 0, 0, 0.55); /* Estados semánticos */ --state-success: #4ade80; --state-success-bg: rgba(34, 197, 94, 0.10); --state-success-border: rgba(34, 197, 94, 0.30); --state-danger: #ef4444; --state-danger-bg: rgba(220, 38, 38, 0.10); --state-danger-border: rgba(220, 38, 38, 0.25); --state-info: #7dd3fc; --state-info-bg: rgba(56, 189, 248, 0.10); --state-info-border: rgba(56, 189, 248, 0.25); /* Borde reforzado (hover sidebar) */ --border-strong: rgba(45, 212, 238, 0.65); /* Badge de teclado (atajos) */ --kbd-bg: rgba(45, 212, 238, 0.15); --kbd-text: #2dd4ee; --kbd-border: rgba(45, 212, 238, 0.45); /* ── Overrides Bootstrap ─────────────────────────────────────────── */ --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-secondary-color: var(--text-muted); --bs-tertiary-bg: var(--surface); --bs-border-color: var(--border); --bs-border-color-translucent: var(--border); --bs-primary: var(--accent); --bs-primary-rgb: 45, 212, 238; --bs-link-color: var(--accent); --bs-link-color-rgb: 45, 212, 238; --bs-link-hover-color: var(--accent-strong); --bs-link-hover-color-rgb: 34, 196, 222; } /* ══════════════════════════════════════════════════════════════════════ BLUEPRINT — Modo claro vía preferencia del SO Estética: plano de ingeniería diurno. Azul técnico sólido, sin glows. ══════════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { /* Fondos */ --bg: #eef3f9; --surface: #ffffff; --surface-raised: #f4f7fb; /* Tipografía */ --text: #13202d; --text-muted: #5a6b78; /* Acento — azul de plano técnico sólido */ --accent: #0b6db5; --accent-strong: #0955a0; --accent-soft: rgba(11, 109, 181, 0.10); /* Texto sobre fondo de acento (contraste ~4.9:1 WCAG AA) */ --btn-on-accent: #ffffff; /* Bordes — líneas finas sin resplandor */ --border: rgba(11, 109, 181, 0.35); --border-danger: rgba(220, 38, 38, 0.40); /* En claro no hay glows: el trazo sustituye a la luz */ --glow-accent: 0 1px 3px rgba(16, 32, 46, 0.08); --glow-text: none; --glow-filter: none; --shadow-hover: 0 4px 12px rgba(11, 109, 181, 0.18); /* Estados semánticos (mejor contraste en fondo claro) */ --state-success: #15803d; --state-success-bg: rgba(34, 197, 94, 0.10); --state-success-border: rgba(34, 197, 94, 0.40); --state-danger: #b91c1c; --state-danger-bg: rgba(220, 38, 38, 0.08); --state-danger-border: rgba(220, 38, 38, 0.30); --state-info: #0369a1; --state-info-bg: rgba(14, 165, 233, 0.10); --state-info-border: rgba(14, 165, 233, 0.30); /* Borde reforzado */ --border-strong: rgba(11, 109, 181, 0.60); /* Badge de teclado */ --kbd-bg: rgba(11, 109, 181, 0.12); --kbd-text: #0b6db5; --kbd-border: rgba(11, 109, 181, 0.40); /* ── Overrides Bootstrap ─────────────────────────────────────── */ --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-secondary-color: var(--text-muted); --bs-tertiary-bg: var(--surface); --bs-border-color: var(--border); --bs-border-color-translucent: var(--border); --bs-primary: var(--accent); --bs-primary-rgb: 11, 109, 181; --bs-link-color: var(--accent); --bs-link-color-rgb: 11, 109, 181; --bs-link-hover-color: var(--accent-strong); --bs-link-hover-color-rgb: 9, 85, 160; } } /* ══════════════════════════════════════════════════════════════════════ BLUEPRINT — Modo claro forzado por data-theme="light" (Idéntico al bloque @media anterior; necesario para el override manual) ══════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg: #eef3f9; --surface: #ffffff; --surface-raised: #f4f7fb; --text: #13202d; --text-muted: #5a6b78; --accent: #0b6db5; --accent-strong: #0955a0; --accent-soft: rgba(11, 109, 181, 0.10); --btn-on-accent: #ffffff; --border: rgba(11, 109, 181, 0.35); --border-danger: rgba(220, 38, 38, 0.40); --glow-accent: 0 1px 3px rgba(16, 32, 46, 0.08); --glow-text: none; --glow-filter: none; --shadow-hover: 0 4px 12px rgba(11, 109, 181, 0.18); --state-success: #15803d; --state-success-bg: rgba(34, 197, 94, 0.10); --state-success-border: rgba(34, 197, 94, 0.40); --state-danger: #b91c1c; --state-danger-bg: rgba(220, 38, 38, 0.08); --state-danger-border: rgba(220, 38, 38, 0.30); --state-info: #0369a1; --state-info-bg: rgba(14, 165, 233, 0.10); --state-info-border: rgba(14, 165, 233, 0.30); --border-strong: rgba(11, 109, 181, 0.60); --kbd-bg: rgba(11, 109, 181, 0.12); --kbd-text: #0b6db5; --kbd-border: rgba(11, 109, 181, 0.40); --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-secondary-color: var(--text-muted); --bs-tertiary-bg: var(--surface); --bs-border-color: var(--border); --bs-border-color-translucent: var(--border); --bs-primary: var(--accent); --bs-primary-rgb: 11, 109, 181; --bs-link-color: var(--accent); --bs-link-color-rgb: 11, 109, 181; --bs-link-hover-color: var(--accent-strong); --bs-link-hover-color-rgb: 9, 85, 160; }