.rf-parametro {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 5px; /* Pequeño espacio entre el nombre del parámetro y las estrellas */
}

.rf-rating {
    display: inline-flex;
    flex-direction: row-reverse; /* Invertir la dirección de las estrellas */
    gap: 3px; /* Espacio pequeño entre las estrellas */
}

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

/* Estilo base para las estrellas (no seleccionadas) */
.rf-rating label {
    font-size: 24px;
    color: #ccc; /* Color gris para las estrellas no seleccionadas */
    cursor: pointer;
}

/* Efecto hover: todas las estrellas a la derecha del cursor se colorean */
.rf-rating label:hover,
.rf-rating label:hover ~ label {
    color: #f5b301; /* Color dorado cuando se hace hover */
}

/* Las estrellas seleccionadas permanecen coloreadas */
.rf-rating input[type="radio"]:checked ~ label,
.rf-rating input[type="radio"]:checked ~ label ~ label {
    color: #f5b301; /* Mantener las estrellas seleccionadas a la derecha */
}