/* Estilos generales para el carrusel de Moodle */
.moodle-courses-carousel {
    margin-bottom: 30px;
    position: relative;
}

.moodle-carousel-item {
    text-align: center;
    padding: 15px;
    border: 1px solid #eee;
    background-color: #fff;
    margin: 5px; /* Pequeño margen para separar los ítems */
    transition: transform 0.3s ease;
}

.moodle-carousel-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.moodle-carousel-item a {
    text-decoration: none;
    color: inherit;
    display: block; /* Asegura que todo el item sea clickeable */
}

.moodle-carousel-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 15px auto;
    border-radius: 5px;
}

.moodle-carousel-item h3 {
    font-size: 1.2em;
    margin: 0;
    color: #333;
    min-height: 50px; /* Para mantener una altura consistente en los títulos */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita el título a 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Estilos para las flechas de navegación de Owl Carousel */
.moodle-courses-carousel .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5) !important; /* Oscuro semitransparente */
    color: #fff !important;
    font-size: 2em !important;
    padding: 0 10px !important;
    line-height: 1 !important;
    border-radius: 3px !important;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.moodle-courses-carousel .owl-nav button:hover {
    opacity: 1;
}

.moodle-courses-carousel .owl-nav .owl-prev {
    left: -20px; /* Ajusta la posición lateral */
}

.moodle-courses-carousel .owl-nav .owl-next {
    right: -20px; /* Ajusta la posición lateral */
}

/* Estilos para los puntos de paginación de Owl Carousel */
.moodle-courses-carousel .owl-dots {
    text-align: center;
    margin-top: 20px;
}

.moodle-courses-carousel .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #d6d6d6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 30px;
}

.moodle-courses-carousel .owl-dots .owl-dot.active span,
.moodle-courses-carousel .owl-dots .owl-dot:hover span {
    background: #0073aa; /* Color de acento de WordPress */
}

/* Pequeños ajustes para la visualización de errores o sin cursos */
.moodle-carousel-error,
.moodle-carousel-no-courses {
    text-align: center;
    padding: 20px;
    border: 1px solid #ffba00;
    background-color: #fff3cd;
    color: #856404;
    border-radius: 4px;
    margin: 20px 0;
}