/**
 * Mockup de validação visual — Central de Auditoria compacta (1920×1080, sem
 * rolagem). Escopado inteiramente sob `.mk-central--mockup` — nenhuma classe
 * de `central.css`, `dados.css` ou `components.css` é redefinida aqui, e
 * este arquivo não é importado por nenhuma outra rota. Só tokens de
 * `tokens.css`.
 *
 * Nenhum componente de `pages/central/` é reaproveitado DIRETO neste
 * mockup (ver `CentralMockupPage.js`) — cada card tem versão própria
 * (`mockup*.js`), escrita para a altura REAL disponível em vez de tentar
 * caber um componente desenhado para o card analítico dentro de uma caixa
 * bem mais baixa. Por isso este arquivo é mais enxuto que a versão anterior:
 * não precisa sobrescrever CSS de `.vereditos`/`.central-tabela`/
 * `.central-indicadores` por seletor profundo — as classes `mk-*` já nascem
 * do tamanho certo.
 *
 * O que continua sendo reaproveitado sem alteração: os componentes de
 * GRÁFICO (`DonutChart`, `LineChart`, `Sparkline`) e as peças de baixo nível
 * (`secao`, `metrica`, `cartaoGrafico`, `icone`) — só a composição em volta
 * deles é própria do mockup.
 *
 * ## Por que todo seletor carrega `.mk-central--mockup`
 *
 * `index.html` carrega este arquivo GLOBALMENTE, em toda rota do sistema —
 * como todo outro CSS de página aqui (`central-cockpit.css` incluído). O
 * mockup reusa o mesmo vocabulário `.mk-*` da Central REAL (`renderKpis.js`
 * e os outros `render*.js` de `pages/central/`) porque nasceu como o CSS de
 * validação dela, antes de virar produção — mas isso faz os DOIS arquivos
 * declararem regras para o MESMO seletor (`.mk-central`, `.mk-vereditos`,
 * `.mk-saude`, etc.) na mesma cascata. Sem um escopo próprio aqui, a regra
 * deste arquivo (5 linhas de grid — este mockup tem a faixa "Prioridades de
 * hoje" que a Central real não tem) vazava para `/central`, carregada
 * DEPOIS de `central-cockpit.css` no `<link>` de `index.html` e vencendo por
 * ordem na cascata: a 2ª linha do grid real (Status/Evolução/Conformidade)
 * colapsava para ~90px em vez do `1.05fr` que lhe cabia, e os donuts/gráficos
 * lá dentro renderizavam com `width`/`height` zero (achado real via
 * inspeção, revisão pós-implantação). `CentralMockupPage.js` é quem aplica a
 * classe extra no container raiz.
 */

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

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

/* `min-height: 1000px` além da largura — mesmo guard de `central-cockpit.css`
   (`/central`, produção): sem viewport CSS efetiva de ~950px úteis, o grid
   fixo abaixo espreme as 5 linhas até menos de ~200px cada, e os SVGs dos
   gráficos renderizam com altura zero (achado real via inspeção, mesma
   família de bug — um zoom de navegador acima de ~110% num notebook
   1920×1080 já reduz a viewport CSS abaixo do limiar). */
