/**
 * Central de Auditoria — o Dashboard.
 *
 * Nenhuma cor literal: tudo sai de `tokens.css`, como o resto do app. Nenhuma
 * classe `.gv-*` do kit de marca é usada aqui pelo mesmo motivo já registrado
 * no rebrand — as classes deste app não são renomeadas, os TOKENS é que
 * carregam a identidade (azul domina, creme acompanha, laranja destaca).
 *
 * As duas tabelas da Central (os primeiros do ranking de auditores e as
 * últimas auditorias) são AMOSTRAS de até cinco linhas, sem busca, sem
 * paginação e sem ação em massa — cada linha é o atalho para o módulo dono,
 * que tem a listagem de verdade. Por isso elas usam `.central-tabela` e não o
 * componente `DataTable`, que existe para listas paginadas por cursor.
 *
 * A responsividade REORGANIZA, não encolhe: a grade de gráficos vira uma
 * coluna, os cartões viram dois por linha e cada gráfico rola dentro do
 * PRÓPRIO cartão — a página nunca rola na horizontal.
 */

.central { gap: var(--e-5); }

/* --- seção ------------------------------------------------------------------ */

.central-secao {
  /* A navegação por âncora não pode deixar o título debaixo do cabeçalho. */
  scroll-margin-top: calc(var(--header-h) + var(--e-4));
}
.central-secao:focus { outline: none; }
.central-secao:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }

/* Seção que só AGRUPA gráficos: sem fundo nem borda próprios, senão o painel
   vira cartão dentro de cartão — a moldura dupla que mais engorda dashboard. */
.central-secao--limpa {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.central-secao__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-bottom: var(--e-4);
}
.central-secao__topo .cartao__titulo { margin-bottom: 2px; }

.central-secao__descricao {
  margin: 0;
  color: var(--texto-2);
  font-size: var(--txt-sm);
  max-width: 72ch;
}

/* Título de grupo de KPI ("Operação", "Qualidade"): rótulo, não cabeçalho de
   seção — pequeno, em caixa alta, sem concorrer com o título da página. */
.central-grupo {
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-3);
  margin: var(--e-3) 0 0;
}

.central-kpis { gap: var(--e-3); }

/* --- KPI com ícone em quadrado colorido (mockup) -------------------------- */

/* `.metrica` é compartilhada por 17 telas (Agenda, Indicadores, Desempenho,
   Divergências...) — por isso tudo aqui é escopado sob `.central-kpis`, e
   NADA disto entra em `dados.css`. `row-reverse` põe o ícone antes do rótulo
   visualmente sem mudar a ordem do DOM (o rótulo continua sendo o primeiro
   nó, que é o que o leitor de tela lê primeiro). Os tints (`--azul-100`,
   `--conforme-100`, `--atencao-100`, `--falta-100`) já existem em
   tokens.css — nenhum token novo. */
.central-kpis .metrica__cabecalho {
  justify-content: flex-end;
  flex-direction: row-reverse;
  gap: var(--e-3);
}
.central-kpis .metrica__icone {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--raio);
  background: var(--azul-100);
  color: var(--azul-700);
  flex: 0 0 auto;
}
.central-kpis .metrica--ok      .metrica__icone { background: var(--conforme-100); color: var(--conforme); }
.central-kpis .metrica--atencao .metrica__icone { background: var(--atencao-100); color: var(--atencao-texto); }
.central-kpis .metrica--erro    .metrica__icone { background: var(--falta-100); color: var(--crit-critica); }
.central-kpis .metrica--link:hover .metrica__icone { background: var(--azul-100); }

.central-recorte {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--texto-2);
}
.central-recorte strong { color: var(--texto); }

/* --- filtros ------------------------------------------------------------------ */

.central-filtros { display: flex; flex-direction: column; gap: var(--e-3); }

/* Atalhos de período: o filtro mais trocado da tela, a um clique. Rolam na
   horizontal no celular em vez de quebrar em três fileiras de botão. */
