/* UIX01/HANDOFF-058 — FASE 5, sub-fatia A (2ª passada): a FICHA DO LEAD (`.lf-*`).

   Arquivo próprio, e não mais um bloco em `comercial.css`, por dois motivos: o teto de
   800 linhas do CI (o comercial já passava de 450 com o Funil, a Biblioteca e a Lista)
   e a divisão por domínio que a F1 deixou como padrão do projeto.

   GATE: igual ao do `comercial.css` — a rota `#/leads/:id` só é registrada com
   `uix01_comercial` ON, então com a flag OFF nenhuma destas classes chega ao DOM e o
   arquivo é inerte. A ordem do `<link>` não importa: nada aqui redefine seletor de
   outro arquivo.

   CORES: nenhuma literal; e a regra da F4 vale igual — secundário sobre a PÁGINA usa
   `--u-texto-2`, secundário sobre TINTE usa a tinta do tinte. */

.lf { font-size: 13px }
.lf-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px }
.lf-topo h1 { font-size: 20px; margin: 0 }

/* Três colunas como a v1 no desktop; empilha no estreito — e é isso que substitui as
   abas, que só existiam no `renderLeadDetailMobile`. */
.lf-grade { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 14px; align-items: start }
@media (max-width: 1180px) { .lf-grade { grid-template-columns: minmax(0, 1fr) 300px } }
@media (max-width: 860px) { .lf-grade { grid-template-columns: 1fr } }
.lf-col { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.lf-col-conversa { min-height: 60vh }

.lf-bloco {
  background: var(--u-superficie); border: 1px solid var(--u-linha);
  border-radius: var(--u-raio-cartao, 10px); padding: 12px 14px;
}
.lf-bloco h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--u-texto-2); margin: 0 0 10px;
}
.lf-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--u-texto-2); margin: 14px 0 6px }
.lf-critica { color: var(--u-erro) }

.lf-lin { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--u-linha) }
.lf-lin:last-child { border-bottom: 0 }
/* 🔴 '>' e nao descendente. O seletor largo `.lf-lin span` (0,1,1) VENCIA o `.b-ok`
   (0,1,0) e repintava o SELO dentro do valor: "Ativo" saia com a cor de texto
   secundario sobre o tinte verde — 4,25, medido pelo gate na aba Financeiro. O rotulo
   e filho DIRETO; o selo mora dentro do <b>. Mesma familia do `section>h2` que a F4
   registrou: seletor de parentesco errado quebra em silencio, sem nada aparentar. */
.lf-lin > span { color: var(--u-texto-2) }
.lf-lin b { text-align: right; color: var(--u-texto) }
.lf-nota {
  margin-top: 8px; padding: 8px 10px; font-size: 12.5px;
  background: var(--u-hover); color: var(--u-tinte-ink); border-radius: var(--u-raio-controle, 8px);
}
.lf-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px }
.lf-acoes { display: flex; flex-direction: column; gap: 6px; align-items: stretch }
.lf-acoes .badge { text-align: center; padding: 6px 8px }

.lf-bullet { position: relative; padding: 3px 0 3px 13px; font-size: 12.5px; color: var(--u-texto) }
.lf-bullet::before { content: "\2022"; position: absolute; left: 2px; color: var(--u-verde-texto) }

.lf-numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px }
.lf-numeros > div {
  background: var(--u-fundo); border: 1px solid var(--u-linha);
  border-radius: var(--u-raio-controle, 8px); padding: 8px; text-align: center;
}
.lf-numeros b { display: block; font-size: 18px; color: var(--u-texto) }
.lf-numeros span { font-size: 11px; color: var(--u-texto-2) }

.lf-nota-item {
  position: relative; margin-bottom: 6px; padding: 8px 34px 8px 10px;
  background: var(--u-fundo); border: 1px solid var(--u-linha); border-radius: var(--u-raio-controle, 8px);
}
.lf-nota-item.fixada { border-left: 3px solid var(--u-verde-marca) }
/* 32px e o piso das ACOES EM LINHA da v2 — o mesmo de .ac-doc-acao .uix-bt
   (pedidos-v2.css:305), que existe porque um botao de canto com a altura cheia de
   controle domina a caixa em que vive. O gate mediu 24px aqui e reprovou, com
   razao: 24px e pequeno demais para uma acao que APAGA. Em ponteiro grosso sobe
   para 44px, como todo o resto. */
