/* Módulo Leads — lista `#/leads`, ficha `#/lead/<id>`, "+ Lead" e "Enviar ao
 * cliente" (plan/23 §8, tarefas A6/A7; web/leads.js).
 *
 * Visual do esboço aprovado (`docs/referencia/leads-feed/esboco.html`): cartão
 * branco com sombra suave, selo de temperatura com o PORQUÊ, carmesim só na
 * ação principal. Cores do app (`app.css`) quando o papel é o mesmo — fundo,
 * cartão, texto, linha, ação — e tokens `--ld-*` abaixo para o que o app ainda
 * não tinha (as três temperaturas, a trilha de etapas, ganho/perdido).
 *
 * ⚠️ Nenhuma cor fora dos dois blocos de token (CLAUDE.md §4). Todo `--ld-*`
 * tem par no escuro — `tests/test_leads_ui.py` reprova cor solta e token órfão.
 */
:root {
  --ld-quente: #a61621;   --ld-quente-s: #fde2e2;
  --ld-morno: #b45309;    --ld-morno-s: #fdf3de;
  --ld-frio: #2563eb;     --ld-frio-s: #e8effd;
  --ld-ok: #117a5c;       --ld-ok-s: #e4f7ef;
  --ld-perdido: #475467;  --ld-perdido-s: #eef0f3;
  --ld-passo: #e4e7ec;          /* etapa ainda não alcançada na trilha */
  --ld-passo-fg: #5a6673;
  --ld-sombra: 0 14px 30px -18px rgba(17, 24, 39, .32);
  --ld-sombra-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --ld-fab-sombra: 0 10px 24px -8px rgba(197, 31, 43, .6);
  /* Geometria, não cor (igual nos dois temas): o "+ Lead" flutua ACIMA da bolha da
     Maysa (widget do hiato-agents: 60px + aro de 5px a 20px do rodapé no desktop, a
     14px no celular) — 20 + 60 + 5 + folga ≈ 100px. */
  --ld-fab-acima-maysa: 100px;
  --ld-borda-forte: #d0d5dd;    /* Leads v2: contorno de botão secundário (o "outline" do Stitch) */
}

:root[data-tema="escuro"] {
  --ld-quente: #ff9aa1;   --ld-quente-s: #3d1a1d;
  --ld-morno: #f5b86a;    --ld-morno-s: #3a2d14;
  --ld-frio: #8fb2ff;     --ld-frio-s: #18253f;
  --ld-ok: #34d399;       --ld-ok-s: #12302a;
  --ld-perdido: #b4bcc8;  --ld-perdido-s: #252b34;
  --ld-passo: #2a323d;
  --ld-passo-fg: #8b949e;
  --ld-sombra: 0 14px 30px -18px rgba(0, 0, 0, .7);
  --ld-sombra-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --ld-fab-sombra: 0 10px 24px -8px rgba(0, 0, 0, .6);
  --ld-fab-acima-maysa: 100px;
  --ld-borda-forte: #3b4756;
}

