/* Sistema de temas - Modo claro y oscuro */

/* Variables de colores para modo claro (por defecto) */
:root {
    /* Colores principales */
    --primary-color: #4A90E2;
    --secondary-color: #50E3C2;
    
    /* Colores de fondo */
    --background-color: #F4F6F9;
    --card-bg: #FFFFFF;
    --navbar-bg: linear-gradient(135deg, #4A90E2, #50E3C2);
    
    /* Colores de texto */
    --text-color: #333333;
    --text-muted: #6C757D;
    --text-light: #6C757D;
    
    /* Colores de borde */
    --border-color: #E0E0E0;
    --border-light: #dee2e6;
    
    /* Sombras */
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.1);
    --hover-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    
    /* Componentes específicos */
    --input-bg: #FFFFFF;
    --input-border: #ced4da;
    --input-focus-border: #86b7fe;
    --input-focus-shadow: rgba(13, 110, 253, 0.25);
    
    --dropdown-bg: #FFFFFF;
    --dropdown-border: rgba(0, 0, 0, 0.15);
    --dropdown-link-hover-bg: #f8f9fa;
    
    --modal-bg: #FFFFFF;
    --modal-header-bg: #f8f9fa;
    
    --table-hover-bg: #f1f1f1;
    --table-striped-bg: rgba(0, 0, 0, 0.05);
    
    /* Badges y estados */
    --badge-bg: #e9ecef;
    --badge-color: #495057;
    
    /* Overlays */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    
    /* Transiciones */
    --transition-speed: 0.3s;
}

/* Variables para modo oscuro */
[data-theme="dark"] {
    /* Colores principales - mantener vibrantes */
    --primary-color: #5A9FF2;
    --secondary-color: #60F3D2;
    
    /* Colores de fondo */
    --background-color: #1a1a1a;
    --card-bg: #2d2d2d;
    --navbar-bg: linear-gradient(135deg, #2d3436, #34495e);
    
    /* Colores de texto */
    --text-color: #e0e0e0;
    --text-muted: #a0a0a0;
    --text-light: #b0b0b0;
    
    /* Colores de borde */
    --border-color: #404040;
    --border-light: #3a3a3a;
    
    /* Sombras - más sutiles en modo oscuro */
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.3);
    --hover-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    
    /* Componentes específicos */
    --input-bg: #383838;
    --input-border: #4a4a4a;
    --input-focus-border: #5A9FF2;
    --input-focus-shadow: rgba(90, 159, 242, 0.25);
    
    --dropdown-bg: #2d2d2d;
    --dropdown-border: rgba(255, 255, 255, 0.1);
    --dropdown-link-hover-bg: #383838;
    
    --modal-bg: #2d2d2d;
    --modal-header-bg: #383838;
    
    --table-hover-bg: #383838;
    --table-striped-bg: rgba(255, 255, 255, 0.02);
    
    /* Badges y estados */
    --badge-bg: #383838;
    --badge-color: #e0e0e0;
    
    /* Overlays */
    --overlay-bg: rgba(0, 0, 0, 0.7);
}

/* Detección automática del tema del sistema */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Copiar todas las variables del modo oscuro */
        --primary-color: #5A9FF2;
        --secondary-color: #60F3D2;
        --background-color: #1a1a1a;
        --card-bg: #2d2d2d;
        --navbar-bg: linear-gradient(135deg, #2d3436, #34495e);
        --text-color: #e0e0e0;
        --text-muted: #a0a0a0;
        --text-light: #b0b0b0;
        --border-color: #404040;
        --border-light: #3a3a3a;
        --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.2);
        --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.3);
        --hover-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        --input-bg: #383838;
        --input-border: #4a4a4a;
        --input-focus-border: #5A9FF2;
        --input-focus-shadow: rgba(90, 159, 242, 0.25);
        --dropdown-bg: #2d2d2d;
        --dropdown-border: rgba(255, 255, 255, 0.1);
        --dropdown-link-hover-bg: #383838;
        --modal-bg: #2d2d2d;
        --modal-header-bg: #383838;
        --table-hover-bg: #383838;
        --table-striped-bg: rgba(255, 255, 255, 0.02);
        --badge-bg: #383838;
        --badge-color: #e0e0e0;
        --overlay-bg: rgba(0, 0, 0, 0.7);
    }
}

