/* ============================================================
   Diálogo de resultado. Ver js/dialogo.js.

   Herda a linguagem da tela de espera — mesma cobertura, mesma entrada —
   porque na prática é a continuação dela: a espera some e o resultado
   aparece no mesmo lugar.
   ============================================================ */

.dlg {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
  /* Translúcido, ao contrário da espera: aqui a tela por baixo JÁ tem a
     informação nova, e deixá-la entrever é o que liga o diálogo ao que
     mudou atrás dele. */
  background: rgba(0, 0, 0, .72);
  animation: dlg-entra .16s ease-out;
}

@keyframes dlg-entra { from { opacity: 0 } to { opacity: 1 } }

.dlg-miolo {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  width: 100%; max-width: 340px;
  padding: 26px 22px 22px;
  border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
}

.dlg-titulo {
  margin: 0;
  font: 700 18px/1.3 var(--font); color: var(--ink);
}

.dlg-texto {
  margin: 10px 0 0;
  font: 400 14px/1.55 var(--font); color: var(--ink-2);
}

.dlg-email {
  margin-top: 12px;
  font: 600 14px/1.4 var(--font); color: var(--brand);
  word-break: break-all;
}

.dlg-bt {
  margin-top: 22px; width: 100%;
  min-height: 46px; padding: 0 22px;
  border: none; border-radius: var(--btn-r);
  background: var(--brand); color: #fff;
  font: 700 15px/1 var(--font); cursor: pointer;
}
.dlg-bt:active { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .dlg { animation: none; }
}