/* ── base ──────────────────────────────────────────────────────────────── */
.ld-tela { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; }
.ld-tela p { margin: 0; }
.ld-titulo, .ld-h, .ld-acao, .ld-fab, .ld-temp, .ld-passo, .ld-sec-t {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ld-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* o `button:hover` global pinta de carmesim: aqui só a ação principal é carmesim */
.ld-tela button, .ld-folha button { min-height: 44px; }
.ld-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ld-titulo { margin: 0; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.02em; }
.ld-sub { font-size: 13px; color: var(--muted); }
.ld-voltar { align-self: flex-start; color: var(--muted); text-decoration: none; font-weight: 700;
  font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }
.ld-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--ld-sombra); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ld-sec-t { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ld-vazio { text-align: center; color: var(--muted); padding: 28px 12px; font-size: 14px;
  border: 1px dashed var(--line); border-radius: 14px; }
.ld-erro { color: var(--red); font-size: 13px; font-weight: 700; }
.ld-erro:empty { display: none; }
/* A trava da visita (plan/28 §7): o motivo e o caminho para a análise, na mesma linha. */
.ld-erro .ld-fazer-analise { display: inline-flex; align-items: center; min-height: 44px; margin: 6px 0 0 8px; }
/* "Humano" (migration 060): no fluxo automático · ou assumido, com quem e o "Devolver ao fluxo". */
.ld-humano { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; }
.ld-humano.assumido { background: var(--mod-gestao-s); border-color: var(--mod-gestao-s); color: var(--fg); }
.ld-humano button { min-height: 44px; margin-left: auto; }
.ld-aviso { padding: 10px 12px; border-radius: 10px; background: var(--atencao-s);
  border: 1px solid var(--atencao-borda); color: var(--fg); font-size: 13px; }
.ld-link { color: var(--acao-texto); font-weight: 700; text-decoration: none; }
/* "Abrir conversa ↗" no título do cartão Jornada e Maysa: alvo de toque inteiro, sem a caixa alta do título */
.ld-console { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin-left: 6px;
  text-transform: none; letter-spacing: normal; font-size: 13px; }

/* ── selos ─────────────────────────────────────────────────────────────── */
.ld-temp { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; }
.ld-temp b { font-weight: 800; }
.ld-temp span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-temp.quente { background: var(--ld-quente-s); color: var(--ld-quente); }
.ld-temp.morno { background: var(--ld-morno-s); color: var(--ld-morno); }
.ld-temp.frio { background: var(--ld-frio-s); color: var(--ld-frio); }
.ld-selo { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: var(--bg3); color: var(--muted); }
.ld-selo.ganho { background: var(--ld-ok-s); color: var(--ld-ok); }
.ld-selo.perdido { background: var(--ld-perdido-s); color: var(--ld-perdido); }
.ld-selo.duplicado { background: var(--ld-morno-s); color: var(--ld-morno); }

/* ── lista ─────────────────────────────────────────────────────────────── */
.ld-busca { position: relative; margin: 0; }
.ld-busca .ld-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted);
  pointer-events: none; }
.ld-busca input { display: block; width: 100%; height: 48px; margin: 0; padding: 0 14px 0 42px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); color: var(--fg);
  box-shadow: var(--ld-sombra-sm); font: inherit; font-size: 16px; }
.ld-corretor { display: flex; align-items: center; gap: 8px; }
.ld-corretor label { margin: 0; white-space: nowrap; }
.ld-corretor select { flex: 1; min-width: 0; min-height: 44px; }
.ld-seta { color: var(--muted); }

/* O "+ Lead" fica ACIMA da bolha da Maysa no canto inferior direito (a bolha é
   fixa e tem z-index máximo: por baixo dela o botão sumia). Vale no desktop e no
   celular — lá a barra inferior (76px) também fica abaixo da linha do token. */
.ld-fab { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(var(--ld-fab-acima-maysa) + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: inline-flex; align-items: center;
  gap: 6px; min-height: 52px; padding: 0 20px; border-radius: 999px; background: var(--acao);
  color: var(--acao-fg); font-size: 15px; font-weight: 800; box-shadow: var(--ld-fab-sombra); }
.ld-fab:hover { background: var(--acao-hover); }
/* o fim da lista rola até acima do botão */
.ld-rodape { height: calc(var(--ld-fab-acima-maysa) + 64px); }

/* ── ficha ─────────────────────────────────────────────────────────────── */
.ld-ficha { max-width: 980px; }
.ld-grade { display: grid; gap: 14px; }
.ld-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 900px) {
  .ld-grade { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}
.ld-h { margin: 0; font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -.02em;
  overflow-wrap: anywhere; }
.ld-contato { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.ld-linha-selos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ld-trilha { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
/* Uma linha por passo, sempre: a largura acompanha a palavra ("Em contato" é
   mais larga que "Novo") e `nowrap` impede a quebra que "Interessado" fazia a
   390 px. Os cinco cabem a 360 px com o rótulo curto "Interesse" (ldTrilha). */
.ld-passo { flex: 1 1 auto; min-width: 0; text-align: center; padding: 6px 5px; border-radius: 8px;
  background: var(--ld-passo); color: var(--ld-passo-fg); font-size: 11px; font-weight: 700; line-height: 1.15;
  white-space: nowrap; display: flex; align-items: center; justify-content: center; }
.ld-passo.feito { background: var(--ld-ok-s); color: var(--ld-ok); }
.ld-passo.atual { background: var(--ld-ok); color: var(--bg2); }
.ld-proxima { font-size: 13px; color: var(--fg); }
.ld-proxima b { color: var(--acao-texto); }
.ld-pergunta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px;
  border-radius: 10px; background: var(--ld-frio-s); color: var(--fg); font-size: 14px; font-weight: 700; }
.ld-pergunta span { flex: 1 1 140px; }

.ld-acoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 600px) { .ld-acoes { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.ld-acao { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 60px; padding: 6px 2px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--fg); font-size: 12px; font-weight: 700; line-height: 1.1; }
.ld-tela .ld-acao { min-height: 60px; }
.ld-acao:hover { background: var(--bg3); color: var(--fg); }
.ld-acao.principal { background: var(--acao); border-color: var(--acao); color: var(--acao-fg); }
.ld-acao.principal:hover { background: var(--acao-hover); color: var(--acao-fg); }
.ld-acao:disabled, .ld-acao:disabled:hover { background: var(--bg3); color: var(--muted); border-color: var(--line); }
.ld-acao .ld-ico { width: 20px; height: 20px; }

.ld-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--bg3); color: var(--fg);
  font-size: 13px; font-weight: 600; }
