/**
 * Central de Auditoria — cockpit compacto (sem rolagem numa faixa ampla de
 * desktops/notebooks — ver limiar de altura logo abaixo).
 * Escopado inteiramente sob `.mk-*` — nenhuma classe de `central.css`,
 * `dados.css` ou `components.css` é redefinida aqui.
 *
 * Nasceu como o CSS do mockup de validação visual (`/mockups/central`) e
 * foi promovido a CSS de produção depois de aprovado — `CentralPage.js`
 * usa as mesmas classes `mk-*`. A técnica que garante "sem scroll" sem
 * cortar conteúdo:
 *
 *   1. Altura do cabeçalho de página MEDIDA em JS (`--mk-cabecalho-h`,
 *      `CentralPage.js#medirCabecalho`), nunca estimada em CSS — um número
 *      chutado erra assim que os chips de período/filtros quebram linha
 *      numa largura menor.
 *   2. `min-width: 0`/`min-height: 0` em TODO filho de grid/flex — sem isso
 *      o min-content do conteúdo mais largo/alto vence o container.
 *   3. O corpo de cada cartão (abaixo do cabeçalho do cartão) recebe
 *      `container-type: size`, e o SVG dentro dele usa `flex: 1 1 0` (linha)
 *      ou `min(Xrem, NNcqh)` (donut) — a altura REAL do cartão, medida pelo
 *      próprio container. `overflow: hidden` entra só como rede de
 *      segurança final, nunca como estratégia primária de caber — cada card
 *      (`renderKpis.js`, `renderVisaoGeral.js`, `renderTendencias.js`,
 *      `renderDesempenho.js`, `renderIndicadores.js`) foi escrito com a
 *      QUANTIDADE de conteúdo que cabe na altura real disponível, não
 *      comprimido depois por CSS.
 *   4. Um limiar de ALTURA mínima de viewport (não só largura) decide entre
 *      o grid fixo e o modo empilhado com rolagem normal — telas físicas
 *      grandes com escala de SO alta (comum em notebooks Full HD) têm menos
 *      espaço útil do que a resolução sugere, e o grid fixo sem esse limiar
 *      cortava conteúdo ou fazia a PÁGINA INTEIRA rolar (achado real via
 *      inspeção, revisão pós-implantação).
 */

/* `.shell__conteudo` tem `max-width: 80rem` fixo (`layout.css`) — correto
   para telas de formulário/tabela, mas o cockpit precisa da largura inteira
   após a sidebar. `:has()` escopa a mudança à página que de fato tem
   `.mk-central` dentro — mesmo padrão já usado em `central.css:633`. */
.shell__conteudo:has(.mk-central) {
  max-width: none;
  padding: var(--e-3) var(--e-4);
}

.mk-central {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  min-height: 0;
  overflow: hidden;
}
.mk-central > * { min-width: 0; }

/* `min-height` além da largura: o grid de altura FIXA abaixo só funciona
   quando a viewport tem altura útil suficiente — uma janela larga mas baixa
   (notebook com escala de tela do SO acima de 100%, ou zoom do navegador
   perto de 100% nessas condições) tem largura suficiente para cair aqui,
   mas não altura, e o grid espremia o conteúdo até cortar legendas/linhas
   no meio, ou a página inteira passava a rolar (o oposto do "sem scroll"
   que esta composição promete — achado real via inspeção, revisão
   pós-implantação). A 3ª linha do cockpit (Evolução no tempo/Saúde das
   lojas/Últimas auditorias) saiu por causa disso — ver o comentário em
   `CentralPage.js` — e o limiar de altura caiu junto, para cobrir uma faixa
   bem mais ampla de notebooks reais com escala de tela alta. */
