/* ===== TEMA CLARO (MODO DEFAULT) ===== */

/* Variables globales para modo claro — Classic Light */
:root {
    --light-bg-primary: #eef1f6;
    --light-bg-secondary: #ffffff;
    --light-bg-tertiary: #e5e9f0;
    --light-border: #d5dbe6;
    --light-text-primary: #1a2332;
    --light-text-secondary: #334155;
    --light-text-muted: rgba(26, 35, 50, 0.55);
    --light-hover: #e5e9f0;
    --light-accent: #fca311;
    --light-accent-hover: #e8940a;
    --light-accent-on: #000000;
}

/* Color scheme para elementos nativos del navegador */
html:not(.dark-theme) {
    color-scheme: light;
}

/* ===== BODY Y CONTENEDORES PRINCIPALES ===== */
html:not(.dark-theme),
html:not(.dark-theme) body {
    background-color: var(--light-bg-primary) !important;
    color: var(--light-text-primary) !important;
}

html:not(.dark-theme) .wrapper,
html:not(.dark-theme) .main-panel,
html:not(.dark-theme) .content {
    background-color: var(--light-bg-primary) !important;
}

/* ===== NAVBAR ===== */
html:not(.dark-theme) .navbar,
html:not(.dark-theme) .navbar-default,
html:not(.dark-theme) nav.navbar {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(252, 163, 17, 0.12) !important;
    box-shadow: 0 4px 20px rgba(20, 33, 61, 0.06) !important;
}

html:not(.dark-theme) .navbar-brand,
html:not(.dark-theme) .navbar-nav > li > a {
    color: var(--light-text-primary) !important;
}

html:not(.dark-theme) .navbar-nav > li > a:hover,
html:not(.dark-theme) .navbar-nav > li > a:focus {
    color: var(--light-accent) !important;
    background-color: transparent !important;
}

html:not(.dark-theme) .navbar-toggle {
    background-color: var(--light-bg-secondary) !important;
    border-color: var(--light-border) !important;
}

html:not(.dark-theme) .navbar-toggle .icon-bar {
    background-color: var(--light-text-primary) !important;
}

/* ===== SIDEBAR ===== */
html:not(.dark-theme) .sidebar {
    background: #14213d !important;
    color: #ffffff !important;
}

html:not(.dark-theme) .sidebar .nav li a {
    color: rgba(255, 255, 255, 0.85) !important;
}

html:not(.dark-theme) .sidebar .nav li:hover a,
html:not(.dark-theme) .sidebar .nav li.active a {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

html:not(.dark-theme) .sidebar .logo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html:not(.dark-theme) .sidebar .simple-text {
    color: #ffffff !important;
}

/* ===== CARDS ===== */
html:not(.dark-theme) .card,
html:not(.dark-theme) .panel,
html:not(.dark-theme) .dashboard-card,
html:not(.dark-theme) .info-tiles {
    background-color: #ffffff !important;
    border: 1px solid var(--light-border) !important;
    color: var(--light-text-primary) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark-theme) .card .card-header,
html:not(.dark-theme) .panel-heading {
    background-color: var(--light-bg-secondary) !important;
    border-bottom: 1px solid var(--light-border) !important;
    color: var(--light-text-primary) !important;
}

html:not(.dark-theme) .card-title {
    color: var(--light-text-primary) !important;
}

/* ===== TABLAS ===== */
html:not(.dark-theme) .table {
    background-color: #ffffff !important;
    color: var(--light-text-primary) !important;
}

html:not(.dark-theme) .table thead th {
    background-color: var(--light-bg-secondary) !important;
    color: var(--light-text-primary) !important;
    border-bottom: 2px solid var(--light-border) !important;
}

html:not(.dark-theme) .table tbody tr {
    border-bottom: 1px solid var(--light-border) !important;
}

html:not(.dark-theme) .table tbody tr:hover {
    background-color: var(--light-hover) !important;
}

html:not(.dark-theme) .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--light-bg-secondary) !important;
}

html:not(.dark-theme) .table-bordered {
    border: 1px solid var(--light-border) !important;
}

html:not(.dark-theme) .table-bordered td,
html:not(.dark-theme) .table-bordered th {
    border: 1px solid var(--light-border) !important;
}

/* ===== FORMULARIOS ===== */
html:not(.dark-theme) .form-control {
    background-color: #ffffff !important;
    border: 1px solid var(--light-border) !important;
    color: var(--light-text-primary) !important;
}

