:root {
    --brand-red: #ce1126;
    --brand-red-dark: #a30d1d;
    --brand-gold: #e3b130;
    --brand-gold-soft: #f5e5ae;
    --brand-ink: #1a1a1a;
    --brand-white: #ffffff;
    --brand-muted: #6b6b6b;
    --app-bg: #f5f5f2;
    --app-surface: #ffffff;
    --app-surface-muted: #f0f0ed;
    --app-border: #deded8;
    --app-text: #1a1a1a;
    --app-text-muted: #6b6b6b;
    --app-shadow: 0 12px 30px rgba(26, 26, 26, 0.08);
    --bs-primary: var(--brand-red);
    --bs-primary-rgb: 206, 17, 38;
    --bs-link-color: var(--brand-red);
    --bs-link-hover-color: var(--brand-red-dark);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --app-bg: #121314;
    --app-surface: #1e2022;
    --app-surface-muted: #2a2c2e;
    --app-border: #3d4043;
    --app-text: #e8e8e5;
    --app-text-muted: #a0a09d;
    --app-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
}

html {
    background: var(--app-bg);
}

body {
    background-color: var(--app-bg);
    color: var(--app-text);
    transition: background-color 0.2s ease, color 0.2s ease;
}

body:not(.login-page) .main-content {
    background-color: var(--app-bg);
}

.sidebar {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: var(--app-shadow);
}

.sidebar .logo {
    color: var(--app-text) !important;
}

.sidebar .logo i,
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: var(--brand-red) !important;
}

.sidebar .nav-link {
    color: var(--app-text-muted) !important;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: rgba(206, 17, 38, 0.09) !important;
}

.sidebar .sidebar-heading {
    color: var(--brand-gold) !important;
}

