/* ==========================================================================
   PSG - Modo nocturno: core
   --------------------------------------------------------------------------
   Base global + layout Dashforge + componentes Bootstrap 4 + ecoschile.css,
   loading.css, estilos inline de base.html y pantallas de login.

   Reglas:
   - Todo va bajo html[data-theme="dark"]; el modo claro no se toca.
   - Se usan los tokens de psg-dark-tokens.css (var(--psg-*)).
   - Para reglas sobre ELEMENTOS (body, a, h1..h6, hr) se usa
     :where(html[data-theme="dark"]) para no subir la especificidad: así las
     clases (.btn, .nav-link, .tx-white, etc.) siguen ganando como en claro.
   - !important solo cuando la regla original lo usa (utilidades Bootstrap,
     select2, etc.) o hay que vencer un estilo inline.
   ========================================================================== */


/* ==========================================================================
   1. BASE GLOBAL
   ========================================================================== */

html[data-theme="dark"] {
    background-color: var(--psg-bg);
    /* Scrollbar en Firefox */
    scrollbar-color: var(--psg-border-strong) var(--psg-bg);
}

html[data-theme="dark"] body {
    background-color: var(--psg-bg);
    color: var(--psg-text);
}

/* Títulos */
:where(html[data-theme="dark"]) h1,
:where(html[data-theme="dark"]) h2,
:where(html[data-theme="dark"]) h3,
:where(html[data-theme="dark"]) h4,
:where(html[data-theme="dark"]) h5,
:where(html[data-theme="dark"]) h6,
:where(html[data-theme="dark"]) .h1,
:where(html[data-theme="dark"]) .h2,
:where(html[data-theme="dark"]) .h3,
:where(html[data-theme="dark"]) .h4,
:where(html[data-theme="dark"]) .h5,
:where(html[data-theme="dark"]) .h6 {
    color: var(--psg-text);
}

/* Enlaces (especificidad mínima: no pisa .btn, .nav-link, .dropdown-item...) */
:where(html[data-theme="dark"]) a {
    color: var(--psg-link);
}
:where(html[data-theme="dark"]) a:hover {
    color: var(--psg-primary-hover);
}

:where(html[data-theme="dark"]) hr {
    border-top-color: var(--psg-border);
}

:where(html[data-theme="dark"]) label,
:where(html[data-theme="dark"]) legend {
    color: inherit;
}

html[data-theme="dark"] ::selection {
    background-color: rgba(0, 169, 154, 0.45);
    color: #ffffff;
}

/* Scrollbars WebKit / Blink */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--psg-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--psg-border-strong);
    border-radius: 6px;
    border: 2px solid var(--psg-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: #4d6079;
}
html[data-theme="dark"] ::-webkit-scrollbar-corner {
    background: var(--psg-bg);
}

/* Perfect Scrollbar (menú lateral y otros contenedores) */
html[data-theme="dark"] .ps__rail-x:hover,
html[data-theme="dark"] .ps__rail-y:hover,
html[data-theme="dark"] .ps__rail-x:focus,
html[data-theme="dark"] .ps__rail-y:focus,
html[data-theme="dark"] .ps--clicking.ps__rail-x,
html[data-theme="dark"] .ps--clicking.ps__rail-y {
    background-color: var(--psg-surface-2);
}
html[data-theme="dark"] .ps__thumb-x,
html[data-theme="dark"] .ps__thumb-y {
    background-color: var(--psg-border-strong);
}


/* ==========================================================================
   2. UTILIDADES DASHFORGE (tx-*, bg-*, bd-*)
   ========================================================================== */

/* Colores de texto */
html[data-theme="dark"] .tx-color-01 { color: var(--psg-text); }
html[data-theme="dark"] .tx-color-02 { color: var(--psg-link); }
html[data-theme="dark"] .tx-color-03 { color: var(--psg-text-muted); }
html[data-theme="dark"] .tx-color-04 { color: var(--psg-text-subtle); }
html[data-theme="dark"] .tx-black,
html[data-theme="dark"] .tx-dark,
html[data-theme="dark"] .tx-gray-900,
html[data-theme="dark"] .tx-gray-800,
html[data-theme="dark"] .tx-gray-700 { color: var(--psg-text); }
html[data-theme="dark"] .tx-gray-600,
html[data-theme="dark"] .tx-gray-500 { color: var(--psg-text-muted); }
html[data-theme="dark"] .tx-gray-400,
html[data-theme="dark"] .tx-gray-300,
html[data-theme="dark"] .tx-gray-200,
html[data-theme="dark"] .tx-gray-100 { color: var(--psg-text-subtle); }

