:root {
  --bg: #000000;
  --panel: rgba(38, 37, 37, 0.65);
  --card: #1D1D1D;
  --sidebar: #1A1A1A;
  --icon: #4E4E4E;
  --sage: #93B452;
  --orange: #F48B29;
  --text: #FFFFFF;
  --muted: #9A9A9A;
  --line: #2A2A2A;
  --sidebar-w: 260px;
  --ink: #185200;

  /* Componentes da marca em RGB para uso em rgba(). Antes o sálvia e o laranja
     eram reescritos como literal em 7 pontos do arquivo, então trocar o hex
     quebrava silenciosamente em todos eles. */
  --sage-rgb: 147, 180, 82;
  --orange-rgb: 244, 139, 41;
  /* Única cor de erro do sistema. Não é cor de marca — é sinal, e por isso
     nunca aparece em série de dado. */
  --danger-rgb: 214, 69, 42;
  /* Tints de texto sobre os fundos translúcidos do banner. Valores fechados na
     Fase 1.7 por contraste — não derivar em runtime. */
  --sage-ink: #c9d9a8;
  --orange-ink: #f3d2b0;
  --danger-ink: #f5bdae;

  /* Superfícies internas, antes hardcoded em 5 tons soltos. */
  --surface-deep: #111111;    /* fundo atrás do logo */
  --surface-sunken: #151515;  /* tooltip, chips de lista, inputs */
  --surface-raised: #242424;  /* hover */
  --surface-sel: #243018;     /* linha selecionada */
  --ink-hover: #1f6a00;

  /* Texto em escala de cinza (Manual e corpos longos). Antes #e8e8e8/#d4d4d4
     soltos. --icon (#4E4E4E) é o fundo do container 36×36 e do trilho Progress. */
  --text-soft: #e8e8e8;
  --text-dim: #d4d4d4;
  --text-faint: #c8c8c8;
  --text-callout: #d0d0d0;
  --sage-soft: #cfe3b0;

  /* Ritmo do layout. Antes eram --canvas-w/--canvas-h fixos (1980x1020), que
     obrigavam qualquer tela menor a rolar na horizontal. Agora o palco é
     fluido e só estes valores mudam por breakpoint. */
  --gap: 12px;
  --shell-pad-y: 14px;
  --shell-pad-x: 24px;
  --shell-pad-b: 12px;

  /* Espaçamento interno. Em rem para acompanhar a fonte do navegador. */
  --space-1: 0.25rem;
  --space-2: 0.375rem;
  --space-3: 0.5rem;
  --space-4: 0.625rem;
  --space-5: 0.75rem;
  --space-6: 0.875rem;
  --space-7: 1rem;

  /* Raio: uma fonte só, como no shadcn/ui. A escala é proporcional e, com
     --radius = 12px, reproduz exatamente os valores de antes (8 / 10 / 12 / 16),
     então nenhuma tela muda de forma. Mexer neste número muda tudo junto. */
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) * 0.6667);
  --radius-md: calc(var(--radius) * 0.8333);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.3333);
  --radius-pill: 999px;

  --shadow-card: 0 4px 16px rgba(0, 0, 0, .16);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .35);
  /* Card: anel de 1px em vez de sombra (padrão shadcn). Sombra fica para o que flutua. */
  --ring-card: 0 0 0 1px rgba(255, 255, 255, .08);

  /* Vocabulário semântico no padrão shadcn/ui (superfície + "-foreground").
     São aliases dos tokens que já existem: código novo usa estes nomes, o antigo
     continua funcionando até migrar. Não são cores novas. */
  --background: var(--bg);
  --foreground: var(--text);
  --card-foreground: var(--text);
  --popover: var(--surface-sunken);
  --popover-foreground: var(--text);
  --muted-foreground: var(--muted);
  --accent: var(--surface-raised);
  --accent-foreground: var(--text);
  --border: var(--line);
  --ring: rgba(var(--sage-rgb), .65);
  --destructive: rgb(var(--danger-rgb));
  --destructive-foreground: var(--danger-ink);

  /* Grupos de origem (Clientes). Tons que não repetem nada da mesma tela: verde e
     laranja são das séries Safra/Acumulado, e o doughnut de pagamento usa azul,
     roxo, mostarda e rosa. Por isso teal, lilás-rosa e cinza claro. */
  --grp-fisio: #2FB5A8;
  --grp-unidade: #E39AC4;
  --grp-externa: #D6D6D6;
  --grp-sem: #6A6A6A;

  /* Escala tipográfica (Projeto 2).
     Antes eram 19 tamanhos em px absoluto, incluindo 11.5px e 12.5px ad hoc.
     Consequência: quem aumentava a fonte do navegador não via diferença.
     Agora tudo é rem, e o que precisa crescer com a tela usa clamp() — o que
     também dispensa inventar breakpoint para cada densidade. */
  --fs-micro: 0.6875rem;   /* 11 — meta, rodapé */
  --fs-label: 0.75rem;     /* 12 — rótulo de KPI e cabeçalho de tabela */
  --fs-xs: 0.75rem;        /* 12 */
  --fs-sm: 0.8125rem;      /* 13 */
  --fs-base: 0.875rem;     /* 14 */
  --fs-md: 0.9375rem;      /* 15 */
  --fs-panel-title: clamp(0.875rem, 0.35vw + 0.78rem, 1rem);
  --fs-h1: clamp(1.25rem, 0.8vw + 1.05rem, 1.625rem);
  /* Hero da dobra: 28px no notebook, 32px no monitor. */
  --fs-kpi: clamp(1.75rem, 0.7vw + 1.3rem, 2rem);
  --fs-pd-val: clamp(1rem, 0.4vw + 0.88rem, 1.1875rem);
  --fs-funil-val: clamp(1rem, 0.4vw + 0.88rem, 1.1875rem);
}
* { box-sizing: border-box; }
/* O atributo hidden do HTML precisa vencer as regras de display por classe
   (.sidebar-filters label, por exemplo, é mais específico que [hidden]). */
