*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.4;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.app {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  gap: var(--gap);
  padding: var(--gap) var(--pad);
  max-width: 1600px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------ barra superior */
.topbar { display: flex; align-items: center; gap: var(--pad); flex-wrap: wrap; }
.topbar__titulo { margin: 0; font-size: 18px; font-weight: 600; }
.topbar__periodo { color: var(--text-muted); font-size: var(--fs-small); }

.abas {
  display: flex; gap: 6px; margin-left: auto; overflow-x: auto; max-width: 100%; min-width: 0;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.aba {
  appearance: none; border: 0; background: transparent; color: var(--text-secondary); font: inherit;
  padding: 6px 14px; border-radius: var(--radius-pill); white-space: nowrap; cursor: pointer;
}
/* O hover não vale para a aba selecionada: com especificidade maior, ele pintaria a pílula clara de escuro. */
.aba:hover:not([aria-disabled="true"]):not([aria-selected="true"]) { background: var(--surface-raised); }
.aba[aria-selected="true"] { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.aba[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; }
:is(.aba, .filtro, .botao-tabela, .botao, .item-lista, .pares__item, .campo, .etiqueta-filtro__remover, .opcao-departamento input):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ------------------------------------------------------------------ filtros */
.filtros { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; }
.filtros__grupo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filtros__rotulo { color: var(--text-muted); font-size: var(--fs-small); text-transform: uppercase; margin-right: 2px; }
.filtros__nota { color: var(--text-muted); font-size: var(--fs-small); margin: 0; flex-basis: 100%; }
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 4px 10px; }
.chip[aria-pressed="true"] .etiqueta { color: var(--accent-text); }
.filtro:disabled { opacity: 0.45; cursor: default; }

/* Lista de departamentos: popover abaixo do botão, com busca e caixas de seleção. */
.filtro-departamento { position: relative; }
#botao-departamentos { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.popover {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 320px; max-width: calc(100vw - 2 * var(--gap));
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: var(--surface-panel); border: 1px solid var(--border); border-radius: var(--radius-panel);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.45);
}
.popover[hidden] { display: none; }
.lista-departamentos { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; }
.opcao-departamento {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer;
}
.opcao-departamento:hover { background: var(--surface-raised); }
.opcao-departamento input { accent-color: var(--accent); margin: 0; }
.opcao-departamento__nome { flex: 1; min-width: 0; }
.opcao-departamento__valor { color: var(--text-muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Etiquetas dos filtros ativos, removíveis. */
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; flex-basis: 100%; }
.etiquetas[hidden] { display: none; }
.etiqueta-filtro {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border-radius: var(--radius-pill);
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-primary); font-size: var(--fs-small);
}
.etiqueta-filtro__remover {
  appearance: none; border: 0; background: transparent; color: var(--text-secondary); font: inherit; cursor: pointer;
  width: 20px; height: 20px; border-radius: 50%; line-height: 1;
}
.etiqueta-filtro__remover:hover { background: var(--border); color: var(--text-primary); }
.filtro, .botao, .botao-tabela {
  appearance: none; border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
  font: inherit; padding: 4px 12px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
}
:is(.filtro, .botao, .botao-tabela):hover:not([aria-disabled="true"]):not([aria-pressed="true"]) { background: var(--surface-raised); }
.filtro[aria-pressed="true"], .botao[aria-pressed="true"], .botao-tabela[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600;
}
.filtro[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.filtro--contraste { flex: none; }
.botao-tabela { font-size: var(--fs-small); padding: 2px 10px; }

/* ------------------------------------------------------------------ painéis */
.conteudo { min-height: 0; }
.painel-aba:not([hidden]) {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-content: start;
}
.painel {
  grid-column: span 12; min-width: 0; min-height: 0;
  background: var(--surface-panel); border: 1px solid var(--border); border-radius: var(--radius-panel);
  padding: 12px var(--pad);
}
.painel--grafico { display: flex; flex-direction: column; }
.painel__cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.painel__titulo { margin: 0; font-size: var(--fs-title); font-weight: 600; }
.painel__subtitulo { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-small); }
.painel__grafico { flex: 1 1 auto; min-height: 0; }
.painel__tabela { flex: 1 1 auto; min-height: 0; overflow: auto; }
.painel__vazio { color: var(--text-muted); }

