/* ============================================================
   Melhor Passagem · CRM — Camada FLUXO (opt-in, aditiva)
   ------------------------------------------------------------
   Um contorno tracejado que se solta do botão e corre em volta
   dele enquanto o mouse está em cima. É a ideia do
   @spell/flow-button reescrita aqui: nada de React, nada de
   Tailwind, nada de @radix-ui/react-slot.

   Duas diferenças de propósito em relação ao original:

   1. O original mede o botão com offsetWidth e redesenha um
      <path> em pixels. Qualquer coisa que mude a largura sem
      mudar o texto (fonte que carrega depois, celular, tradução)
      deixa o traçado fora de lugar, porque não há ResizeObserver.
      Aqui o traço é um <rect> de width/height 100%: quem mede é
      o próprio SVG, a cada frame, de graça. Não existe JS de
      medida para desalinhar.

   2. O original desliga o clique do bloco inteiro
      (pointer-events:none no pai) e devolve só no botão. Aqui o
      botão não é tocado: só o SVG é transparente ao mouse. Se
      este arquivo sumir, o botão continua sendo o mesmo botão.

   ONDE entra, e só aqui: o botão ÚNICO de um momento sem pressa
   — hoje o "Entrar" da tela de entrada. Dentro do sistema, em
   tabela, formulário e barra de ações, NÃO entra: são dezenas de
   botões por tela, e contorno correndo em todos vira ruído em
   cima de quem está trabalhando (mesma regra do ds-plasma.css e
   do ds-letreiro.css).

   Três níveis de reversão, todos instantâneos:
     1. tirar a classe `ds-fluxo` do botão no console.html;
     2. tirar o <link> deste arquivo e o <script> do ds-fluxo.js;
     3. `prefers-reduced-motion` já desliga o movimento sozinho.

   Regra da casa preservada: todo hex vive no bloco de tokens.
   ============================================================ */

