/* O widget `filtro` (FeitoWeb.Widgets.Filtro, docs/telas.md §2). A busca e os filtros gerados dos campos. Trazido da
   casca na etapa 1 (26/10/2026): o .filtros e a .lista-filtros .lista-busca (style.css) e o .chip[aria-current]
   (componentes.css); a altura da fileira de controles continua no visual.css. A contagem embaixo usa a .lista-conta
   (widgets/paginacao.css). 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 */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.filtros > div { min-width: 160px; }
.lista-filtros .lista-busca { flex: 1 1 260px; max-width: 460px; }
.lista-filtros .lista-busca input { width: 100%; }
/* a busca grande, sozinha na fileira (a busca do sistema, /busca: era um <style> da tela; F6, 26/10/2026) */
/* (a altura vai também na variável da fileira: a do visual novo, .filtros > div > input, pede a --linha-h) */
.filtro-destaque .lista-busca { flex: 1 1 40rem; max-width: 56rem; --linha-h: 2.6rem; }
.filtro-destaque .lista-busca input { height: 2.6rem; font-size: 1rem; }
@media (max-width: 640px) {
  .lista-filtros .lista-busca { max-width: none; flex-basis: 100%; }
  .lista-filtros .lista-busca input { font-size: 16px; }
}

/* — de componentes.css */
/* chip que filtra (chips()): o ativo, com o mesmo verde do .chip.on do SST */
.chip[aria-current] { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-esc); }

/* — novo (etapa 1) */
/* o sim/não: os chips num grupo, com o nome em cima com a cara do rótulo dos outros campos; o marcado, o verde do
   chip que filtra (a bolinha do rádio também diz) */
.filtro-sim-nao { min-width: 0; margin: 0; padding: 0; border: 0; }
.filtro-sim-nao legend { margin-bottom: 3px; padding: 0; color: var(--suave); font-size: .8rem; font-weight: 600; }
.filtro-sim-nao .chip { min-height: var(--linha-h, var(--ctl-h, 36px)); }
.filtro-sim-nao .chip:has(> input:checked) { border-color: var(--verde); background: var(--verde-claro);
  color: var(--verde-esc); }
.filtro-sim-nao .chip:has(> input:focus-visible) { outline: 2px solid var(--verde); outline-offset: 1px; }
/* o período: a escolha e, em «Escolher datas», o de e o até ao lado */
.filtro-periodo-l { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-esp-2, 8px); }
.filtro-periodo-l > :is(select, input[type=date]) { width: auto; }