/* Fondos claros -> superficies */
html[data-theme="dark"] .bg-white { background-color: var(--psg-surface) !important; }
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-ui-01 { background-color: var(--psg-surface-2) !important; }
html[data-theme="dark"] .bg-gray-200,
html[data-theme="dark"] .bg-gray-300,
html[data-theme="dark"] .bg-ui-02 { background-color: var(--psg-surface-3) !important; }
html[data-theme="dark"] .bg-ui-03,
html[data-theme="dark"] .bg-gray-400 { background-color: var(--psg-border-strong) !important; }
html[data-theme="dark"] .bg-gray-1 { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .bg-gray-2 { background-color: rgba(255, 255, 255, 0.07); }
html[data-theme="dark"] .bg-gray-3 { background-color: rgba(255, 255, 255, 0.10); }
html[data-theme="dark"] .bg-gray-4 { background-color: rgba(255, 255, 255, 0.13); }

/* Fondos suaves (*-light) */
html[data-theme="dark"] .bg-primary-light { background-color: var(--psg-primary-soft); }
html[data-theme="dark"] .bg-success-light { background-color: var(--psg-success-soft); }
html[data-theme="dark"] .bg-warning-light { background-color: var(--psg-warning-soft); }
html[data-theme="dark"] .bg-pink-light { background-color: rgba(241, 0, 117, 0.18); }
html[data-theme="dark"] .bg-indigo-light { background-color: rgba(124, 108, 255, 0.2); }

/* Bordes */
html[data-theme="dark"] .bd,
html[data-theme="dark"] .bd-t,
html[data-theme="dark"] .bd-r,
html[data-theme="dark"] .bd-b,
html[data-theme="dark"] .bd-l,
html[data-theme="dark"] .bd-x,
html[data-theme="dark"] .bd-y,
html[data-theme="dark"] .bd-ui-01,
html[data-theme="dark"] .bd-ui-02,
html[data-theme="dark"] .bd-gray-100,
html[data-theme="dark"] .bd-gray-200,
html[data-theme="dark"] .bd-gray-300 {
    border-color: var(--psg-border);
}
html[data-theme="dark"] .bd-ui-03,
html[data-theme="dark"] .bd-ui-04,
html[data-theme="dark"] .bd-gray-400,
html[data-theme="dark"] .bd-gray-500 {
    border-color: var(--psg-border-strong);
}
html[data-theme="dark"] .bd-dark { border-color: var(--psg-text-subtle); }


/* ==========================================================================
   3. UTILIDADES BOOTSTRAP (texto, bordes, fondos, sombras)
   ========================================================================== */

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body { color: var(--psg-text) !important; }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary { color: var(--psg-text-muted) !important; }
html[data-theme="dark"] .text-black-50 { color: rgba(226, 232, 240, 0.6) !important; }
html[data-theme="dark"] a.text-dark:hover,
html[data-theme="dark"] a.text-dark:focus { color: var(--psg-link) !important; }

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-right,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-light,
html[data-theme="dark"] .border-secondary {
    border-color: var(--psg-border) !important;
}
html[data-theme="dark"] .border-dark,
html[data-theme="dark"] .border-white { border-color: var(--psg-border-strong) !important; }

html[data-theme="dark"] .shadow-sm { box-shadow: var(--psg-shadow-sm) !important; }
html[data-theme="dark"] .shadow { box-shadow: var(--psg-shadow) !important; }
html[data-theme="dark"] .shadow-lg { box-shadow: var(--psg-shadow-lg) !important; }


/* ==========================================================================
   4. LAYOUT DASHFORGE
   ========================================================================== */

/* ---- Barra superior fija ---- */
html[data-theme="dark"] .navbar-header {
    background-color: var(--psg-surface);
    border-bottom-color: var(--psg-border);
}
html[data-theme="dark"] .navbar-header .burger-menu,
html[data-theme="dark"] .navbar-header .btn-social { color: var(--psg-text-muted); }
html[data-theme="dark"] .navbar-header .burger-menu:hover { color: var(--psg-link); }

/* Logo de la empresa activa (tenant): muchos logos son oscuros sobre
   transparente, por eso se les da una "pastilla" clara para que se lean. */
html[data-theme="dark"] .navbar-empresa-logo {
    border-right-color: var(--psg-border);
}
html[data-theme="dark"] .navbar-empresa-logo img {
    background-color: rgba(255, 255, 255, 0.92);
    padding: 2px 6px;
    border-radius: 6px;
    opacity: 0.9;
}
html[data-theme="dark"] .navbar-empresa-logo img:hover { opacity: 1; }
html[data-theme="dark"] .navbar-empresa-nombre { color: var(--psg-text); }

/* ---- Content ---- */
html[data-theme="dark"] .content-header {
    background-color: var(--psg-surface);
    border-bottom-color: var(--psg-border);
}
html[data-theme="dark"] .content-header .nav-link { color: var(--psg-text-muted); }
html[data-theme="dark"] .content-header .nav-link:hover,
html[data-theme="dark"] .content-header .nav-link:focus { color: var(--psg-link); }
html[data-theme="dark"] .content-search svg { color: var(--psg-text-muted); }
html[data-theme="dark"] .content-search .form-control { background-color: transparent; }
html[data-theme="dark"] .content-footer {
    border-top-color: var(--psg-border);
    color: var(--psg-text-muted);
}

/* ---- Menú lateral (aside) ---- */
/* .aside-header mantiene su turquesa #00A99A (inline en base.html) */
html[data-theme="dark"] .aside-header {
    border-right-color: var(--psg-border);
    border-bottom-color: var(--psg-border);
}
html[data-theme="dark"] .aside-body {
    background-color: var(--psg-surface);
    border-top-color: var(--psg-border);
    border-right-color: var(--psg-border);
}
html[data-theme="dark"] .aside-loggedin-user,
html[data-theme="dark"] .aside-alert-link { color: var(--psg-text-muted); }
html[data-theme="dark"] .aside-alert-link .new::before { box-shadow: 0 0 0 2px var(--psg-surface); }
html[data-theme="dark"] .aside-backdrop { background-color: var(--psg-overlay); }
html[data-theme="dark"] .aside.minimize .nav-aside .nav-label + .nav-item::before {
    border-top-color: var(--psg-border);
}

html[data-theme="dark"] .nav-aside .nav-label { color: var(--psg-text-subtle); }
html[data-theme="dark"] .nav-aside .nav-link { color: var(--psg-text); }
html[data-theme="dark"] .nav-aside .nav-link:hover,
html[data-theme="dark"] .nav-aside .nav-link:focus { color: var(--psg-link); }
html[data-theme="dark"] .nav-aside .nav-link::before { border-left-color: var(--psg-border-strong); }
html[data-theme="dark"] .nav-aside svg {
    color: var(--psg-text-muted);
    fill: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .nav-aside .nav-item.active .nav-link { color: var(--psg-link); }
html[data-theme="dark"] .nav-aside .nav-item.active .nav-link::before { border-left-color: var(--psg-primary); }
html[data-theme="dark"] .nav-aside .nav-item.active svg {
    color: var(--psg-link);
    fill: var(--psg-primary-soft);
}
html[data-theme="dark"] .nav-aside .with-sub.show:not(.active) .nav-link,
html[data-theme="dark"] .nav-aside .with-sub.show:not(.active) svg { color: var(--psg-link); }
/* Submenús */
html[data-theme="dark"] .nav-aside .nav-item ul a { color: var(--psg-text-muted); }
html[data-theme="dark"] .nav-aside .nav-item ul a:hover,
html[data-theme="dark"] .nav-aside .nav-item ul a:focus { color: var(--psg-text); }
html[data-theme="dark"] .nav-aside .nav-item ul .active a { color: var(--psg-link); }
/* Guía vertical de submenús (ecoschile.css) */
html[data-theme="dark"] ul > li.nav-item.with-sub > ul > li { border-left-color: var(--psg-border-strong); }
html[data-theme="dark"] ul > li.nav-item.with-sub > ul > li.active { border-left-color: var(--psg-primary); }
html[data-theme="dark"] .sidebar-nav .nav-link.active { border-left-color: var(--psg-primary); }

/* ---- Breadcrumbs ---- */
html[data-theme="dark"] .breadcrumb { background-color: var(--psg-surface-2); }
html[data-theme="dark"] .breadcrumb-style1,
html[data-theme="dark"] .breadcrumb-style2,
html[data-theme="dark"] .breadcrumb-style3 { background-color: transparent; }
html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item a { color: var(--psg-text-muted); }
html[data-theme="dark"] .breadcrumb-item a:hover,
html[data-theme="dark"] .breadcrumb-item a:focus,
html[data-theme="dark"] .breadcrumb-item.active { color: var(--psg-link); }
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--psg-text-subtle); }

