:root {
  --creme: #F7F5F1;
  --tinta: #1A1D1A;
  /* Identidade Grupo Ritmo: laranja/coral (círculo RITMO) + grafite (fundo do logo).
     '--floresta' foi mantido como nome, mas agora carrega a LARANJA da marca (acento),
     pra os acentos trocarem sem reescrever tudo. Barras escuras usam --grafite. */
  --floresta: #E2572C;
  --floresta-2: #3A3A40;
  --floresta-3: #45454C;
  --laranja: #E2572C;
  --laranja-2: #C9491F;
  --grafite: #2B2B2E;
  --grafite-2: #3A3A40;
  --grafite-3: #45454C;
  --ambar: #B0762E;
  --vermelho: #B4483C;
  --linha: #E4DFD5;
  --branco: #FFFFFF;
  --muted: #8A8579;
}

* { box-sizing: border-box; }

/* nada pode ser mais largo que a tela (evita deslocamento/rolagem horizontal).
   'clip' clipa sem virar container de rolagem -> não quebra o header sticky. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg { max-width: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h2 { font-family: "Archivo", sans-serif; font-weight: 800; }

/* ---------- topbar ---------- */
.topbar {
  background: var(--grafite);
  color: var(--creme);
  padding: 18px 32px;
  display: flex; align-items: baseline; gap: 14px;
}
.topbar .brand { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 22px; letter-spacing: .3px; }
.topbar .brand-sub { color: #C9C5BE; font-size: 14px; }

/* logo da marca (sobre barra grafite, integra com o fundo do logo) */
.brand-link, .app-brand-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { height: 46px; width: auto; display: block; }
.app-brand-tag {
  color: var(--laranja); font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  border-left: 1px solid #4a4a52; padding-left: 10px;
}
.nav { display: flex; gap: 8px; }
.nav a {
  color: #D3CFC8; text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 6px 14px; border-radius: 8px;
}
.nav a:hover { background: rgba(255,255,255,.12); color: #fff; }

/* título de página */
.pagina-titulo { margin-bottom: 18px; }
.pagina-titulo h1 { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 26px; color: var(--grafite); margin: 0 0 4px; }
.pagina-titulo p { margin: 0; color: var(--muted); font-size: 14px; }

/* badges de grupo / tags */
.grp { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; padding: 3px 9px; border-radius: 20px; }
.grp-top { background: #FBE7DE; color: var(--laranja); }
.grp-meio { background: #FBF1DD; color: #7A5410; }
.grp-baixo { background: #F6E5E2; color: var(--vermelho); }
.estrela { color: var(--ambar); font-size: 13px; }
.tag-nova { background: var(--ambar); color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; text-transform: uppercase; letter-spacing: .4px; }
.legenda-grupos { margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.urgente { color: var(--vermelho); font-weight: 700; }
.muted-txt { color: var(--muted); font-weight: 400 !important; font-size: 12.5px; }
.vazio { text-align: center !important; color: var(--muted); padding: 18px; }
.c-conv { font-family: "Archivo", sans-serif; font-weight: 800; color: var(--floresta); }

.container { max-width: 1120px; margin: 26px auto; padding: 0 22px; }

/* ---------- filtro ---------- */
.filtro { margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.atalho {
  text-decoration: none; font-size: 13px; font-weight: 600; color: var(--floresta);
  padding: 7px 14px; border-radius: 20px; border: 1px solid var(--linha);
  background: var(--branco);
}
.atalho:hover { background: #F1EEE8; }
.atalho.ativo { background: var(--floresta); color: var(--creme); border-color: var(--floresta); }
.filtro-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.filtro-linha form { display: flex; align-items: center; gap: 8px; margin: 0; }
.cal-seta { color: var(--muted); }
.filtro input[type="date"], .filtro select {
  padding: 9px 12px; border: 1px solid var(--linha); border-radius: 10px;
  background: var(--branco); font-size: 14px; font-family: inherit; color: var(--tinta);
}
.periodo-atual { font-size: 14px; color: var(--muted); }
.periodo-atual strong { color: var(--floresta); }

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--grafite), var(--grafite-2));
  color: var(--creme); border-radius: 18px; padding: 26px 30px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-bottom: 18px; box-shadow: 0 8px 24px rgba(36,64,46,.18);
}
.hero-label { display: block; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: #B7C6BB; }
.hero-valor { display: block; font-family: "Archivo", sans-serif; font-weight: 900; font-size: 46px; line-height: 1.05; margin-top: 4px; }
.hero-kpis { display: flex; gap: 30px; }
.hero-kpi { text-align: right; }
.hk-num { display: block; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 26px; color: #F0D9A8; }
.hk-lbl { font-size: 12px; color: #B7C6BB; text-transform: uppercase; letter-spacing: .5px; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 18px 20px; }
.kpi-num { display: block; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 30px; color: var(--floresta); }
.kpi-lbl { font-size: 13px; color: var(--muted); }

/* ---------- cards ---------- */
.card {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 16px;
  padding: 22px 24px; margin-bottom: 18px;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.card-head h2 { margin: 0; font-size: 18px; color: var(--grafite); }
.card-sub { font-size: 13px; color: var(--muted); }

/* ---------- funil em blocos ---------- */
.funil { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bloco {
  color: var(--creme); border-radius: 12px; padding: 16px 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.bloco-num { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 34px; line-height: 1; }
.bloco-lbl { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; opacity: .92; }
.w1 { width: 100%; background: var(--grafite); }
.w2 { width: 76%; background: var(--grafite-2); }
.w3 { width: 54%; background: var(--grafite-3); }
.w4 { width: 38%; background: linear-gradient(135deg, var(--laranja), var(--laranja-2)); }
.funil-seta { color: var(--ambar); font-size: 13px; font-weight: 700; }
.funil-seta span { font-family: "Archivo", sans-serif; }

.alerta-pendente {
  margin-top: 18px; background: #FBF1DD; border: 1px solid #EAD5A8;
  color: #7A5410; border-radius: 10px; padding: 12px 16px; font-size: 13.5px;
}
.alerta-pendente strong { color: var(--ambar); }

/* ---------- abas dos rankings ---------- */
.tab-bar {
  display: flex; gap: 6px; margin-bottom: 16px;
  border-bottom: 2px solid var(--linha);
}
.tab-btn {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 14px;
  padding: 11px 22px; border: none; background: none; color: var(--muted);
  cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px;
  border-radius: 10px 10px 0 0; transition: color .15s, background .15s;
}
.tab-btn:hover { color: var(--floresta); background: #F1EEE8; }
.tab-btn.ativa {
  color: var(--laranja); background: #FBE7DE;
  border-bottom-color: var(--laranja);
}
.tab-panel.oculto { display: none; }

/* badges de faixa (tamanho do lead) */
.faixa-badge {
  display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 12px;
  border-radius: 20px; text-transform: capitalize;
}
.f-gigante { background: var(--floresta); color: var(--creme); }
.f-grande { background: #FBE7DE; color: var(--laranja); }
.f-normal { background: #FBF1DD; color: #7A5410; }
.f-pequeno { background: #F1EEE8; color: var(--muted); }
.f-sem_info { background: #ECEAE4; color: var(--muted); font-style: italic; }
.faixa-intervalo { color: var(--muted); font-size: 12px; margin-left: 8px; font-weight: 400; }

/* ---------- rankings ---------- */
table.rank { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rank thead th {
  text-align: right; padding: 10px 10px; color: var(--muted); font-weight: 600;
  border-bottom: 2px solid var(--linha); white-space: nowrap; font-size: 12px;
  text-transform: uppercase; letter-spacing: .4px;
}
.rank thead th.c-nome { text-align: left; }
.rank tbody td { text-align: right; padding: 11px 10px; border-bottom: 1px solid var(--linha); font-variant-numeric: tabular-nums; }
.rank tbody td.c-nome { text-align: left; font-weight: 600; }
.rank tbody tr:hover { background: #FBFAF7; }
.c-rank { width: 42px; text-align: center !important; }

/* medalhas */
.medalha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; font-family: "Archivo", sans-serif;
  font-weight: 800; font-size: 13px; color: #fff;
}
.m-num { background: #D9D3C7; color: #6B6559; }
.m-ouro { background: linear-gradient(135deg, #E5C453, #C9A227); color: #4A3B08; }
.m-prata { background: linear-gradient(135deg, #C7CCD1, #9AA0A6); color: #35393D; }
.m-bronze { background: linear-gradient(135deg, #C98A4E, #A8703C); color: #3D2607; }

/* barra temperatura */
.c-bar { width: 120px; }
.c-bar .barra { display: inline-block; height: 10px; border-radius: 5px; min-width: 4px; vertical-align: middle; }
.tier-quente { background: var(--floresta); }
.tier-morno { background: var(--ambar); }
.tier-frio { background: var(--vermelho); }

/* conversão colorida */
.c-conv { font-family: "Archivo", sans-serif; font-weight: 800; }
.conv-acima { color: var(--floresta); }
.conv-abaixo { color: var(--vermelho); }
.c-conv.muted { color: var(--muted); font-weight: 600; }

/* faixa base baixa */
.faixa-baixa td {
  text-align: left !important; padding: 8px 10px; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
  background: #F3F0EA; border-bottom: 1px solid var(--linha);
}
.linha-baixa td { color: var(--muted); }
.linha-baixa td.c-nome { font-weight: 500; }

/* ---------- app do gestor ---------- */
.app-top {
  background: var(--grafite); color: var(--creme);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 22px; position: sticky; top: 0; z-index: 20;
}
.app-brand { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 19px; }
.app-brand span { font-weight: 400; opacity: .8; }
.app-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.app-nav a {
  color: #D3CFC8; text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 8px 14px; border-radius: 9px;
}
.app-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.app-nav a.ativo { background: var(--laranja); color: #fff; }
.badge-num {
  background: var(--vermelho); color: #fff; font-size: 11px; font-weight: 800;
  border-radius: 20px; padding: 1px 7px; margin-left: 3px;
}
.app-user { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.app-user-nome { color: #E8E5DF; font-weight: 600; }
.btn-alerta {
  background: var(--laranja); color: #fff; border: none; border-radius: 8px;
  font-family: inherit; font-weight: 700; font-size: 13px; padding: 8px 12px;
  cursor: pointer;
}
.btn-alerta.ativo { background: #4a4a52; }
.acoes-topo { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.dica-ios { margin-top: 12px; font-size: 13px; color: #7A5410; background: #FBF1DD;
  border: 1px solid #EAD5A8; border-radius: 10px; padding: 10px 14px; }
.app-sair { color: #F0D9A8; text-decoration: none; font-weight: 600; }

/* navegação fixa inferior (aparece só no celular) */
.bottom-nav { display: none; }
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #C9C5BE; text-decoration: none; font-size: 11px; font-weight: 600;
  padding: 7px 2px; position: relative;
}
.bottom-nav a.ativo { color: var(--laranja); }
.bottom-nav .bn-ic { width: 23px; height: 23px; display: block; }
.bottom-nav .bn-badge {
  position: absolute; top: 2px; left: 56%; margin: 0;
  background: var(--vermelho); color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 20px; padding: 1px 6px; line-height: 1.4;
}
.app-atualizar { color: #B8B4AC; text-decoration: none; font-size: 12.5px; font-weight: 600; }
.app-atualizar:hover { color: var(--laranja); }
.link-atualizar { color: var(--muted); text-decoration: none; font-weight: 600; }
.link-atualizar:hover { color: var(--laranja); }

/* tabelas roláveis no celular (não estouram a tela) */
.tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* fila de gigantes em cards (bom no toque) */
.fila-cards { display: flex; flex-direction: column; gap: 12px; }
.fila-card {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.fila-lead { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 20px; color: var(--floresta); }
.fila-meta { display: flex; gap: 12px; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.fila-timer { font-weight: 600; }
.fila-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.fila-acoes form { margin: 0; }
.btn-grande { padding: 12px 22px; font-size: 15px; }

@media (max-width: 640px) {
  .app-user { order: 3; width: 100%; justify-content: space-between; }
  .fila-card { flex-direction: column; align-items: stretch; }
  .fila-acoes { justify-content: stretch; }
  .fila-acoes form, .fila-acoes .btn { flex: 1; }
}

/* auth / login */
.auth-box {
  max-width: 420px; margin: 40px auto; background: var(--branco);
  border: 1px solid var(--linha); border-radius: 16px; padding: 30px 32px;
}
.auth-box h1 { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 26px; color: var(--grafite); margin: 0 0 6px; }
.auth-sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.auth-form input {
  padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 400;
}
.auth-form .btn { margin-top: 6px; }
.auth-hr { border: none; border-top: 1px solid var(--linha); margin: 6px 0; }
.auth-links { margin-top: 16px; font-size: 13.5px; }
.auth-links a { color: var(--floresta); text-decoration: none; font-weight: 600; }
.auth-erro { background: #F6E5E2; color: var(--vermelho); border: 1px solid #E4B7B0;
  border-radius: 9px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; }
.auth-ok { background: #EFEAE4; color: var(--grafite); border: 1px solid var(--linha);
  border-radius: 9px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; }
.app-logado { font-size: 16px; }

/* ao vivo (simulado) */
.selo-simulado {
  background: repeating-linear-gradient(45deg, var(--vermelho), var(--vermelho) 14px, #9e3d33 14px, #9e3d33 28px);
  color: #fff; font-weight: 800; font-family: "Archivo", sans-serif; letter-spacing: .5px;
  text-align: center; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px;
  font-size: 15px; box-shadow: 0 3px 12px rgba(180,72,60,.3);
}
.tag-sim { background: var(--vermelho); color: #fff; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .5px; vertical-align: middle; }
.aovivo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .aovivo-grid { grid-template-columns: 1fr; } }

/* simulador */
.sim-direcionar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.sim-direcionar .cap-label { flex: 1 1 220px; min-width: 0; }
.sim-direcionar .btn { flex: 0 0 auto; }
@media (max-width: 680px) {
  .sim-direcionar { flex-direction: column; align-items: stretch; }
  .sim-direcionar .btn { width: 100%; }
}
.sim-controles { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sim-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.sim-num { width: 72px; padding: 9px 10px; border: 1px solid var(--linha); border-radius: 8px; font-family: inherit; }
.btn {
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 13.5px; cursor: pointer;
  padding: 10px 16px; border-radius: 9px; border: 1px solid var(--linha);
  background: #fff; color: var(--tinta);
}
.btn:hover { background: #F1EEE8; }
.btn-verde { background: var(--floresta); color: var(--creme); border-color: var(--floresta); }
.btn-ambar { background: var(--ambar); color: #fff; border-color: var(--ambar); }
.btn-vermelho { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
.btn-verde:hover, .btn-ambar:hover, .btn-vermelho:hover { opacity: .92; }
.sim-nota { color: var(--muted); font-size: 12.5px; margin-top: 14px; }

.rodape { text-align: center; color: var(--muted); font-size: 12px; padding: 24px; }

/* ---------- cards de ranking (celular) ---------- */
.rank-cards { display: none; }               /* desktop usa a tabela */
.rc {
  background: #fff; border: 1px solid var(--linha); border-radius: 16px;
  padding: 16px 16px 18px;
}
.rc + .rc { margin-top: 12px; }
.rc-baixa { opacity: .72; }
.rc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rc-nome { flex: 1; font-weight: 700; font-size: 16px; color: var(--tinta); line-height: 1.25; }
.rc-conv { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 21px; white-space: nowrap; }
.rc-conv.up { color: var(--laranja); }
.rc-conv.down { color: var(--vermelho); }
.rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.rc-m { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rc-l { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; }
.rc-v { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 17px; color: var(--tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-baixa-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); font-weight: 700; margin: 14px 2px 8px; }

/* ===================== MOBILE (<= 680px) ===================== */
@media (max-width: 680px) {
  /* container nunca maior que a tela (some o deslocamento pra esquerda) */
  .container { padding: 0 14px; margin: 16px auto; max-width: 100%; width: 100%; }
  .card { max-width: 100%; }
  .kpi { min-width: 0; }
  .rc-head { min-width: 0; }
  .rc-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* títulos fluidos, sem cortar */
  .card { padding: 16px 16px; }
  .card-head { flex-direction: column; align-items: flex-start; gap: 3px; margin-bottom: 12px; }
  .card-head h2 { font-size: clamp(16px, 4.6vw, 19px); line-height: 1.2; white-space: normal; }
  .card-sub { font-size: 12px; line-height: 1.3; }
  .pagina-titulo h1 { font-size: clamp(20px, 6vw, 26px); line-height: 1.15; }
  .pagina-titulo p { font-size: 13px; }
  h2 { white-space: normal; }

  /* hero / KPIs / funil proporcionais — número CABE (não empurra a tela) */
  .hero { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 16px; }
  .hero-main { min-width: 0; }
  .hero-valor { font-size: clamp(20px, 6.4vw, 34px); max-width: 100%; overflow-wrap: anywhere; }
  .hero-kpis { width: 100%; justify-content: space-between; gap: 16px; }
  .hero-kpi { text-align: left; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px 16px; }
  .kpi-num { font-size: clamp(22px, 6.5vw, 30px); }
  .kpi-lbl { font-size: 12px; }
  .funil .bloco { padding: 13px 12px; }
  .bloco-num { font-size: clamp(24px, 7.5vw, 34px); }
  .bloco-lbl { font-size: 11px; }
  .w1 { width: 100%; } .w2 { width: 90%; } .w3 { width: 76%; } .w4 { width: 62%; }

  /* filtro empilha; "Aplicar" sempre visível (largura total) */
  .filtro-linha { flex-direction: column; align-items: stretch; }
  .filtro-linha form { width: 100%; }
  .cal-form { flex-wrap: wrap; }
  .cal-form input[type="date"] { flex: 1 1 40%; min-width: 0; }
  .cal-form .cal-seta { flex: 0 0 auto; }
  .cal-form .btn { flex: 1 1 100%; padding: 12px; margin-top: 4px; }
  .mes-form select { width: 100%; }
  .periodo-atual { font-size: 13px; }
  .atalho { font-size: 12.5px; padding: 8px 12px; }

  /* rankings (captadora/vendedor/loja) usam os CARDS novos; some a tabela */
  .rank-tabela { display: none; }
  .rank-cards { display: block; }

  /* ---- demais tabelas .rank (tamanho/distribuição/ao vivo) viram cards ---- */
  .tabela-scroll { overflow: visible; }
  .rank thead { display: none; }
  .rank, .rank tbody, .rank tr, .rank td { display: block; width: 100%; }
  .rank tr {
    border: 1px solid var(--linha); border-radius: 12px; margin-bottom: 12px;
    padding: 6px 14px; background: #fff;
  }
  .rank tbody tr:hover { background: #fff; }
  .rank td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    text-align: right; padding: 8px 0; border: none; border-bottom: 1px solid #F2EFE9;
    font-size: 14px; font-variant-numeric: tabular-nums;
  }
  .rank tr td:last-child { border-bottom: none; }
  .rank td::before {
    content: attr(data-label); color: var(--muted); font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: .3px; text-align: left; flex: 0 0 auto;
  }
  .rank td.c-nome { font-size: 16px; font-weight: 700; color: var(--grafite); }
  .rank td.c-rank { gap: 10px; }
  .rank td.c-bar { display: none; }              /* barra temperatura some no card */
  .rank td.c-conv { font-size: 16px; font-weight: 800; }
  .rank tr.faixa-baixa { border: none; background: none; margin: 4px 0 0; padding: 0; }
  .rank tr.faixa-baixa td { text-align: left; border: none; padding: 6px 2px; }
  .rank tr.faixa-baixa td::before { content: ""; }

  /* fila de gigantes: botões grandes ocupam a linha */
  .fila-card { padding: 14px 16px; }
  .fila-acoes { width: 100%; }
  .fila-acoes form, .fila-acoes .btn { width: 100%; }

  /* topo do app no celular: logo grande à esquerda + ações compactas à direita */
  .app-top { padding: 10px 14px; gap: 10px; flex-wrap: nowrap; }
  .brand-logo { height: 40px; }
  .topbar { padding: 12px 16px; }
  .app-brand-link { flex: 1 1 auto; }
  .app-nav { display: none; }               /* nav do topo some no celular */
  .app-user { margin-left: auto; gap: 8px; flex: 0 0 auto; }
  .btn-alerta { padding: 9px 12px; font-size: 15px; }
  .app-atualizar { font-size: 18px; }
  .app-sair { font-size: 14px; }

  /* BARRA FIXA INFERIOR: sempre acessível */
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: var(--grafite); border-top: 1px solid #45454c;
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -3px 12px rgba(0,0,0,.18);
  }
  .app-main { padding-bottom: 78px; }        /* espaço pra não cobrir conteúdo */

  /* ao vivo: um card por vez */
  .aovivo-grid { grid-template-columns: 1fr; }
  .selo-simulado { font-size: 13px; padding: 11px 12px; }
}

@media (max-width: 720px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .hero { flex-direction: column; align-items: flex-start; }
  .hero-kpis { align-self: stretch; justify-content: space-between; }
}

/* ===================== APP DA CAPTADORA (Bloco C) ===================== */
.btn-perdido {
  background: #fff; color: var(--vermelho); border-color: #E7C9C4;
}
.btn-perdido:hover { background: #FBEFEC; }

/* Resumo do topo: na mão agora / agendados hoje */
.cap-resumo { display: flex; gap: 12px; margin-bottom: 18px; }
.cap-stat {
  flex: 1; background: #fff; border: 1px solid var(--linha); border-radius: 14px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
}
.cap-stat-num { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 30px; color: var(--floresta); line-height: 1; }
.cap-stat-lbl { font-size: 12px; color: var(--muted); font-weight: 600; }

/* Cards de lead */
.cap-leads { display: flex; flex-direction: column; gap: 12px; }
.cap-card {
  background: #fff; border: 1px solid var(--linha); border-radius: 16px;
  padding: 16px 16px 18px;
}
.cap-card.em-contato { border-color: #F0C9B7; box-shadow: 0 0 0 1px #F0C9B7 inset; }
.cap-card.quente { border-color: var(--vermelho); box-shadow: 0 0 0 2px rgba(180,72,60,.25); }
.cap-urgencia {
  background: repeating-linear-gradient(45deg, var(--vermelho), var(--vermelho) 12px, #9e3d33 12px, #9e3d33 24px);
  color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .3px;
  padding: 7px 12px; border-radius: 10px; margin: -2px 0 12px; text-align: center;
}
.cap-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cap-faixa {
  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  background: #FBE7DE; color: var(--laranja); text-transform: capitalize;
}
.cap-faixa.faixa-gigante { background: var(--floresta); color: var(--creme); }
.cap-faixa.faixa-grande { background: #FBE7DE; color: var(--laranja); }
.cap-faixa.faixa-normal { background: #EDEBE6; color: var(--grafite); }
.cap-faixa.faixa-pequeno { background: #F1EFEA; color: var(--muted); }
.cap-timer { font-size: 13px; font-weight: 700; color: var(--vermelho); white-space: nowrap; }

/* Bloco de dados do cliente (nome/telefone/e-mail/cidade) */
.cap-cliente { margin-bottom: 16px; }
.cap-nome-linha { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cap-nome { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 18px; color: var(--grafite);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-contato { display: flex; flex-direction: column; gap: 6px; }
.cap-linha {
  display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--grafite);
  text-decoration: none; min-width: 0;
}
.cap-linha svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--laranja); }
.cap-tel svg { color: #25D366; width: 16px; height: 16px; }   /* verde WhatsApp */
.cap-linha span, .cap-tel, .cap-email, .cap-cidade { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cap-tel { font-weight: 700; }
a.cap-tel, a.cap-email { color: var(--grafite); }
.cap-card-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #F2EFE9;
}
.cap-origem { font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cap-num { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* Botões do card: MESMA largura, mesmo padding, texto centralizado, sem cara de link */
.cap-card-acoes { display: flex; flex-direction: column; gap: 8px; }
.cap-card-acoes form { margin: 0; }
.cap-card-acoes .btn {
  display: block; width: 100%; box-sizing: border-box;
  text-align: center; text-decoration: none;
  padding: 13px 16px; font-size: 15px; font-weight: 700; line-height: 1.2;
  border-radius: 10px;
}
.cap-tag-contato {
  display: block; text-align: center; font-size: 14px; font-weight: 700;
  color: var(--laranja); padding: 11px; border-radius: 10px; background: #FBE7DE;
}

/* Botão DISCRETO de desfazer/corrigir (não compete com as ações principais) */
.btn-desfazer {
  background: none; border: none; cursor: pointer; padding: 6px 4px;
  font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--muted); text-decoration: underline; text-underline-offset: 2px;
}
.btn-desfazer:hover { color: var(--grafite); }
a.btn-desfazer { display: inline-block; }
.cap-contato-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cap-contato-linha form { margin: 0; }
.and-reversao { display: flex; gap: 14px; align-items: center; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid #F2EFE9; }
.and-reversao form { margin: 0; }

/* "Não deu" recentes (desfazer) na home da captadora */
.cap-perdidos { margin-top: 16px; }
.cap-perdido-linha { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid #F2EFE9; }
.cap-perdido-linha:last-child { border-bottom: none; }
.cap-perdido-linha form { margin: 0; }
.cap-perdido-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cap-perdido-nome { font-weight: 700; font-size: 15px; color: var(--grafite);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-perdido-meta { font-size: 12px; color: var(--muted); }

/* App do vendedor (Bloco D) — visitas */
.vend-quando { font-size: 13px; font-weight: 700; color: var(--grafite); white-space: nowrap; }
.vend-quando.urgente { color: var(--vermelho); }
.vend-loja svg { color: var(--grafite); }
.vend-loja { font-weight: 700; }
.vend-tag-venda, .vend-tag-furou {
  display: block; text-align: center; font-size: 14px; font-weight: 800;
  padding: 11px; border-radius: 10px;
}
.vend-tag-venda { color: #1f7a43; background: #E4F5EA; }
.vend-tag-furou { color: var(--vermelho); background: #F6E5E2; }
.cap-card.estado-vendeu { border-color: #BFE6CD; }
.cap-card.estado-furou, .cap-card.estado-perdeu { opacity: .72; }
.cap-opc { color: var(--muted); font-weight: 400; font-size: 12px; }
textarea.cap-input { resize: vertical; min-height: 84px; font-family: inherit; }

/* Andamento do negócio — fase + observação no card */
.vend-andamento { margin: 0 0 14px; }
.vend-fase {
  display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 11px;
  border-radius: 999px; background: #EDEBE6; color: var(--grafite);
}
.vend-fase.fase-fazendo_projeto { background: #E7EEF6; color: #35618E; }
.vend-fase.fase-aguardando_retorno_cliente { background: #FBF0DD; color: #8A6A1E; }
.vend-fase.fase-em_negociacao { background: #FBE7DE; color: var(--laranja); }
.vend-fase.fase-fechou { background: #E4F5EA; color: #1f7a43; }
.vend-fase.fase-perdeu { background: #F6E5E2; color: var(--vermelho); }
.vend-obs { margin: 8px 0 0; font-size: 14px; color: var(--grafite); line-height: 1.4;
  background: #FAF8F4; border-radius: 10px; padding: 10px 12px; }
.vend-fases-lista { display: flex; flex-direction: column; gap: 8px; }
.vend-fase-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vend-fase-num { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 18px; color: var(--grafite); }

/* Aba Andamento (captadora, só leitura) */
.and-status { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.status-aguardando { background: #FBF0DD; color: #8A6A1E; }
.status-compareceu { background: #E4F5EA; color: #1f7a43; }
.status-furou { background: #F6E5E2; color: var(--vermelho); }
.and-vendedor svg { color: var(--grafite); }
.and-valor {
  display: inline-block; margin-left: 8px; font-family: "Archivo", sans-serif;
  font-weight: 800; font-size: 15px; color: #1f7a43; vertical-align: middle;
}

/* Motor V2 — ranking de observabilidade (gestor) */
.v2-params { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px;
  font-size: 12.5px; color: var(--muted); }
.v2-params b { color: var(--grafite); font-weight: 700; }
.v2-loja-form { margin: 0 0 14px; }
.v2-loja-form .cap-input { max-width: 320px; }
.v2-cards { display: flex; flex-direction: column; gap: 10px; }
.v2-card { background: #fff; border: 1px solid var(--linha); border-radius: 14px;
  padding: 12px 14px; border-left: 4px solid var(--linha); }
.v2-card.tier-alto { border-left-color: var(--floresta); }
.v2-card.tier-medio { border-left-color: #C9A227; }
.v2-card.tier-baixo { border-left-color: #B0B0B5; }
.v2-card.travada { opacity: .62; }
.v2-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.v2-pos { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 14px;
  color: var(--muted); min-width: 20px; }
.v2-nome { flex: 1; font-weight: 700; font-size: 15px; color: var(--grafite);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-chance { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 18px;
  color: var(--floresta); }
.v2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 10px; margin-bottom: 8px; }
.v2-grid > div { display: flex; flex-direction: column; }
.v2-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.v2-v { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 15px; color: var(--grafite); font-variant-numeric: tabular-nums; }
.v2-tags { display: flex; gap: 8px; align-items: center; }
.v2-tier { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; }
.v2-tier.tier-alto { background: #FBE7DE; color: var(--laranja); }
.v2-tier.tier-medio { background: #FBF0DD; color: #8A6A1E; }
.v2-tier.tier-baixo { background: #EDEBE6; color: var(--muted); }
.v2-eleg { font-size: 12px; font-weight: 600; color: #1f7a43; }
.v2-travada { font-size: 12px; font-weight: 600; color: var(--vermelho); }

/* Painelzinho (vendedor/captadora) — filtro de período + cards */
.mini-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.mini-atalho {
  font-size: 13px; font-weight: 600; text-decoration: none; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--linha); color: var(--grafite); background: #fff;
}
.mini-atalho.ativo { background: var(--floresta); color: var(--creme); border-color: var(--floresta); }
.mini-periodo { color: var(--muted); font-size: 13px; font-weight: 600; margin: 0 0 16px 2px; }
.mini-grid { flex-wrap: wrap; }
.mini-grid .cap-stat { flex: 1 1 44%; min-width: 0; }
.mini-grid .mini-destaque { flex-basis: 100%; background: linear-gradient(135deg, var(--grafite), var(--grafite-2)); }
.mini-grid .mini-destaque .cap-stat-num { color: var(--floresta); }
.mini-grid .mini-destaque .cap-stat-lbl { color: #C9C6C0; }

/* Formulário de agendamento */
.cap-form { display: flex; flex-direction: column; gap: 14px; }
.cap-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--grafite); }
.cap-input {
  font-family: inherit; font-size: 15px; padding: 12px 12px; border-radius: 10px;
  border: 1px solid var(--linha); background: #fff; color: var(--tinta); width: 100%;
}
.cap-input:focus { outline: none; border-color: var(--floresta); }
.cap-form-acoes { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cap-form-acoes .btn { width: 100%; }

/* Paginação (Item 3) — simples, dedão-friendly no celular */
.paginacao { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 6px; }
.paginacao .pg-btn { padding: 10px 16px; border-radius: 12px; background: #efeff2; color: #333;
  text-decoration: none; font-weight: 600; font-size: 14px; }
.paginacao .pg-btn.off { opacity: .4; pointer-events: none; }
.paginacao .pg-atual { font-weight: 700; color: #666; font-size: 14px; min-width: 54px; text-align: center; }

/* Corrente de confirmação (Bloco G) */
.corrente-elos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
.corrente-elos form { margin: 0; }
.elo-ok { display: inline-block; background: #e8f6ee; color: #1c7a44; border-radius: 999px;
  padding: 4px 10px; font-size: 12.5px; font-weight: 700; }
.elo-warn { display: inline-block; background: #fff5e0; color: #a56b00; border-radius: 999px;
  padding: 4px 10px; font-size: 12.5px; font-weight: 700; }
.corrente-sec .corrente-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; padding: 11px 0; border-top: 1px solid #f0f0f2; }
.corrente-sec .corrente-linha:first-of-type { border-top: none; }
.corrente-info { display: flex; flex-direction: column; min-width: 150px; flex: 1; }
.corrente-nome { font-weight: 700; font-size: 14.5px; }
.corrente-meta { font-size: 12.5px; color: #777; }
.corrente-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.corrente-botoes form { margin: 0; }
.corrente-botoes .btn { padding: 8px 12px; font-size: 13px; }
.elo-furo-form { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }

/* Ficha — anotação */
.fi-anotar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.fi-anotar .btn { align-self: flex-start; }

/* Ficha — anexos */
.anx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-bottom: 12px; }
.anx-item { border: 1px solid #e4e4e8; border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.anx-link { display: block; }
.anx-thumb { width: 100%; height: 90px; object-fit: cover; display: block; background: #f4f4f6; }
.anx-pdf { height: 90px; display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 800; color: #b31d1d; background: #fdeef0; font-size: 15px; line-height: 1.1; }
.anx-meta { padding: 5px 7px; display: flex; flex-direction: column; gap: 1px; }
.anx-nome { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anx-kb { font-size: 10.5px; color: #999; }
.anx-rm { border: none; background: none; color: #b31d1d; font-size: 11px; padding: 4px 7px; cursor: pointer; text-align: left; }
.anx-up { display: flex; flex-direction: column; gap: 8px; }
.anx-up .anx-file { font-size: 14px; }
.anx-up .btn { align-self: flex-start; }

/* Agendar retorno (Bloco H2) */
.ret-atual { border: 1px solid #f0d68a; background: #fff9ec; border-radius: 12px; padding: 11px 13px; margin-bottom: 10px; font-size: 14px; }
.ret-atual.vencido { border-color: #f3b7b7; background: #fdeaea; color: #b31d1d; font-weight: 700; }
.ret-botoes { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ret-botoes form { margin: 0; }
.ret-form { display: flex; flex-direction: column; gap: 8px; }
.ret-dh { display: flex; gap: 8px; }
.ret-dh .fi-input { flex: 1; }
.ret-sec .corrente-linha .corrente-meta.venc { color: #b31d1d; font-weight: 700; }

/* Motivo da perda — disclosure */
.perder-det > summary { list-style: none; cursor: pointer; }
.perder-det > summary::-webkit-details-marker { display: none; }
.perder-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid #f3b7b7; border-radius: 12px; background: #fff6f6; }