/* ============================================================
   FLEX SYSTEM - Layout responsivo com Flexbox
   Versao 2.0 - inclui secao de formularios (antigo forms.css)
   ============================================================

   ESTRUTURA PRINCIPAL:
   .row  -> container horizontal (main axis = row)
   .col  -> container vertical   (main axis = column)

   Ambos aceitam variaveis CSS no elemento pai:
   --gap         -> row-gap e column-gap juntos (padrao: 1rem)
   --row-gap     -> espacamento vertical entre filhos (sobrescreve --gap)
   --col-gap     -> espacamento horizontal entre filhos (sobrescreve --gap)
   --wrap        -> flex-wrap (padrao: wrap)
   --align       -> align-items (padrao: stretch)
   --justify     -> justify-content (padrao: flex-start)

   MODIFICADORES ATOMICOS:
   .row--*, .col--* alteram o comportamento de cada instancia.

   FORMULARIOS (a partir da secao "FORM-GRID" mais abaixo):
   .form-grid   -> container do formulario, cada filho ocupa a
                   linha inteira por padrao (diferente de .row)
   .fcol-2/3/4  -> fracao de linha DENTRO do form-grid, com
                   colapso automatico para 100% no celular
   .field       -> label + input empilhados (mesma classe dentro
                   ou fora do form-grid); checkbox/radio nunca esticam
   .form-section -> titulo/separador de secao, linha inteira
   .form-actions -> reaproveita a definicao unica la embaixo,
                   so ganha flex-basis:100% quando filho do form-grid
   ============================================================ */
 
 
/* -- Variaveis globais -------------------------------------- */

:root {
  --gap-xs:  0.25rem;
  --gap-sm:  0.5rem;
  --gap-md:  1rem;
  --gap-lg:  1.5rem;
  --gap-xl:  2rem;
  --gap-2xl: 3rem;

  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}

/* ============================================================
   ROW - container horizontal
   ============================================================ */

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: var(--wrap, wrap);
  row-gap: var(--row-gap, var(--gap, 1rem));
  column-gap: var(--col-gap, var(--gap, 1rem));
  align-items: var(--align, stretch);
  justify-content: var(--justify, flex-start);
}

/* -- Row: justify-content ---------------------------------- */

.row--start       { --justify: flex-start; }
.row--end         { --justify: flex-end; }
.row--center      { --justify: center; }
.row--between     { --justify: space-between; }
.row--around      { --justify: space-around; }
.row--evenly      { --justify: space-evenly; }

/* -- Row: align-items -------------------------------------- */

.row--top         { --align: flex-start; }
.row--middle      { --align: center; }
.row--bottom      { --align: flex-end; }
.row--stretch     { --align: stretch; }
.row--baseline    { --align: baseline; }

/* -- Row: wrap --------------------------------------------- */

.row--nowrap      { --wrap: nowrap; }
.row--wrap        { --wrap: wrap; }
.row--wrap-rev    { --wrap: wrap-reverse; }

/* -- Row: gap ---------------------------------------------- */

.row--gap-0       { --gap: 0; }
.row--gap-xs      { --gap: var(--gap-xs); }
.row--gap-sm      { --gap: var(--gap-sm); }
.row--gap-md      { --gap: var(--gap-md); }
.row--gap-lg      { --gap: var(--gap-lg); }
.row--gap-xl      { --gap: var(--gap-xl); }
.row--gap-2xl     { --gap: var(--gap-2xl); }

/* -- Row: row-gap (espacamento vertical - entre linhas quebradas) */

.row--rgap-0      { --row-gap: 0; }
.row--rgap-xs     { --row-gap: var(--gap-xs); }
.row--rgap-sm     { --row-gap: var(--gap-sm); }
.row--rgap-md     { --row-gap: var(--gap-md); }
.row--rgap-lg     { --row-gap: var(--gap-lg); }
.row--rgap-xl     { --row-gap: var(--gap-xl); }
.row--rgap-2xl    { --row-gap: var(--gap-2xl); }

/* -- Row: col-gap (espacamento horizontal - entre colunas) -- */

.row--cgap-0      { --col-gap: 0; }
.row--cgap-xs     { --col-gap: var(--gap-xs); }
.row--cgap-sm     { --col-gap: var(--gap-sm); }
.row--cgap-md     { --col-gap: var(--gap-md); }
.row--cgap-lg     { --col-gap: var(--gap-lg); }
.row--cgap-xl     { --col-gap: var(--gap-xl); }
.row--cgap-2xl    { --col-gap: var(--gap-2xl); }

/* ============================================================
   COL - container vertical
   ============================================================ */