/* ---- Cards ---- */
html[data-theme="dark"] .card {
    background-color: var(--psg-surface);
    border-color: var(--psg-border);
    color: var(--psg-text);
    box-shadow: var(--psg-shadow-sm);
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer { border-color: var(--psg-border); }
html[data-theme="dark"] .card-title { color: var(--psg-text); }
html[data-theme="dark"] .card-subtitle { color: var(--psg-text-muted); }

/* ---- Dropdowns ---- */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--psg-surface-2);
    border-color: var(--psg-border);
    color: var(--psg-text);
    box-shadow: var(--psg-shadow);
}
html[data-theme="dark"] .dropdown-item { color: var(--psg-text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--psg-surface-3);
    color: var(--psg-text);
}
html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .dropdown-item:active {
    background-color: var(--psg-primary);
    color: #ffffff;
}
html[data-theme="dark"] .dropdown-item.disabled,
html[data-theme="dark"] .dropdown-item:disabled { color: var(--psg-text-subtle); }
html[data-theme="dark"] .dropdown-header { color: var(--psg-text-muted); }
html[data-theme="dark"] .dropdown-divider { border-top-color: var(--psg-border); }
html[data-theme="dark"] .dropdown-item-text { color: var(--psg-text-muted); }

/* ---- Campana de notificaciones ---- */
html[data-theme="dark"] .dropdown-notification .dropdown-link { color: var(--psg-text-muted); }
html[data-theme="dark"] .dropdown-notification .dropdown-link.new-indicator { color: var(--psg-text); }
html[data-theme="dark"] .dropdown-notification .dropdown-link:hover,
html[data-theme="dark"] .dropdown-notification .dropdown-link:focus { color: var(--psg-link); }
html[data-theme="dark"] .dropdown-notification .dropdown-menu::before,
html[data-theme="dark"] .dropdown-profile .dropdown-menu::before { border-bottom-color: var(--psg-border); }
html[data-theme="dark"] .dropdown-notification .dropdown-menu::after,
html[data-theme="dark"] .dropdown-profile .dropdown-menu::after { border-bottom-color: var(--psg-surface-2); }
html[data-theme="dark"] .dropdown-notification .dropdown-header {
    color: var(--psg-text);
    border-bottom-color: var(--psg-border);
}
html[data-theme="dark"] .dropdown-notification .dropdown-item:hover,
html[data-theme="dark"] .dropdown-notification .dropdown-item:focus { background-color: var(--psg-hover); }
html[data-theme="dark"] .dropdown-notification .media-body { color: var(--psg-text-muted); }
html[data-theme="dark"] .dropdown-notification .media-body strong { color: var(--psg-text); }
html[data-theme="dark"] .dropdown-notification .media-body span { color: var(--psg-text-subtle); }
html[data-theme="dark"] .dropdown-notification .dropdown-footer { border-top-color: var(--psg-border); }
html[data-theme="dark"] .dropdown-notification .dropdown-footer a { color: var(--psg-text-muted); }
html[data-theme="dark"] .dropdown-notification .dropdown-footer a:hover,
html[data-theme="dark"] .dropdown-notification .dropdown-footer a:focus { color: var(--psg-link); }
/* Tarjeta interna de la campana (armada por JS en base.html) */
html[data-theme="dark"] .dropdown-notification .card-header,
html[data-theme="dark"] .dropdown-notification .card-body { background-color: transparent; }

/* Lista de actividad (notificaciones) */
html[data-theme="dark"] .activity-item::before { border-left-color: var(--psg-border-strong); }
html[data-theme="dark"] .activity-icon {
    background-color: var(--psg-surface-3);
    color: var(--psg-text-muted);
}
html[data-theme="dark"] .activity-icon.bg-primary-light { background-color: var(--psg-primary-soft); }
html[data-theme="dark"] .activity-icon.tx-primary { color: var(--psg-link); }
html[data-theme="dark"] .activity-body { color: var(--psg-text-muted); }
html[data-theme="dark"] .activity-body strong { color: var(--psg-text); }
/* Punto rojo de "no leída": anillo del color de la superficie para que se despegue */
html[data-theme="dark"] .red-dot {
    background-color: var(--psg-danger);
    box-shadow: 0 0 0 2px var(--psg-surface-2);
}
html[data-theme="dark"] .marker {
    background-color: var(--psg-surface-3);
    color: var(--psg-text-muted);
}

