/* Painel Isenta — tokens do sistema de design do site (site/DESIGN-SYSTEM.md).
   Nenhuma cor fora desta lista. Nenhum texto abaixo de 16px. Três pesos: 400/600/700.

   Regra que rege os gráficos: as duas fatias de uma barra têm de se distinguir
   em escala de cinza. #01525E vs #EBB92C = 4,86:1. O #6AABA2 nunca carrega texto
   nem serve de par de contraste — é massa neutra. */

@font-face {
  font-family: 'Volte';
  src: url('/fontes/Volte-Regular.woff') format('woff');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Volte';
  src: url('/fontes/Volte-Semibold.woff') format('woff');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Volte';
  src: url('/fontes/Volte-Bold.woff') format('woff');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('/fontes/work-sans.woff2') format('woff2');
  font-weight: 400 700; font-display: swap;
}

:root {
  --texto: #01525E;
  --texto-inverso: #EAE5DC;
  --destaque: #EBB92C;
  --decor: #6AABA2;
  --acento: #2E6A61;
  --quente: #EAE5DC;
  --creme: #FCF9F2;
  --tint: #DCEAE8;
  --borda: #69727D;

  --foco: #2E6A61;           /* superfícies claras */
  --foco-escuro: #EBB92C;    /* sobre #01525E — 4,86:1 */

  --raio: 10px;
  --sombra: 0 1px 2px rgba(1,82,94,.05), 0 4px 12px rgba(1,82,94,.06);
  --rail: 232px;

  --fonte: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --titulo: 'Volte', var(--fonte);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 18px;
  line-height: 28px;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 16px; z-index: 10; background: var(--destaque); color: var(--texto); padding: 10px 16px; border-radius: 8px; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.rail :focus-visible { outline-color: var(--foco-escuro); }

/* ---------------------------------------------------------------- rail */
.rail {
  background: var(--texto);
  color: var(--texto-inverso);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.rail-marca { font-family: var(--titulo); font-size: 20px; font-weight: 700; line-height: 28px; padding: 0 20px; }
.rail-marca span { color: var(--destaque); }
.rail-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.rail-grupo {
  margin: 16px 20px 4px; font-size: 16px; font-weight: 600; line-height: 24px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--decor);
}
.rail-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 0 12px; padding: 8px 12px; border-radius: 8px;
  color: var(--texto-inverso); text-decoration: none; font-size: 16px; line-height: 24px;
}
a.rail-item:hover { background: rgba(234,229,220,.12); }
.rail-item.ativo {
  background: var(--texto-inverso); color: var(--texto); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
/* Item futuro mantém o texto cheio (7,06:1): a distinção vem da pílula, nunca de opacidade. */
.rail-item.futuro b {
  font-size: 16px; font-weight: 600; padding: 0 8px; border-radius: 999px;
  border: 1px solid var(--decor); color: var(--texto-inverso); white-space: nowrap;
}
.rail-pe { padding: 0 20px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 24px; }
.rail-saude, .rail-usuario { margin: 0; }
.rail-usuario { color: var(--decor); }
.botao-texto {
  background: none; border: 1px solid var(--texto-inverso); color: var(--texto-inverso);
  font: inherit; font-size: 16px; padding: 6px 14px; border-radius: 999px; cursor: pointer; align-self: start;
}
.botao-texto:hover { background: rgba(234,229,220,.14); }
.selo { display: inline-block; padding: 1px 10px; border-radius: 999px; font-weight: 600; font-size: 16px; }
.selo.ok { background: var(--decor); color: var(--texto); }
.selo.falha { background: var(--destaque); color: var(--texto); }

/* ---------------------------------------------------------------- conteúdo */
.conteudo { padding: 28px 32px 64px; max-width: 1360px; }

.topo-dash {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap; padding-bottom: 20px;
}
.eyebrow {
  margin: 0 0 2px; font-size: 16px; font-weight: 600; line-height: 24px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--acento);
}
h1 { font-family: var(--titulo); font-size: 32px; font-weight: 700; line-height: 40px; margin: 0; }
.dica { margin: 6px 0 0; font-size: 16px; line-height: 24px; color: var(--acento); }

.acoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.segmented { display: flex; border: 1px solid var(--borda); border-radius: 999px; overflow: hidden; }
.segmented button {
  font: inherit; font-size: 16px; line-height: 24px; padding: 8px 16px;
  border: none; background: #FFF; color: var(--texto); cursor: pointer;
}
.segmented button + button { border-left: 1px solid var(--borda); }
.segmented button[aria-pressed='true'] { background: var(--texto); color: var(--texto-inverso); font-weight: 700; }
.intervalo { display: flex; gap: 6px; align-items: center; }
.intervalo input {
  font: inherit; font-size: 16px; padding: 7px 10px; border: 1px solid var(--borda);
  border-radius: 8px; background: #FFF; color: var(--texto);
}
.btn {
  font: inherit; font-size: 16px; line-height: 24px; padding: 8px 16px;
  border: 1px solid var(--texto); border-radius: 999px; background: #FFF; color: var(--texto); cursor: pointer;
}
.btn:hover { background: var(--quente); }

/* ---------------------------------------------------------------- resposta */
.resposta {
  font-family: var(--titulo); font-size: 24px; font-weight: 600; line-height: 34px;
  margin: 0 0 16px; padding: 18px 22px; border-radius: var(--raio);
  background: var(--quente); border-left: 6px solid var(--decor);
}
.resposta.sim { border-left-color: var(--destaque); }
.resposta .base-pequena {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-family: var(--fonte); font-size: 16px; font-weight: 600; line-height: 24px;
  padding: 1px 10px; border-radius: 999px; background: #FFF; color: var(--acento);
}

