/* ==============================================
   🌿 HIPER CALM - CERA & CREMA EDITION 🌿
   ============================================== */

/* ==============================================
   1. ESCALA DE COLORES CERA / CREMA / PASTEL
   ============================================== */

:root {
    /* Tonos cálidos de cera y crema */
    --cera-100: #fdfbf7;
    --cera-200: #f7f2e8;
    --cera-300: #efe6d5;
    --cera-400: #e5d9c3;
    --cera-500: #d4c9b0;
    --cera-600: #b8a88c;
    --cera-700: #9a8a6e;
    --cera-800: #7a6e58;
    --cera-900: #5a5040;

    /* Colores pastel suaves */
    --pastel-rosa:    #e8c4c4;
    --pastel-azul:    #b8d4e8;
    --pastel-verde:   #b8d8c4;
    --pastel-amarillo:#e8dcb8;
    --pastel-lavanda: #d4c8e0;
    --pastel-naranja: #e8c8b0;

    /* Colores primarios (compartidos) */
    --primary:       #c4a88c;
    --primary-dark:  #a0886e;
    --primary-light: #dcc8b0;

    --secondary:       #a8c4d4;
    --secondary-dark:  #88a8b8;
    --secondary-light: #c8dce8;

    --accent:       #c8b8d4;
    --accent-dark:  #a898b8;
    --accent-light: #e0d4e8;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==============================================
   2. MODO CLARO (POR DEFECTO - HIPER CALM)
   ============================================== */

body {
    --bg-body:       #f7f4ee;
    --bg-card:       #fdfcfa;
    --bg-card-hover: #f5f0e8;
    --bg-input:      #faf8f4;
    --text-primary:  #5a5040;
    --text-muted:    #a09888;
    --text-light:    #7a7060;
    --text-inverse:  #fdfcfa;
    --border-color:  #e8e0d4;
    --border-light:  #f0ebe0;
    --shadow-color:  rgba(90,80,64,0.06);

    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-family);
    transition: background-color 0.5s ease, color 0.5s ease;
    line-height: 1.6;
}

/* ==============================================
   3. MODO OSCURO - INVERSIÓN EXACTA DEL CLARO
   ============================================== */

body.dark-theme {
    --bg-body:       #1a1814;
    --bg-card:       #252218;
    --bg-card-hover: #2e2a20;
    --bg-input:      #201e18;
    --text-primary:  #e8e0d4;
    --text-muted:    #908878;
    --text-light:    #b8b0a0;
    --text-inverse:  #1a1814;
    --border-color:  #3a3428;
    --border-light:  #2e2a20;
    --shadow-color:  rgba(0,0,0,0.25);
}

/* Forzar fondo de body en modo oscuro */
body.dark-theme {
    background-color: var(--bg-body) !important;
}

/* ==============================================
   4. ESTRUCTURA BASE
   ============================================== */

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* ==============================================
   5. SIDEBAR - LATERAL SUAVE
   ============================================== */

.app-wrapper {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    background-color: #f0ebe0 !important;
    border-right: 1px solid var(--border-color) !important;
    box-shadow: 2px 0 12px rgba(90,80,64,0.04) !important;
    overflow-y: auto;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, background-color 0.5s ease;
}

body.dark-theme .sidebar {
    background-color: #1e1c16 !important;
    border-right: 1px solid var(--border-color) !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.2) !important;
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
    }
    .sidebar.active { transform: translateX(0); }
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(26, 24, 20, 0.3);
    z-index: 1040;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

.main-content {
    margin-left: 260px;
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .main-content { margin-left: 0; }
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-body);
    position: sticky;
    top: 0;
    z-index: 1020;
    transition: background-color 0.5s ease;
}

.menu-toggle {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1.3rem;
    padding: 6px 12px;
    cursor: pointer;
    display: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.menu-toggle:hover {
    background-color: var(--bg-card-hover);
}

@media (max-width: 768px) {
    .menu-toggle { display: block; }
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 20px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--primary-dark) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 1.15rem;
}