/* ---- Menú de perfil (ecoschile.css) ---- */
html[data-theme="dark"] .dropdown-profile .dropdown-link:hover .avatar img,
html[data-theme="dark"] .dropdown-profile .dropdown-link:focus .avatar img { background-color: var(--psg-surface-3); }
html[data-theme="dark"] .dropdown-profile .dropdown-menu { border-color: var(--psg-border); }
html[data-theme="dark"] .dropdown-profile .dropdown-item { color: var(--psg-text); }
html[data-theme="dark"] .dropdown-profile .dropdown-item:hover,
html[data-theme="dark"] .dropdown-profile .dropdown-item:focus {
    background-color: transparent;
    color: var(--psg-link);
}
html[data-theme="dark"] .dropdown-profile .dropdown-menu.profile-menu {
    border-color: var(--psg-border);
    box-shadow: var(--psg-shadow-lg);
}
html[data-theme="dark"] .dropdown-profile-name,
html[data-theme="dark"] .profile-menu-name { color: var(--psg-text); }
html[data-theme="dark"] .dropdown-profile-email,
html[data-theme="dark"] .dropdown-profile-meta,
html[data-theme="dark"] .profile-menu-email { color: var(--psg-text-muted); }
html[data-theme="dark"] .profile-menu-email i { color: var(--psg-text-subtle); }
html[data-theme="dark"] .profile-menu-status {
    background: var(--psg-success);
    border-color: var(--psg-surface-2);
}
html[data-theme="dark"] .profile-tag {
    color: var(--psg-text-muted);
    border-color: var(--psg-border-strong);
}
html[data-theme="dark"] .profile-tag i { color: var(--psg-text-subtle); }
html[data-theme="dark"] .profile-tag-primary {
    color: var(--psg-link);
    border-color: rgba(0, 169, 154, 0.4);
    background: var(--psg-primary-soft);
}
html[data-theme="dark"] .profile-tag-primary i { color: var(--psg-link); }
html[data-theme="dark"] .profile-menu-divider { background: var(--psg-border); }
html[data-theme="dark"] .profile-menu-item { color: var(--psg-text); }
html[data-theme="dark"] .profile-menu-item-icon { color: var(--psg-text-muted); }
html[data-theme="dark"] .profile-menu-item:hover,
html[data-theme="dark"] .profile-menu-item:focus {
    background: var(--psg-surface-3);
    color: var(--psg-link);
}
html[data-theme="dark"] .profile-menu-item:hover .profile-menu-item-icon,
html[data-theme="dark"] .profile-menu-item:focus .profile-menu-item-icon { color: var(--psg-link); }
html[data-theme="dark"] .profile-menu-item-danger,
html[data-theme="dark"] .profile-menu-item-danger .profile-menu-item-icon { color: var(--psg-danger); }
html[data-theme="dark"] .profile-menu-item-danger:hover,
html[data-theme="dark"] .profile-menu-item-danger:focus {
    background: var(--psg-danger-soft);
    color: var(--psg-danger);
}
html[data-theme="dark"] .profile-menu-item-danger:hover .profile-menu-item-icon,
html[data-theme="dark"] .profile-menu-item-danger:focus .profile-menu-item-icon { color: var(--psg-danger); }

/* Avatares (ecoschile.css) */
html[data-theme="dark"] .rounded-circle { border-color: var(--psg-border-strong); }
html[data-theme="dark"] a.avatar img.rounded-circle { background-color: var(--psg-surface-3); }
html[data-theme="dark"] .list-avatar li img { background-color: var(--psg-surface-3); }
html[data-theme="dark"] .list-avatar li img:hover { border-color: var(--psg-primary); }


/* ==========================================================================
   5. COMPONENTES BOOTSTRAP 4
   ========================================================================== */

/* ---- Tablas ---- */
html[data-theme="dark"] .table {
    color: var(--psg-text);
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table tbody + tbody {
    border-color: var(--psg-border);
}
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .table-bordered td {
    border-color: var(--psg-border);
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(2n+1) {
    background-color: rgba(255, 255, 255, 0.025);
}
html[data-theme="dark"] .table-hover tbody tr:hover {
    color: var(--psg-text);
    background-color: var(--psg-surface-3);
}
html[data-theme="dark"] .thead-light,
html[data-theme="dark"] .table .thead-light th {
    background-color: var(--psg-surface-2);
    border-color: var(--psg-border);
    color: var(--psg-text-muted);
}
html[data-theme="dark"] .thead-dark,
html[data-theme="dark"] .table .thead-dark th {
    background-color: #0b1016;
    border-color: var(--psg-border);
    color: var(--psg-text);
}
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > th,
html[data-theme="dark"] .table-light > td { background-color: var(--psg-surface-2); }
html[data-theme="dark"] .table-active,
html[data-theme="dark"] .table-active > th,
html[data-theme="dark"] .table-active > td { background-color: var(--psg-surface-3); }
html[data-theme="dark"] .table-primary,
html[data-theme="dark"] .table-primary > th,
html[data-theme="dark"] .table-primary > td { background-color: var(--psg-primary-soft); }
html[data-theme="dark"] .table-success,
html[data-theme="dark"] .table-success > th,
html[data-theme="dark"] .table-success > td { background-color: var(--psg-success-soft); }
html[data-theme="dark"] .table-danger,
html[data-theme="dark"] .table-danger > th,
html[data-theme="dark"] .table-danger > td { background-color: var(--psg-danger-soft); }
html[data-theme="dark"] .table-warning,
html[data-theme="dark"] .table-warning > th,
html[data-theme="dark"] .table-warning > td { background-color: var(--psg-warning-soft); }
html[data-theme="dark"] .table-info,
html[data-theme="dark"] .table-info > th,
html[data-theme="dark"] .table-info > td { background-color: var(--psg-info-soft); }
html[data-theme="dark"] .table-secondary,
html[data-theme="dark"] .table-secondary > th,
html[data-theme="dark"] .table-secondary > td { background-color: var(--psg-surface-3); }
html[data-theme="dark"] .table-dark { background-color: #0b1016; color: var(--psg-text); }

/* ---- Formularios ---- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .custom-file-label {
    background-color: var(--psg-input-bg);
    border-color: var(--psg-border-strong);
    color: var(--psg-text);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--psg-text-subtle); opacity: 1; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus,
html[data-theme="dark"] .custom-file-input:focus ~ .custom-file-label {
    background-color: var(--psg-input-bg);
    border-color: var(--psg-primary);
    color: var(--psg-text);
    box-shadow: var(--psg-focus-ring);
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .custom-select:disabled {
    background-color: var(--psg-surface-2);
    color: var(--psg-text-muted);
}
html[data-theme="dark"] .form-control-plaintext { color: var(--psg-text); }
html[data-theme="dark"] select.form-control option,
html[data-theme="dark"] .custom-select option {
    background-color: var(--psg-surface-2);
    color: var(--psg-text);
}
/* Flecha del select en tono claro */
html[data-theme="dark"] .custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23a0acbd' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
}
html[data-theme="dark"] .custom-select:invalid { color: var(--psg-text-subtle); }
html[data-theme="dark"] .custom-file-label::after {
    background-color: var(--psg-surface-3);
    border-color: var(--psg-border-strong);
    color: var(--psg-text);
}
html[data-theme="dark"] .form-text { color: var(--psg-text-muted); }

/* Checkbox / radio / switch */
html[data-theme="dark"] .custom-control-label::before {
    background-color: var(--psg-input-bg);
    border-color: var(--psg-border-strong);
}
html[data-theme="dark"] .custom-switch .custom-control-label::after { background-color: var(--psg-text-muted); }
html[data-theme="dark"] .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #ffffff; }
html[data-theme="dark"] .custom-control-input:disabled ~ .custom-control-label,
html[data-theme="dark"] .custom-control-input[disabled] ~ .custom-control-label { color: var(--psg-text-subtle); }
html[data-theme="dark"] .custom-control-input:disabled ~ .custom-control-label::before,
html[data-theme="dark"] .custom-control-input[disabled] ~ .custom-control-label::before { background-color: var(--psg-surface-2); }
html[data-theme="dark"] .custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--psg-focus-ring); }

