/* ==========================================================================
   forms.css - Sistema genérico de layout de formulários
   Só ESTRUTURA (grid responsivo, agrupamentos). Sem cores/bordas/tipografia.
   A aparência (cores, bordas, fontes) fica no CSS do site (ex.: style.css).

   ISOLAMENTO:
   TODAS as regras vivem dentro de .form-grid. Assim as classes .field e
   .form-actions do flex.css continuam livres para uso geral de layout -
   os dois sistemas coexistem sem conflito.

   Como usar:
     <form class="form-grid">
       <div class="form-section">Título da seção</div>   linha inteira
       <div class="field">            label + controle, linha inteira
         <label>Nome</label><input>
       </div>
       <div class="field col-2"> ... </div>               metade
       <div class="field col-3"> ... </div>               1/3
       <div class="field col-4"> ... </div>               1/4
       <div class="field col-2">                          grupo (DDD + número)
         <label>Telefone</label>
         <div class="field-group">
           <input class="fg-narrow">  <input>
         </div>
       </div>
       <div class="form-actions"> ...botões... </div>      linha inteira
     </form>

   No celular todas as colunas viram largura total automaticamente;
   os .field-group (DDD + número) continuam lado a lado.
   Ajuste o espaçamento trocando --form-gap no .form-grid.
   ========================================================================== */

.form-grid {
  --form-gap: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--form-gap);
}
.form-grid > * {
  flex: 1 1 100%;      /* padrão: linha inteira */
  min-width: 0;
  box-sizing: border-box;
}

/* Campo: label em cima, controle embaixo */
.form-grid .field { display: flex; flex-direction: column; gap: .45rem; }

/* Colunas (proporção descontando o gap) */
.form-grid .col-2 { flex: 1 1 calc(50%     - (var(--form-gap) * 1 / 2)); }
.form-grid .col-3 { flex: 1 1 calc(33.333% - (var(--form-gap) * 2 / 3)); }
.form-grid .col-4 { flex: 1 1 calc(25%     - (var(--form-gap) * 3 / 4)); }

/* Grupo de controles na mesma linha (ex.: DDD + número, valor + moeda) */
.form-grid .field-group { display: flex; gap: .5rem; align-items: flex-start; }
.form-grid .field-group > * { flex: 1 1 auto; min-width: 0; }
.form-grid .field-group .fg-narrow { flex: 0 0 4.5rem; }   /* campo estreito, ex.: DDD */
.form-grid .field-group .fg-2 { flex: 2 1 0; }             /* pesos relativos opcionais */
.form-grid .field-group .fg-3 { flex: 3 1 0; }

/* Título / separador de seção ? ocupa a linha inteira */
.form-grid .form-section { flex-basis: 100%; }

/* Linha de botões */
.form-grid .form-actions {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

/* Controles preenchem a largura do seu contêiner */
.form-grid .field input,
.form-grid .field select,
.form-grid .field textarea,
.form-grid .field-group input,
.form-grid .field-group select { width: 100%; box-sizing: border-box; }


.form-grid .field-options {
  --field-options-gap: .6rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--field-options-gap);
  align-items: center;
}

/* Empilha as opções (uma embaixo da outra) */
.form-grid .field-options--stack {
  flex-direction: column;
  align-items: flex-start;
}

/* Espaçamento reduzido, para listas mais compactas */
.form-grid .field-options--tight {
  --field-options-gap: .35rem .75rem;
}

/* Cada opção: input + texto lado a lado */
.form-grid .field-options .option {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
}

/* Sobrescreve o width:100% padrão dos controles do .field --
   checkbox/radio não devem esticar */
.form-grid .field-options .option input {
  width: auto;
  margin: 0;
}


/* Responsivo: colunas viram largura total no celular
   (os .field-group permanecem em linha de propósito) */
@media (max-width: 640px) {
  .form-grid .col-2,
  .form-grid .col-3,
  .form-grid .col-4 { flex-basis: 100%; }
}