.chips-periodo {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.chip-periodo {
  flex: 0 0 auto;
  font: inherit;
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-2);
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: var(--e-2) var(--e-4);
  min-height: 2.25rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip-periodo:hover { border-color: var(--azul-300); color: var(--texto); }
.chip-periodo:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }
.chip-periodo[aria-pressed='true'] {
  background: var(--azul-900);
  border-color: var(--azul-900);
  color: var(--neutro-0);
}

/* --- faixa de atenção --------------------------------------------------------- */

/* O resto da antiga seção "Prioridades de hoje": uma linha com o contador e o
   caminho para a aba de ação. Barra lateral colorida em vez de fundo inteiro
   pintado — o laranja/vermelho da marca é acento, nunca plano de fundo. */
.faixa-atencao {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--linha-2);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: var(--e-3) var(--e-4);
}
.faixa-atencao--critico { border-left-color: var(--crit-critica); }
.faixa-atencao--alto    { border-left-color: var(--crit-alta); }
.faixa-atencao--ok      { border-left-color: var(--conforme); }

.faixa-atencao__marca { display: inline-flex; flex: 0 0 auto; }
.faixa-atencao--critico .faixa-atencao__marca { color: var(--crit-critica); }
.faixa-atencao--alto .faixa-atencao__marca    { color: var(--crit-alta); }
.faixa-atencao--ok .faixa-atencao__marca      { color: var(--conforme); }

