/* Selector de estrellas con CSS puro (sin JS): los radios están en
   orden 5,4,3,2,1 en el HTML y flex-direction:row-reverse los pinta
   de izquierda a derecha — así el combinador ~ (hermano siguiente en
   el DOM = visualmente a la izquierda tras el reverse) ilumina la
   estrella marcada y todas las de menor valor a su izquierda. */
.estrellas-input {
    display: flex; flex-direction: row-reverse; justify-content: flex-end;
    gap: .3rem; font-size: 2.4rem;
}
.estrellas-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.estrellas-input label {
    color: #dcdfe4; cursor: pointer; transition: color .15s ease; line-height: 1;
}
.estrellas-input input:checked ~ label,
.estrellas-input label:hover,
.estrellas-input label:hover ~ label {
    color: #f5a623;
}
.estrellas-input input:focus-visible + label { outline: 2px solid var(--tblr-primary); outline-offset: 2px; border-radius: 4px; }