@media (min-width: 1280px) and (min-height: 820px) {
  .mk-central {
    height: calc(100dvh - var(--header-h) - var(--mk-cabecalho-h, 4.5rem) - (2 * var(--e-2)));
    display: grid;
    /* 3 linhas — não 4: a faixa "O que precisa de atenção hoje?" já tinha
       saído antes (vive em `/prioridades`), e agora a de "Evolução no
       tempo/Saúde das lojas/Últimas auditorias" também saiu (resumo demais
       para justificar a altura que tomava — os módulos donos, `/lojas` e
       `/auditorias`, são o lugar de verdade). KPIs continuam `auto` (do
       tamanho do próprio conteúdo); a única linha de gráfico que sobra
       ("principal": Status/Evolução/Conformidade) e a "gerencial"
       (Tendências/Desempenho/Indicadores) dividem o restante quase em
       partes iguais. */
    grid-template-rows: auto minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
  }
  .mk-central > * { min-height: 0; }
}

.central-acoes {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
}

/* Seletor de período único no cabeçalho (composição do mockup aprovado) —
   um `<details>` próprio (não `menuBotao.js`): a lista é `absolute`
   ancorada neste wrapper, mais simples que o posicionamento `fixed`
   calculado em JS que aquele componente usa (pensado para abrir sobre
   containers com `overflow: hidden`, caso que não existe no cabeçalho da
   página). `.menu-botao__seta` (global, `components.css`) é reaproveitada
   como está — só a seta, não o resto daquele componente. */
.central-periodo { position: relative; }
.central-periodo__gatilho { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--e-2); }
.central-periodo__gatilho::-webkit-details-marker { display: none; }
.central-periodo[open] .menu-botao__seta { transform: rotate(-135deg) translateY(2px); }

.central-periodo__lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: var(--z-drawer);
  min-width: 16rem;
  padding: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  background: var(--surface);
  border: 1px solid var(--linha-2);
  border-radius: var(--raio);
  box-shadow: var(--sombra-lg);
}
.chips-periodo--menu { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.central-periodo__datas { display: flex; gap: var(--e-2); }
/* `:has(input[hidden])`, não `:has([hidden])`: `campoTexto` (`campos.js`)
   sempre inclui um `<span class="campo-erro" hidden>` por campo (a mensagem
   de validação, oculta até haver erro) — `:has([hidden])` pegava ESSE span
   sempre presente, não o estado "oculto porque o período não é
   Personalizado" que a regra deveria testar, e o container ficava sempre
   `display: none` (achado real via inspeção: os campos De/Até nunca
   apareciam, mesmo com "Personalizado" selecionado e os `input`s já sem
   `hidden`). */
.central-periodo__datas:has(input[hidden]) { display: none; }

/* Badge de contagem no botão "Filtros" do cabeçalho — mesma linguagem visual
   do contador de `barraFiltros` (`filtros-barra__contagem`), só que num selo
   circular pequeno junto ao ícone, porque aqui o filtro mora num drawer
   escondido por padrão e o botão precisa dizer "tem filtro ativo" sem abrir
   o painel. */
.central-filtros-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--laranja);
  color: var(--neutro-0);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* --- kpis ---------------------------------------------------------------------
   `.mk-kpis` reaproveita a customização visual de `.central-kpis` (ícone em
   quadrado colorido, ver `central.css`) redeclarando o seletor sob o próprio
   escopo — copiar em vez de importar a classe, para as duas composições não
   ficarem acopladas. */
.mk-kpis { gap: var(--e-2); }
.mk-kpis .metrica { padding: var(--e-2) var(--e-3); }
.mk-kpis .metrica__cabecalho { justify-content: flex-end; flex-direction: row-reverse; gap: var(--e-2); }
.mk-kpis .metrica__valor { font-size: 1.625rem; }

/* --- infraestrutura comum de card dentro do cockpit --------------------------
   Aplicada às 3 linhas do cockpit: a principal (`renderVisaoGeral.js`,
   `.central-graficos--tres.mk-linha--principal`) e as duas fileiras de
   `.mk-linha--trio`. O cartão vira coluna flex, o corpo abaixo do título
   recebe `container-type: size` e vira a régua real de altura para o
   gráfico lá dentro — nunca um viewBox fixo tentando caber via `overflow`
   (mesma técnica já validada em `indicadores.css`, `.dashboard-grade__linha`,
   para o mesmo tipo de cockpit denso). */