[hidden] { display: none !important; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Lato, sans-serif;
  height: 100%;
}
body {
  min-width: 0;
  min-height: 100vh;
  /* Sem barra de endereço/abas do navegador móvel comendo a altura. */
  min-height: 100dvh;
  display: block;
  /* Nada de scroll horizontal: se algo estourar, é bug de layout, não de tela. */
  overflow-x: hidden;
}
.stage {
  position: relative;
  display: flex;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--panel);
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
}
.logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 8px;
}
.logo-img {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  object-fit: contain;
  border: 1px solid var(--sage);
  background: var(--surface-deep);
}
.logo-fallback {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  border: 1px solid var(--sage);
  background: var(--surface-deep);
  display: grid;
  place-items: center;
  font-family: Urbanist, sans-serif;
  font-weight: 700;
  color: var(--sage);
  font-size: 1.25rem;
  letter-spacing: .04em;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: background .15s, color .15s;
}
.sidebar-nav a svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  flex-shrink: 0;
}
.sidebar-nav a#navManual { margin-top: 4px; }
.sidebar-nav a:hover { background: var(--surface-raised); color: var(--text); }
.sidebar-nav a.active {
  background: rgba(var(--sage-rgb), 0.15);
  color: var(--sage);
  border: 1px solid rgba(var(--sage-rgb), 0.35);
}
/* flex-shrink:0 em todos os blocos da coluna.

   Antes .sidebar-filters era flex:1 + min-height:0, o que permitia ao bloco
   encolher ABAIXO do próprio conteúdo: os selects vazavam por cima de
   "Limpar filtros" em vez de a coluna rolar. O mobile já tinha essa correção
   desde a Fase 1.9; no desktop o bug só não aparecia porque os rótulos eram
   10px e cabiam por pouco. Com a escala em rem (12px) ele apareceu.

   .sidebar já tem overflow-y:auto — quem não cabe, rola. E .sidebar-user
   mantém margin-top:auto, então continua colado embaixo quando sobra espaço. */
.sidebar > * { flex-shrink: 0; }
.sidebar-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.sidebar-filters label {
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-filters select {
  width: 100%;
  min-width: 0;
}
.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.sidebar-actions .meta {
  font-size: var(--fs-micro);
  color: var(--muted);
  text-align: center;
  margin: 0;
}

.shell {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: var(--shell-pad-y) var(--shell-pad-x) var(--shell-pad-b) 16px;
  display: flex;
  flex-direction: column;
  /* O .stage tinha overflow:hidden, que RECORTAVA o conteúdo quando as alturas
     mínimas do #app não cabiam na viewport (notebook 1366x768, por exemplo).
     Rolar por dentro do shell degrada bem; recortar perde informação. */
  overflow-y: auto;
  overflow-x: hidden;
}
#boot[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 100;
  padding: 0.5rem 0.85rem;
  background: var(--ink, var(--surface-deep));
  color: var(--text);
  border-radius: var(--radius-pill, 999px);
  transform: translateY(-200%);
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--sage, #93B452);
  outline-offset: 2px;
}

/* Projeto 5a — loading visível (shell vazio ≠ espera). Erro reusa .empty. */
.boot {
  padding: 1.5rem 1.25rem 2rem;
  max-width: 1400px;
}
.boot-loading .boot-msg {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-family: var(--font-body, "Lato", sans-serif);
  font-size: var(--fs-sm);
}
.boot-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.sk-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.sk {
  border-radius: var(--radius, 12px);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0.04) 90%
  );
  background-size: 200% 100%;
  animation: sk-pulse 1.2s ease-in-out infinite;
}
.sk-wide { height: 1.1rem; width: min(18rem, 55%); }
.sk-card { height: 5.5rem; }
.sk-panel { height: 11rem; width: 100%; }
@keyframes sk-pulse {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (max-width: 720px) {
  .sk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#app[aria-busy="true"] {
  cursor: progress;
}
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; background: rgba(255, 255, 255, 0.06); }
}
/* Projeto 2 — dobra nobre.

   Antes: #app era um grid de 8 linhas POSICIONAIS de altura fixa, redeclarado
   com valores menores no notebook. Duas consequências ruins:

   1. O grid mapeava 1:1 para a ordem exata das seções do HTML, então inserir
      ou remover uma seção desalinhava todas as alturas.
   2. Para caber tudo em 100vh, o ritual do diretor (faixa, KPIs, gráfico,
      movimento) recebia quase o mesmo orçamento de pixel que a profundidade
      operacional. Quando tudo tem o mesmo peso, nada tem peso.

   Agora #app é uma coluna de dois blocos nomeados: .fold é o ritual e ocupa a
   primeira tela; .depth é a operação e vive abaixo dela. Nenhuma altura
   depende da posição de uma seção. */
#app {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-height: 0;
}

.fold {
  display: grid;
  grid-template-areas:
    "cabecalho"
    "banner"
    "faixa"
    "kpis"
    "graficos";
  /* Gráficos com altura de design (20rem), não 1fr da sobra da viewport —
     em FHD o canvas deixava de inflar para ~680px. */
  grid-template-rows: auto auto auto auto 20rem;
  gap: var(--gap);
  align-content: start;
  /* flex-shrink:0 — sem isto, min-height:0 no filho do #app (flex)
     esmagava a dobra a 0px e a .depth subia por cima (KPIs sumiam,
     Funil/Pacotes sobrepunham o gráfico). */
  flex: 0 0 auto;
  min-height: auto;
}
.fold > header.top { grid-area: cabecalho; }
.fold > .banner { grid-area: banner; }
.fold > .periodo-delta { grid-area: faixa; }
.fold > .kpis { grid-area: kpis; }
.fold > .charts-row { grid-area: graficos; }

/* Banner de qualidade/cobertura: fora da UI do cliente (pedido 2026-09-10). */
.fold > .banner,
#banner { display: none !important; }

/* Nas telas sem faixa de comparação (sem período anterior no histórico) o
   [hidden] remove a seção do fluxo, e a área "faixa" simplesmente colapsa. */

