/* loading.css — tela de carregamento (admin/index.html), mesmo tema visual
   do painel esquerdo de login.html (gradiente escuro + blobs). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

.loading-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #0F172A 0%, #1F2937 45%, #374151 100%);
  position: relative;
  overflow: hidden;
}

/* ── blobs de fundo (mesmo visual de login.html, sem o comportamento de
   seguir o mouse — tela é rápida demais pra isso valer a pena) ── */
.bg-blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; animation: blobFloat 20s ease-in-out infinite; }
.blob-core { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.04); }
.blob-1 { width: 560px; height: 560px; top: -140px; right: -140px; animation-duration: 24s; }
.blob-2 { width: 420px; height: 420px; bottom: -110px; left: -100px; animation-duration: 19s; animation-delay: -4s; }
.blob-3 { width: 380px; height: 380px; top: 12%; left: -60px; animation-duration: 17s; animation-delay: -9s; }
.blob-3 .blob-core { background: rgba(255,255,255,.03); }
.blob-4 { width: 340px; height: 340px; bottom: 6%; right: -60px; animation-duration: 15s; animation-delay: -2s; }
.blob-4 .blob-core { background: rgba(255,255,255,.045); }

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(24px, -32px) scale(1.06); }
  50%      { transform: translate(-18px, 18px) scale(0.94); }
  75%      { transform: translate(16px, 28px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

.loading-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
}

.loading-logo { width: 480px; max-width: 85vw; }
.loading-logo img { width: 100%; height: auto; object-fit: contain; }

.loading-bar-track {
  width: 220px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
}
.loading-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #fff;
  animation: loadingProgress 1.6s cubic-bezier(.4,0,.2,1) forwards;
}
/* aplicada via JS assim que a verificação de sessão termina — interrompe a
   animação "presa em ~85%" e completa a barra até 100% antes de navegar. */
.loading-bar-fill.done {
  animation: none;
  width: 100%;
  transition: width .25s ease;
}
@keyframes loadingProgress {
  0%   { width: 0%; }
  60%  { width: 65%; }
  100% { width: 85%; }
}