.ld-tela .ld-chip, .ld-folha .ld-chip { min-height: 40px; }
.ld-chip:hover { background: var(--bg3); color: var(--fg); border-color: var(--fg); }
.ld-chip.on, .ld-chip.on:hover { background: var(--fg); border-color: var(--fg); color: var(--bg2); }
.ld-chip.vazio { border-style: dashed; background: transparent; color: var(--muted); }
.ld-leitura { font-size: 13px; color: var(--muted); }

.ld-sug { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.ld-sug-card { display: flex; flex-direction: column; gap: 6px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; min-width: 0; }
.ld-sug-card .imovel-foto { border-radius: 0; margin: 0; }
.ld-sug-corpo { display: flex; flex-direction: column; gap: 3px; padding: 0 10px 10px; }
.ld-sug-preco { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.ld-sug-tit { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.ld-porque { font-size: 12px; color: var(--ld-ok); font-weight: 700; }
.ld-sug-card button { margin-top: 4px; min-height: 40px; font-size: 13px; }

.ld-ims { display: flex; flex-direction: column; gap: 10px; }
.ld-ims h4 { margin: 0; font-size: 13px; }
.ld-im { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px;
  padding: 8px 0; border-top: 1px solid var(--line); color: var(--fg); text-decoration: none; min-height: 44px; }
.ld-im span:last-child { color: var(--muted); white-space: nowrap; }

.ld-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ld-tempo li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 8px 0; font-size: 14px; }
.ld-tempo li + li { border-top: 1px solid var(--line); }
.ld-tempo .ld-ponto { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--line); }
.ld-tempo li.cliente .ld-ponto { background: var(--ld-quente); }
.ld-tempo li.corretor .ld-ponto { background: var(--ld-ok); }
.ld-tempo small { display: block; color: var(--muted); font-size: 12px; }

.ld-nota { font-size: 14px; padding: 8px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere;
  white-space: pre-wrap; }
.ld-nota small { display: block; color: var(--muted); font-size: 12px; white-space: normal; }

/* ── folhas (a de baixo de servicos.js, com o miolo destas telas) ─────── */
.ld-folha { display: flex; flex-direction: column; gap: 12px; }
.ld-folha h3 { margin: 0; overflow-wrap: anywhere; }
/* `display: flex` das peças venceria o [hidden] (passos do "⋯", "Novo cliente") */
.ld-folha[hidden], .ld-folha [hidden] { display: none !important; }
/* Idem na ficha: o `display: flex` do `.ld-card` mostrava o "Jornada e Maysa" VAZIO (e um "Abrir conversa" sem
   destino) quando a Maysa não tinha painel daquele lead (20/10). */
.ld-tela [hidden] { display: none !important; }
.ld-folha label { margin: 4px 0 4px; }
.ld-folha textarea { min-height: 84px; resize: vertical; }
.ld-folha .ld-grupo { display: flex; flex-direction: column; gap: 6px; }
.ld-folha .ld-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ld-folha .ld-duas > * { min-width: 0; }
.ld-folha input[type=number], .ld-folha input[type=datetime-local], .ld-folha input[type=search],
.ld-folha input[type=email] {
  width: 100%; padding: 10px 12px; background: var(--bg3); border: 1px solid var(--line); border-radius: 8px;
  color: var(--fg); font-size: 16px; font-family: inherit; min-height: 44px; }
.ld-folha .ld-botoes { display: flex; flex-direction: column; gap: 8px; }
.ld-folha .ld-opcao { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  min-height: 52px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--fg); text-align: left; font-weight: 600; }
.ld-folha .ld-opcao:hover { background: var(--bg3); color: var(--fg); }
.ld-folha .ld-opcao small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.ld-folha .ld-opcao.perigo { color: var(--red); }
a.ld-opcao { text-decoration: none; box-sizing: border-box; }   /* o link do WhatsApp Web (061) com cara de opção */
.ld-folha .ld-resultados { display: flex; flex-direction: column; gap: 6px; }
.ld-folha .ld-dica { font-size: 12.5px; color: var(--muted); margin: 0; }
.ld-folha .ld-sem-cliente { align-self: center; color: var(--muted); font-size: 13px; text-decoration: underline;
  min-height: 44px; display: inline-flex; align-items: center; }
