/* CSS local do projeto: exceção mínima ao Tabler (AGENTS.md).
   Cada regra diz por que existe; veja docs/v2/arquitetura/padroes-de-interface.md. */

/* Alpine.js: esconde o que depende de estado até o Alpine iniciar, para
   não piscar blocos ocultos (regra exigida pela documentação do Alpine). */
[x-cloak] { display: none !important; }

/* Listas: uma linha por registro. Nome longo é cortado com reticências
   (`text-truncate` do Tabler) até esta largura; o nome completo vai no
   `title`. O Tabler não tem utilitário de largura máxima. */
.texto-limitado { max-width: 16rem; }

/* Foto da avaliação: a própria imagem é o campo de envio. Ao passar o mouse
   (ou focar pelo teclado), a camada "Trocar foto" aparece sobre ela. O
   Tabler não tem sobreposição revelada no hover. */
.foto-envio-acao { background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .15s; }
.foto-envio:hover .foto-envio-acao,
.visually-hidden:focus-visible + .position-relative .foto-envio-acao { opacity: 1; }
.visually-hidden:focus-visible + .position-relative .foto-envio { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }