.card {
    margin-bottom: 20px;
}
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: transparent; /* Cambiamos el color de fondo a transparente */
    color: white; /* Cambiamos el color del texto a blanco */
    text-align: center;
    padding: 10px 0; /* Añadir padding para mejorar la apariencia */
}
.user-info {
    font-size: 1.5em; /* Ajusta el tamaño según tus necesidades */
    text-transform: none; /* Asegura que el texto no se transforme */
}
.user-info strong {
    text-transform: uppercase; /* Solo transforma el texto del rol a mayúsculas */
}
.sidebar.toggled {
    display: none;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(128, 128, 128, 0.5); /* Fondo gris semitransparente */
    border-radius: 50%; /* Hacer que el fondo sea redondo */
    padding: 10px; /* Espacio alrededor del icono */
}

/* Asegurar que el tamaño del icono se mantenga adecuado */
.carousel-control-prev-icon::before,
.carousel-control-next-icon::before {
    font-size: 2rem; /* Aumentar el tamaño del icono si es necesario */
}
/* Estilos para la sección Hero con el carrusel de fondo */
.hero-section {
    position: relative;
    height: 80vh; /* Altura del 80% de la ventana */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-section .carousel,
.hero-section .carousel-inner,
.hero-section .carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-section .carousel-item {
    background-size: cover;
    background-position: center;
}

/* Overlay oscuro para mejorar la legibilidad del texto */
.hero-section .carousel-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
}

.hero-text-overlay {
    position: relative; /* Para que se ponga por encima del overlay */
    z-index: 1;
}
/* Contenedor para el banner institucional en la parte superior */
.institutional-banner-container {
    padding: 10px 0; /* Un poco de espacio vertical */
    border-bottom: 1px solid #ddd; /* Línea sutil de separación */
}

/* Ajusta el tamaño máximo del banner para que no sea demasiado grande */
.institutional-banner-container img {
    max-height: 100px; /* Puedes ajustar esta altura */
    width: auto;
}

/*
 * ¡LA SOLUCIÓN PARA LA LEGIBILIDAD! 
 * Esta clase se la añadimos a las secciones donde queremos
 * que el texto se lea bien sobre el fondo de partículas.
*/
.content-section {
    position: relative; /* Necesario para que el z-index funcione */
    background-color: rgba(248, 249, 250, 0.9); /* Un fondo blanco con 90% de opacidad */
    border-radius: 15px; /* Bordes redondeados para un look más suave */
    margin: 2rem auto; /* Espacio arriba y abajo */
    padding: 2rem; /* Espacio interno */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/*
 * Estilos personalizados para las pestañas de categorías de cursos
*/

/* Contenedor de las pestañas */
.custom-pills {
    gap: 15px; /* Espacio entre los botones de las pestañas */
}

/* Estilo base para cada botón/pestaña */
.custom-pills .nav-link {
    background-color: #ffffff; /* Fondo blanco para que resalte sobre el fondo de la sección */
    color: #495057; /* Color de texto gris oscuro */
    border-radius: 50px; /* Bordes completamente redondeados estilo "píldora" */
    padding: 10px 25px;
    font-weight: 600;
    border: 1px solid #dee2e6;
    
    /* El "difuminado gris" que pediste, implementado con una sombra sutil */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    
    transition: all 0.3s ease-in-out; /* Transición suave para todos los cambios */
}

/* Estilo para la pestaña activa y cuando el cursor está encima */
.custom-pills .nav-link.active,
.custom-pills .nav-link:hover {
    /* Color azul primario de tu tema para mantener la coherencia */
    background-color: #4e73df; 
    color: #ffffff; /* Texto en color blanco para contraste */
    border-color: #4e73df;

    /* Sombra más pronunciada para dar un efecto de "elevación" */
    box-shadow: 0 4px 10px rgba(78, 115, 223, 0.4); 
    transform: translateY(-2px); /* Un ligero movimiento hacia arriba */
}

/* Estilos para el contenido que se muestra debajo de las pestañas */
.tab-content {
    margin-top: 2rem; /* Espacio entre las pestañas y el contenido */
}