/*
 * A2 Social V17.8.2 — UI Consistency
 * Padronização de espaçamentos entre páginas sem alterar cores, conteúdo ou funções.
 * Este arquivo deve ser carregado por último para consolidar apenas layout/spacing.
 */

:root{
  --a2-page-gap:18px;
  --a2-grid-gap:16px;
  --a2-page-top-gap:22px;
  --a2-actions-gap:10px;
}

/* Evita estouro horizontal em qualquer módulo do shell principal. */
.main,
.main > *,
.main .card,
.main [class*="-grid"],
.main .grid,
.main .table-responsive,
.main .table-wrap,
.main .a2-gov-table-wrap{
  min-width:0;
}

/* Cabeçalho de página: mesma distância do primeiro bloco em todos os módulos. */
.main > .page-top{
  margin-bottom:var(--a2-page-top-gap);
}

/*
 * Ritmo vertical entre os blocos principais.
 * Não usa .main > * + * para não deslocar modais, overlays, scripts ou componentes fixos.
 */
.main > :where(
  .card,
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  [class*="-grid"],
  [class*="-two"],
  [class*="-board"],
  .metric-strip,
  .tabs,
  .alert,
  .content-card,
  .table,
  .table-responsive,
  .table-wrap,
  .page-actions,
  form
) + :where(
  .card,
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  [class*="-grid"],
  [class*="-two"],
  [class*="-board"],
  .metric-strip,
  .tabs,
  .alert,
  .content-card,
  .table,
  .table-responsive,
  .table-wrap,
  .page-actions,
  form
){
  margin-top:var(--a2-page-gap);
}

/* Também cobre os novos módulos que usam section/article como bloco raiz. */
.main > section + section,
.main > section + article,
.main > article + section,
.main > article + article{
  margin-top:var(--a2-page-gap);
}

/* Cards consecutivos dentro de wrappers que não são grid/flex recebem respiro previsível. */
.main > .card + .card{
  margin-top:var(--a2-page-gap);
}

/* Grids novos: Cliente 360, Governança e A2 Assistant seguem o mesmo gap-base. */
.main .a2-c360-grid,
.main .a2-gov-grid,
.main .a2-gov-two,
.main .a2-suite-grid:not(.compact){
  gap:var(--a2-grid-gap);
}

/* Os grids do A2 Assistant já trazem margem própria; padroniza para o ritmo da página. */
.main > .a2-suite-grid:not(.compact){
  margin-top:var(--a2-page-gap);
  margin-bottom:var(--a2-page-gap);
}

/* Cliente 360 não possuía margem entre grids consecutivos. */
.main > .a2-c360-grid + .a2-c360-grid,
.main > .a2-c360-grid + .card,
.main > .card + .a2-c360-grid{
  margin-top:var(--a2-page-gap);
}

/* Saúde/Governança: evita seções coladas depois do painel de métricas. */
.main > .a2-gov-grid + .card,
.main > .card + .a2-gov-grid,
.main > .a2-gov-two + .a2-gov-two,
.main > .a2-gov-two + .card,
.main > .card + .a2-gov-two{
  margin-top:var(--a2-page-gap);
}

/* Ações mantêm espaçamento uniforme sem forçar largura dos botões no desktop. */
.main .page-actions,
.main .a2-suite-actions,
.main .a2-c360-actions,
.main .a2-gov-switches,
.main .a2-inline-form{
  gap:var(--a2-actions-gap);
}

/* Evita margem externa duplicada em formulários embutidos em cards/toolbars. */
.main .card > form:first-child,
.main .card > form:last-child,
.main .page-actions form,
.main .a2-suite-actions form,
.main .a2-c360-actions form,
.main .a2-gov-switches form,
.main .a2-inline-form{
  margin-top:0;
  margin-bottom:0;
}

/* Tabelas e conteúdos largos não devem empurrar a página horizontalmente. */
.main .table-responsive,
.main .table-wrap,
.main .a2-gov-table-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Notebook/tablet: reduz o ritmo sem comprimir conteúdo. */
@media (min-width:901px) and (max-width:1280px){
  :root{
    --a2-page-gap:16px;
    --a2-grid-gap:14px;
    --a2-page-top-gap:18px;
    --a2-actions-gap:9px;
  }
}

/* Tablet e celular. */
@media (max-width:900px){
  :root{
    --a2-page-gap:14px;
    --a2-grid-gap:14px;
    --a2-page-top-gap:16px;
    --a2-actions-gap:8px;
  }

  .main > .page-top{
    margin-bottom:var(--a2-page-top-gap);
  }

  .main .a2-c360-grid,
  .main .a2-gov-grid,
  .main .a2-gov-two,
  .main .a2-suite-grid:not(.compact){
    gap:var(--a2-grid-gap);
  }
}

/* Celulares pequenos: mantém separação sem desperdiçar área útil. */
@media (max-width:520px){
  :root{
    --a2-page-gap:12px;
    --a2-grid-gap:12px;
    --a2-page-top-gap:14px;
    --a2-actions-gap:8px;
  }
}