/* ===== LOADING OVERLAY (base) ===== */
.loading{
  /* Você já controla via JS (display:none -> display:flex) */
  display: none;
  position: fixed;
  /* inset: 0; */
  z-index: 999999;
  align-items: center;
  justify-content: center;
  /* padding: 24px; */
  cursor: progress;
  user-select: none;

  /* Variáveis (padrão: aparece sobre fundo claro) */
  /* --loading-backdrop: rgba(15, 23, 42, 0.45); */        /* overlay escuro translúcido */
  --loading-card-bg: rgba(255, 255, 255, 0.92);      /* cartão claro */
  --loading-card-border: rgba(15, 23, 42, 0.10);
  --loading-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  --loading-text: #0f172a;
  --loading-accent: #2563eb;
  --loading-accent-soft: rgba(37, 99, 235, 0.45);
  --loading-accent-muted: rgba(37, 99, 235, 0.22);
  background: var(--loading-backdrop);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  width: min(300px, 100%);
  bottom: 10px;
  right: 10px;
}

/* ===== Variante para quando o conteúdo por trás já é escuro =====
   Use via JS: .loading.dataset.surface = 'dark'
*/
.loading[data-surface='dark']{
  --loading-backdrop: rgba(255, 255, 255, 0.14);     /* overlay claro translúcido */
  --loading-card-bg: rgba(2, 6, 23, 0.86);           /* cartão escuro */
  --loading-card-border: rgba(255, 255, 255, 0.12);
  --loading-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --loading-text: rgba(255, 255, 255, 0.92);

  --loading-accent: #60a5fa;
  --loading-accent-soft: rgba(96, 165, 250, 0.45);
  --loading-accent-muted: rgba(96, 165, 250, 0.22);
}

/* ===== Cartão/Container ===== */
.loading > .container3{
  width: min(300px, 100%);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 16px;
  border: 1px solid var(--loading-card-border);
  background: var(--loading-card-bg);
  box-shadow: var(--loading-card-shadow);
  transform: translateZ(0); /* ajuda no blur/anim */
}

/* ===== Spinner ===== */
.loading > .container3 > .rodando{
  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 4px solid var(--loading-accent-muted);
  border-top-color: var(--loading-accent);
  border-right-color: var(--loading-accent-soft);

  animation: loading-spin 0.85s linear infinite;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}

/* ===== Texto ===== */
.loading > .container3 > .circulo{
  color: var(--loading-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

.loading > .container3 > .circulo::after{
  content: '';
  display: inline-block;
  width: 1ch;
}

/* ===== Animações + acessibilidade ===== */
@keyframes loading-spin{
  to{ transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .loading > .container3 > .rodando{ animation: none; }
}