/* Painel · Kanban do funil (usa os tokens de admin.css) */
.kanban{
  --k-coluna:var(--bg-2);
  --k-alerta-fundo:rgba(233,178,96,.14); --k-alerta-borda:rgba(233,178,96,.55);
}
:root[data-tema="claro"] .kanban{
  --k-coluna:var(--elev);
  --k-alerta-fundo:rgba(176,122,22,.10); --k-alerta-borda:rgba(176,122,22,.55);
}

.kanban-filtros{margin-bottom:10px}
.kanban-erro{margin-bottom:12px; padding:10px 12px; border-radius:var(--raio-sm); font-size:13.5px; color:var(--erro-texto);
  background:rgba(229,140,133,.1); border:1px solid rgba(229,140,133,.35)}
.kanban-dica{margin-bottom:14px}

/* atalhos para as colunas: resumo de cada etapa e, no celular, o jeito rápido de chegar nela */
.kanban-atalhos{position:relative; display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.kanban-atalhos .botao{flex:none; gap:6px}
.kanban-atalho-n{font-size:12px; font-weight:600; color:var(--ink-soft); font-variant-numeric:tabular-nums}

/* ── quadro: rola na horizontal por dentro, nunca a página ──
   position:relative nas áreas que rolam: o texto só para leitor de tela (.sr-only,
   absoluto) fica preso a elas em vez de esticar a página */
.kanban-quadro{position:relative; display:flex; align-items:flex-start; gap:14px; overflow-x:auto; overscroll-behavior-x:contain; padding:2px 2px 16px; max-width:100%}
.kanban-quadro[aria-busy="true"]{opacity:.75; transition:opacity .2s ease}

.kanban-coluna{flex:0 0 288px; min-width:0; display:flex; flex-direction:column; background:var(--k-coluna); border:1px solid var(--border);
  border-top:3px solid var(--cor-etapa, var(--gold)); border-radius:var(--raio); transition:background-color .12s ease, box-shadow .12s ease}
.kanban-coluna--alvo{box-shadow:inset 0 0 0 2px var(--acento)}
.kanban-coluna-topo{display:flex; align-items:center; gap:8px; padding:12px 14px 8px}
.kanban-coluna-topo h2{flex:1; min-width:0; font:600 14.5px/1.3 var(--sans); color:var(--ink); overflow-wrap:anywhere; border-radius:4px}
/* o título recebe o foco do atalho "Ir para a coluna" e do "Mostrar mais" (tabindex=-1) */
.kanban-coluna-topo h2:focus:not(:focus-visible){outline:none}
.kanban-contagem{min-width:26px; padding:1px 8px; border-radius:999px; text-align:center; font-size:12px; font-weight:600; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--border-2); font-variant-numeric:tabular-nums}
.kanban-coluna-avisos{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:0 14px 8px}
.kanban-recorte{font-size:12px; color:var(--ink-dim)}

.kanban-lista{position:relative; list-style:none; margin:0; padding:2px 10px 12px; display:flex; flex-direction:column; gap:10px; overflow-y:auto}
.kanban-item{min-width:0}
.kanban-vazia{margin:0 10px 12px; padding:22px 10px; border:1px dashed var(--border-2); border-radius:var(--raio-sm); text-align:center; font-size:13px; color:var(--ink-dim)}
.kanban-mais{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; padding:0 14px 12px; font-size:12.5px; color:var(--ink-soft)}

/* ── cartão ── */
.kanban-cartao{display:flex; flex-direction:column; gap:9px; padding:12px; border-radius:var(--raio-sm); background:var(--surface); border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,.12); transition:border-color .12s ease, opacity .12s ease}
.kanban-cartao:hover{border-color:var(--border-2)}
.kanban-cartao:focus-within{border-color:var(--borda-campo)}
.kanban-cartao.arrastando{opacity:.45}
.kanban-cartao--parado{border-color:var(--k-alerta-borda); box-shadow:inset 3px 0 0 var(--alerta)}
@media (hover:hover) and (pointer:fine){ .kanban-cartao{cursor:grab} .kanban-cartao:active{cursor:grabbing} }

