/* Contenedor principal de las hojas para votación */
.star-rating {
    direction: rtl; /* Invierte la dirección visual para que funcione el CSS ~ correctamente */
    display: inline-flex;
}

/* Ocultar los inputs de radio */
.star-rating input[type="radio"] {
    display: none;
}

/* Todas las hojas: aspecto por defecto (gris claro) */
.star-rating label img.icono-hoja {
    width: 25px;
    height: auto;
    cursor: pointer;
    filter: grayscale(100%) brightness(1.5);
    transition: filter 0.3s ease;
}

/* Al pasar el ratón sobre una hoja: ilumina esta y todas las anteriores (a la izquierda visual) */
.star-rating label:hover img.icono-hoja,
.star-rating label:hover ~ label img.icono-hoja {
    filter: none;
}

/* Al seleccionar una hoja: deja esa y las anteriores iluminadas */
.star-rating input[type="radio"]:checked ~ label img.icono-hoja {
    filter: none;
}

/* Promedio de votaciones: hojas siempre a color */
.promedio-imagenes img.icono-hoja {
    width: 30px;
    height: auto;
    filter: none;
    cursor: default;
}

/* Centrar solo en pantallas pequeñas (móviles) */
@media (max-width: 767.98px) { /* Bootstrap xs/sm */
    .promedio-imagenes {
        display: flex;           /* Necesario para centrar horizontalmente */
        justify-content: center; /* Centra el contenido */
    }
}