body.dark-theme .sidebar-brand {
    color: var(--primary-light) !important;
}

.sidebar-profile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-profile-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-profile-text h6 {
    color: var(--text-primary) !important;
    margin: 0;
    font-weight: 500;
}
.sidebar-profile-text small {
    color: var(--text-muted) !important;
}

.sidebar-menu {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 20px;
}

.sidebar .list-group-item {
    background-color: transparent !important;
    color: var(--text-light) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 500;
    letter-spacing: 0.2px;
    padding: 10px 14px;
    margin-bottom: 2px;
    transition: all 0.25s ease;
}

.sidebar .list-group-item:hover {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
    transform: translateX(3px);
}

.sidebar .list-group-item.active {
    background-color: var(--primary) !important;
    color: var(--text-inverse) !important;
}

body.dark-theme .sidebar .list-group-item {
    color: var(--text-light) !important;
}
body.dark-theme .sidebar .list-group-item:hover {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
}
body.dark-theme .sidebar .list-group-item.active {
    background-color: var(--primary) !important;
    color: var(--text-inverse) !important;
}

.sidebar .list-group-item.text-info {
    color: var(--secondary-dark) !important;
}
.sidebar .list-group-item.text-warning {
    color: var(--accent-dark) !important;
}
.sidebar .list-group-item.text-danger {
    color: #c48888 !important;
}

.nav-divider {
    padding: 12px 14px 6px;
}
.nav-divider .small {
    color: var(--text-muted) !important;
    font-size: 0.65rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
    font-weight: 600;
}

/* ==============================================
   6. CARDS - SUAVES Y CÁLIDOS
   ============================================== */

.card,
.card-body,
.card-header,
.card-footer,
.card .table,
.card-stats,
.card-stats .card-body,
.card-stats .card-header {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    border-radius: 16px !important;
}

.card {
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px var(--shadow-color) !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 16px var(--shadow-color) !important;
}

.card-header {
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 18px 24px;
    font-weight: 600;
}

.card-header h5,
.card-header h3 {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.card-footer {
    border-top: 1px solid var(--border-color) !important;
    border-radius: 0 0 16px 16px !important;
    color: var(--text-muted) !important;
}

/* ==============================================
   7. TABLAS - LECTURA CÓMODA
   ============================================== */

.table {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-radius: 12px;
    overflow: hidden;
}

.table tbody tr {
    background-color: var(--bg-card) !important;
    transition: background-color 0.2s ease;
}

.table tbody tr:hover {
    background-color: var(--bg-card-hover) !important;
}

.table thead th {
    background-color: var(--cera-200) !important;
    color: var(--cera-900) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    font-size: 0.75rem !important;
    border: none !important;
    padding: 14px 16px;
}

body.dark-theme .table thead th {
    background-color: var(--cera-800) !important;
    color: var(--cera-200) !important;
}

.table tbody td {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    padding: 14px 16px;
    font-size: 0.9rem;
}

/* ==============================================
   8. LISTAS
   ============================================== */

.list-group-item {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    border-radius: 12px !important;
    margin-bottom: 4px;
    padding: 14px 18px;
    transition: all 0.2s ease;
}

.list-group-item:hover {
    background-color: var(--bg-card-hover) !important;
}

/* ==============================================
   9. MODALES
   ============================================== */

.modal-content {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px var(--shadow-color) !important;
}

.modal-header {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 24px;
}

.modal-footer {
    border-top: 1px solid var(--border-color) !important;
    border-radius: 0 0 20px 20px !important;
}

/* ==============================================
   10. INPUTS - SUAVES Y REDONDEADOS
   ============================================== */

.form-control,
.form-select,
.input-group-text {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    border-radius: 10px !important;
    padding: 10px 14px;
    font-size: 0.95rem;
    transition: all 0.25s ease;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-card) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 3px rgba(196, 168, 140, 0.2) !important;
    outline: none;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7;
}

