/* Funil de vendas (kanban): usa as variáveis de cor do Index.html, então segue o tema e a cor de destaque */
.fn-quadro { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px, 1fr); gap:12px; overflow-x:auto; padding-bottom:10px; align-items:start; }
.fn-col { background:var(--soft); border:1px solid var(--bd); border-radius:14px; display:flex; flex-direction:column; max-height:calc(100vh - 260px); min-height:160px; }
.fn-col.alvo { outline:2px dashed var(--ac); outline-offset:-4px; }
.fn-cab { padding:10px 12px 8px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--bd); }
.fn-cab b { font-family:var(--display); font-size:14px; }
.fn-cab .n { margin-left:auto; font-size:12px; font-weight:700; color:var(--mut); }
.fn-cab .pz { font-size:11px; color:var(--mut); }
.fn-col[data-etapa="ganho"] .fn-cab b { color:var(--good); }
.fn-col[data-etapa="perdido"] .fn-cab b { color:var(--err); }
.fn-lista { padding:8px; overflow:auto; display:flex; flex-direction:column; gap:8px; flex:1; }
.fn-card { background:var(--card); border:1px solid var(--bd); border-radius:12px; padding:10px 11px; box-shadow:var(--shadow); cursor:grab; text-align:left; width:100%; font:inherit; color:var(--tx); }
.fn-card:hover { border-color:var(--ac); }
.fn-card:focus-visible { outline:2px solid var(--ac); outline-offset:2px; }
.fn-card.arrastando { opacity:.5; }
.fn-card.atrasado { border-left:4px solid var(--err); }
.fn-card .t { font-weight:700; font-size:13px; line-height:1.25; }
.fn-card .s { color:var(--mut); font-size:11.5px; margin-top:3px; }
.fn-card .l { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.fn-card .o { color:var(--mut); font-size:11.5px; margin-top:6px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.fn-tag { border-radius:99px; padding:1px 8px; font-size:11px; font-weight:600; background:var(--soft); color:var(--mut); white-space:nowrap; }
.fn-tag.mau { background:var(--crit-bg); color:var(--err); }
.fn-tag.alerta { background:var(--warn-bg); color:var(--warn); }
.fn-tag.bom { background:var(--good-bg); color:var(--good); }
.fn-vazio { color:var(--faint); font-size:12px; text-align:center; padding:14px 6px; }
@media (max-width:720px) { .fn-quadro { grid-auto-columns:minmax(80vw, 1fr); } .fn-col { max-height:none; } }