/* ==========================================================================
   RESPONSIVIDADE
   Sem barra lateral, a adaptação é da grade e do cabeçalho. Nenhuma
   informação some em telas menores — apenas se reorganiza.
   ========================================================================== */

/* As faixas de indicador não seguem o afrouxamento geral de colunas.

   A largura de cada cartão já foi escolhida pela tela a partir de quantos
   indicadores a aba tem, justamente para que a última linha feche. Se as
   regras gerais mexerem nela — três por linha onde a conta era quatro —
   volta a sobrar um retângulo vazio no fim da faixa.

   Antes isto era um valor fixo aqui (um terço e um quarto), e por isso a
   largura calculada não chegava à tela: a folha de estilo vencia. Agora a
   folha só repete o que a classe pede; quem escolhe é quem sabe a conta. */
.grid--hero > .col-3,  .grid--kpi > .col-3  { grid-column: span 3; }
.grid--hero > .col-4,  .grid--kpi > .col-4  { grid-column: span 4; }
.grid--hero > .col-6,  .grid--kpi > .col-6  { grid-column: span 6; }
.grid--hero > .col-12, .grid--kpi > .col-12 { grid-column: span 12; }

@media (max-width: 1440px) {
  .content__inner { padding: var(--space-5); }
  .col-2 { grid-column: span 3; }
  .col-3 { grid-column: span 4; }
}

@media (max-width: 1180px) {
  .col-2, .col-3, .col-4 { grid-column: span 6; }
  .col-5, .col-7, .col-8, .col-9 { grid-column: span 12; }

  /* Os destaques continuam com a largura que a aba pediu — dois ou três
     cabem bem em 1180px. Só os compactos passam a dois por linha.

     O seletor precisa ter o mesmo peso do passe-livre lá em cima: escrito
     como ".grid--kpi > *", ele perdia para ".grid--kpi > .col-3" e a largura
     calculada para o desktop seguia valendo no celular — quatro cartões
     espremidos em 375px, com o título quebrado em três linhas. */
  .grid--kpi > [class*="col-"] { grid-column: span 6; }
}

@media (max-width: 900px) {
  .grid--hero > [class*="col-"] { grid-column: span 12; }
  .grid--kpi > [class*="col-"]  { grid-column: span 6; }

  .topbar {
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    row-gap: var(--space-3);
  }

  .tabs {
    order: 3;
    width: 100%;
    padding-bottom: 2px;
  }

  .topbar__actions { margin-left: auto; }

  .content__inner { padding: var(--space-4); }
  .col-6 { grid-column: span 12; }
}

/* --- Celular --------------------------------------------------------------

   Abaixo de 640px a tela é um telefone, e o painel deixa de ser uma grade:
   vira uma coluna. Nada é escondido — cada cartão passa a ocupar a largura
   inteira, e o que não cabe em pé (as abas, a barra de filtros) rola no
   sentido horizontal, dentro da própria faixa. */
@media (max-width: 640px) {
  :root {
    --topbar-height: 60px;
    --text-xl: 1.5rem;
  }

  /* O nome da unidade sai do cabeçalho: em 375px ele empurra as abas para
     fora da tela, e quem abre o painel já sabe de que loja se trata. */
  .brand__name { font-size: var(--text-xs); }
  .brand__unit { display: none; }
  .tab { height: 32px; padding: 0 var(--space-3); font-size: var(--text-xs); }

  .content__inner { padding: var(--space-3); }
  .grid { gap: var(--space-3); }
  .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
  .grid--hero > [class*="col-"] { grid-column: span 12; }
  .grid--kpi > [class*="col-"] { grid-column: span 6; }

  /* Contagem ímpar deixaria o último cartão sozinho em meia linha */
  .grid--kpi > [class*="col-"]:last-child:nth-child(odd) { grid-column: span 12; }

  /* Filtros compactos, dois por linha. Rolar a faixa de lado cortaria as
     listas que abrem por baixo de cada botão. */
  .filter__trigger { padding: 0 var(--space-3); font-size: var(--text-xs); }
  .filter__caption { max-width: 96px; }
  .filter__panel { width: min(300px, calc(100vw - 2 * var(--space-3))); }
  .filterbar__summary { width: 100%; }

  /* A faixa de abertura empilha: título em cima, números embaixo */
  .overview-summary { padding: var(--space-3) var(--space-4); }
  .overview-summary__figures { gap: var(--space-3); }
  .overview-summary__item { min-width: 0; flex: 1; }
  .overview-summary__item + .overview-summary__item {
    padding-left: var(--space-3);
  }

  /* O número principal e os de apoio deixam de dividir a linha */
  .module-card__support {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }

  .toast-stack { right: var(--space-3); left: var(--space-3); bottom: var(--space-3); }
  .toast { width: 100%; }
}