/* Transiciones suaves para cambios de tema */
body,
.navbar,
.card,
.modal-content,
.dropdown-menu,
.form-control,
.btn,
.table,
.offcanvas {
    transition: background-color var(--transition-speed) ease,
                color var(--transition-speed) ease,
                border-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

/* Ajustes específicos para modo oscuro */
[data-theme="dark"] .navbar,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .navbar {
        background: var(--navbar-bg) !important;
    }
}

[data-theme="dark"] .card-header,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .card-header {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    }
}

/* Bootstrap overrides para modo oscuro */
[data-theme="dark"] .table,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .table {
        color: var(--text-color);
        --bs-table-bg: transparent;
        --bs-table-striped-bg: var(--table-striped-bg);
        --bs-table-hover-bg: var(--table-hover-bg);
        --bs-table-border-color: var(--border-color);
    }
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: var(--table-striped-bg);
    }
}

[data-theme="dark"] .modal-content,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .modal-content {
        background-color: var(--modal-bg);
        color: var(--text-color);
    }
}

[data-theme="dark"] .modal-header,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .modal-header {
        background-color: var(--modal-header-bg);
        border-bottom-color: var(--border-color);
    }
}

[data-theme="dark"] .modal-footer,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .modal-footer {
        border-top-color: var(--border-color);
    }
}

[data-theme="dark"] .dropdown-menu,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dropdown-menu {
        background-color: var(--dropdown-bg);
        border-color: var(--dropdown-border);
    }
}

[data-theme="dark"] .dropdown-item,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dropdown-item {
        color: var(--text-color);
    }
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dropdown-item:hover,
    :root:not([data-theme="light"]) .dropdown-item:focus {
        background-color: var(--dropdown-link-hover-bg);
        color: var(--text-color);
    }
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .form-control,
    :root:not([data-theme="light"]) .form-select {
        background-color: var(--input-bg);
        border-color: var(--input-border);
        color: var(--text-color);
    }
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .form-control:focus,
    :root:not([data-theme="light"]) .form-select:focus {
        background-color: var(--input-bg);
        border-color: var(--input-focus-border);
        color: var(--text-color);
        box-shadow: 0 0 0 0.25rem var(--input-focus-shadow);
    }
}

[data-theme="dark"] .badge,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .badge {
        background-color: var(--badge-bg);
        color: var(--badge-color);
    }
}

[data-theme="dark"] .offcanvas,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .offcanvas {
        background-color: var(--card-bg);
        color: var(--text-color);
    }
}

[data-theme="dark"] .btn-close,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
}

/* Ajustes para imágenes en modo oscuro */
[data-theme="dark"] .pastel-image,
[data-theme="dark"] .lazy-image,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pastel-image,
    :root:not([data-theme="light"]) .lazy-image {
        opacity: 0.9; /* Ligeramente más oscuras para mejor contraste */
    }
}

/* Ajustes adicionales para componentes Bootstrap */
[data-theme="dark"] .btn-primary,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-primary {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }
}

[data-theme="dark"] .btn-primary:hover,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-primary:hover {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
    }
}

[data-theme="dark"] .list-group-item,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .list-group-item {
        background-color: var(--card-bg);
        border-color: var(--border-color);
        color: var(--text-color);
    }
}

[data-theme="dark"] .list-group-item:hover,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .list-group-item:hover {
        background-color: var(--dropdown-link-hover-bg);
    }
}

/* Ajustes para la paginación */
[data-theme="dark"] .pagination .page-link,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pagination .page-link {
        background-color: var(--card-bg);
        border-color: var(--border-color);
        color: var(--text-color);
    }
}

[data-theme="dark"] .pagination .page-link:hover,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pagination .page-link:hover {
        background-color: var(--dropdown-link-hover-bg);
        border-color: var(--border-color);
        color: var(--text-color);
    }
}

