:root {
    --vs-bg: #f5f6f8;
    --vs-surface: #ffffff;
    --vs-surface-2: #f1f3f5;
    --vs-border: #d0d7de;
    --vs-text: #111827;
    --vs-text-soft: #4b5563;
    --vs-primary: #0d6efd;
    --vs-success: #198754;
    --vs-danger: #dc3545;
    --vs-warning: #ffc107;
    --vs-sidebar-bg: #0b3a75;
    --vs-sidebar-text: #ffffff;
    --vs-hover: rgba(13, 110, 253, 0.08);
    --vs-input-bg: #ffffff;
    --vs-input-text: #111827;
    --vs-input-border: #c7ced6;
    --vs-modal-bg: #ffffff;
    --vs-table-head-bg: #eef2f6;
    --vs-table-row-bg: #ffffff;
    --vs-table-row-alt: #f8fafc;
    --vs-muted-btn-bg: #e9ecef;
    --vs-muted-btn-text: #212529;
}

html[data-theme="dark"] {
    --vs-bg: #07111f;
    --vs-surface: #0b1626;
    --vs-surface-2: #17212f;
    --vs-border: #2d3a4b;
    --vs-text: #f3f4f6;
    --vs-text-soft: #c4cad3;
    --vs-primary: #3391ff;
    --vs-success: #22c55e;
    --vs-danger: #ef4444;
    --vs-warning: #facc15;
    --vs-sidebar-bg: #062b5c;
    --vs-sidebar-text: #ffffff;
    --vs-hover: rgba(255, 255, 255, 0.06);
    --vs-input-bg: #0a1320;
    --vs-input-text: #f3f4f6;
    --vs-input-border: #334155;
    --vs-modal-bg: #111827;
    --vs-table-head-bg: #1f2937;
    --vs-table-row-bg: #0b1626;
    --vs-table-row-alt: #101c2d;
    --vs-muted-btn-bg: #1f2937;
    --vs-muted-btn-text: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --vs-bg: #07111f;
        --vs-surface: #0b1626;
        --vs-surface-2: #17212f;
        --vs-border: #2d3a4b;
        --vs-text: #f3f4f6;
        --vs-text-soft: #c4cad3;
        --vs-primary: #3391ff;
        --vs-success: #22c55e;
        --vs-danger: #ef4444;
        --vs-warning: #facc15;
        --vs-sidebar-bg: #062b5c;
        --vs-sidebar-text: #ffffff;
        --vs-hover: rgba(255, 255, 255, 0.06);
        --vs-input-bg: #0a1320;
        --vs-input-text: #f3f4f6;
        --vs-input-border: #334155;
        --vs-modal-bg: #111827;
        --vs-table-head-bg: #1f2937;
        --vs-table-row-bg: #0b1626;
        --vs-table-row-alt: #101c2d;
        --vs-muted-btn-bg: #1f2937;
        --vs-muted-btn-text: #f3f4f6;
    }
}

@media (prefers-color-scheme: light) {
    html[data-theme="auto"] {
        --vs-bg: #f5f6f8;
        --vs-surface: #ffffff;
        --vs-surface-2: #f1f3f5;
        --vs-border: #d0d7de;
        --vs-text: #111827;
        --vs-text-soft: #4b5563;
        --vs-primary: #0d6efd;
        --vs-success: #198754;
        --vs-danger: #dc3545;
        --vs-warning: #ffc107;
        --vs-sidebar-bg: #0b3a75;
        --vs-sidebar-text: #ffffff;
        --vs-hover: rgba(13, 110, 253, 0.08);
        --vs-input-bg: #ffffff;
        --vs-input-text: #111827;
        --vs-input-border: #c7ced6;
        --vs-modal-bg: #ffffff;
        --vs-table-head-bg: #eef2f6;
        --vs-table-row-bg: #ffffff;
        --vs-table-row-alt: #f8fafc;
        --vs-muted-btn-bg: #e9ecef;
        --vs-muted-btn-text: #212529;
    }
}

body {
    background: var(--vs-bg) !important;
    color: var(--vs-text) !important;
}

.sidebar,
.main-sidebar,
.vs-sidebar {
    background: var(--vs-sidebar-bg) !important;
    color: var(--vs-sidebar-text) !important;
}

.card,
.vs-card,
.modal-content,
.dropdown-menu,
.table-responsive,
.vs-panel {
    background: var(--vs-surface) !important;
    color: var(--vs-text) !important;
    border: 1px solid var(--vs-border) !important;
}

.card-header,
.modal-header,
.modal-footer,
.dropdown-divider,
.nav-tabs,
.table thead th {
    border-color: var(--vs-border) !important;
}

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"] {
    background: var(--vs-input-bg) !important;
    color: var(--vs-input-text) !important;
    border: 1px solid var(--vs-input-border) !important;
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--vs-text-soft) !important;
    opacity: .8;
}

.table {
    color: var(--vs-text) !important;
}

.table thead th {
    background: var(--vs-table-head-bg) !important;
    color: var(--vs-text) !important;
}

.table tbody tr {
    background: var(--vs-table-row-bg) !important;
    color: var(--vs-text) !important;
}

.table tbody tr:nth-child(even) {
    background: var(--vs-table-row-alt) !important;
}

.nav-tabs .nav-link {
    color: var(--vs-text-soft) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link.active {
    color: #fff !important;
    background: var(--vs-primary) !important;
    border-color: var(--vs-primary) !important;
}

.btn-outline-light,
.btn-outline-secondary,
.btn-light {
    color: var(--vs-text) !important;
    border-color: var(--vs-border) !important;
    background: transparent !important;
}

.btn-outline-light:hover,
.btn-outline-secondary:hover,
.btn-light:hover {
    background: var(--vs-hover) !important;
    color: var(--vs-text) !important;
}

.btn-secondary {
    background: var(--vs-muted-btn-bg) !important;
    color: var(--vs-muted-btn-text) !important;
    border-color: var(--vs-border) !important;
}

.dropdown-item {
    color: var(--vs-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--vs-hover) !important;
    color: var(--vs-text) !important;
}

.text-muted,
.small,
small {
    color: var(--vs-text-soft) !important;
}

hr {
    border-color: var(--vs-border) !important;
}
/* FIX: th dentro de tbody (ej: tutores/show con table-borderless) */
.table tbody th{
  background: var(--vs-table-head-bg) !important;
  color: var(--vs-text) !important;
  border-color: var(--vs-border) !important;
  font-weight: 600;
  white-space: nowrap;
}