.depth {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  flex: 0 0 auto;
  min-height: auto;
}
header.top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 52px;
}
.title-block { display: flex; align-items: stretch; gap: 14px; }
.vdiv { width: 1px; background: var(--sage); }
h1 { font-family: Urbanist, sans-serif; font-size: var(--fs-h1); font-weight: 700; letter-spacing: .01em; margin: 0; line-height: 1.2; }
.eyebrow { font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: var(--space-1); }
.subtitle { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1400px; }
.banner {
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5); font-size: var(--fs-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(var(--sage-rgb), 0.10); border: 1px solid rgba(var(--sage-rgb), 0.28);
  color: var(--sage-ink);
}
/* estado normal = informativo (verde discreto); alerta só quando há ressalva real */
.banner-atencao {
  background: rgba(var(--orange-rgb), 0.12); border-color: rgba(var(--orange-rgb), 0.35);
  color: var(--orange-ink);
}
.banner-critico {
  background: rgba(var(--danger-rgb), 0.14); border-color: rgba(var(--danger-rgb), 0.45);
  color: var(--danger-ink);
}
select {
  background: var(--card); color: var(--text); border: 1px solid #333; border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5); min-width: 8.75rem; font-size: var(--fs-sm); font-family: Lato, sans-serif;
}
.ghost {
  background: transparent; color: var(--sage); border: 1px solid var(--sage); border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6); font-size: var(--fs-sm); white-space: nowrap; cursor: pointer; font-family: Lato, sans-serif;
  width: 100%;
}
/* auto-fit em vez de repeat(4, 1fr): quatro cards continuam ocupando a linha
   inteira, mas um quinto KPI deixa de exigir mexer no CSS. */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: var(--gap);
  min-height: 0;
}
.kpi {
  padding: var(--space-5) var(--space-7) var(--space-6);
  display: flex; flex-direction: column;
  position: relative;
}
.kpi .label { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kpi .value { font-family: Urbanist, sans-serif; font-weight: 700; font-size: var(--fs-kpi); line-height: 1.1; margin-top: var(--space-1); }
.kpi .hint { font-size: var(--fs-xs); color: var(--muted); margin-top: auto; padding-top: var(--space-2); line-height: 1.35; }
.kpi-tip {
  display: none;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% - 4px);
  z-index: 3;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text);
  box-shadow: var(--shadow-pop);
}
.kpi:hover .kpi-tip, .kpi:focus-visible .kpi-tip { display: block; }
.kpi:focus-visible { outline: 1px solid var(--sage); outline-offset: 2px; }

.periodo-delta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-7);
  padding: var(--space-3) var(--space-6);
}
.periodo-delta .pd-kicker {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
}
.periodo-delta .pd-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.periodo-delta .pd-name { font-size: var(--fs-xs); color: var(--muted); }
/* A faixa passou de 3 para 4 itens (um por card). Mantém-se em uma linha no
   monitor e quebra sozinha quando não couber. */
.periodo-delta { row-gap: var(--space-2); }
.periodo-delta .pd-val { font-family: Urbanist, sans-serif; font-weight: 700; font-size: var(--fs-pd-val); }

.charts-row {
  display: grid;
  /* 3+1 alinha com a grade dos 4 KPIs (75% / 25%). */
  grid-template-columns: 3fr 1fr;
  gap: var(--gap);
  min-height: 0;
  height: 100%;
}
/* Um card, não três. Antes .chart-panel, .panel e .ranking eram o mesmo
   componente declarado três vezes com paddings ligeiramente diferentes, mais
   três regras h2 e três regras p.hint idênticas — e tudo repetido no
   breakpoint do notebook. Painel novo exigia tocar em seis lugares. */
.kpi, .panel, .chart-panel, .ranking, .periodo-delta {
  background: var(--card);
  color: var(--card-foreground);
  border-radius: var(--radius-lg);
  box-shadow: var(--ring-card);
  min-height: 0;
}
.panel, .chart-panel, .ranking {
  display: flex;
  flex-direction: column;
}
.panel, .chart-panel { padding: var(--space-4) var(--space-6) var(--space-5); }
.ranking { padding: var(--space-4) var(--space-7) var(--space-3); }
.panel > h2, .chart-panel > h2, .ranking > h2, .panel-head h2 {
  font-family: Urbanist, sans-serif;
  font-size: var(--fs-panel-title);
  margin: 0 0 var(--space-1);
}
.panel > p.hint, .chart-panel > p.hint, .ranking > p.hint, .panel-head p.hint {
  margin: 0 0 var(--space-2);
  color: var(--muted-foreground);
  font-size: var(--fs-xs);
  line-height: 1.3;
}
/* Cabeçalho de card no padrão shadcn (Header + Title + Description + Action):
   texto à esquerda, ação opcional à direita. */
.panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-4); }
/* O texto pede um mínimo; se a ação não couber ao lado (card estreito), ela desce para a linha de baixo. */
.panel-head-text { flex: 1 1 11rem; min-width: 0; }
.panel-head .segmented { flex: none; }

/* Foco visível único, com contraste no fundo escuro. */
:where(button, a, summary, select, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Container de ícone da marca (design.md): 36×36, fundo --icon. */
.icon-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  background: var(--icon); border-radius: var(--radius-sm); color: var(--sage);
}
.icon-box svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* Progress (shadcn): trilho + preenchimento. A cor vem de --grp do pai. */
.progress {
  display: block; height: 0.375rem;
  background: var(--icon); border-radius: var(--radius-pill); overflow: hidden;
}
.progress > span { display: block; height: 100%; background: var(--grp, var(--sage)); border-radius: inherit; }

/* Segmented / Toggle group (shadcn): alterna a visão do card. */
.segmented {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.segmented[hidden] { display: none; }
.segmented button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--muted-foreground);
  font-family: Lato, sans-serif; font-size: var(--fs-label); font-weight: 600;
  padding: 0.25rem 0.75rem; min-height: 1.75rem; border-radius: var(--radius-sm);
}
.segmented button:hover { color: var(--foreground); }
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--accent-foreground); }

