/* ============================================================================
   kanban-cor.css — leitura do funil por cor.

   O problema que resolve: com todas as colunas cinzas, saber "onde está o
   dinheiro" exigia ler cada título e cada total. A cor da etapa (configurada em
   Funis, ou derivada da posição quando não há uma) agora aparece em quatro
   lugares — faixa do topo, tinta do fundo, contador e barra do card —, e o
   quadro passa a ter uma direção visível: frio à esquerda, quente à direita.

   Regra que mantém isso legível: a cor **orienta**, não decora. Toda tinta fica
   em opacidade baixa (`color-mix` com o fundo) para o texto continuar com
   contraste de leitura; nada aqui depende de distinguir matizes para funcionar,
   porque quantidade e valor continuam escritos por extenso.
   ========================================================================== */

.kanban-coluna {
  --cor-etapa: var(--zera);
  position: relative;
  /* fundo levemente tingido: 6% já dá pertencimento sem competir com os cards */
  background: color-mix(in srgb, var(--cor-etapa) 6%, var(--bg-afundado));
  border-color: color-mix(in srgb, var(--cor-etapa) 22%, var(--linha));
  overflow: hidden;
}

/* faixa no topo da coluna — a leitura mais rápida do quadro */
.kanban-coluna::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(
    90deg,
    var(--cor-etapa),
    color-mix(in srgb, var(--cor-etapa) 45%, transparent)
  );
  z-index: 3;
}

.kanban-coluna-topo {
  background: color-mix(in srgb, var(--cor-etapa) 8%, var(--bg-afundado));
  border-bottom-color: color-mix(in srgb, var(--cor-etapa) 26%, var(--linha));
}

.kanban-bolinha {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-etapa) 18%, transparent);
}

/* contador da coluna: herda a cor da etapa, mas escurecida até ter contraste de
   texto. `color-mix` com o ink garante isso mesmo em etapa clara (amarelo). */
.tag-etapa {
  background: color-mix(in srgb, var(--cor-etapa) 16%, var(--bg-elevado));
  color: color-mix(in srgb, var(--cor-etapa) 45%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--cor-etapa) 30%, transparent);
  font-variant-numeric: tabular-nums;
}

/* barra lateral do card na cor da etapa: quando o card é arrastado para outra
   coluna, a barra muda junto e confirma o destino sem precisar soltar. */
.kanban-coluna .kanban-card {
  border-left: 3px solid color-mix(in srgb, var(--cor-etapa) 55%, var(--linha));
}
.kanban-coluna .kanban-card:hover {
  border-color: color-mix(in srgb, var(--cor-etapa) 62%, var(--linha));
  border-left-color: var(--cor-etapa);
}

/* alvo de soltar: a coluna inteira reage, não só o espaço vazio. Antes, a única
   pista era o tracinho do placeholder — fácil de perder de vista arrastando. */
.kanban-coluna.alvo {
  background: color-mix(in srgb, var(--cor-etapa) 13%, var(--bg-afundado));
  border-color: var(--cor-etapa);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-etapa) 40%, transparent);
}
.kanban-placeholder {
  border-color: var(--cor-etapa);
  background: color-mix(in srgb, var(--cor-etapa) 14%, transparent);
}

/* sinais de atenção continuam vermelhos/âmbar em qualquer coluna: urgência não
   pode ser reinterpretada pela cor da etapa. */
.sinal-atrasado, .sinal-parado { position: relative; z-index: 1; }

/* Etapa de fechamento ganha peso extra: é a coluna que o time olha primeiro. */
.kanban-coluna.etapa-ganho { --cor-etapa: var(--ok); }
.kanban-coluna.etapa-perda { --cor-etapa: var(--erro); }
.kanban-coluna.etapa-ganho .kanban-titulo,
.kanban-coluna.etapa-perda .kanban-titulo { font-weight: 700; }

/* ---------------------------------------------------------------- fallback
   `color-mix` tem suporte amplo desde 2023, mas se faltar, tudo acima vira
   declaração inválida e o kanban volta ao cinza — legível, só sem a leitura por
   cor. Estas regras garantem que a faixa e a bolinha continuem existindo. */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .kanban-coluna { background: var(--bg-afundado); }
  .kanban-coluna-topo { background: var(--bg-afundado); }
  .tag-etapa { background: var(--bg-afundado); color: var(--txt-suave); }
  .kanban-coluna .kanban-card { border-left: 3px solid var(--linha-forte); }
}

@media (prefers-reduced-motion: reduce) {
  .kanban { scroll-behavior: auto; }
}