/* 1. Fondo negro general para la aplicación */
body, html, main, #tevello-app-root, .tevello-container {
    background-color: #000000 !important;
}

/* 2. Convertir todos los textos, títulos y párrafos a color blanco */
body, h1, h2, h3, h4, h5, h6, p, span, a {
    color: #ffffff !important;
}

/* 3. Ajustar el estilo de la tarjeta del curso (Grill Master) */
div[class*="card"], div[class*="CourseCard"], .tevello-card {
    background-color: #1a1a1a !important; 
    border: 1px solid #444444 !important; 
    border-radius: 12px !important;
    overflow: hidden !important; 
    color: #ffffff !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.9) !important; 
}

/* 4. Asegurar que los textos dentro de la tarjeta también sean blancos */
div[class*="card"] *, div[class*="CourseCard"] *, .tevello-card * {
    color: #ffffff !important;
}

/* 5. ARREGLAR LA BARRA DE PROGRESO (El recuadro raro) */
div[class*="progress"], progress {
    background-color: #2a2a2a !important; 
    border: none !important; 
    border-radius: 20px !important; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5) !important;
}

div[class*="progress"] > div, div[class*="progress-bar"], progress::-webkit-progress-value {
    background-color: #E2231A !important; 
    border-radius: 20px !important;
}

progress::-webkit-progress-bar {
    background-color: #2a2a2a !important;
    border-radius: 20px !important;
    border: none !important;
}

/* --------------------------------------------------------- */
/* 6. NUEVO: ARREGLAR EL FONDO BLANCO DEL MENÚ MÓVIL         */
/* --------------------------------------------------------- */
/* Apunta a las etiquetas y contenedores (Drawers, Sidebars, Modales) 
   que las plataformas suelen usar para el menú en móviles */
aside, 
nav, 
dialog, 
[role="dialog"], 
[role="presentation"] > div,
div[class*="drawer" i], 
div[class*="sidebar" i], 
div[class*="mobile" i] {
    background-color: #000000 !important;
}

/* Para asegurar que los fondos de las listas internas del menú 
   también hereden la oscuridad y no queden blancos */
ul, li {
    background-color: transparent !important; 
}