/* =============================================================
   COMPONENTES — o que se repete em mais de uma tela
   ============================================================= */

/* ---------- card ---------- */
.card{
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:var(--r);
  padding:var(--s5);
  margin-bottom:var(--s4);
  box-shadow:var(--sh-1);
}
.card.rente{padding:0;overflow:hidden}
.card.calmo{background:var(--card-2);box-shadow:none}

/* ---------- botões ---------- */
.btn{
  width:100%;
  min-height:var(--tap);
  font:inherit;
  font-weight:600;
  font-size:var(--fs-md);
  letter-spacing:var(--ls-tight);
  padding:var(--s3) var(--s5);
  border:1px solid transparent;
  border-radius:11px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s2);
  transition:transform var(--t1) var(--ease),
             box-shadow var(--t1) var(--ease),
             opacity var(--t1) var(--ease),
             background var(--t1) var(--ease);
}
.btn:active{transform:scale(.98)}

.btn.primary{
  background:var(--acao);
  color:var(--acao-fg);
  box-shadow:var(--sh-2);
}
.btn.primary:hover{box-shadow:var(--sh-3)}

.btn.send{
  background:var(--heat);
  color:var(--sobre-heat);
  box-shadow:0 1px 2px rgba(216,27,96,.2), 0 8px 20px -8px rgba(216,27,96,.55);
}
.btn.send:hover{box-shadow:0 2px 6px rgba(216,27,96,.24), 0 14px 30px -10px rgba(216,27,96,.6)}

.btn.go{background:var(--go);color:var(--sobre-go);box-shadow:var(--sh-2)}

.btn.ghost{
  background:var(--card);
  color:var(--fg-2);
  border-color:var(--edge);
  box-shadow:none;
}
.btn.ghost:hover{color:var(--fg);background:var(--card-2);border-color:var(--fg-3)}

.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn + .btn{margin-top:var(--s2)}

.btn svg{width:17px;height:17px;flex:none}

/* estado carregando dentro do botão */
.btn .gira{
  width:15px;height:15px;flex:none;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:rodar .8s linear infinite;
}

/* ---------- formulário ---------- */
label{
  display:block;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-tiny);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--fg-2);
  margin-bottom:var(--s2);
}

input,select,textarea{
  width:100%;
  font:inherit;
  font-size:16px;              /* nunca abaixar: 16px evita o zoom do iOS */
  min-height:var(--tap);
  padding:var(--s3);
  border:1px solid var(--edge);
  border-radius:var(--r-sm);
  background:var(--bg-sunk);
  color:var(--fg);
  transition:background var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--fg-2);opacity:.85}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--fg);
  outline-offset:-1px;
  background:var(--card);
}
input:hover,select:hover{border-color:var(--fg-3)}

select{
  appearance:none;
  padding-right:var(--s8);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23566470' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--s4) center;
  background-size:11px;
}
:root[data-tema="escuro"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239AAAB5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

textarea{
  min-height:104px;
  resize:vertical;
  line-height:1.55;
}
textarea.alerta,
input.alerta{outline:2px solid var(--heat);outline-offset:-1px}

.field{margin-bottom:var(--s4)}
.field:last-child{margin-bottom:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}

.check{
  display:flex;
  align-items:center;
  gap:var(--s3);
  margin-bottom:var(--s4);
  min-height:var(--tap);
}
.check input{width:20px;height:20px;min-height:0;flex:none;accent-color:var(--heat)}
.check label{
  margin:0;
  text-transform:none;
  letter-spacing:0;
  font-size:var(--fs-base);
  font-family:inherit;
  color:var(--fg);
  cursor:pointer;
}

/* ---------- etiquetas ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:var(--r-xs);
  border:1px solid transparent;
}
.tag.go  {background:var(--go-soft);  color:var(--go-fg);  border-color:var(--go-edge)}
.tag.warn{background:var(--warn-soft);color:var(--warn-fg);border-color:var(--warn-edge)}
.tag.heat{background:var(--heat-soft);color:var(--heat-fg);border-color:var(--heat-edge)}
.tag.plum{background:var(--plum-soft);color:var(--plum);border-color:transparent}

.chip{
  display:inline-flex;
  align-items:center;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 7px;
  border-radius:var(--r-xs);
  background:var(--bg-sunk);
  color:var(--fg-2);
}
.chip.ret{background:var(--plum-soft);color:var(--plum);font-weight:600}
.chip.q  {background:var(--heat-soft);color:var(--heat-fg);font-weight:600}

/* chip clicável (resumo do devolver) */
.chip-b{
  font:inherit;
  font-size:var(--fs-sm);
  min-height:var(--tap);
  padding:var(--s2) var(--s4);
  border-radius:var(--r-full);
  cursor:pointer;
  border:1px solid var(--edge);
  background:var(--card);
  color:var(--fg-2);
  transition:all var(--t1) var(--ease);
}
.chip-b:hover{border-color:var(--fg-3);color:var(--fg)}
.chip-b.on{background:var(--acao);color:var(--acao-fg);border-color:var(--acao)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}

/* ---------- resumo em três números ---------- */
.resumo{
  display:flex;
  gap:var(--s5);
  padding:var(--s4) 0;
  margin:0 0 var(--s4);
  border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);
}
.resumo > div{flex:1;min-width:0}
.resumo .n{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-2xl);
  font-weight:600;
  letter-spacing:var(--ls-tight);
  line-height:1.1;
  white-space:nowrap;   /* número que quebra em duas linhas está errado */
}
.resumo .l{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-tiny);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  color:var(--fg-2);
  margin-top:2px;
}