html:not(.dark-theme) .form-control:focus {
    border-color: var(--light-accent) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(252, 163, 17, 0.10) !important;
}

html:not(.dark-theme) .form-control::placeholder {
    color: var(--light-text-muted) !important;
}

html:not(.dark-theme) .input-group-addon {
    background-color: var(--light-bg-secondary) !important;
    border: 1px solid var(--light-border) !important;
    color: var(--light-text-primary) !important;
}

/* ===== BOTONES ===== */
html:not(.dark-theme) .btn-default {
    background-color: #ffffff !important;
    border: 1px solid var(--light-border) !important;
    color: var(--light-text-primary) !important;
}

html:not(.dark-theme) .btn-default:hover {
    background-color: var(--light-bg-secondary) !important;
}

html:not(.dark-theme) .btn-primary {
    background-color: var(--light-accent) !important;
    border-color: var(--light-accent) !important;
    color: #000000 !important;
}

html:not(.dark-theme) .btn-primary:hover {
    background-color: var(--light-accent-hover) !important;
    border-color: var(--light-accent-hover) !important;
    color: #000000 !important;
}

/* ===== MODALES ===== */
html:not(.dark-theme) .modal-content {
    background-color: #ffffff !important;
    color: var(--light-text-primary) !important;
    border: 1px solid var(--light-border) !important;
}

html:not(.dark-theme) .modal-header {
    background-color: var(--light-bg-secondary) !important;
    border-bottom: 1px solid var(--light-border) !important;
}

html:not(.dark-theme) .modal-footer {
    background-color: var(--light-bg-secondary) !important;
    border-top: 1px solid var(--light-border) !important;
}