.col {
  display: flex;
  flex-direction: column;
  flex-wrap: var(--wrap, nowrap);
  row-gap: var(--row-gap, var(--gap, 0.75rem));
  column-gap: var(--col-gap, var(--gap, 0.75rem));
  align-items: var(--align, stretch);
  justify-content: var(--justify, flex-start);
}

/* -- Col: justify-content (eixo vertical) ------------------ */

.col--start       { --justify: flex-start; }
.col--end         { --justify: flex-end; }
.col--center      { --justify: center; }
.col--between     { --justify: space-between; }
.col--around      { --justify: space-around; }
.col--evenly      { --justify: space-evenly; }

/* -- Col: align-items (eixo horizontal) -------------------- */

.col--left        { --align: flex-start; }
.col--right       { --align: flex-end; }
.col--center-x    { --align: center; }
.col--stretch     { --align: stretch; }

/* -- Col: gap ---------------------------------------------- */

.col--gap-0       { --gap: 0; }
.col--gap-xs      { --gap: var(--gap-xs); }
.col--gap-sm      { --gap: var(--gap-sm); }
.col--gap-md      { --gap: var(--gap-md); }
.col--gap-lg      { --gap: var(--gap-lg); }
.col--gap-xl      { --gap: var(--gap-xl); }
.col--gap-2xl     { --gap: var(--gap-2xl); }

/* -- Col: row-gap (espacamento vertical - entre itens empilhados) */

.col--rgap-0      { --row-gap: 0; }
.col--rgap-xs     { --row-gap: var(--gap-xs); }
.col--rgap-sm     { --row-gap: var(--gap-sm); }
.col--rgap-md     { --row-gap: var(--gap-md); }
.col--rgap-lg     { --row-gap: var(--gap-lg); }
.col--rgap-xl     { --row-gap: var(--gap-xl); }
.col--rgap-2xl    { --row-gap: var(--gap-2xl); }

/* -- Col: col-gap (espacamento horizontal - relevante com wrap) */

.col--cgap-0      { --col-gap: 0; }
.col--cgap-xs     { --col-gap: var(--gap-xs); }
.col--cgap-sm     { --col-gap: var(--gap-sm); }
.col--cgap-md     { --col-gap: var(--gap-md); }
.col--cgap-lg     { --col-gap: var(--gap-lg); }
.col--cgap-xl     { --col-gap: var(--gap-xl); }
.col--cgap-2xl    { --col-gap: var(--gap-2xl); }

/* Grupo de campo: label + input empilhados (uso geral e dentro do
   form-grid). Fica ANTES da secao "FILHOS FLEX" de proposito: assim,
   quando combinado com um utilitario tipo .grow-0 ou .f-narrow no
   mesmo elemento, o utilitario (que vem depois no arquivo) ganha o
   empate de especificidade e consegue sobrescrever o flex-grow/
   flex-shrink/flex-basis que o .field define por padrao. */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1 1 0;
}

/* ============================================================
   FILHOS FLEX - classes para itens dentro de .row / .col
   ============================================================ */

/* Proporcao (em .row) */
.f-1  { flex: 1 1 0; }
.f-2  { flex: 2 1 0; }
.f-3  { flex: 3 1 0; }
.f-4  { flex: 4 1 0; }
.f-5  { flex: 5 1 0; }

/* Tamanho fixo, sem crescer nem encolher */
.f-auto    { flex: 0 0 auto; }
.f-full    { flex: 0 0 100%; }
.f-narrow  { flex: 0 0 4.5rem; }  /* campo estreito, ex.: DDD de telefone */

/* Tamanho minimo com crescimento - quebra de linha automatica */
.f-min-160 { flex: 1 1 160px; }
.f-min-200 { flex: 1 1 200px; }
.f-min-240 { flex: 1 1 240px; }
.f-min-280 { flex: 1 1 280px; }
.f-min-320 { flex: 1 1 320px; }

/* Grow - permite ou proibe crescimento */
.grow          { flex-grow: 1; }   /* cresce para preencher espaco disponivel */
.grow-0        { flex-grow: 0; }   /* nao cresce (mantem tamanho base) */

/* Shrink - permite ou proibe encolhimento */
.shrink        { flex-shrink: 1; } /* encolhe se necessario (comportamento padrao) */
.shrink-0      { flex-shrink: 0; } /* nao encolhe, mantem tamanho mesmo sem espaco */

/* Wrap - para containers aninhados (.row ou .col usados como filhos) */
.wrap          { flex-wrap: wrap; }         /* filhos internos podem quebrar linha */
.nowrap        { flex-wrap: nowrap; }       /* filhos internos nunca quebram linha */
.wrap-rev      { flex-wrap: wrap-reverse; } /* quebra na direcao inversa */