@media (min-width: 1280px) and (min-height: 1000px) {
  .mk-central--mockup {
    /* `--mk-cabecalho-h` é a altura real de `.pagina-cabecalho` (título +
       subtítulo + ações), medida em JS (`CentralMockupPage.js#medirCabecalho`,
       mesma técnica de `DashboardPage.js`/`indicadores.css`) — um número
       chutado em CSS erra assim que os chips de período/filtros quebram
       linha numa largura menor. `2 * var(--e-2)`: padding vertical que
       `.shell__conteudo:has(.mk-central--mockup)` aplica acima/abaixo
       (ajustado junto com o `gap` de `.mk-central--mockup`, que também caiu
       de `e-3` p/ `e-2` — cada pixel devolvido aqui é um pixel a mais para
       as 3 linhas do cockpit, que são a área de leitura principal). */
    height: calc(100dvh - var(--header-h) - var(--mk-cabecalho-h, 4.5rem) - (2 * var(--e-2)));
    display: grid;
    /* Pesos NÃO uniformes — atenção e KPIs pedem `auto` (só a própria
       altura de conteúdo); as 3 linhas do cockpit (principal/gerencial/
       inferior) dividem o restante quase em partes iguais, com um leve
       empurrão extra para a "principal" — não um `1fr` cego que ignora que
       ela carrega os 3 gráficos mais lidos da tela (Status/Evolução/
       Conformidade). Calculado a partir da altura REAL disponível num
       browser 1920×1080 (chrome do navegador descontado, ~950px úteis — ver
       o comentário de `CentralMockupPage.js`), não um número no ar. */
    grid-template-rows: auto auto minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.98fr);
    grid-template-columns: minmax(0, 1fr);
  }
  .mk-central--mockup > * { min-height: 0; }
}

/* Fica no cabeçalho da página (`get acoes()`), fora de `.mk-central--mockup`
   (que só existe dentro de `renderConteudo()`) — por isso o seletor usa
   `.mk-acoes` combinado com `central-acoes` (a classe que a Central REAL usa
   sozinha, sem `mk-acoes`), em vez de depender do escopo `.mk-central--mockup`. */
.central-acoes.mk-acoes {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
}

/* Bloco DEV — visualmente separado dos filtros reais (borda tracejada,
   rótulo "DEV" em caixa alta pequena): `Dados completos`/`Poucos dados` e o
   diagnóstico de overflow são ferramentas de QA deste mockup, não parte da
   composição que seria levada para `/central`. Nunca no mesmo agrupamento
   visual dos chips de período/filtros reais. */
.mk-central--mockup .mk-dev {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 2px var(--e-2);
  border: 1px dashed var(--linha);
  border-radius: var(--raio-sm);
}
.mk-central--mockup .mk-dev__rotulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--texto-3);
}
.mk-central--mockup .mk-dev .chips-periodo--compacto .chip-periodo { padding: 2px var(--e-2); font-size: 11px; }

/* --- atenção ----------------------------------------------------------------- */

.mk-central--mockup .mk-atencao {
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: var(--e-2) var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.mk-central--mockup .mk-atencao__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
}

.mk-central--mockup .mk-atencao__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--txt-md);
  font-weight: 700;
  color: var(--azul-900);
  margin: 0;
}
.mk-central--mockup .mk-atencao__titulo svg { color: var(--falta); flex: 0 0 auto; }

.mk-central--mockup .mk-atencao__sub { font-size: var(--txt-xs); color: var(--texto-3); margin: 2px 0 0; }

.mk-central--mockup .mk-atencao__link {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--azul-500);
  white-space: nowrap;
  text-decoration: none;
}
.mk-central--mockup .mk-atencao__link:hover { text-decoration: underline; }

.mk-central--mockup .mk-atencao__cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--e-2);
}

.mk-central--mockup .mk-atencao__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-1) var(--e-3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background: var(--surface-2);
  min-width: 0;
}

.mk-central--mockup .mk-atencao__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
}
.mk-central--mockup .mk-atencao__cabecalho strong { font-size: var(--txt-sm); color: var(--azul-900); }

