/* Componente de avaliacao por estrelas (1 a 5): vazia = contorno, cheia = preenchida.
   Uso: <div data-estrelas="nome" data-rotulos="r1|r2|r3|r4|r5"></div> + Scripts/Componentes/estrelas.js */
.nl-estrelas { display: flex; flex-wrap: wrap; gap: .1rem; }
.nl-estrelas label { position: relative; cursor: pointer; line-height: 1; }
.nl-estrelas input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.nl-estrelas label .nl-estrela { display: block; width: 2.5rem; height: 2.5rem; }
.nl-estrelas label .nl-estrela svg { width: 100%; height: 100%; fill: none; stroke: var(--amarelo); stroke-width: 1.6; stroke-linejoin: round; }
.nl-estrelas label.cheia .nl-estrela svg { fill: var(--amarelo); }
.nl-estrelas label:focus-within .nl-estrela { outline: 3px solid var(--azul-claro); outline-offset: 2px; border-radius: 6px; }
.nl-estrelas.nl-estrelas--p label .nl-estrela { width: 2.1rem; height: 2.1rem; }