/* Input groups (incluye .input-group-addon de ecoschile.css) */
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .input-group-addon {
    background-color: var(--psg-surface-2);
    border-color: var(--psg-border-strong);
    color: var(--psg-text-muted);
}

/* ---- Botones ---- */
html[data-theme="dark"] .btn-light {
    background-color: var(--psg-surface-3);
    border-color: var(--psg-border-strong);
    color: var(--psg-text);
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-light:focus,
html[data-theme="dark"] .btn-light:not(:disabled):not(.disabled):active,
html[data-theme="dark"] .btn-light:not(:disabled):not(.disabled).active {
    background-color: #2c3a4e;
    border-color: #4d6079;
    color: #ffffff;
}
html[data-theme="dark"] .btn-white {
    background-color: var(--psg-surface-2);
    border-color: var(--psg-border-strong);
    color: var(--psg-text);
}
html[data-theme="dark"] .btn-white:hover,
html[data-theme="dark"] .btn-white:focus {
    background-color: var(--psg-surface-3);
    border-color: #4d6079;
    color: var(--psg-link);
}
html[data-theme="dark"] .btn-white:active,
html[data-theme="dark"] .btn-white.active { background-color: var(--psg-surface-3); }
html[data-theme="dark"] .btn-secondary {
    background-color: #3a4a5e;
    border-color: #3a4a5e;
    color: var(--psg-text);
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-secondary:focus {
    background-color: #4a5c73;
    border-color: #4a5c73;
    color: #ffffff;
}
html[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--psg-border-strong);
    color: var(--psg-text-muted);
}
html[data-theme="dark"] .btn-outline-light:hover,
html[data-theme="dark"] .btn-outline-light:focus,
html[data-theme="dark"] .btn-outline-light:active,
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus,
html[data-theme="dark"] .btn-outline-secondary:not(:disabled):not(.disabled):active,
html[data-theme="dark"] .btn-outline-light:not(:disabled):not(.disabled):active,
html[data-theme="dark"] .show > .btn-outline-light.dropdown-toggle {
    background-color: var(--psg-surface-3);
    border-color: #4d6079;
    color: var(--psg-text);
}
html[data-theme="dark"] .btn-outline-dark {
    border-color: var(--psg-text-muted);
    color: var(--psg-text);
}
html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-outline-dark:focus {
    background-color: var(--psg-text);
    border-color: var(--psg-text);
    color: var(--psg-text-inverse);
}
html[data-theme="dark"] .btn-link { color: var(--psg-link); }
html[data-theme="dark"] .btn-link:hover { color: var(--psg-primary-hover); }

/* ---- Modales genéricos ---- */
html[data-theme="dark"] .modal-content {
    background-color: var(--psg-surface);
    border-color: var(--psg-border);
    color: var(--psg-text);
    box-shadow: var(--psg-shadow-lg);
}
html[data-theme="dark"] .modal-header { border-bottom-color: var(--psg-border); }
html[data-theme="dark"] .modal-footer { border-top-color: var(--psg-border); }
html[data-theme="dark"] .modal-title { color: var(--psg-text); }
html[data-theme="dark"] .modal-backdrop { background-color: #000000; }
html[data-theme="dark"] .modal-backdrop.show { opacity: 0.65; }
html[data-theme="dark"] .close {
    color: var(--psg-text);
    text-shadow: none;
}
html[data-theme="dark"] .close:hover { color: #ffffff; }

/* ---- Navegación: tabs, pills, line ---- */
html[data-theme="dark"] .nav-tabs { border-color: var(--psg-border); }
html[data-theme="dark"] .nav-tabs .nav-link {
    background-color: var(--psg-surface-2);
    border-color: var(--psg-border);
    color: var(--psg-text-muted);
}
html[data-theme="dark"] .nav-tabs .nav-link:hover,
html[data-theme="dark"] .nav-tabs .nav-link:focus {
    background-color: var(--psg-surface-3);
    color: var(--psg-text);
}
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    background-color: var(--psg-surface);
    border-color: var(--psg-border);
    border-bottom-color: var(--psg-surface);
    color: var(--psg-link);
}
html[data-theme="dark"] .nav-tabs .nav-link.disabled {
    background-color: transparent;
    color: var(--psg-text-subtle);
}
html[data-theme="dark"] .nav-tabs.flex-column { border-right-color: var(--psg-border); }
html[data-theme="dark"] .nav-tabs.flex-column .nav-item .nav-link { border-color: var(--psg-border); }
html[data-theme="dark"] .nav-pills .nav-link { color: var(--psg-text-muted); }
html[data-theme="dark"] .nav-pills .nav-link:not(.active):hover,
html[data-theme="dark"] .nav-pills .nav-link:not(.active):focus {
    background-color: var(--psg-surface-3);
    color: var(--psg-text);
}
html[data-theme="dark"] .nav-pills .nav-link.active,
html[data-theme="dark"] .nav-pills .show > .nav-link {
    background-color: var(--psg-primary);
    color: #ffffff;
}
html[data-theme="dark"] .nav-line { border-color: var(--psg-border); }
html[data-theme="dark"] .nav-line .nav-link { color: var(--psg-text-muted); }
html[data-theme="dark"] .nav-line .nav-link:hover { color: var(--psg-text); }
html[data-theme="dark"] .nav-line .nav-link.active { color: var(--psg-link); }

/* ---- List group ---- */
html[data-theme="dark"] .list-group-item {
    background-color: var(--psg-surface);
    border-color: var(--psg-border);
    color: var(--psg-text);
}
html[data-theme="dark"] .list-group-item-action { color: var(--psg-text); }
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--psg-surface-3);
    color: var(--psg-text);
}
html[data-theme="dark"] .list-group-item.active {
    background-color: var(--psg-primary);
    border-color: var(--psg-primary);
    color: #ffffff;
}
html[data-theme="dark"] .list-group-item.disabled,
html[data-theme="dark"] .list-group-item:disabled {
    background-color: var(--psg-surface);
    color: var(--psg-text-subtle);
}

