/* ════════════ CARD WIZARD — o carrossel de cards com arraste ═════════════
   ⚠️ **SAIU DO `app.css` EM 31/08/2026** porque o wizard passou a ser usado no
   HUB (a tela `/minha-assinatura`, que serve aos dois papéis) — e o hub não
   carrega o `app.css`. Enquanto isto morava lá, pôr um wizard numa tela do hub
   dava um carrossel SEM ESTILO: painéis empilhados, abas sem cara de aba.

   ⚠️ O `base.html` (silo) linka este arquivo, então nada mudou de lá. Tela do
   hub que use o wizard precisa linkar isto E o `js/card_wizard.js` — os dois,
   que no silo são globais.

   Componente: `static/js/card_wizard.js`. Ver a memória ref_card_wizard_component. */

/* ── Card Wizard reutilizável (swipe de cards) — ver static/js/card_wizard.js ──
   Espelha o switcher do PDV (.pdv-*) num namespace genérico .wiz-* pra reuso
   em Transporte, Produção etc. */
/* ⚠️ **OS TOKENS TÊM FALLBACK EM CADEIA, e isso não é preciosismo.** Este
   componente nasceu dentro do `app.css` e usava `--brand-grad`, `--text`,
   `--primary`… que só existem lá. Levado pro HUB (que tem `--grad`, `--ink`,
   `--teal`), a aba ATIVA saiu branca: fundo de gradiente inexistente + texto
   branco = rótulo invisível. Pilar que só funciona numa casa não é pilar.
   Ordem: token do app → token do hub → literal. */

.wiz-wizard { padding: 0; overflow: visible; }
/* ⚠️ `align-items: center` não é decoração: sem ele os botões esticam (o
   `stretch` padrão do flex) e QUALQUER diferença de conteúdo — um rótulo mais
   longo, um contador a mais — muda a altura de uma aba e não das outras. A
   faixa fica com um degrau no meio: *"por que essa aba saiu tão abaixo do nível
   das outras?"* (Marcos, 01/09/2026). Todas as abas têm a mesma altura porque
   todas são a mesma coisa. */
.wiz-switch {
  display: flex; align-items: center; gap: 6px; padding: 12px; border-bottom: 1px solid var(--line, #e6ebf0);
  background: linear-gradient(180deg, #f8fbfc, #fff); border-radius: var(--radius, 14px) var(--radius, 14px) 0 0;
  position: sticky; top: 0; z-index: 6; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.wiz-switch button {
  flex: 1 1 0; min-width: max-content; border: 1px solid var(--line, #e6ebf0); background: #fff;
  color: var(--text-muted, #627385); border-radius: 10px; padding: 9px 12px; font-weight: 700;
  font-size: .85rem; cursor: pointer; white-space: nowrap; display: flex; align-items: center;
  justify-content: center; gap: 7px; transition: background .15s, color .15s, border-color .15s;
}
.wiz-switch button:hover { color: var(--text, var(--ink, #1b2733)); }
.wiz-switch button[aria-selected="true"] { background: var(--brand-grad, var(--grad, linear-gradient(135deg,#8fcb3a,#11adb4))); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(17,173,180,.22); }
.wiz-step-num {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: #eef2f6; color: #627385;
  font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
}
.wiz-switch button[aria-selected="true"] .wiz-step-num { background: rgba(255,255,255,.28); color: #fff; }
.wiz-viewport { position: relative; overflow: hidden; }
[data-wizard-viewport] { position: relative; }
/* overflow só quando o wizard está "engajado" (gate por media) — assim um kanban
   pode ser swipe no mobile e voltar a rolar horizontalmente no desktop. */
[data-wizard-viewport].wiz-vp-engaged { overflow: hidden; }
[data-wizard-viewport].wiz-animating { transition: height .28s ease; }
/* desktop de um wizard mobile-only (data-wizard-media): esconde as abas */
.wiz-disengaged > [data-wizard-switch] { display: none; }
.wiz-panel { padding: 18px 20px; }
.wiz-panel[hidden] { display: none; }
[data-wizard-panel] { touch-action: pan-y; }              /* horizontal = swipe; vertical = rolagem */
[data-wizard-panel] .table-wrap { touch-action: auto; }   /* tabelas largas rolam sozinhas */
/* estados de arraste/transição standalone — funcionam com qualquer classe de
   painel (.wiz-panel do Transporte/Produção ou .pdv-panel do PDV migrado) */
.wiz-drag { z-index: 1; will-change: transform, opacity; }
.wiz-incoming { position: absolute; top: 0; left: 0; width: 100%; z-index: 2; display: block !important; will-change: transform, opacity; }
[data-wizard].wiz-grabbing, [data-wizard].wiz-grabbing * { cursor: grabbing; user-select: none; }
.wiz-panel .section-head { margin-top: 0; }
.wiz-panel-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }
.wiz-panel-nav.end { justify-content: flex-end; }
.wiz-panel-nav .wiz-prev { color: var(--text-muted, #627385); border: 1px solid var(--line, #e6ebf0); background: #fff; font-weight: 600; }
.wiz-panel-nav .wiz-prev:hover { color: var(--text, var(--ink, #1b2733)); }
.wiz-panel-nav .wiz-next { box-shadow: 0 8px 20px rgba(17,173,180,.22); }
/* dica (hint) no topo de cada card do wizard */
.wiz-hint { margin: 0 0 14px; font-size: .82rem; color: var(--text-muted, #627385);
  background: #f3f8f9; border: 1px solid var(--line, #e6ebf0); border-left: 3px solid var(--primary, #11ADB4);
  border-radius: 8px; padding: 8px 11px; line-height: 1.35; }
@keyframes wizSlideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes wizSlideInLeft  { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
.wiz-anim-right { animation: wizSlideInRight .26s ease; position: relative; z-index: 2; }
.wiz-anim-left  { animation: wizSlideInLeft .26s ease; position: relative; z-index: 2; }
/* painel que SAI na troca por clique/aba: overlay absoluto deslizando pro lado —
   crossfade com o que entra; sem ele o viewport ficava em BRANCO ~130ms (flash) */
.wiz-leaving { position: absolute; top: 0; left: 0; width: 100%; z-index: 1;
  pointer-events: none; will-change: transform, opacity; }
@keyframes wizSlideOutLeft  { to { opacity: 0; transform: translateX(-36px); } }
@keyframes wizSlideOutRight { to { opacity: 0; transform: translateX(36px); } }
.wiz-leave-left  { animation: wizSlideOutLeft .26s ease forwards; }
.wiz-leave-right { animation: wizSlideOutRight .26s ease forwards; }
@media (prefers-reduced-motion: reduce) { .wiz-anim-right, .wiz-anim-left, .wiz-leave-left, .wiz-leave-right { animation: none; } }
@media (max-width: 680px) {
  .wiz-switch { gap: 4px; padding: 8px; }
  .wiz-switch button { font-size: .76rem; padding: 8px 9px; gap: 5px; }
  .wiz-panel { padding: 14px; }
}