/**
 * Tema oscuro del panel (backend): fondos en negro / casi negro y texto con buen contraste.
 * Solo aplica cuando html tiene data-bs-theme="dark" (layout admin).
 */
html[data-bs-theme="dark"] {
    --vz-body-color: #e8eaed;
    --vz-body-color-rgb: 232, 234, 237;
    --vz-body-bg: #161616;
    --vz-body-bg-rgb: 0, 0, 0;
    --vz-heading-color: #f8f9fa;
    --vz-secondary-color: #adb5bd;
    --vz-secondary-bg: #0a0a0a;
    --vz-tertiary-color: rgba(232, 234, 237, 0.78);
    --vz-tertiary-bg: #111111;
    --vz-border-color: #2a2f34;
    --vz-border-color-translucent: rgba(42, 47, 52, 0.65);
    --vz-emphasis-color: #ffffff;
    --vz-link-color: #9ec5fe;
    --vz-link-hover-color: #cfe2ff;
    --vz-highlight-color: #e9ecef;
    --vz-light-bg-subtle: #141414;
    --vz-dark-bg-subtle: #1a1a1a;
    --vz-footer-bg: #000000;
    --vz-footer-color: #adb5bd;
    --vz-topnav-bg: #000000;
    --vz-topnav-item-color: #c5c8ce;
}

html[data-bs-theme="dark"] #page-topbar {
    background-color: #000000 !important;
    border-bottom: 1px solid #2a2f34 !important;
}

/* Tarjetas tipo glass (vidrio esmerilado); no toca .card-primary / .card-success, etc. */
html[data-bs-theme="dark"] .card:not(.card-primary, .card-secondary, .card-success, .card-info, .card-warning, .card-danger, .card-dark, .card-light) {
    --vz-card-bg: rgba(20, 22, 28, 0.45);
    --vz-card-border-width: 1px;
    --vz-card-border-color: rgba(255, 255, 255, 0.11);
    background-color: rgba(18, 20, 26, 0.38) !important;
    background-image: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.09) 0%,
        rgba(255, 255, 255, 0.03) 45%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

html[data-bs-theme="dark"] .card:not(.card-primary, .card-secondary, .card-success, .card-info, .card-warning, .card-danger, .card-dark, .card-light) .card-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom-color: rgba(255, 255, 255, 0.09);
}

html[data-bs-theme="dark"] .card:not(.card-primary, .card-secondary, .card-success, .card-info, .card-warning, .card-danger, .card-dark, .card-light) .card-footer {
    background: rgba(255, 255, 255, 0.05);
    border-top-color: rgba(255, 255, 255, 0.09);
}

html[data-bs-theme="dark"] .card:not(.card-primary, .card-secondary, .card-success, .card-info, .card-warning, .card-danger, .card-dark, .card-light).card-animate:hover {
    box-shadow:
        0 14px 44px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

html[data-bs-theme="dark"] .dropdown-menu {
    --vz-dropdown-bg: #0a0a0a;
    --vz-dropdown-link-color: #e2e6ea;
    --vz-dropdown-link-hover-color: #f8f9fa;
    --vz-dropdown-link-hover-bg: #161616;
    --vz-dropdown-link-active-color: #f8f9fa;
    --vz-dropdown-link-active-bg: #161616;
    border-color: #2a2f34;
}

html[data-bs-theme="dark"] {
    --vz-input-bg-custom: #0a0a0a;
    --vz-input-border-custom: #343a40;
}

html[data-bs-theme="dark"][data-topbar="dark"] {
    --vz-header-bg: #000000;
    --vz-header-border: #2a2f34;
    --vz-header-item-color: #f1f3f5;
    --vz-header-item-sub-color: #adb5bd;
    --vz-header-item-bg: #141414;
    --vz-topbar-user-bg: #141414;
    --vz-topbar-search-bg: #0a0a0a;
    --vz-topbar-search-color: #f8f9fa;
}

html[data-bs-theme="dark"][data-sidebar="dark"] {
    --vz-vertical-menu-bg: #000000;
    --vz-vertical-menu-border: #1f2328;
    --vz-vertical-menu-item-color: #c8ccd4;
    --vz-vertical-menu-item-bg: rgba(255, 255, 255, 0.08);
    --vz-vertical-menu-item-hover-color: #ffffff;
    /* --vz-vertical-menu-item-active-color: #ffffff; */
    --vz-vertical-menu-item-active-color: #ea0200 !important;
    --vz-vertical-menu-item-active-bg: rgba(255, 255, 255, 0.12);
    --vz-vertical-menu-sub-item-color: #b0b6bf;
    --vz-vertical-menu-sub-item-hover-color: #ffffff;
    --vz-vertical-menu-sub-item-active-color: #ffffff;
    --vz-vertical-menu-title-color: #8b9199;
    --vz-twocolumn-menu-iconview-bg: #000000;
}

html[data-bs-theme="dark"] .table {
    --vz-table-color: #e8eaed;
    --vz-table-bg: #0a0a0a;
    --vz-table-border-color: #2a2f34;
    --vz-table-striped-bg: rgba(255, 255, 255, 0.04);
    --vz-table-hover-bg: rgba(255, 255, 255, 0.07);
    --vz-table-active-bg: rgba(255, 255, 255, 0.07);
}

html[data-bs-theme="dark"] .modal-content {
    background-color: #0a0a0a;
    border-color: #2a2f34;
    color: #e8eaed;
}

html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer {
    border-color: #2a2f34;
}

html[data-bs-theme="dark"] .list-group-item {
    background-color: #0a0a0a;
    border-color: #2a2f34;
    color: #e8eaed;
}

html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .offcanvas-header {
    background-color: #0a0a0a;
    color: #e8eaed;
    border-color: #2a2f34;
}

/* DataTables server-side: overlay de carga visible (tabla vacía + tema oscuro ocultaban el indicador nativo) */
.server-datatable-wrap {
    min-height: 220px;
}

.server-datatable-loading {
    position: absolute;
    inset: 0;
    z-index: 12;
    background: rgba(10, 10, 10, 0.78);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: inherit;
}

.server-datatable-wrap .dataTables_wrapper .dataTables_processing {
    opacity: 0 !important;
    pointer-events: none !important;
}

html[data-bs-theme="dark"] .server-datatable-loading {
    border: 1px solid rgba(255, 255, 255, 0.06);
}