/* ---- Alertas: fondo suave + texto legible ---- */
html[data-theme="dark"] .alert-primary {
    background-color: var(--psg-primary-soft);
    border-color: rgba(0, 169, 154, 0.35);
    color: var(--psg-link);
}
html[data-theme="dark"] .alert-success {
    background-color: var(--psg-success-soft);
    border-color: rgba(52, 199, 123, 0.35);
    color: #6fdca3;
}
html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .alert-error {
    background-color: var(--psg-danger-soft);
    border-color: rgba(240, 97, 109, 0.35);
    color: #f79aa2;
}
html[data-theme="dark"] .alert-warning {
    background-color: var(--psg-warning-soft);
    border-color: rgba(245, 185, 69, 0.35);
    color: #f8cd78;
}
html[data-theme="dark"] .alert-info {
    background-color: var(--psg-info-soft);
    border-color: rgba(76, 179, 240, 0.35);
    color: #8ccdf5;
}
html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .alert-dark {
    background-color: var(--psg-surface-2);
    border-color: var(--psg-border);
    color: var(--psg-text);
}
html[data-theme="dark"] .alert .alert-link { color: inherit; }
html[data-theme="dark"] .alert .close { color: inherit; }

/* ---- Badges ---- */
html[data-theme="dark"] .badge-light {
    background-color: var(--psg-surface-3);
    color: var(--psg-text);
}

/* ---- Paginación ---- */
html[data-theme="dark"] .page-link {
    background-color: var(--psg-surface);
    border-color: var(--psg-border);
    color: var(--psg-text-muted);
}
html[data-theme="dark"] .page-link:hover,
html[data-theme="dark"] .page-link:focus {
    background-color: var(--psg-surface-3);
    border-color: var(--psg-border);
    color: var(--psg-text);
}
html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--psg-primary);
    border-color: var(--psg-primary);
    color: #ffffff;
}
html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--psg-surface);
    border-color: var(--psg-border);
    color: var(--psg-text-subtle);
}

/* ---- Popover ---- */
html[data-theme="dark"] .popover {
    background-color: var(--psg-surface-2);
    border-color: var(--psg-border);
    box-shadow: var(--psg-shadow);
}
html[data-theme="dark"] .popover-header {
    background-color: var(--psg-surface-3);
    border-bottom-color: var(--psg-border);
    color: var(--psg-text);
}
html[data-theme="dark"] .popover-body { color: var(--psg-text); }
html[data-theme="dark"] .bs-popover-top > .arrow::before,
html[data-theme="dark"] .bs-popover-auto[x-placement^="top"] > .arrow::before { border-top-color: var(--psg-border); }
html[data-theme="dark"] .bs-popover-top > .arrow::after,
html[data-theme="dark"] .bs-popover-auto[x-placement^="top"] > .arrow::after { border-top-color: var(--psg-surface-2); }
html[data-theme="dark"] .bs-popover-bottom > .arrow::before,
html[data-theme="dark"] .bs-popover-auto[x-placement^="bottom"] > .arrow::before { border-bottom-color: var(--psg-border); }
html[data-theme="dark"] .bs-popover-bottom > .arrow::after,
html[data-theme="dark"] .bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: var(--psg-surface-3); }
html[data-theme="dark"] .bs-popover-left > .arrow::before,
html[data-theme="dark"] .bs-popover-auto[x-placement^="left"] > .arrow::before { border-left-color: var(--psg-border); }
html[data-theme="dark"] .bs-popover-left > .arrow::after,
html[data-theme="dark"] .bs-popover-auto[x-placement^="left"] > .arrow::after { border-left-color: var(--psg-surface-2); }
html[data-theme="dark"] .bs-popover-right > .arrow::before,
html[data-theme="dark"] .bs-popover-auto[x-placement^="right"] > .arrow::before { border-right-color: var(--psg-border); }
html[data-theme="dark"] .bs-popover-right > .arrow::after,
html[data-theme="dark"] .bs-popover-auto[x-placement^="right"] > .arrow::after { border-right-color: var(--psg-surface-2); }