.top-navbar {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

.top-navbar .search-form .form-control,
.top-navbar .search-form .input-group-text {
    background-color: var(--app-surface-muted) !important;
    color: var(--app-text) !important;
}

.top-navbar .notifications i,
.sidebar-toggle,
.search-toggle {
    color: var(--app-text-muted) !important;
}

.top-navbar .notifications i:hover,
.sidebar-toggle:hover,
.search-toggle:hover {
    color: var(--brand-red) !important;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-right: 0.85rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background-color: var(--app-surface);
    color: var(--app-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    border-color: var(--brand-gold);
    color: var(--brand-red);
}

.theme-toggle:focus-visible {
    outline: 3px solid rgba(227, 177, 48, 0.35);
    outline-offset: 2px;
}

.theme-toggle i {
    color: var(--brand-gold);
}

.login-theme-toggle {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10;
}

.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.table {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

.card {
    box-shadow: var(--app-shadow);
}

.card-header,
.card-footer,
.table-light {
    background-color: var(--app-surface-muted) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

.table {
    --bs-table-color: var(--app-text);
    --bs-table-bg: var(--app-surface);
    --bs-table-border-color: var(--app-border);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(227, 177, 48, 0.1);
    color: var(--app-text);
}

.form-control,
.form-select,
.input-group-text {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

.form-control::placeholder {
    color: var(--app-text-muted);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 0.2rem rgba(206, 17, 38, 0.14);
}

.form-label,
.form-text,
.text-muted {
    color: var(--app-text-muted) !important;
}

.btn-primary,
.bg-primary {
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--brand-red-dark) !important;
    border-color: var(--brand-red-dark) !important;
}

.btn-outline-primary {
    border-color: var(--brand-red);
    color: var(--brand-red);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
    color: var(--brand-white);
}

.btn-warning,
.bg-warning {
    background-color: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
    color: var(--brand-ink) !important;
}

.btn-link,
a {
    color: var(--brand-red);
}

a:hover {
    color: var(--brand-red-dark);
}

.dropdown-item {
    color: var(--app-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(206, 17, 38, 0.09);
    color: var(--brand-red);
}

.footer {
    border-color: var(--app-border) !important;
    color: var(--app-text-muted) !important;
}

body.login-page {
    background-color: var(--brand-ink);
}

body.login-page .main-content,
body.login-page .login-brand {
    background-color: var(--brand-ink);
}

:root[data-theme="dark"] body.login-page .login-form-panel {
    background-color: var(--app-surface);
}

:root[data-theme="dark"] body.login-page .login-card h2,
:root[data-theme="dark"] body.login-page .login-card,
:root[data-theme="dark"] body.login-page .login-card-intro,
:root[data-theme="dark"] body.login-page .login-remember {
    color: var(--app-text);
}

:root[data-theme="dark"] body.login-page .login-field .form-control {
    background-color: var(--app-surface-muted);
    border-color: var(--app-border);
    color: var(--app-text);
}

:root[data-theme="dark"] body.login-page .login-field label {
    color: var(--app-text-muted);
}

:root[data-theme="dark"] body.login-page .login-register {
    color: var(--app-text-muted);
}

:root[data-theme="dark"] body.login-page .login-theme-toggle {
    background-color: var(--app-surface);
    border-color: var(--app-border);
}

@media (max-width: 575.98px) {
    .theme-toggle {
        width: 2.35rem;
        height: 2.35rem;
        justify-content: center;
        padding: 0;
        margin-right: 0.45rem;
    }

    .theme-toggle-label {
        display: none;
    }

    .theme-toggle [data-theme-label] {
        display: none;
    }
}

/* Estilos para tablas en modo oscuro */
:root[data-theme="dark"] .table {
    --bs-table-bg: var(--app-surface);
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
}

:root[data-theme="dark"] .table-striped {
    --bs-table-striped-bg: var(--app-surface-muted);
}

:root[data-theme="dark"] .table-hover {
    --bs-table-hover-bg: var(--app-surface-muted);
}

/* Estilos específicos para DataTables en modo oscuro */
:root[data-theme="dark"] .dataTables_wrapper {
    background-color: var(--app-surface);
    border-color: var(--app-border);
}

:root[data-theme="dark"] .dataTables_length,
:root[data-theme="dark"] .dataTables_filter,
:root[data-theme="dark"] .dataTables_info,
:root[data-theme="dark"] .dataTables_processing,
:root[data-theme="dark"] .dataTables_paginate {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

:root[data-theme="dark"] .dataTables_paginate {
    background-color: var(--app-surface);
    border-color: var(--app-border);
}

:root[data-theme="dark"] .dataTables_paginate button {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

:root[data-theme="dark"] .dataTables_paginate button:hover {
    background-color: var(--app-surface-muted);
    border-color: var(--app-border);
    color: var(--app-text);
}

:root[data-theme="dark"] .dataTables_paginate .paginate_button.current {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
    color: var(--app-surface);
}

:root[data-theme="dark"] .dataTables_paginate .paginate_button.current:hover {
    background-color: var(--brand-red-dark);
    border-color: var(--brand-red-dark);
    color: var(--app-surface);
}

:root[data-theme="dark"] .dataTables_paginate .paginate_button.disabled,
:root[data-theme="dark"] .dataTables_paginate .paginate_button.disabled:hover,
:root[data-theme="dark"] .dataTables_paginate .paginate_button.disabled:disabled {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text-muted);
}

/* Mejoras para la cabecera de la tabla */
:root[data-theme="dark"] .table thead th {
    background-color: var(--app-surface-muted) !important;
    color: var(--app-text) !important;
}

:root[data-theme="dark"] .table thead {
    background-color: var(--app-surface-muted) !important;
}

:root[data-theme="dark"] .table tbody tr {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
}

:root[data-theme="dark"] .table tbody tr:hover {
    background-color: var(--app-surface-muted) !important;
    color: var(--app-text) !important;
}

:root[data-theme="dark"] .table tbody tr:hover > th {
    background-color: var(--app-surface-muted) !important;
    color: var(--app-text) !important;
}

/* Forzar colores de Bootstrap 5 en modo oscuro */
:root[data-theme="dark"] .table {
    border-color: var(--app-border) !important;
}

:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table dt {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
}

:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--app-surface-muted) !important;
}

:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd):hover {
    background-color: var(--app-surface) !important;
}

/* DataTables override */
:root[data-theme="dark"] .dataTables_wrapper .dataTables_length,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_filter {
    background-color: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
}

:root[data-theme="dark"] .dataTables_wrapper .dataTables_input {
    background-color: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
}

:root[data-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: var(--app-text) !important;
}

:root[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
    color: var(--app-text) !important;
}

:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
}

:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: var(--brand-red) !important;
    border: 1px solid var(--brand-red) !important;
    color: var(--app-surface) !important;
}

:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: var(--brand-red) !important;
    border: 1px solid var(--brand-red) !important;
    color: var(--app-surface) !important;
}