/* ============================================================
   FLEX SYSTEM - Layout responsivo com Flexbox
   Versao 1.0
   ============================================================

   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.
   ============================================================ */
 
 
/* -- 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); }

/* ============================================================
   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%; }

/* 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
   Classes prontas para campos, labels e grupos comuns
   ============================================================ */

/* Grupo de campo: label + input empilhados */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1 1 0;
}

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

.field input,
.field select,
.field textarea {
  width: 100%;
}

/* 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%; }

/* Linha de acao (botoes no rodape de formulario) */
.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;
}