/* ============================================================
   DESIGN TOKENS — "Selo de Presença"
   Paleta: pergaminho quente + bordô + dourado (crachá/selo),
   inspirada na linguagem do próprio produto ("selo", "conquista").
   ============================================================ */

:root {
  --cor-fundo: #FAF5EC;
  --cor-fundo-alt: #F1E8D8;
  --cor-bordo: #7A2E3A;
  --cor-bordo-escuro: #5B2029;
  --cor-dourado: #C9A227;
  --cor-dourado-suave: #E8D9A8;
  --cor-verde-selo: #4A7856;
  --cor-tinta: #2B211D;
  --cor-tinta-suave: #6B5E54;
  --cor-linha: #E2D6C0;
  --cor-texto-sobre-bordo: #FBF3E7; /* texto claro em cima de fundo bordô (botões, cards escuros, QR fullscreen) */
  --cor-inativo: #C9BFB4; /* cinza neutro p/ estados desabilitados/inativos */
  --cor-alerta-laranja: #C2650A; /* fora da paleta de marca — só pro indicador de "% EV abaixo da meta" */

  --fonte-display: 'Fraunces', serif;
  --fonte-corpo: 'Inter', sans-serif;
  --fonte-dados: 'IBM Plex Mono', monospace;
}

body {
  font-family: var(--fonte-corpo);
  background-color: var(--cor-fundo);
  color: var(--cor-tinta);
}

.fonte-display { font-family: var(--fonte-display); }
.fonte-dados { font-family: var(--fonte-dados); }

/* ------------------------------------------------------------
   Evita o zoom de "toque duplo" do navegador ao clicar rápido
   em botões (mantém o pinch-to-zoom normal da página intacto).
   ------------------------------------------------------------ */
button,
.botao-reacao,
.sugestao-item {
  touch-action: manipulation;
}

/* ------------------------------------------------------------
   Textura sutil de papel no fundo
   ------------------------------------------------------------ */
.textura-papel {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(122,46,58,0.04) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(201,162,39,0.06) 0%, transparent 50%);
}

/* ------------------------------------------------------------
   Selo de presença — o elemento-assinatura da interface.
   Um carimbo circular que "bate" na tela ao confirmar presença.
   ------------------------------------------------------------ */
.selo-carimbo {
  width: 132px;
  height: 132px;
  border-radius: 9999px;
  border: 3px solid var(--cor-bordo);
  background:
    radial-gradient(circle, var(--cor-dourado-suave) 0%, var(--cor-fundo-alt) 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform: scale(0.4) rotate(-18deg);
  opacity: 0;
}

.selo-carimbo::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 9999px;
  border: 1.5px dashed var(--cor-bordo);
  opacity: 0.5;
}

