/* =========================================
   UNI-GURU PREMIUM DARK MODE THEME
   ========================================= */

:root {
    --dm-bg-main: #0F172A;
    /* Deep Blue-Black (Slate 900) - Much richer than flat black */
    --dm-bg-card: #1E293B;
    /* Lighter Slate (Slate 800) - For cards and sidebars */
    --dm-bg-input: #334155;
    /* Slate 700 - For inputs */
    --dm-text-primary: #F8FAFC;
    /* Slate 50 - Almost White */
    --dm-text-secondary: #94A3B8;
    /* Slate 400 - Muted Grey */
    --dm-border: #334155;
    /* Slate 700 - Subtle borders */
    --dm-accent: #6366F1;
    /* Indigo 500 - Vibrant but not neon */
    --dm-accent-hover: #4F46E5;
    /* Indigo 600 */
    --dm-bg-hover: #27354f;
    --dm-success-bg: #14532d;
    --dm-success-text: #4ade80;
    --dm-warning-bg: #713f12;
    --dm-warning-border: #854d0e;
    --dm-warning-text: #fde047;
}

/* --- BASE LAYOUT --- */
body.dark-mode {
    background-color: var(--dm-bg-main) !important;
    color: var(--dm-text-primary) !important;
    --bg-color: var(--dm-bg-main);
    --text-color: var(--dm-text-primary);
    --text-muted: var(--dm-text-secondary);
    --text-secondary: var(--dm-text-secondary);
    --card-bg: var(--dm-bg-card);
    --hover-bg: var(--dm-bg-hover);
    --border-color: var(--dm-border);
    --primary-color: var(--dm-accent);
    --success-bg: var(--dm-success-bg);
    --success-color: var(--dm-success-text);
    --warning-bg: var(--dm-warning-bg);
    --warning-border: var(--dm-warning-border);
    --warning-text: var(--dm-warning-text);
}

body.dark-mode .profile-main-container,
body.dark-mode .profile-container,
body.dark-mode .main-content {
    background-color: var(--dm-bg-main) !important;
}

/* --- HEADER --- */
body.dark-mode .header,
body.dark-mode .profile-header {
    background-color: var(--dm-bg-card) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .brand-text,
body.dark-mode .profile-header .title {
    color: var(--dm-text-primary) !important;
    text-shadow: none !important;
}

body.dark-mode .logo {
    /* Preserve original logo colors; add thin white outline for dark-bg visibility */
    filter: drop-shadow(1px 0 0 white)
            drop-shadow(0 1px 0 white)
            drop-shadow(-1px 0 0 white)
            drop-shadow(0 -1px 0 white) !important;
}

/* --- SIDEBAR --- */
body.dark-mode .profile-sidebar {
    background-color: var(--dm-bg-card) !important;
    border-right: 1px solid var(--dm-border) !important;
}

body.dark-mode .sidebar-header {
    border-bottom: 1px solid var(--dm-border) !important;
}

body.dark-mode .sidebar-header h3 {
    color: var(--dm-text-primary) !important;
}

/* Navigation Links */
body.dark-mode .sidebar-nav a {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .sidebar-nav a:hover,
body.dark-mode .sidebar-nav li.active a {
    background-color: rgba(99, 102, 241, 0.15) !important;
    /* Subtle accent bg */
    color: var(--dm-accent) !important;
    border-radius: 8px;
}

body.dark-mode .sidebar-nav a img {
    filter: invert(1) brightness(2) !important;
    /* Make icons white/bright */
}

body.dark-mode .sidebar-nav li.active a img {
    filter: sepia(1) saturate(5) hue-rotate(220deg) brightness(1.2) !important;
    /* Attempt to colorize icon to blue/purple */
}


/* --- FORMS & CARDS --- */
body.dark-mode .profile-content {
    background-color: var(--dm-bg-main) !important;
}

body.dark-mode .form-section,
body.dark-mode .card,
body.dark-mode .value-card,
body.dark-mode .service-card {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
    color: var(--dm-text-primary) !important;
}

/* Headings in cards */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
    /* For bottom borders in titles */
}

/* --- INPUTS --- */
body.dark-mode .input-group label {
    color: var(--dm-text-secondary) !important;
    font-weight: 500;
}

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="file"],
body.dark-mode select,
body.dark-mode textarea {
    background-color: var(--dm-bg-input) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
    padding: 12px 16px;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3) !important;
    outline: none;
}