@media screen {

/* ════════════════════════════════════════════════════════════
   TOKENS — por instância, então dois botões na mesma tela podem
   ter cor, raio e velocidade diferentes sem brigar.

   --ds-fluxo-raio é o único que precisa de atenção: é o
   border-radius DO BOTÃO, que o traço não tem como adivinhar
   sozinho (ele é um retângulo desenhado por fora). Default
   999px (pílula, que é o botão .acao da casa); sob .ds-advanced
   os botões são de canto 8px e o valor é trocado mais abaixo.
   ════════════════════════════════════════════════════════════ */
.ds-fluxo {
  --ds-fluxo-cor:    rgba(7,84,242,.55);  /* azul da marca, translúcido */
  --ds-fluxo-raio:   999px;
  --ds-fluxo-folga:  5px;                 /* o quanto o traço abre no hover */
  --ds-fluxo-tempo:  1.2s;                /* uma volta do tracejado */
  position:relative;                      /* âncora do SVG; não muda layout */
}

/* tema escuro: o cartão fica escuro e o azul da marca some nele */
.ds-dark .ds-fluxo { --ds-fluxo-cor: rgba(255,255,255,.55); }

/* ════════════════════════════════════════════════════════════
   O TRAÇO — em repouso vive ENCOLHIDO para dentro do botão e
   invisível. No hover ele abre para fora e acende: a sensação é
   de contorno que se solta, não de borda que pisca.

   O SVG não tem viewBox de propósito: sem ele, "100%" no <rect>
   é o tamanho real da caixa, medido pelo navegador. É o que
   dispensa o JS de medida do original.
   ════════════════════════════════════════════════════════════ */
.ds-fluxo > .ds-fluxo-tracado {
  /* --ds-fluxo-abre: negativo = encolhido para dentro do botão;
     positivo = aberto para fora. É o que "solta" o traço no hover.

     Por que left/top/width/height em vez de um `inset` só: <svg> é
     elemento substituído, e com apenas `inset` o navegador ignora o
     esticamento e usa o tamanho intrínseco de 300x150 — o traço sai
     do tamanho de um cartão de crédito em volta de um botão de 73px.
     Medido na tela em 14/set antes de virar isto. */
  --ds-fluxo-abre:-2px;
  position:absolute;
  left:calc(-1 * var(--ds-fluxo-abre));
  top:calc(-1 * var(--ds-fluxo-abre));
  width:calc(100% + 2 * var(--ds-fluxo-abre));
  height:calc(100% + 2 * var(--ds-fluxo-abre));
  overflow:visible;          /* o stroke fica centrado na borda do rect */
  pointer-events:none;       /* o clique é do botão, sempre */
  opacity:0;
  transition:opacity .2s ease-out, left .2s ease-out, top .2s ease-out,
             width .2s ease-out, height .2s ease-out;
}
.ds-fluxo > .ds-fluxo-tracado rect {
  fill:none;
  stroke:var(--ds-fluxo-cor);
  stroke-width:1;
  stroke-dasharray:5 5;      /* 5 de risco + 5 de respiro = volta de 10 */
  /* o traço vive a --ds-fluxo-abre de distância do botão: para os dois
     ficarem concêntricos, o raio dele é o do botão MAIS essa distância
     (e menos, quando está encolhido). Sem isso o canto do traço fecha
     mais cedo que o do botão e a moldura parece torta de perto. */
  rx:calc(var(--ds-fluxo-raio) + var(--ds-fluxo-abre));
  ry:calc(var(--ds-fluxo-raio) + var(--ds-fluxo-abre));
}

.ds-fluxo:hover        > .ds-fluxo-tracado,
.ds-fluxo:focus-visible > .ds-fluxo-tracado,
.ds-fluxo.ds-fluxo-aceso > .ds-fluxo-tracado {   /* .ds-fluxo-aceso: só para conferir na tela */
  opacity:1;
  --ds-fluxo-abre:var(--ds-fluxo-folga);
}
.ds-fluxo:hover         > .ds-fluxo-tracado rect,
.ds-fluxo:focus-visible > .ds-fluxo-tracado rect,
.ds-fluxo.ds-fluxo-aceso > .ds-fluxo-tracado rect {
  animation:ds-fluxo-corre var(--ds-fluxo-tempo) linear infinite;
}

/* botão desligado não convida a nada */
.ds-fluxo:disabled > .ds-fluxo-tracado { opacity:0 !important; }

@keyframes ds-fluxo-corre {
  to { stroke-dashoffset:-10; }   /* exatamente uma volta do dasharray */
}

/* ════════════════════════════════════════════════════════════
   CANTO QUADRADO — o visual novo (ds-advanced) usa botões de
   raio 8px; o traço acompanha.
   ════════════════════════════════════════════════════════════ */
.ds-advanced .ds-fluxo,
body.ds-advanced .ds-fluxo { --ds-fluxo-raio:8px; }

/* ════════════════════════════════════════════════════════════
   MENOS ANIMAÇÃO — quem pediu isso no sistema continua vendo o
   contorno acender no hover (é informação: "isto é clicável"),
   só que parado. Nada corre.
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* o traço acende no lugar, sem o gesto de abrir */
  .ds-fluxo > .ds-fluxo-tracado { transition:opacity .2s ease-out; --ds-fluxo-abre:var(--ds-fluxo-folga); }
  .ds-fluxo:hover         > .ds-fluxo-tracado rect,
  .ds-fluxo:focus-visible > .ds-fluxo-tracado rect,
  .ds-fluxo.ds-fluxo-aceso > .ds-fluxo-tracado rect { animation:none; }
}

} /* @media screen */

/* ════════════════════════════════════════════════════════════
   PAPEL — fatura, bilhete, voucher e roteiro saem do CRM por
   aqui. Nada de traço na impressão (e sem `screen` na regra de
   cima isto já mordeu a fatura antes).
   ════════════════════════════════════════════════════════════ */
@media print {
  .ds-fluxo-tracado { display:none !important; }
}