/* ============================================================
   base.css — SGC
   Variáveis, reset e estilos globais
   ============================================================ */

   /* =========================== OVERLAY ============================= */
/* Sol + Terra (sólido, sem rastro) */
:root{
  --overlay-bg: rgba(255,255,255,.86);
  --overlay-text: var(--text-color);
  --overlay-orbit: rgba(var(--bs-primary-rgb), .35);
  --sun: #FFC107;
  --sun-soft: #FFE082;
  --earth: #2E86FF;
}
[data-bs-theme="dark"]{
  --overlay-bg: rgba(0,0,0,.88);
  --overlay-orbit: rgba(255,255,255,.22);
}

.loading-overlay{
  display:none; position:fixed; inset:0; z-index:9999;
  background: var(--overlay-bg);
  align-items:center; justify-content:center; flex-direction:column;
  text-align:center; padding: 2rem;
}
.overlay-title{
  margin-top: 1.25rem;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 700;
  color: var(--overlay-text);
}
.overlay-sub{
  margin-top:.25rem;
  font-size:.95rem;
  color: var(--muted-color);
}

.orbita-container{ position: relative; width: 200px; height: 200px; }
.nucleo{
  position:absolute; top:50%; left:50%;
  width:46px; height:46px; border-radius:50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 30% 30%, var(--sun-soft), var(--sun));
  box-shadow: 0 0 14px var(--sun), 0 0 28px var(--sun);
}
.orbit{
  position:absolute; top:50%; left:50%;
  width:150px; height:150px; border-radius:50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--overlay-orbit);
  animation: overlaySpin 6s linear infinite;
  will-change: transform;
}
.orbit::before{ /* Terra */
  content:""; position:absolute; top:50%; left:100%;
  width:16px; height:16px; border-radius:50%;
  transform: translate(-50%, -50%);
  background: var(--earth);
  box-shadow: 0 0 6px var(--earth), 0 0 12px var(--earth);
  z-index: 1;
}
/* garante que nenhum rastro antigo apareça */
.orbit::after{ content: none !important; }

@keyframes overlaySpin{
  0% { transform: translate(-50%, -50%) rotate(0); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (max-width: 480px){
  .orbita-container{ width: 160px; height: 160px; }
  .orbit{ width: 120px; height: 120px; }
  .nucleo{ width: 38px; height: 38px; }
}