/* ============================================================ THOR — Modo Oscuro Se activa añadiendo data-theme="dark" al elemento No modifica nada del CSS existente — solo sobreescribe variables ============================================================ */ [data-theme="dark"] { /* Paleta principal — invertida */ --primary-blue: #60A5FA; --primary-blue-dark: #3B82F6; --primary-blue-darker: #2563EB; --primary-blue-light: #93C5FD; --primary-blue-lighter:#BFDBFE; --secondary-blue: #BFDBFE; --accent-blue: #22D3EE; --light-blue: #1E3A5F; --very-light-blue: #172554; /* Grises invertidos */ --gray-50: #0F172A; --gray-100: #1E293B; --gray-200: #334155; --gray-300: #475569; --gray-400: #64748B; --gray-500: #94A3B8; --gray-600: #CBD5E1; --gray-700: #E2E8F0; --gray-800: #F1F5F9; /* Variables semánticas usadas por componentes */ --sc-title: #F1F5F9; --sc-sub: #94A3B8; --sc-border: #334155; --sc-bg-card: #1E293B; --sc-bg-input: #0F172A; --sc-panel-bg: #1E293B; } /* ── Fondo y texto base ── */ [data-theme="dark"] body { background-color: #0F172A !important; color: #E2E8F0 !important; } /* ── Header ── */ [data-theme="dark"] header { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important; border-bottom: 1px solid #334155 !important; } /* ── Sidebar / Nav ── */ [data-theme="dark"] #mainNav, [data-theme="dark"] .sidebar, [data-theme="dark"] nav { background: #1E293B !important; border-right: 1px solid #334155 !important; } [data-theme="dark"] nav ul li { color: #CBD5E1 !important; } [data-theme="dark"] nav ul li:hover, [data-theme="dark"] nav ul li.active { background: #334155 !important; color: #F1F5F9 !important; } /* ── Secciones main ── */ [data-theme="dark"] main, [data-theme="dark"] .section, [data-theme="dark"] section { background: transparent !important; } /* ── Cards genéricas ── */ [data-theme="dark"] .card, [data-theme="dark"] .bg-white, [data-theme="dark"] [class*="bg-white"], [data-theme="dark"] .rounded-xl, [data-theme="dark"] .rounded-2xl { background-color: #1E293B !important; border-color: #334155 !important; color: #E2E8F0 !important; } /* ── Inputs y selects ── */ [data-theme="dark"] input:not([type=checkbox]):not([type=radio]), [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: #0F172A !important; border-color: #334155 !important; color: #E2E8F0 !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #64748B !important; } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: #60A5FA !important; box-shadow: 0 0 0 3px rgba(96,165,250,.15) !important; } /* ── Tablas ── */ [data-theme="dark"] table { background: #1E293B !important; color: #E2E8F0 !important; } [data-theme="dark"] th { background: #0F172A !important; color: #94A3B8 !important; border-color: #334155 !important; } [data-theme="dark"] td { border-color: #334155 !important; color: #E2E8F0 !important; } [data-theme="dark"] tr:hover td { background: #334155 !important; } /* ── Kanban ── */ [data-theme="dark"] .kanban-board, [data-theme="dark"] #kanbanLicitacionesContainer { background: transparent !important; } [data-theme="dark"] .kanban-column { background: #1E293B !important; border: 1px solid #334155 !important; } [data-theme="dark"] .kanban-column-header { background: #0F172A !important; border-bottom: 1px solid #334155 !important; color: #F1F5F9 !important; } [data-theme="dark"] .kanban-card-stacked, [data-theme="dark"] .kanban-card { background: #1E293B !important; border: 1px solid #334155 !important; color: #E2E8F0 !important; box-shadow: 0 2px 8px rgba(0,0,0,.3) !important; } [data-theme="dark"] .kanban-card-stacked:hover, [data-theme="dark"] .kanban-card:hover { background: #263348 !important; box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; } [data-theme="dark"] .kanban-card-stacked .card-title, [data-theme="dark"] .kanban-card .card-title { color: #F1F5F9 !important; } [data-theme="dark"] .kanban-card-stacked .card-meta, [data-theme="dark"] .kanban-card .card-meta { color: #94A3B8 !important; } /* ── Modales ── */ [data-theme="dark"] .modal-overlay, [data-theme="dark"] .modal-overlay-kanban, [data-theme="dark"] .modal-overlay-admin { background: rgba(0,0,0,.7) !important; } [data-theme="dark"] .modal-container, [data-theme="dark"] .modal-container-kanban, [data-theme="dark"] .modal-container-admin, [data-theme="dark"] .modal-content { background: #1E293B !important; border: 1px solid #334155 !important; color: #E2E8F0 !important; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-header-admin { background: #0F172A !important; border-bottom: 1px solid #334155 !important; color: #F1F5F9 !important; } /* ── Botones secundarios ── */ [data-theme="dark"] button:not([class*="bg-"]):not([style*="background"]) { color: #E2E8F0; } /* ── Dashboard cards ── */ [data-theme="dark"] .dashboard-card, [data-theme="dark"] .stat-card, [data-theme="dark"] [class*="stat-"] { background: #1E293B !important; border: 1px solid #334155 !important; color: #E2E8F0 !important; } /* ── GlobalLoader en dark ── */ [data-theme="dark"] #globalLoader { background: radial-gradient(1200px 600px at 50% 0%, rgba(96,165,250,.08), rgba(96,165,250,.04), transparent), linear-gradient(180deg, rgba(15,23,42,.95), rgba(30,41,59,.98)) !important; } [data-theme="dark"] #globalLoader .gl-card { background: linear-gradient(180deg, #1E293B, #0F172A) !important; border: 1px solid #334155 !important; box-shadow: 0 12px 40px rgba(0,0,0,.5) !important; } [data-theme="dark"] #globalLoader .gl-title { color: #60A5FA !important; } [data-theme="dark"] #globalLoader .gl-sub { color: #94A3B8 !important; } /* ── Historial ── */ [data-theme="dark"] .historial-card, [data-theme="dark"] .historial-item { background: #1E293B !important; border-color: #334155 !important; color: #E2E8F0 !important; } /* ── Scrollbar en dark ── */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0F172A; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; } /* ── Toasts ── */ [data-theme="dark"] .toast, [data-theme="dark"] [class*="toast"] { background: #1E293B !important; border: 1px solid #334155 !important; color: #E2E8F0 !important; } /* ── Pill badges ── */ [data-theme="dark"] .badge, [data-theme="dark"] .pill, [data-theme="dark"] [class*="badge-"] { opacity: .9; } /* ── Textos de ayuda ── */ [data-theme="dark"] .text-gray-500, [data-theme="dark"] .text-gray-400, [data-theme="dark"] [class*="text-gray"] { color: #94A3B8 !important; } [data-theme="dark"] .text-gray-700, [data-theme="dark"] .text-gray-800, [data-theme="dark"] .text-gray-900 { color: #E2E8F0 !important; } /* ── Separadores ── */ [data-theme="dark"] hr, [data-theme="dark"] .divider { border-color: #334155 !important; } /* ── Fondos de sección ── */ [data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-gray-100, [data-theme="dark"] [class*="bg-gray-5"], [data-theme="dark"] [class*="bg-gray-1"] { background-color: #1E293B !important; } [data-theme="dark"] .bg-gray-200, [data-theme="dark"] [class*="bg-gray-2"] { background-color: #334155 !important; } /* ── Transición suave al cambiar tema ── */ html { transition: background-color .25s ease, color .25s ease; }