.faixa-atencao__texto {
  flex: 1 1 14rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.faixa-atencao__texto strong { font-weight: 600; }
.faixa-atencao__contadores { display: flex; gap: var(--e-2); flex-wrap: wrap; }

.selo {
  font-size: var(--txt-xs);
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.selo--critico { background: var(--falta-100); color: var(--crit-critica); }
.selo--alto    { background: var(--laranja-100); color: var(--laranja-700); }
.selo--medio   { background: var(--atencao-100); color: var(--atencao-texto); }

/* --- grade de gráficos --------------------------------------------------------- */

.central-graficos {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .central-graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .central-graficos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* O gráfico de série é o que mais sofre com pouca largura: ocupa a linha
     inteira em vez de ser espremido ao lado de uma rosca. */
  .central-grafico--largo { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .central-graficos--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.central-grafico { display: flex; flex-direction: column; min-width: 0; }
.central-grafico .central-secao__topo { margin-bottom: var(--e-3); }

/* Legenda do donut AO LADO (mockup), não embaixo — só dentro de um cartão da
   Central: em `indicadores.css` o padrão continua empilhado/centrado, que é
   certo para aquela tela. `nowrap` + SVG menor é o que permite os dois
   ficarem lado a lado dentro de um terço de coluna; abaixo de 1024px volta a
   empilhar, porque aí a coluna já é a largura inteira do cartão. */
@media (min-width: 1024px) {
  .central-grafico .grafico-rosca {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--e-3);
  }
  .central-grafico .grafico-rosca__svg { width: min(8rem, 32%); }
  .central-grafico .grafico__legenda--lista { flex: 1 1 auto; min-width: 0; }
  /* "Em andamento" é o rótulo mais longo das quatro categorias — sem isto ele
     quebra em duas linhas dentro do terço de coluna e o número/percentual
     descem para uma terceira, desalinhando a legenda inteira. */
  .central-grafico .grafico__legenda-item { flex-wrap: nowrap; white-space: nowrap; }
}

/* --- trio Tendências | Desempenho da equipe | Indicadores importantes ------ */

/* O segundo arranjo do mockup: três cartões lado a lado. 1 → 900px: 2 →
   1280px: 3, e a 900px o terceiro cartão (Indicadores) ocupa a linha
   inteira via `:nth-child` — senão ficaria órfão de meia largura ao lado dos
   outros dois, que já formam um par. */
.central-trio {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .central-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .central-trio > :nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .central-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .central-trio > :nth-child(3) { grid-column: auto; }
}
.central-trio > .central-secao { min-width: 0; }

/* O gráfico rola dentro do PRÓPRIO cartão quando não cabe. Sem isto, um SVG
   largo empurra a página inteira para o lado — o defeito de responsividade
   mais comum em dashboard. */
.central-grafico__area {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* --- dado insuficiente ---------------------------------------------------------- */

/* "Não dá para calcular ainda" é diferente de "deu zero" e de "quebrou". O
   bloco ocupa a altura de um gráfico pequeno para o cartão não colapsar e
   fazer a grade saltar quando um dos três não tem dado. */
.central-insuficiente {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 7rem;
  margin: 0;
  padding: var(--e-4);
  text-align: center;
  color: var(--texto-3);
  font-size: var(--txt-sm);
  background: var(--surface-2);
  border: 1px dashed var(--linha-2);
  border-radius: var(--raio);
}

/* --- erro ------------------------------------------------------------------------ */

.central-erro {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  flex-wrap: wrap;
  border-left: 4px solid var(--falta);
}
.central-erro__icone { color: var(--falta); flex: 0 0 auto; }
.central-erro > div { flex: 1 1 18rem; min-width: 0; }
.central-erro .cartao__titulo { margin-bottom: var(--e-1); }
.central-erro p { margin: 0; }

/* --- colunas ---------------------------------------------------------------- */

.central-colunas {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .central-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .central-colunas--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.central-coluna { min-width: 0; }
.central-coluna__titulo {
  font-size: var(--txt-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-2);
  margin: 0 0 var(--e-2);
}

/* --- comparativo da equipe ------------------------------------------------------ */

.central-comparativo { display: flex; flex-direction: column; gap: var(--e-2); }
.central-comparativo__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}
.central-comparativo__topo .central-coluna__titulo { margin: 0; }

/* Quatro medidas do mesmo conjunto de pessoas: um gráfico e um seletor, não
   quatro grades simultâneas. Segmented control, não abas de página — o
   contorno único deixa claro que são opções de um mesmo controle. */
.seletor-medida {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--linha);
  border-radius: 999px;
  overflow-x: auto;
}
.seletor-medida__opcao {
  flex: 0 0 auto;
  font: inherit;
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--texto-2);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: var(--e-2) var(--e-3);
  min-height: 2rem;
  cursor: pointer;
  white-space: nowrap;
}
.seletor-medida__opcao:hover { color: var(--texto); }
.seletor-medida__opcao:focus-visible { outline: 2px solid var(--azul-500); outline-offset: -2px; }
.seletor-medida__opcao[aria-selected='true'] {
  background: var(--surface);
  color: var(--azul-900);
  box-shadow: var(--sombra);
}

/* --- prioridades e alertas (usados pela aba de ação) ---------------------------- */

.prioridades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.prioridade {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha-2);
  border-radius: var(--raio);
  padding: var(--e-3);
  min-height: var(--toque-min);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.prioridade:hover { box-shadow: var(--sombra); border-color: var(--linha-2); }
.prioridade:active { transform: translateY(1px); }
.prioridade:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }

.prioridade--critico { border-left-color: var(--crit-critica); }
.prioridade--alto    { border-left-color: var(--crit-alta); }
.prioridade--medio   { border-left-color: var(--crit-media); }
.prioridade--normal  { border-left-color: var(--azul-300); }

.prioridade__ordem {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--azul-900);
  color: var(--neutro-0);
  font-size: var(--txt-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.prioridade__marca { flex: 0 0 auto; display: inline-flex; }
.prioridade__marca--critico { color: var(--crit-critica); }
.prioridade__marca--alto    { color: var(--crit-alta); }
.prioridade__marca--medio   { color: var(--crit-media); }
.prioridade__marca--normal  { color: var(--azul-500); }

.prioridade__texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prioridade__texto strong { font-weight: 600; }
.prioridade__total {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: var(--txt-lg);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.prioridade__seta { flex: 0 0 auto; color: var(--texto-3); }

/* --- tendência ---------------------------------------------------------------- */

.tendencia {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--txt-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* A cor vem da DIREÇÃO calculada no servidor (que sabe se, naquela métrica,
   subir é bom), nunca do sinal do número — é o que impede a seta verde em
   "auditorias atrasadas" que cresceram. */
.tendencia--melhora { color: var(--conforme); }
.tendencia--piora   { color: var(--falta); }
.tendencia--estavel { color: var(--texto-2); }
.tendencia--sem-base { color: var(--texto-3); font-weight: 400; font-style: italic; }

/* --- vereditos de tendência ------------------------------------------------------ */

.vereditos {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .vereditos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Dentro do trio Tendências/Desempenho/Indicadores a coluna tem só um terço
   da largura da página — 4 colunas ali espremeria cada mini-card a quase
   nada. Regra POSITIVA e mais específica (não `!important`, que este CSS não
   usa): 2×2 sempre que os vereditos estiverem dentro de `.central-trio`. */
.central-trio .vereditos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.veredito {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--linha-2);
  border-radius: var(--raio);
  padding: var(--e-3);
  min-width: 0;
}
.veredito--melhora { border-top-color: var(--conforme); }
.veredito--piora   { border-top-color: var(--falta); }
.veredito--estavel { border-top-color: var(--neutro-300); }

.veredito__rotulo {
  font-size: var(--txt-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-2);
}
.veredito__valor {
  font-size: var(--txt-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.veredito__leitura {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--txt-xs);
  color: var(--texto-2);
}
.veredito--melhora .veredito__leitura { color: var(--conforme); }
.veredito--piora .veredito__leitura   { color: var(--falta); }
.veredito--sem-base .veredito__leitura { color: var(--texto-3); font-style: italic; }

/* --- variação por loja ----------------------------------------------------------- */

/* O selo de índice de saúde (`.saude`) saiu junto com a tabela loja a loja: o
   índice agora é o comprimento da barra em "melhor/pior desempenho", e um selo
   colorido repetindo o mesmo número ao lado seria a segunda leitura do mesmo
   dado. O que ficou é a linha de VARIAÇÃO, que o gráfico não responde. */

.lista-simples--lojas { display: flex; flex-direction: column; gap: var(--e-1); }

.loja-linha {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  min-height: var(--toque-min);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.loja-linha:hover { background: var(--surface-2); border-color: var(--linha); }
.loja-linha:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }
.loja-linha__nome { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.loja-linha__nome strong { font-weight: 600; }
.loja-linha__numeros { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.loja-linha__valor { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- cartão que é atalho ---------------------------------------------------- */

/* Todo número da Central leva à lista que o explica. O cartão vira <button>
   quando há destino, e ganha a seta — sem isso, nada indicaria que é
   clicável, e o gestor continuaria procurando o dado dentro da própria
   Central (que é justamente o que a reorganização removeu). */
.metrica--link {
  position: relative;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  align-items: stretch;
}
.metrica--link:hover { box-shadow: var(--sombra); border-color: var(--linha-2); }
.metrica--link:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }
.metrica__icone { color: var(--texto-3); flex: 0 0 auto; }
.metrica--link:hover .metrica__icone { color: var(--azul-700); }
.metrica__seta {
  position: absolute;
  bottom: var(--e-3);
  right: var(--e-3);
  color: var(--texto-3);
  opacity: 0;
  transition: opacity .15s ease;
}
.metrica--link:hover .metrica__seta,
.metrica--link:focus-visible .metrica__seta { opacity: 1; color: var(--azul-700); }

/* --- agregados de desempenho, 2×2 dentro do trio ---------------------------- */

/* `.metricas` (dados.css) vira 4 colunas a partir de 768px — certo para uma
   fileira que ocupa a largura da página, errado dentro do trio, onde a
   coluna de Desempenho tem só um terço dela. Sem `!important` (este CSS não
   usa): a mesma media query de `dados.css`, com um seletor mais específico
   (duas classes), decide por especificidade em vez de força bruta. */
@media (min-width: 768px) {
  .metricas.metricas--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- grade de seis KPIs ----------------------------------------------------- */

/* A manchete do painel tem SEIS cartões, não quatro. `.metricas` (dados.css)
   vai até 4 colunas e é compartilhada com a Agenda — este modificador não a
   altera, só reescreve a grade onde ele é aplicado.

   Os degraus são 2 → 3 → 6, e não 2 → 4 → 6: em 4 colunas, seis cartões
   deixariam dois órfãos numa segunda linha pela metade. Em 3, as duas linhas
   ficam cheias. */
.metricas--seis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .metricas--seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Seis colunas só a partir de 1440px, e o número saiu da tela, não do
   gosto: em 1280px (com a barra lateral de 15rem descontada) cada cartão
   fica com ~175px, e rótulos como "Total de auditorias" e "Cumprimento de
   prazo" quebram em três linhas — o cartão cresce para caber o texto e a
   fileira perde o alinhamento que a torna legível de relance. Até lá, duas
   linhas de três leem melhor que uma linha de seis espremidos.
   O mockup pede os seis numa linha só; com o ícone em quadrado (ver acima) o
   cartão ficou um pouco mais largo, mas o risco de quebra de rótulo é o
   mesmo — o degrau fica em 1440px até confirmar com captura de tela real que
   um valor menor não volta a quebrar "Cumprimento de prazo" em três linhas. */
@media (min-width: 1440px) {
  .metricas--seis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --- filtros no cabeçalho --------------------------------------------------- */

/* Classe compartilhada da faixa de ações da página (à direita do título).
   Na Central de Auditoria só tem "Filtros" (os chips de período moraram para
   dentro do drawer, ver `CentralPage#abrirFiltrosAvancados`) e "Atualizar";
   em `/auditorias` (`AuditoriasPage`) ainda inclui os chips de período
   direto no cabeçalho — por isso a regra de encolhimento dos chips abaixo
   continua aqui. `wrap` porque em notebook a fileira inteira não cabe ao
   lado de um título longo — e cair para a linha de baixo é melhor que
   espremer o título. */
.central-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  justify-content: flex-end;
  /* Sem isto a faixa de ações fica do tamanho do seu conteúdo e empurra a
     página inteira para o lado: um item flex tem `min-width: auto` por
     padrão, então `overflow-x: auto` nos chips lá dentro nunca chega a
     valer — o contêiner cresce em vez de o conteúdo rolar. É a mesma
     armadilha que o `minmax(0, 1fr)` do shell resolve nas colunas. */
  min-width: 0;
  max-width: 100%;
}
/* Os chips só podem rolar se puderem encolher. */
.central-acoes .chips-periodo { min-width: 0; }
/* Na Central de Auditoria (não em `/auditorias`, que mantém `flex-end` ao
   lado do título) a faixa agora mora ABAIXO do subtítulo, como primeira
   fileira do conteúdo (`CentralPage#renderConteudo`) — alinhada à esquerda,
   acompanhando o título/subtítulo acima dela em vez de "flutuar" à direita
   sem nada para ancorar visualmente. */
.pilha:has(> .mk-central) > .central-acoes { justify-content: flex-start; }
/* `.pagina-acoes` é do shell e serve a uma dúzia de telas, onde ela contém
   dois ou três botões e nunca precisou encolher. Em vez de mudar a regra
   global, o ajuste é escopado a quem de fato tem uma fileira longa lá
   dentro — as outras páginas não mudam de comportamento. */
.pagina-acoes:has(.central-acoes) { min-width: 0; flex: 1 1 auto; }
/* O seletor de janela do cartão de evolução é a `acao` de `.central-secao__topo`
   (flex) — mesma armadilha do `.central-acoes` acima: sem `min-width: 0` o
   item flex nunca encolhe, o `overflow-x: auto` de `.chips-periodo` (herdado)
   nunca chega a valer, e a fileira de chips empurra o CARTÃO inteiro para
   fora da coluna em telas estreitas (visto em 768px, dentro de
   `.central-graficos--tres`/`.central-trio`, onde o cartão já é 1/3 da
   largura). `max-width: 100%` trava o próprio elemento no espaço que sobrou. */
.chips-periodo--compacto {
  gap: var(--e-1);
  min-width: 0;
  max-width: 100%;
}
.chips-periodo--compacto .chip-periodo {
  font-size: var(--txt-xs);
  padding: var(--e-1) var(--e-3);
  min-height: 2rem;
}

/* --- tabelas de amostra ----------------------------------------------------- */

/* Rola dentro do PRÓPRIO contêiner, como os gráficos: a página nunca rola na
   horizontal. No celular a tabela vira cartão (dados.css) e não há o que
   rolar, mas em tablet a diferença aparece. */
.central-tabela__scroll { overflow-x: auto; }
.central-tabela { font-size: var(--txt-sm); }
.central-tabela .sub { display: block; font-size: var(--txt-xs); }

/* Nome do auditor como texto clicável — a linha inteira não vira botão porque
   a célula de ação já tem o seu, e dois alvos aninhados confundem o foco. */
.central-tabela__nome {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--azul-700);
  text-align: left;
  cursor: pointer;
}
.central-tabela__nome:hover { text-decoration: underline; }
.central-tabela__nome:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }

/* No toque, um link de texto de 22px de altura é um alvo que se erra. O
   padding vertical cresce a ÁREA sem mexer no tamanho da letra, e a margem
   negativa devolve o espaço ao layout — a linha da tabela não engorda. */
@media (pointer: coarse) {
  .central-tabela__nome,
  .central-indicador__loja--link {
    padding-block: var(--e-2);
    margin-block: calc(var(--e-2) * -1);
    /* O link da loja é item de um flex, e num flex a altura vem do
       alinhamento do contêiner, não do padding do filho — sem o mínimo
       explícito o alvo continuava em 25px mesmo com o respiro acima. */
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }
}

/* "Últimas auditorias" no mockup tem 8 colunas (Conformidade e Auditor
   entraram) — mais apertada que as tabelas de 3 colunas da Central, daí a
   fonte um pouco menor. Continua rolando dentro de `.central-tabela__scroll`
   em tablet, e virando cartão por `data-label` no celular (dados.css). */
.central-tabela--larga { font-size: var(--txt-sm); }

/* A tabela de Desempenho, dentro de `.central-trio`, cai numa coluna de ~1/3
   da largura (~300-400px) — de propósito ela rola no lugar de espremer as
   três colunas (nome, auditorias, taxa) até ficarem ilegíveis, mas rolar uma
   tabela de três colunas só para ler "Taxa de conclusão" é fricção alta para
   algo que se resolve encolhendo o texto e deixando o nome quebrar linha.
   Aqui, mais compacta que o padrão de `.central-tabela`, ela cabe inteira na
   maioria das larguras sem precisar de scroll. */
.central-trio .central-tabela {
  font-size: var(--txt-xs);
}
.central-trio .central-tabela th,
.central-trio .central-tabela td {
  padding: var(--e-2) var(--e-1);
  white-space: normal;
}
.central-trio .central-tabela__nome { white-space: normal; }
.central-trio .barra-progresso__trilha { min-width: 2rem; }

/* A cor da conformidade nunca é a única informação: o percentual sempre sai
   em texto ao lado (ou dentro) do `<strong>` — a cor só reforça a leitura de
   quem já está olhando a coluna. Mesmas faixas do resto do painel (98 bom /
   90 aceitável via `renderKpis.faixa`). */
.central-tabela__conf { font-variant-numeric: tabular-nums; }
.central-tabela__conf--ok      { color: var(--conforme); }
.central-tabela__conf--atencao { color: var(--atencao-texto); }
.central-tabela__conf--erro    { color: var(--falta); }

/* --- link discreto de seção -------------------------------------------------- */

/* "Ver detalhes do desempenho →" do mockup: texto sublinhável, não botão —
   para a hierarquia visual mais baixa de uma ação que é a única da coluna
   (Desempenho, dentro do trio). Mesmo padrão de cor/estado de foco dos outros
   links de texto da Central (`.central-tabela__nome`, `.central-indicador__loja--link`). */
.secao__link {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: var(--txt-sm);
  color: var(--azul-700);
  cursor: pointer;
}
.secao__link:hover { text-decoration: underline; }
.secao__link:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }

/* --- barra de progresso ----------------------------------------------------- */

.barra-progresso { display: flex; align-items: center; gap: var(--e-2); }
.barra-progresso__trilha {
  flex: 1 1 auto;
  min-width: 3rem;
  height: 6px;
  border-radius: 999px;
  background: var(--neutro-200);
  overflow: hidden;
}
.barra-progresso__preenchimento { display: block; height: 100%; border-radius: 999px; }
.barra-progresso__preenchimento--ok      { background: var(--conforme); }
.barra-progresso__preenchimento--atencao { background: var(--sobra); }
.barra-progresso__preenchimento--erro    { background: var(--falta); }
.barra-progresso__valor {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--txt-xs);
}

/* --- indicadores importantes ------------------------------------------------ */

.central-indicadores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.central-indicador {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}
.central-indicadores > li:last-child .central-indicador,
.central-indicadores > .central-indicador:last-child { border-bottom: none; }

.central-indicador--link {
  background: none;
  border: none;
  border-bottom: 1px solid var(--linha);
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.central-indicador--link:hover { background: var(--surface-2); }
.central-indicador--link:focus-visible { outline: 2px solid var(--azul-500); outline-offset: -2px; }

.central-indicador__marca { display: flex; color: var(--texto-3); flex: 0 0 auto; }
.central-indicador--link:hover .central-indicador__marca { color: var(--azul-700); }
.central-indicador__texto { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.central-indicador__rotulo { font-weight: 600; }
.central-indicador__valor {
  font-variant-numeric: tabular-nums;
  font-size: var(--txt-lg);
  flex: 0 0 auto;
  /* Explícita, e não herdada: a linha com destino é um `<button>` e a sem
     destino é um `<li>`, e os dois herdam cores de texto diferentes. Sem
     isto, dois números da MESMA coluna saíam em tons distintos e a diferença
     parecia significar alguma coisa. */
  color: var(--texto);
}
.central-indicador__seta { color: var(--texto-3); flex: 0 0 auto; }
.central-indicador--link:hover .central-indicador__seta { color: var(--azul-700); }

/* As lojas nomeadas da última linha. Cada nome é o próprio atalho — por isso
   a linha inteira NÃO é um botão ali: botão dentro de botão é HTML inválido e
   o teclado se perde no meio. */
.central-indicador__lojas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-2);
  justify-content: flex-end;
  flex: 0 1 auto;
}
.central-indicador__loja { font-size: var(--txt-sm); font-variant-numeric: tabular-nums; }
.central-indicador__loja--link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--azul-700);
  cursor: pointer;
}
.central-indicador__loja--link:hover { text-decoration: underline; }
.central-indicador__loja--link:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }

/* Miniatura de série dentro do cartão de veredito. Largura total; a altura
   subiu de 1.75rem para 2.25rem para dar presença à área preenchida do
   mockup — ela mostra o FORMATO do caminho, não valores exatos — quem quer
   ler valor tem os dois gráficos grandes logo abaixo. */
.veredito .sparkline { width: 100%; height: 2.25rem; margin: var(--e-1) 0; }

/* --- cockpit de 3 colunas (telas largas de mesa/gestor, ≥1440px) --------------- */

/* A partir daqui a Central deixa de ser uma pilha de seções empilhadas e vira
   um cockpit: tudo o que este bloco reorganiza já existe (nenhum dado novo,
   nenhum componente novo) — só o ARRANJO muda, via `grid-template-areas`
   nomeando os `id`s que cada seção já tem (`renderVisaoGeral.js`,
   `renderTendencias.js`, `renderDesempenho.js`, `renderIndicadores.js`,
   `renderOrganizacao.js`, `renderUltimasAuditorias.js`). Abaixo de 1440px
   `.central-cockpit` é `display: contents` — invisível para o layout — e a
   pilha linear de sempre (a mesma que atende o auditor em campo) continua
   valendo sem exceção.
   `display: contents` nos wrappers intermediários (`.central-graficos`,
   `.central-trio`) é o que deixa os NETOS (`#status-auditorias`,
   `#evolucao-auditorias`, `#conformidade`, os três do trio) participarem
   como filhos diretos do grid do avô — sem isso, `grid-template-areas` não
   alcançaria uma seção enterrada dois `<div>` abaixo. */
.central-cockpit { display: contents; }

@media (min-width: 1440px) {
  .central-cockpit {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Três colunas nas duas primeiras linhas (Visão geral | Tendências +
       Desempenho | Indicadores + Últimas auditorias) — cada uma com 2-3
       cartões pequenos, altura parecida entre si. "Saúde das lojas" NÃO
       entra numa dessas colunas: ela tem 4 sub-cartões (Distribuição,
       Melhor, Pior, Quem mudou de patamar) empilhados 2×2 por dentro
       (`renderOrganizacao.js`), então força uma coluna a ficar bem mais alta
       que as outras duas — o desequilíbrio que a primeira versão deste grid
       tinha. Em vez de espremer esse conteúdo numa coluna estreita, ela vira
       uma FAIXA LARGA própria (as 3 colunas), onde os 4 sub-cartões dela têm
       espaço de sobra para ficar lado a lado — o mesmo formato que a seção
       já usa fora do cockpit. */
    grid-template-areas:
      "status       trio-tend    trio-ind"
      "evolucao     trio-desemp  ultimas"
      "conformidade trio-desemp  ultimas"
      "saude        saude        saude"
      "tempo        tempo        tempo";
    gap: var(--e-4);
    align-items: start;
    /* Fonte um pouco maior que o resto do app nesta faixa: telas largas de
       mesa/gestor pedem o cockpit legível de relance (painel de referência),
       e a régua de 1440px já é onde `.metricas--seis` também ganha mais
       espaço (ver acima) — o mesmo breakpoint, a mesma lógica. */
    font-size: 1.08em;
  }

  .central-cockpit > .central-graficos,
  .central-cockpit > .central-trio { display: contents; }

  .central-cockpit #status-auditorias { grid-area: status; }
  .central-cockpit #evolucao-auditorias { grid-area: evolucao; }
  .central-cockpit #conformidade { grid-area: conformidade; }
  .central-cockpit #tendencias { grid-area: trio-tend; }
  .central-cockpit #desempenho { grid-area: trio-desemp; }
  .central-cockpit #indicadores-importantes { grid-area: trio-ind; }
  .central-cockpit #saude-organizacao { grid-area: saude; }
  .central-cockpit #ultimas-auditorias { grid-area: ultimas; }
  .central-cockpit #tendencias-tempo { grid-area: tempo; }

  /* Dentro do cockpit as três colunas SÃO a grade — `.central-graficos--tres`
     e `.central-trio` não desenham mais a própria (ficaram `display: contents`
     acima); zera as regras de coluna delas para não haver dois sistemas de
     grid competindo pelo mesmo elemento.
     Combinador de FILHO DIRETO (`>`), não descendente: `#saude-organizacao`
     também tem um `.central-graficos--tres` por dentro (os 4 sub-cartões de
     Distribuição/Melhor/Pior/Quem mudou de patamar), só que ela não é uma
     das colunas do cockpit — é uma FAIXA LARGA própria (grid-area `saude`,
     abaixo). Um seletor descendente (sem `>`) pegaria esse grid interno
     também e zerava as 3 colunas dele, empilhando os 4 sub-cartões numa
     coluna só — foi exatamente o bug que a primeira versão deste CSS tinha. */
  .central-cockpit > .central-graficos.central-graficos--tres,
  .central-cockpit > .central-trio {
    grid-template-columns: unset;
  }
  .central-cockpit > .central-trio > :nth-child(3) { grid-column: auto; }

  /* As seções empilhadas por coluna (status+evolução+conformidade numa
     coluna; tendências+desempenho+indicadores noutra) precisam de `min-width:
     0` — mesma razão do `minmax(0, 1fr)` do shell: sem isto, uma tabela ou
     gráfico largo dentro da célula empurra a COLUNA do grid em vez de rolar
     dentro de si mesmo. */
  .central-cockpit .central-secao { min-width: 0; }
}

@media (max-width: 640px) {
  /* A responsividade REORGANIZA, não encolhe: a prioridade passa a
     empilhar (ícone em cima do texto) e o topo da seção vira coluna,
     para o botão de ação não espremer o título. */
  .prioridade { align-items: flex-start; }
  .central-secao__topo { flex-direction: column; align-items: stretch; }
  /* No toque não existe hover: a seta do atalho fica sempre visível, senão
     nada sinaliza que o cartão é clicável. */
  .metrica__seta { opacity: .6; }
  .faixa-atencao { align-items: flex-start; }
  .faixa-atencao .btn { width: 100%; }
  /* Os filtros ocupam a largura toda em vez de se espremerem à direita. */
  .central-acoes { justify-content: stretch; }
  /* A linha do indicador empilha: rótulo em cima, número e destino embaixo. */
  .central-indicador { flex-wrap: wrap; }
  .central-indicador__lojas { justify-content: flex-start; width: 100%; }
}