/* Movimento e retorno visual — carregado depois do Bootstrap, em toda página.
   O painel navega por página inteira: quase todo movimento aqui existe pra
   avisar que o sistema ouviu, não pra decorar. */

:root {
  --pc-dur-rapida: 140ms;   /* press, entrada de página */
  --pc-dur-base:   180ms;   /* sanfona, flash de swap */
  --pc-dur-lenta:  220ms;   /* modal */
  --pc-curva: cubic-bezier(0.23, 1, 0.32, 1);  /* ease-out forte; as nativas do CSS não têm punch */
}

/* ─── Barra de progresso ──────────────────────────────────────────────
   Clicar link ou enviar formulário troca a página inteira. Sem isto a tela
   fica parada até a resposta chegar e parece que o clique não pegou. */
#pc-progresso {
  position: fixed;
  top: 0; left: 0;
  height: 2px; width: 0;
  background: #1F4E78;
  z-index: 2000;            /* acima da lateral (1030) e do hambúrguer (1040) */
  opacity: 0;
  pointer-events: none;
  transition: width 200ms linear, opacity 150ms var(--pc-curva);
}
#pc-progresso.ativo { opacity: 1; }

/* ─── Botão em envio ──────────────────────────────────────────────────
   Sem `disabled`: disabled tira name/value do botão do envio e quebraria os
   formulários com mais de um submit. pointer-events trava o segundo clique. */
[data-enviando] {
  pointer-events: none;
  opacity: 0.75;
}
[data-enviando]::after {
  content: "";
  display: inline-block;
  width: 0.75em; height: 0.75em;
  margin-left: 0.45em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pc-girar 600ms linear infinite;
}
@keyframes pc-girar { to { transform: rotate(360deg); } }

/* ─── Sanfona da barra lateral ────────────────────────────────────────
   Substitui o max-height: 0 → 1300px do base.html, que num painel de ~300px
   reais chegava ao fim em 58ms e deixava 190ms de nada. 0fr → 1fr anima a
   altura real, sem número mágico que quebra quando entra item novo no menu. */
.sidebar-section > .sidebar-children,
.sidebar-subsection > .sidebar-subchildren {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--pc-dur-base) var(--pc-curva);
}
.sidebar-section.open > .sidebar-children,
.sidebar-subsection.open > .sidebar-subchildren { grid-template-rows: 1fr; }

.sanfona-conteudo { overflow: hidden; min-height: 0; }

/* Contadores da lateral mudam de valor a cada navegação — sem tabular-nums
   a largura pula e empurra o chevron. */
.sidebar .badge { font-variant-numeric: tabular-nums; }

/* Pulso único (nunca infinito) quando um contador subiu desde a última tela. */
.pc-pulso { animation: pc-pulso 600ms var(--pc-curva); }
@keyframes pc-pulso {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ─── Entrada da página ───────────────────────────────────────────────
   `backwards`, nunca `both`: com `both` o transform final fica aplicado pra
   sempre e o .main vira containing block de position:fixed — os 129 modais
   vivem dentro do bloco de conteúdo e ficariam mal posicionados. */
.main { animation: pc-entrada var(--pc-dur-rapida) var(--pc-curva) backwards; }
@keyframes pc-entrada {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Press ───────────────────────────────────────────────────────────
   Redeclara o shorthand do Bootstrap porque CSS não deixa acrescentar uma
   propriedade a um transition existente. As 4 primeiras são as do Bootstrap. */
.btn {
  transition: color .15s ease-in-out, background-color .15s ease-in-out,
              border-color .15s ease-in-out, box-shadow .15s ease-in-out,
              transform var(--pc-dur-rapida) var(--pc-curva);
}
.btn:active { transform: scale(0.96); }

/* ─── Modal ───────────────────────────────────────────────────────────
   O padrão do Bootstrap desliza 50px do topo em 300ms. Origem fica no centro
   de propósito: modal não é ancorado num gatilho, aparece no meio da tela. */
.modal.fade .modal-dialog {
  transform: scale(0.98);
  transition: transform var(--pc-dur-lenta) var(--pc-curva),
              opacity   var(--pc-dur-lenta) var(--pc-curva);
}
.modal.show .modal-dialog { transform: none; }

/* Fechar sai da frente: o diálogo vai de 220ms pra 140ms. A marca .pc-saindo
   (movimento.js) existe só durante o fechamento — o Bootstrap lê a duração
   computada no início de cada transição, então uma regra sem a marca valeria
   também na abertura e mentiria pro timer dele. O fim total do dismiss fica
   em ~150ms: é o .fade do próprio .modal (opacity) que manda no resto. */
.modal.fade.pc-saindo .modal-dialog {
  transition-duration: var(--pc-dur-rapida);
}

/* ─── Swap do HTMX ────────────────────────────────────────────────────
   Edição em célula de tabela troca o HTML sem avisar nada. O flash verde é o
   "salvou" — é o único retorno que essas telas têm. */
.pc-trocado { animation: pc-flash 700ms var(--pc-curva); }
@keyframes pc-flash {
  from { background-color: rgba(25, 135, 84, 0.20); }
  to   { background-color: transparent; }
}

/* ─── Menos movimento ─────────────────────────────────────────────────
   Guarda no `*` de propósito: são ~250 declarações de movimento espalhadas em
   59 blocos <style> que ninguém vai auditar uma a uma. Isto também para o
   badge que pulsa infinito em calendario_rh.html. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* O spinner é a exceção: parado ele deixa de significar "carregando". É
     pequeno, local e não desloca nada na tela. */
  [data-enviando]::after {
    animation-duration: 800ms !important;
    animation-iteration-count: infinite !important;
  }
}