.kanban-abrir{display:flex; align-items:center; gap:10px; width:100%; min-width:0; min-height:40px; padding:0; border:0; background:none; text-align:left; cursor:pointer; color:inherit; border-radius:var(--raio-sm)}
.kanban-ident{display:flex; flex-direction:column; min-width:0}
.kanban-nome{font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kanban-sub{font-size:12px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kanban-abrir:hover .kanban-nome{text-decoration:underline; text-underline-offset:3px}

.kanban-selos{display:flex; flex-wrap:wrap; gap:5px; min-width:0}
.kanban-selos .etiqueta{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.kanban-tempo{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft)}
.kanban-tempo svg{flex:none}
.kanban-alerta{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; max-width:100%; padding:3px 9px; border-radius:999px;
  font-size:12.5px; font-weight:600; color:var(--ink); background:var(--k-alerta-fundo); border:1px solid var(--k-alerta-borda)}
.kanban-alerta svg{color:var(--alerta); flex:none}
.kanban-alerta--sm{padding:1px 8px; font-size:12px}
.kanban-prazo{font-weight:500; color:var(--ink-2)}
.kanban-motivo{font-size:12.5px; color:var(--ink-soft); overflow-wrap:anywhere}

.kanban-rodape{display:flex; align-items:center; gap:6px; padding-top:9px; border-top:1px solid var(--border); cursor:default}
.kanban-resp{display:inline-grid; place-items:center; flex:none; margin-right:auto}
.kanban-resp .avatar{width:28px; height:28px; font-size:11px}
.kanban-resp--vazio{width:28px; height:28px; border-radius:50%; border:1.5px dashed var(--borda-campo)}
.kanban-mover svg{width:15px; height:15px}

/* ── janela "Mover" ── */
.kanban-mover-ajuda{margin-bottom:12px}
.kanban-destinos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:min(52vh, 420px); overflow-y:auto}
.kanban-destino{width:100%; justify-content:flex-start; min-height:44px; text-align:left; white-space:normal}
.kanban-destino-nome{flex:1}
.kanban-destino-atual{font-size:12px; color:var(--ink-soft)}
.kanban-destino:disabled{opacity:1; cursor:default; background:var(--gold-wash); border-color:var(--gold-line)}

/* ── gaveta "Editar etapas" ── */
.kanban-gaveta{gap:16px}
.kanban-etapas{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.kanban-etapa fieldset{margin:0; padding:14px; min-width:0; border:1px solid var(--border); border-left:4px solid var(--cor-etapa, var(--gold)); border-radius:var(--raio-sm); background:var(--surface)}
.kanban-etapa legend{display:flex; align-items:center; gap:8px; padding:0 6px; font-weight:600; color:var(--ink)}
.kanban-etapa-campos{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-bottom:8px}
.kanban-campo-cor{flex:none}
.kanban-campo-cor input{display:block; width:52px; height:40px; padding:3px; border-radius:var(--raio-sm); border:1px solid var(--borda-campo); background:var(--bg-2); cursor:pointer}
.kanban-campo-nome{flex:1 1 180px; min-width:0}
.kanban-campo-prazo{flex:0 1 130px; min-width:110px}
.kanban-etapa .ajuda{margin-bottom:10px; color:var(--ink-soft)}
.kanban-etapa-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.kanban-etapa-acoes .botao--icone{width:36px}
.kanban-subir svg{rotate:-90deg}
.kanban-descer svg{rotate:90deg}
.kanban-apagar{margin-left:auto}
.kanban-nova{display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:var(--raio-sm); border:1px dashed var(--border-2)}
.kanban-nova h3{font:600 15px/1.3 var(--sans); color:var(--ink)}
.kanban-confirmar{color:var(--ink-soft)}

/* mesa: cada coluna rola por dentro e o quadro cabe na tela */
@media (min-width:861px){
  .kanban-lista{max-height:max(320px, calc(100svh - 300px))}
}

/* celular e tablet: colunas quase da largura da tela, encaixando ao rolar.
   O quadro vai de borda a borda (max-width:none deixa a margem negativa valer
   dos dois lados) e cada coluna rola por dentro, como no computador: assim uma
   coluna longa não estica a página e as outras não ficam lá em cima, fora da tela */
@media (max-width:860px){
  .kanban-quadro{margin-inline:-14px; padding-inline:14px; max-width:none; scroll-snap-type:x mandatory; scroll-padding-inline:14px; gap:12px}
  .kanban-coluna{flex-basis:min(84vw, 330px); scroll-snap-align:start}
  .kanban-lista{max-height:max(240px, calc(100svh - 250px))}
  .kanban-atalhos{flex-wrap:nowrap; overflow-x:auto; margin:0 -14px 12px; padding:2px 14px 6px; scrollbar-width:none}
  .kanban-atalhos::-webkit-scrollbar{display:none}
  .kanban-dica{display:none}
}

/* toque: alvos com pelo menos 44px */
@media (pointer:coarse){
  .kanban-abrir{min-height:44px}
  .kanban-cartao .botao{min-height:44px; min-width:44px}
  .kanban-etapa-acoes .botao--icone{width:44px; height:44px}
  .kanban-campo-cor input{height:44px; width:56px}
}
@media (prefers-reduced-motion:reduce){ .kanban-quadro, .kanban-atalhos{scroll-behavior:auto} }