[data-theme="dark"] .pagination .page-item.active .page-link,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pagination .page-item.active .page-link {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
    }
}

/* Ajustes para accordions */
[data-theme="dark"] .accordion-item,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .accordion-item {
        background-color: var(--card-bg);
        border-color: var(--border-color);
        color: var(--text-color);
    }
}

[data-theme="dark"] .accordion-button,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .accordion-button {
        background-color: var(--card-bg);
        color: var(--text-color);
    }
}

[data-theme="dark"] .accordion-button:not(.collapsed),
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .accordion-button:not(.collapsed) {
        background-color: var(--primary-color);
        color: white;
    }
}

[data-theme="dark"] .accordion-button::after,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .accordion-button::after {
        filter: invert(1);
    }
}

/* Ajustes para spinners */
[data-theme="dark"] .spinner-border,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .spinner-border {
        color: var(--primary-color);
    }
}


/* Accesibilidad - asegurar buen contraste */
[data-theme="dark"] .text-danger,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .text-danger {
        color: #ff6b6b !important;
    }
}

[data-theme="dark"] .text-success,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .text-success {
        color: #51cf66 !important;
    }
}

[data-theme="dark"] .text-warning,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .text-warning {
        color: #ffd93d !important;
    }
}

[data-theme="dark"] .text-info,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .text-info {
        color: #6bcfff !important;
    }
}

/* SweetAlert2 en modo oscuro */
[data-theme="dark"] .swal2-popup,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .swal2-popup {
        background-color: var(--card-bg);
        color: var(--text-color);
    }
}

[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-html-container,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .swal2-title,
    :root:not([data-theme="light"]) .swal2-html-container {
        color: var(--text-color);
    }
}

[data-theme="dark"] .swal2-input,
[data-theme="dark"] .swal2-textarea,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .swal2-input,
    :root:not([data-theme="light"]) .swal2-textarea {
        background-color: var(--input-bg);
        border-color: var(--input-border);
        color: var(--text-color);
    }
}

/* Offcanvas en modo oscuro */
[data-theme="dark"] .offcanvas,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .offcanvas {
        background-color: var(--card-bg);
        color: var(--text-color);
    }
}

[data-theme="dark"] .offcanvas-header,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .offcanvas-header {
        background-color: var(--modal-header-bg);
        border-bottom-color: var(--border-color);
    }
}

/* Input placeholders en modo oscuro */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) input::placeholder,
    :root:not([data-theme="light"]) textarea::placeholder {
        color: var(--text-muted);
        opacity: 0.7;
    }
}

/* Text utilities override para modo oscuro */
[data-theme="dark"] .text-muted,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .text-muted {
        color: var(--text-muted) !important;
    }
}

[data-theme="dark"] .text-primary,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .text-primary {
        color: var(--primary-color) !important;
    }
}

/* Shimmer animation en modo oscuro */
[data-theme="dark"] .image-placeholder,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .image-placeholder {
        background: linear-gradient(110deg, var(--border-color) 8%, var(--card-bg) 18%, var(--border-color) 33%);
        background-color: var(--border-color);
    }
}

/* Alert styling en modo oscuro */
[data-theme="dark"] .alert,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alert {
        background-color: var(--card-bg);
        border-color: var(--border-color);
        color: var(--text-color);
    }
}

[data-theme="dark"] .alert-success,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alert-success {
        background-color: rgba(81, 207, 102, 0.1);
        border-color: #51cf66;
        color: #51cf66;
    }
}

[data-theme="dark"] .alert-danger,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alert-danger {
        background-color: rgba(255, 107, 107, 0.1);
        border-color: #ff6b6b;
        color: #ff6b6b;
    }
}

[data-theme="dark"] .alert-warning,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alert-warning {
        background-color: rgba(255, 217, 61, 0.1);
        border-color: #ffd93d;
        color: #ffd93d;
    }
}

[data-theme="dark"] .alert-info,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alert-info {
        background-color: rgba(107, 207, 255, 0.1);
        border-color: #6bcfff;
        color: #6bcfff;
    }
}