.ld-folha .ld-colar { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px;
  background: var(--bg3); }
.ld-folha .ld-colar textarea { min-height: 64px; background: var(--bg2); }
/* "Colar e-mail do portal" (plan/23 parte 4): fechado por padrão; aberto, igual ao "Colar". */
.ld-folha details.ld-portal { display: block; }
.ld-folha details.ld-portal[open] { display: flex; }
.ld-folha .ld-portal summary { min-height: 44px; display: flex; align-items: center; cursor: pointer;
  font-weight: 700; color: var(--acao-texto); }
.ld-folha .ld-portal textarea { min-height: 88px; }
.ld-folha .ld-portal[open] > :not(summary) { margin-top: 6px; }
.ld-folha .ld-portal button { width: 100%; }

/* "Pôr na minha agenda" (ficha do lead): link com o ícone da agenda, alvo de toque de 44 px. */
.ld-agenda { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; vertical-align: middle; }
.ld-agenda .ld-ico { width: 16px; height: 16px; }

/* "Interessado neste imóvel" na ficha do imóvel (web/vitrine.js): abre o "+ Lead" já com o imóvel. */
.fi-interessado { width: 100%; margin: -12px 0 24px; }

/* ── "Seleção dele": o link pessoal do cliente (plan/23-leads-parte2-selecao.md §6) ── */
.ld-sel-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ld-sel-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
.ld-sel-dec { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-weight: 800; background: var(--ld-passo); color: var(--ld-passo-fg); }
.ld-sel-dec.gostei { background: var(--ld-quente-s); color: var(--ld-quente); }
.ld-sel-dec.passo { background: var(--ld-perdido-s); color: var(--ld-perdido); }
.ld-sel-tit { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; min-height: 44px;
  display: flex; flex-direction: column; justify-content: center; }
.ld-sel-tit small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.ld-sel-item button, .ld-sel-add button, .ld-sel-acoes button { min-height: 44px; }
.ld-sel-add { display: flex; gap: 8px; }
.ld-sel-add input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg3); color: var(--fg); font-size: 16px; font-family: inherit; }
.ld-sel-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-sel-acoes button { flex: 1 1 auto; }
#ld_sel_link { display: flex; flex-direction: column; gap: 4px; }
#ld_sel_link[hidden] { display: none; }
#ld_sel_link input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg3); color: var(--fg); font-size: 13px; font-family: inherit; }
.ld-sel-erro:empty, #ld_sel_erro:empty { display: none; }
.ld-sug-card button[data-ld-sug-sel] { margin-top: 0; }

/* ── "Como paga" (plan/26 §7): a qualificação financeira na ficha e na folha ── */
.ld-chip-fixo, .ld-chip-fixo:hover { border-color: var(--line); cursor: default; }
.ld-paga-conta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ld-paga-conta > div { min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--bg3); }
.ld-paga-conta dt { font-size: 12px; color: var(--muted); }
.ld-paga-conta dd { margin: 0; font-size: 14px; font-weight: 800; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ld-paga-apagar { align-self: flex-start; min-height: 44px; }
.ld-folha .ld-paga-bloco { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--bg3); }
.ld-folha .ld-paga-bloco input[type=text] { background: var(--bg2); }
.ld-folha input[type=date] { width: 100%; padding: 10px 12px; background: var(--bg3); border: 1px solid var(--line);
  border-radius: 8px; color: var(--fg); font-size: 16px; font-family: inherit; min-height: 44px; }
.ld-folha .ld-paga-pediu { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; color: var(--fg);
  font-size: 14px; font-weight: 700; }