/* ---------- avisos ---------- */
.aviso{
  display:flex;
  gap:var(--s3);
  background:var(--warn-soft);
  border:1px solid var(--warn-edge);
  border-radius:11px;
  padding:var(--s3) var(--s4);
  margin-bottom:var(--s4);
  font-size:var(--fs-sm);
  line-height:1.5;
  color:var(--fg);
}
.aviso b{display:block;margin-bottom:2px}
.aviso .ic{flex:none;width:18px;height:18px;color:var(--warn);margin-top:1px}
.aviso .ic svg{width:100%;height:100%;display:block}
.aviso.bom{background:var(--go-soft);border-color:var(--go-edge)}
.aviso.bom .ic{color:var(--go)}
.aviso.info{background:var(--plum-soft);border-color:transparent}
.aviso.info .ic{color:var(--plum)}

.citacao{
  background:var(--bg-sunk);
  border-left:3px solid var(--edge);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--s3) var(--s4);
  font-size:var(--fs-sm);
  line-height:1.55;
  font-style:italic;
  color:var(--fg);
}

/* ---------- vazio ---------- */
.vazio{
  text-align:center;
  padding:var(--s9) var(--s5);
  color:var(--fg-2);
  font-size:var(--fs-sm);
  line-height:1.55;
}
.vazio .ic{
  width:44px;height:44px;
  margin:0 auto var(--s4);
  color:var(--fg-3);
  opacity:.7;
}
.vazio .ic svg{width:100%;height:100%;display:block}
.vazio b{display:block;color:var(--fg);font-size:var(--fs-lg);font-weight:600;margin-bottom:var(--s2)}
.vazio p{max-width:34ch;margin:0 auto}

/* ---------- barra de progresso ---------- */
.prog{
  height:6px;
  background:var(--edge);
  border-radius:var(--r-full);
  overflow:hidden;
  margin:var(--s4) 0 var(--s2);
}
.prog i{
  display:block;
  height:100%;
  width:0;
  border-radius:var(--r-full);
  background:var(--heat);
  transition:width var(--t3) var(--ease);
}

/* ---------- esqueleto de carregamento ---------- */
.sk{
  border-radius:var(--r-xs);
  background:linear-gradient(90deg,
    var(--bg-sunk) 25%,
    var(--edge-2) 37%,
    var(--bg-sunk) 63%);
  background-size:400% 100%;
  animation:brilha 1.4s ease infinite;
}
@keyframes brilha{from{background-position:100% 0}to{background-position:-100% 0}}

.sk-card{
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:var(--r);
  padding:var(--s5);
  margin-bottom:var(--s3);
  box-shadow:var(--sh-1);
}
.sk-linha{height:12px;margin-bottom:var(--s2)}
.sk-linha:last-child{margin-bottom:0}

@media (prefers-reduced-motion:reduce){
  .sk{animation:none;background:var(--bg-sunk)}
}

/* ---------- toast ---------- */
.toasts{
  position:fixed;
  left:var(--s3);
  right:var(--s3);
  bottom:calc(var(--barra-h) + var(--safe-b) + var(--s3));
  z-index:80;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:var(--s2);
  pointer-events:none;
}
.toast{
  max-width:var(--w);
  width:fit-content;
  display:flex;
  align-items:center;
  gap:var(--s2);
  padding:var(--s3) var(--s4);
  border-radius:var(--r-full);
  background:var(--slab);
  color:var(--slab-fg);
  font-size:var(--fs-sm);
  font-weight:500;
  line-height:1.35;
  box-shadow:var(--sh-3);
  pointer-events:auto;
  animation:toast-in var(--t2) var(--ease-out) both;
}
.toast.saindo{animation:toast-out var(--t2) var(--ease) both}
.toast .ic{flex:none;width:16px;height:16px}
.toast .ic svg{width:100%;height:100%;display:block}
.toast.bom  .ic{color:var(--live)}
.toast.ruim .ic{color:#F87171}
@keyframes toast-in {from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px) scale(.97)}}