.form-label {
    color: var(--text-light) !important;
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.input-group-text {
    border-radius: 10px 0 0 10px !important;
}

.input-group .form-control {
    border-radius: 0 10px 10px 0 !important;
}

/* ==============================================
   11. CALENDARIO
   ============================================== */

#calendar {
    min-height: 600px !important;
    height: 100% !important;
    width: 100% !important;
    background-color: var(--bg-card) !important;
    padding: 20px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px var(--shadow-color) !important;
}

.fc {
    height: 100% !important;
    min-height: 550px !important;
    background-color: var(--bg-card) !important;
    font-family: var(--font-family) !important;
}

.fc .fc-view-harness {
    height: auto !important;
    min-height: 500px !important;
    background-color: var(--bg-card) !important;
}

.fc .fc-col-header-cell {
    background-color: var(--cera-200) !important;
    border-color: var(--border-color) !important;
}

body.dark-theme .fc .fc-col-header-cell {
    background-color: var(--cera-800) !important;
}

.fc .fc-col-header-cell-cushion {
    color: var(--cera-900) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    font-size: 0.8rem !important;
    padding: 10px 4px;
}

body.dark-theme .fc .fc-col-header-cell-cushion {
    color: var(--cera-200) !important;
}

.fc .fc-daygrid-day {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.fc .fc-daygrid-day:hover {
    background-color: var(--bg-card-hover) !important;
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: var(--pastel-amarillo) !important;
}

body.dark-theme .fc .fc-daygrid-day.fc-day-today {
    background-color: var(--cera-700) !important;
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    color: var(--cera-900) !important;
    font-weight: 700;
}

.fc .fc-daygrid-day-number {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    padding: 8px;
}

.fc .fc-day-other .fc-daygrid-day-number {
    color: var(--text-muted) !important;
}

.fc-event {
    border-radius: 8px !important;
    border: none !important;
    padding: 3px 8px !important;
    font-weight: 500 !important;
    font-size: 0.8rem;
    background-color: var(--pastel-rosa) !important;
    color: var(--cera-900) !important;
}

.fc .fc-button {
    background-color: var(--primary) !important;
    border-color: var(--primary-dark) !important;
    color: var(--text-inverse) !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    padding: 8px 14px;
    transition: all 0.2s ease;
}

.fc .fc-button:hover {
    background-color: var(--primary-dark) !important;
    transform: translateY(-1px);
}

.fc .fc-toolbar-title {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 1.3rem;
}

/* ==============================================
   12. TARJETAS DE ESTADÍSTICAS
   ============================================== */

.card-stats {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 2px 8px var(--shadow-color) !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
}

.card-stats:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px var(--shadow-color) !important;
}

.card-stats .card-title {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 0.7rem !important;
    margin-bottom: 8px;
}

.card-stats .card-value {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    line-height: 1.2;
}

.card-stats .card-icon {
    color: var(--primary) !important;
    font-size: 1.8rem !important;
    opacity: 0.5 !important;
}

.card-stats .card-sub {
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
    margin-top: 10px;
}

/* Bordes pastel suaves */
.card-stats.primary { border-left: 4px solid var(--pastel-rosa) !important; }
.card-stats.secondary { border-left: 4px solid var(--pastel-azul) !important; }
.card-stats.accent { border-left: 4px solid var(--pastel-lavanda) !important; }
.card-stats.green { border-left: 4px solid var(--pastel-verde) !important; }
.card-stats.orange { border-left: 4px solid var(--pastel-naranja) !important; }
.card-stats.yellow { border-left: 4px solid var(--pastel-amarillo) !important; }

body.dark-theme .card-stats {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 2px 8px var(--shadow-color) !important;
}

body.dark-theme .card-stats .card-title {
    color: var(--text-muted) !important;
}

