/*
 * Transições globais do Portal SGA — hoje o conteúdo aparece de forma
 * abrupta a cada navegação (recarregamento de página completo, já que não é
 * SPA). Um fade-in simples no `main.content` já deixa a navegação com
 * sensação bem mais fluida sem exigir nenhum framework JS novo.
 */

@keyframes portalFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main.content {
  animation: portalFadeIn 0.25s ease-out;
}

/* Respeita quem pediu menos animação no sistema operacional */
@media (prefers-reduced-motion: reduce) {
  main.content {
    animation: none;
  }
}

/* ── Skeleton loader reutilizável ─────────────────────────────────────
 * Uso: <div class="skeleton skeleton-text"></div>
 * ou   <div class="skeleton" style="height: 120px;"></div>
 * Cobre claro e escuro automaticamente via a variável --dt-line já
 * definida em dark-theme.css quando o tema escuro está ativo. */
.skeleton {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #e9ecef 25%, #f4f6f8 37%, #e9ecef 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.skeleton-text {
  height: 0.9rem;
  margin-bottom: 0.5rem;
  width: 100%;
}
.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-50 { width: 50%; }

:root[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #17191d 25%, #1f2229 37%, #17191d 63%);
  background-size: 400% 100%;
}

@keyframes skeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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