/* ===== DROPDOWN ===== */
html:not(.dark-theme) .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid var(--light-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

html:not(.dark-theme) .dropdown-menu > li > a {
    color: var(--light-text-primary) !important;
}

html:not(.dark-theme) .dropdown-menu > li > a:hover {
    background-color: var(--light-hover) !important;
    color: var(--light-accent) !important;
}

/* ===== ALERTS ===== */
html:not(.dark-theme) .alert {
    border: 1px solid transparent !important;
}

html:not(.dark-theme) .alert-info {
    background-color: #d1ecf1 !important;
    border-color: #bee5eb !important;
    color: #0c5460 !important;
}

html:not(.dark-theme) .alert-success {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
}

html:not(.dark-theme) .alert-warning {
    background-color: #fff3cd !important;
    border-color: #ffeaa7 !important;
    color: #856404 !important;
}

html:not(.dark-theme) .alert-danger {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

/* ===== PAGINACIÓN ===== */
html:not(.dark-theme) .pagination > li > a {
    background-color: #ffffff !important;
    border: 1px solid var(--light-border) !important;
    color: var(--light-accent) !important;
}

html:not(.dark-theme) .pagination > li > a:hover {
    background-color: var(--light-hover) !important;
    border-color: var(--light-border) !important;
}

html:not(.dark-theme) .pagination > .active > a {
    background-color: var(--light-accent) !important;
    border-color: var(--light-accent) !important;
    color: #000000 !important;
}

/* ===== BADGES Y LABELS ===== */
html:not(.dark-theme) .badge,
html:not(.dark-theme) .label {
    color: #ffffff !important;
}

html:not(.dark-theme) .label-default {
    background-color: var(--light-text-secondary) !important;
}

/* ===== FOOTER ===== */
html:not(.dark-theme) .footer {
    background-color: #ffffff !important;
    border-top: 1px solid var(--light-border) !important;
    color: var(--light-text-secondary) !important;
}

/* ===== SCROLLBAR ===== */
html:not(.dark-theme)::-webkit-scrollbar {
    width: 12px;
    background: var(--light-bg-primary);
}

html:not(.dark-theme)::-webkit-scrollbar-track {
    background: var(--light-bg-secondary);
}

html:not(.dark-theme)::-webkit-scrollbar-thumb {
    background: var(--light-border);
    border-radius: 6px;
}

html:not(.dark-theme)::-webkit-scrollbar-thumb:hover {
    background: var(--light-text-muted);
}

/* ===== BOTÓN DE CAMBIO DE TEMA ===== */
.theme-toggle a {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.theme-toggle a:hover {
    transform: scale(1.1);
}

html:not(.dark-theme) .theme-toggle a i {
    color: var(--light-text-primary);
}

html:not(.dark-theme) .theme-toggle a:hover i {
    color: var(--light-accent);
}

/* ===== TRANSICIONES SUAVES ===== */
.navbar-default, 
.sidebar, 
.card, 
.table, 
.form-control, 
.modal-content,
.btn,
.panel,
.dropdown-menu {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Sin transición para html, body y main-panel para evitar parpadeos */
html,
body,
.main-panel,
.wrapper {
    transition: none !important;
}

/* ===== LINKS ===== */
html:not(.dark-theme) a {
    color: var(--light-accent);
}

html:not(.dark-theme) a:hover {
    color: var(--light-accent-hover);
    text-decoration: none;
}

/* ===== HR ===== */
html:not(.dark-theme) hr {
    border-top-color: var(--light-border);
}

/* ===== TEXT MUTED ===== */
html:not(.dark-theme) .text-muted {
    color: var(--light-text-secondary) !important;
}

/* ===== ICONOS ===== */
html:not(.dark-theme) .sidebar .nav li i {
    color: rgba(255, 255, 255, 0.9);
}

html:not(.dark-theme) .sidebar .nav li.active i,
html:not(.dark-theme) .sidebar .nav li:hover i {
    color: #ffffff;
}

/* ===== STATS CARDS ===== */
html:not(.dark-theme) .stats {
    color: var(--light-text-secondary);
}

/* ===== DATATABLES EN MODO CLARO ===== */
html:not(.dark-theme) .dataTables_wrapper .dataTables_length,
html:not(.dark-theme) .dataTables_wrapper .dataTables_filter,
html:not(.dark-theme) .dataTables_wrapper .dataTables_info,
html:not(.dark-theme) .dataTables_wrapper .dataTables_paginate {
    color: var(--light-text-primary) !important;
}

html:not(.dark-theme) .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #333333 !important;
    background: transparent !important;
    border: none !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

html:not(.dark-theme) .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(252, 163, 17, 0.05) !important;
    color: #fca311 !important;
    cursor: pointer !important;
}

html:not(.dark-theme) .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html:not(.dark-theme) .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #fca311 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

html:not(.dark-theme) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html:not(.dark-theme) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    color: #cccccc !important;
    cursor: not-allowed !important;
}

/* ===== TABLAS EN MODO CLARO ===== */
html:not(.dark-theme) .table,
html:not(.dark-theme) .table {
    background-color: #ffffff !important;
    color: var(--light-text-primary) !important;
}

html:not(.dark-theme) .table thead,
html:not(.dark-theme) .table thead {
    background-color: #f8f9fa !important;
}

html:not(.dark-theme) .table thead th,
html:not(.dark-theme) .table thead th {
    background-color: #f8f9fa !important;
    color: var(--light-text-primary) !important;
    border-color: var(--light-border) !important;
}

html:not(.dark-theme) .table tbody,
html:not(.dark-theme) .table tbody {
    background-color: #ffffff !important;
}

html:not(.dark-theme) .table tbody tr,
html:not(.dark-theme) .table tbody tr {
    background-color: #ffffff !important;
    color: var(--light-text-primary) !important;
}

html:not(.dark-theme) .table tbody td,
html:not(.dark-theme) .table tbody td {
    background-color: #ffffff !important;
    color: var(--light-text-primary) !important;
    border-color: var(--light-border) !important;
}

html:not(.dark-theme) .table-striped tbody tr:nth-of-type(odd),
html:not(.dark-theme) .table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa !important;
}

html:not(.dark-theme) .table-striped tbody tr:nth-of-type(odd) td,
html:not(.dark-theme) .table-striped tbody tr:nth-of-type(odd) td {
    background-color: #f8f9fa !important;
}

html:not(.dark-theme) .table-striped tbody tr:nth-of-type(even),
html:not(.dark-theme) .table-striped tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

html:not(.dark-theme) .table-striped tbody tr:nth-of-type(even) td,
html:not(.dark-theme) .table-striped tbody tr:nth-of-type(even) td {
    background-color: #ffffff !important;
}

/* ===== RESPONSIVE - MÓVIL ===== */
@media (max-width: 768px) {
    /* Asegurar que el navbar móvil se vea bien en modo claro */
    html:not(.dark-theme) .navbar-collapse {
        background-color: #ffffff !important;
        border-top: 1px solid var(--light-border) !important;
    }
    
    html:not(.dark-theme) .navbar-collapse .nav > li > a {
        border-bottom: 1px solid var(--light-border) !important;
    }
}