/* ---- Tooltip: superficie elevada (el negro puro se pierde sobre fondo oscuro) ---- */
html[data-theme="dark"] .tooltip-inner {
    background-color: var(--psg-surface-3);
    color: var(--psg-text);
    box-shadow: var(--psg-shadow);
}
html[data-theme="dark"] .bs-tooltip-top .arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--psg-surface-3); }
html[data-theme="dark"] .bs-tooltip-bottom .arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--psg-surface-3); }
html[data-theme="dark"] .bs-tooltip-left .arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--psg-surface-3); }
html[data-theme="dark"] .bs-tooltip-right .arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--psg-surface-3); }
/* Las variantes de color de Dashforge (.tooltip-primary, etc.) conservan su color */
html[data-theme="dark"] .tooltip-primary .tooltip-inner { background-color: var(--psg-primary); color: #ffffff; }

/* Tooltip propio de contadores (ecoschile.css) y del gráfico de ventas */
html[data-theme="dark"] .custom-tooltip::after {
    background-color: var(--psg-surface-3);
    color: var(--psg-text);
    box-shadow: var(--psg-shadow);
}
html[data-theme="dark"] .tooltip-header { border-bottom-color: var(--psg-border); }

/* ---- Progress, accordion, jumbotron ---- */
html[data-theme="dark"] .progress { background-color: var(--psg-surface-3); }
html[data-theme="dark"] .accordion > .card { border-color: var(--psg-border); }
html[data-theme="dark"] .accordion > .card > .card-header {
    background-color: var(--psg-surface-2);
    border-color: var(--psg-border);
}
html[data-theme="dark"] .accordion .card-header .btn-link { color: var(--psg-text); }
html[data-theme="dark"] .jumbotron { background-color: var(--psg-surface-2); color: var(--psg-text); }


/* ==========================================================================
   6. ECOSCHILE.CSS (resto de colores claros)
   ========================================================================== */

html[data-theme="dark"] #matrizColorSpan { color: var(--psg-surface-2); }
html[data-theme="dark"] #matrizColorSinInformacionSpan { color: var(--psg-text-subtle); }

/* Paginador DevExtreme */
html[data-theme="dark"] .dx-pager .dx-page,
html[data-theme="dark"] .dx-pager .dx-page-size { border-color: var(--psg-border-strong); }

/* Datepicker jQuery UI */
html[data-theme="dark"] .ui-datepicker .ui-datepicker-calendar td span,
html[data-theme="dark"] .ui-datepicker .ui-datepicker-calendar td a { color: var(--psg-text-muted); }

/* Estados de prioridad: se conservan los colores; solo los grises claros */
html[data-theme="dark"] .bg-sinasignar {
    background-color: var(--psg-border-strong);
    color: var(--psg-text);
}
html[data-theme="dark"] .bg-sininfo,
html[data-theme="dark"] .bg-gris-fondo {
    background-color: var(--psg-surface-3);
    color: var(--psg-text-muted);
}
html[data-theme="dark"] .bg-gris-black-fondo { background-color: #55606e; color: #ffffff; }
html[data-theme="dark"] .tx-danger { color: var(--psg-danger); }

/* Filas deshabilitadas */
html[data-theme="dark"] .disabledRow {
    color: var(--psg-text-subtle);
    background-color: var(--psg-surface-2);
}

/* Tablas con columnas fijas */
html[data-theme="dark"] .table-col-static .destacado1,
html[data-theme="dark"] .table-col-static .destacado2,
html[data-theme="dark"] .table-col-static .destacado3,
html[data-theme="dark"] .table-col-static .destacado4,
html[data-theme="dark"] .table-col-static .sticky-left { border-color: var(--psg-border) !important; }
html[data-theme="dark"] .table-col-static .destacado2 { background-color: #55606e; }
html[data-theme="dark"] .table-col-static .destacado3 {
    background-color: var(--psg-surface-3);
    color: var(--psg-text-muted);
}
html[data-theme="dark"] .table-col-static .destacado4 { background-color: var(--psg-surface); }
html[data-theme="dark"] .table-col-static .sticky-left { background-color: var(--psg-surface); }

/* Estrellas de evaluación */
html[data-theme="dark"] .rating:not(:checked) > label { color: var(--psg-border-strong); }
html[data-theme="dark"] .rating > input:checked ~ label,
html[data-theme="dark"] .rating:not(:checked) > label:hover,
html[data-theme="dark"] .rating:not(:checked) > label:hover ~ label { color: var(--psg-primary); }

/* Toggle de DevExtreme apagado */
html[data-theme="dark"] a.dx-link.dx-icon.fas.fa-toggle-off.dx-link-icon { color: var(--psg-text-subtle); }
html[data-theme="dark"] .dx-link.dx-icon-importselected.dx-link-icon.dx-state-disabled,
html[data-theme="dark"] .dx-link.dx-icon-check.dx-link-icon.dx-state-disabled,
html[data-theme="dark"] .dx-link.dx-icon-clear.dx-link-icon.dx-state-disabled { color: var(--psg-text-subtle); }

/* Select2 (ecoschile.css fuerza fondo blanco con !important) */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--psg-input-bg) !important;
    border-color: var(--psg-border-strong) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--psg-text); }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--psg-text-subtle); }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--psg-text-muted); }
html[data-theme="dark"] .select2-dropdown {
    background-color: var(--psg-surface-2);
    border-color: var(--psg-border-strong);
    color: var(--psg-text);
}
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
html[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
    background-color: var(--psg-input-bg);
    border-color: var(--psg-border-strong);
    color: var(--psg-text);
}
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--psg-surface-3);
}
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--psg-primary);
    color: #ffffff;
}

/* Menú superior tipo radio del dashboard comercial */
html[data-theme="dark"] label.nav {
    background: var(--psg-surface-2);
    color: var(--psg-text);
}
html[data-theme="dark"] .radio-menu-superior:checked + .page + label.nav {
    background: var(--psg-primary);
    color: #ffffff;
}

/* Perfil Dashforge (dashforge.profile.css) */
html[data-theme="dark"] .page-profile,
html[data-theme="dark"] .profile-info-list a { color: var(--psg-text); }
html[data-theme="dark"] .profile-info-list svg,
html[data-theme="dark"] .profile-skillset label { color: var(--psg-text-muted); }
html[data-theme="dark"] .list-inline-skills .list-inline-item a {
    background-color: var(--psg-surface-2);
    border-color: var(--psg-border-strong);
    color: var(--psg-text);
}
html[data-theme="dark"] .nav-line-profile .badge {
    background-color: var(--psg-surface-3);
    color: var(--psg-text-muted);
}
html[data-theme="dark"] .timeline-label,
html[data-theme="dark"] .timeline-time,
html[data-theme="dark"] .timeline-body { border-left-color: var(--psg-border); }
html[data-theme="dark"] .timeline-label::before { background-color: var(--psg-text-muted); }
html[data-theme="dark"] .timeline-item + .timeline-item::before { background-color: var(--psg-border); }
html[data-theme="dark"] .timeline-body::before { background-color: var(--psg-surface); }


/* ==========================================================================
   7. ESTILOS INLINE DE base.html
   ========================================================================== */

/* Overlay "Cargando información": velo oscuro en vez de blanco */
html[data-theme="dark"] #cargandoInformacion.modal {
    background-color: rgba(15, 20, 26, 0.55);
}
html[data-theme="dark"] #cargandoInformacion .modal-body {
    color: var(--psg-text);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
html[data-theme="dark"] #cargandoInformacion .modal-content,
html[data-theme="dark"] #cargandoInformacionParametro .modal-content {
    background-color: transparent;
    box-shadow: none;
}

/* Mensajes de éxito / error */
html[data-theme="dark"] .modal-exito,
html[data-theme="dark"] .modal-error { color: var(--psg-text); }
html[data-theme="dark"] .modal-exito .modal-content,
html[data-theme="dark"] .modal-error .modal-content { box-shadow: none; }

/* Chat de incidencias (modal lateral) */
html[data-theme="dark"] .modal-chat-body { background-color: var(--psg-surface); }
html[data-theme="dark"] .modal-chat-footer {
    background-color: var(--psg-surface-2);
    border-top-color: var(--psg-border);
}

/* Modal "Enviar correo": el formulario se adapta; la vista previa se
   mantiene clara a propósito (muestra cómo se verá el correo real). */
