/* ==================== TEMA OSCURO MODERNO ====================
 * Se aplica cuando en Configuración > Sistema se elige "Oscuro moderno".
 * Afecta header, cajas, tablas y contenido para una apariencia oscura consistente.
 */

.skin-dark-modern .main-header {
    background: var(--ui-header-bg, linear-gradient(90deg, #0f172a 0%, #1e293b 100%)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.skin-dark-modern .content-wrapper,
.skin-dark-modern .content-wrapper .content {
    background-color: var(--ui-page-bg, #0f172a) !important;
}

.skin-dark-modern .box,
.skin-dark-modern .box.box-primary,
.skin-dark-modern .small-box {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

.skin-dark-modern .box .box-header,
.skin-dark-modern .box .box-title {
    color: #f1f5f9 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.skin-dark-modern .box .box-body,
.skin-dark-modern .box-body {
    color: #cbd5e1 !important;
}

.skin-dark-modern .table {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.skin-dark-modern .table td,
.skin-dark-modern .table tbody th {
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.skin-dark-modern .main-footer {
    background-color: var(--theme-footer-bg, #081321) !important;
    color: var(--theme-footer-text, #94a3b8) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.skin-dark-modern .breadcrumb {
    background: transparent !important;
}

.skin-dark-modern .breadcrumb > li a,
.skin-dark-modern .breadcrumb > .active {
    color: #94a3b8 !important;
}

.skin-dark-modern .list-group-item {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

.skin-dark-modern .form-control {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}

.skin-dark-modern .form-control:focus {
    border-color: #64748b !important;
}

.skin-dark-modern .input-group-addon {
    background: #334155 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}

.skin-dark-modern .panel {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.skin-dark-modern .panel-heading {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.skin-dark-modern .panel-body {
    color: #e2e8f0 !important;
}

.skin-dark-modern .dataTables_wrapper .dataTables_length label,
.skin-dark-modern .dataTables_wrapper .dataTables_filter label {
    color: #cbd5e1 !important;
}

.skin-dark-modern .dataTables_wrapper .dataTables_info {
    color: #94a3b8 !important;
}

.skin-dark-modern .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #cbd5e1 !important;
}

.skin-dark-modern .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #fff !important;
}

.skin-dark-modern .main-sidebar .sidebar-menu li a {
    color: rgba(255, 255, 255, 0.85) !important;
}

.skin-dark-modern .main-sidebar .sidebar-menu li.active > a {
    color: #fff !important;
}

.skin-dark-modern .main-sidebar .treeview-menu > li > a {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Capa final basada en tokens para corregir inconsistencias del dark mode */
.skin-dark-modern,
body[data-theme-mode="dark"] {
    color-scheme: dark;
}

.skin-dark-modern .main-header .navbar .nav > li > a,
.skin-dark-modern .main-header .navbar .sidebar-toggle,
.skin-dark-modern .main-header .logo,
.skin-dark-modern .main-header .logo a {
    color: var(--theme-header-text, #f8fbff) !important;
}

.skin-dark-modern .content-wrapper,
.skin-dark-modern .content-wrapper .content,
body[data-theme-mode="dark"] .content-wrapper,
body[data-theme-mode="dark"] .content-wrapper .content {
    background: var(--ui-page-bg, #07111d) !important;
}

.skin-dark-modern .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--modern-text-soft, #8ea4bf) !important;
}

.skin-dark-modern .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, rgba(86, 163, 255, 0.24), rgba(47, 128, 237, 0.24)) !important;
    border-color: rgba(86, 163, 255, 0.34) !important;
    color: #f8fbff !important;
}