/* ================================================
   TEMA OSCURO / CLARO — TiendaSync
   Se activa con la clase .tema-oscuro en <body>
   Toggle: botón sol/luna en el navbar
   Estrategia: INVERSIÓN GLOBAL del contenido
   (fondo blanco -> oscuro, letras negras -> claras)
   ================================================ */

/* ================================================
   1) SIDEBAR / MENÚ — claro en tema claro, NEGRO en oscuro
   ================================================ */
body.tema-oscuro .sidebar {
    background-color: #000000 !important;
    background-image: none !important;
}
body.tema-oscuro .sidebar .sidebar-brand .sidebar-brand-icon i {
    color: #ffffff !important;
}
body.tema-oscuro .sidebar .sidebar-brand-text {
    color: #ffffff !important;
}
body.tema-oscuro .sidebar-heading {
    color: rgba(255, 255, 255, 0.6);
}
body.tema-oscuro .sidebar .nav-link {
    color: rgba(255, 255, 255, 0.8);
}
body.tema-oscuro .sidebar .nav-link:hover {
    color: #000 !important;
    background-color: #f0f0f5 !important;
}
body.tema-oscuro .sidebar .nav-link:hover i {
    color: #000 !important;
}
body.tema-oscuro .sidebar .nav-link.active {
    color: #b45309 !important;
    background-color: #ffedd0 !important;
    font-weight: 700;
}
body.tema-oscuro .sidebar .nav-link.active i { color: #b45309 !important; }
body.tema-oscuro .sidebar .nav-link.active::before,
body.tema-oscuro .sidebar .nav-link.menu-abierto::before {
    background: #ffa302;
}
body.tema-oscuro .sidebar .nav-item .nav-link.menu-abierto {
    color: #b45309 !important;
    background-color: #ffedd0 !important;
    font-weight: 700;
}
body.tema-oscuro .sidebar .nav-item .nav-link.menu-abierto i { color: #b45309 !important; }
/* Submenús del sidebar */
body.tema-oscuro .sidebar .nav-item .collapse .collapse-inner {
    background-color: #1b1b2c !important;
    box-shadow: 0 .15rem 1.75rem 0 rgba(0,0,0,.5);
}
body.tema-oscuro .sidebar .nav-item .collapse .collapse-inner .collapse-item {
    color: #c8c8d8 !important;
}
body.tema-oscuro .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover {
    background-color: #f0f0f5 !important;
    color: #000 !important;
}
body.tema-oscuro .sidebar .nav-item .collapse .collapse-inner .collapse-item.active {
    color: #8ab0ff !important;
}
body.tema-oscuro #sidebarToggle {
    background-color: #33334c;
    color: #fff;
    border-color: #4e4e70;
}
body.tema-oscuro #sidebarToggle::after {
    color: #fff !important;
}
body.tema-oscuro .scroll-to-top {
    background-color: #33334c !important;
}

/* ================================================
   2) CONTENIDO — INVERSIÓN GLOBAL (fondo blanco -> oscuro)
   ================================================ */
body.tema-oscuro #content-wrapper {
    filter: invert(1) hue-rotate(180deg) !important;
    background-color: #fff !important; /* blanco invertido = negro de fondo */
    min-height: 100vh;
}
/* Re-invertir imágenes/videos/canvas para que se vean NORMALES */
body.tema-oscuro #content-wrapper img,
body.tema-oscuro #content-wrapper svg,
body.tema-oscuro #content-wrapper video,
body.tema-oscuro #content-wrapper canvas,
body.tema-oscuro #content-wrapper iframe {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* ================================================
   3) Modales y dropdowns (se montan en body, fuera de #content-wrapper)
   ================================================ */
body.tema-oscuro .modal-content {
    background-color: #23233a;
    color: #d5d5e0;
}
body.tema-oscuro .modal-header,
body.tema-oscuro .modal-footer {
    border-color: #3a3a55;
}
body.tema-oscuro .dropdown-menu {
    background-color: #23233a;
    border-color: #3a3a55;
}
body.tema-oscuro .dropdown-item {
    color: #d5d5e0;
}
body.tema-oscuro .dropdown-item:hover,
body.tema-oscuro .dropdown-item:focus {
    background-color: #33334c;
    color: #fff;
}
body.tema-oscuro .dropdown-divider {
    border-color: #3a3a55;
}
/* SweetAlert2 */
body.tema-oscuro .swal2-popup {
    background-color: #23233a !important;
    color: #d5d5e0 !important;
}
body.tema-oscuro .swal2-title,
body.tema-oscuro .swal2-html-container {
    color: #e5e5f0 !important;
}

/* ================================================
   4) Ajustes generales del body en oscuro
   ================================================ */
body.tema-oscuro {
    background-color: #171720 !important;
    color: #d5d5e0;
}
body.tema-oscuro a:not(.btn):not(.nav-link):not(.dropdown-item):not(.collapse-item):not(.sidebar-brand) {
    color: #8ab0ff;
}
body.tema-oscuro .footer {
    background-color: #171720 !important;
    color: #9a9ab0;
}

/* ================================================
   5) Scrollbar (tema oscuro)
   ================================================ */
body.tema-oscuro ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
body.tema-oscuro ::-webkit-scrollbar-track {
    background: #171720;
}
body.tema-oscuro ::-webkit-scrollbar-thumb {
    background: #3a3a55;
    border-radius: 6px;
}
body.tema-oscuro ::-webkit-scrollbar-thumb:hover {
    background: #4e4e70;
}