/* --- BUTTONS --- */
body.dark-mode .btn-submit,
body.dark-mode .hero-btn {
    background-color: var(--dm-accent) !important;
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.39) !important;
}

body.dark-mode .btn-submit:hover {
    background-color: var(--dm-accent-hover) !important;
    transform: translateY(-2px);
}

body.dark-mode .btn-back {
    color: var(--dm-accent) !important;
}

/* --- MISC --- */
body.dark-mode footer {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-secondary) !important;
    border-top: 1px solid var(--dm-border) !important;
}

/* Eye Icon fix */
body.dark-mode .toggle-password {
    filter: invert(1);
    opacity: 0.7;
}

body.dark-mode .ranking-stats {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .ranking-position {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Better readability for gold/silver/bronze numbers */
}

/* Ensure any spans inside ranking item are readable */
body.dark-mode .ranking-item span,
body.dark-mode .ranking-item p {
    color: var(--dm-text-secondary);
}

/* Highlighted number specific override if needed */
body.dark-mode .ranking-position {
    font-weight: 800;
    /* Make it pop */
}

/* --- ICONS & SKELETONS --- */

/* 1. Inversión SOLO para íconos monocromáticos en contenedores específicos */
body.dark-mode .sidebar-nav a img,
body.dark-mode .profile-header-right img:not(#mobileHeaderProfilePic),
body.dark-mode .btn-upload-icon img,
body.dark-mode .file-input-label img,
body.dark-mode .toggle-filters-btn img,
body.dark-mode .mobile-profile-menu-btn img:not(#mobileHeaderProfilePic) {
    filter: brightness(0) invert(1) !important;
}

/* Fallback: íconos dentro de assets/icons/ que son monocromáticos,
   pero excluyendo GIFs, redes sociales, logos y fotos de perfil */
body.dark-mode img[src*="assets/icons/"]:not([src$=".gif"]):not([src*="whatsapp"]):not([src*="facebook"]):not([src*="gmail"]):not([src*="LOGO"]):not(#profileImage):not(#mobileHeaderProfilePic):not(.rank-avatar):not(.guru-avatar):not(.user-avatar) {
    filter: brightness(0) invert(1) !important;
}

/* 2. REGLA DE ORO: Inmunidad total para imágenes con color propio */
body.dark-mode img[src$=".gif"],
body.dark-mode img[src*="whatsapp"],
body.dark-mode img[src*="facebook"],
body.dark-mode img[src*="gmail"],
body.dark-mode img[src*="LOGO"]:not(.logo),
body.dark-mode #profileImage,
body.dark-mode #mobileHeaderProfilePic,
body.dark-mode .rank-avatar,
body.dark-mode .mini-user-card img,
body.dark-mode .receipt-image,
body.dark-mode .lightbox-image,
body.dark-mode .guru-profile-info img,
body.dark-mode .user-avatar,
body.dark-mode .guru-avatar,
body.dark-mode img[src*="fotoPerfil"],
body.dark-mode img[src*="firebasestorage"] {
    filter: none !important;
}

body.dark-mode .skeleton {
    background: linear-gradient(90deg, var(--card-bg) 25%, var(--hover-bg) 50%, var(--card-bg) 75%) !important;
    background-size: 200% 100% !important;
}

/* =========================================
   CORRECCIONES DE CONTRASTE Y LEGIBILIDAD
   ========================================= */

/* 1. Modales de Alerta y Confirmación (de common.css y JS) */
body.dark-mode .modal-content,
body.dark-mode .alert-modal-content {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .alert-modal-content p,
body.dark-mode .modal-content p,
body.dark-mode .modal-content label {
    color: var(--dm-text-secondary) !important;
}

/* 2. Botones de Subida de Archivos y Formularios */
body.dark-mode .btn-upload-icon {
    background-color: var(--dm-bg-input) !important;
    border: 2px dashed var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .btn-upload-icon span {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .btn-upload-icon:hover {
    background-color: var(--dm-bg-hover) !important;
    border-color: var(--dm-accent) !important;
}

/* 3. Corrección de textos oscuros forzados en línea (JS inyectado) */
body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color: #555"],
body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#333"],
body.dark-mode [style*="color:#555"],
body.dark-mode [style*="color:#666"],
body.dark-mode [style*="color: var(--text-muted)"],
body.dark-mode [style*="color: var(--text-color)"] {
    color: var(--dm-text-secondary) !important;
}

/* Titulares con estilos en línea */
body.dark-mode h1[style], body.dark-mode h2[style],
body.dark-mode h3[style], body.dark-mode h4[style],
body.dark-mode h5[style], body.dark-mode strong[style] {
    color: var(--dm-text-primary) !important;
}

/* 4. Corrección de fondos claros forzados en línea (JS inyectado) */
body.dark-mode [style*="background: var(--hover-bg, #f8fafc)"],
body.dark-mode [style*="background-color: var(--hover-bg)"],
body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background: #f1f5f9"],
body.dark-mode [style*="background: rgba(255, 255, 255"] {
    background-color: var(--dm-bg-hover) !important;
    border-color: var(--dm-border) !important;
}

/* Banners de cancelación (rojos y azules pasteles del administrador) */
body.dark-mode [style*="background: linear-gradient(135deg, #fef2f2"],
body.dark-mode [style*="background: linear-gradient(135deg, #f0f9ff"] {
    background: var(--dm-bg-input) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode [style*="color: #b91c1c"],
body.dark-mode [style*="color: #991b1b"],
body.dark-mode [style*="color: #7f1d1d"] {
    color: #fca5a5 !important;
}

body.dark-mode [style*="color: #1e40af"],
body.dark-mode [style*="color: #1e3a5f"] {
    color: #93c5fd !important;
}

/* =========================================
   TARJETAS DE SOLICITUDES Y DASHBOARD
   ========================================= */

/* 1. Fondos de las Tarjetas Dinámicas */
body.dark-mode .request-card,
body.dark-mode .ranking-card,
body.dark-mode .verification-card,
body.dark-mode .payment-card,
body.dark-mode .kpi-card,
body.dark-mode .role-section-card,
body.dark-mode .mini-user-card {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
}

/* 2. Cabeceras, Pies y Separadores internos */
body.dark-mode .request-header,
body.dark-mode .request-footer,
body.dark-mode .detail-header {
    border-color: var(--dm-border) !important;
}

body.dark-mode .request-title {
    color: var(--dm-text-primary) !important;
}

/* 3. Textos Secundarios (Descripciones, fechas, estados vacíos) */
body.dark-mode .request-description,
body.dark-mode .request-date,
body.dark-mode .request-type,
body.dark-mode .empty-requests p,
body.dark-mode .kpi-card small {
    color: var(--dm-text-secondary) !important;
}

/* 4. Botones de Acción Internos (Ver, Cancelar, Aceptar) */
body.dark-mode .action-btn,
body.dark-mode .btn-view-receipt,
body.dark-mode .btn-expand-role {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid var(--dm-border) !important;
}

body.dark-mode .action-btn:hover,
body.dark-mode .btn-view-receipt:hover,
body.dark-mode .btn-expand-role:hover {
    background-color: var(--dm-bg-hover) !important;
    border-color: var(--dm-accent) !important;
}

body.dark-mode .btn-new-request {
    background-color: var(--dm-accent) !important;
    color: #ffffff !important;
    border: none !important;
}

body.dark-mode .btn-new-request:hover {
    background-color: var(--dm-accent-hover) !important;
}

/* 5. Ajuste de Bordes Laterales por Estado */
body.dark-mode .status-pending-card { border-left: 4px solid #f59e0b !important; }
body.dark-mode .status-completed-card { border-left: 4px solid #10b981 !important; }
body.dark-mode .status-in-progress-card { border-left: 4px solid #3b82f6 !important; }
body.dark-mode .status-waiting-card { border-left: 4px solid #8b5cf6 !important; }
body.dark-mode .status-cancelled-card { border-left: 4px solid #ef4444 !important; }

/* 6. Contenedores vacíos */
body.dark-mode .empty-requests {
    background-color: transparent !important;
    border: none !important;
}

/* =========================================
   ADAPTACIÓN GLOBAL PARA LA PÁGINA PRINCIPAL (INDEX.HTML)
   ========================================= */

/* 1. Forzar fondos oscuros en todas las secciones estructurales del Landing Page */
body.dark-mode main,
body.dark-mode section,
body.dark-mode article,
body.dark-mode .hero-section,
body.dark-mode .about-section,
body.dark-mode .services-section,
body.dark-mode .categories-section,
body.dark-mode .carousel-container,
body.dark-mode .slider-container {
    background-color: var(--dm-bg-main) !important;
}

/* 2. Tarjetas específicas del Landing Page (Grid de Materias, Testimonios, etc.) */
body.dark-mode .slide-card,
body.dark-mode .carrusel-item,
body.dark-mode .materia-card,
body.dark-mode .category-card,
body.dark-mode .service-item,
body.dark-mode .info-box,
body.dark-mode .testimonial-card,
body.dark-mode .testimonial-glass,
body.dark-mode .faq-item,
body.dark-mode .stat-item,
body.dark-mode [class*="-card"],
body.dark-mode [class*="-box"] {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease;
}

/* 3. Textos y Encabezados en el Landing Page */
body.dark-mode section h1,
body.dark-mode section h2,
body.dark-mode section h3,
body.dark-mode section h4 {
    color: var(--dm-text-primary) !important;
}

body.dark-mode section p,
body.dark-mode section span:not(.status-badge):not(.badge):not(.notification-badge),
body.dark-mode section li {
    color: var(--dm-text-secondary) !important;
}

/* 4. Overrides de colores duros inyectados en la página principal */
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background-color: #ffffff"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background: #fff"] {
    background-color: var(--dm-bg-card) !important;
}

/* 5. Proteger imágenes con color dentro de tarjetas del Landing */
body.dark-mode .slide-card img,
body.dark-mode .carrusel-item img,
body.dark-mode .category-card img,
body.dark-mode [class*="-card"] img:not([src*="assets/icons/"]) {
    filter: none !important;
}

/* 6. FAQ details/summary styling */
body.dark-mode .faq-summary {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .faq-content,
body.dark-mode .faq-content p {
    color: var(--dm-text-secondary) !important;
}

/* 7. Stats section */
body.dark-mode .stat-number {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .stat-label {
    color: var(--dm-text-secondary) !important;
}

/* 8. CTA sections */
body.dark-mode .final-cta,
body.dark-mode .cta-container {
    background-color: var(--dm-bg-card) !important;
}

/* =========================================
   CORRECCIONES ESPECÍFICAS LANDING PAGE (INDEX.HTML)
   ========================================= */

/* 1. Títulos de Sección (.section-title) */
body.dark-mode .section-title {
    color: var(--dm-text-primary) !important;
    text-shadow: none !important;
}

/* 2. Tarjetas/Pasos de "Cómo Funciona" (.step) */
body.dark-mode .step {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    padding: 20px !important;
    border-radius: 12px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode .step h3 {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .step p {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .step:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6) !important;
    border-color: var(--dm-accent) !important;
}

/* 3. Llamado a la Acción Final (.final-cta) */
body.dark-mode .final-cta {
    background: var(--dm-bg-card) !important;
    background-image: linear-gradient(to right, var(--dm-bg-main), var(--dm-bg-card)) !important;
    border-top: 1px solid var(--dm-border) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .final-cta h2 {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .final-cta p {
    color: var(--dm-text-secondary) !important;
}

/* 4. Iconos y Números dentro de los pasos (.step) */
body.dark-mode .step-number,
body.dark-mode .step-icon {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-accent) !important;
    border: 1px solid var(--dm-border) !important;
}

/* =========================================
   ARREGLO DEFINITIVO: FONDOS DE SECCIONES EN LANDING PAGE
   ========================================= */

/* 1. Atacar los contenedores principales que se resisten al modo oscuro */
body.dark-mode .services-section,
body.dark-mode .about-section,
body.dark-mode .features,
body.dark-mode .our-services,
body.dark-mode section:has(.section-title),
body.dark-mode .section-title-wrapper,
body.dark-mode .container-fluid {
    background-color: var(--dm-bg-main) !important;
    background-image: none !important;
}

/* 2. Asegurar la legibilidad y estructura del título */
body.dark-mode .section-title {
    color: var(--dm-text-primary) !important;
    background-color: transparent !important;
    position: relative;
    z-index: 2;
}

/* 3. Arreglar elementos decorativos (líneas o subrayados de los títulos) */
body.dark-mode .section-title::after,
body.dark-mode .section-title::before {
    background-color: var(--dm-accent) !important;
}

/* 4. Capturar cualquier contenedor genérico con fondo blanco en línea */
body.dark-mode div[style*="background: white"],
body.dark-mode div[style*="background-color: white"],
body.dark-mode div[style*="background: #fff"] {
    background-color: var(--dm-bg-main) !important;
}

/* =========================================
   BORDES Y SEPARACIÓN DE SECCIONES (LANDING PAGE)
   ========================================= */

/* Aplicar el 'bordecito blanco', redondeo y sombra a las secciones principales */
body.dark-mode .services-section,
body.dark-mode .about-section,
body.dark-mode .features,
body.dark-mode .our-services,
body.dark-mode section:has(.section-title) {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background-color: var(--dm-bg-card) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    overflow: hidden !important;
}

/* Ajuste responsivo: En móviles, evitar que la sección pegue a los bordes */
@media (max-width: 768px) {
    body.dark-mode .services-section,
    body.dark-mode .about-section,
    body.dark-mode .features,
    body.dark-mode .our-services,
    body.dark-mode section:has(.section-title) {
        margin-left: 15px !important;
        margin-right: 15px !important;
        border-radius: 12px !important;
    }
}

/* =========================================
   EXCEPCIÓN PARA EL ÍCONO DE NOTIFICACIONES
   ========================================= */

/* Forzar a que el ícono de notificaciones mantenga su color original en modo oscuro */
body.dark-mode .notifications-btn img,
body.dark-mode .notifications-btn svg,
body.dark-mode .notifications-btn i {
    filter: none !important;
    color: initial !important;
}

/* Asegurar que el fondo del botón se mantenga limpio */
body.dark-mode .notifications-btn {
    background-color: transparent !important;
    border: none !important;
}

/* =========================================
   SECCIÓN DE ESTADÍSTICAS (.stats-section)
   ========================================= */

/* 1. Fondo de la sección completa */
body.dark-mode .stats-section {
    background-color: var(--dm-bg-main) !important;
    background-image: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 2. Recuadros internos (Tarjetas de estadísticas) */
body.dark-mode .stats-section .stat-box,
body.dark-mode .stats-section .stat-item,
body.dark-mode .stats-section [class*="stat-"],
body.dark-mode .stats-section > div > div {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    padding: 25px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Efecto hover interactivo */
body.dark-mode .stats-section [class*="stat-"]:hover,
body.dark-mode .stats-section > div > div:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
    border-color: var(--dm-accent) !important;
}

/* 3. Textos y Números */
body.dark-mode .stats-section h2,
body.dark-mode .stats-section h3,
body.dark-mode .stats-section .stat-number {
    color: var(--dm-accent) !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .stats-section p,
body.dark-mode .stats-section .stat-label,
body.dark-mode .stats-section span {
    color: var(--dm-text-secondary) !important;
}

/* 4. Rescate de iconos dentro de las estadísticas */
body.dark-mode .stats-section i,
body.dark-mode .stats-section .icon {
    color: var(--dm-text-primary) !important;
}

/* =========================================
   FORMULARIOS EXTERNOS (Solicitud, Contacto, Postulación)
   ========================================= */

/* 1. Cabecera Minimalista (Header de regresar) */
body.dark-mode .form-header-minimal {
    background-color: var(--dm-bg-card) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .form-header-minimal .brand-text {
    color: var(--dm-text-primary) !important;
}

/* 2. Contenedores de los Formularios */
body.dark-mode .solicitud-form-wrapper,
body.dark-mode .contact-form-wrapper,
body.dark-mode .postula-form-wrapper {
    background-color: var(--dm-bg-card) !important;
    border-left: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.6) !important;
}

/* 3. Títulos y Textos en los formularios */
body.dark-mode .form-main-title,
body.dark-mode .form-main-subtitle {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .form-main-subtitle {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .form-divider {
    border-bottom: 1px solid var(--dm-border) !important;
}

/* 4. Elementos combinados (Input con Símbolo de $) */
body.dark-mode .input-con-simbolo span {
    background-color: var(--dm-bg-main) !important;
    border: 1px solid var(--dm-border) !important;
    border-right: none !important;
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .input-con-simbolo input {
    border-left: 1px solid var(--dm-border) !important;
}

/* 5. Fondo oscuro de la vista completa */
body.dark-mode .solicitud-layout-master,
body.dark-mode .contact-layout-master,
body.dark-mode .postula-layout-master {
    background-color: var(--dm-bg-main) !important;
}

/* 6. Textos sobre las imágenes de la barra lateral izquierda */
body.dark-mode .sidebar-title,
body.dark-mode .sidebar-subtitle,
body.dark-mode .badge-item div,
body.dark-mode .info-item div {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* 7. Modal de Términos y Condiciones (Solicitud) */
body.dark-mode .terminos-text {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .terminos-text h4,
body.dark-mode .terminos-text strong {
    color: var(--dm-text-primary) !important;
}

/* =========================================
   BOTÓN DE CERRAR SESIÓN (#logoutBtn)
   ========================================= */

/* 1. Asegurar la legibilidad del texto del botón */
body.dark-mode #logoutBtn,
body.dark-mode a#logoutBtn,
body.dark-mode button#logoutBtn {
    color: var(--dm-text-primary) !important;
    background-color: transparent !important;
    transition: all 0.3s ease !important;
}

/* 2. Forzar la visibilidad del ícono (ic_cerrar_sesion.png) */
body.dark-mode #logoutBtn img,
body.dark-mode #logoutBtn svg,
body.dark-mode #logoutBtn i {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Efecto Hover Premium (Rojizo sutil para indicar acción de salida) */
body.dark-mode #logoutBtn:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border-radius: 8px !important;
}

body.dark-mode #logoutBtn:hover img {
    filter: brightness(0) saturate(100%) invert(73%) sepia(35%) saturate(1376%) hue-rotate(313deg) brightness(101%) contrast(98%) !important;
}

/* =========================================
   VISTAS DINÁMICAS Y PANELES DE ADMINISTRACIÓN
   (Perfil, Pagos, Tickets, Usuarios, Top 10, etc.)
   ========================================= */

/* 1. Cabeceras de Sección Dinámicas */
body.dark-mode .profile-requests-header,
body.dark-mode .expanded-header,
body.dark-mode .admin-header {
    background-color: var(--dm-bg-card) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .profile-requests-header h1,
body.dark-mode .profile-requests-header h2,
body.dark-mode .profile-requests-header h3,
body.dark-mode .expanded-header h2,
body.dark-mode .expanded-header h3 {
    color: var(--dm-text-primary) !important;
}

/* 2. Tarjetas y Cajas inyectadas dinámicamente */
body.dark-mode #dynamicContent .card,
body.dark-mode #dynamicContent [class*="-card"],
body.dark-mode #dynamicContent .form-section,
body.dark-mode #assistantView .card,
body.dark-mode #assistantView [class*="-card"],
body.dark-mode #myPaymentsView .card,
body.dark-mode #myPaymentsView [class*="-card"] {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
}

/* 3. Tablas de datos (Gestión de Usuarios, Pagos, Tickets) */
body.dark-mode table,
body.dark-mode .table-container,
body.dark-mode .data-table,
body.dark-mode .admin-table {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-secondary) !important;
    border: 1px solid var(--dm-border) !important;
}

body.dark-mode th,
body.dark-mode thead tr {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text-primary) !important;
    border-bottom: 2px solid var(--dm-border) !important;
}

body.dark-mode td,
body.dark-mode tbody tr {
    background-color: var(--dm-bg-card) !important;
    border-bottom: 1px solid var(--dm-border) !important;
    color: var(--dm-text-secondary) !important;
}

body.dark-mode tbody tr:hover td {
    background-color: var(--dm-bg-hover) !important;
    color: var(--dm-text-primary) !important;
}

/* 4. Rescate de Textos forzados a negro en JS */
body.dark-mode #dynamicContent p,
body.dark-mode #dynamicContent span:not(.badge):not([class*="badge"]),
body.dark-mode #dynamicContent label,
body.dark-mode #assistantView p,
body.dark-mode #myPaymentsView p {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode #dynamicContent h1,
body.dark-mode #dynamicContent h2,
body.dark-mode #dynamicContent h3,
body.dark-mode #dynamicContent h4,
body.dark-mode #dynamicContent strong,
body.dark-mode #assistantView h3,
body.dark-mode #myPaymentsView h3 {
    color: var(--dm-text-primary) !important;
}

/* 5. Anular fondos blancos en línea generados por JS */
body.dark-mode #dynamicContent [style*="background: white"],
body.dark-mode #dynamicContent [style*="background-color: white"],
body.dark-mode #dynamicContent [style*="background: #fff"],
body.dark-mode #dynamicContent [style*="background-color: #fff"],
body.dark-mode #dynamicContent [style*="background: #f8fafc"],
body.dark-mode #dynamicContent [style*="background-color: #f8fafc"],
body.dark-mode #assistantView [style*="background: white"],
body.dark-mode #myPaymentsView [style*="background: white"] {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

/* 6. Fix específico para listas de elementos (Ej. Top 10 Asistentes) */
body.dark-mode .ranking-list-item,
body.dark-mode .list-group-item,
body.dark-mode .ticket-item,
body.dark-mode li[class*="-item"] {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

/* =========================================
   ÁREA DE SCROLL EN GESTIÓN DE USUARIOS (.role-scroll-area)
   ========================================= */

/* 1. Eliminar el fondo blanco del contenedor principal */
body.dark-mode .role-scroll-area {
    background-color: var(--dm-bg-main) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 12px !important;
}

/* 2. Prevenir que contenedores internos retengan blanco */
body.dark-mode .role-section-content,
body.dark-mode .role-list-container,
body.dark-mode .role-scroll-area > div[style*="background: white"],
body.dark-mode .role-scroll-area > div[style*="background-color: white"] {
    background-color: transparent !important;
}

/* 3. Estilizar la barra de desplazamiento (Scrollbar) */
body.dark-mode .role-scroll-area::-webkit-scrollbar {
    width: 8px !important;
}

body.dark-mode .role-scroll-area::-webkit-scrollbar-track {
    background: var(--dm-bg-main) !important;
    border-radius: 12px !important;
}

body.dark-mode .role-scroll-area::-webkit-scrollbar-thumb {
    background-color: var(--dm-border) !important;
    border-radius: 12px !important;
}

body.dark-mode .role-scroll-area::-webkit-scrollbar-thumb:hover {
    background-color: var(--dm-accent) !important;
}

/* =========================================
   DASHBOARD FINANCIERO (.financial-dashboard)
   ========================================= */

/* 1. Eliminar el fondo blanco del contenedor principal */
body.dark-mode .financial-dashboard {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Estilizar las tarjetas de montos individuales (Recuadros) */
body.dark-mode .financial-dashboard .stat-card,
body.dark-mode .financial-dashboard .finance-box,
body.dark-mode .financial-dashboard .kpi-card,
body.dark-mode .financial-dashboard > div {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
    padding: 20px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* 3. Efecto Hover interactivo */
body.dark-mode .financial-dashboard .kpi-card:hover,
body.dark-mode .financial-dashboard > div:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
    border-color: var(--dm-accent) !important;
}

/* 4. Textos y Números (Contraste perfecto) */
body.dark-mode .financial-dashboard p,
body.dark-mode .financial-dashboard .amount-label,
body.dark-mode .financial-dashboard h3,
body.dark-mode .financial-dashboard h4 {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .financial-dashboard h2,
body.dark-mode .financial-dashboard span,
body.dark-mode .financial-dashboard .amount-value,
body.dark-mode .financial-dashboard strong {
    color: var(--dm-accent) !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

/* 5. Rescate de Iconos financieros */
body.dark-mode .financial-dashboard i,
body.dark-mode .financial-dashboard .icon {
    color: var(--dm-text-primary) !important;
}

/* =========================================
   VISTAS DE PERFIL, CLAVE Y VERIFICACIÓN DE PAGOS
   ========================================= */

/* 1. Anular fondos blancos estructurales y contenedores principales */
body.dark-mode .profile-view-wrapper,
body.dark-mode .password-view-wrapper,
body.dark-mode .verification-view-wrapper,
body.dark-mode .bg-white,
body.dark-mode .white-box,
body.dark-mode .content-box {
    background-color: transparent !important; 
}

/* 2. Tarjetas y Cajas de Datos internas */
body.dark-mode .profile-info-box,
body.dark-mode .password-change-box,
body.dark-mode .payment-verification-box,
body.dark-mode .verification-item,
body.dark-mode .receipt-card,
body.dark-mode .info-group {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 12px !important;
    color: var(--dm-text-primary) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
}

/* 3. Contraste de Textos en Información del Perfil */
body.dark-mode .info-group label,
body.dark-mode .profile-field-label {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .info-group p,
body.dark-mode .profile-field-value,
body.dark-mode .profile-value {
    color: var(--dm-text-primary) !important;
    font-weight: 500 !important;
}

/* 4. Elementos específicos de Verificación de Pagos (Comprobantes) */
body.dark-mode .receipt-image-container,
body.dark-mode .modal-receipt,
body.dark-mode .image-viewer {
    background-color: var(--dm-bg-input) !important; 
    border: 1px solid var(--dm-border) !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

/* 5. Fuerza bruta para CUALQUIER div inyectado en estas vistas con fondo blanco duro */
body.dark-mode #dynamicContent div[style*="background-color: #ffffff"],
body.dark-mode #dynamicContent div[style*="background: #ffffff"],
body.dark-mode #dynamicContent div[style*="background-color: #fff"],
body.dark-mode #dynamicContent div[style*="background: #fff"],
body.dark-mode #dynamicContent div[style*="background-color: white"],
body.dark-mode #dynamicContent div[style*="background: white"] {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

/* =========================================
   FIJAR FONDOS DE VISTAS DINÁMICAS (PERFIL, CONTRASEÑA, PAGOS)
   ========================================= */

body.dark-mode .profile-content,
body.dark-mode #dynamicContent {
    background-color: var(--dm-bg-main) !important;
    background-image: none !important;
}

body.dark-mode #dynamicContent > h2,
body.dark-mode .profile-requests-header {
    background-color: var(--dm-bg-main) !important;
    background-image: none !important;
    border-bottom: 2px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

/* 1. Información del Perfil (#perfil) */
body.dark-mode #profileForm {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* 2. Cambiar Contraseña (#cambio-clave) */
body.dark-mode #changePasswordForm {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* 3. Verificación de Pagos Pendientes (#verificar-pagos) */
body.dark-mode .admin-verification-grid,
body.dark-mode #verificationList {
    background-color: transparent !important;
}

body.dark-mode .admin-verification-grid .verification-card, 
body.dark-mode #verificationList .verification-card {
    background-color: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* Quitar fondos de form-section redundantes si profileForm ya es oscuro */
body.dark-mode .form-section {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* =========================================
   GESTIONAR USUARIOS (.role-header)
   ========================================= */
body.dark-mode .role-header {
    background-color: var(--dm-bg-input) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
    padding: 10px 15px !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
}