.lf-nota-x { position: absolute; top: 6px; right: 6px; height: 32px; padding: 0 9px; font-size: 12px }

/* ---- conversa ---- */
.lf-conversa {
  display: flex; flex-direction: column; height: 100%; padding: 12px 14px;
  background: var(--u-superficie); border: 1px solid var(--u-linha); border-radius: var(--u-raio-cartao, 10px);
}
.lf-conversa h2 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--u-texto-2);
}
.lf-msgs { flex: 1; max-height: 52vh; overflow-y: auto; padding-right: 4px; margin-bottom: 10px }
.lf-msg {
  max-width: 78%; margin-bottom: 8px; padding: 8px 11px;
  border: 1px solid var(--u-linha); border-radius: var(--u-raio-cartao, 10px);
}
.lf-msg.entrou { background: var(--u-fundo) }
/* A mensagem enviada usa o TINTE verde, não a marca preenchida: o corpo é texto longo,
   e sobre o tinte quem passa nos dois temas é a tinta do tinte (`--u-verde-ink`). */
.lf-msg.saiu { margin-left: auto; background: var(--u-verde-fundo); border-color: var(--u-verde-fundo) }
.lf-msg.saiu .lf-msg-corpo, .lf-msg.saiu .lf-msg-meta { color: var(--u-verde-ink) }
.lf-msg-meta { margin-bottom: 3px; font-size: 11px; color: var(--u-texto-2) }
.lf-msg-corpo { white-space: pre-wrap; font-size: 13px; color: var(--u-texto) }
.lf-msg-transc {
  margin-top: 5px; padding: 6px 8px; font-size: 12px; color: var(--u-texto);
  background: var(--u-superficie); border-left: 3px solid var(--u-verde-marca); border-radius: 4px;
}
.lf-vazio { padding: 22px; text-align: center; color: var(--u-texto-2) }

.lf-composer { padding-top: 10px; border-top: 1px solid var(--u-linha) }
.lf-composer textarea {
  width: 100%; min-height: 68px; resize: vertical; padding: 9px 11px;
  border: 1px solid var(--u-linha-forte); border-radius: var(--u-raio-controle, 8px);
  background: var(--u-superficie); color: var(--u-texto); font: inherit; font-size: 13px;
}
.lf-composer-acoes { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap }
.lf-espaco { flex: 1 }

/* ---- camadas ---- */
.lf-modal { max-width: 560px }
.lf-modal-tit { margin: 0 0 10px; font-size: 16px; color: var(--u-texto) }
.lf-modal-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px }
.lf-busca {
  width: 100%; height: var(--u-altura-controle, 38px); margin-bottom: 10px; padding: 0 11px;
  border: 1px solid var(--u-linha-forte); border-radius: var(--u-raio-controle, 8px);
  background: var(--u-superficie); color: var(--u-texto); font: inherit; font-size: 13px;
}
.lf-tpl-lista { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto }
.lf-tpl {
  padding: 9px 11px; text-align: left; cursor: pointer;
  border: 1px solid var(--u-linha-forte); border-radius: var(--u-raio-controle, 8px);
  background: var(--u-superficie); color: var(--u-texto); font: inherit;
}
.lf-tpl:hover { background: var(--u-hover) }
.lf-tpl:hover .lf-tpl-corpo { color: var(--u-tinte-ink) }
.lf-tpl:focus-visible { outline: 2px solid var(--u-verde-marca); outline-offset: 2px }
.lf-tpl-tit { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; font-weight: 600 }
.lf-tpl-corpo {
  font-size: 12px; color: var(--u-texto-2); white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lf-estagios { display: flex; flex-direction: column; gap: 6px }
.lf-estagio { justify-content: flex-start; gap: 8px }
.lf-estagio.atual { opacity: .55 }

@media (pointer: coarse) {
  .lf-busca, .lf-tpl, .lf-estagio, .lf-nota-x { min-height: var(--u-alvo-toque, 44px) }
}