.mk-central--mockup .mk-atencao__loja {
  font-size: var(--txt-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-central--mockup .mk-atencao__prazo { font-size: var(--txt-xs); color: var(--texto-3); }

/* --- kpis ---------------------------------------------------------------------
   `.mk-kpis` reaproveita a customização visual de `.central-kpis` (ícone em
   quadrado colorido) redeclarando o seletor sob o próprio escopo — copiar em
   vez de importar a classe `.central-kpis`, para não criar uma dependência
   cruzada entre o mockup e a página real. */
.mk-central--mockup .mk-kpis { gap: var(--e-2); }
.mk-central--mockup .mk-kpis .metrica { padding: var(--e-2) var(--e-3); }
.mk-central--mockup .mk-kpis .metrica__cabecalho { justify-content: flex-end; flex-direction: row-reverse; gap: var(--e-2); }
.mk-central--mockup .mk-kpis .metrica__valor { font-size: var(--txt-2xl); }

/* --- infraestrutura comum de card dentro do cockpit --------------------------
   Aplicada às 3 linhas do cockpit: a principal (`mockupVisaoGeral.js`,
   `.central-graficos--tres.mk-linha--principal`) e as duas próprias do
   mockup (`.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--mockup .mk-linha--principal,
.mk-central--mockup .mk-linha--trio {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-3);
}
.mk-central--mockup .mk-linha--principal > *,
.mk-central--mockup .mk-linha--trio > * {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.mk-central--mockup .central-secao,
.mk-central--mockup .central-grafico {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 0;
  overflow: hidden;
}
.mk-central--mockup .central-secao__topo { flex: 0 0 auto; margin-bottom: var(--e-1); }
.mk-central--mockup .cartao__titulo { font-size: var(--txt-sm); }
.mk-central--mockup .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. */
.mk-central--mockup .central-secao > :not(.central-secao__topo) {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  container-type: size;
}
/* 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--mockup .pilha { min-height: 0; }

/* `LineChart`: SVG de largura 100%/altura automática (`indicadores.css`,
   global) precisa de `flex: 1 1 0; min-height: 0` para caber na altura REAL
   do container em vez de crescer pela proporção do viewBox. */
.mk-central--mockup .grafico-linha { display: flex; flex-direction: column; gap: 0; min-height: 0; flex: 1 1 auto; }
/* Sem `height: unset` aqui, `.grafico-linha__svg { height: auto }` global
   (`indicadores.css`) trata o SVG como elemento substituído e calcula a
   altura pela proporção do viewBox — nunca a altura real do card, mesmo com
   `flex: 1 1 0`. Combinado com `LineChart({ esticar: true })`
   (`preserveAspectRatio="none"`), o gráfico ocupa a caixa real sem sobrar
   espaço vazio. */
.mk-central--mockup .grafico-linha__svg { flex: 1 1 0; min-height: 0; height: unset; }
.mk-central--mockup .grafico-linha__area { flex: 1 1 auto; min-height: 0; display: flex; }
.mk-central--mockup .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--mockup .grafico-rosca {
  flex: 1 1 auto;
  min-height: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--e-2);
}
.mk-central--mockup .grafico-rosca__svg {
  width: min(6.5rem, 90cqh);
  height: min(6.5rem, 90cqh);
  flex: 0 0 auto;
}
.mk-central--mockup .grafico-rosca__total { font-size: 16px; }
.mk-central--mockup .grafico-rosca__subtitulo { font-size: 9px; }
.mk-central--mockup .grafico__legenda--lista {
  min-width: 0;
  flex: 1 1 auto;
  align-self: stretch;
  justify-content: center;
  overflow: hidden;
  gap: 3px;
}
/* `white-space: nowrap` sem quebra cortava a categoria mais longa
   ("Em andamento · 24 · 18,8%") na borda da coluna, sem reticências — a
   legenda quebra em 2 linhas por item (rótulo, depois valor/percentual) em
   vez de cortar. */
.mk-central--mockup .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--mockup .grafico__legenda-item .sub { flex-basis: 100%; font-size: 10px; }
.mk-central--mockup .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--mockup .central-secao__topo .chips-periodo--compacto { flex-wrap: nowrap; }
.mk-central--mockup .chip-periodo { padding: 2px 6px; font-size: 10px; }

/* --- Tendências (mockupTendencias.js) ----------------------------------------
   2×2, cada mini-card com 2 linhas (valor+seta, depois rótulo) — não 4
   linhas como a Central real: a caixa disponível na linha "gerencial" do
   cockpit não sustenta rótulo + valor + sparkline + leitura por extenso
   sem cortar. A sparkline vira um FUNDO sutil atrás do número
   (`position: absolute`, opacidade baixa) em vez de ocupar uma linha
   própria — a pista visual continua, a leitura em texto sai. */
.mk-central--mockup .mk-vereditos {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
}
.mk-central--mockup .mk-veredito {
  position: relative;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: var(--e-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background: var(--surface-2);
}
.mk-central--mockup .mk-veredito__fundo {
  position: absolute;
  inset: 0;
  opacity: .16;
  pointer-events: none;
}
.mk-central--mockup .mk-veredito__fundo .sparkline { width: 100%; height: 100%; display: block; }
.mk-central--mockup .mk-veredito__linha1 {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-1);
}
.mk-central--mockup .mk-veredito__valor { font-size: var(--txt-lg); font-weight: 700; color: var(--azul-900); }
.mk-central--mockup .mk-veredito__seta { display: inline-flex; }
.mk-central--mockup .mk-veredito--melhora .mk-veredito__seta { color: var(--conforme); }
.mk-central--mockup .mk-veredito--piora .mk-veredito__seta { color: var(--falta); }
.mk-central--mockup .mk-veredito--estavel .mk-veredito__seta { color: var(--texto-3); }
.mk-central--mockup .mk-veredito__rotulo {
  position: relative;
  font-size: 10px;
  color: var(--texto-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Desempenho da equipe (mockupDesempenho.js) ------------------------------
   Só o Top 5 + link — sem os 4 cards agregados que a Central real mostra
   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-central--mockup .mk-desempenho { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.mk-central--mockup .mk-desempenho__tabela { width: 100%; font-size: 11px; border-collapse: collapse; }
.mk-central--mockup .mk-desempenho__tabela th {
  text-align: left; font-size: 10px; color: var(--texto-3); font-weight: 600; padding: 2px 4px;
}
.mk-central--mockup .mk-desempenho__tabela td { padding: 3px 4px; }
.mk-central--mockup .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-central--mockup .mk-desempenho__nome:hover { text-decoration: underline; }

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

/* --- Indicadores importantes (mockupIndicadores.js) --------------------------
   6 linhas escritas para ~18px cada desde o início — ícone pequeno, uma
   linha de texto só (sem o "sub" de detalhe que a Central real mostra em
   "Tempo médio de auditoria"), gap mínimo. */
.mk-central--mockup .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-central--mockup .mk-indicador {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 2px 0;
  font-size: 12px;
  min-width: 0;
}
.mk-central--mockup button.mk-indicador { width: 100%; background: none; border: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.mk-central--mockup button.mk-indicador:hover { color: var(--azul-500); }
.mk-central--mockup .mk-indicador__icone { flex: 0 0 auto; width: 14px; height: 14px; color: var(--texto-3); }
.mk-central--mockup .mk-indicador__rotulo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-central--mockup .mk-indicador__valor { flex: 0 0 auto; font-weight: 700; color: var(--azul-900); }
.mk-central--mockup .mk-indicador__seta { flex: 0 0 auto; color: var(--texto-3); }
.mk-central--mockup .mk-indicador__lojas { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; font-size: 11px; }
.mk-central--mockup .mk-indicador__lojas button {
  background: none; border: none; padding: 0; font: inherit; color: var(--azul-700); cursor: pointer; white-space: nowrap;
}
.mk-central--mockup .mk-indicador .tendencia { flex: 0 0 auto; font-size: 10px; }

/* --- linha inferior: evolução no tempo / saúde das lojas / últimas auditorias */

.mk-central--mockup .mk-evolucao-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
  height: 100%;
  min-height: 0;
}
.mk-central--mockup .mk-evolucao-dupla__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  container-type: size;
}
.mk-central--mockup .mk-evolucao-dupla__titulo {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--texto-3);
}
.mk-central--mockup .mk-evolucao-dupla__item .grafico-linha { flex: 1 1 auto; min-height: 0; gap: 0; }
.mk-central--mockup .mk-evolucao-dupla__item .grafico-linha__svg { flex: 1 1 0; min-height: 0; height: unset; }

.mk-central--mockup .mk-saude {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr 1fr;
  gap: var(--e-4);
  height: 100%;
  min-height: 0;
}
.mk-central--mockup .mk-saude__coluna { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; min-height: 0; }
.mk-central--mockup .mk-saude__titulo { flex: 0 0 auto; font-size: 10px; font-weight: 600; color: var(--texto-3); }

/* Donut de distribuição: sem legenda textual (ver `mockupSaudeLojas.js`) —
   a coluna é só a largura do próprio donut, estreita demais para uma
   legenda de 4 linhas sem estourar a altura da linha. */
.mk-central--mockup .mk-saude__coluna--donut {
  container-type: size;
  align-items: center;
  justify-content: center;
}
.mk-central--mockup .mk-saude__coluna--donut .grafico-rosca { justify-content: center; flex: 1 1 auto; min-height: 0; }
.mk-central--mockup .mk-saude__coluna--donut .grafico-rosca__svg { width: min(6rem, 90cqh); height: min(6rem, 90cqh); }
.mk-central--mockup .mk-saude__coluna--donut .grafico__legenda--lista { display: none; }

.mk-central--mockup .mk-saude__ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: hidden; flex: 1 1 auto; justify-content: space-between; }

.mk-central--mockup .mk-saude__linha {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  padding: 1px 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
}
.mk-central--mockup .mk-saude__linha:hover .mk-saude__nome { color: var(--azul-500); }

.mk-central--mockup .mk-saude__posicao {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--azul-100);
  color: var(--azul-700);
  font-size: 10px;
  font-weight: 700;
}
.mk-central--mockup .mk-saude__nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.mk-central--mockup .mk-saude__valor { flex: 0 0 auto; font-size: 12px; color: var(--texto-2); }