.ld-paga-pediu input { width: 20px; height: 20px; flex: none; margin: 0; }
.ld-paga-res { display: flex; flex-direction: column; gap: 10px; }
.ld-paga-res:empty { display: none; }
@media (max-width: 420px) { .ld-paga-conta { grid-template-columns: 1fr 1fr; } .ld-paga-conta > div:first-child { grid-column: 1 / -1; } }

/* ══ Leads v2 (06/10) — "C no topo + A como lista", as telas do Stitch, porta fiel ═════════════
 * Painel do dia: 4 números (tocar filtra a lista), "Precisa de você hoje", por etapa (barras) e a equipe
 * (gestão); a lista: abas de etapa com contagem, chips de situação e o cartão do lead com quem atende, o
 * próximo passo (vermelho quando atrasa), "parado há N dias" e "adiado por … até …". Cor só por token. */
.lv-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lv-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.lv-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lv-ctrl:empty { display: none; }
.lv-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--line); }
.lv-seg button, .lv-seg button:hover { min-height: 44px; padding: 0 12px; border-radius: 8px; background: none; border: 0;
  color: var(--muted); font-size: 12.5px; font-weight: 700; }
.lv-seg button.on { background: var(--bg2); color: var(--fg); box-shadow: var(--ld-sombra-sm); }
.lv-ctrl .ld-corretor { flex: 1 1 200px; }
/* No celular, a ordem do Stitch "C" e depois a lista "A": números · precisa hoje · por etapa · equipe · lista.
   No computador (abaixo), duas colunas: o trabalho à esquerda, o panorama à direita. */
.lv-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  grid-template-areas: "topo" "lado" "lista"; }
.lv-topo { grid-area: topo; }
.lv-lado { grid-area: lado; }
.lv-lista-sec { grid-area: lista; }
.lv-topo, .lv-lado { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.lv-sec-t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; line-height: 22px; font-weight: 700;
  letter-spacing: -.01em; color: var(--fg); }
.lv-sec-t b { padding: 1px 8px; border-radius: 999px; background: var(--ld-quente-s); color: var(--ld-quente); font-size: 11px;
  line-height: 16px; font-weight: 800; letter-spacing: .02em; }
.lv-kpi-t, .lv-kpi-n, .lv-sec-t, .lv-nome, .lv-aba, .lv-barra-r, .lv-pessoa-txt b, .lv-pegar, .lv-trab-b, .lv-at-chip {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* os seis números (3 x 2): o filtro da lista — um de cada vez, somado à aba de etapa */
.lv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lv-kpis:empty { display: none; }
.lv-kpi, .lv-kpi:hover { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 96px; margin: 0;
  padding: 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); box-shadow: var(--ld-sombra-sm);
  color: var(--fg); text-align: left; font: inherit; cursor: pointer; }
.lv-kpi:hover { border-color: var(--ld-borda-forte); }
.lv-kpi.on { border-color: var(--acao); box-shadow: 0 0 0 1px var(--acao); }
.lv-kpi-t { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; font-size: 11px;
  font-weight: 800; letter-spacing: .04em; color: var(--muted); }
.lv-kpi-n { font-size: 26px; line-height: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lv-kpi-s { font-size: 11px; color: var(--muted); }
.lv-kpi-parados .lv-kpi-n, .lv-kpi-quentes .lv-kpi-n { color: var(--ld-quente); }

/* o botão das linhas (o "Ver tudo" do recolhível) */
.lv-trab-b, .lv-trab-b:hover { flex: none; min-height: 44px; margin: 0; padding: 0 14px; display: inline-flex; align-items: center;
  border-radius: 8px; background: var(--bg3); border: 1px solid var(--ld-borda-forte); color: var(--fg); font-size: 12.5px;
  font-weight: 800; cursor: pointer; }
.lv-trab-b.lv-principal-b { background: var(--acao); border-color: var(--acao); color: var(--acao-fg); box-shadow: var(--ld-sombra-sm); }

/* nomes, temperatura e origem (painel e lista) */
.lv-nome { font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0; }
.lv-temp { flex: none; padding: 1px 6px; border-radius: 4px; font-size: 11px; line-height: 15px; font-weight: 800; }
.lv-temp-quente { background: var(--ld-quente-s); color: var(--ld-quente); }
.lv-temp-morno { background: var(--ld-morno-s); color: var(--ld-morno); }
.lv-temp-frio { background: var(--ld-frio-s); color: var(--ld-frio); }
.lv-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); min-width: 0; }
.lv-origem { padding: 1px 6px; border-radius: 4px; font-size: 10px; line-height: 14px; font-weight: 800; white-space: nowrap; }
.lv-origem-portal { background: var(--mod-marketing-s); color: var(--mod-marketing); }
.lv-origem-maysa { background: var(--mod-rede-s); color: var(--mod-rede); }
.lv-origem-site { background: var(--mod-carteira-s); color: var(--mod-carteira); }
.lv-origem-manual { background: var(--mod-gestao-s); color: var(--mod-gestao); }
.lv-av { width: 44px; height: 44px; }

