/* Estilos personalizados para ControlWeb PHP */

/* Variables CSS */
:root {
    --primary-color: #4e73df;
    --secondary-color: #858796;
    --success-color: #1cc88a;
    --info-color: #36b9cc;
    --warning-color: #f6c23e;
    --danger-color: #e74a3b;
    --light-color: #f8f9fc;
    --dark-color: #5a5c69;
    --border-radius: 0.35rem;
    --box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

/* Transiciones globales para cambio de tema - Aplicadas al elemento raíz */
html {
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Transiciones globales para todos los elementos que cambian con el tema */
html *,
html *::before,
html *::after {
    transition: background-color 0.25s ease, 
                color 0.25s ease, 
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

/* Excluir contenido del modal de las transiciones globales, pero permitir fade del backdrop */
/* EXCLUIR el modal de perfil (#profileModal) de estas reglas */
.modal:not(#profileModal) *,
.modal:not(#profileModal) *::before,
.modal:not(#profileModal) *::after,
.modal:not(#profileModal) .modal-dialog,
.modal:not(#profileModal) .modal-content,
.modal:not(#profileModal) .modal-header,
.modal:not(#profileModal) .modal-body,
.modal:not(#profileModal) .modal-footer {
    transition: none !important;
    animation: none !important;
}

/* Backdrop del modal - FORZAR visibilidad SIEMPRE */
/* Bootstrap 5.3 siempre agrega 'fade' al backdrop aunque el modal no lo tenga */
/* Por eso, forzamos opacity 0.5 en TODOS los casos */
.modal-backdrop {
    z-index: 1040 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #000 !important;
    opacity: 0.5 !important; /* SIEMPRE visible */
}

/* Asegurar que solo haya un backdrop visible */
body > .modal-backdrop ~ .modal-backdrop {
    display: none !important;
}

/* Asegurar que el modal de perfil tenga prioridad y funcione correctamente */
#profileModal {
    z-index: 9999 !important;
}

#profileModal .modal-dialog {
    position: relative !important;
    margin: 1.75rem auto !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
}

/* Variables CSS para Modo Oscuro */
[data-theme="dark"] {
    --primary-color: #5a8fff;
    --secondary-color: #a0a0a0;
    --success-color: #2dd4a0;
    --info-color: #4ac5d8;
    --warning-color: #ffd54f;
    --danger-color: #ff6b6b;
    --light-color: #1a1d29;
    --dark-color: #e0e0e0;
    --bg-primary: #1a1d29;
    --bg-secondary: #252836;
    --bg-tertiary: #2d3142;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --border-color: #3d4154;
    --box-shadow: 0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.4);
}

/* Estilos generales */
body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--light-color);
    color: var(--dark-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Modo Oscuro - Body */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Títulos y texto fuerte - transiciones explícitas */
h1, h2, h3, h4, h5, h6 {
    transition: color 0.3s ease;
}

strong {
    transition: color 0.3s ease;
}

/* Navbar personalizado */
.navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
}

.navbar-nav .nav-link {
    font-weight: 600;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease-in-out;
}

.navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
}

.navbar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
}

/* Cards personalizadas */
.card {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
}

/* Evitar transform en hover cuando hay modal abierto */
body.modal-open .card:hover {
    transform: none !important;
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #e3e6f0;
    font-weight: 700;
    color: var(--primary-color);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Modo Oscuro - Cards */
[data-theme="dark"] .card {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .card-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

/* Estilos específicos para tarjetas del dashboard */
.border-left-primary {
    border-left: 0.25rem solid var(--primary-color) !important;
}

.border-left-success {
    border-left: 0.25rem solid var(--success-color) !important;
}

.border-left-info {
    border-left: 0.25rem solid var(--info-color) !important;
}

.border-left-warning {
    border-left: 0.25rem solid var(--warning-color) !important;
}

.border-left-danger {
    border-left: 0.25rem solid var(--danger-color) !important;
}

.text-gray-300 {
    color: #dddfeb !important;
}

.text-gray-800 {
    color: #5a5c69 !important;
}

.text-xs {
    font-size: 0.7rem;
}

.font-weight-bold {
    font-weight: 700 !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

/* Botones personalizados */
.btn {
    border-radius: var(--border-radius);
    font-weight: 600;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #2e59d9;
    border-color: #2653d4;
    transform: translateY(-1px);
}

/* Botones secundarios, success, danger, warning, info */
.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
    transform: translateY(-1px);
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.btn-success:hover {
    background-color: #17a673;
    border-color: #17a673;
    color: white;
    transform: translateY(-1px);
}

.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #c82333;
    color: white;
    transform: translateY(-1px);
}

.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: #212529;
}

.btn-warning:hover {
    background-color: #e0a800;
    border-color: #e0a800;
    color: #212529;
    transform: translateY(-1px);
}

.btn-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: white;
}

.btn-info:hover {
    background-color: #2a9dbb;
    border-color: #2a9dbb;
    color: white;
    transform: translateY(-1px);
}

/* Botones outline */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: translateY(-1px);
}

.btn-outline-secondary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    background-color: transparent;
}

.btn-outline-secondary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
    transform: translateY(-1px);
}

.btn-outline-success {
    color: var(--success-color);
    border-color: var(--success-color);
    background-color: transparent;
}

.btn-outline-success:hover {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
    transform: translateY(-1px);
}

.btn-outline-danger {
    color: var(--danger-color);
    border-color: var(--danger-color);
    background-color: transparent;
}

.btn-outline-danger:hover {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
    transform: translateY(-1px);
}

.btn-outline-warning {
    color: var(--warning-color);
    border-color: var(--warning-color);
    background-color: transparent;
}

.btn-outline-warning:hover {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: #212529;
    transform: translateY(-1px);
}

.btn-outline-info {
    color: var(--info-color);
    border-color: var(--info-color);
    background-color: transparent;
}

.btn-outline-info:hover {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: white;
    transform: translateY(-1px);
}

/* Botón link */
.btn-link {
    color: var(--primary-color);
    text-decoration: none;
    background-color: transparent;
    border: none;
}

.btn-link:hover {
    color: #2e59d9;
    text-decoration: underline;
}

/* Variantes de tamaño de botones */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
}

