/* ============================================================
   Modo oscuro — Hub cursos interactivos + motor Duolingo legacy
   ============================================================ */

/* ── Hub: botones de filtro (estilos propios, no Tailwind) ── */
[data-theme="dark"] .ci-btn-asig:not(.ci-active),
[data-theme="dark"] .ci-btn-estado:not(.ci-estado-active),
[data-theme="dark"] .ci-btn-nivel:not(.ci-nivel-active) {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
}
[data-theme="dark"] .ci-btn-asig:not(.ci-active):hover,
[data-theme="dark"] .ci-btn-estado:not(.ci-estado-active):hover,
[data-theme="dark"] .ci-btn-nivel:not(.ci-nivel-active):hover {
    background: rgba(67, 56, 202, 0.22) !important;
    color: #c7d2fe !important;
    border-color: #6366f1 !important;
}

/* Buscador */
[data-theme="dark"] #ci-search {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] #ci-search::placeholder {
    color: #64748b !important;
}
[data-theme="dark"] #ci-search:focus {
    background: #1e293b !important;
}

/* Iconos de tarjeta con fondo pastel inline */
[data-theme="dark"] .ci-card .rounded-2xl[style*="background"] {
    background-color: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
}

/* Chips meta en tarjetas */
[data-theme="dark"] .ci-card .bg-gray-50.border-gray-100 {
    background: rgba(51, 65, 85, 0.55) !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .ci-card .bg-gray-100.text-gray-500 {
    background: rgba(51, 65, 85, 0.65) !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
}

/* Stats / bloque "Cómo funciona" */
[data-theme="dark"] .ci-hub .bg-indigo-100,
[data-theme="dark"] .ci-hub .bg-purple-100,
[data-theme="dark"] .ci-hub .bg-pink-100 {
    background: rgba(51, 65, 85, 0.65) !important;
}

/* ── Motor legacy (fisica_interactiva, dinamica.php, etc.) ── */
[data-theme="dark"] #view-lesson.bg-gray-50,
[data-theme="dark"] #view-lesson {
    background: #0f172a !important;
}

[data-theme="dark"] #view-lesson .bg-white.border-b {
    background: #1e293b !important;
    border-color: #475569 !important;
}

[data-theme="dark"] #slide-footer.bg-white {
    background: #1e293b !important;
    border-color: #475569 !important;
}

[data-theme="dark"] #view-lesson .bg-gray-100 {
    background: #334155 !important;
}

/* Lecciones pendientes con background:white inline */
[data-theme="dark"] .lesson-dot[style*="background:white"],
[data-theme="dark"] .lesson-dot[style*="background: white"] {
    background: #1e293b !important;
    border-color: #475569 !important;
}

/* Cabecera de unidad con fondo pastel inline */
[data-theme="dark"] .unit-card > .p-5[style*="background"] {
    background: rgba(30, 41, 59, 0.75) !important;
}

/* Botón volver a teoría inline */
[data-theme="dark"] button[style*="background:#e0f2fe"],
[data-theme="dark"] button[style*="background: #e0f2fe"] {
    background: rgba(12, 74, 110, 0.45) !important;
    border-color: #0ea5e9 !important;
    color: #bae6fd !important;
}

/* Modal teoría legacy */
[data-theme="dark"] #modal-teoria .bg-white {
    background: #1e293b !important;
}

[data-theme="dark"] #modal-teoria .bg-black\/50 {
    background: rgba(0, 0, 0, 0.72) !important;
}