/* O widget `formulario` (FeitoWeb.Widgets.Formulario, docs/telas.md §2). Os campos em seções (recolhíveis quando
   há mais de uma), o erro geral e o «Salvo» em cima (o <.aviso>), os campos nas 12 colunas (a <.grade>) e o pé com
   os botões; no modo de leitura, cada seção é a ficha com «Editar». Etapa 1, frente B (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). */

.formulario { display: grid; gap: var(--v-esp-3, 12px); min-width: 0; }
.formulario form { display: grid; gap: var(--v-esp-3, 12px); min-width: 0; margin: 0; }
/* a grade do formulário: o espaço entre as linhas é o do próprio campo (a ajuda e o erro ficam junto dele) */
.formulario .grade { row-gap: 0; }

/* a seção: o título e o «Editar» numa linha; recolhível quando o formulário tem mais de uma */
.form-secao { min-width: 0; padding: var(--v-esp-3, 12px) var(--v-esp-4, 16px); border: 1px solid var(--e-linha, var(--linha));
  border-radius: var(--v-raio, 10px); background: var(--e-cartao, var(--branco)); }
details.form-secao > summary { margin-bottom: var(--v-esp-2, 8px); color: var(--verde-esc); font-weight: 700;
  cursor: pointer; }
details.form-secao:not([open]) > summary { margin-bottom: 0; }
.form-secao-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--v-esp-2, 8px); margin-bottom: var(--v-esp-2, 8px); }
.form-secao-topo h3 { margin: 0; }
.form-secao .ficha { margin: 0; }

/* o pé: Cancelar e o primário por último, à direita */
.form-pe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--v-esp-2, 8px); }
@media (max-width: 760px) { .form-pe > * { flex: 1 1 auto; } }

/* — as seções em abas (a L1f, 26/10/2026): sem o título (a aba já diz), o «Editar» fica à direita, como ficava ao lado
   dele */
.form-secao-topo > .btn:only-child { margin-left: auto; }