/* O widget `progresso` (FeitoWeb.Widgets.Avisos, docs/telas.md §2). A barra de andamento (importação, SLA,
   ocupação, meta): a .barra-prog, com o rótulo e o andamento em cima. Trazido da casca na etapa 1 (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 */
.barra-prog { height: 7px; background: var(--e-sutil, #e6ece8); border-radius: 10px; overflow: hidden; margin: 3px 0; }
.barra-prog span { display: block; height: 100%; border-radius: 10px; }

/* o widget: o rótulo e o andamento numa linha, e a cor do andamento (a casca deixava a cor para cada tela) */
.progresso { display: grid; gap: 2px; min-width: 0; }
.progresso-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .84rem; }
.progresso-rot { min-width: 0; overflow-wrap: anywhere; color: var(--tinta); }
.progresso-n { flex: none; color: var(--suave); font-variant-numeric: tabular-nums; }
.progresso .barra-prog > span { background: var(--verde); }
.progresso.amarelo .barra-prog > span { background: var(--e-amarelo-forte, var(--amarelo)); }
.progresso.vermelho .barra-prog > span { background: var(--e-vermelho-forte, var(--vermelho)); }
.progresso.azul .barra-prog > span { background: var(--azul); }
@media (prefers-reduced-motion: no-preference) {
  .progresso .barra-prog > span { transition: width .3s ease; }
}