:root, [data-bs-theme=light] {
    /* === PRIMARY (Rojo institucional) === */
    --bs-primary: #ab0033;
    --bs-primary-rgb: 171, 0, 51;
    --bs-primary-text-emphasis: #7a0024;
    --bs-primary-bg-subtle: #f8d7e0;
    --bs-primary-border-subtle: #e598a9;
    /* === SECONDARY (Dorado) === */
    --bs-secondary: #bc955c;
    --bs-secondary-rgb: 188, 149, 92;
    --bs-secondary-text-emphasis: #73552a;
    --bs-secondary-bg-subtle: #f4e9da;
    --bs-secondary-border-subtle: #d6b887;
    /* === Buttons === */
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-primary-text-emphasis);
    --bs-btn-active-bg: var(--bs-primary-text-emphasis);
    --bs-btn-active-border-color: var(--bs-primary-text-emphasis);
    /* === Links === */
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--bs-primary-text-emphasis);
    /* === Componentes === */
    --bs-alert-bg: var(--bs-primary);
    --bs-alert-border-color: var(--bs-primary);
    --bs-badge-bg: var(--bs-primary);
    --bs-accordion-active-bg: var(--bs-primary);
    --bs-nav-tabs-link-active-bg: var(--bs-primary);
    --bs-nav-pills-link-active-bg: var(--bs-primary);
    --bs-list-group-active-bg: var(--bs-secondary);
    --bs-form-check-input-checked-bg-color: var(--bs-primary);
    --bs-form-check-input-checked-border-color: var(--bs-primary);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
}

/* ==========================================================
   DARK THEME
   ========================================================== */
[data-bs-theme=dark] {
    --bs-primary: #ab0033;
    --bs-primary-rgb: 171, 0, 51;
    --bs-primary-text-emphasis: #f8d7e0;
    --bs-primary-bg-subtle: #3a0d1b;
    --bs-primary-border-subtle: #5a1024;
    --bs-secondary: #bc955c;
    --bs-secondary-rgb: 188, 149, 92;
    --bs-secondary-text-emphasis: #f4e9da;
    --bs-secondary-bg-subtle: #3a2c15;
    --bs-secondary-border-subtle: #5c4622;
}

/* ==========================================================
   COMPONENTES BOOTSTRAP PERSONALIZADOS
   ========================================================== */

/* === BOTONES === */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--bs-primary-text-emphasis) !important;
        border-color: var(--bs-primary-text-emphasis) !important;
        color: white !important;
    }

    .btn-primary:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.5) !important;
    }

/*.btn-success {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

    .btn-success:hover {
        background-color: var(--bs-primary-text-emphasis) !important;
        border-color: var(--bs-primary-text-emphasis) !important;
    }*/

.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

    .btn-outline-primary:hover {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        color: white !important;
    }

/* === BADGES === */
.badge.bg-primary {
    background-color: var(--bs-primary) !important;
}

/*.badge.bg-success {
    background-color: var(--bs-primary) !important;
}
*/
.badge.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

/* === PROGRESS BARS === */
.progress-bar {
    background-color: var(--bs-primary) !important;
}

    .progress-bar.bg-primary {
        background-color: var(--bs-primary) !important;
    }

   /* .progress-bar.bg-success {
        background-color: var(--bs-primary) !important;
    }*/

/* === ALERTS === */
.alert-primary {
    background-color: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary-border-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
}

/*.alert-success {
    background-color: rgba(25, 135, 84, 0.1) !important;
    border-color: rgba(25, 135, 84, 0.3) !important;
    color: var(--bs-success-text-emphasis) !important;
}*/

.alert-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
    color: var(--bs-danger-text-emphasis) !important;
}

/* === CARDS === */
.card-header.bg-primary {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.card-header.bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: white !important;
}

/* === FORM CONTROLS === */
.form-control:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.form-select:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.form-check-input:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* === NAVS & TABS === */
.nav-tabs .nav-link.active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

