/* TROCA DE ABAS SEM RECARREGAR (etapa 4, 09/11/2026) — par de static/js/troca_abas.js (incluído pelo base.html e pelo site).
   Animação padrão de TODOS os painéis: o conteúdo da aba nova entra deslizando do lado da aba clicada (.ta-entra) e um
   indicador (.ta-indicador) desliza da aba anterior até a nova. Só transform / opacity. reduced-motion = nada anima.
   O indicador só nasce no 1º clique (a página carregada fica igual à de antes). Para DESLIGAR: tirar os dois includes. */
:root {
  --ta-dur: 260ms;
  --ta-dur-indicador: 320ms;
  --ta-curva: cubic-bezier(.16, 1, .3, 1);
  --ta-desloca: 14px;
  --ta-cor: var(--brand, #008080);
  --ta-cor-2: var(--brand-darker, #006666);
  --ta-altura: 3px;
}

.ta-entra { animation: taEntra var(--ta-dur) var(--ta-curva); }
@keyframes taEntra {
  from { opacity: 0; transform: translateX(calc(var(--ta-dir, 1) * var(--ta-desloca))); }
  to { opacity: 1; transform: none; }
}

.ta-grupo { position: relative; }
.ta-indicador { position: absolute; left: 0; top: 0; width: 100px; height: var(--ta-altura); margin: 0; padding: 0; list-style: none;
  border-radius: var(--ta-altura); background: linear-gradient(90deg, var(--ta-cor-2), var(--ta-cor)); pointer-events: none;
  transform-origin: 0 0; z-index: 2; opacity: .95;
  transition: transform var(--ta-dur-indicador) var(--ta-curva), opacity var(--ta-dur) ease; }
.ta-indicador.ta-sem-transicao { transition: none; }
.ta-indicador::before, .ta-indicador::after { content: none !important; }

/* VARREDURA FINAL (09/11/2026) + pedido extra 5: na troca de aba, em DUAS FASES (duração = --vq-dur do transicoes.css):
   fase 1 (0–40%)  : selinho de vidro com o V da Vencer DESLIZA da aba anterior até a nova (.ta-chip);
   fase 2 (40–100%): abre logo abaixo da aba um rótulo de vidro com o ÍCONE + NOME da aba (.ta-rotulo .vq-destino).
   Posicionado no ponto de chegada (left/top fixos); só transform/opacity; abaixo de janelas (z-index 1040); sem clique. */
.ta-logo { position: fixed; z-index: 1040; width: 0; height: 0; pointer-events: none; }
.ta-chip { position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .75); border: 1.5px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 22px -8px rgba(0, 60, 60, .55);
  animation: taChip var(--vq-dur, 1.6s) var(--ta-curva) both; }
.ta-chip svg { width: 30px; height: auto; overflow: visible; }
.ta-logo .ta-v { fill: var(--ta-cor); }
.ta-logo .ta-arco { fill: none; stroke: var(--ouro, #f5b942); stroke-width: 5; stroke-linecap: round; }
.ta-rotulo { position: absolute; left: 0; top: 10px; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  max-width: min(340px, calc(100vw - 24px)); padding: 8px 16px 8px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .85); border: 1.5px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 14px 34px -14px rgba(0, 60, 60, .6);
  animation: taRotulo var(--vq-dur, 1.6s) var(--ta-curva) both; }
.ta-rotulo .vq-icone { width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ta-cor-2), var(--ta-cor)); color: #fff; font-size: 16px; }
.ta-rotulo .vq-nome { color: var(--ta-cor-2); font: 800 .98rem/1.2 'Poppins', system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; }
@keyframes taChip { 0% { opacity: 0; transform: translateX(var(--ta-dx, 0)) scale(.6); }
  8% { opacity: 1; transform: translateX(var(--ta-dx, 0)) scale(1); }
  30% { opacity: 1; transform: translateX(0) scale(1.12) rotate(-8deg); }
  36% { transform: translateX(0) scale(1) rotate(0); }
  44% { opacity: 0; transform: translateY(16px) scale(.5); } 100% { opacity: 0; transform: translateY(16px) scale(.5); } }
@keyframes taRotulo { 0%, 36% { opacity: 0; transform: translateX(calc(-50% + var(--ta-rx, 0px))) translateY(-8px) scale(.7); }
  46% { opacity: 1; transform: translateX(calc(-50% + var(--ta-rx, 0px))) scale(1.03); }
  52% { transform: translateX(calc(-50% + var(--ta-rx, 0px))) scale(1); }
  88% { opacity: 1; transform: translateX(calc(-50% + var(--ta-rx, 0px))) scale(1); }
  100% { opacity: 0; transform: translateX(calc(-50% + var(--ta-rx, 0px))) translateY(8px) scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  .ta-logo { display: none !important; }
  .ta-entra { animation: none !important; }
  .ta-indicador { transition: none !important; }
}
@media print { .ta-indicador { display: none !important; } }
/* extra 6: conteúdo da aba ainda carregando = o rótulo (ícone + nome) fica PARADO na tela até ficar pronto (troca_abas.js) */
.ta-rotulo.ta-segura, .ta-logo .ta-segura { animation-play-state: paused; }