/* Grupos de origem: cada grupo é um <details>; o resumo já traz o total. */
.origem-grupos { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow: auto; }
.grupo { --grp: var(--grp-sem); background: var(--surface-sunken); border-radius: var(--radius-sm); }
.grupo.grp-fisio { --grp: var(--grp-fisio); }
.grupo.grp-unidade { --grp: var(--grp-unidade); }
.grupo.grp-externa { --grp: var(--grp-externa); }
.grupo > summary {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-4); align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); cursor: pointer; list-style: none;
}
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary:hover { background: var(--accent); }
.grupo-nome {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-micro); color: var(--muted-foreground);
  text-transform: uppercase; letter-spacing: .06em;
}
.grupo-nome::before {
  content: ""; width: 0.4rem; height: 0.4rem; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.grupo[open] .grupo-nome::before { transform: rotate(45deg); }
.grupo-nome .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--grp); flex: none; }
.grupo > summary .cv { font-family: Urbanist, sans-serif; font-weight: 700; font-size: var(--fs-base); text-align: right; color: var(--foreground); }
.grupo > summary .cm { grid-column: 1 / -1; font-size: var(--fs-label); color: var(--muted-foreground); }
.grupo > summary .progress { grid-column: 1 / -1; margin-top: var(--space-1); }
.grupo-itens { padding: 0 var(--space-3) var(--space-2); }
.grupo-item {
  display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-4);
  padding: var(--space-2) 0; border-top: 1px solid var(--border);
  font-size: var(--fs-label);
}
.grupo-item .num { font-family: Urbanist, sans-serif; font-weight: 700; text-align: right; }
.grupo-item .cm { grid-column: 1 / -1; color: var(--muted-foreground); font-size: var(--fs-micro); }
@media (prefers-reduced-motion: reduce) { .grupo-nome::before { transition: none; } }
.chart-box {
  position: relative;
  flex: 1;
  min-height: 0;
}
.charts-row .chart-panel,
.charts-row .panel-nivel {
  min-height: 0;
  height: 100%;
}
.charts-row .nivel-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* A operação abaixo da dobra deixa de ser comprimida: cada painel pede a
   altura que a leitura exige, em vez de dividir uma linha de grid de 140px. */
.bottom { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); min-height: 0; }
.depth .panel { min-height: 13.75rem; }
/* Donut travado: mesma altura em Rede / Vet / Clientes (não herda o irmão). */
.depth .panel .chart-box {
  flex: none;
  height: 12rem;
  min-height: 12rem;
  max-height: 12rem;
}
/* A tabela precisa de teto. Antes quem limitava era a linha do grid de 8
   valores (0.9fr, ~96px num 1366x768) e a .wrap rolava por dentro. Sem teto
   nenhum, o ranking de 63 unidades renderia inteiro e a página virava ~3000px,
   enterrando o rodapé e o pipeline. O teto voltou — quatro vezes maior que o
   antigo, e ainda rolando por dentro do painel. */
.depth .ranking { min-height: 16rem; max-height: min(60vh, 34rem); }

table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
th, td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); font-weight: 700; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; }
td.num, th.num { text-align: right; }
/* Projeto 6: drill-down é o <a.rank-link>, não a linha inteira clicável. */
.ranking tbody tr:hover { background: var(--surface-raised); }
.ranking tbody tr.sel { background: var(--surface-sel); }
.ranking table > caption {
  caption-side: top;
  text-align: left;
  color: var(--muted);
  font-size: var(--fs-micro);
  padding: 0 0 var(--space-2);
}
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.th-sort:focus-visible {
  outline: 2px solid var(--sage, #93B452);
  outline-offset: 2px;
}
th[aria-sort="ascending"] .th-sort::after { content: " ▲"; font-size: 0.85em; }
th[aria-sort="descending"] .th-sort::after { content: " ▼"; font-size: 0.85em; }
.rank-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.rank-link:hover { text-decoration: underline; }
.rank-link:focus-visible {
  outline: 2px solid var(--sage, #93B452);
  outline-offset: 2px;
}
/* Sem teto em px: a linha do grid (.ranking) já limita a altura, e um cap de
   120px deixava a tabela presa em ~4 linhas com espaço morto embaixo num
   monitor alto — o oposto de "fluido". No empilhado (<=1023) o teto volta,
   porque ali não há linha de grid para conter. */
.wrap { overflow: auto; flex: 1; min-height: 0; }
footer { color: var(--muted); font-size: var(--fs-micro); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { padding: 3rem 1.25rem; color: var(--orange); }

.page-unidade #wrapFiltroVet { display: none; }

.funil { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow: auto; }
.funil-step {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-sm); border-left: 3px solid var(--sage);
}
.funil-step .fl { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.funil-step .fv { font-family: Urbanist, sans-serif; font-weight: 700; font-size: var(--fs-funil-val); }
.funil-step.hl { border-left-color: var(--orange); }
.canais, .pacotes, .origem-list, .novos-cards, .parceiros-list { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow: auto; }
.canal-row, .pac-row, .origem-row, .novo-card, .parceiro-row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-4);
  padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-sm);
}
.canal-row .cn, .pac-row .cn, .origem-row .cn, .novo-card .cn, .parceiro-row .cn {
  font-size: var(--fs-micro); color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
}
.canal-row .cv, .pac-row .cv, .origem-row .cv, .novo-card .cv, .parceiro-row .cv {
  font-family: Urbanist, sans-serif; font-weight: 700; font-size: var(--fs-base); text-align: right;
}
.canal-row .cm, .pac-row .cm, .origem-row .cm, .novo-card .cm, .parceiro-row .cm {
  grid-column: 1 / -1; font-size: var(--fs-label); color: var(--muted);
}
.tickets { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
.top-clientes { flex: 1; overflow: auto; font-size: var(--fs-micro); }
.top-clientes table { font-size: var(--fs-micro); }
.bench { font-size: var(--fs-micro); color: var(--muted); }
.bench .delta-up { color: var(--sage); }
.bench .delta-down { color: var(--orange); }

/* Projeto 3 — o card tem uma linha de comparação, não uma frase encadeada.

   Antes o hint era uma linha de 12px que emendava até quatro fatos com "·":
   "3/5 · +20% vs anterior amostra pequena (n=3)". Tudo no mesmo peso, na menor
   fonte do card, e o aviso de amostra — o único que muda a interpretação do
   número — era o último. Agora a comparação é um chip e o aviso é um badge. */
.kpi-bench-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  min-height: 1.25rem;
}
.kpi-bench {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .05);
  font-size: var(--fs-micro);
  color: var(--muted);
  white-space: nowrap;
}
.kpi-bench .ref { text-transform: uppercase; letter-spacing: .06em; }
.kpi-bench .val { color: var(--text); font-weight: 700; }
/* Seta = direção, sem número. O valor de referência está ao lado, então a
   magnitude se lê sozinha — e some a ambiguidade entre "+9%" e "+5pp" que o
   texto encadeado carregava quando a métrica já era uma taxa. */