/* Alinhamento individual do item */
.self-start    { align-self: flex-start; }
.self-end      { align-self: flex-end; }
.self-center   { align-self: center; }
.self-stretch  { align-self: stretch; }
.self-baseline { align-self: baseline; }

/* Push automatico via margin auto */
.push-left     { margin-right: auto; }
.push-right    { margin-left: auto; }
.push-top      { margin-bottom: auto; }
.push-bottom   { margin-top: auto; }

/* ============================================================
   RESPONSIVIDADE
   Breakpoints via @media
   Use .stack-sm / .stack-md para fazer um .row virar coluna
   ============================================================ */

/* Empilha .row como coluna abaixo do breakpoint */
@media (max-width: 768px) {
  .stack-md {
    flex-direction: column;
  }
  .stack-md > * {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .stack-sm {
    flex-direction: column;
  }
  .stack-sm > * {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* Oculta em mobile */
@media (max-width: 768px) {
  .hide-md { display: none !important; }
}
@media (max-width: 480px) {
  .hide-sm { display: none !important; }
}

/* ============================================================
   UTILITARIOS DE FORMULARIO (uso geral, fora do form-grid)
   ============================================================ */

.field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: inherit;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  box-sizing: border-box;
}

.field input[type="checkbox"],
.field input[type="radio"] { width: auto; }

/* Campo com tamanho minimo explicito */
.field--min-160 { flex: 1 1 160px; }
.field--min-200 { flex: 1 1 200px; }
.field--min-240 { flex: 1 1 240px; }
.field--full    { flex: 0 0 100%; }

/* Alinha o conteudo do field pelo FUNDO da caixa - use quando um
   field mais curto (ex.: checkbox unico, sem label acima) fica ao
   lado de fields com label+input, para o checkbox alinhar com a
   linha do input dos vizinhos, nao com a linha do label deles */
.field--end { justify-content: flex-end; }

/* Campo de checkbox/radio no MESMO padrao dos demais campos:
   label em cima, controle embaixo (nao lado a lado). O controle
   fica com tamanho proximo ao de um input de texto (nao o
   quadradinho pequeno padrao do navegador), alinhado ao inicio
   do field (igual a um input de texto), com
   uma margem pequena em relacao ao label.
   Comum a checkbox e radio - use exatamente como um field comum:
     <div class="field field--check">
       <label for="campo">Ativo</label>
       <input type="checkbox" id="campo" name="campo" value="1">
     </div>
*/
.field--check {
  --field-check-size: 1.4rem;
}
.field--check input[type="checkbox"],
.field--check input[type="radio"] {
  width: var(--field-check-size);
  height: var(--field-check-size);
  align-self: flex-start;
  margin: .3rem 0 0;
}

/* Linha de acao (botoes no rodape de formulario ou de qualquer bloco) */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: var(--justify, flex-end);
  padding-top: 0.5rem;
}

.form-actions--start   { --justify: flex-start; }
.form-actions--between { --justify: space-between; }

.row_glued{
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
}

/* ============================================================
   FORM-GRID - grid especifico de formulario (ex-forms.css)
   Diferenca do .row: cada filho direto ocupa a linha inteira
   por padrao, a menos que leve .fcol-2/3/4. Isso evita ter que
   marcar toda label+input como "linha inteira" manualmente.
   ============================================================ */

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

/* Fracoes de linha, so fazem sentido dentro do form-grid.
   Nome comeca com "f" (de form) para nao colidir com .col
   (container vertical) */
.form-grid .fcol-2 { flex: 1 1 calc(50%     - (var(--form-gap) * 1 / 2)); }
.form-grid .fcol-3 { flex: 1 1 calc(33.333% - (var(--form-gap) * 2 / 3)); }
.form-grid .fcol-4 { flex: 1 1 calc(25%     - (var(--form-gap) * 3 / 4)); }

@media (max-width: 640px) {
  .form-grid .fcol-2,
  .form-grid .fcol-3,
  .form-grid .fcol-4 { flex-basis: 100%; }
}

/* .field ja cobre o campo (label + controle) tanto fora quanto
   dentro do form-grid - nao existe mais uma versao separada aqui */

/* Titulo / separador de secao - ocupa a linha inteira */
.form-grid .form-section { flex-basis: 100%; }

/* .form-actions ja esta definido acima (uso geral); aqui so
   garantimos que ele ocupe a linha inteira quando for filho
   direto do form-grid */
.form-grid > .form-actions { flex-basis: 100%; }