/* =============================================================
   FUNIL — kanban das etapas e ficha do lead
   ============================================================= */

/* ---------- kanban ---------- */
.kan{
  display:flex;
  gap:var(--s3);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  margin:0 calc(var(--s4) * -1);
  padding:2px var(--s4) var(--s3);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.kan::-webkit-scrollbar{height:0}

.col{
  flex:0 0 82%;
  max-width:320px;
  scroll-snap-align:center;
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* Sem position:sticky aqui. `.kan` tem overflow-x:auto, o que faz o
   overflow-y virar auto junto — o cabeçalho passa a grudar dentro do
   próprio kanban e desce por cima dos cards. As colunas são curtas;
   sticky não resolveria nada e quebrava o alinhamento. */
.col-h{
  display:flex;
  align-items:center;
  gap:var(--s2);
  margin-bottom:var(--s3);
  padding:var(--s2);
  background:var(--bg);
  border-radius:var(--r-sm);
}
.col-h .sq{width:9px;height:9px;border-radius:3px;flex:none}
.col-h .nm{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-tight)}
.col-h .ct{margin-left:auto;font-size:var(--fs-xs);color:var(--fg-2)}

.col-b{display:flex;flex-direction:column;gap:var(--s2)}

.lcard{
  display:grid;
  gap:var(--s1);
  width:100%;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  background:var(--card);
  border:1px solid var(--edge);
  border-left:3px solid;
  border-radius:11px;
  padding:var(--s3) var(--s4);
  box-shadow:var(--sh-1);
  transition:transform var(--t1) var(--ease), box-shadow var(--t2) var(--ease);
}
.lcard:hover{box-shadow:var(--sh-2)}
.lcard:active{transform:scale(.985)}

.lc-topo{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
.lc-nome{font-weight:600;font-size:var(--fs-md);letter-spacing:var(--ls-tight)}
.lc-idade{font-size:var(--fs-tiny);color:var(--fg-2);flex:none}
.lc-proc{font-size:var(--fs-sm);color:var(--fg-2)}
.lc-pe{display:flex;gap:var(--s1);align-items:center;margin-top:var(--s2);flex-wrap:wrap}

.col-vazia{
  font-size:var(--fs-sm);
  color:var(--fg-2);
  padding:var(--s3) var(--s2);
  border:1px dashed var(--edge);
  border-radius:11px;
  text-align:center;
}

/* ---------- rodapé do kanban ---------- */
.kan-pe{
  display:flex;
  align-items:center;
  gap:var(--s3);
  margin-top:var(--s2);
}
/* Em 380px cabe uma coluna por vez: sem indicador não dá pra saber
   quantas etapas ainda faltam pro lado. */
.pontos{display:flex;gap:5px;flex:1}
.pontos i{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--edge);
  transition:background var(--t1) var(--ease), transform var(--t1) var(--ease);
}
.pontos i.on{background:var(--heat);transform:scale(1.25)}

.kan-pe .chip-b{min-height:var(--tap);font-size:var(--fs-xs);flex:none}

/* ---------- etapas na ficha ---------- */
.etapas{display:flex;gap:var(--s2);flex-wrap:wrap}
.etapa-b{
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:500;
  min-height:var(--tap);
  padding:0 var(--s3);
  border-radius:var(--r-sm);
  border:1px solid var(--edge);
  background:var(--card);
  color:var(--fg-2);
  cursor:pointer;
  transition:all var(--t1) var(--ease);
}
.etapa-b .sq{width:8px;height:8px;border-radius:2px;flex:none}
.etapa-b:hover{border-color:var(--fg-3);color:var(--fg)}
.etapa-b.on{background:var(--acao);color:var(--acao-fg);border-color:var(--acao)}

/* ---------- o que sabemos ---------- */
dl.fatos{
  display:grid;
  grid-template-columns:104px 1fr;
  gap:var(--s3);
  font-size:var(--fs-base);
}
dl.fatos dt{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  color:var(--fg-2);
  padding-top:3px;
}
dl.fatos dd{font-weight:500;line-height:1.5;min-width:0;overflow-wrap:anywhere}
dl.fatos dd.origem{font-size:var(--fs-xs);color:var(--fg-2)}

/* ---------- histórico ---------- */
.tl{position:relative;padding-left:var(--s5)}
.tl::before{
  content:'';
  position:absolute;
  left:4px;top:7px;bottom:7px;
  width:1px;
  background:var(--edge);
}
.tl-i{position:relative;padding-bottom:var(--s4)}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{
  content:'';
  position:absolute;
  left:calc(var(--s5) * -1);
  top:4px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--edge);
  border:2px solid var(--card);
}
.tl-i.agora::before{background:var(--heat)}
.tl-q{font-size:var(--fs-tiny);color:var(--fg-2)}
.tl-t{font-size:var(--fs-sm);margin-top:2px;line-height:1.55}

.resumo-agente{
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--fg-2);
}