.kpi-bench .arrow { font-size: .9em; }
.kpi-bench-up .arrow { color: var(--sage); }
.kpi-bench-down .arrow { color: var(--orange); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.badge-atencao {
  background: rgba(var(--orange-rgb), .14);
  border: 1px solid rgba(var(--orange-rgb), .34);
  color: var(--orange-ink);
}
.amostra { color: var(--orange); font-size: var(--fs-micro); white-space: nowrap; }

/* Auth + Admin */
.auth-page {
  min-width: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  border: 1px solid var(--line);
}
.auth-logo { display: flex; justify-content: center; margin-bottom: 16px; }
.auth-logo img, .auth-logo .logo-fallback {
  width: 80px; height: 80px; border-radius: 16px;
  border: 1px solid var(--sage); object-fit: contain; background: var(--surface-deep);
}
.auth-card h1 {
  font-family: Urbanist, sans-serif; font-size: 22px; margin: 0 0 4px; text-align: center;
}
.auth-sub { color: var(--muted); font-size: 13px; text-align: center; margin: 0 0 24px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.auth-form input, .auth-form select, .admin-form input, .admin-form select {
  background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); padding: 10px 12px; font-size: 14px; font-family: Lato, sans-serif;
}
.auth-form button:not(.ghost), .admin-form button:not(.ghost) {
  margin-top: 8px; background: var(--ink); color: #fff; border: none; border-radius: 18px;
  padding: 12px; font-family: Urbanist, sans-serif; font-weight: 600; font-size: 14px; cursor: pointer;
}
.auth-form button:not(.ghost):hover, .admin-form button:not(.ghost):hover { background: var(--ink-hover); }
.auth-form button:disabled { opacity: .6; cursor: wait; }
.auth-error { color: var(--orange); font-size: 13px; margin: 0; }
.auth-msg { font-size: 13px; margin: 12px 0 0; }
.auth-msg.auth-ok { color: var(--sage); }
.auth-msg.auth-error { color: var(--orange); }
.auth-help {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

/* Admin dentro do stage/sidebar (Projeto 8) — sem filters, conteúdo rolável. */
.page-admin .shell { overflow: auto; }
.admin-main {
  display: block;
  padding: var(--shell-pad-y) var(--shell-pad-x) var(--shell-pad-b);
  min-height: 0;
}
.sidebar-admin .sidebar-filters,
.sidebar-admin .sidebar-actions { display: none; }
.sidebar-admin .sidebar-user { margin-top: auto; }

.admin-page { align-items: flex-start; }
.admin-shell { width: 100%; max-width: 960px; margin: 0 auto; }
.admin-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.admin-header h1 { font-family: Urbanist, sans-serif; font-size: 24px; margin: 0; }
.admin-header .auth-sub { text-align: left; margin: 4px 0 0; }
.admin-header-actions { display: flex; gap: 8px; align-items: center; }
.link-btn { text-decoration: none; display: inline-flex; align-items: center; }
.admin-panel {
  background: var(--card); border-radius: var(--radius-lg); padding: 20px;
  margin-bottom: 20px; border: 1px solid var(--border);
  box-shadow: var(--ring-card);
}

/* Diálogo do admin — substitui window.prompt/confirm. */
.admin-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--foreground);
  padding: 0;
  max-width: min(28rem, calc(100vw - 2rem));
  box-shadow: var(--shadow-pop);
}
.admin-dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
}
.admin-dialog-form { padding: 1.25rem 1.35rem 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.admin-dialog-form h2 {
  font-family: Urbanist, sans-serif; font-size: 1.125rem; margin: 0;
}
.admin-dialog-body { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.45; }
.admin-dialog-input-wrap {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.admin-dialog-input-wrap input {
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 10px 12px; font-size: 14px; font-family: Lato, sans-serif;
  text-transform: none; letter-spacing: normal;
}
.admin-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.admin-dialog-actions .ghost { width: auto; margin: 0; }
.admin-dialog-confirm {
  appearance: none; border: none; cursor: pointer;
  background: var(--ink); color: var(--text); border-radius: 18px;
  padding: 10px 16px; font-family: Urbanist, sans-serif; font-weight: 600; font-size: 13px;
}
.admin-dialog-confirm:hover { background: var(--ink-hover); }
.admin-dialog-confirm.danger { background: rgba(var(--danger-rgb), 0.85); }
.admin-dialog-confirm.danger:hover { background: rgba(var(--danger-rgb), 1); }
.admin-panel h2 { font-family: Urbanist, sans-serif; font-size: 16px; margin: 0 0 16px; }
.admin-form {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.admin-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.admin-form button[type="submit"] { grid-column: 1 / -1; }
.admin-hint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 16px;
}
.admin-hint-inline { font-size: 11px; color: var(--muted); }
.admin-password-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.admin-password-row input { flex: 1; min-width: 0; }
.admin-password-row .ghost { margin: 0; flex-shrink: 0; }
/* .ghost nasce com width:100% (é botão de barra de filtro do dashboard). Dentro
   do painel admin ele é botão de linha: tem de caber no conteúdo, senão empurra
   o campo de senha para um fiapo e empilha uma ação por linha. */
.admin-password-row .ghost,
.admin-toolbar .ghost,
.admin-actions .ghost { width: auto; }
.admin-table-wrap { overflow: auto; }
.admin-table { width: 100%; font-size: 13px; }
.admin-table th { font-size: 10px; }
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
button.ghost.sm { font-size: 11px; padding: 4px 8px; }
button.ghost.sm.danger { color: var(--orange); border-color: rgba(var(--orange-rgb), .45); }

/* --------------------------------------------------------------------------
   Painel master (Fase 1.12): abas Acessos / Contas.
   A aba Acessos tem tabelas largas; a de Contas é um formulário de 960px.
   -------------------------------------------------------------------------- */
.admin-shell.wide { max-width: 1200px; }
.admin-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-tab {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 6px 16px; font-family: Urbanist, sans-serif; font-weight: 600;
  font-size: 13px; cursor: pointer;
}
.admin-tab:hover { color: var(--text); }
.admin-tab[aria-selected="true"] {
  background: rgba(var(--sage-rgb), .12);
  border-color: var(--sage); color: var(--sage);
}
.admin-toolbar {
  display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 16px;
}
.admin-toolbar label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.admin-toolbar select, .admin-toolbar input {
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text);
  padding: 8px 10px; font-size: 13px; font-family: Lato, sans-serif;
}
.admin-toolbar input[type="number"] { width: 90px; }
.admin-split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 20px;
}
.admin-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.admin-list li { color: var(--text); }
.admin-row-off td { color: var(--muted); }
.admin-row-edit td { vertical-align: middle; }
.admin-row-edit select {
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text);
  padding: 4px 6px; font-size: 12px; font-family: Lato, sans-serif;
  max-width: 100%;
}