body.dark-theme .card-stats .card-value {
    color: var(--text-primary) !important;
}

body.dark-theme .card-stats .card-icon {
    color: var(--primary-light) !important;
}

/* ==============================================
   13. FINANZAS Y TESORERÍA
   ============================================== */

.finanzas-stats .card,
.tesoreria-stats .card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px var(--shadow-color) !important;
}

.finanzas-stats .card .card-title,
.tesoreria-stats .card .card-title {
    color: var(--text-muted) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 500;
}

.finanzas-stats .card .card-value,
.tesoreria-stats .card .card-value {
    color: var(--text-primary) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
}

/* ==============================================
   14. BOTONES - REDONDEADOS Y SUAVES
   ============================================== */

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary-dark) !important;
    color: var(--text-inverse) !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    padding: 10px 20px;
    transition: all 0.25s ease !important;
}

.btn-primary:hover {
    background-color: var(--primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(196, 168, 140, 0.3) !important;
}

.btn-secondary {
    background-color: var(--secondary) !important;
    border-color: var(--secondary-dark) !important;
    color: var(--text-inverse) !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    padding: 10px 20px;
    transition: all 0.25s ease !important;
}

.btn-secondary:hover {
    background-color: var(--secondary-dark) !important;
    transform: translateY(-1px);
}

.btn-outline-primary {
    border-color: var(--primary) !important;
    color: var(--primary-dark) !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    padding: 10px 20px;
    transition: all 0.25s ease !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary) !important;
    color: var(--text-inverse) !important;
    transform: translateY(-1px);
}

.btn-outline-danger {
    border-color: #d4a0a0 !important;
    color: #b07070 !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    transition: all 0.25s ease !important;
}

.btn-outline-danger:hover {
    background-color: #d4a0a0 !important;
    color: var(--text-inverse) !important;
}

body.dark-theme .btn-outline-danger {
    border-color: #8a6060 !important;
    color: #c49090 !important;
}

body.dark-theme .btn-outline-danger:hover {
    background-color: #8a6060 !important;
    color: var(--text-inverse) !important;
}

/* ==============================================
   15. BADGES - PASTEL SUAVE
   ============================================== */

.badge {
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.3px;
}

.badge.bg-secondary {
    background-color: var(--cera-300) !important;
    color: var(--cera-800) !important;
}

.badge.bg-success {
    background-color: var(--pastel-verde) !important;
    color: #3a6040 !important;
}

.badge.bg-danger {
    background-color: var(--pastel-rosa) !important;
    color: #7a4040 !important;
}

.badge.bg-warning {
    background-color: var(--pastel-amarillo) !important;
    color: #6a5a30 !important;
}

.badge.bg-info {
    background-color: var(--pastel-azul) !important;
    color: #3a5060 !important;
}

body.dark-theme .badge.bg-secondary {
    background-color: var(--cera-700) !important;
    color: var(--cera-200) !important;
}

body.dark-theme .badge.bg-success {
    background-color: #4a6a50 !important;
    color: #c8e0cc !important;
}

body.dark-theme .badge.bg-danger {
    background-color: #6a4040 !important;
    color: #e8c4c4 !important;
}

body.dark-theme .badge.bg-warning {
    background-color: #6a5a30 !important;
    color: #e8dcb8 !important;
}

body.dark-theme .badge.bg-info {
    background-color: #3a5060 !important;
    color: #b8d4e8 !important;
}

/* ==============================================
   16. TÍTULOS Y TEXTOS
   ============================================== */

h1, h2, h3, h4, h5 {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -0.3px !important;
    line-height: 1.3;
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }

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

a {
    color: var(--primary-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary);
}

body.dark-theme a {
    color: var(--primary-light);
}

body.dark-theme a:hover {
    color: var(--primary);
}

/* ==============================================
   17. ALERTAS - SUAVES
   ============================================== */

