/* ==========================================================================
   Cadastro completo numa tela só (pessoa + contatos + endereço, um salvar).
   Pedido do gabinete em 03/11/2026: o formulário "engessava" — endereço só
   depois de salvar, telefone fixo cortado, e-mail/rede social escondidos.
   ========================================================================== */

/* Uma seção do formulário (Contatos, Endereço): título visível, sem a moldura
   pesada do <fieldset> do navegador. */
.secao-do-formulario {
  margin: var(--esp-5) 0 0;
  padding: var(--esp-4) 0 0;
  border: 0;
  border-top: 1px solid var(--cor-borda);
  min-width: 0;
}

.secao-do-formulario__titulo {
  float: left;               /* tira a <legend> de cima da borda */
  width: 100%;
  padding: 0;
  margin-bottom: var(--esp-1);
  font-size: var(--texto-md);
  font-weight: 600;
  color: var(--cor-texto);
}
.secao-do-formulario__titulo + * { clear: both; }

.secao-do-formulario__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}

.linhas-repetiveis {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin-top: var(--esp-3);
}

/* Uma linha (um contato, um endereço) com a lixeira à direita. */
.linha-repetivel {
  display: flex;
  align-items: flex-end;
  gap: var(--esp-2);
  min-width: 0;
}
.linha-repetivel[hidden] { display: none; }
.linha-repetivel__campos { flex: 1 1 auto; min-width: 0; }
.linha-repetivel__remover { flex: none; margin-bottom: 4px; }

/* Endereço é um bloco alto: moldura leve para separar um do outro, e a
   lixeira no topo, onde o olho começa. */
.linha-repetivel--endereco {
  align-items: flex-start;
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
}
.linha-repetivel--endereco .linha-repetivel__remover { margin-bottom: 0; }

/* TIPO + NÚMERO DO CONTATO, sem cortar o número.
   Era um `.formulario__linha` (grid de colunas de 220px): o seletor de país
   (7.5rem) comia mais da metade da coluna e "(67) 3321-4567" aparecia pela
   metade. Aqui o tipo ocupa o que precisa e o número fica com o resto; quando
   não cabem lado a lado (celular, painel estreito), o número desce inteiro
   para a linha de baixo em vez de espremer. */
.contato-campos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-4);
  min-width: 0;
}
.contato-campos > .campo:first-child { flex: 0 1 13.5rem; min-width: 10rem; }
.contato-campos > .campo:last-child  { flex: 999 1 18rem; min-width: 0; }