/* Funil: quadro de colunas com cards de arrastar. O quadro rola na
   horizontal dentro dele mesmo; a página nunca estoura a largura. */

.outlet--funil { gap: 16px; }
.funil-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.funil-topo__dica { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .84rem; color: var(--tinta-2); flex: 1 1 320px; }
.funil-topo__dica .ico { color: var(--ouro-tinta); }
.funil-topo__resumo { display: flex; gap: 16px; font-size: .84rem; color: var(--mudo); }
.funil-topo__resumo strong { color: var(--tinta); font-size: 1rem; }

.funil { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; min-width: 0; align-items: flex-start; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.coluna { flex: 0 0 248px; background: #efebe3; border-radius: 14px; display: flex; flex-direction: column; min-height: 220px; max-height: calc(100dvh - 210px); scroll-snap-align: start; }
.coluna__topo { padding: 12px 12px 10px; border-bottom: 2px solid transparent; }
.coluna__titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: .86rem; }
.coluna__qtd { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #fff; font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; color: var(--tinta-2); }
.coluna__total { display: block; margin-top: 3px; font-size: .78rem; color: var(--mudo); }
.coluna--fechou .coluna__topo { border-bottom-color: var(--ok); }
.coluna--perdido .coluna__topo { border-bottom-color: #c9837c; }
.coluna--orcamento .coluna__topo { border-bottom-color: var(--ouro); }
.coluna--fechou .coluna__total { color: var(--ok); font-weight: 600; }
.coluna__cards { flex: 1; overflow-y: auto; padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }

.card-lead { background: var(--superficie); border: 1px solid var(--linha); border-radius: 11px; padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; cursor: grab; box-shadow: 0 1px 2px rgba(23, 23, 26, .05); transition: border-color .15s, box-shadow .15s; user-select: none; }
.card-lead:hover { border-color: var(--ouro); box-shadow: 0 6px 16px rgba(23, 23, 26, .08); }
.card-lead:focus-visible { outline: 2px solid var(--ouro); }
.card-lead__topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-lead__nome { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-lead__proc { font-size: .78rem; color: var(--tinta-2); }
.card-lead__linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-lead__valor { font-weight: 700; font-size: .9rem; }
.card-lead__origem { font-size: .68rem; color: var(--mudo); text-align: right; }
.card-lead__pe { display: flex; align-items: center; gap: 5px; font-size: .7rem; color: var(--mudo); flex-wrap: wrap; border-top: 1px solid var(--linha-2); padding-top: 6px; margin-top: 2px; }
.card-lead__pe .ico { width: 13px; height: 13px; }
.card-lead__pe--alerta { color: var(--alerta); font-weight: 600; }
.card-lead--parado { border-left: 3px solid #d39a3a; }
.card-lead__motivo { margin-left: auto; font-size: .66rem; background: #f4e4e2; color: #8f2b22; border-radius: 999px; padding: 2px 7px; font-weight: 600; }
.card-lead--fantasma { opacity: .35; background: var(--ouro-fundo); border-style: dashed; }
.card-lead--pego { border-color: var(--ouro); }
.card-lead--arrastando { box-shadow: 0 16px 34px rgba(0, 0, 0, .22); transform: rotate(1.5deg); cursor: grabbing; }

@media (max-width: 760px) {
  .coluna { flex-basis: 78vw; max-width: 290px; max-height: none; }
  .funil-topo__resumo { width: 100%; }
}