.alert {
    border-radius: 12px !important;
    border: none !important;
    padding: 16px 20px;
}

.alert-info {
    background-color: var(--pastel-azul) !important;
    color: #3a5060 !important;
}

.alert-warning {
    background-color: var(--pastel-amarillo) !important;
    color: #6a5a30 !important;
}

.alert-success {
    background-color: var(--pastel-verde) !important;
    color: #3a6040 !important;
}

.alert-danger {
    background-color: var(--pastel-rosa) !important;
    color: #7a4040 !important;
}

.alert-secondary {
    background-color: var(--cera-200) !important;
    color: var(--cera-800) !important;
}

body.dark-theme .alert-info {
    background-color: #2a3a48 !important;
    color: #b8d4e8 !important;
}

body.dark-theme .alert-warning {
    background-color: #3a3420 !important;
    color: #e8dcb8 !important;
}

body.dark-theme .alert-success {
    background-color: #2a3a30 !important;
    color: #b8d8c4 !important;
}

body.dark-theme .alert-danger {
    background-color: #3a2828 !important;
    color: #e8c4c4 !important;
}

body.dark-theme .alert-secondary {
    background-color: var(--cera-800) !important;
    color: var(--cera-200) !important;
}

/* ==============================================
   18. SCROLLBAR - MINIMAL
   ============================================== */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cera-400); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--cera-600); }

body.dark-theme ::-webkit-scrollbar-thumb { background: var(--cera-700); }
body.dark-theme ::-webkit-scrollbar-thumb:hover { background: var(--cera-600); }

/* ==============================================
   19. RESPONSIVE
   ============================================== */

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
    }
    .sidebar.active { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .menu-toggle { display: block; }
    .card-stats .card-value { font-size: 1.6rem !important; }
    .card { border-radius: 12px !important; }
}

/* ==============================================
   20. STAT BOXES
   ============================================== */

.stat-box {
    background-color: var(--bg-card);
    color: var(--text-primary);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px var(--shadow-color);
}

.stat-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow-color);
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 6px;
    margin-bottom: 4px;
}

.stat-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 0;
}

.stat-icon-green { color: var(--pastel-verde); }
.stat-icon-blue { color: var(--pastel-azul); }
.stat-icon-red { color: var(--pastel-rosa); }
.stat-icon-yellow { color: var(--pastel-amarillo); }

body.dark-theme .stat-box {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

body.dark-theme .stat-label { color: var(--text-muted); }
body.dark-theme .stat-value { color: var(--text-primary); }

/* ==============================================
   21. PAGINACIÓN
   ============================================== */

.page-link {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    border-radius: 8px !important;
    margin: 0 2px;
    padding: 8px 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.page-link:hover {
    background-color: var(--bg-card-hover) !important;
    color: var(--primary-dark) !important;
    border-color: var(--primary) !important;
}

.page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary-dark) !important;
    color: var(--text-inverse) !important;
}

/* ==============================================
   22. DROPDOWNS
   ============================================== */

.dropdown-menu {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px var(--shadow-color) !important;
    padding: 8px;
}

.dropdown-item {
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    padding: 8px 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
}

/* ==============================================
   23. FORM CHECK / SWITCH
   ============================================== */

.form-check-input {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    border-radius: 6px;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary-dark);
}

