/* =============================================================
   NÚMEROS — número principal, KPIs, funil e tabela por cidade
   ============================================================= */

/* ---------- número principal: exatamente um por tela ---------- */
.heroi{
  background:var(--slab);
  color:var(--slab-fg);
  border:1px solid var(--slab);
  border-radius:var(--r);
  padding:var(--s5);
  margin-bottom:var(--s3);
  box-shadow:var(--sh-2);
  /* o sparkline herda esta cor */
  --spark-anel:var(--slab);
  color:var(--slab-fg);
}
.heroi .k{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--slab-fg-2);
  margin-bottom:var(--s2);
}
.heroi .v{
  font-size:clamp(34px, 11vw, 46px);
  font-weight:700;
  letter-spacing:var(--ls-xtight);
  line-height:1.05;
  color:var(--slab-fg);
}
.heroi .delta{
  font-size:var(--fs-xs);
  color:var(--slab-fg-2);
  margin-top:var(--s2);
}
.heroi .sobe{color:var(--live);font-weight:600}
.heroi .desce{color:#F0A64A;font-weight:600}

.spark{
  display:block;
  width:100%;
  height:44px;
  margin-top:var(--s4);
  overflow:visible;
  color:var(--heat);
}
:root[data-tema="escuro"] .heroi .spark{color:var(--heat)}

/* ---------- KPIs ---------- */
.kpis{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s3);
  margin-bottom:var(--s6);
}
.kpi{
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:var(--r);
  padding:var(--s4);
  box-shadow:var(--sh-1);
}
.kpi .k{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-2);
  margin-bottom:var(--s2);
}
.kpi .v{
  font-size:var(--fs-2xl);
  font-weight:700;
  letter-spacing:var(--ls-xtight);
  line-height:1.1;
}
.kpi .d{font-size:var(--fs-xs);color:var(--fg-2);margin-top:var(--s1)}

/* ---------- funil: rampa ordinal, uma cor só ---------- */
.fun{margin-bottom:var(--s3)}
.fun:last-of-type{margin-bottom:0}
.fun-t{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--s3);
  font-size:var(--fs-sm);
  margin-bottom:var(--s2);
}
.fun-t b{font-weight:600}
.fun-t span{font-size:var(--fs-xs);color:var(--fg-2);flex:none}
.fun-b{
  height:10px;
  background:var(--bg-sunk);
  border-radius:var(--r-full);
  overflow:hidden;
}
.fun-b i{
  display:block;
  height:100%;
  width:0;
  border-radius:var(--r-full);
  transition:width .8s var(--ease);
}

/* ---------- tabela por cidade ---------- */
.rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:var(--s5) var(--s5) 0}

.tbl{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-sm);
  white-space:nowrap;
}
.tbl th{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  color:var(--fg-2);
  text-align:right;
  padding:0 0 var(--s2) var(--s3);
  font-weight:500;
}
.tbl th:first-child{text-align:left;padding-left:0}
.tbl td{
  padding:var(--s3) 0 var(--s3) var(--s3);
  border-top:1px solid var(--edge-2);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.tbl td:first-child{
  text-align:left;
  padding-left:0;
  font-weight:600;
  white-space:normal;
}

/* Cidade com retorno abaixo de 3x. O ícone é obrigatório: cor
   sozinha não comunica para quem não distingue vermelho. */
.tbl tr.fraca td{color:var(--warn-fg)}
.sinal{
  display:inline-block;
  width:14px;height:14px;
  vertical-align:-2px;
  margin-right:5px;
  color:var(--warn);
}
.sinal svg{width:100%;height:100%;display:block}