/* O widget `estado` (FeitoWeb.Widgets.Avisos, docs/telas.md §2). O estado de uma lista ou painel: vazio, carregando,
   com erro. O @keyframes estado-gira fica no style.css (o botão que espera também gira). Trazido da casca na etapa 0
   (26/10/2026). Regra (docs/telas.md §4, o teste test/feito_web/widgets_regra_test.exs): cor só por token (var(--…),
   com a cor de hoje como reserva); cor nova é token novo, no style.css (claro) e no temas.css (escuro e acrílico).
   Ligado no layout raiz logo depois do style.css (FeitoWeb.Widgets.folhas/0): as camadas da casca (visual.css,
   componentes.css, navegacao.css, temas.css, fonte.css e a escala gerada por `mix casca.escala`) vestem por cima,
   como vestem tudo. Mudou este arquivo: `mix casca.escala` (o ./servidor faz sozinho). */

/* — de style.css */
/* ESTADO de uma lista/tabela/painel (05/10/2026, skill ux-telas-de-operacao): diz O QUÊ, POR QUÊ e a PRÓXIMA AÇÃO.
   <div class="estado vazio|carregando|erro" role="status|alert"><b>…</b><p>…</p><div class="acoes">…</div></div>
   (em tabela: <tr><td colspan="N"><div class="estado vazio">…</div></td></tr>). Classe nova: nenhuma tela antiga a
   usa, então a página de hoje não muda. */
.estado { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 26px 18px; color: var(--suave); }
.estado > b, .estado > strong { color: var(--tinta); font-size: 1rem; }
.estado > p { margin: 0; max-width: 60ch; }
.estado > .acoes { justify-content: center; margin-top: 4px; }
.estado.erro > b, .estado.erro > strong { color: var(--vermelho); }
.estado.carregando::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linha);
  border-top-color: var(--verde); animation: estado-gira .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .estado.carregando::before { animation: none; } }

/* Os tipos com ícone (sem_permissao: o cadeado; so_bitrix: a tomada; em_construcao: o capacete), 26/10/2026: o
   desenho em cima do título, na cor apagada — o título continua dizendo o quê (o ícone é aria-hidden). */
.estado > .ic { color: var(--suave); opacity: .85; }