.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.tabela caption { text-align: left; }
.tabela th, .tabela td { padding: 4px 8px; border-bottom: 1px solid var(--grid); text-align: left; font-weight: 400; }
.tabela thead th { position: sticky; top: 0; background: var(--surface-panel); color: var(--text-muted); font-weight: 600; }
.tabela tbody th { color: var(--text-secondary); }
.tabela td { color: var(--text-primary); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

.aviso-amostra { color: var(--status-warning); font-size: var(--fs-small); }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); }
.etiqueta__ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ------------------------------------------------------------------ Visão Geral */
.kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.kpi {
  background: var(--surface-panel); border: 1px solid var(--border); border-radius: var(--radius-panel);
  padding: 10px 14px; min-width: 0;
}
.kpi__rotulo { margin: 0; color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.kpi__dica { cursor: help; }
.kpi__valor { margin: 2px 0; font-size: var(--fs-kpi); font-weight: 600; line-height: 1.15; }
.kpi__variacao { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }
.kpi__nota { display: block; margin: 0; color: var(--text-muted); font-size: var(--fs-small); }
.variacao { font-weight: 600; }
.variacao--bom { color: var(--status-good); }
.variacao--critico { color: var(--status-critical); }
.variacao--neutro { color: var(--text-secondary); }

.vg-semanal { grid-column: span 8; }
.vg-segmentos { grid-column: span 4; }
.vg-segmentos .painel__grafico { flex: none; height: 32px; }
.vg-segmentos__lista { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.vg-segmentos__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline;
  padding: 3px 0; border-bottom: 1px solid var(--grid); font-size: var(--fs-small); }
.vg-segmentos__item[data-fora="true"] { opacity: 0.35; }
.vg-segmentos__pct { font-weight: 600; font-variant-numeric: tabular-nums; }
.vg-segmentos__valor { color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.vg-deptos { grid-column: span 12; }

/* Blocos de decisão (spec v4.1): lado a lado em 1440, um embaixo do outro no celular. */
.vg-crm, .vg-quadrante { grid-column: span 6; }
.vg-crm__controles { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
.vg-crm__opcoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.vg-crm__corpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap) var(--pad); }
.vg-crm__secao { margin: 0 0 4px; color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.vg-crm__secao[hidden] { display: none; }
.vg-crm__numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.vg-crm__numeros dt { color: var(--text-muted); font-size: var(--fs-small); }
.vg-crm__numeros dd { margin: 0; font-size: 20px; font-weight: 600; white-space: nowrap; }
.vg-crm__mix { height: 26px; margin-top: 6px; }
.vg-crm__legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 2px 0 6px; padding: 0; font-size: var(--fs-small); }
.vg-crm__legenda-item { display: inline-flex; gap: 6px; }
.vg-crm__contagem { font-weight: 600; font-variant-numeric: tabular-nums; }
.vg-crm__nota { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-small); }
.vg-crm__nota--fixa { color: var(--text-secondary); }
.vg-crm__historico { list-style: none; margin: 4px 0 0; padding: 0; }
.vg-crm__frase { padding: 3px 6px; border-bottom: 1px solid var(--grid); color: var(--text-secondary); font-size: var(--fs-small); }
.vg-crm__frase strong { color: var(--text-primary); font-weight: 600; }
.vg-crm__frase[aria-current] { background: var(--surface-raised); color: var(--text-primary); box-shadow: inset 2px 0 0 var(--accent); }