.mk-central > .central-graficos--tres,
.mk-linha--trio {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-3);
}
.mk-central > .central-graficos--tres > *,
.mk-linha--trio > * {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.mk-central .central-secao,
.mk-central .central-grafico {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 0;
  overflow: hidden;
}
.mk-central .central-secao__topo { flex: 0 0 auto; margin-bottom: var(--e-1); }
.mk-central .cartao__titulo { font-size: var(--txt-sm); }
.mk-central .central-secao__descricao { display: none; }

/* O corpo de cada cartão — tudo abaixo de `central-secao__topo` — é quem
   sobra de altura real dentro do cartão comprimido. `secao()`/`cartaoGrafico`
   (`comuns.js`) sempre geram dois filhos diretos de `.central-secao`:
   `.central-secao__topo` e o `corpo` que o chamador passou —
   `:not(.central-secao__topo)` pega o corpo por POSIÇÃO em vez de listar
   cada classe possível. `container-type: size` é o que dá ao donut (via
   `cqh`, abaixo) e ao `LineChart` (via `flex: 1 1 0`) a altura VERDADEIRA
   que sobrou, em vez de uma estimativa.
   `cartaoGrafico` (os 3 cards de Status/Evolução/Conformidade) usa a classe
   irmã `.central-grafico`/`.central-grafico__area` em vez de
   `.central-secao`/corpo-por-posição — sem este segundo seletor, o corpo
   desses 3 cards ficava como `display: block` comum (a regra de
   `central.css` só declara `flex: 1 1 auto`, sem `display: flex` próprio),
   e o `LineChart`/`DonutChart` lá dentro dimensionava pelo PRÓPRIO conteúdo
   em vez da altura real da célula do grid — achado real via inspeção: card
   de ~309px de altura disponível, gráfico ocupando só ~146px (a mesma causa
   raiz já documentada para `.grafico-linha__svg`, só que um nível acima). */
.mk-central .central-secao > :not(.central-secao__topo),
.mk-central .central-grafico__area {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  container-type: size;
}
/* `grafico()` (`comuns.js`) monta o `DonutChart`/`LineChart` dentro de um
   `<div>` anônimo (sem classe — é só o alvo de `componente.mount()`), filho
   direto de `.central-grafico__area`. Sem esta regra esse wrapper ficava
   `display: block` padrão com `flex-grow: 0`, e mesmo com o pai já esticado
   (regra acima) o `.grafico-linha`/`.grafico-rosca` por dentro dele nunca
   recebia a altura real — o crescimento parava um nível antes do gráfico
   (achado real via inspeção: pai com 309px de altura, wrapper anônimo parado
   em 146px, puramente pelo min-content do SVG). */
.mk-central .central-grafico__area > div {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Qualquer `.pilha`/`.pilha--compacta` (dados.css, `display: flex;
   flex-direction: column` por padrão) precisa de `min-height: 0` explícito:
   um flex item em coluna tem `min-height: auto` por padrão no spec — nunca
   encolhe abaixo do min-content dos filhos. Sem isto, um `.pilha` aninhado
   (ex.: dentro do corpo de um card) trava o encolhimento antes de chegar no
   conteúdo real, e o `overflow: hidden` do card corta em vez da coluna
   encolher de verdade. */
.mk-central .pilha { min-height: 0; }

/* `LineChart`: causa raiz do gráfico "colapsado" (achado real, revisão
   pós-implantação) — `.grafico-linha__svg { height: auto }` (regra GLOBAL,
   `indicadores.css`) faz o navegador tratar o SVG como elemento substituído
   e calcular a altura pela PROPORÇÃO do `viewBox` aplicada à largura real
   (560:150 do viewBox × ~540px de largura do card ≈ 145px), ANTES de
   qualquer `flex-grow` ser considerado — `flex: 1 1 0` nunca chegava a
   crescer o SVG até a altura real do card, sobrava um vão vazio abaixo dele
   (achado real via inspeção: card com 230px de altura, SVG ocupando só
   ~145px). A correção é remover `height: auto` daqui — SEM ela, o
   navegador não tem de onde tirar um aspect-ratio intrínseco e usa o
   `flex-basis: 0` de `flex: 1 1 0` puro, que o `flex-grow` então expande até
   a altura REAL do container. `.grafico-linha` também não pode ter `gap`
   aqui: o gap global (`--e-3`, 12px) de `indicadores.css` roubava altura do
   SVG numa caixa já apertada — este seletor mais específico zera para 0. */
.mk-central .grafico-linha { display: flex; flex-direction: column; gap: 0; min-height: 0; flex: 1 1 auto; }
.mk-central .grafico-linha__svg { flex: 1 1 0; min-height: 0; height: unset; }
.mk-central .grafico-linha__area { flex: 1 1 auto; min-height: 0; display: flex; }
.mk-central .grafico__legenda { flex: 0 0 auto; font-size: 10px; gap: var(--e-2); flex-wrap: wrap; }

/* `DonutChart`: lado a lado com a legenda, donut limitado por `cqh` (altura
   do CONTAINER medido acima). */
.mk-central .grafico-rosca {
  flex: 1 1 auto;
  min-height: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--e-2);
}
.mk-central .grafico-rosca__svg {
  width: min(11rem, 90cqh);
  height: min(11rem, 90cqh);
  flex: 0 0 auto;
}
.mk-central .grafico-rosca__total { font-size: 26px; }
.mk-central .grafico-rosca__subtitulo { font-size: 14px; }
.mk-central .grafico__legenda--lista {
  min-width: 0;
  flex: 1 1 auto;
  align-self: stretch;
  justify-content: center;
  overflow: hidden;
  gap: 3px;
}
/* Achado real: `white-space: nowrap` sem quebra cortava "Em andamento · 24 ·
   18,8%" na borda da coluna, sem reticências — a categoria simplesmente
   desaparecia no meio do texto. A coluna ao lado do donut (depois de
   `width: min(6.5rem, 90cqh)`) não tem largura para uma linha só; a
   legenda quebra em 2 linhas por item (rótulo, depois valor/percentual —
   `DonutChart.js` já gera dois `<span>` separados) em vez de cortar. */
.mk-central .grafico__legenda-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 4px;
  white-space: normal;
  padding: 0;
  font-size: 11px;
  line-height: 1.3;
  min-width: 0;
}
.mk-central .grafico__legenda-item .sub { flex-basis: 100%; font-size: 10px; }
.mk-central .grafico__legenda-cor { width: 8px; height: 8px; }