/* ---------- lista de leads (fila da cidade) ---------- */
.lead{
  display:flex;
  align-items:center;
  gap:var(--s3);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--edge-2);
}
.lead:last-child{border-bottom:none}
.lead:first-child{padding-top:0}
.temp{width:4px;height:34px;border-radius:var(--r-full);flex:none}
.t-quente{background:var(--t-quente)}
.t-morna {background:var(--t-morna)}
.t-fria  {background:var(--t-fria)}
.lead-info{flex:1;min-width:0}
.lead-nome{font-weight:600;font-size:var(--fs-md);display:block}
.lead-det{
  font-size:var(--fs-sm);
  color:var(--fg-2);
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lead-idade{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-tiny);
  color:var(--fg-2);
  flex:none;
}

/* ---------- laje escura (hero de ficha) ---------- */
.laje{
  background:var(--slab);
  color:var(--slab-fg);
  border-radius:var(--r);
  padding:var(--s5);
  margin-bottom:var(--s4);
  box-shadow:var(--sh-2);
}
.laje h2{font-size:var(--fs-2xl);letter-spacing:var(--ls-xtight);margin-bottom:2px}
.laje .tel{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-sm);
  color:var(--slab-fg-2);
}
.laje .fita{
  display:inline-flex;
  align-items:center;
  background:var(--plum);
  color:var(--sobre-plum);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:var(--r-xs);
  margin-bottom:var(--s3);
}
.laje .pe{
  display:flex;
  gap:var(--s5);
  margin-top:var(--s4);
  padding-top:var(--s4);
  border-top:1px solid var(--slab-edge);
}
.laje .pe div{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-tiny);
  letter-spacing:.06em;
  color:var(--slab-fg-2);
  min-width:0;
}
.laje .pe b{
  display:block;
  color:var(--slab-fg);
  font-size:var(--fs-lg);
  font-weight:600;
  letter-spacing:var(--ls-tight);
  margin-bottom:1px;
}

/* ---------- origem do lead ---------- */
.chip.ads{background:#E3EAFD;color:#1D4ED8;font-weight:600}
:root[data-tema="escuro"] .chip.ads{background:#1B2440;color:#8AABFF}

.org-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  padding:5px 9px;
  border-radius:var(--r-xs);
  color:var(--org, var(--fg-2));
  background:color-mix(in srgb, var(--org, var(--fg-2)) 12%, transparent);
}
.org-chip::before{
  content:'';
  width:7px;height:7px;
  border-radius:50%;
  background:currentColor;
  flex:none;
}

/* bloco "de onde veio" na ficha */
.org-topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  margin-bottom:var(--s3);
}
.org-quando{font-size:var(--fs-tiny);color:var(--fg-2)}
.org-titulo{
  font-size:var(--fs-md);
  font-weight:600;
  letter-spacing:var(--ls-tight);
  line-height:1.4;
}
.org-texto{
  font-size:var(--fs-sm);
  color:var(--fg-2);
  line-height:1.55;
  margin-top:var(--s1);
}
.org-fatos{margin-top:var(--s4);grid-template-columns:76px 1fr}
.org-fatos .org-id{font-size:var(--fs-xs);color:var(--fg-2);overflow-wrap:anywhere}
#fi-origem .btn{margin-top:var(--s4)}

/* quebra por origem nos Números */
.org-linha{margin-bottom:var(--s5)}
.org-linha:last-of-type{margin-bottom:var(--s3)}
.org-t{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  margin-bottom:var(--s2);
}
.org-t .mono{font-size:var(--fs-xs);color:var(--fg-2);flex:none}
.org-nota{font-size:var(--fs-xs);color:var(--fg-2);margin-top:var(--s2);line-height:1.5}

/* Botão do WhatsApp dentro de uma laje escura (ficha e Com você).
   O verde claro do tema some contra o slab, então ali ele inverte:
   fundo translúcido e texto claro, mantendo o alvo de 44px. */
.zap-bt.na-laje{
  margin-top:var(--s3);
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.28);
  color:#fff;
}
.zap-bt.na-laje:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45);color:#fff}