.vg-quadrante { display: grid; grid-template-columns: minmax(0, 1fr) 168px; grid-template-rows: auto minmax(320px, 1fr) auto; column-gap: var(--gap); }
.vg-quadrante > .painel__cabecalho, .vg-quadrante__nota { grid-column: 1 / -1; }
.vg-quadrante > :is(.painel__grafico, .painel__tabela) { grid-column: 1; grid-row: 2; min-height: 320px; }
.vg-quadrante > .painel__tabela { max-height: 360px; }
.vg-quadrante__lado { grid-column: 2; grid-row: 2; }
.vg-quadrante__lado[hidden] { display: none; }
.vg-quadrante[data-vazio="true"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; }
.vg-quadrante__lista { margin: 0; padding: 0 0 0 18px; font-size: var(--fs-small); }
.vg-quadrante__item { padding: 4px 0; border-bottom: 1px solid var(--grid); }
.vg-quadrante__item > span { display: block; }
.vg-quadrante__gap { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.vg-quadrante__nota { margin: 6px 0 0; color: var(--text-secondary); font-size: var(--fs-small); }
.vg-quadrante__nota:empty { display: none; }
.botao-tabela[hidden] { display: none; }

/* ------------------------------------------------------------------ Ficha da Categoria (3 + 6 + 3) */
.ct-esquerda { grid-column: span 3; min-width: 0; min-height: 0; display: grid; gap: var(--gap); }
.ct-lista { display: flex; flex-direction: column; gap: 8px; }
.ct-centro {
  grid-column: span 6; min-width: 0; min-height: 0; display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
.ct-direita { grid-column: span 3; min-width: 0; min-height: 0; display: grid; gap: var(--gap); }
/* Dentro das colunas a grade é própria: o "span 12" geral dos painéis criaria colunas fantasmas. */
:is(.ct-esquerda, .ct-centro, .ct-direita) > .painel { grid-column: auto; }

.campo__rotulo { color: var(--text-muted); font-size: var(--fs-small); }
.campo {
  flex: none; min-width: 0; font: inherit; color: var(--text-primary); background: var(--surface-page);
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px 12px;
}
.campo::placeholder { color: var(--text-muted); }
.ct-ordem { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lista-itens { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1 1 auto; min-height: 0; }
.item-lista {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  appearance: none; border: 0; background: transparent; color: var(--text-primary); font: inherit;
  padding: 5px 8px; border-radius: 8px; cursor: pointer; text-align: left;
}
.item-lista:hover { background: var(--surface-raised); }
.item-lista[aria-current] { background: var(--surface-raised); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.item-lista__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-lista__marca { color: var(--text-muted); font-size: var(--fs-small); font-weight: 400; }
.item-lista__valor { color: var(--text-secondary); font-size: var(--fs-small); font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-lista__variacao { color: var(--text-muted); }
/* Modelo único de seleção (redesenho v3, 0.1): o que está fora da seleção fica a 0,35. */
.item-lista[data-fora="true"] { opacity: 0.35; }

.ct-rotulo { margin: 0 0 4px; color: var(--text-muted); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.02em; }
.ct-cabecalho { display: flex; flex-direction: column; gap: 6px; }
.ct-cabecalho__linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.ct-cabecalho__titulo { margin: 0; font-size: 20px; font-weight: 600; }
.ct-cabecalho__nota { color: var(--text-muted); font-size: var(--fs-small); }
.ct-cabecalho__corpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--gap); align-items: end; }
.ct-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 8px 14px; margin: 0; }
.ct-numeros dt { color: var(--text-muted); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.02em; }
.ct-numeros dt { white-space: nowrap; }
.ct-numeros dd { margin: 0; font-size: 18px; font-weight: 600; white-space: nowrap; }
.ct-numeros .kpi__nota { display: block; }
.ct-quem-compra__grafico { height: 64px; }

.ct-perfil { display: flex; flex-direction: column; overflow: hidden; }
.ct-radar__grafico { flex: 1 1 auto; min-width: 0; min-height: 170px; }
.ct-radar__grafico[hidden] { display: none; }
.item-lista--todos { border-bottom: 1px solid var(--grid); border-radius: 8px 8px 0 0; margin-bottom: 2px; }
.ct-perfil .num { white-space: nowrap; }
.ct-perfil .tabela th, .ct-perfil .tabela td { padding: 4px 4px; }

.ct-cesta__lista { overflow: auto; margin-top: 6px; }
.ct-pares { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--gap); }
.ct-par { padding: 6px 10px; border-radius: 8px; background: var(--surface-page); border: 1px solid var(--grid); min-width: 0; }
.ct-par__frase { margin: 0; font-size: 13px; line-height: 1.35; color: var(--text-secondary); }
.ct-par__frase strong { color: var(--text-primary); font-weight: 600; }
.ct-par__detalhe { margin: 2px 0 0; font-size: var(--fs-small); color: var(--text-muted); }
.ct-par__vezes { color: var(--text-primary); font-weight: 600; }
.pares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pares__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; width: 100%; padding: 2px 6px; border-radius: 6px;
  border-bottom: 1px solid var(--grid);
  appearance: none; border: 0; background: transparent; color: var(--text-primary); font: inherit; text-align: left;
}
button.pares__item { cursor: pointer; }
button.pares__item:hover { background: var(--surface-raised); }
.pares__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); }
.pares__lift { color: var(--text-secondary); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }

.ct-comparacao__tabela { margin-top: 6px; }
.ct-risco__valor { margin: 4px 0 2px; font-size: 22px; font-weight: 600; }
.ct-risco__pct { font-size: var(--fs-body); font-weight: 400; color: var(--text-secondary); }
.ct--vazio :is(.ct-semanal, .ct-cesta, .ct-direita, .ct-risco) { visibility: hidden; }
/* Pares de cesta: a marca dos departamentos que têm pares e o aviso dos que não têm. */
.ct-marca-pares { color: var(--text-secondary); font-weight: 600; }
.ct-sem-pares { padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-secondary); font-size: var(--fs-small); }
.ct-sem-pares p { margin: 0 0 6px; }
.ct-sem-pares__titulo { color: var(--status-warning); font-size: var(--fs-body); font-weight: 600; }

/* ------------------------------------------------------------------ Produtos */
.pd-resumo { grid-column: 1 / -1; margin: 0; padding: 8px var(--pad); font-size: 15px; color: var(--text-secondary);
  background: var(--surface-panel); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.pd-resumo strong { color: var(--text-primary); }
.pd-marcas { grid-column: span 12; display: flex; flex-direction: column; min-height: 0; }
.pd-marcas__tabela { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: 4px; }
.pd-rede { grid-column: span 8; }
.pd-pares { grid-column: span 4; display: flex; flex-direction: column; min-height: 0; }
.pd-pares__lista { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: 6px; grid-template-columns: minmax(0, 1fr); align-content: start; }
.pd-tabela tbody tr { cursor: pointer; }
.pd-tabela tbody tr:hover { background: var(--surface-raised); }
.pd-tabela tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pd-tabela td, .pd-tabela th { white-space: nowrap; }
.pd-linha--fora { opacity: 0.35; }
.pd-de { color: var(--text-muted); font-size: var(--fs-small); }
.pd-barra { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--grid); vertical-align: middle; }
.pd-barra > span { display: block; height: 100%; border-radius: 3px; background: var(--seq-4); }

/* ------------------------------------------------------------------ aba Laboratório */
.lb-roc { grid-column: span 7; }
.lb-matriz { grid-column: span 5; display: flex; flex-direction: column; min-height: 0; }
.lb-clv { grid-column: span 6; }
.lb-desconto { grid-column: span 6; }
.lb-matrizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: 8px; }
.lb-mat__titulo { margin: 0 0 4px; font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
.lb-mat__corte { color: var(--text-muted); font-weight: 400; font-size: var(--fs-small); }
.lb-mat__tabela { width: 100%; }
.lb-mat__tabela th { color: var(--text-muted); font-weight: 600; font-size: var(--fs-small); }
.lb-cel { font-size: 20px; font-weight: 600; color: var(--text-secondary); }
.lb-cel--acerto { color: var(--text-primary); background: var(--surface-raised); }
.lb-mat__metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; margin: 8px 0 0; }
.lb-mat__metricas dt, .lb-estatisticas dt { color: var(--text-muted); font-size: var(--fs-small); }
.lb-mat__metricas dd, .lb-estatisticas dd { margin: 0; font-weight: 600; color: var(--text-primary); }
.lb-conclusao { margin: auto 0 0; padding-top: 8px; color: var(--text-secondary); font-size: var(--fs-small); }
.lb-conclusao p { margin: 0 0 4px; }
.lb-backtest { flex: none; margin-top: 6px; }
.lb-backtest__titulo { margin: 0 0 4px; color: var(--text-secondary); font-size: var(--fs-small); }
.lb-backtest__tabela { width: 100%; }
.lb-backtest__tabela :is(th, td) { padding-top: 1px; padding-bottom: 1px; font-size: var(--fs-small); }
.lb-backtest__tabela td { white-space: nowrap; }
.lb-melhor { color: var(--text-primary); font-weight: 600; }
.lb-linha--fora { opacity: 0.4; }
.lb-estatisticas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 0; }
.lb-estatisticas__nota { display: block; color: var(--text-muted); font-size: var(--fs-small); }

