/* ============================================================= NeuHábita — Modo Oscuro Activar agregando la clase "dark-mode" al : document.body.classList.toggle('dark-mode'); Guardar preferencia: localStorage.setItem('darkMode', '1'); ============================================================= */ /* ── Variables base ── */ body.dark-mode { --dm-bg: #1a1d23; --dm-bg-secondary: #22262e; --dm-bg-tertiary: #2b2f3a; --dm-surface: #2e3340; --dm-border: #3d4454; --dm-text: #d8dce8; --dm-text-muted: #8890a4; --dm-text-heading: #eef0f6; --dm-link: #5baddb; --dm-link-hover: #7dc3e8; --dm-blue: #2d7ab3; --dm-blue-light: #3d90cc; --dm-green: #1d8a4b; --dm-green-light: #27a85c; --dm-red: #c0392b; --dm-yellow: #c89b2a; --dm-shadow: rgba(0, 0, 0, 0.5); } /* ══════════════════════════════════════════════ 1. LAYOUT GENERAL — AdminLTE wrapper ══════════════════════════════════════════════ */ body.dark-mode, body.dark-mode .content-wrapper, body.dark-mode .right-side, body.dark-mode .wrapper { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } /* ── Navbar superior ── */ body.dark-mode .main-header .navbar, body.dark-mode .main-header .logo { background-color: var(--dm-bg-secondary) !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.dark-mode .main-header .navbar .nav > li > a, body.dark-mode .main-header .logo { color: var(--dm-text) !important; } body.dark-mode .main-header .navbar .nav > li > a:hover { background-color: var(--dm-bg-tertiary) !important; } /* ── Skin-blue / skin-green: barra de skin ── */ body.dark-mode.skin-blue .main-header .navbar, body.dark-mode.skin-green .main-header .navbar, body.dark-mode.skin-red .main-header .navbar { background-color: var(--dm-bg-secondary) !important; } body.dark-mode.skin-blue .main-header .logo, body.dark-mode.skin-green .main-header .logo, body.dark-mode.skin-red .main-header .logo { background-color: var(--dm-bg-tertiary) !important; border-bottom-color: var(--dm-border) !important; } /* ── Sidebar ── */ body.dark-mode .main-sidebar, body.dark-mode .left-side { background-color: var(--dm-bg-secondary) !important; } body.dark-mode .sidebar-menu > li > a, body.dark-mode .sidebar-menu > li.header { color: var(--dm-text-muted) !important; border-left-color: transparent !important; } body.dark-mode .sidebar-menu > li > a:hover, body.dark-mode .sidebar-menu > li.active > a { background-color: var(--dm-bg-tertiary) !important; color: var(--dm-text-heading) !important; } body.dark-mode .sidebar-menu > li.active > a { border-left-color: var(--dm-blue-light) !important; } body.dark-mode .sidebar-menu .treeview-menu { background-color: var(--dm-bg) !important; } body.dark-mode .sidebar-menu .treeview-menu > li > a { color: var(--dm-text-muted) !important; } body.dark-mode .sidebar-menu .treeview-menu > li > a:hover, body.dark-mode .sidebar-menu .treeview-menu > li.active > a { color: var(--dm-link) !important; } body.dark-mode .user-panel > .info, body.dark-mode .user-panel > .info > a { color: var(--dm-text) !important; } /* ── Footer ── */ body.dark-mode .main-footer { background-color: var(--dm-bg-secondary) !important; border-top-color: var(--dm-border) !important; color: var(--dm-text-muted) !important; } /* ══════════════════════════════════════════════ 2. BOXES (AdminLTE) ══════════════════════════════════════════════ */ body.dark-mode .box { background-color: var(--dm-surface) !important; border-top-color: var(--dm-border) !important; box-shadow: 0 1px 3px var(--dm-shadow) !important; } body.dark-mode .box-header { background-color: var(--dm-surface) !important; color: var(--dm-text-heading) !important; border-bottom-color: var(--dm-border) !important; } body.dark-mode .box-body, body.dark-mode .box-footer { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; border-top-color: var(--dm-border) !important; } body.dark-mode .box.box-primary { border-top-color: var(--dm-blue) !important; } body.dark-mode .box.box-success { border-top-color: var(--dm-green) !important; } body.dark-mode .box.box-danger { border-top-color: var(--dm-red) !important; } body.dark-mode .box.box-warning { border-top-color: var(--dm-yellow)!important; } /* ── Info boxes / small boxes ── */ body.dark-mode .info-box { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; box-shadow: 0 1px 3px var(--dm-shadow) !important; } body.dark-mode .small-box { color: #fff !important; } /* ══════════════════════════════════════════════ 3. TABLAS (Bootstrap + Yii GridView) ══════════════════════════════════════════════ */ body.dark-mode table, body.dark-mode .table { color: var(--dm-text) !important; border-color: var(--dm-border) !important; } body.dark-mode .table > thead > tr > th, body.dark-mode .table > tbody > tr > th, body.dark-mode .table > tfoot > tr > th { background-color: var(--dm-bg-tertiary) !important; border-color: var(--dm-border) !important; color: var(--dm-text-heading) !important; } /* Fila de filtros de Yii GridView: usa dentro de */ body.dark-mode .table > thead > tr > td { background-color: var(--dm-bg-secondary) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.dark-mode .table > tbody > tr > td, body.dark-mode .table > tfoot > tr > td { border-color: var(--dm-border) !important; color: var(--dm-text) !important; } body.dark-mode .table-bordered, body.dark-mode .table-bordered > thead > tr > th, body.dark-mode .table-bordered > thead > tr > td, body.dark-mode .table-bordered > tbody > tr > td, body.dark-mode .table-bordered > tfoot > tr > td { border-color: var(--dm-border) !important; } body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.04) !important; } body.dark-mode .table-hover > tbody > tr:hover { background-color: rgba(93, 173, 219, 0.12) !important; } /* GridView highlight personalizado */ body.dark-mode #grillaTramites tbody tr:hover { background: rgba(93, 173, 219, 0.15) !important; } /* Filas contextuales de Bootstrap (tr.info, tr.danger, etc.) */ body.dark-mode .table > tbody > tr.info > td, body.dark-mode .table > tbody > tr.info > th { background-color: rgba(61, 144, 204, 0.15) !important; } body.dark-mode .table > tbody > tr.danger > td, body.dark-mode .table > tbody > tr.danger > th { background-color: rgba(192, 57, 43, 0.15) !important; } body.dark-mode .table > tbody > tr.success > td, body.dark-mode .table > tbody > tr.success > th { background-color: rgba(29, 138, 75, 0.15) !important; } body.dark-mode .table > tbody > tr.warning > td, body.dark-mode .table > tbody > tr.warning > th { background-color: rgba(200, 155, 42, 0.12) !important; } /* Estados de fila: listado de trámites (_listado_tramite.php) */ body.dark-mode tr.tr-estado-resuelto > td { background-color: rgba(29, 138, 75, 0.18) !important; } body.dark-mode tr.tr-estado-pendiente > td { background-color: rgba(192, 100, 57, 0.18) !important; } body.dark-mode tr.tr-estado-orden > td { background-color: rgba(200, 155, 42, 0.15) !important; } body.dark-mode tr.tr-estado-inhibido > td { background-color: rgba(200, 155, 42, 0.10) !important; } /* Striped override (anula el #f9f9f9 del