.nav-pills .nav-link.active {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

/* === PAGINATION === */
.page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* === LIST GROUP === */
.list-group-item.active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* ==========================================================
   COMPONENTES PERSONALIZADOS COEPRIS
   ========================================================== */

/* === CLASES CUARTATE === */
.bg-cuartate {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.bg-cuartate-dorado {
    background-color: var(--bs-secondary) !important;
    color: white !important;
}

.badge.bg-cuartate {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.badge.bg-cuartate-dorado {
    background-color: var(--bs-secondary) !important;
    color: white !important;
}

.btn-cuartate {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}

    .btn-cuartate:hover {
        background-color: var(--bs-primary-text-emphasis) !important;
        border-color: var(--bs-primary-text-emphasis) !important;
    }

.btn-cuartate-dorado {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: white !important;
}

    .btn-cuartate-dorado:hover {
        background-color: var(--bs-secondary-text-emphasis) !important;
        border-color: var(--bs-secondary-text-emphasis) !important;
    }

/* === TABLAS PERSONALIZADAS === */
.table-encabezado-oro {
    border: 1px solid var(--bs-secondary);
}

    .table-encabezado-oro thead th {
        background-color: var(--bs-secondary) !important;
        color: white !important;
        border-color: var(--bs-secondary) !important;
    }

    .table-encabezado-oro tbody tr:nth-child(even) {
        background-color: var(--bs-secondary-bg-subtle) !important;
    }

    .table-encabezado-oro tbody tr:hover {
        background-color: rgba(var(--bs-secondary-rgb), 0.2) !important;
    }

/* === ICONOS === */
.fa-primary {
    color: var(--bs-primary) !important;
}

.fa-secondary {
    color: var(--bs-secondary) !important;
}

/* ==========================================================
   LAYOUT Y ESTILOS GLOBALES
   ========================================================== */

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: 'Encode Sans', sans-serif;
    font-size: 14px;
    color: #45494c;
    overflow-x: hidden;
}

/* === HEADER & FOOTER === */
header {
    background-color: var(--bs-primary);
    border-bottom: 7px solid var(--bs-secondary);
}

footer {
    background-color: var(--bs-primary);
    border-top: 7px solid var(--bs-secondary);
}

/* === NAVBAR === */
.navbar-toggler-icon {
    background-color: black;
}

.logo {
    max-width: 100%;
    max-height: 70px;
    height: auto;
    width: auto;
    margin-right: 20px;
}

/* === SIDEBAR === */
.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(17, 17, 17, 0.9);
    backdrop-filter: blur(8px);
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.7);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow-x: hidden;
    transition: all 0.5s ease-in-out;
    padding-top: 60px;
    z-index: 9999;
}

    .sidebar a {
        padding: 12px 20px;
        text-decoration: none;
        font-size: 20px;
        color: #f1f1f1;
        display: block;
        border-left: 3px solid transparent;
        transition: all 0.3s ease;
    }

        .sidebar a:hover {
            color: var(--bs-secondary);
            border-left: 3px solid var(--bs-secondary);
            background-color: rgba(255, 255, 255, 0.1);
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

.openbtn {
    font-size: 16px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
    color: white;
    border: none;
    padding: 5px 60px;
    position: fixed;
    top: 50%;
    left: -85px;
    transform: rotate(-90deg);
    transition: background 0.3s ease-in-out;
    margin: 2px;
    z-index: 9999;
}

    .openbtn:hover {
        background: linear-gradient(135deg, var(--bs-secondary), var(--bs-primary));
    }

/* === SWIPER === */
.swiper-container {
    width: 100%;
    height: 350px;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

    .swiper-slide img {
        height: 100%;
    }

.slide-content {
    position: relative;
    z-index: 2;
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    padding: 10px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 8px;
    max-width: 90%;
}

.swiper-button-next, .swiper-button-prev {
    color: var(--bs-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet {
    background: #b5b3b3;
    opacity: 0.4;
}

.swiper-pagination-bullet-active {
    background: var(--bs-secondary);
    opacity: 1;
}

.swiper-scrollbar-drag {
    background: var(--bs-secondary);
}

/* === CURSOS === */
.curso-catalog {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.curso-media {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
}

.card:hover .curso-media img,
.card:hover .curso-media iframe {
    transform: scale(1.03);
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0.5rem;
    overflow: hidden;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    }

.card-title {
    min-height: 3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* === CONTENIDO DE CURSOS === */
.curso-contenido {
    max-width: 1200px;
}

.sidebar-modules {
    border-radius: 8px;
    overflow: hidden;
}

.module-list {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

.module-item {
    border-left: 0;
    border-right: 0;
    padding: 1rem 1.25rem;
}

.content-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.content-item {
    padding: 0.5rem 0;
    border-left: 3px solid transparent;
}

    .content-item.active {
        background-color: rgba(13, 110, 253, 0.05);
    }

    .content-item a {
        text-decoration: none;
        padding: 0.5rem;
        border-radius: 4px;
        color: var(--bs-body-color);
        display: block;
    }

    .content-item.active a {
        font-weight: 500;
    }

    .content-item:hover a {
        background-color: rgba(0, 0, 0, 0.03);
    }

.content-card {
    border-radius: 8px;
}

.video-container {
    border-radius: 8px;
    overflow: hidden;
}

.document-container {
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.presentation-container, .external-link-container {
    padding: 2rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.progress-container {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

.content-navigation {
    padding-top: 1rem;
}

.evaluation-card {
    border-radius: 8px;
}

/* === TOASTS === */
.toast-container {
    z-index: 1055;
}

.toast {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(13, 110, 253, 0.2);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* === UTILIDADES === */
.text-cuartate {
    color: var(--bs-primary) !important;
}

.text-cuartate-dorado {
    color: var(--bs-secondary) !important;
}

.border-cuartate {
    border-color: var(--bs-primary) !important;
}

.border-cuartate-dorado {
    border-color: var(--bs-secondary) !important;
}
/* ==========================================================
   TEMA OSCURO PERSONALIZADO COEPRIS
   ========================================================== */

[data-bs-theme="dark"] {
    /* === COLORES BASE === */
    --bs-body-bg: #121212 !important;
    --bs-body-color: #e0e0e0 !important;
    --bs-secondary-bg: #1e1e1e !important;
    --bs-tertiary-bg: #2d2d2d !important;
    /* === SURFACES Y CARDS === */
    --bs-surface: #1e1e1e !important;
    --bs-surface-hover: #2d2d2d !important;
    --bs-border-color: #404040 !important;
    /* === TEXTOS === */
    --bs-heading-color: #ffffff !important;
    --bs-muted-color: #a0a0a0 !important;
}

    [data-bs-theme="dark"] body {
        background-color: var(--bs-body-bg) !important;
        color: var(--bs-body-color) !important;
    }

    /* === CARDS EN TEMA OSCURO === */
    [data-bs-theme="dark"] .card {
        background-color: var(--bs-surface) !important;
        border-color: var(--bs-border-color) !important;
        color: var(--bs-body-color) !important;
    }

    [data-bs-theme="dark"] .card-header {
        background-color: var(--bs-tertiary-bg) !important;
        border-bottom-color: var(--bs-border-color) !important;
        color: var(--bs-heading-color) !important;
    }

    [data-bs-theme="dark"] .card-body {
        background-color: var(--bs-surface) !important;
    }

    /* === BOTONES EN TEMA OSCURO === */
    [data-bs-theme="dark"] .btn-primary {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        color: white !important;
    }

        [data-bs-theme="dark"] .btn-primary:hover {
            background-color: #c1003a !important;
            border-color: #c1003a !important;
        }

    [data-bs-theme="dark"] .btn-outline-primary {
        color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        background-color: transparent !important;
    }

        [data-bs-theme="dark"] .btn-outline-primary:hover {
            background-color: var(--bs-primary) !important;
            color: white !important;
        }

    /* === NAVBAR EN TEMA OSCURO === */
    [data-bs-theme="dark"] .navbar {
        background-color: var(--bs-surface) !important;
        border-bottom-color: var(--bs-border-color) !important;
    }

    [data-bs-theme="dark"] .nav-link {
        color: var(--bs-body-color) !important;
    }

        [data-bs-theme="dark"] .nav-link:hover,
        [data-bs-theme="dark"] .nav-link:focus {
            color: var(--bs-primary) !important;
        }

        [data-bs-theme="dark"] .nav-link.active {
            color: var(--bs-primary) !important;
            background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
        }

    /* === DROPDOWN EN TEMA OSCURO === */
    [data-bs-theme="dark"] .dropdown-menu {
        background-color: var(--bs-surface) !important;
        border-color: var(--bs-border-color) !important;
    }

    [data-bs-theme="dark"] .dropdown-item {
        color: var(--bs-body-color) !important;
    }

        [data-bs-theme="dark"] .dropdown-item:hover,
        [data-bs-theme="dark"] .dropdown-item:focus {
            background-color: var(--bs-surface-hover) !important;
            color: var(--bs-body-color) !important;
        }

    /* === TABLAS EN TEMA OSCURO === */
    [data-bs-theme="dark"] .table {
        --bs-table-bg: transparent !important;
        --bs-table-color: var(--bs-body-color) !important;
        --bs-table-border-color: var(--bs-border-color) !important;
    }

    [data-bs-theme="dark"] .table-encabezado-oro thead th {
        background-color: var(--bs-secondary) !important;
        color: white !important;
    }

    [data-bs-theme="dark"] .table-encabezado-oro tbody tr:nth-child(even) {
        background-color: rgba(var(--bs-secondary-rgb), 0.05) !important;
    }

    [data-bs-theme="dark"] .table-encabezado-oro tbody tr:hover {
        background-color: rgba(var(--bs-secondary-rgb), 0.1) !important;
    }

    /* === FORMULARIOS EN TEMA OSCURO === */
    [data-bs-theme="dark"] .form-control,
    [data-bs-theme="dark"] .form-select {
        background-color: var(--bs-tertiary-bg) !important;
        border-color: var(--bs-border-color) !important;
        color: var(--bs-body-color) !important;
    }

        [data-bs-theme="dark"] .form-control:focus,
        [data-bs-theme="dark"] .form-select:focus {
            background-color: var(--bs-tertiary-bg) !important;
            border-color: var(--bs-primary) !important;
            color: var(--bs-body-color) !important;
            box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
        }

        [data-bs-theme="dark"] .form-control::placeholder {
            color: var(--bs-muted-color) !important;
        }

    /* === ALERTS EN TEMA OSCURO === */
    [data-bs-theme="dark"] .alert {
        background-color: var(--bs-tertiary-bg) !important;
        border-color: var(--bs-border-color) !important;
        color: var(--bs-body-color) !important;
    }

    [data-bs-theme="dark"] 
    /*.alert-success {
        background-color: rgba(25, 135, 84, 0.15) !important;
        border-color: rgba(25, 135, 84, 0.3) !important;
        color: #75b798 !important;
    }*/

    [data-bs-theme="dark"] .alert-danger {
        background-color: rgba(220, 53, 69, 0.15) !important;
        border-color: rgba(220, 53, 69, 0.3) !important;
        color: #ea868f !important;
    }

    [data-bs-theme="dark"] .alert-warning {
        background-color: rgba(255, 193, 7, 0.15) !important;
        border-color: rgba(255, 193, 7, 0.3) !important;
        color: #ffda6a !important;
    }

    [data-bs-theme="dark"] .alert-info {
        background-color: rgba(13, 202, 240, 0.15) !important;
        border-color: rgba(13, 202, 240, 0.3) !important;
        color: #79dfec !important;
    }

    /* === BADGES EN TEMA OSCURO === */
    [data-bs-theme="dark"] .badge.bg-primary {
        background-color: var(--bs-primary) !important;
    }

    [data-bs-theme="dark"] .badge.bg-secondary {
        background-color: var(--bs-secondary) !important;
    }

    [data-bs-theme="dark"] .badge.bg-light {
        background-color: var(--bs-tertiary-bg) !important;
        color: var(--bs-body-color) !important;
    }

    /* === PROGRESS BARS EN TEMA OSCURO === */
    [data-bs-theme="dark"] .progress {
        background-color: var(--bs-tertiary-bg) !important;
    }

    [data-bs-theme="dark"] .progress-bar {
        background-color: var(--bs-primary) !important;
    }

    /* === LIST GROUPS EN TEMA OSCURO === */
    [data-bs-theme="dark"] .list-group-item {
        background-color: var(--bs-surface) !important;
        border-color: var(--bs-border-color) !important;
        color: var(--bs-body-color) !important;
    }

        [data-bs-theme="dark"] .list-group-item:hover {
            background-color: var(--bs-surface-hover) !important;
        }

        [data-bs-theme="dark"] .list-group-item.active {
            background-color: var(--bs-primary) !important;
            border-color: var(--bs-primary) !important;
            color: white !important;
        }

    /* === SIDEBAR EN TEMA OSCURO === */
    [data-bs-theme="dark"] .sidebar {
        background: rgba(30, 30, 30, 0.95) !important;
        backdrop-filter: blur(12px) !important;
    }

        [data-bs-theme="dark"] .sidebar a {
            color: var(--bs-body-color) !important;
        }

            [data-bs-theme="dark"] .sidebar a:hover {
                color: var(--bs-secondary) !important;
                background-color: rgba(255, 255, 255, 0.05) !important;
            }

    /* === CONTENIDO DE CURSOS EN TEMA OSCURO === */
    [data-bs-theme="dark"] .curso-contenido {
        background-color: var(--bs-body-bg) !important;
    }

    [data-bs-theme="dark"] .sidebar-modules {
        background-color: var(--bs-surface) !important;
    }

    [data-bs-theme="dark"] .module-item {
        background-color: var(--bs-surface) !important;
        border-color: var(--bs-border-color) !important;
    }

    [data-bs-theme="dark"] .content-item a {
        color: var(--bs-body-color) !important;
    }

    [data-bs-theme="dark"] .content-item:hover a {
        background-color: var(--bs-surface-hover) !important;
    }

    [data-bs-theme="dark"] .content-item.active a {
        background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
        color: var(--bs-primary) !important;
    }

    /* === TEXT MUTED EN TEMA OSCURO === */
    [data-bs-theme="dark"] .text-muted {
        color: var(--bs-muted-color) !important;
    }

    [data-bs-theme="dark"] .text-white-50 {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* === BACKGROUNDS EN TEMA OSCURO === */
    [data-bs-theme="dark"] .bg-light {
        background-color: var(--bs-tertiary-bg) !important;
        color: var(--bs-body-color) !important;
    }

    [data-bs-theme="dark"] .bg-white {
        background-color: var(--bs-surface) !important;
        color: var(--bs-body-color) !important;
    }

    [data-bs-theme="dark"] .shadow-sm {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4) !important;
    }

    /* === BORDES EN TEMA OSCURO === */
    [data-bs-theme="dark"] .border,
    [data-bs-theme="dark"] .border-top,
    [data-bs-theme="dark"] .border-bottom,
    [data-bs-theme="dark"] .border-start,
    [data-bs-theme="dark"] .border-end {
        border-color: var(--bs-border-color) !important;
    }

    /* === MODALES EN TEMA OSCURO === */
    [data-bs-theme="dark"] .modal-content {
        background-color: var(--bs-surface) !important;
        border-color: var(--bs-border-color) !important;
    }

    [data-bs-theme="dark"] .modal-header {
        background-color: var(--bs-primary) !important;
        border-bottom-color: var(--bs-border-color) !important;
    }

    [data-bs-theme="dark"] .modal-footer {
        border-top-color: var(--bs-border-color) !important;
    }

    /* === TOGGLE SWITCH PERSONALIZADO === */
    [data-bs-theme="dark"] .form-check-input {
        background-color: var(--bs-tertiary-bg) !important;
        border-color: var(--bs-border-color) !important;
    }

        [data-bs-theme="dark"] .form-check-input:checked {
            background-color: var(--bs-primary) !important;
            border-color: var(--bs-primary) !important;
        }

    /* === SCROLLBAR PERSONALIZADO EN TEMA OSCURO === */
    [data-bs-theme="dark"] ::-webkit-scrollbar {
        width: 8px;
    }

    [data-bs-theme="dark"] ::-webkit-scrollbar-track {
        background: var(--bs-body-bg);
    }

    [data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
        background: var(--bs-border-color);
        border-radius: 4px;
    }

        [data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
            background: var(--bs-muted-color);
        }
    /* === MAIN CONTENT EN TEMA OSCURO === */
    [data-bs-theme="dark"] main[role="main"].bg-white {
        background-color: var(--bs-surface) !important;
        color: var(--bs-body-color) !important;
        border: 1px solid var(--bs-border-color) !important;
    }

    [data-bs-theme="dark"] .bg-white {
        background-color: var(--bs-surface) !important;
        color: var(--bs-body-color) !important;
    }

/* === SUPERFICIES PERSONALIZADAS PARA TEMA OSCURO === */
[data-bs-theme="dark"] {
    --bs-surface: #1e1e1e; /* Color principal de superficies */
    --bs-surface-hover: #2d2d2d; /* Para hover states */
    --bs-surface-light: #252525; /* Un poco más claro */
    --bs-surface-lighter: #2a2a2a; /* Más claro aún */
}

    /* === CLASES ESPECÍFICAS PARA SUPERFICIES === */
    [data-bs-theme="dark"] .bg-surface {
        background-color: var(--bs-surface) !important;
    }

    [data-bs-theme="dark"] .bg-surface-light {
        background-color: var(--bs-surface-light) !important;
    }

    [data-bs-theme="dark"] .bg-surface-lighter {
        background-color: var(--bs-surface-lighter) !important;
    }

    /* === SHADOWS EN TEMA OSCURO === */
    [data-bs-theme="dark"] .shadow-sm {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4) !important;
    }

    [data-bs-theme="dark"] .shadow {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4) !important;
    }
    /* ==========================================================
   CORRECCIÓN ESPECÍFICA PARA MAIN EN TEMA OSCURO
   ========================================================== */

    [data-bs-theme="dark"] main[role="main"] {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
        border: 1px solid #404040 !important;
    }

    [data-bs-theme="dark"] .bg-white {
        background-color: #1e1e1e !important;
    }

    [data-bs-theme="dark"] .flex-grow-1 .bg-white {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
    }

    [data-bs-theme="dark"] .bg-white.shadow-sm.rounded.p-3 {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
        border: 1px solid #404040 !important;
    }

    /* Si aún no funciona, prueba con este selector más agresivo */
    [data-bs-theme="dark"] body .flex-grow-1 main[role="main"].bg-white.shadow-sm.rounded.p-3 {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
        border: 1px solid #404040 !important;
    }
    /* ==========================================================
   CORRECCIÓN ESPECÍFICA PARA MAIN EN TEMA OSCURO
   ========================================================== */

    [data-bs-theme="dark"] main[role="main"] {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
        border: 1px solid #404040 !important;
    }

    [data-bs-theme="dark"] .bg-white {
        background-color: #1e1e1e !important;
    }

    [data-bs-theme="dark"] .flex-grow-1 .bg-white {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
    }

    [data-bs-theme="dark"] .bg-white.shadow-sm.rounded.p-3 {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
        border: 1px solid #404040 !important;
    }

    /* Si aún no funciona, prueba con este selector más agresivo */
    [data-bs-theme="dark"] body .flex-grow-1 main[role="main"].bg-white.shadow-sm.rounded.p-3 {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
        border: 1px solid #404040 !important;
    }