/* ---------------------------------------------------------------- chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chips:empty { display: none; }
.chip {
  font: inherit; font-size: 16px; line-height: 24px; padding: 6px 14px;
  border: 1px solid var(--texto); border-radius: 999px; background: #FFF;
  color: var(--texto); cursor: pointer; display: inline-flex; gap: 8px; align-items: center;
}
.chip b { font-weight: 600; }
.chip .x { font-size: 18px; line-height: 1; }
.chip:hover { background: var(--quente); }
.chip.limpar { border-style: dashed; }

/* ---------------------------------------------------------------- kpi */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi {
  text-align: left; font: inherit; cursor: pointer;
  background: #FFF; border: 1px solid var(--tint); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 2px;
}
.kpi:hover { border-color: var(--decor); }
.kpi[aria-pressed='true'] { border: 2px solid var(--texto); background: var(--tint); }
.kpi-rotulo { font-size: 16px; font-weight: 600; line-height: 24px; color: var(--acento); }
.kpi-valor { font-family: var(--titulo); font-size: 40px; font-weight: 700; line-height: 48px; }
.kpi-sub { font-size: 16px; line-height: 24px; color: var(--acento); }

/* ---------------------------------------------------------------- grid e cards */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: start; }
.span7 { grid-column: span 7; }
.span5 { grid-column: span 5; }
.span12 { grid-column: span 12; }
/* Coluna da direita: cartões curtos empilhados, para o painel não abrir buracos. */
.pilha { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.card {
  background: #FFF; border: 1px solid var(--tint); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 22px 24px 20px;
}
.card-topo { margin-bottom: 12px; }
.card h2 { font-family: var(--titulo); font-size: 24px; font-weight: 600; line-height: 32px; margin: 0; }
.card-dica { margin: 4px 0 0; font-size: 16px; line-height: 24px; color: var(--acento); }
.card-dica .tag {
  display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 999px;
  background: var(--quente); color: var(--texto); font-size: 16px; font-weight: 600;
}
.grafico { height: 340px; margin: 4px 0 8px; }
/* O ECharts marca o cursor por estilo inline, que o CSP barra. A mão de "dá
   para clicar" vem daqui: barras e ícones da legenda são os elementos pintados. */
.grafico svg path[fill]:not([fill='none']) { cursor: pointer; }

/* ---------------------------------------------------------------- tabela */
.numeros { width: 100%; border-collapse: collapse; }
.numeros th, .numeros td { text-align: left; padding: 8px; border-bottom: 1px solid var(--tint); }
.numeros thead th { font-size: 16px; font-weight: 600; line-height: 24px; color: var(--acento); }
.numeros .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.numeros tbody tr { cursor: pointer; }
.numeros tbody tr:hover { background: var(--creme); }
.numeros tbody tr[aria-pressed='true'] { background: var(--tint); }
.numeros tbody tr[aria-pressed='true'] th { font-weight: 700; }
.numeros .perdeu { font-weight: 600; }

/* ---------------------------------------------------------------- unidades */
.linha-unidade { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--tint); }
.linha-unidade:last-child { border-bottom: none; }
.linha-rotulo { font-size: 16px; line-height: 24px; min-width: 200px; }
.linha-rotulo b { font-weight: 600; }
.quadrados { display: flex; gap: 4px; flex-wrap: wrap; }
.quadrado { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--texto); background: var(--tint); }
.quadrado.abandonou { background: var(--destaque); }
.quadrado.atendida { background: var(--texto); }
.quadrado.fora_horario { background: var(--decor); }
.quadrado.em_andamento { background: #FFF; }

/* ---------------------------------------------------------------- pessoas */
.pessoa { border: 1px solid var(--tint); border-left: 5px solid var(--decor); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; }
.pessoa.abandonou { border-left-color: var(--destaque); }
.pessoa-topo { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.pessoa-topo strong { font-size: 18px; }
.pessoa-topo a { color: var(--acento); }
.pessoa .onde { margin: 6px 0 0; font-weight: 600; }
.pessoa .meta { margin: 2px 0 0; font-size: 16px; line-height: 24px; color: var(--acento); }
.vazio { padding: 16px; border-radius: 8px; background: var(--creme); font-size: 16px; line-height: 24px; color: var(--acento); }

/* ---------------------------------------------------------------- bolhas */
.bolha { background: var(--creme); border: 1px solid var(--tint); border-left: 4px solid var(--decor); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.bolha p { margin: 0 0 4px; }
.bolha p:last-child { margin-bottom: 0; }
.opcoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.opcao { font-size: 16px; line-height: 24px; padding: 2px 12px; border-radius: 999px; background: var(--tint); }
.nota { margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--acento); }

/* ---------------------------------------------------------------- responsivo */
@media (max-width: 1100px) {
  .span7, .span5 { grid-column: span 12; }
  /* Quatro colunas apertadas viram três mais uma órfã: melhor 2 x 2. */
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  .rail {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 12px; padding: 12px 16px; overflow-x: auto;
  }
  .rail-nav { flex-direction: row; gap: 8px; align-items: center; }
  .rail-grupo { display: none; }
  .rail-item { margin: 0; white-space: nowrap; }
  .rail-pe { flex-direction: row; align-items: center; padding: 0; gap: 12px; }
  .conteudo { padding: 20px 16px 48px; }
}
@media (max-width: 720px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-valor { font-size: 32px; line-height: 40px; }
  .card { padding: 18px 16px; }
  .numeros { display: block; overflow-x: auto; }
}