/* ═══════════════════════════════════════════════════════════════════════════
   @versao_deploy 2026-10-08-j-o-quadro-e-o-pipeline-da-central
   board_arrasto.css — o visual do arrasto de um board de colunas.
   F2, 08/10/2026 · destino: ASTIONSAGA/css/board_arrasto.css (partilhado, da RAIZ)
   🔗 Par acoplado com /js/board_arrasto.js — sobem juntos ou não sobem.

   🔴 PORQUE ESTE ARQUIVO EXISTE: no Selo, estas três regras são **injectadas por JavaScript**
      em runtime (`base_selo.js:8494`, `iniciarTrelloDnDStyles`). Medi a árvore: **24 arquivos
      JS** fazem `createElement('style')` — é um padrão espalhado, contra a régua «nada de
      código inline», e está na dívida nomeada pelo regente.
   🔑🔑 ***Uma regra injectada por JS obedece aos tokens exactamente como esta — e nenhum QA de
      tema a encontra, porque quem varre os temas varre os `.css`.*** O ganho deste arquivo não
      é o browser aplicá-la melhor: é ela passar a ser revisável.

   🎨 TOKENS: as cores vêm das variáveis da casa, com fallback. O fallback existe para o caso de
      o módulo ser carregado numa página que não declare os tokens — e é laranja da casa, não
      um azul de browser.
   🔑 As classes levam o prefixo `ba-` (board arrasto) e **não** reutilizam as `.trello-*` do
      Selo: ele mantém as suas até migrar, e duas donas da mesma classe seria pior do que duas
      classes. *Uma classe partilhada antes de o segundo consumidor existir é uma suposição.*
   ═══════════════════════════════════════════════════════════════════════════ */

/* O cartão que se pode pegar. 🔑 `cursor: grab` é a única pista de que o gesto existe —
   sem ela, quem não souber que arrasta nunca descobre. */
.ba-pegavel {
  cursor: grab;
}

/* O cartão enquanto é arrastado. 🔑 Fica translúcido e não escondido: *quem arrasta precisa
   de ver de onde o cartão saiu para saber que pode desistir.* */
.ba-arrastando {
  opacity: .45;
  cursor: grabbing;
}

/* A coluna que receberia a largada agora.
   🔴 `outline` e NÃO `border`: um `border` acrescenta 2px à caixa e **empurra o conteúdo**, o
      que faz o board saltar a cada passagem do cursor. O `outline` desenha por fora do fluxo.
   🔑 E o `outline-offset` negativo traz o traço para dentro, senão ele é cortado pelo
      `overflow` da coluna. */
.ba-alvo {
  outline: 2px dashed var(--primary, #ff6a00);
  outline-offset: -4px;
  border-radius: 8px;
  background: var(--bg-hover, rgba(255, 106, 0, .06));
}

/* 🔞 A marca de que a largada é RECUSADA (ex.: coluna desligada). Vermelha e com o cursor a
   dizer o mesmo: *um alvo que recusa e se parece com um alvo que aceita engana duas vezes.* */
.ba-alvo-recusa {
  outline: 2px dashed var(--danger, #e5484d);
  outline-offset: -4px;
  border-radius: 8px;
  cursor: not-allowed;
}

/* ── 🔴 TOUCH: aqui o arrasto NÃO EXISTE ────────────────────────────────────
   HTML5 drag & drop não funciona em touch — `dragstart` nunca dispara num iPad. Não é um
   defeito a consertar: é a API. O caminho sem arrasto é o `<select>` de etapa no cartão, que
   é da tela.
   🔑🔑 ***O arrasto é o atalho, não o caminho*** — e esta régua existe para que o `cursor: grab`
      não prometa, num aparelho de toque, um gesto que lá não acontece. */
@media (hover: none), (pointer: coarse) {
  .ba-pegavel { cursor: default; }
}

/* ♿ Quem pediu menos movimento não leva a transição do realce. */
@media (prefers-reduced-motion: no-preference) {
  .ba-alvo, .ba-alvo-recusa { transition: outline-color .12s ease, background-color .12s ease; }
}

/* 🙏 «Tudo seja feito com decência e ordem.» — 1 Coríntios 14:40 */