/* Série diária em CSS puro: 30-90 colunas, uma métrica, sem canvas. */
.admin-bars {
  display: flex; align-items: flex-end; gap: 3px;
  height: 140px; padding-bottom: 18px; overflow-x: auto;
}
.admin-bar {
  flex: 1 1 0; min-width: 6px; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  position: relative;
}
.admin-bar-fill {
  display: block; width: 100%; min-height: 2px;
  background: var(--sage); border-radius: 2px 2px 0 0;
}
.admin-bar-day {
  position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-style: normal; color: var(--muted); white-space: nowrap;
}
.sidebar-user {
  font-size: var(--fs-micro); color: var(--muted); line-height: 1.35;
  padding: 8px 0 4px; border-top: 1px solid var(--line); margin-top: auto;
}
.sidebar-user strong { color: var(--text); font-weight: 600; display: block; }
.sidebar-user a { color: var(--sage); text-decoration: none; font-size: var(--fs-micro); }
.sidebar-user a:hover { text-decoration: underline; }
#btnLogoutSidebar { width: 100%; margin-top: 6px; }

/* Painel de leitura por nível (rede / unidade / veterinário / clientes) */
.nivel-list { display: flex; flex-direction: column; gap: 4px; overflow: auto; flex: 1; min-height: 0; }
.nivel-row {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-3);
  align-items: baseline; padding: var(--space-2) var(--space-3);
  background: rgba(255,255,255,.02); border-radius: var(--radius-sm);
}
.nivel-row .cn { font-size: var(--fs-xs); color: var(--text); }
.nivel-row .cv { font-family: Urbanist, sans-serif; font-weight: 600; font-size: var(--fs-sm); }
.nivel-row .cm { grid-column: 1 / -1; font-size: var(--fs-micro); color: var(--muted); }
.nivel-sep { height: 1px; background: var(--line); margin: 3px 0; }
.nivel-nota {
  margin-top: auto; padding-top: 6px; flex-shrink: 0;
  position: sticky; bottom: 0; background: var(--card);
  font-size: var(--fs-micro); color: var(--muted); line-height: 1.35;
}

/* Pipeline em aberto — linha de total destacada */
.total-row td { border-top: 1px solid var(--line); color: var(--sage); }
.total-row td:first-child { color: var(--text); }

/* ==========================================================================
   Responsividade (Fase 1.9)

   O layout nasceu como um canvas fixo de 1980x1020. A base acima continua
   sendo a leitura "monitor grande": tudo na tela de uma vez. Daqui para
   baixo, cada faixa só reduz densidade — nenhuma esconde indicador.

   Faixas:  >=1440 monitor | 1024-1439 notebook | 641-1023 tablet | <=640 celular
   ========================================================================== */

/* Topbar + drawer: existem no HTML sempre, mas só aparecem no compacto.
   display:none aqui (e não o atributo hidden) porque [hidden] usa !important
   e venceria as media queries abaixo. */
.topbar { display: none; }
.sidebar-overlay { display: none; }
.sidebar-close { display: none; }

.topbar {
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--sidebar);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
  flex-shrink: 0;
}
.topbar-toggle {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.topbar-toggle svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.topbar-toggle:hover { background: var(--surface-raised); }
.topbar-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: contain;
  border: 1px solid var(--sage);
  background: var(--surface-deep);
  flex-shrink: 0;
}
.topbar-title {
  font-family: Urbanist, sans-serif;
  font-weight: 700;
  font-size: var(--fs-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Notebook (1024–1439): mesma leitura do monitor, escala menor.

   Antes este bloco redeclarava o grid-template-rows de 8 valores do #app com
   números menores, porque as alturas mínimas somavam ~740px e estouravam uma
   viewport de 1366x768. Com a dobra (.fold) isso não é mais necessário: a
   dobra pede a altura da tela e a operação rola. O que sobra aqui é só
   densidade de cromo — sidebar, gaps e paddings.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --sidebar-w: 210px;
    --gap: 8px;
    --shell-pad-x: 14px;
    --shell-pad-y: 10px;
  }
  .logo-img, .logo-fallback { width: 64px; height: 64px; border-radius: 14px; }
  .sidebar { padding: 10px 10px 12px; gap: 8px; }
  .sidebar-nav a { padding: 7px 10px; font-size: var(--fs-xs); }
  header.top { min-height: 2.75rem; }
  select { padding: var(--space-2) var(--space-4); font-size: var(--fs-xs); }
  .ghost { padding: var(--space-2) var(--space-5); font-size: var(--fs-xs); }
}

