/* ==========================================================================
   SGP — Design System · Camada 14: BLOCO DE FORMULÁRIO (.bloco-form)

   A moldura dos três blocos narrativos do formulário de atendimento (F23):
   "Quem procurou o gabinete", "Encaminhamento", "Classificação e detalhes".

   Por que <fieldset>/<legend> e não um <div> com um <h2>: o agrupamento
   precisa existir para o leitor de tela também — quem navega por campo ouve
   "Responsável, grupo Encaminhamento" e sabe em que parte do formulário está.
   O preço é o CSS abaixo, que zera o estilo herdado do navegador (borda de
   sulco, margem lateral e o `min-width: min-content` que o UA aplica em
   fieldset e que faz um campo largo estourar a coluna).

   Genérico de propósito: nada aqui menciona atendimento, para os próximos
   formulários longos (pessoa, proposição) reusarem a mesma moldura.
   ========================================================================== */

.bloco-form {
  /* O UA dá `min-inline-size: min-content` a todo fieldset — sem isto o bloco
     não encolhe e a coluna do mestre-detalhe corta o campo da direita. */
  min-inline-size: 0;
  margin: 0;
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-elevado);
}

.bloco-form + .bloco-form { margin-top: var(--esp-4); }

.bloco-form__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  /* `float: none` não basta: em legend o que resolve é não deixá-la participar
     do fluxo com o padding do UA. */
  padding: 0 var(--esp-2);
  margin-inline-start: calc(var(--esp-2) * -1);
  font-size: var(--texto-md);
  font-weight: 600;
  color: var(--cor-texto);
}

/* O número do passo: dá a ordem da narrativa sem virar um wizard de verdade —
   o formulário continua sendo um só, submetido de uma vez. */
.bloco-form__passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--cor-acao);
  color: var(--cor-texto-invertido, #fff);
  font-size: var(--texto-sm);
  font-weight: 700;
  line-height: 1;
}

.bloco-form__ajuda {
  margin: var(--esp-1) 0 var(--esp-4);
  color: var(--cor-texto-fraco);
  font-size: var(--texto-sm);
}

/* O bloco do ENCAMINHAMENTO é o que o atendente mais erra por não ver: ganha
   um fio de cor na borda esquerda, sem virar alerta. */
.bloco-form--destaque {
  border-inline-start: 3px solid var(--cor-acao);
}

/* --- Rótulo longo × o "?" do glossário ------------------------------------

   O "?" da camada 13 é `position: absolute; right: 0` dentro do `.campo`, o
   que funciona bem com rótulo curto ("Unidade", "Prioridade"). Rótulo longo
   em coluna estreita — "Valor estimado da demanda (R$)" numa grade de duas
   colunas — passava POR BAIXO do botão, e o ")" saía sobreposto ao ícone.

   O conserto é do rótulo, não do botão: quem tem dica reserva a faixa da
   direita. Vale para todo campo do sistema (a regra é do design system, não
   deste formulário) e não muda nada onde o rótulo é curto. */
.campo:has(> .dica) > .campo__rotulo {
  padding-inline-end: calc(var(--esp-5) + var(--esp-1));
}