/* por etapa (barras) e a equipe */
.lv-cartao { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; background: var(--bg2);
  border: 1px solid var(--line); box-shadow: var(--ld-sombra-sm); }
.lv-cartao[hidden] { display: none; }
.lv-cartao-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line); }
.lv-cartao-n { font-size: 11px; font-weight: 800; color: var(--muted); }
.lv-barra, .lv-barra:hover { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0; padding: 0 4px;
  background: none; border: 0; border-radius: 8px; color: var(--fg); font: inherit; cursor: pointer; }
.lv-barra:hover { background: var(--bg3); }
.lv-barra-r { flex: none; width: 92px; text-align: left; font-size: 13px; font-weight: 700; }
.lv-barra-trilho { flex: 1; height: 10px; border-radius: 999px; background: var(--bg3); overflow: hidden; }
.lv-barra-trilho i { display: block; height: 100%; border-radius: 999px; background: var(--ld-passo-fg); }
.lv-etapa-em_contato i { background: var(--mod-carteira); }
.lv-etapa-interessado i { background: var(--ld-morno); }
.lv-etapa-visita i { background: var(--mod-rede); }
.lv-etapa-proposta i { background: var(--acao); }
.lv-barra-n { flex: none; min-width: 28px; text-align: right; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lv-pessoa, .lv-pessoa:hover { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 6px 4px;
  background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--fg); text-align: left; font: inherit;
  cursor: pointer; }
.lv-pessoa:first-of-type { border-top: 0; }
.lv-pessoa:hover { background: var(--bg3); }
.lv-pessoa-av { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--line); font-size: 12px; font-weight: 800; }
.lv-pessoa.atencao .lv-pessoa-av { border-color: var(--ld-quente); }
.lv-pessoa-txt { display: flex; flex-direction: column; min-width: 0; font-size: 12px; color: var(--muted); }
.lv-pessoa-txt b { font-size: 13px; color: var(--fg); }
.lv-pessoa-txt strong { color: var(--fg); }
.lv-pessoa-txt em { font-style: normal; }
.lv-pessoa.atencao .lv-pessoa-txt em { color: var(--ld-quente); font-weight: 700; }

/* a lista: abas de etapa e o cartão do lead */
.lv-lista-sec { display: flex; flex-direction: column; gap: 10px; }
.lv-funil { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.lv-funil::-webkit-scrollbar { display: none; }
.lv-aba, .lv-aba:hover { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 76px; min-height: 52px; margin: 0; padding: 6px 12px; border-radius: 12px; background: var(--bg2);
  border: 1px solid var(--line); color: var(--fg); font-size: 13px; font-weight: 700; }
.lv-aba b { font-size: 11px; color: var(--muted); font-weight: 800; }
.lv-aba.on { border: 2px solid var(--acao); color: var(--acao-texto); }
.lv-aba.on b { padding: 0 6px; border-radius: 999px; background: var(--ld-quente-s); color: var(--acao-texto); }
.lv-lista { display: flex; flex-direction: column; gap: 10px; }
.lv-linha { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--ld-sombra-sm); overflow: hidden; }
.lv-linha.aberto { outline: 2px solid var(--acao); outline-offset: -2px; }
.lv-linha:hover { border-color: var(--ld-borda-forte); }
.lv-linha.na-fila { border-left: 3px solid var(--ld-morno); }
.lv-alvo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px 6px 14px 14px; color: var(--fg);
  cursor: pointer; }