/* ------------------------------------------------------------------ rodapé */
.rodape { color: var(--text-muted); font-size: var(--fs-small); border-top: 1px solid var(--border); padding-top: 8px; }
.rodape strong { color: var(--text-secondary); font-weight: 600; }
.rodape__link { color: var(--text-secondary); font-weight: 600; }
.rodape__link:hover { color: var(--text-primary); }
.rodape__link:focus-visible, .topbar__voltar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar__voltar { margin-left: auto; text-decoration: none; }

/* ------------------------------------------------------------------ desktop: cada aba cabe na tela, sem rolar */
@media (min-width: 1024px) and (min-height: 700px) {
  .app { height: 100vh; min-height: 0; }
  .painel-aba:not([hidden]) { height: 100%; }
  /* Com os blocos de decisão, a Visão Geral passa de uma tela e é a única aba que rola (spec v4.1, B4). */
  .app:has(.vg:not([hidden])) { height: auto; min-height: 100vh; }
  .vg:not([hidden]) { height: auto; grid-template-rows: auto 300px auto 300px; }
  .ct { grid-template-rows: minmax(0, 1fr); align-content: stretch; }
  .pd { grid-template-rows: auto minmax(0, 1.45fr) minmax(0, 1fr); align-content: stretch; }
  .lb { grid-template-rows: minmax(0, 0.85fr) minmax(0, 1.15fr); align-content: stretch; }
  .ct-centro { grid-template-rows: auto 176px minmax(0, 1fr); }
  .ct-direita { grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); }
  .ct--todos .ct-direita { grid-template-rows: auto minmax(0, 1fr); }
  .ct-esquerda { grid-template-rows: minmax(0, 1fr) auto; }
  .ct-lista { min-height: 0; }
}

/* ------------------------------------------------------------------ telas menores: blocos empilhados */
@media (max-width: 1023px), (max-height: 699px) {
  .painel-aba:not([hidden]) > * { grid-column: 1 / -1; }
  .painel__grafico { flex: none; height: 300px; }
  .painel__tabela { flex: none; max-height: 300px; }
  .lista-itens { flex: none; max-height: 260px; }
  .ct-cabecalho__corpo { grid-template-columns: minmax(0, 1fr); }
  .pd-pares__lista, .pd-marcas__tabela { max-height: 420px; }
  .pd-tabela :is(th, td):nth-child(2), .pd-tabela :is(th, td):nth-child(6) { display: none; }
  .pd-tabela :is(th, td) { padding: 4px 4px; }
  .pd-barra { width: 26px; }
  .pd-de { display: none; }
  .pd-tabela thead th { white-space: normal; }
  .pd-rede .painel__grafico { height: 420px; }
  .lb-matrizes, .lb-estatisticas { grid-template-columns: minmax(0, 1fr); }
  /* Empilhado: o dinheiro em risco vai para o fim, depois da ficha (no desktop ele fica embaixo da lista). */
  .ct-esquerda { display: contents; }
  .ct-esquerda > .painel { grid-column: 1 / -1; }
  .ct-cesta .painel__grafico { height: auto; }
  .ct-risco { order: 10; }
  .ct-radar__grafico { flex: none; height: 280px; }
  .ct-pares { grid-template-columns: minmax(0, 1fr); }
  .ct-semanal .painel__grafico { height: 180px; }
}
@media (max-width: 767px) {
  .app { padding: var(--gap); }
  .abas { margin-left: 0; width: 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi__valor { font-size: 22px; }
  .painel__grafico { height: 260px; }
  .vg-quadrante { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .vg-quadrante > :is(.painel__grafico, .painel__tabela), .vg-quadrante__lado { grid-column: 1; grid-row: auto; }
  .vg-crm__numeros dd { font-size: 16px; }
  .ct-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}