/* Modo Oscuro - Botones Sólidos */
[data-theme="dark"] .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: #4a7fff;
    border-color: #4a7fff;
    color: white;
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: #b0b0b0;
    border-color: #b0b0b0;
    color: white;
}

[data-theme="dark"] .btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

[data-theme="dark"] .btn-success:hover {
    background-color: #35e5b5;
    border-color: #35e5b5;
    color: white;
}

[data-theme="dark"] .btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
}

[data-theme="dark"] .btn-danger:hover {
    background-color: #ff8585;
    border-color: #ff8585;
    color: white;
}

[data-theme="dark"] .btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: #212529;
}

[data-theme="dark"] .btn-warning:hover {
    background-color: #ffe066;
    border-color: #ffe066;
    color: #212529;
}

[data-theme="dark"] .btn-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: white;
}

[data-theme="dark"] .btn-info:hover {
    background-color: #5dd5e8;
    border-color: #5dd5e8;
    color: white;
}

/* Modo Oscuro - Botones Outline */
[data-theme="dark"] .btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: transparent;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    background-color: transparent;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}

[data-theme="dark"] .btn-outline-success {
    color: var(--success-color);
    border-color: var(--success-color);
    background-color: transparent;
}

[data-theme="dark"] .btn-outline-success:hover {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

[data-theme="dark"] .btn-outline-danger {
    color: var(--danger-color);
    border-color: var(--danger-color);
    background-color: transparent;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
}

[data-theme="dark"] .btn-outline-warning {
    color: var(--warning-color);
    border-color: var(--warning-color);
    background-color: transparent;
}

[data-theme="dark"] .btn-outline-warning:hover {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: #212529;
}

[data-theme="dark"] .btn-outline-info {
    color: var(--info-color);
    border-color: var(--info-color);
    background-color: transparent;
}

[data-theme="dark"] .btn-outline-info:hover {
    background-color: var(--info-color);
    border-color: var(--info-color);
    color: white;
}

/* Modo Oscuro - Botón Link */
[data-theme="dark"] .btn-link {
    color: var(--primary-color);
}

[data-theme="dark"] .btn-link:hover {
    color: #7aa3ff;
}

/* Formularios personalizados */
.form-control {
    border-radius: var(--border-radius);
    border: 1px solid #d1d3e2;
    padding: 0.75rem 1rem;
    background-color: #fff;
    color: var(--dark-color);
    transition: border-color 0.2s ease-in-out, background-color 0.3s ease, color 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.form-label {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

/* Modo Oscuro - Formularios */
[data-theme="dark"] .form-control {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(90, 143, 255, 0.25);
    color: var(--text-primary);
}

[data-theme="dark"] .form-label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-text {
    color: var(--text-secondary);
}

/* Modo Oscuro - Select y Textarea */
[data-theme="dark"] select.form-control,
[data-theme="dark"] select {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    /* Sin esto la flecha se repite a lo ancho de todo el select y salen decenas
       de chevrons. .form-select ya trae estas tres de Bootstrap, pero un
       <select class="form-control"> no, y ahí es donde se veía el fallo. */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

[data-theme="dark"] select.form-control:focus,
[data-theme="dark"] select:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(90, 143, 255, 0.25);
    color: var(--text-primary);
}

[data-theme="dark"] textarea.form-control,
[data-theme="dark"] textarea {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] textarea.form-control:focus,
[data-theme="dark"] textarea:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(90, 143, 255, 0.25);
    color: var(--text-primary);
}

/* Modo Oscuro - Otros elementos de formulario */
[data-theme="dark"] .form-select {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(90, 143, 255, 0.25);
    color: var(--text-primary);
}

[data-theme="dark"] .form-check-input {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

[data-theme="dark"] .form-check-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(90, 143, 255, 0.25);
}

[data-theme="dark"] .form-check-label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-range::-webkit-slider-thumb {
    background-color: var(--primary-color);
}

[data-theme="dark"] .form-range::-moz-range-thumb {
    background-color: var(--primary-color);
}

[data-theme="dark"] .form-range::-ms-thumb {
    background-color: var(--primary-color);
}

[data-theme="dark"] .form-range::-webkit-slider-runnable-track {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .form-range::-moz-range-track {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .invalid-feedback {
    color: var(--danger-color);
}

[data-theme="dark"] .valid-feedback {
    color: var(--success-color);
}

[data-theme="dark"] .was-validated .form-control:valid {
    border-color: var(--success-color);
}

[data-theme="dark"] .was-validated .form-control:invalid {
    border-color: var(--danger-color);
}

/* Modo Oscuro - Clases de Texto */
[data-theme="dark"] .text-primary {
    color: var(--primary-color) !important;
}

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

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

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

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

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

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

[data-theme="dark"] .text-light {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-white {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-black {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-300 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-800 {
    color: var(--text-primary) !important;
}

/* Tablas personalizadas */
.table {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Optimización de renderizado para tablas grandes */
    contain: layout style paint;
    will-change: background-color, color;
}

.table td,
.table th {
    contain: layout style;
}

.table thead th {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-width: 0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.table tbody {
    transition: background-color 0.3s ease;
}

.table tbody tr {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.table tbody tr:hover {
    background-color: rgba(78, 115, 223, 0.05);
    transition: background-color 0.3s ease;
}

.table td,
.table th {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Celdas del tbody - heredan fondo de la fila */
.table tbody td,
.table tbody th {
    background-color: inherit;
}

/* Celdas en hover - heredan fondo de la fila hover */
.table tbody tr:hover td,
.table tbody tr:hover th {
    background-color: inherit;
}

/* Tabla pequeña */
.table-sm {
    font-size: 0.875rem;
}

.table-sm td,
.table-sm th {
    padding: 0.3rem;
}

/* Tablas dentro de card-body */
.card-body .table-responsive .table {
    margin-bottom: 0;
}

/* Optimización de renderizado para contenedores de tablas */
.table-responsive {
    contain: layout style;
    will-change: contents;
}

.card-body .table-responsive {
    contain: layout style paint;
}

/* Modo Oscuro - Tablas */
/* Regla general para forzar transiciones en TODOS los elementos de tabla */
[data-theme="dark"] .table,
[data-theme="dark"] .table *,
[data-theme="dark"] .table thead,
[data-theme="dark"] .table thead *,
[data-theme="dark"] .table tbody,
[data-theme="dark"] .table tbody *,
[data-theme="dark"] .table tfoot,
[data-theme="dark"] .table tfoot *,
[data-theme="dark"] .table tr,
[data-theme="dark"] .table tr *,
[data-theme="dark"] .table td,
[data-theme="dark"] .table td *,
[data-theme="dark"] .table th,
[data-theme="dark"] .table th * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

[data-theme="dark"] .table {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table thead {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .table thead th {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: none !important;
    border-width: 0 !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

[data-theme="dark"] .table thead tr {
    background-color: var(--bg-tertiary) !important;
    transition: background-color 0.3s ease !important;
}

[data-theme="dark"] .table tbody {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .table tbody tr {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Estilos base para todas las celdas - aplicados primero */
[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] .table td *,
[data-theme="dark"] .table th * {
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Modo Oscuro - Variantes de Tablas */
[data-theme="dark"] .table-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table-light thead th {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: none !important;
}

[data-theme="dark"] .table-light tbody tr {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

[data-theme="dark"] .table-light td,
[data-theme="dark"] .table-light th {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    transition: border-color 0.3s ease, color 0.3s ease !important;
}

/* .table-secondary (fila apagada, p. ej. enlace no visible en Conversión) y
   .table-warning (fila de aviso, p. ej. venta pendiente): Bootstrap fija su
   propio fondo claro vía --bs-table-bg y la regla genérica de arriba solo
   toca el color de texto, así que sin este par queda texto oscuro sobre
   fondo claro de Bootstrap = ilegible en modo oscuro. */
[data-theme="dark"] .table-secondary,
[data-theme="dark"] .table-secondary > td,
[data-theme="dark"] .table-secondary > th {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .table-hover .table-secondary:hover,
[data-theme="dark"] .table-secondary:hover > td,
[data-theme="dark"] .table-secondary:hover > th {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .table-warning,
[data-theme="dark"] .table-warning > td,
[data-theme="dark"] .table-warning > th {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
}

[data-theme="dark"] .table-hover .table-warning:hover,
[data-theme="dark"] .table-warning:hover > td,
[data-theme="dark"] .table-warning:hover > th {
    background-color: rgba(255, 193, 7, 0.25) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table-hover.table-light tbody tr:hover {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .table-bordered {
    border-color: var(--border-color) !important;
    transition: border-color 0.3s ease !important;
}

[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th {
    border-color: var(--border-color) !important;
    transition: border-color 0.3s ease !important;
}

[data-theme="dark"] .table-bordered thead th {
    border-color: var(--border-color) !important;
    transition: border-color 0.3s ease !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

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

[data-theme="dark"] .table-striped.table-light tbody tr:nth-of-type(even) {
    background-color: var(--bg-secondary) !important;
}

/* Combinaciones de clases de tabla */
[data-theme="dark"] .table.table-hover.table-bordered tbody tr:hover {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

[data-theme="dark"] .table.table-striped.table-hover tbody tr:nth-of-type(odd):hover {
    background-color: var(--bg-primary) !important;
    transition: background-color 0.3s ease !important;
}

[data-theme="dark"] .table.table-striped.table-hover tbody tr:nth-of-type(even):hover {
    background-color: var(--bg-primary) !important;
    transition: background-color 0.3s ease !important;
}

/* Eliminadas reglas duplicadas - los estilos de thead ya están definidos arriba */

/* Tablas con tfoot */
[data-theme="dark"] .table tfoot th,
[data-theme="dark"] .table tfoot td {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table tfoot.table-light th,
[data-theme="dark"] .table tfoot.table-light td {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Alertas personalizadas */
.alert {
    border: none;
    border-radius: var(--border-radius);
    font-weight: 500;
}

.alert-success {
    background-color: rgba(28, 200, 138, 0.1);
    color: var(--success-color);
}

.alert-danger {
    background-color: rgba(231, 74, 59, 0.1);
    color: var(--danger-color);
}

.alert-warning {
    background-color: rgba(246, 194, 62, 0.1);
    color: var(--warning-color);
}

.alert-info {
    background-color: rgba(54, 185, 204, 0.1);
    color: var(--info-color);
}

/* Modo Oscuro - Alertas */
[data-theme="dark"] .alert {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(45, 212, 160, 0.15);
    color: var(--success-color);
    border-color: var(--success-color);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(255, 107, 107, 0.15);
    color: var(--danger-color);
    border-color: var(--danger-color);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 213, 79, 0.15);
    color: var(--warning-color);
    border-color: var(--warning-color);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(74, 197, 216, 0.15);
    color: var(--info-color);
    border-color: var(--info-color);
}

/* Badges personalizados */
.badge {
    font-weight: 600;
    padding: 0.5em 0.75em;
    border-radius: var(--border-radius);
}

/* Spinners personalizados */
.spinner-border {
    border-width: 0.2em;
}

/* Progress bars personalizados */
.progress {
    border-radius: var(--border-radius);
    background-color: #eaecf4;
}

.progress-bar {
    border-radius: var(--border-radius);
}

/* Dropdowns personalizados */
.dropdown-menu {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.dropdown-item {
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.dropdown-item:hover {
    background-color: rgba(78, 115, 223, 0.1);
}

/* Modo Oscuro - Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color);
}

/* Paginación personalizada */
.pagination .page-link {
    border: none;
    color: var(--primary-color);
    font-weight: 600;
    padding: 0.75rem 1rem;
}

.pagination .page-link:hover {
    background-color: var(--primary-color);
    color: white;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Responsive utilities */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    .h5 {
        font-size: 1.1rem;
    }
    
    .text-xs {
        font-size: 0.65rem;
    }
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* Estilos para el footer */
footer {
    margin-top: auto;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Modo Oscuro - Footer */
[data-theme="dark"] footer {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-top-color: var(--border-color);
}

[data-theme="dark"] footer .text-muted {
    color: var(--text-secondary) !important;
}

/* Estilos para el contenido principal */
main {
    flex: 1;
}

/* Estilos para las estadísticas del dashboard */
.stats-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

.stats-card .card-body {
    padding: 1.5rem;
}

.stats-card .stats-icon {
    font-size: 2.5rem;
    opacity: 0.8;
}

.stats-card .stats-number {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.stats-card .stats-label {
    font-size: 0.9rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Estilos para el logo */
.logo-img {
    height: 40px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    transition: transform 0.2s ease-in-out;
}

.logo-img:hover {
    transform: scale(1.05);
}

/* Responsive para el logo */
@media (max-width: 576px) {
    .logo-img {
        height: 30px;
        max-width: 150px;
    }
}

@media (max-width: 400px) {
    .logo-img {
        height: 25px;
        max-width: 120px;
    }
}

/* Estilos para el texto del logo en el footer */
.logo-text {
    font-weight: 700;
    font-size: 1.1em;
}

.logo-chatting {
    color: #333;
}

.logo-number {
    color: #007bff;
    font-weight: 800;
}

.logo-fans {
    color: #333;
}

/* La tarjeta del login.
   Antes llevaba shadow-lg de Bootstrap: una sombra negra de 48px de difuminado
   que sobre el fondo casi negro del modo noche no se leia como sombra sino como
   una mancha rectangular alrededor del recuadro. Lo que se conserva es una
   sombra sin desplazamiento vertical, que rodea la tarjeta por igual en los
   cuatro lados en vez de asomar solo por abajo; en modo noche va acompanada de
   un borde fino, que es lo que acaba de despegarla del fondo. */
.login-card {
    /* El radio general del panel son 0.35rem, que en un recuadro de este tamaño
       apenas se aprecia y la tarjeta se ve cuadrada. Aquí se redondea de verdad. */
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, .14);
}

[data-theme="dark"] .login-card {
    /* El fondo del modo noche es rgb(26,29,41): oscuro, pero no negro, asi que
       una sombra negra suave todavia se distingue contra el. */
    box-shadow: 0 0 10px rgba(0, 0, 0, .45);
    border: 1px solid var(--border-color) !important;
}

/* Estilos para el logo en la página de login.
   Sin sombra ni esquinas redondeadas: el logo es un PNG con fondo transparente
   metido en una caja de 300x50, asi que la sombra no seguia su silueta sino el
   rectangulo entero, y sobre el fondo oscuro del panel se veia un recuadro
   fantasma bastante mas ancho que el propio logo. */
.login-logo {
    width: 300px;
    height: 50px;
    object-fit: contain;
    transition: transform 0.3s ease-in-out;
}

.login-logo:hover {
    transform: scale(1.05);
}

/* Responsive para el logo de login */
@media (max-width: 576px) {
    .login-logo {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 400px) {
    .login-logo {
        width: 80px;
        height: 80px;
    }
}

/* Estilos para el sidebar */
.offcanvas {
    width: 280px !important;
}

.offcanvas-header {
    background-color: var(--primary-color);
    color: white;
}

.offcanvas-title {
    font-weight: 600;
    margin: 0;
}

.list-group-item {
    border: none;
    border-radius: 0;
    transition: all 0.2s ease-in-out;
}

.list-group-item:hover {
    background-color: rgba(78, 115, 223, 0.1);
}

.list-group-item.active {
    background-color: var(--primary-color);
    color: white;
}

.list-group-item.active:hover {
    background-color: var(--primary-color);
}

/* Estilos para desplegables del menú */
.list-group-item .btn-link {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    transition: all 0.2s ease-in-out;
}

.list-group-item .btn-link:hover {
    background-color: rgba(78, 115, 223, 0.1);
    color: var(--primary-color);
}

.list-group-item .btn-link.active {
    background-color: var(--primary-color);
    color: white;
}

.list-group-item .btn-link.active:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Sidebar: flecha cerrada = derecha, abierta = abajo (con animación) */
#sidebar .list-group-item.btn-link i.fa-chevron-down,
#sidebar .list-group-item .btn-link i.fa-chevron-down {
    transition: transform 0.25s ease-in-out;
    transform: rotate(-90deg);
}
#sidebar .list-group-item.btn-link[aria-expanded="true"] i.fa-chevron-down,
#sidebar .list-group-item .btn-link[aria-expanded="true"] i.fa-chevron-down {
    transform: rotate(0deg);
}

/* Estilos para elementos del dropdown */
.list-group .list-group .list-group-item {
    padding-left: 2.5rem;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

.list-group .list-group .list-group-item:hover {
    background-color: rgba(78, 115, 223, 0.05);
    border-left-color: var(--primary-color);
}

.list-group .list-group .list-group-item.active {
    background-color: rgba(78, 115, 223, 0.1);
    border-left-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

/* Animación suave para collapse */
.collapse {
    transition: height 0.3s ease-in-out;
}

/* Estilos para badges en el menú */
.list-group-item .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

/* Mejoras visuales para el sidebar */
.offcanvas-body {
    background-color: #f8f9fc;
}

.list-group {
    background-color: transparent;
}

/* Estilos para elementos activos en dropdowns */
.list-group-item.active .btn-link {
    color: white;
}

.list-group-item.active .btn-link:hover {
    color: white;
}

#calendar{box-shadow:var(--box-shadow);background:#fff;padding:1rem;border-radius:var(--border-radius);}

/* category link solo */
.cat-link{font-weight:700;text-transform:uppercase;color:var(--dark-color);}.cat-link:hover{color:var(--primary-color);}

/* -----------------------------------------------------------------
   Sidebar mejorado
------------------------------------------------------------------*/
.offcanvas-body{padding:0.25rem 0.3rem;box-shadow:inset -1px 0 0 #e6e6e6;}
.cat-link,
.list-group-item.btn-link{font-weight:700;letter-spacing:.4px;background:#f5f6fa;}
.list-group-item.btn-link:hover{background:#eef1f7;}
.list-group-item.btn-link i.fa-chevron-down{font-size:.75rem;transition:transform .25s ease-in-out;transform:rotate(-90deg);}
#sidebar .list-group-item.btn-link[aria-expanded="true"] i.fa-chevron-down{transform:rotate(0deg);}
#sidebar .list-group-item .btn-link[aria-expanded="true"] i.fa-chevron-down{transform:rotate(0deg);}
.list-group .list-group .list-group-item{padding-left:2.25rem;border-left:3px solid transparent;}
.list-group .list-group .list-group-item:hover{background:#f9fafc;border-left-color:var(--primary-color);}
.list-group .list-group .active{background:#e7ecff;color:var(--primary-color);} 
.collapse{transition:height .25s ease;}
.list-group-item i{width:18px;text-align:center;}

/* =================================================================
   MODO OSCURO - Estilos adicionales
================================================================= */

/* Navbar en modo oscuro */
[data-theme="dark"] .navbar {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .navbar .text-white {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .navbar .badge {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Sidebar en modo oscuro */
[data-theme="dark"] .offcanvas {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .offcanvas-header {
    background-color: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .offcanvas-body {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .list-group-item {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .list-group-item.active {
    background-color: var(--primary-color);
    color: white;
}

[data-theme="dark"] .list-group-item.btn-link {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item.btn-link:hover {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .list-group-item.btn-link.active {
    background-color: var(--primary-color);
    color: white;
}

[data-theme="dark"] .list-group .list-group .list-group-item {
    border-left-color: var(--border-color);
}

[data-theme="dark"] .list-group .list-group .list-group-item:hover {
    background-color: var(--bg-tertiary);
    border-left-color: var(--primary-color);
}

[data-theme="dark"] .list-group .list-group .active {
    background-color: rgba(90, 143, 255, 0.2);
    color: var(--primary-color);
}

[data-theme="dark"] .cat-link {
    color: var(--text-primary);
}

[data-theme="dark"] .cat-link:hover {
    color: var(--primary-color);
}

/* Asignaciones - Estilos para modo oscuro */
/* Hover en list-group-item de asignaciones */
.list-group-item.cursor-pointer:hover {
    background-color: rgba(78, 115, 223, 0.08);
}

[data-theme="dark"] .list-group-item.cursor-pointer:hover {
    background-color: rgba(90, 143, 255, 0.1);
}

/* Item seleccionado en asignaciones */
.list-group-item.selected {
    background-color: rgba(78, 115, 223, 0.15);
    border-left: 4px solid var(--primary-color);
}

[data-theme="dark"] .list-group-item.selected {
    background-color: rgba(90, 143, 255, 0.2);
    border-left-color: var(--primary-color);
}

/* Card headers con bg-info y bg-success */
.card-header.bg-info {
    background-color: var(--info-color) !important;
    color: white !important;
    border-color: var(--info-color) !important;
}

.card-header.bg-success {
    background-color: var(--success-color) !important;
    color: white !important;
    border-color: var(--success-color) !important;
}

[data-theme="dark"] .card-header.bg-info {
    background-color: var(--info-color) !important;
    color: white !important;
}

[data-theme="dark"] .card-header.bg-success {
    background-color: var(--success-color) !important;
    color: white !important;
}

/* Badges en headers de asignaciones - mejor contraste */
.card-header .badge.bg-light.text-info {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--info-color) !important;
}

.card-header .badge.bg-light.text-success {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--success-color) !important;
}

[data-theme="dark"] .card-header .badge.bg-light.text-info,
[data-theme="dark"] .card-header .badge.bg-light.text-success {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Avatar circular en asignaciones */
.avatar-sm.bg-info {
    background-color: var(--info-color) !important;
}

.avatar-sm.bg-success {
    background-color: var(--success-color) !important;
}

/* Responsive para asignaciones */
@media (max-width: 991px) {
    .btn-lg.rounded-circle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        min-height: 44px;
    }
}

/* Modales en modo oscuro */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .modal-footer {
    background-color: var(--bg-tertiary);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .modal-body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* Badges en modo oscuro */
[data-theme="dark"] .badge {
    color: var(--text-primary);
}

[data-theme="dark"] .badge.bg-light {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .badge.bg-dark {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .badge.bg-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
}

[data-theme="dark"] .badge.bg-secondary {
    background-color: var(--secondary-color) !important;
    color: white !important;
}

[data-theme="dark"] .badge.bg-success {
    background-color: var(--success-color) !important;
    color: white !important;
}

[data-theme="dark"] .badge.bg-danger {
    background-color: var(--danger-color) !important;
    color: white !important;
}

[data-theme="dark"] .badge.bg-warning {
    background-color: var(--warning-color) !important;
    color: #212529 !important;
}

[data-theme="dark"] .badge.bg-warning.cursor-pointer:hover {
    filter: brightness(1.12);
}

[data-theme="dark"] .badge.bg-info {
    background-color: var(--info-color) !important;
    color: white !important;
}

[data-theme="dark"] .badge.text-light {
    color: var(--text-secondary) !important;
}

/* Progress bars en modo oscuro */
[data-theme="dark"] .progress {
    background-color: var(--bg-tertiary);
}

/* Paginación en modo oscuro */
[data-theme="dark"] .pagination .page-link {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Input groups en modo oscuro */
[data-theme="dark"] .input-group-text {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Text muted en modo oscuro */
[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

/* Background colors en modo oscuro */
[data-theme="dark"] .bg-light {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--bg-secondary) !important;
}

/* Border colors en modo oscuro */
[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .border-top {
    border-top-color: var(--border-color) !important;
}

/* Calendar en modo oscuro */
[data-theme="dark"] #calendar {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary);
}

/* Desactivar todas las transiciones durante el cambio de tema (aplicación instantánea) */
html.theme-switching,
html.theme-switching * {
    transition: none !important;
}

/* Loader para cambio de tema */
.theme-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--light-color);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

[data-theme="dark"] .theme-loader {
    background-color: var(--bg-primary);
}

.theme-loader.active {
    display: flex;
}

.theme-loader.hiding {
    opacity: 0;
}

.theme-loader-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(78, 115, 223, 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: theme-loader-spin 0.8s linear infinite;
}

[data-theme="dark"] .theme-loader-spinner {
    border-color: rgba(90, 143, 255, 0.2);
    border-top-color: var(--primary-color);
}

@keyframes theme-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Botón toggle de tema */
.theme-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.theme-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .theme-toggle {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
}

[data-theme="dark"] .theme-toggle:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-color);
}

/* Botón toggle en navbar (siempre visible sobre fondo oscuro) */
.navbar .theme-toggle {
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
}

.navbar .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Botón toggle en login page */
body.bg-light .theme-toggle {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--dark-color);
}

body.bg-light .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 1);
    border-color: var(--primary-color);
}

[data-theme="dark"] body.bg-light .theme-toggle {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] body.bg-light .theme-toggle:hover {
    background-color: var(--bg-primary);
    border-color: var(--primary-color);
}

/* Login page en modo oscuro */
[data-theme="dark"] body.bg-light {
    background-color: var(--bg-primary) !important;
    background-image: none;
}

[data-theme="dark"] .card.shadow-lg {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .card.shadow-lg .card-body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Contenedor principal en modo oscuro */
[data-theme="dark"] #content-wrapper {
    background-color: var(--bg-primary);
}

[data-theme="dark"] main {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Modo Oscuro - Títulos y texto fuerte */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary) !important;
    transition: color 0.3s ease !important;
}

[data-theme="dark"] strong {
    color: var(--text-primary) !important;
    transition: color 0.3s ease !important;
}

/* Clases de Bootstrap para títulos */
[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6 {
    color: var(--text-primary) !important;
    transition: color 0.3s ease !important;
}

/* Clases de tamaño de fuente de Bootstrap */
[data-theme="dark"] .fs-1,
[data-theme="dark"] .fs-2,
[data-theme="dark"] .fs-3,
[data-theme="dark"] .fs-4,
[data-theme="dark"] .fs-5,
[data-theme="dark"] .fs-6 {
    color: var(--text-primary) !important;
    transition: color 0.3s ease !important;
}

/* Modo Oscuro - Elementos adicionales */
[data-theme="dark"] .table-responsive {
    background-color: transparent;
}

[data-theme="dark"] .card-body {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Asegurar transiciones en todos los elementos dentro de card-body */
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-body * {
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Asegurar que el contenedor de la tabla tenga fondo */
[data-theme="dark"] .card-body .table-responsive {
    background-color: var(--bg-secondary);
    transition: background-color 0.3s ease !important;
}

[data-theme="dark"] .card-body .table-responsive .table {
    background-color: var(--bg-secondary) !important;
    transition: background-color 0.3s ease !important;
}

[data-theme="dark"] .list-group-item {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .list-group-item.disabled,
[data-theme="dark"] .list-group-item:disabled {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    opacity: 0.6;
}

[data-theme="dark"] .breadcrumb {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .breadcrumb-item a {
    color: var(--primary-color);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-primary);
    border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-secondary);
    border-color: var(--border-color) var(--border-color) var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .nav-pills .nav-link {
    color: var(--text-primary);
}

[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--primary-color);
    color: white;
}

[data-theme="dark"] .tooltip .tooltip-inner {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .tooltip .tooltip-arrow::before {
    border-top-color: var(--bg-tertiary);
}

[data-theme="dark"] .popover {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .popover-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .popover-body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .spinner-border {
    border-color: var(--text-secondary);
    border-right-color: transparent;
}

[data-theme="dark"] .spinner-grow {
    background-color: var(--text-secondary);
}

/* Contenedor tabla ig-cuentas: respetar ancho col-md-8 y permitir scroll horizontal */
.ig-cuentas-table-wrap {
    min-width: 0;
    max-width: 100%;
}
.ig-cuentas-table-wrap .card {
    max-width: 100%;
    overflow: visible !important;
}
.ig-cuentas-table-wrap .card-body {
    overflow: visible !important;
}
/* Contenedor de tabla: overflow visible para que el dropdown no se recorte.
   CSS spec: overflow-x:auto + overflow-y:visible es imposible (se coerce a auto en ambos ejes).
   La tabla solo se muestra en >=md (d-none d-md-table); table-responsive-md solo aplica <md. */
.ig-cuentas-table-wrap .table-responsive,
.ig-cuentas-table-wrap .table-responsive-md {
    overflow: visible !important;
    contain: none !important;
}
.ig-cuentas-table-wrap .table {
    overflow: visible !important;
    contain: none !important;
}
.ig-cuentas-table-wrap .table td,
.ig-cuentas-table-wrap .table th {
    contain: none !important;
}
/* Dropdown de acciones: z-index alto para cubrir thead y card-header */
.ig-cuentas-table-wrap .dropdown-menu,
.ig-cuentas-table-wrap .dropdown-menu.show {
    z-index: 1070 !important;
}

/* ig-cuentas refactor: contenedor principal y dropdowns */
.ig-cuentas .dropdown-menu,
.ig-cuentas .dropdown-menu.show {
    z-index: 1070 !important;
}
.ig-cuentas .table-responsive,
.ig-cuentas .table-responsive-md,
.ig-cuentas-table-wrap .table-responsive,
.ig-cuentas-table-wrap .table-responsive-md {
    overflow: visible !important;
    contain: none !important;
}
.ig-cuentas .bulk-bar {
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.ig-cuentas .ig-card-mobile .dropdown-menu {
    z-index: 1070 !important;
}

/* Botones extra-pequeños */
.btn-xs {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    border-radius: 0.2rem;
    line-height: 1.2;
}

/* Tabla extra-compacta */
.table-xs td,
.table-xs th {
    padding: 0.2rem 0.4rem;
    font-size: 0.82rem;
}

/* ──────────────────────────────────────────────────────────────────────
   Cabeceras de categoría del menú lateral
   Antes eran texto gris a secas, sin icono y sin separación entre bloques,
   así que todo el menú se leía como una lista larga y plana. Se mantienen los
   colores del tema (variables ya existentes): solo cambia la jerarquía visual.
   ────────────────────────────────────────────────────────────────────── */
#sidebar .menu-cat-header,
.offcanvas .menu-cat-header {
    background-color: transparent;
    /* Blanco en modo noche y oscuro en modo día: el gris apagado de antes
       costaba de leer y hundía la jerarquía del menú. */
    color: var(--dark-color, #2b3553);
    /* Tipografía del sistema, la misma familia que usa el resto del panel pero
       con el trazo un punto más marcado para que la cabecera pese. */
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700 !important;
    letter-spacing: .04em;
    font-size: .82rem;
    -webkit-font-smoothing: antialiased;
    /* Línea de separación entre bloques: agrupa de un vistazo sin añadir ruido. */
    border-top: 1px solid rgba(0, 0, 0, .06);
    margin-top: .25rem;
    padding-top: .55rem !important;
    text-decoration: none;
}

/* La primera cabecera no lleva línea encima: quedaría pegada al buscador. */
#sidebar .list-group > .menu-cat-header:first-child,
.offcanvas .list-group > .menu-cat-header:first-child {
    border-top: 0;
    margin-top: 0;
}

#sidebar .menu-cat-header:hover,
.offcanvas .menu-cat-header:hover {
    color: var(--primary-color, #4e73df);
    background-color: rgba(78, 115, 223, .06);
}

/* El icono va siempre en el azul del tema, no solo al pasar por encima. */
.menu-cat-icon {
    color: var(--primary-color, #4e73df);
    opacity: 1;
    font-size: 1rem;
    transition: color .2s ease-in-out, transform .2s ease-in-out;
}

/* Al pasar por encima o con la categoría abierta el icono no cambia de color
   —ya es azul— pero crece un pelo, para que siga habiendo respuesta visual. */
.menu-cat-header:hover .menu-cat-icon,
.menu-cat-header[aria-expanded="true"] .menu-cat-icon {
    transform: scale(1.12);
}

/* Categoría abierta: se resalta para saber en qué bloque estás. */
.menu-cat-header[aria-expanded="true"] {
    color: var(--primary-color, #4e73df);
}

.menu-cat-chevron {
    font-size: .72rem;
    opacity: .5;
}

/* Los enlaces de dentro se sangran y afinan, para que se lea el nivel. */
#sidebar .collapse .list-group-item,
.offcanvas .collapse .list-group-item {
    padding-left: 1.9rem;
    font-size: .95rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .01em;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* Los iconos de los enlaces de dentro: mismo azul, algo más discretos para que
   no compitan con la cabecera de su categoría. */
#sidebar .collapse .list-group-item i,
.offcanvas .collapse .list-group-item i {
    font-size: .95rem;
    color: var(--primary-color, #4e73df);
    opacity: .85;
}

[data-theme="dark"] #sidebar .collapse .list-group-item i,
[data-theme="dark"] .offcanvas .collapse .list-group-item i {
    color: #6f8ffb;
}

/* En la entrada activa el icono va en blanco: el fondo ya es azul. */
#sidebar .list-group-item.active i,
.offcanvas .list-group-item.active i,
[data-theme="dark"] #sidebar .list-group-item.active i,
[data-theme="dark"] .offcanvas .list-group-item.active i {
    color: #fff;
    opacity: 1;
}

/* Entrada activa: barra de color a la izquierda en vez de solo el fondo. */
#sidebar .list-group-item.active,
.offcanvas .list-group-item.active {
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, .85);
}

/* Modo noche: los mismos matices, con los contrastes al revés. */
[data-theme="dark"] #sidebar .menu-cat-header,
[data-theme="dark"] .offcanvas .menu-cat-header {
    border-top-color: rgba(255, 255, 255, .08);
    color: #fff;
}

/* En modo noche el azul del tema queda oscuro sobre el fondo: se aclara. */
[data-theme="dark"] .menu-cat-icon {
    color: #6f8ffb;
    opacity: 1;
}

[data-theme="dark"] #sidebar .menu-cat-header:hover,
[data-theme="dark"] .offcanvas .menu-cat-header:hover {
    background-color: rgba(255, 255, 255, .05);
    color: #fff;
}

/* ── Amarillo: el texto encima va SIEMPRE oscuro ────────────────────────────
 *
 * El panel corre en modo oscuro para todo el mundo (dark-mode.js fuerza
 * data-theme="dark" en <html>, no hay modo claro). Y ahi habia dos reglas de
 * mas arriba que pintaban de claro el texto que va sobre amarillo solido:
 *
 *   [data-theme="dark"] .card-header  ->  color: var(--text-primary)  (#e0e0e0)
 *   [data-theme="dark"] .btn-link     ->  color: var(--primary-color) (azul)
 *
 * Las dos ganan por especificidad al .text-dark que ya traia el HTML, asi que
 * quedaba texto casi blanco sobre amarillo (#ffc107). Medido: contraste 1.23,
 * ilegible. Pasaba en la franja de "Modelos sin pago", en la cabecera de
 * "Ajuste de OnlyFans (Opcional)" y en el bloque de ajuste por modelo del pago
 * a socios.
 *
 * Se excluyen los .badge, que llevan su propio fondo y su propio color -- mismo
 * criterio que ya se aplico a [data-theme="dark"] .badge.bg-warning.
 *
 * Y se excluye .card: en `.card.bg-warning` el amarillo solo se ve en el borde,
 * porque .card-body pinta encima su propio fondo oscuro. Ahi el texto va sobre
 * oscuro y tiene que seguir siendo claro. Medido: incluirlo dejaba #212529
 * sobre #252836, contraste 1.05 -- peor que el problema original.
 */
.card-header.bg-warning,
.card-header.bg-warning *:not(.badge),
div.bg-warning:not(.badge):not(.card):not([class*="bg-opacity"]),
div.bg-warning:not(.badge):not(.card):not([class*="bg-opacity"]) *:not(.badge) {
    color: #212529 !important;
}