/* Loading (Padrao_Loading_Estado). */

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.loading-overlay.aberto { display: flex; }

.loading-spinner {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 44px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: cl-sobe 0.2s ease;
}

@keyframes cl-sobe {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.spinner-circle {
  width: 44px;
  height: 44px;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: cl-spin 0.8s linear infinite;
}

@keyframes cl-spin { to { transform: rotate(360deg); } }

/* O icone 'spinner' de _icons.html ja nascia com class="icon-spin" e a
   regra nunca existiu, entao ele ficava parado. Reusa o keyframe acima
   em vez de criar um segundo. Ver Classe_Sem_CSS da vault. */
.icon-spin { animation: cl-spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .icon-spin { animation: none; } }

.loading-text {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

.loading-inline {
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}