.selo-carimbo.animar {
  animation: bater-selo 620ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes bater-selo {
  0%   { transform: scale(0.4) rotate(-18deg); opacity: 0; }
  55%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
  75%  { transform: scale(0.94) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .selo-carimbo.animar {
    animation: none;
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ------------------------------------------------------------
   Barra de progresso de assiduidade
   ------------------------------------------------------------ */
.barra-progresso-trilho {
  background-color: var(--cor-fundo-alt);
  border: 1px solid var(--cor-linha);
  border-radius: 9999px;
  overflow: hidden;
  height: 12px;
}

.barra-progresso-preenchimento {
  background: linear-gradient(90deg, var(--cor-verde-selo), var(--cor-dourado));
  height: 100%;
  border-radius: 9999px;
  transition: width 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* ------------------------------------------------------------
   Botão primário — pill bordô com leve profundidade de carimbo
   ------------------------------------------------------------ */
.botao-primario {
  background-color: var(--cor-bordo);
  color: var(--cor-texto-sobre-bordo);
  font-weight: 600;
  border-radius: 9999px;
  transition: transform 120ms ease, background-color 150ms ease;
}
.botao-primario:active {
  transform: scale(0.97);
  background-color: var(--cor-bordo-escuro);
}
.botao-primario:disabled {
  background-color: var(--cor-inativo);
  color: var(--cor-fundo);
}

.botao-primario:focus-visible,
input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cor-dourado);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Cartão de sugestão do autocomplete
   ------------------------------------------------------------ */
.sugestao-item {
  cursor: pointer;
  transition: background-color 100ms ease;
}
.sugestao-item:hover,
.sugestao-item:focus {
  background-color: var(--cor-fundo-alt);
}

/* ------------------------------------------------------------
   Flash de destaque para novo check-in ao vivo
   ------------------------------------------------------------ */
@keyframes flash-checkin {
  0%   { background-color: rgba(122, 46, 58, 0.14); }
  100% { background-color: transparent; }
}

.checkin-novo {
  animation: flash-checkin 2000ms ease-out forwards;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .checkin-novo {
    animation: none;
  }
}

/* ------------------------------------------------------------
   Tag de Cursilho — pill colorida "Nº Cursilho" (fundo claro +
   texto escuro, sem ícone/bolinha). Usada em listas, ranking e
   tabelas (admin e participante). As duas cores vêm via style
   inline, direto de cursilhos.cor_bg_hex/cor_texto_hex — já
   calculadas pra manter contraste legível nas 25 cores fixas.
   ------------------------------------------------------------ */
.tag-cursilho {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.3;
}

/* ------------------------------------------------------------
   Tag de Tipo de Evento — pill "EV"/"Terço"/"Agir"/customizado,
   mesma linguagem visual da tag de cursilho. Cor definida em JS
   (admin.js/participant.js: corTagTipoEvento) e aplicada via style
   inline — fixa por tipo conhecido, neutra pra texto customizado.
   ------------------------------------------------------------ */
.tag-tipo-evento {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.3;
}

/* Botão "pill" clicável de seleção de tipo (painel do admin) — igual à tag
   acima quando selecionado, com contorno da mesma cor quando não. */
.pill-tipo-evento-toggle {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.1s ease;
}

.pill-tipo-evento-toggle:active {
  transform: scale(0.96);
}

/* ------------------------------------------------------------
   Filtro Veterano/NEO na lista de Usuários (Todos/Veteranos/NEOs)
   ------------------------------------------------------------ */
.filtro-categoria-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--cor-linha);
  background-color: transparent;
  color: var(--cor-tinta-suave);
  transition: transform 0.1s ease;
}

.filtro-categoria-pill:active {
  transform: scale(0.96);
}

.filtro-categoria-pill.ativo {
  background-color: var(--cor-bordo);
  border-color: var(--cor-bordo);
  color: var(--cor-texto-sobre-bordo);
}

/* ------------------------------------------------------------
   Tag do "% EV" no ranking — verde quando bate a meta de 60%,
   laranja quando fica abaixo (ver admin.js: renderizarTagPercentualEv).
   ------------------------------------------------------------ */
.tag-percentual-ev {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.3;
}

/* ------------------------------------------------------------
   Foguinho — sequência de check-ins seguidos. Ícone próprio no estilo
   "badge de jogo" (contorno grosso, cores chapadas, chama de dois picos com
   número dentro) — ver admin.js/participant.js: obterTierFoguinho. Faixas:
   apagado (cinza) → aceso (vermelho/amarelo) → azul → "tunado" (azul +
   faíscas) → topo (dourado + faíscas + anel). Clicável: mostra um hint com
   a sequência (e o recorde, só quando for maior que a sequência atual).
   ------------------------------------------------------------ */
.foguinho {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  /* Alvo de toque maior que o desenho em si, compensado com margem
     negativa pra não empurrar os vizinhos no layout. */
  padding: 6px;
  margin: -6px;
  cursor: pointer;
  touch-action: manipulation;
}

.foguinho-svg {
  /* viewBox nativo do sprite é 327x463 (proporção ~0.706:1) — largura
     derivada da altura pra não distorcer a chama. */
  width: 23px;
  height: 32px;
  overflow: visible;
  flex-shrink: 0;
}

.foguinho-tooltip {
  /* Abre pra BAIXO do ícone (não pra cima) de propósito: o foguinho e o
     presente vivem nas primeiras linhas da lista (o presente, inclusive,
     SÓ aparece nas posições 1/2/3 — sempre o topo da lista). Um balão que
     abre pra cima nessas linhas ficava cortado pelo `overflow:hidden` do
     painel expansível (participante) ou pelo clip vertical implícito do
     `overflow-x-auto` da tabela (admin) — o balão saía por cima da borda
     do próprio contêiner e ficava "atrás"/cortado. Abrindo pra baixo, o
     balão sempre exibe inteiro dentro da área visível. */
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--cor-tinta);
  color: var(--cor-texto-sobre-bordo);
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 30;
  pointer-events: none;
}

.foguinho-tooltip.hidden {
  display: none;
}

/* Os 3 quadros da chama (foguinho-quadro-1/2/3) começam com o quadro 1 visível
   e os outros dois escondidos — se a animação não rodar (motion reduzido ou
   navegador muito antigo), o ícone continua mostrando a chama em repouso,
   nunca fica com dois quadros sobrepostos. */
.foguinho-quadro-1 { opacity: 1; }
.foguinho-quadro-2 { opacity: 0; }
.foguinho-quadro-3 { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .foguinho-tier-ultra .foguinho-anel {
    animation: foguinho-girar 6s linear infinite;
    transform-box: fill-box;
    transform-origin: 50% 50%;
  }
  .foguinho-tier-tunado .foguinho-faisca,
  .foguinho-tier-ultra .foguinho-faisca {
    animation: foguinho-faiscar 1.6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: 50% 50%;
  }
  /* Chama tremulando: os 3 quadros se revezam em crossfade contínuo, cada um
     defasado em 1/3 do ciclo (delay negativo) — dá movimento à chama sem
     nunca deixar o ícone "estático". */
  .foguinho-quadro-1 { animation: foguinho-tremular 2.4s ease-in-out infinite; }
  .foguinho-quadro-2 { animation: foguinho-tremular 2.4s ease-in-out infinite; animation-delay: -0.8s; }
  .foguinho-quadro-3 { animation: foguinho-tremular 2.4s ease-in-out infinite; animation-delay: -1.6s; }
  /* O número também "respira" bem sutilmente, junto com a chama, pra não
     ficar parado enquanto tudo ao redor se move. */
  .foguinho-numero {
    animation: foguinho-respirar 2.4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: 50% 50%;
  }
}

@keyframes foguinho-girar {
  to { transform: rotate(360deg); }
}

@keyframes foguinho-faiscar {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes foguinho-tremular {
  0%, 20% { opacity: 1; }
  38%, 88% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes foguinho-respirar {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ------------------------------------------------------------
   Presente (bonificação) — ícone clicável nas 3 primeiras posições do
   ranking, mesmo padrão de interação do foguinho (botão + balão que
   alterna ao clicar, fecha ao clicar fora).
   ------------------------------------------------------------ */
.presente {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 6px;
  margin: -6px;
  cursor: pointer;
  touch-action: manipulation;
}

.presente-svg {
  width: 20px;
  height: 24px;
  overflow: visible;
  flex-shrink: 0;
}

.presente-tooltip {
  /* Abre pra BAIXO — o presente só aparece nas posições 1/2/3, sempre no
     topo da lista, então "abrir pra cima" ficava cortado pelo
     overflow:hidden do painel expansível (participante) ou pelo clip
     vertical implícito do overflow-x-auto da tabela (admin). Ver nota
     completa em .foguinho-tooltip, acima, mesmo problema/mesma causa. */
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--cor-tinta);
  color: var(--cor-texto-sobre-bordo);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 30;
  pointer-events: none;
  max-width: 220px;
  white-space: normal;
  text-align: center;
}

.presente-tooltip.hidden {
  display: none;
}

/* ------------------------------------------------------------
   Membro inativo (removido pelo admin) — mantém no histórico e
   no ranking, mas fica visualmente "apagado" na lista de gestão.
   ------------------------------------------------------------ */
.linha-membro-inativo {
  opacity: 0.55;
}

.tag-inativo {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background-color: var(--cor-fundo-alt);
  color: var(--cor-tinta-suave);
}

/* ------------------------------------------------------------
   Layout do painel admin com menu lateral (sidebar) — usado por
   todas as páginas do admin (Dashboard, Usuários, e as próximas
   que forem entrando), pra navegação consistente entre elas.
   ------------------------------------------------------------ */
.admin-shell {
  display: flex;
  min-height: 100vh;
}

.admin-sidebar {
  width: 232px;
  flex-shrink: 0;
  background-color: #FFFFFF;
  border-right: 1px solid var(--cor-linha);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.admin-sidebar-marca {
  padding: 0 8px;
  margin-bottom: 28px;
}

.admin-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.admin-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--cor-tinta-suave);
  transition: background-color 120ms ease, color 120ms ease;
}

.admin-sidebar-link:hover {
  background-color: var(--cor-fundo-alt);
}

.admin-sidebar-link.ativo {
  background-color: var(--cor-bordo);
  color: var(--cor-texto-sobre-bordo);
  font-weight: 600;
}

.admin-sidebar-rodape {
  border-top: 1px solid var(--cor-linha);
  padding-top: 14px;
  margin-top: 14px;
}

.admin-main {
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .admin-shell {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    padding: 14px 16px;
  }
  .admin-sidebar-marca {
    margin-bottom: 0;
    margin-right: 8px;
  }
  .admin-sidebar-nav {
    flex-direction: row;
  }
  .admin-sidebar-rodape {
    border-top: none;
    border-left: 1px solid var(--cor-linha);
    padding-top: 0;
    padding-left: 12px;
    margin-top: 0;
    margin-left: auto;
  }
}

/* ------------------------------------------------------------
   Medalhas de posição no ranking
   ------------------------------------------------------------ */
.medalha-posicao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

/* ------------------------------------------------------------
   Cabeçalho de coluna ordenável (ranking de engajamento) — clique
   alterna decrescente/crescente. A seta só aparece na coluna ativa.
   ------------------------------------------------------------ */
.th-ordenavel {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.th-ordenavel:hover {
  color: var(--cor-bordo);
}

.th-ordenavel .seta-ordenacao {
  font-size: 0.7rem;
  margin-left: 2px;
  opacity: 0.7;
}

/* ------------------------------------------------------------
   Selo compacto (tela de sucesso do participante, versão enxuta)
   ------------------------------------------------------------ */
.selo-compacto {
  width: 92px;
  height: 92px;
}

/* ------------------------------------------------------------
   Painel expansível do Top 5 (participante)
   ------------------------------------------------------------ */
.painel-expansivel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms ease;
}

.painel-expansivel.aberto {
  grid-template-rows: 1fr;
}

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

/* ------------------------------------------------------------
   Linha do ranking com reações sociais
   ------------------------------------------------------------ */
.linha-ranking {
  position: relative;
  background-color: var(--cor-fundo-alt);
  overflow: visible;
}

/* Destaque na própria linha do participante dentro do ranking — tanto
   quando ela aparece organicamente na lista quanto quando é a linha fixada
   no rodapé (fora do Top 10 visível). */
.linha-ranking-atual {
  outline: 2px solid var(--cor-dourado);
  outline-offset: -2px;
}

.botao-reacao {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 9999px;
  background-color: #FFFFFF;
  border: 1px solid var(--cor-linha);
  transition: transform 100ms ease;
}
.botao-reacao:active {
  transform: scale(0.92);
}

/* ------------------------------------------------------------
   Pop tátil instantâneo ao clicar em qualquer botão de reação
   ------------------------------------------------------------ */
@keyframes pop-botao {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.32); }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.botao-reacao.pop {
  animation: pop-botao 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  .botao-reacao.pop { animation: none; }
}

/* ============================================================
   TELA DE BOAS-VINDAS — carrossel orbital 3D
   Identidade própria desta tela (preto/branco/cinza), à parte da
   paleta "selo" bordô/dourado usada no resto do app.
   ============================================================ */

#tela-boas-vindas.saindo {
  opacity: 0;
  pointer-events: none;
}