/* Evolução (LineChart, o gráfico do meio da fileira Status/Evolução/
   Conformidade) tem seletor de janela no cabeçalho do cartão. */
.mk-central .central-secao__topo .chips-periodo--compacto { flex-wrap: nowrap; }
.mk-central .chip-periodo { padding: 2px 6px; font-size: 10px; }

/* --- Tendências (renderTendencias.js) -----------------------------------------
   Lista de 5 linhas (rótulo à esquerda, valor+seta à direita) — mesmo
   padrão visual de `.mk-indicadores` ao lado, para as duas listas do
   cockpit lerem como a mesma linguagem. Sem sparkline/gráfico: o veredito
   (subiu/desceu/estável + número) é a informação, a curva de verdade já
   mora em "Evolução das auditorias"/"Evolução no tempo". */
.mk-vereditos {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mk-veredito {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: 2px 0;
  min-width: 0;
}
.mk-veredito__rotulo {
  font-size: 12px;
  color: var(--texto-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-veredito__linha1 {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  flex: 0 0 auto;
}
.mk-veredito__valor {
  font-size: var(--txt-sm);
  font-weight: 700;
  color: var(--azul-900);
  font-variant-numeric: tabular-nums;
}
.mk-veredito__seta { flex: 0 0 auto; display: inline-flex; }
.mk-veredito--melhora .mk-veredito__seta { color: var(--conforme); }
.mk-veredito--piora .mk-veredito__seta { color: var(--falta); }
.mk-veredito--estavel .mk-veredito__seta { color: var(--texto-3); }

/* --- Desempenho da equipe (renderDesempenho.js) -------------------------------
   Só o Top 5 + link — sem os 4 cards agregados que a versão anterior desta
   seção mostrava abaixo da tabela (eles ficam em `/desempenho/equipe`, a um
   clique do link). É essa remoção, e não uma fonte menor, que abre espaço
   para as 5 linhas caberem sem cortar. */
.mk-desempenho { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.mk-desempenho__tabela { width: 100%; font-size: 11px; border-collapse: collapse; }
.mk-desempenho__tabela th {
  text-align: left; font-size: 10px; color: var(--texto-3); font-weight: 600; padding: 2px 4px;
}
.mk-desempenho__tabela td { padding: 3px 4px; }
.mk-desempenho__nome {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--azul-700);
  text-align: left; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.mk-desempenho__nome:hover { text-decoration: underline; }

.mk-barra { display: flex; align-items: center; gap: var(--e-1); min-width: 0; }
.mk-barra__trilha {
  flex: 1 1 auto; min-width: 2.5rem; height: 6px; border-radius: 999px; background: var(--linha); overflow: hidden;
}
.mk-barra__preenchimento { display: block; height: 100%; border-radius: 999px; }
.mk-barra__preenchimento--ok { background: var(--conforme); }
.mk-barra__preenchimento--atencao { background: var(--sobra); }
.mk-barra__preenchimento--erro { background: var(--falta); }
.mk-barra__valor { flex: 0 0 auto; font-size: 10px; color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* --- Indicadores importantes (renderIndicadores.js) ---------------------------
   6 linhas escritas para ~18px cada desde o início — ícone pequeno, uma
   linha de texto só, gap mínimo. */
.mk-indicadores { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; }
.mk-indicador {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 2px 0;
  font-size: 12px;
  min-width: 0;
}
button.mk-indicador { width: 100%; background: none; border: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
button.mk-indicador:hover { color: var(--azul-500); }
.mk-indicador__icone { flex: 0 0 auto; width: 14px; height: 14px; color: var(--texto-3); }
.mk-indicador__rotulo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-indicador__valor { flex: 0 0 auto; font-weight: 700; color: var(--azul-900); }
.mk-indicador__seta { flex: 0 0 auto; color: var(--texto-3); }
.mk-indicador__loja {
  display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: var(--azul-700); text-align: right;
}
button.mk-indicador__loja { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
button.mk-indicador__loja:hover { color: var(--azul-500); text-decoration: underline; }
.mk-indicador .tendencia { flex: 0 0 auto; font-size: 10px; }

/* --- abaixo de 1280px OU do limiar de altura: pilha normal, sem grid fixo -
   O requisito de "sem scroll" é o alvo de desktop largo E alto o bastante;
   fora dele (tablet, notebook pequeno, OU uma janela larga mas baixa —
   escala de tela do SO acima de 100%, zoom do navegador) o DOM é o mesmo e
   a ordem natural de leitura com rolagem da página (sem grid de altura
   calculada) é o que já existia antes desta composição — priorizar
   responsividade real em vez de espremer/cortar conteúdo para caber numa
   altura que não existe. */
@media (max-width: 1279px), (max-height: 819px) {
  .mk-central { display: flex; height: auto; overflow: visible; }
  .mk-central > .central-graficos--tres,
  .mk-linha--trio { grid-template-columns: 1fr; }
  /* Altura EXPLÍCITA e FIXA (não `min-height`, não `auto`) — mesmo mecanismo
     do modo grid (`container-type: size` no corpo do card + `flex: 1 1 0`/
     `cqh` no SVG lá dentro, ver o comentário no topo do arquivo), só que a
     altura vem de um valor calculado aqui em vez do viewport. Uma altura
     IMPOSTA (em vez de por conteúdo) é o que faz esse mecanismo funcionar:
     tentar deixar o card crescer com `height: auto`/`overflow: visible`
     quebrou de duas formas diferentes (achados reais via inspeção, revisão
     pós-implantação): (1) sem teto, o card cresce até o tamanho do MAIOR
     item da própria linha do grid antes do conteúdo real ser medido, e o
     excedente de cada um vazava sobre o card seguinte da pilha; (2) sem
     altura, `container-type: size` não resolve (`cqh` vira 0) e os donuts
     desaparecem. `22rem` cabe 6 linhas de "Indicadores importantes"/5 linhas
     de tabela + o cabeçalho do card, medido nos três cards mais densos. */
  .mk-central .central-secao,
  .mk-central .central-grafico { height: 22rem; }
}

@media (max-width: 1440px) {
  .mk-saude { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
}