html[data-theme="dark"] .correo-columna-formulario { border-right-color: var(--psg-border); }
@media (max-width: 767px) {
    html[data-theme="dark"] .correo-columna-formulario { border-bottom-color: var(--psg-border); }
}
html[data-theme="dark"] #editor-correo-perfil {
    background: var(--psg-input-bg);
    color: var(--psg-text);
    border-color: var(--psg-border-strong);
}
html[data-theme="dark"] #editor-correo-perfil .ql-editor.ql-blank::before { color: var(--psg-text-subtle); }
html[data-theme="dark"] #modalEnviarCorreo .ql-toolbar.ql-snow {
    background-color: var(--psg-surface-2);
    border-color: var(--psg-border-strong);
}
html[data-theme="dark"] #modalEnviarCorreo .ql-toolbar.ql-snow .ql-stroke { stroke: var(--psg-text-muted); }
html[data-theme="dark"] #modalEnviarCorreo .ql-toolbar.ql-snow .ql-fill { fill: var(--psg-text-muted); }
html[data-theme="dark"] #modalEnviarCorreo .ql-toolbar.ql-snow .ql-picker { color: var(--psg-text-muted); }
html[data-theme="dark"] #modalEnviarCorreo .ql-toolbar.ql-snow button:hover .ql-stroke,
html[data-theme="dark"] #modalEnviarCorreo .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--psg-link); }
html[data-theme="dark"] #modalEnviarCorreo .ql-toolbar.ql-snow .ql-picker-options {
    background-color: var(--psg-surface-2);
    border-color: var(--psg-border-strong);
}
html[data-theme="dark"] .correo-preview-etiqueta { color: var(--psg-link); }
html[data-theme="dark"] .correo-preview-contenedor {
    border-color: var(--psg-border-strong);
    box-shadow: var(--psg-shadow);
}


/* ==========================================================================
   8. LOGIN (base_auth.html)
   --------------------------------------------------------------------------
   psg-dark-components.css NO se carga aquí; lo necesario (form-control,
   alertas) ya está cubierto arriba en este archivo.
   ========================================================================== */

/* Oscurece la foto de fondo con un velo (sombra interior sobre el body) */
html[data-theme="dark"] .body-login {
    background-color: var(--psg-bg);
    box-shadow: inset 0 0 0 100vmax rgba(5, 8, 12, 0.5);
}
html[data-theme="dark"] .body-login .container-login {
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: var(--psg-shadow-lg);
}
html[data-theme="dark"] .body-login .login-right { background-color: rgba(15, 20, 26, 0.62); }
html[data-theme="dark"] .body-login .login-left { background-color: rgba(15, 20, 26, 0.42); }
html[data-theme="dark"] .login-heading { color: var(--psg-text); }
html[data-theme="dark"] .login-subheading { color: var(--psg-text-muted); }
html[data-theme="dark"] .login-divider::before,
html[data-theme="dark"] .login-divider::after { background-color: var(--psg-border-strong); }
html[data-theme="dark"] .login-divider span { color: var(--psg-text-subtle); }
html[data-theme="dark"] .login-footer-text {
    color: var(--psg-text-subtle);
    border-top-color: var(--psg-border);
}

/* Botón Microsoft: variante oscura oficial (fondo #2F2F2F, texto blanco) */
html[data-theme="dark"] .btn-microsoft {
    background-color: #2f2f2f;
    border-color: #5e5e5e;
    color: #ffffff;
}
html[data-theme="dark"] .btn-microsoft:hover {
    background-color: #3a3a3a;
    border-color: #8c8c8c;
    color: #ffffff;
}
html[data-theme="dark"] .btn-microsoft:active {
    background-color: #262626;
    border-color: #8c8c8c;
}

/* Formularios de recuperar / cambiar contraseña sobre el panel de vidrio */
html[data-theme="dark"] .body-login .sign-wrapper label { color: var(--psg-text-muted); }
html[data-theme="dark"] .body-login .form-control { background-color: rgba(10, 14, 19, 0.75); }

/* ==========================================================================
   9. DASHFORGE.DEMO.CSS (.df-example y restos de la demo)
   --------------------------------------------------------------------------
   base.html carga dashforge.demo.css y ~90 templates envuelven su contenido
   en .df-example (fondo #fff): sin esto la página queda en una caja blanca.
   ========================================================================== */
html[data-theme="dark"] .df-example {
    background-color: var(--psg-surface);
    border-color: var(--psg-border);
    color: var(--psg-text);
}
/* El ::before usa background-color: inherit, así que ya toma la superficie */
html[data-theme="dark"] .df-example::before { color: var(--psg-text-subtle); }
html[data-theme="dark"] .df-example.df-inverse { background-color: var(--psg-surface-2); }
html[data-theme="dark"] .df-example.df-inverse::before { background-color: var(--psg-surface-3); }

html[data-theme="dark"] .content-widgets { background-color: var(--psg-bg); }
html[data-theme="dark"] .section-nav-popovers {
    background-color: var(--psg-surface);
    border-left-color: var(--psg-border);
}
html[data-theme="dark"] .table-components { border-color: var(--psg-border); }
html[data-theme="dark"] .table-components thead th {
    background-color: var(--psg-surface-2);
    border-color: var(--psg-border);
}
html[data-theme="dark"] .table-components tbody td { border-color: var(--psg-border); }
html[data-theme="dark"] .demo-animate-media .media-body { background-color: var(--psg-surface-2); }
html[data-theme="dark"] .bg-secundary { background-color: var(--psg-surface-3) !important; }

/* ==========================================================================
   10. ACORDEÓN jQuery UI DE DASHFORGE (.ui-accordion-*)
   --------------------------------------------------------------------------
   dashforge.css pinta los encabezados en #f5f6fa y el activo en #fff
   (p.ej. appPropuesta/partial/resumen.html, subpestañas de antecedentes).
   ========================================================================== */
html[data-theme="dark"] .ui-accordion-header {
    background-color: var(--psg-surface-2);
    border-color: var(--psg-border);
    color: var(--psg-text);
}
html[data-theme="dark"] .ui-accordion-header:hover {
    background-color: var(--psg-surface-3);
    color: var(--psg-text);
}
html[data-theme="dark"] .ui-accordion-header.ui-state-active {
    background-color: var(--psg-surface);
    color: var(--psg-primary-hover);
}
html[data-theme="dark"] .ui-accordion-content {
    background-color: var(--psg-surface);
    border-color: var(--psg-border);
    color: var(--psg-text);
}
/* Variantes style1 / style2: el celeste #f1f7ff pasa a turquesa tenue */
html[data-theme="dark"] .accordion-style1 .ui-accordion-header.ui-state-active,
html[data-theme="dark"] .accordion-style1 .ui-accordion-content.ui-accordion-content-active,
html[data-theme="dark"] .accordion-style2 .ui-accordion-header.ui-state-active,
html[data-theme="dark"] .accordion-style2 .ui-accordion-content {
    background-color: var(--psg-primary-soft);
    border-color: var(--psg-primary);
}