/* o nome abre a ficha na gaveta; a seta recolhe/expande (20/10) */
.lv-nome-a { color: var(--fg); text-decoration: none; }
.lv-nome-a:hover, .lv-nome-a:focus-visible { color: var(--acao-texto); text-decoration: underline; text-underline-offset: 3px; }
.lv-expandir, .lv-expandir:hover { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.lv-expandir:hover { background: var(--bg3); }
.lv-chevron { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-top: -4px; transition: transform .15s; }
.lv-linha.expandida .lv-chevron { transform: rotate(-135deg); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .lv-chevron { transition: none; } }
.lv-det { flex: 1 1 100%; padding: 12px 14px 14px; border-top: 1px solid var(--line); background: var(--bg); }
.lv-det[hidden] { display: none; }
.lv-det-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; margin: 0; }
.lv-det-dl div { min-width: 0; }
.lv-det-dl dt { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--muted); }
.lv-det-dl dd { margin: 1px 0 0; font-size: 13.5px; color: var(--fg); overflow-wrap: anywhere; }
.lv-det-acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
/* quem atende: o selo da linha e o filtro acima das abas */
.lv-at { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 4px; font-size: 10.5px;
  line-height: 15px; font-weight: 800; white-space: nowrap; }
.lv-at .ico, .lv-at-chip .ico { width: 13px; height: 13px; flex: none; }
.lv-at-maysa { background: var(--mod-rede-s); color: var(--mod-rede); }
.lv-at-corretor { background: var(--mod-carteira-s); color: var(--mod-carteira); }
.lv-at-sem { background: var(--ld-morno-s); color: var(--ld-morno); }
.lv-atend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lv-at-r { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--muted); margin-right: 2px; }
.lv-at-chip, .lv-at-chip:hover { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; margin: 0; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--fg); font-size: 12.5px;
  font-weight: 700; cursor: pointer; }
.lv-at-chip b { font-size: 11px; color: var(--muted); font-weight: 800; }
.lv-at-chip.on { border: 2px solid var(--acao); color: var(--acao-texto); }
.lv-at-chip.lv-at-maysa .ico { color: var(--mod-rede); }
.lv-at-chip.lv-at-corretor .ico { color: var(--mod-carteira); }
.lv-at-chip.lv-at-sem .ico { color: var(--ld-morno); }
.lv-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lv-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lv-l2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.lv-resp { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--mod-carteira-s);
  color: var(--mod-carteira); font-size: 9px; font-weight: 800; }
.lv-resp-n { color: var(--fg); font-weight: 600; }
.lv-semdono { padding: 1px 6px; border-radius: 4px; background: var(--ld-morno-s); color: var(--ld-morno); font-size: 10.5px; font-weight: 800; }
.lv-l3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line);
  font-size: 12.5px; }
.lv-l3:empty { display: none; }
.lv-proximo { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.lv-proximo .ld-ico { width: 16px; height: 16px; color: var(--acao); flex: none; }
.lv-proximo b { color: var(--acao-texto); font-weight: 800; }
.lv-proximo em { font-style: normal; font-weight: 700; color: var(--ld-quente); }
.lv-proximo.atrasado b { color: var(--ld-quente); }
.lv-fim { color: var(--muted); font-weight: 600; }
.lv-tag { padding: 1px 6px; border-radius: 4px; font-size: 10.5px; line-height: 15px; font-weight: 800; }
.lv-tag-parado { background: var(--ld-morno-s); color: var(--ld-morno); }
.lv-tag-duplicado { background: var(--ld-morno-s); color: var(--ld-morno); }
.lv-tag-adiado { background: var(--bg3); color: var(--muted); }
/* 22/10: sem resposta — a última fala foi nossa há mais de 24 h (só tokens: os dois temas) */
.lv-tag-semresp { background: var(--ld-frio-s); color: var(--ld-frio); }
.ld-semresp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px;
  background: var(--ld-frio-s); border: 1px solid var(--ld-frio); color: var(--fg); font-size: 13px; }
.ld-semresp p { flex: 1 1 220px; margin: 0; }
.ld-semresp button { min-height: 44px; }
.lv-tag-vinc { display: inline-flex; align-items: center; gap: 3px; background: var(--mod-carteira-s); color: var(--mod-carteira); }
.lv-tag-vinc .ico { width: 12px; height: 12px; flex: none; }
.lv-pessoa-vinc { color: var(--mod-carteira); font-weight: 800; }
.lv-pessoa-total .lv-pessoa-av { background: var(--acao); color: var(--acao-fg); }
.lv-mais { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px;
  font-size: 12.5px; color: var(--muted); }
