.rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, sans-serif;
    gap: 10px; /* Espaciado entre estrellas y texto */
}

.stars {
    display: flex;
    gap: 5px; /* Espacio entre estrellas */
    justify-content: center;
}

.star {
    width: 40px; /* Tamaño reducido */
    height: 40px;
    position: relative;
    background-color: lightgray; /* Fondo de las estrellas no marcadas */
    clip-path: polygon(
        50% 0%,
        63% 35%,
        98% 35%,
        70% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        30% 57%,
        2% 35%,
        37% 35%
    );
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -2px 2px rgba(255, 255, 255, 0.5); /* Relieve inicial */
    border-radius: 4px; /* Suaviza las puntas */
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s; /* Animación al pasar el mouse */
}

.star:hover {
    transform: scale(1.1); /* Agrandar ligeramente al pasar el mouse */
    background-color: #ffd700; /* Color amarillo más intenso */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4), inset 0 -3px 3px rgba(255, 255, 255, 0.4); /* Sombra más pronunciada */
}

.star .filled {
    position: absolute;
    height: 100%;
    background-color: gold; /* Color dorado para estrellas llenas */
    clip-path: inherit; /* Hereda el diseño de la estrella */
    transform-origin: left; /* Inicia el relleno desde la izquierda */
    z-index: 1; /* Asegura que esté encima del fondo */
    transition: background-color 0.3s; /* Suaviza el cambio de color */
}

.star:hover .filled {
    background-color: orange; /* Destacar al pasar el mouse */
}

#current-rating {
    margin-top: 10px;
    font-size: 18px;
    font-weight: normal;
    color: #333;
    text-align: center;
}

#current-rating b {
    font-weight: bold; /* Solo los valores en negrita */
}

#rating-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto; /* Ajusta el espacio superior/inferior */
    text-align: center;
}

#thank-you-message {
    margin-top: 15px;
    font-size: 16px;
    color: green;
    display: none; /* Inicialmente oculto */
    text-align: center;
}

#thank-you-message span {
    display: flex;
    align-items: center;
    justify-content: center;
}

#thank-you-message span::before {
    content: '✔ '; /* Ícono de check */
    font-size: 20px;
    color: green;
    margin-right: 5px;
}
/* Estilos para el popup */
#vote-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 20px;
    z-index: 1000;
}

.popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.popup-check {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #28a745; /* Verde para el fondo del check */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.popup-check::after {
    content: '✔'; /* Símbolo del check */
    color: rgb(13, 157, 76);
    font-size: 24px;
    font-weight: bold;
}

#vote-popup p {
    font-size: 18px;
    font-weight: bold;
    color: #28a745; /* Verde para el texto */
    margin: 0;
}