/* Funil e tarefas ocupam a tela; cada coluna tem sua propria rolagem. */
.casco:has(.vista-quadro){height:100dvh;min-height:0;overflow:hidden}
.casco:has(.vista-quadro) .painel{min-height:0;overflow:hidden}
.casco:has(.vista-quadro) .app-topo{flex-shrink:0}
.casco:has(.vista-quadro) .conteudo{display:flex;min-height:0;max-width:none;padding:16px 20px;overflow:hidden}
.casco:has(.vista-quadro) .lateral{height:100dvh;min-height:0;overflow:hidden}
.casco:has(.vista-quadro) .lateral-marca,
.casco:has(.vista-quadro) .lateral-fim{flex-shrink:0}
.casco:has(.vista-quadro) #nav-principal{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.vista-quadro{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;width:100%;flex:1}
.quadro-filtros{flex-shrink:0;margin:0;padding:8px;background:var(--surface);border:0;border-radius:var(--r);box-shadow:var(--e1)}
.quadro-filtros input{flex:1;min-width:140px}
.quadro-filtros select{min-width:140px;max-width:220px;flex:1}
.quadro-resumo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;min-height:30px;font-size:var(--fs-xs);color:var(--ink-3)}
.quadro-resumo strong{color:var(--ink);font-weight:var(--fw-semibold)}
.quadro-separador{margin:0 8px;color:var(--ink-4)}
.quadro-navegacao{display:flex;align-items:center;gap:6px;flex-shrink:0}
.quadro-dica{font-size:var(--fs-xs);color:var(--ink-3);margin-right:5px}
/* atalho por estagio: o estagio vira ponto de 6px (o filete de cor fica so no topo da coluna) */
.funil-etapas{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;flex-shrink:0}
.funil-etapa-mobile{display:none;flex-shrink:0}
.funil-etapa{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;min-height:40px;padding:6px 10px;border:0;border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--e1);color:var(--ink-2);text-align:left;font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:1.3;transition:background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.funil-etapa span{overflow-wrap:anywhere;display:flex;align-items:center;gap:7px}
.funil-etapa span::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cor,var(--ink-4));flex:none}
.funil-etapa b{font-size:var(--fs-xs);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;color:var(--ink)}
.funil-etapa:hover{background:var(--surface-2);box-shadow:0 0 0 1px var(--line-strong)}
.funil-etapa.visivel{background:var(--surface-2);box-shadow:0 0 0 1px var(--line-strong)}
.vista-quadro .kanban,.vista-quadro .quadro-tarefas{flex:1;min-height:0;min-width:0;align-items:stretch;gap:12px;overflow-x:auto;overflow-y:hidden;padding:0 0 4px;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.vista-quadro .kanban{grid-auto-columns:calc((100% - 36px)/4)}
.vista-quadro .quadro-tarefas{grid-template-columns:repeat(3,minmax(0,1fr))}
.vista-quadro .coluna,.vista-quadro .coluna-tarefas{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;padding:0;border-radius:var(--r);border-top:1px solid var(--line);scroll-snap-align:start}
.vista-quadro .col-cab,.vista-quadro .coluna-tarefas .cab{padding:12px 12px 4px;margin:0;flex-shrink:0}
.vista-quadro .col-nome,.vista-quadro .coluna-tarefas .cab .n{font-size:var(--fs-sm);text-transform:none;letter-spacing:0;font-weight:var(--fw-semibold);color:var(--ink)}
.vista-quadro .coluna .col-nome{color:var(--ink) !important}
.vista-quadro .coluna .col-nome::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--cor)}
.vista-quadro .col-qtd,.vista-quadro .coluna-tarefas .cab .q{color:var(--ink-2);background:var(--surface);box-shadow:var(--e1);min-width:22px;text-align:center}
.vista-quadro .col-val{padding:0 12px 10px;margin:0;font-size:var(--fs-xs);flex-shrink:0}
.vista-quadro .coluna-tarefas .cab{min-height:48px;padding-bottom:12px;flex-wrap:wrap}
.vista-quadro .coluna-tarefas .cab .n::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cor);margin-right:7px;vertical-align:1px}
.coluna-lista{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;padding:4px 6px 8px 10px;border-top:1px solid var(--line-soft)}
.coluna-lista:focus-visible{outline-offset:-2px}
.vista-quadro .cartao-conta{padding:11px;margin-bottom:8px}
.vista-quadro .cartao-conta .nome{font-size:var(--fs-sm);line-height:1.35;overflow-wrap:anywhere}
.vista-quadro .cartao-conta .linha{gap:5px;margin-top:8px}
.vista-quadro .cartao-conta .tag{font-size:var(--fs-2xs);padding:0 6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vista-quadro .cartao-conta .val{margin-top:8px;font-size:var(--fs-sm)}
.vista-quadro .cartao-conta .acao{margin-top:8px;padding-top:8px;font-size:var(--fs-xs)}
.vista-quadro .cartao-conta .acao > span{min-width:0}
.vista-quadro .cartao-conta .nome[role=button]:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
.vista-quadro .quadro-mover{display:block;width:100%;min-height:44px;margin-top:10px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:var(--fs-xs);cursor:pointer}
.vista-quadro .quadro-mover:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.vista-quadro .quadro-mover:disabled{opacity:.6;cursor:wait}
.vista-quadro .item-tarefa{padding:11px;gap:8px;border-radius:var(--r-sm);flex-wrap:wrap}
.vista-quadro .item-tarefa .quadro-mover{flex:0 0 100%;margin-top:2px}
.vista-quadro .item-tarefa .tt{font-size:var(--fs-sm);line-height:1.4;overflow-wrap:anywhere}
.vista-quadro .item-tarefa .tt,.vista-quadro .cartao-conta .nome{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.vista-quadro .item-tarefa .meta{gap:5px;font-size:var(--fs-xs)}
.vista-quadro .item-tarefa .meta .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vista-quadro .item-tarefa.feita{opacity:.72}
.quadro-vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:32px 12px;color:var(--ink-3);font-size:var(--fs-xs);min-height:150px}
.quadro-vazio > .ic{width:24px;height:24px;color:var(--ink-4);margin-bottom:3px}
.quadro-vazio strong{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink-2)}
.quadro-resumo .segmentado{flex-shrink:0}
.quadro-atalhos{display:flex;align-items:center;gap:2px;padding:2px;background:var(--surface-3);border:0;border-radius:var(--r-sm)}
.quadro-atalho{display:flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:var(--r-xs);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink-3);white-space:nowrap}
.quadro-atalho span{font-size:var(--fs-2xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.quadro-atalho:hover{color:var(--ink)}
.quadro-atalho.ativo{background:var(--surface-raised);color:var(--ink);box-shadow:0 0 0 1px var(--line),var(--sombra-1)}
.quadro-atalho.ativo span{color:var(--brand)}
.quadro-acao{margin-left:auto}
.tarefas-etapas{display:none;flex-shrink:0;gap:6px}
.tarefa-etapa{flex:1;display:flex;justify-content:space-between;align-items:center;gap:5px;padding:8px;border:0;box-shadow:var(--e1);border-radius:var(--r-sm);background:var(--surface);font-size:var(--fs-xs);font-weight:var(--fw-medium);min-width:0}
.tarefa-etapa:hover,.tarefa-etapa.ativo{box-shadow:0 0 0 1px var(--brand);background:var(--brand-soft);color:var(--brand)}
.tarefa-etapa span,.tarefa-etapa b{font-size:var(--fs-2xs);font-variant-numeric:tabular-nums}
@media(max-width:1279px){
  .vista-quadro .kanban{grid-auto-columns:calc((100% - 24px)/3)}
  .quadro-filtros select{max-width:190px}
  .funil-etapa{padding:6px 8px;font-size:var(--fs-2xs);gap:4px}
}
@media(max-width:760px){
  .casco:has(.vista-quadro) .conteudo{padding:12px}
  .quadro-filtros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:8px}
  .quadro-filtros input,.quadro-filtros select{min-width:0;max-width:none;width:100%;font-size:var(--fs-xs)}
  .vista-quadro input,.vista-quadro select,.vista-quadro .quadro-mover{font-size:16px}
  .quadro-filtros .btn{margin-left:0 !important}
  .vista-quadro .kanban{grid-auto-columns:calc((100% - 12px)/2)}
  .vista-quadro .quadro-tarefas{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:85%}
  .tarefas-etapas{display:flex}
  .funil-etapas{display:none}
  .funil-etapa-mobile{display:block;height:36px;font-size:var(--fs-xs)}
  .funil-etapa{flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:56px;font-size:var(--fs-2xs);padding:6px}
  .quadro-resumo{font-size:var(--fs-2xs);gap:6px;flex-wrap:wrap}
  .quadro-dica{display:none}
  .quadro-separador{margin:0 4px}
}
@media(max-width:480px){
  .vista-quadro{gap:9px}
  .vista-quadro .kanban{grid-auto-columns:88%}
  .quadro-resumo .segmentado button{padding:0 8px;font-size:var(--fs-2xs)}
  .quadro-atalho{padding:0 7px;font-size:var(--fs-2xs);gap:5px}
}
@media(max-height:560px){
  .casco:has(.vista-quadro) .conteudo{overflow-y:auto}
  .vista-quadro{min-height:380px}
}
@media(max-width:1000px){
  .casco:has(.vista-quadro):has(.barra-mobile) .conteudo{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .vista-quadro *{scroll-behavior:auto !important}
}
/* No celular, as listas acompanham a rolagem da pagina. */
@media(max-width:860px){
  .casco:has(.vista-quadro){height:auto;min-height:100dvh;overflow:visible}
  .casco:has(.vista-quadro) .painel{overflow:visible}
  .casco:has(.vista-quadro) .conteudo{display:block;overflow:visible}
  .vista-quadro{flex:none;min-height:0}
  .vista-quadro .kanban,.vista-quadro .quadro-tarefas{flex:none;min-height:0;align-items:start;overflow-y:auto}
  .vista-quadro .coluna,.vista-quadro .coluna-tarefas{height:auto;overflow:visible}
  .vista-quadro .coluna-lista{flex:none;overflow:visible;overscroll-behavior:auto;scrollbar-gutter:auto}
  .vista-quadro .cartao-conta .nome,.vista-quadro .item-tarefa .tt{display:block;overflow:visible;-webkit-line-clamp:unset}
}