.orbita-container {
  position: relative;
  width: min(94vw, 400px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  --escala-min: 0.75;
  --escala-max: 1.75;
}

/* Só a logo — sem fundo, sem círculo atrás. object-fit: contain preserva
   a proporção da imagem (não estica/distorce). O drop-shadow dá profundidade
   sem precisar de uma forma sólida atrás. */
.orbita-globo-central {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbita-globo-central-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
}

/* Registra o ângulo como um tipo animável (necessário pra @keyframes
   interpolar suavemente um valor usado depois dentro de sin()/cos()). */
@property --angulo-orbita {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

.orbita-item {
  --angulo-orbita: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78px;
  height: 78px;
  /* Centralização de fallback (navegadores sem trig() — sobrescrita no
     @supports abaixo, que aplica a órbita de verdade via transform). */
  margin: -39px 0 0 -39px;
  border-radius: 22%;
  overflow: hidden;
  background-color: #E5E5E5;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  /* Duração e atraso são os mesmos pra todos os 10 (só a defasagem por
     --indice muda), o que é o que faz elas rodarem "uma atrás da outra"
     em fila organizada, mantendo distância constante entre si — em vez de
     cada uma girar num ritmo diferente e se cruzarem/atropelarem. */
  animation: girar-orbita var(--duracao-orbita, 34s) linear infinite;
  animation-delay: calc(-1 * var(--indice) * (var(--duracao-orbita, 34s) / 10));
  will-change: transform;
}

.orbita-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 320ms ease;
}

