/* ============================================================
   rx-core — Overlay de transição (CANÓNICO, partilhado)
   Usado por todas as páginas/produtos RX. Injetado por overlay.js.
   Fonte da verdade: extraído do index.html do ImóvelRX (estável).
   Inclui o congelamento de tema (solid-dark/solid-light) para o
   conteúdo não mudar de cor quando o tema muda por baixo.

   Aparência 100% via variáveis --rx-overlay-* (contrato em tokens.css).
   Os valores vêm do tema de cada produto, que os define em três sítios:
   :root/html.light (overlay normal, segue o tema da página) e
   #transition-overlay.solid-dark / .solid-light (tema congelado — como
   as variáveis ficam declaradas no PRÓPRIO elemento, vencem o que vem
   herdado do html.light, sem precisar de uma regra por cor aqui).
   ============================================================ */

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

#transition-overlay { display: flex; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
#transition-overlay.visible { opacity: 1; pointer-events: auto; }
#transition-overlay.solid { transition: none; } /* arranque: instantâneo, sem flash */

/* Overlay de transição (login/logout/voltar) — fundo esbatido como os modais. */
#transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  /* Mesmo backdrop dos restantes modais (padrão dash→rel). */
  background: var(--rx-overlay-scrim);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: var(--rx-font-body);
}
/* Variante opaca: usada no arranque/login/logout, para a transição vinda do
   callback (que é opaco) ser imperceptível e não se ver o #app a montar. */
#transition-overlay.solid { background: var(--rx-overlay-solid-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Variante: tapa só a área de conteúdo, mantendo a top bar visível
   (usada na transição relatório → análises). Fundo esbatido como os modais. */
#transition-overlay.content-only {
  top: var(--nav-h, 60px);
  background: var(--rx-overlay-scrim);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#transition-overlay.visible { opacity: 1; pointer-events: auto; }
#transition-overlay .logo {
  font-family: var(--rx-font-display);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rx-overlay-text);
  text-align: center;
}
#transition-overlay .logo span { color: var(--rx-overlay-brand); }
/* No modo content-only (transição relatório→dashboard), a topbar real
   fica visível, já com o seu próprio logótipo — mostrar a tabuleta aqui
   também seria redundante (dois logótipos ao mesmo tempo no ecrã). Só
   faz sentido no modo solid (arranque/login/logout), onde não há
   nenhuma topbar visível. */
#transition-overlay.content-only .logo { display: none; }
#transition-overlay .transition-spinner {
  width: 36px;
  height: 36px;
  border: 2px solid var(--rx-overlay-spinner-track);
  border-top-color: var(--rx-overlay-spinner);
  border-radius: 50%;
  animation: theme-gate-spin 0.8s linear infinite;
  animation-play-state: running;
  will-change: transform;
}
#transition-overlay .transition-box {
  background: var(--rx-overlay-box-bg);
  border: 2px solid var(--rx-overlay-box-border);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  max-width: 360px;
  width: 90%;
  /* Sem min-height fixo — ver nota igual em confirm-modal.css. */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
#transition-overlay .transition-text {
  text-align: center;
  font-family: var(--rx-font-body);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#transition-overlay .transition-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rx-overlay-text);
}
#transition-overlay .transition-sub {
  font-size: 0.75rem;
  color: var(--rx-overlay-text-sub);
}

/* Overlay opaco com tema congelado: as cores vêm das variáveis que o tema
   do produto declara em #transition-overlay.solid-dark/.solid-light, não
   do html.light — assim não mudam de cor quando o tema muda por baixo
   (ex.: logout dark→light). !important no fundo: overlay.js também
   define backgroundColor inline no elemento, e o CSS tem de vencer. */
#transition-overlay.solid-dark,
#transition-overlay.solid-light { background: var(--rx-overlay-solid-bg) !important; }