.form-check-label {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* ==============================================
   24. OVERRIDES FINALES - MODO OSCURO
   ============================================== */

body.dark-theme .card,
body.dark-theme .card-body,
body.dark-theme .card-header,
body.dark-theme .card-footer,
body.dark-theme .table,
body.dark-theme .table tbody tr,
body.dark-theme .list-group-item,
body.dark-theme .modal-content,
body.dark-theme .card-stats,
body.dark-theme .finanzas-stats .card,
body.dark-theme .tesoreria-stats .card,
body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark-theme .input-group-text {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

body.dark-theme .table tbody tr:hover {
    background-color: var(--bg-card-hover) !important;
}

body.dark-theme .form-control:focus {
    background-color: var(--bg-card) !important;
    box-shadow: 0 0 0 3px rgba(196, 168, 140, 0.15) !important;
}

body.dark-theme .card-header.bg-primary {
    background-color: var(--primary) !important;
    color: var(--text-inverse) !important;
}

body.dark-theme .table-light,
body.dark-theme .table-light th,
body.dark-theme .table-light td,
body.dark-theme .table-light tr {
    background-color: var(--cera-700) !important;
    color: var(--cera-200) !important;
    border-color: var(--cera-600) !important;
}

body.dark-theme .bg-light {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
}

body.dark-theme .border-bottom {
    border-bottom-color: var(--border-color) !important;
}

body.dark-theme .border-top {
    border-top-color: var(--border-color) !important;
}

/* ==============================================
   25. RESERVA PÚBLICA - HIPER CALM
   ============================================== */

body.dark-theme .alert-secondary.reserva-captcha,
body.dark-theme .reserva-captcha.alert-secondary {
    background-color: var(--cera-800) !important;
    color: var(--cera-200) !important;
    border-color: var(--border-color) !important;
}

body.dark-theme .reserva-captcha .form-label,
body.dark-theme .reserva-captcha label,
body.dark-theme .reserva-captcha-label {
    color: var(--cera-200) !important;
}

body.dark-theme span#captchaPregunta.input-group-text,
body.dark-theme .input-group-text#captchaPregunta,
body.dark-theme #captchaPregunta {
    background-color: var(--primary) !important;
    color: var(--text-inverse) !important;
    border-color: var(--primary-dark) !important;
}

body.dark-theme #captchaRespuesta,
body.dark-theme .reserva-captcha-input {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.dark-theme #captchaRespuesta::placeholder {
    color: var(--text-muted) !important;
}

body.dark-theme .reserva-captcha-hint,
body.dark-theme .reserva-captcha .text-muted {
    color: var(--text-muted) !important;
}

body.dark-theme .reserva-captcha .bi-shield-lock {
    color: var(--cera-200) !important;
}

body.dark-theme .reserva-alert-info,
body.dark-theme .alert-info.reserva-alert-info {
    background-color: #2a3a48 !important;
    color: #b8d4e8 !important;
    border-color: var(--pastel-azul) !important;
}

body.dark-theme .reserva-alert-warning,
body.dark-theme .alert-warning.reserva-alert-warning {
    background-color: #3a3420 !important;
    color: #e8dcb8 !important;
    border-color: var(--pastel-amarillo) !important;
}

body.dark-theme .reserva-alert-warning .bi-shield-check {
    color: var(--pastel-amarillo) !important;
}

/* ==============================================
   26. LOGIN - HIPER CALM
   ============================================== */

.login-card {
    border: 1px solid var(--border-color) !important;
    border-radius: 20px !important;
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 8px 32px var(--shadow-color) !important;
}

.login-header {
    background-color: var(--primary) !important;
    border-bottom: 1px solid var(--primary-dark) !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 2.5rem;
    text-align: center;
    color: var(--text-inverse);
}

.login-header h2 {
    color: var(--text-inverse) !important;
    font-weight: 600 !important;
}

.login-header p {
    color: rgba(255,255,255,0.8) !important;
}

.btn-login {
    background-color: var(--primary) !important;
    border: 1px solid var(--primary-dark) !important;
    color: var(--text-inverse) !important;
    border-radius: 10px !important;
    padding: 0.75rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.btn-login:hover {
    background-color: var(--primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(196, 168, 140, 0.3);
}

/* ==============================================
   27. TEXTOS DE ESTADÍSTICA
   ============================================== */

.stat-number-primary { color: var(--primary-dark) !important; }
.stat-number-secondary { color: var(--secondary-dark) !important; }
.stat-number-success { color: #5a8060 !important; }
.stat-number-danger { color: #8a6060 !important; }

body.dark-theme .stat-number-primary { color: var(--primary-light) !important; }
body.dark-theme .stat-number-secondary { color: var(--secondary-light) !important; }
body.dark-theme .stat-number-success { color: #b8d8c4 !important; }
body.dark-theme .stat-number-danger { color: #e8c4c4 !important; }

/* ==============================================
   SIDEBAR AVATAR - TAMAÑO CORRECTO
   ============================================== */

/* Avatar pequeño en el sidebar */
.sidebar-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--border-color) !important;
    flex-shrink: 0 !important;
}

/* Placeholder cuando no hay foto */
.sidebar-avatar-placeholder {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--bg-card-hover) !important;
    border: 2px solid var(--border-color) !important;
    flex-shrink: 0 !important;
}

.sidebar-avatar-placeholder i {
    font-size: 1.5rem !important;
    color: var(--text-muted) !important;
    line-height: 1 !important;
}

/* Ajuste para el perfil en el sidebar */
.sidebar-profile-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.sidebar-profile-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.sidebar-profile-text h6 {
    font-size: 0.9rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sidebar-profile-text small {
    font-size: 0.7rem !important;
    display: block !important;
}

/* Modo oscuro */
body.dark-theme .sidebar-avatar {
    border-color: var(--border-color) !important;
}

body.dark-theme .sidebar-avatar-placeholder {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
}

body.dark-theme .sidebar-avatar-placeholder i {
    color: var(--text-muted) !important;
}

/* ==============================================
   FIN - HIPER CALM CERA & CREMA EDITION
   ============================================== */
/* ==============================================
   CARD STATS - BORDES PARA MODO OSCURO
   ============================================== */

body.dark-theme .card-stats.primary {
    border-left: 4px solid #e8a0a0 !important;
    border-left-style: solid !important;
}
body.dark-theme .card-stats.secondary {
    border-left: 4px solid #7ab8d8 !important;
    border-left-style: solid !important;
}
body.dark-theme .card-stats.accent {
    border-left: 4px solid #b898c8 !important;
    border-left-style: solid !important;
}
body.dark-theme .card-stats.green {
    border-left: 4px solid #7ac89a !important;
    border-left-style: solid !important;
}
body.dark-theme .card-stats.orange {
    border-left: 4px solid #e8b888 !important;
    border-left-style: solid !important;
}
body.dark-theme .card-stats.yellow {
    border-left: 4px solid #e8d898 !important;
    border-left-style: solid !important;
}
body.dark-theme .card-stats.success {
    border-left: 4px solid #7ac89a !important;
    border-left-style: solid !important;
}
body.dark-theme .card-stats.info {
    border-left: 4px solid #7ab8d8 !important;
    border-left-style: solid !important;
}
body.dark-theme .card-stats.warning {
    border-left: 4px solid #e8d898 !important;
    border-left-style: solid !important;
}
body.dark-theme .card-stats.danger {
    border-left: 4px solid #e8a0a0 !important;
    border-left-style: solid !important;
}

body.dark-theme .card-stats.primary {
    box-shadow: inset 0 0 20px rgba(232, 160, 160, 0.05) !important;
}
body.dark-theme .card-stats.secondary {
    box-shadow: inset 0 0 20px rgba(122, 184, 216, 0.05) !important;
}
body.dark-theme .card-stats.green {
    box-shadow: inset 0 0 20px rgba(122, 200, 154, 0.05) !important;
}
body.dark-theme .card-stats.yellow {
    box-shadow: inset 0 0 20px rgba(232, 216, 152, 0.05) !important;
}
body.dark-theme .card-stats.accent {
    box-shadow: inset 0 0 20px rgba(184, 152, 200, 0.05) !important;
}
body.dark-theme .card-stats.orange {
    box-shadow: inset 0 0 20px rgba(232, 184, 136, 0.05) !important;
}