.mk-central--mockup .mk-ultimas { width: 100%; font-size: 12px; border-collapse: collapse; }
.mk-central--mockup .mk-ultimas th { text-align: left; font-size: 10px; color: var(--texto-3); font-weight: 600; padding: 1px 5px; }
.mk-central--mockup .mk-ultimas td { padding: 2px 5px; }
.mk-central--mockup .mk-ultimas__linha { cursor: pointer; }
.mk-central--mockup .mk-ultimas__linha:hover { background: var(--surface-2); }
.mk-central--mockup .mk-ultimas__linha:focus-visible { outline: 2px solid var(--azul-500); outline-offset: -2px; }

/* --- abaixo de 1280px OU 1000px de altura: pilha normal, sem grid fixo ----
   Existe para não punir quem valida em notebook (ou com zoom) antes do
   teste final em 1920×1080 sem zoom — o requisito de "sem scroll" é só
   dentro dessa faixa. Altura EXPLÍCITA e FIXA por card (não `min-height`,
   que deixava o card crescer sem teto e vazar sobre o card seguinte da
   pilha — achado real via inspeção, mesma correção aplicada em
   `central-cockpit.css`): `22rem` cabe as 6 linhas de "Indicadores
   importantes"/5 linhas de tabela + cabeçalho do card. */
@media (max-width: 1279px), (max-height: 999px) {
  .mk-central--mockup { display: flex; height: auto; overflow: visible; }
  .mk-central--mockup .mk-linha--principal,
  .mk-central--mockup .mk-linha--trio { grid-template-columns: 1fr; }
  .mk-central--mockup .central-secao,
  .mk-central--mockup .central-grafico { height: 22rem; }
}

@media (max-width: 1440px) {
  .mk-central--mockup .mk-atencao__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); }
  .mk-central--mockup .mk-saude { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
}