/* css/course_styles.css */
/* Estilos específicos para las páginas de cursos/labs */

/* Header específico del curso */
.course-header {
    background-color: var(--bg-dark); /* Usa el fondo del tema actual */
    border-bottom: 1px solid var(--border-color);
    height: 80px;
    display: flex;
    align-items: center;
}

/* En modo claro, ajustar el fondo del header */
body.light-mode .course-header {
    background-color: var(--bg-dark); /* var(--bg-dark) se vuelve blanco en modo claro */
}

/* Enlaces de navegación */
.back-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
}

.back-link:hover {
    color: var(--accent-blue);
}

/* Contenido principal */
.course-content {
    /* Tailwind se encarga de la mayoría, pero podemos agregar valores base */
}

/* Tarjetas específicas de Labs/Cursos */
.course-card {
    /* Usamos las variables para que responda al tema */
    background-color: var(--bg-medium);
    border-color: var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-blue);
}

/* Asegurar que los textos dentro de las tarjetas usen el color correcto */
.course-card h2 {
    color: var(--text-primary);
}

.course-card p, 
.course-card li {
    color: var(--text-secondary);
}

.course-card strong {
    color: var(--text-primary);
}

/* Footer específico */
.course-footer {
    background-color: var(--bg-dark);
    border-top: 1px solid var(--border-color);
}