/* CSS se incluye aquí para facilitar la demostración */
        /* Puedes mover esto a un archivo style.css */
        
        /* --- ESTILOS CSS --- */
        .rating-widget {
            display: inline-block;
            text-align: center;
            padding: 20px;
          
            border-radius: 8px;
            font-family: Arial, sans-serif;
           
            width:100%;
        }

        .stars-container {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }

        .star-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px 10px;
            margin: 0 2px;
            color: #ccc !important; /* Color por defecto (gris) */
            font-size: 30px;
            transition: color 0.2s, transform 0.1s;
            position: relative;
            line-height: 1; /* Asegura que la estrella esté bien centrada */
            box-shadow: none;
            font-weight: 900;
            height: 2em;
            width: 2.3em;
            text-align: center !important;
        }
        
        .star-button:hover,
        .star-button:focus {
            outline: none;
            color: #ffc107 !important; /* Color al pasar el ratón/enfocar */
            transform: scale(1.1);
        background-color: transparent !important;
            box-shadow: none !important;
        }

        /* La estrella rellena se logra con el ícono (★) */
        .star-button.rated-star {
            color: #ffc107 !important; /* Color de la estrella seleccionada o previa */
        }

        .labels-container {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #555;
            max-width: 260px; /* Ancho para alinear con las estrellas */
            margin: 0 auto;
        }

        .label-text {
            width: 2em; /* Asegura un espacio similar para cada etiqueta */
            text-align: center;
            line-height: 1;
            padding-right: 90px;
            text-align: center;

        }
#labels-container span:nth-child(1){
    
              margin-left:-35px;  
}
#labels-container span:nth-child(2){
    
              margin-left:-25px;  
}
#labels-container span:nth-child(3){
    
              margin-left:-15px;  
}
#labels-container span:nth-child(4){
    
              margin-left:-15px;  
}
#labels-container span:nth-child(5){
    
              margin-left:-15px;  
}




        .feedback-message {
            font-size: 1.2em;
            color: #611232;
            font-weight: bold;
            display: none; /* Inicialmente oculto */
        }

        /* Estilos de accesibilidad: borde de foco claro */
        .star-button:focus-visible {
            outline: 2px solid #007bff;
            outline-offset: 2px;
        }