/* --- Variables de Control para el Resumen --- */
:root, [data-bs-theme="light"] {
    /* Forzamos que en modo claro el fondo sea tu Navy específico */
    --summary-bg: #3a3939; 
    --summary-text: #ffffff;
    --summary-border: rgba(255,255,255,0.1);
}

[data-bs-theme="dark"] {
    /* En modo oscuro, cambia al color que pediste */
    --summary-bg: #0f172a; 
    --summary-text: #f1f5f9;
    --summary-border: var(--theme-border);
}

/* Esta clase es la que aplicaremos al div */
.card-resumen-dinamico {
    background-color: var(--summary-bg) !important;
    color: var(--summary-text) !important;
    transition: all 0.3s ease;
    border: 1px solid var(--summary-border);
}

/* Ajuste para que los textos secundarios no se pierdan */
.card-resumen-dinamico .text-white-50, 
.card-resumen-dinamico .text-light {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Aseguramos que las líneas divisorias se vean en ambos modos */
.card-resumen-dinamico .border-secondary {
    border-color: rgba(255, 255, 255, 0.1) !important;
}



/* --- Variables Globales y Modo Oscuro --- */
        :root, [data-bs-theme="light"] {
            --bs-primary-custom: #00a7e1;
            --bs-navy: #1e130f;
            --bs-circle-fast: #dceffb;
            --theme-bg: #f2fafc;
            --theme-surface: #ffffff;
            --theme-text: #0f172a;
            --theme-text-muted: #64748b;
            
            --theme-font-label-alumno:#00a7e1;
            --theme-border: #e2e8f0;
            --theme-hover: #f8fafc;
            
            --alert-sys-bg: #dceffb;
            --checkbox-bg: #ffffff;
            --checkbox-border: #cbd5e1;
        }

        [data-bs-theme="dark"] {
            --theme-bg: #10221f;
            --theme-surface: #0f172a; /* Slate 900 */
            --theme-text: #f1f5f9;
            --theme-text-muted: #94a3b8;
            --theme-border: #1e293b;
            --theme-hover: rgba(30, 41, 59, 0.3);
            --theme-font-label-alumno:#00a7e1;
            --alert-sys-bg: rgba(30, 41, 59, 0.5);
            --checkbox-bg: #1e293b;
            --checkbox-border: #475569;
        }

        body { 
            font-family: 'Lexend', sans-serif; 
            background-color: var(--theme-bg);
            color: var(--theme-text);
            transition: background-color 0.3s, color 0.3s;
        }

        /* --- Utilidades y Animaciones (Reemplazo de Tailwind) --- */
        .text-primary-custom { color: var(--bs-primary-custom) !important; }
        .bg-primary-custom { background-color: var(--bs-primary-custom) !important; }
        .text-navy { color: var(--bs-navy) !important; }
        .bg-navy { background-color: var(--bs-navy) !important; }
        
        /*.bg-primary-subtle-custom { background-color: rgba(19, 236, 200, 0.2) !important; }*/
         .bg-primary-subtle-custom { background-color: var(--bs-circle-fast) !important; }
        
        
        /* Animaciones */
        .hover-scale { transition: transform 0.2s ease-in-out; }
        .hover-scale:hover { transform: scale(1.05); }
        
        .hover-brightness { transition: filter 0.2s ease-in-out; }
        .hover-brightness:hover { filter: brightness(1.05); }
        
        .transition-colors { transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; }

        /* --- Componentes --- */
        .card-custom {
            background-color: var(--theme-surface);
            border: 1px solid var(--theme-border);
        }

        .header-nav a {
            color: var(--theme-text-muted);
            font-weight: 500;
        }
        .header-nav a:hover { color: var(--bs-primary-custom); }

        .form-control-custom {
            height: 3rem;
            background-color: var(--theme-surface);
            color: var(--theme-text);
            border: 1px solid var(--theme-border);
        }
        .form-control-custom:focus {
            border-color: var(--bs-primary-custom);
            box-shadow: 0 0 0 0.25rem rgba(19, 236, 200, 0.25);
            background-color: var(--theme-surface);
            color: var(--theme-text);
        }

        .alert-custom {
            background-color: var(--alert-sys-bg);
            border-radius: 0.5rem;
            padding: 0.75rem;
        }
        .alert-border-primary { border-left: 4px solid var(--bs-primary-custom); }
        .alert-border-navy { border-left: 4px solid var(--bs-navy); }
        [data-bs-theme="dark"] .alert-border-navy { border-left-color: var(--theme-text); }

        /* Tabla */
        .table-custom { color: var(--theme-text); }
        .table-custom thead th {
            background-color: var(--alert-sys-bg);
            color: var(--theme-text-muted);
            border-bottom: 1px solid var(--theme-border);
        }
        .table-custom tbody tr { border-bottom: 1px solid var(--theme-border); }
        .table-custom tbody tr:hover { background-color: var(--theme-hover); }
        .table-custom td { background-color: transparent; color: inherit; }

        /* Botón Checkout */
        /*.btn-checkout {
            background-color: var(--bs-primary-custom);
            color: var(--bs-navy);
            box-shadow: 0 10px 15px -3px rgba(19, 236, 200, 0.2);
        }
        */

        /* Checkbox Personalizado */
        .custom-checkbox {
            appearance: none;
            width: 1.25rem;
            height: 1.25rem;
            border: 2px solid var(--checkbox-border);
            border-radius: 0.25rem;
            background-color: var(--checkbox-bg);
            cursor: pointer;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        /* Checkbox en Modo Luz (Naranja) */
        .custom-checkbox:checked {
            background-color: #E77955; 
            border-color: #E77955;
        }
        .custom-checkbox:checked::after {
            content: 'check';
            font-family: 'Material Symbols Outlined';
            position: absolute;
            color: #000000; 
            font-size: 1rem;
            font-weight: bold;
        }

        /* Proteger el Modo Oscuro (Regresa al Azul) */
        [data-bs-theme="dark"] .custom-checkbox:checked {
            background-color: var(--bs-primary-custom);
            border-color: var(--bs-primary-custom);
        }

        /* ==========================================
   ESTILOS DEL ENCABEZADO (MODO LUZ Y OSCURO)
   ========================================== */

/* --- 1. MODO LUZ (Azul con sombra Naranja) --- */
.header-main {
    background-color: var(--bs-primary-custom);
    border-bottom: 3px solid var(--bs-action-color) !important;
    box-shadow: 0 6px 1px 0px #E77955;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.header-main .header-nav a {
    color: rgba(255, 255, 255, 0.9) !important;
}
.header-main .header-nav a:hover {
    color: #ffffff !important;
}
.header-main .btn-menu-mobile { color: white; }
.header-main .logo-img { filter: brightness(0) invert(1); } /* Logo blanco */
.header-main .btn-theme-toggle {
    border: 1px solid rgba(255,255,255,0.4); 
    color: white; 
    background: rgba(255,255,255,0.1);
}

/* --- 2. MODO OSCURO (Intacto / Carbón Elegante) --- */
[data-bs-theme="dark"] .header-main {
    background-color: var(--theme-surface) !important; /* Regresa a tu fondo oscuro original */
    border-bottom: 1px solid var(--theme-border) !important; /* Borde gris sutil */
    box-shadow: none !important; /* Quitamos la sombra naranja */
}
[data-bs-theme="dark"] .header-main .header-nav a {
    color: var(--theme-text-muted) !important; /* Textos grisáceos */
}
[data-bs-theme="dark"] .header-main .header-nav a:hover {
    color: var(--bs-primary-custom) !important; /* Brillan en azul al pasar el mouse */
}
[data-bs-theme="dark"] .header-main .btn-menu-mobile { color: var(--theme-text); }
[data-bs-theme="dark"] .header-main .logo-img { filter: brightness(0) invert(1); } /* Logo sigue siendo blanco para contrastar */
[data-bs-theme="dark"] .header-main .btn-theme-toggle {
    border: 1px solid var(--theme-border); 
    color: var(--theme-text); 
    background: transparent;
}

/* ==========================================
   TARJETA: AVISOS DEL SISTEMA (Panel Derecho)
   ========================================== */

/* --- 1. MODO LUZ (Colores Durazno/Naranja) --- */
.aviso-sistema-box {
    background-color: #ffdfd4 !important;
    border: 1px solid #f9a185 !important;
    border-left: 4px solid #f9a185 !important; /* Franja izquierda distintiva */
}

/* --- 2. MODO OSCURO (Intacto / Azul original) --- */
[data-bs-theme="dark"] .aviso-sistema-box {
    background-color: var(--alert-sys-bg) !important;
    border: 1px solid transparent !important;
    border-left: 4px solid var(--bs-primary-custom) !important;
}

/* ==========================================
   TARJETA: ¿NECESITAS AYUDA? (Debajo del Checkout)
   ========================================== */

/* --- 1. MODO LUZ (Fondo Naranja y Texto Negro) --- */
.box-necesitas-ayuda {
    background-color: #E77955 !important;
    border: 1px dashed #000000 !important; /* Borde punteado negro para que combine bien */
}
.box-necesitas-ayuda .txt-ayuda-titulo,
.box-necesitas-ayuda .txt-ayuda-sub,
.box-necesitas-ayuda .material-symbols-outlined {
    color: #000000 !important; /* Textos e ícono en negro puro */
}

/* --- 2. MODO OSCURO (Intacto / Regresa a la normalidad) --- */
[data-bs-theme="dark"] .box-necesitas-ayuda {
    background-color: var(--theme-surface) !important;
    border: 1px dashed var(--theme-border) !important;
}
[data-bs-theme="dark"] .box-necesitas-ayuda .txt-ayuda-titulo,
[data-bs-theme="dark"] .box-necesitas-ayuda .material-symbols-outlined {
    color: var(--theme-text) !important; /* Blanco/Gris claro */
}
[data-bs-theme="dark"] .box-necesitas-ayuda .txt-ayuda-sub {
    color: var(--theme-text-muted) !important; /* Gris atenuado */
}