/* ============================================================================ THEME: DARK MODE ============================================================================ Activado via (toggle JS + persistencia localStorage). Estrategia: NO modificamos el bundle Tailwind. Sobrescribimos las clases más comunes (.tw-bg-white, .tw-text-gray-*, etc.) cuando el ancestor tiene data-theme="dark". Esto evita recompilar Tailwind y aplica el dark mode incremental por capas. Convenciones de palette dark: --dk-bg-base #0f172a (slate-900 equivalent — body) --dk-bg-surf #1e293b (slate-800 — cards) --dk-bg-surf-2 #334155 (slate-700 — secondary cards / hover) --dk-border #334155 (slate-700 — borders) --dk-text #f1f5f9 (slate-100 — body text) --dk-text-muted #94a3b8 (slate-400 — secondary text) --dk-text-faint #64748b (slate-500 — captions) --dk-accent #818cf8 (primary lighter for dark mode) ============================================================================ */ html[data-theme="dark"] { --dk-bg-base: #0f172a; --dk-bg-surf: #1e293b; --dk-bg-surf-2: #334155; --dk-border: #334155; --dk-text: #f1f5f9; --dk-text-muted: #94a3b8; --dk-text-faint: #64748b; --dk-accent: #818cf8; --dk-shadow: 0 1px 3px 0 rgba(0,0,0,0.4), 0 1px 2px 0 rgba(0,0,0,0.3); } /* ---------- BODY + html background ---------- */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--dk-bg-base) !important; color: var(--dk-text); } /* ---------- TAILWIND OVERRIDES (most common compiled classes) ---------- */ html[data-theme="dark"] .tw-bg-white, html[data-theme="dark"] body .tw-bg-white { background-color: var(--dk-bg-surf) !important; } html[data-theme="dark"] .tw-bg-gray-50 { background-color: var(--dk-bg-base) !important; } html[data-theme="dark"] .tw-bg-gray-100 { background-color: var(--dk-bg-surf-2) !important; } html[data-theme="dark"] .tw-bg-gray-200 { background-color: var(--dk-bg-surf-2) !important; } html[data-theme="dark"] .tw-text-gray-900 { color: var(--dk-text) !important; } html[data-theme="dark"] .tw-text-gray-800 { color: var(--dk-text) !important; } html[data-theme="dark"] .tw-text-gray-700 { color: var(--dk-text-muted) !important; } html[data-theme="dark"] .tw-text-gray-600 { color: var(--dk-text-muted) !important; } html[data-theme="dark"] .tw-text-gray-500 { color: var(--dk-text-muted) !important; } html[data-theme="dark"] .tw-text-gray-400 { color: var(--dk-text-faint) !important; } html[data-theme="dark"] .tw-text-black { color: var(--dk-text) !important; } html[data-theme="dark"] .tw-border-gray-200, html[data-theme="dark"] .tw-border-gray-300 { border-color: var(--dk-border) !important; } html[data-theme="dark"] .tw-ring-gray-200 { box-shadow: 0 0 0 1px var(--dk-border) !important; } html[data-theme="dark"] .tw-shadow, html[data-theme="dark"] .tw-shadow-sm, html[data-theme="dark"] .tw-shadow-lg { box-shadow: var(--dk-shadow) !important; } /* Primary tones look fine on dark backgrounds; keep but slightly desaturate text */ html[data-theme="dark"] .tw-bg-primary-50 { background-color: rgba(129, 140, 248, 0.12) !important; } html[data-theme="dark"] .tw-text-primary-700, html[data-theme="dark"] .tw-text-primary-800 { color: var(--dk-accent) !important; } html[data-theme="dark"] .tw-text-primary { color: var(--dk-accent) !important; } /* ---------- LEGACY POS / AdminLTE backgrounds (sidebar, content-wrapper, etc.) ---------- */ html[data-theme="dark"] .content-wrapper, html[data-theme="dark"] .main-footer, html[data-theme="dark"] .main-header, html[data-theme="dark"] .wrapper { background-color: var(--dk-bg-base) !important; color: var(--dk-text); } /* Sidebar */ html[data-theme="dark"] .main-sidebar, html[data-theme="dark"] .sidebar, html[data-theme="dark"] aside.main-sidebar { background-color: #020617 !important; } html[data-theme="dark"] .sidebar-menu a, html[data-theme="dark"] .sidebar-menu li > a { color: var(--dk-text-muted) !important; } html[data-theme="dark"] .sidebar-menu li.active > a, html[data-theme="dark"] .sidebar-menu li.active > a > span, html[data-theme="dark"] .sidebar-menu li > a:hover { color: var(--dk-text) !important; background-color: rgba(129,140,248,0.15) !important; } /* Bootstrap panels / boxes */ html[data-theme="dark"] .box, html[data-theme="dark"] .panel, html[data-theme="dark"] .well { background-color: var(--dk-bg-surf) !important; border-color: var(--dk-border) !important; color: var(--dk-text); } html[data-theme="dark"] .box-header, html[data-theme="dark"] .panel-heading { border-bottom-color: var(--dk-border) !important; } /* ---------- FORM ELEMENTS ---------- */ html[data-theme="dark"] .form-control, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--dk-bg-surf-2) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--dk-text-faint) !important; } html[data-theme="dark"] .form-control:focus { border-color: var(--dk-accent) !important; } /* Select2 (heavily used in this app) */ html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--dk-bg-surf-2) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dk-text) !important; } html[data-theme="dark"] .select2-dropdown { background-color: var(--dk-bg-surf) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .select2-results__option { color: var(--dk-text); } html[data-theme="dark"] .select2-results__option--highlighted[aria-selected] { background-color: var(--dk-accent) !important; color: #fff !important; } html[data-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: var(--dk-bg-surf-2) !important; color: var(--dk-text); border-color: var(--dk-border); } /* ---------- TABLES (DataTables) ---------- */ html[data-theme="dark"] table.dataTable, html[data-theme="dark"] table.table, html[data-theme="dark"] .table { background-color: var(--dk-bg-surf) !important; color: var(--dk-text); } html[data-theme="dark"] table.dataTable thead th, html[data-theme="dark"] .table thead th { background-color: var(--dk-bg-surf-2) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] table.dataTable tbody td, html[data-theme="dark"] .table tbody td { border-color: var(--dk-border) !important; color: var(--dk-text); } html[data-theme="dark"] table.dataTable.stripe tbody tr.odd, html[data-theme="dark"] table.dataTable.display tbody tr.odd, html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.02) !important; } html[data-theme="dark"] table.dataTable.hover tbody tr:hover, html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: rgba(129,140,248,0.08) !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_length, html[data-theme="dark"] .dataTables_wrapper .dataTables_filter, html[data-theme="dark"] .dataTables_wrapper .dataTables_info, html[data-theme="dark"] .dataTables_wrapper .dataTables_processing, html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--dk-text) !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--dk-text) !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--dk-accent) !important; color: #fff !important; border-color: var(--dk-accent) !important; } /* ---------- MODALS + DROPDOWNS ---------- */ html[data-theme="dark"] .modal-content { background-color: var(--dk-bg-surf) !important; color: var(--dk-text); } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--dk-border) !important; } html[data-theme="dark"] .modal-title { color: var(--dk-text) !important; } html[data-theme="dark"] .dropdown-menu { background-color: var(--dk-bg-surf) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .dropdown-menu > li > a { color: var(--dk-text) !important; } html[data-theme="dark"] .dropdown-menu > li > a:hover, html[data-theme="dark"] .dropdown-menu > li > a:focus { background-color: var(--dk-bg-surf-2) !important; } /* ---------- BUTTONS ---------- */ html[data-theme="dark"] .btn-default { background-color: var(--dk-bg-surf-2) !important; color: var(--dk-text) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .btn-default:hover { background-color: var(--dk-bg-surf) !important; } /* ---------- BORDERS / DIVIDERS ---------- */ html[data-theme="dark"] hr, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] [class*="border-bottom"] { border-color: var(--dk-border) !important; } /* ---------- THE THEME TOGGLE BUTTON ---------- */ .theme-toggle-btn { transition: transform 0.2s ease, background-color 0.2s ease; } .theme-toggle-btn:hover { transform: rotate(15deg); } .theme-toggle-btn .sun { display: none; } .theme-toggle-btn .moon { display: inline-block; } html[data-theme="dark"] .theme-toggle-btn .sun { display: inline-block; } html[data-theme="dark"] .theme-toggle-btn .moon { display: none; } /* ---------- PRINT (force light) ---------- */ @media print { html[data-theme="dark"] *, html[data-theme="dark"] body { background: #fff !important; color: #000 !important; } }