.orbita-foto.foto-saindo {
  opacity: 0;
}

/* Tremida ao tocar numa foto — a animação fica na <img> (não no
   .orbita-item, que já usa transform pra girar/escalar); assim a foto
   continua se deslocando na órbita normalmente enquanto treme "por cima". */
.orbita-item {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.orbita-item.em-destaque {
  z-index: 8;
}

@keyframes orbita-tremida {
  0%   { transform: rotate(0deg) scale(1); }
  12%  { transform: rotate(-16deg) scale(1.08); }
  26%  { transform: rotate(13deg) scale(1.08); }
  40%  { transform: rotate(-11deg) scale(1.05); }
  54%  { transform: rotate(9deg) scale(1.05); }
  68%  { transform: rotate(-6deg) scale(1.02); }
  82%  { transform: rotate(3deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}

.orbita-foto.tremendo {
  animation: orbita-tremida 500ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .orbita-foto.tremendo { animation: none; }
}

@keyframes girar-orbita {
  from { --angulo-orbita: 0deg; }
  to   { --angulo-orbita: 360deg; }
}

/* Navegadores com suporte a funções trigonométricas em calc() (Safari 16.4+,
   Chrome 111+, Firefox 118+ — praticamente todo aparelho em uso hoje):
   a órbita real. Só translate + scale (2D puro, sem translateZ/perspective)
   — isso é proposital: a versão com profundidade 3D deixava as fotos com
   uma distorção/inclinação estranha nas bordas do círculo. Só escala por
   posição já dá o efeito de profundidade pedido, sem esse artefato. */
@supports (top: calc(1px * sin(45deg))) {
  .orbita-item {
    margin: 0;
    transform:
      translate(-50%, -50%)
      translate(
        calc(sin(var(--angulo-orbita)) * var(--raio, 130px)),
        calc(cos(var(--angulo-orbita)) * -1 * var(--raio, 130px))
      )
      scale(calc(
        var(--escala-min) + (var(--escala-max) - var(--escala-min)) * (1 - cos(var(--angulo-orbita))) / 2
      ));
  }
}

/* Fallback estático (sem giro) pra navegadores sem trig() — evita que as
   10 fotos fiquem todas empilhadas em cima do globo central. */
@supports not (top: calc(1px * sin(45deg))) {
  .orbita-item { animation: none; }
  .orbita-pos-0 { transform: translate(-50%, -50%) translate(0px, -140px) scale(0.75); }
  .orbita-pos-1 { transform: translate(-50%, -50%) translate(82px, -113px) scale(0.85); }
  .orbita-pos-2 { transform: translate(-50%, -50%) translate(133px, -43px) scale(1.10); }
  .orbita-pos-3 { transform: translate(-50%, -50%) translate(133px, 43px) scale(1.40); }
  .orbita-pos-4 { transform: translate(-50%, -50%) translate(82px, 113px) scale(1.65); }
  .orbita-pos-5 { transform: translate(-50%, -50%) translate(0px, 140px) scale(1.75); }
  .orbita-pos-6 { transform: translate(-50%, -50%) translate(-82px, 113px) scale(1.65); }
  .orbita-pos-7 { transform: translate(-50%, -50%) translate(-133px, 43px) scale(1.40); }
  .orbita-pos-8 { transform: translate(-50%, -50%) translate(-133px, -43px) scale(1.10); }
  .orbita-pos-9 { transform: translate(-50%, -50%) translate(-82px, -113px) scale(0.85); }
}

/* "Reduzir movimento": para o giro, mas mantém cada foto no seu próprio
   ponto fixo da órbita (calculado a partir de --indice), em vez de deixar
   todas empilhadas no centro. */
@media (prefers-reduced-motion: reduce) {
  .orbita-item {
    animation: none;
    --angulo-orbita: calc(var(--indice) * 36deg);
  }
}

/* ------------------------------------------------------------
   Tabela de ranking de engajamento (Dashboard do admin) — no mobile
   as colunas de dado (Presenças/% Geral/% EV/Sequência) ficavam
   "coladas" e com o cabeçalho meio desalinhado visualmente, difícil
   de ler numa tela estreita. Aqui é a única tabela do site, então dá
   pra mirar em `table` direto sem precisar de uma classe nova.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  table thead th,
  table tbody td {
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Colunas 3 em diante (tudo depois de "Nome") — centraliza pra ficar
     mais fácil de escanear em coluna estreita, em vez de tudo grudado
     na esquerda. Como .foguinho/.tag-percentual-ev são inline-flex, o
     text-align:center da célula já centraliza os dois sem precisar de
     regra extra. */
  table thead th:nth-child(n + 3),
  table tbody td:nth-child(n + 3) {
    text-align: center;
  }
}