/* ativos × antigos (20/10) */
.lv-periodo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lv-per, .lv-per:hover { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--fg); font: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer; }
.lv-per b { font-size: 11px; color: var(--muted); font-weight: 800; }
.lv-per.on { border: 2px solid var(--acao); color: var(--acao-texto); }
.lv-per-dica { flex: 1 1 200px; font-size: 12px; color: var(--muted); }
.lv-pegar, .lv-pegar:hover { flex: none; align-self: center; min-height: 44px; margin-right: 12px; padding: 0 14px; border-radius: 8px;
  background: var(--acao); border: 0; color: var(--acao-fg); font-size: 12.5px; font-weight: 800; }

@media (min-width: 1024px) {
  .ld-tela.lv { max-width: 1180px; }
  .lv-funil { flex-wrap: wrap; overflow: visible; }     /* "Encerrados" aparecia cortado na borda */
  .lv-grade { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start;
    gap: 22px; grid-template-areas: "topo lado" "lista lado"; }
  .lv-lado { position: sticky; top: 72px; }
}
/* A gaveta aberta em Leads (computador): a tela recua a largura dela e o panorama sai de cena, para a lista
   continuar inteira à vista ao lado da ficha — como o quadro do Início. */
@media (min-width: 1100px) {
  body.in-gaveta-aberta #app:not(.quadro):has(.lv) { margin-right: 520px; }
  body.in-gaveta-aberta .lv-grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topo" "lista"; }
  body.in-gaveta-aberta .lv-lado { display: none; }
}

/* ── Leads no celular (06/10, pedido do Icaro: "otimizado para celular no dia a dia") ───────────────────────────
   Os números numa faixa fina que filtra a lista ao tocar; o painel do dia (hoje, etapas, equipe) recolhido num
   "Ver painel do dia"; a lista logo abaixo; sem o "+ Lead" flutuante (o "+" da barra inferior já cria lead). No FIM
   do arquivo de propósito: as regras base vêm antes e, com a mesma especificidade, ganhariam daqui. */
.lv-painel-b, .lv-kpi-curto, .lv-novo { display: none; }
@media (max-width: 760px) {
  .lv-sub { display: none; }
  .lv-grade, .lv-topo { gap: 10px; }
  /* seis números: a faixa rola de lado DENTRO dela (a página não) */
  .lv-kpis { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .lv-kpis::-webkit-scrollbar { display: none; }
  .lv-kpi, .lv-kpi:hover { flex: 1 0 52px; min-width: 52px; min-height: 56px; padding: 6px 4px; gap: 1px; align-items: center;
    justify-content: center; }
  .lv-kpi-t, .lv-kpi-s { display: none; }
  .lv-kpi-n { font-size: 20px; line-height: 24px; }
  .lv-kpi-curto { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10.5px; line-height: 13px; font-weight: 700; color: var(--muted); }
  .lv-painel-b:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; margin: -4px 0;
    padding: 0 2px; border: 0; background: none; color: var(--acao-texto); font: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; }
  .lv-painel-b .ico { width: 16px; height: 16px; }
  .lv:not(.lv-painel-on) .lv-lado { display: none; }
  .lv-atend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lv-at-r { display: none; }
  .lv-atend::-webkit-scrollbar { display: none; }
  .lv-at-chip { flex: none; }
  .lv-det-dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.sv-com-nav .ld-fab { display: none; }
  body.sv-com-nav .lv-novo { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 44px; padding: 0 14px;
    border: 0; border-radius: 999px; background: var(--acao); color: var(--acao-fg); font: inherit; font-size: 14px;
    font-weight: 800; cursor: pointer; }
  body.sv-com-nav .lv-novo .ld-ico { width: 18px; height: 18px; }
  .lv-cab { align-items: center; }
  .lv-cab .gm-link { margin-left: auto; font-size: 12.5px; }
  body.sv-com-nav .ld-rodape { height: 24px; }
}

/* O mapa das opções (064, plan/31 — teste): a prévia da imagem e o link, na folha do "Mais". */
.ld-folha .ld-mapa-previa { display: block; width: 100%; max-width: 420px; aspect-ratio: 1; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg3); object-fit: cover; }
.ld-folha .ld-mapa-link { width: 100%; padding: 10px 12px; background: var(--bg3); border: 1px solid var(--line);
  border-radius: 8px; color: var(--fg); font-size: 14px; font-family: inherit; min-height: 44px; }

/* Logo abaixo do nome: o imóvel que diz o que ele quer, e o aviso de nome genérico. */
.ld-imovel-de { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ld-sem-nome { font-style: italic; }