/* ===========================================
   DIÁLOGOS E SOBREPOSIÇÕES
   ======================================== */
.overlay-dialog,
.overlay-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-dialog);
}

.overlay-loader {
  background: var(--p-green);
  transition: opacity .4s ease;
}

/* Spinner da tela de ENTRADA (#loader-global) — glifo autorenew girando sobre
   o verde (mesmo motor `spin` do .btn__spinner/.block-loader). */
.overlay-loader__spinner {
  font-size: 3rem;
  color: var(--t-light);
  animation: spin .8s linear infinite;   /* @keyframes spin em base.css */
}

/* Selo de versão discreto no rodapé da tela de loading. */
.overlay-loader__version {
  position: absolute;
  bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  color: var(--on-green-med);
}

/* ── BLOQUEIO INTERNO (blur + spinner) — #blocking-loader ──
   Trava a tela durante operações com espera (login por OTP, salvar cadastro,
   sair). NÃO mostra a vitrine — só escurece/borra o que está atrás e gira o
   spinner. Controle: window.showBlockingLoader()/hideBlockingLoader (app.js). */
.block-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-dialog);
  background: var(--overlay);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));   /* WebKit (iOS/Samsung Internet) exige o prefixo */
  transition: opacity .3s var(--ease);
}
.block-loader__spinner {
  font-size: 2.6rem;
  color: var(--t-light);
  animation: spin .8s linear infinite;   /* @keyframes spin em base.css */
}

.overlay-dialog {
  padding: var(--space-lg);
  background: var(--overlay);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));   /* WebKit (iOS/Samsung Internet) exige o prefixo */
}

.dialog-box {
  width: 100%;
  max-width: 360px;
  padding: 28px var(--space-lg);
  background: var(--bg-white);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: dialogScaleUp .25s cubic-bezier(.34, 1.56, .64, 1);
}

.dialog-box__icon {
  margin-bottom: 16px;
  color: var(--p-green);
}

.dialog-box__icon .icon {
  font-size: 3.5rem;
}

.dialog-box__title {
  margin-bottom: 10px;
  font-size: var(--fs-11);
  font-weight: var(--fw-heavy);
  color: var(--p-green-dark);
}

.dialog-box__message {
  margin-bottom: var(--space-lg);
  color: var(--t-sub);
  line-height: 1.5;
}

.dialog-box__actions {
  display: flex;
  gap: var(--space-sm);
}

.dialog-box__actions .btn {
  flex: 1;
}

/* Dialog com scroll para textos longos */
.dialog-box--scrollable .dialog-box__message {
  max-height: calc(var(--app-height, 100dvh) * 0.55);
  overflow-y: auto;
  text-align: left;
  line-height: 1.6;
  padding-right: 4px;
  white-space: pre-wrap;
  scrollbar-width: thin;
  scrollbar-color: var(--on-green-muted) transparent;
}

/* Barra SEMPRE visível (padrão dos containers de scroll fora dos 3 feeds).
   Thumb claro: o único diálogo com scroll é o de ajuda (#dialog-global, verde). */
.dialog-box--scrollable .dialog-box__message::-webkit-scrollbar { width: var(--scrollbar-w); }
.dialog-box--scrollable .dialog-box__message::-webkit-scrollbar-thumb { background: var(--on-green-muted); border-radius: var(--scrollbar-thumb-r); }

/* ── Diálogos de alerta/decisão/ajuda (#dialog-global) no padrão VERDE ──
   Mesma linguagem das telas verdes: fundo --p-green, ícone dourado, textos
   claros, CONFIRMAR dourado (o primary verde sumiria no fundo) e CANCELAR
   branco translúcido. Escopado ao #dialog-global — o diálogo da câmera
   (.dialog-box--camera) segue com seu tratamento próprio. */
#dialog-global .dialog-box {
  background: var(--p-green);
}

#dialog-global .dialog-box__icon {
  color: var(--a-gold);
}

#dialog-global .dialog-box__title {
  color: var(--t-light);
}

#dialog-global .dialog-box__message {
  color: var(--p-green-light);
}

#dialog-global .btn--primary {
  background: var(--a-gold);
  color: var(--p-green-dark);
}

/* Cancelar sobre o diálogo VERDE — ESPELHO da receita única .btn--close-on-green
   (buttons.css); precisa da especificidade do ID p/ vencer o .btn--outline claro. */
#dialog-global .btn--outline {
  background: var(--on-green-soft);
  color: var(--t-light);
}


/* ===========================================
   BANNER DE ATUALIZAÇÃO DO PWA
   Faixa fixa na base da tela — nunca bloqueia o app (sem backdrop), fica
   acima de tudo (inclusive do tutorial) e some só quando o usuário toca em
   "Atualizar" (ver app.js). Nunca recarrega sozinha.
   ======================================== */
.pwa-update-banner {
  position: fixed;
  left: var(--space-md);
  right: var(--space-md);
  bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));
  z-index: var(--z-banner);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px var(--space-md);
  background: var(--p-green-dark);
  color: var(--t-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: stepFadeIn 0.3s ease-out;
}

.pwa-update-banner__icon {
  flex-shrink: 0;
  color: var(--a-gold);
}

.pwa-update-banner__text {
  flex: 1;
  font-size: var(--fs-6);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.pwa-update-banner__btn {
  flex-shrink: 0;
  padding: 8px 18px;
}

.pwa-update-banner__btn:disabled {
  opacity: 0.6;
}


/* Selo de versão: vive no loader global (`#version-badge` no `#loader-global`),
   junto do spinner — não é mais um marcador flutuante fixo. */