/* --------------------------------------------------------------------------
   Tablet e abaixo (<=1023): a leitura de uma tela só deixa de ser possível.
   O painel vira uma pilha rolável e a sidebar vira drawer.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .stage {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .topbar { display: flex; }

  /* Fora de fluxo: desliza por cima do conteúdo em vez de empurrá-lo. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: min(300px, 86vw);
    max-width: 300px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 32px rgba(0, 0, 0, .6);
    padding: 14px 14px 20px;
  }
  .sidebar.is-open { transform: translateX(0); }

  /* flex-shrink:0 e flex:0 0 auto agora vêm da base (a mesma correção vale no
     desktop). Aqui sobra só tirar o margin-top:auto: no drawer o bloco do
     usuário segue o conteúdo em vez de ser empurrado para o fim da coluna. */
  .sidebar-user { margin-top: 0; }

  /* Aberto, o drawer de 300px cobre o ☰ da topbar. Sem isto, fechar só é
     possível pela faixa estreita à direita — e no celular não há Esc. */
  /* O x era absolute em relação à .sidebar, que é o contêiner de rolagem —
     com o drawer rolado ele saía da tela. Ancorado na .logo-wrap sticky,
     acompanha o topo. */
  .logo-wrap {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--sidebar);
  }
  .sidebar-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 4px;
    right: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }
  .sidebar-close:hover { background: var(--surface-raised); }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .sidebar-overlay.is-open { opacity: 1; pointer-events: auto; }
  /* Trava o fundo enquanto o drawer está aberto. */
  body.drawer-open { overflow: hidden; }

  .shell {
    height: auto;
    overflow: visible;
    padding: 12px 14px 20px;
  }
  /* Empilhado, cada bloco pede a própria altura — e a dobra para de
     reivindicar a primeira tela, senão sobraria um vão morto antes da
     operação numa viewport alta de tablet. */
  .fold {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-height: auto;
    flex: 0 0 auto;
  }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .charts-row { grid-template-columns: 1fr; }
  .bottom { grid-template-columns: repeat(2, 1fr); }

  .chart-panel, .panel, .ranking { min-height: 0; }
  /* Os pisos e tetos da operação são de desktop; empilhado quem manda é o
     max-height das listas e da .wrap, logo abaixo. */
  .depth .panel, .depth .ranking { min-height: 0; max-height: none; }
  /* Altura de design no empilhado — mesmo valor no principal e nos donuts. */
  .charts-row { height: auto; }
  .chart-box,
  .panel .chart-box,
  .depth .panel .chart-box {
    flex: none;
    height: 14rem;
    min-height: 14rem;
    max-height: 14rem;
  }
  .kpi { min-height: 84px; }

  /* Listas roláveis: teto para não virar uma página infinita. */
  .nivel-list, .funil, .canais, .pacotes,
  .origem-list, .origem-grupos, .novos-cards, .parceiros-list, .top-clientes {
    max-height: 300px;
  }
  .wrap { max-height: 340px; }
  /* Scroll horizontal fica DENTRO do painel — nunca na viewport.
     min-width:0 é o que faz isso funcionar: um item de flex/grid tem
     min-width:auto por padrão e se recusa a encolher abaixo do próprio
     conteúdo, então a tabela de 440px empurrava a largura da PÁGINA
     (viewport de 390px virava 481px) em vez de rolar dentro do painel. */
  .fold, .depth, .kpi, .panel, .chart-panel, .ranking, .periodo-delta { min-width: 0; }
  .wrap, .top-clientes, .nivel-list, .funil, .canais, .pacotes,
  .origem-list, .origem-grupos, .novos-cards, .parceiros-list {
    min-width: 0;
    max-width: 100%;
  }
  /* Só as tabelas realmente largas ganham piso: o ranking (7 colunas) e o
     pipeline. "Top clientes" tem 2 colunas — com min-width o valor era
     empurrado para fora do painel e só aparecia rolando. */
  .wrap table, .admin-table-wrap table { min-width: 440px; }

  /* Textos que eram nowrap para caber num canvas fixo agora quebram. */
  .subtitle {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
  }
  .banner { white-space: normal; overflow: visible; text-overflow: clip; }
  footer { white-space: normal; overflow: visible; text-overflow: clip; }
  .amostra { white-space: normal; }

  /* Alvos de toque + 16px nos campos evita o zoom automático do iOS. */
  .sidebar-nav a { padding: 12px; font-size: 14px; min-height: 44px; }
  .sidebar-user a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    padding: 8px 4px 8px 0;
  }
  .sidebar-filters { gap: 12px; }
  select, .auth-form input, .admin-form input {
    font-size: 16px;
    padding: 11px 12px;
    min-height: 44px;
  }
  .ghost { padding: 11px 14px; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Celular (<=640): uma coluna.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --gap: 10px; }
  .shell { padding: 12px 12px 24px; }
  .kpis { grid-template-columns: 1fr; }
  .bottom { grid-template-columns: 1fr; }
  .chart-box,
  .panel .chart-box,
  .depth .panel .chart-box {
    height: 13rem;
    min-height: 13rem;
    max-height: 13rem;
  }
  .nivel-list, .funil, .canais, .pacotes,
  .origem-list, .origem-grupos, .novos-cards, .parceiros-list, .top-clientes {
    max-height: 260px;
  }
  .wrap { max-height: 300px; }

  /* Admin e login em uma coluna. */
  .auth-page { padding: 16px; }
  .auth-card { padding: 24px 20px; }
  .admin-form { grid-template-columns: 1fr; }
  .admin-header { flex-direction: column; align-items: stretch; }
  .admin-header-actions { flex-wrap: wrap; }
  .admin-panel { padding: 16px 14px; }
}

/* Manual: página de leitura. Filtros não se aplicam; o miolo rola no shell. */
body.page-manual .sidebar-filters,
body.page-manual .sidebar-actions { display: none; }
body.page-manual #app {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: auto;
  gap: 16px;
  align-items: center;
}
body.page-manual .top,
body.page-manual .manual-toc,
body.page-manual .manual {
  width: 100%;
  max-width: 46rem;
}
body.page-manual .subtitle {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}
.manual-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 8px 0 10px;
  margin: 0 -2px;
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 20, 0.96) 60%,
    rgba(20, 20, 20, 0.85) 85%,
    rgba(20, 20, 20, 0)
  );
}
.manual-toc a {
  color: var(--sage);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--sage-rgb), 0.35);
  border-radius: var(--radius-pill);
  background: rgba(var(--sage-rgb), 0.08);
}
.manual-toc a:hover { background: rgba(var(--sage-rgb), 0.16); color: var(--text); }
.manual-toc a.is-active {
  background: rgba(var(--sage-rgb), 0.22);
  border-color: var(--sage);
  color: var(--text);
}
.manual-toc a:focus-visible {
  outline: 1px solid var(--sage);
  outline-offset: 2px;
}
.manual {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: none;
  padding-bottom: 28px;
}
.manual section {
  background: var(--card);
  border-radius: 12px;
  padding: 18px 18px 10px;
  scroll-margin-top: 72px;
}
.manual h2 {
  font-family: Urbanist, sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
}
.manual p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
}
.manual-hero h2 {
  font-size: 20px;
}
.manual-paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 4px 0 8px;
}
@media (min-width: 720px) {
  .manual-paths { grid-template-columns: repeat(3, 1fr); }
}
.manual-path {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--sage-rgb), 0.28);
  background: rgba(var(--sage-rgb), 0.06);
  text-decoration: none;
  color: inherit;
  min-height: 44px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.manual-path:hover {
  background: rgba(var(--sage-rgb), 0.12);
  border-color: rgba(var(--sage-rgb), 0.5);
}
.manual-path:focus-visible {
  outline: 1px solid var(--sage);
  outline-offset: 2px;
}
.manual-path-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}
.manual-path strong {
  font-family: Urbanist, sans-serif;
  font-size: 15px;
  color: var(--text);
}
.manual-path span:last-child {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-faint);
}
.manual-callout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 4px 0 10px;
}
@media (min-width: 640px) {
  .manual-callout-grid { grid-template-columns: 1fr 1fr; }
}
.manual-callout {
  padding: 12px 14px;
  border-radius: 10px;
  border-left: 3px solid var(--sage);
  background: rgba(var(--sage-rgb), 0.08);
}
.manual-callout strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--text);
}
.manual-callout p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-callout);
}
.manual dl { margin: 0; }
.manual dt {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin: 0 0 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  scroll-margin-top: 80px;
}
.manual dt:first-of-type {
  border-top: none;
  padding-top: 0;
}
.manual dt.is-anchor-target,
.manual section.is-anchor-target {
  animation: manual-anchor-flash 1.6s ease;
}
.manual dd {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-dim);
}
.manual-example {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(var(--sage-rgb), 0.1);
  font-size: 13px;
  line-height: 1.45;
  color: var(--sage-soft);
}
.manual strong { color: var(--sage); font-weight: 700; }
.kpi-tip-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--sage);
  font-weight: 700;
  text-decoration: none;
}
.kpi-tip-link:hover { text-decoration: underline; }
.kpi-tip-link:focus-visible {
  outline: 1px solid var(--sage);
  outline-offset: 2px;
}
@keyframes manual-anchor-flash {
  0%, 100% { box-shadow: none; }
  20%, 60% { box-shadow: inset 0 0 0 1px rgba(var(--sage-rgb), 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-overlay { transition: none; }
  .manual-path { transition: none; }
  .manual dt.is-anchor-target,
  .manual section.is-anchor-target { animation: none; }
}

/* Metas da unidade (tela metas.html). Verde = meta batida, laranja = atenção. */
.metas-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.meta-card {
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.meta-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.meta-valor { font-family: Urbanist, sans-serif; font-weight: 700; font-size: 28px; line-height: 1.1; }
.meta-alvo { font-size: 13px; color: var(--muted); }
.meta-situacao { font-size: 12px; color: var(--muted); }
.meta-ok { --grp: var(--sage); }
.meta-ok .meta-situacao { color: var(--sage-ink); }
.meta-atencao { --grp: var(--orange); }
.meta-atencao .meta-situacao { color: var(--orange-ink); }
.meta-neutro { --grp: var(--icon); }
.metas-rodape { margin: 12px 0 0; }
.page-metas input[type="month"], .page-metas .admin-form input[type="number"], .page-metas select {
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 10px 12px; font-size: 14px; font-family: Lato, sans-serif;
}
.alertas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.alerta { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 14px; }
.alerta-critica { border-color: rgba(var(--danger-rgb), .6); color: var(--danger-ink); }
.alerta-atencao { border-color: rgba(var(--orange-rgb), .6); color: var(--orange-ink); }
.analista-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.analista-sugestoes .ghost { width: auto; margin: 0; }
.analista-form { display: flex; flex-direction: column; gap: 12px; }
.analista-campo { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.analista-campo textarea {
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 10px 12px; font-size: 14px; font-family: Lato, sans-serif; resize: vertical;
  text-transform: none; letter-spacing: normal;
}
.analista-form .admin-dialog-confirm { align-self: flex-start; }
.analista-resposta {
  margin-top: 12px; padding: 14px 16px; background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-lg); font-size: 14px; line-height: 1.55; white-space: pre-wrap;
}