/* Minimal page chrome around the SurveyJS-rendered form. */
:root { --brand: #2f5fff; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f4f6fb;
  color: #1b1f2a;
}

.page {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  /* Above #formBackdrop (the optional blurred background image), which sits at z-index 0. */
  position: relative;
  z-index: 1;
}

.status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 15px;
}
.status:empty { display: none; }
.status--ok    { background: #e6f7ec; color: #1c7a3f; }
.status--error { background: #fdeaea; color: #b3261e; }

/* Rascunho local — a faixa acima do formulário que diz que o progresso fica guardado.
   Discreta por defeito: é uma garantia, não um alerta, e quarenta minutos ao lado de
   uma caixa de aviso a piscar cansa mais do que tranquiliza. Só a variante "não
   consigo guardar" é laranja, porque essa a pessoa precisa MESMO de ler. */
.draft {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid #dfe3ec;
  background: #f7f9fc;
  color: #3f4a5c;
  font-size: 13.5px;
  line-height: 1.55;
}
.draft-note { display: block; margin-top: 4px; color: #6b7280; font-size: 12.5px; }
/* A caixa existe mas não diz nada até haver algo de verdade a dizer (um rascunho
   restaurado, ou o armazenamento bloqueado). Sem isto ela deixava uma moldura vazia com
   padding no topo da página. */
.draft--empty { display: none; }
.draft--ok   { border-color: #a7e0bd; background: #eefaf2; color: #1c7a3f; }
.draft--off  { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.draft button {
  margin-left: 8px;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.draft button:hover { background: rgba(0, 0, 0, .05); }

/* Version footer — appended by app.js from <form>.version.json. Quiet by default:
   it is there to be checked, not read. The sandbox variant is loud on purpose, because
   answering the sandbox copy by mistake is otherwise indistinguishable. */
.form-version {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid #dfe3ec;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}
/* «Alterações salvas» — logo abaixo do rodapé da versão. Discreto: é informação de
   fundo, para se olhar quando se procura, não um alerta a repetir-se a cada tecla. */
.saved {
  margin-top: 6px;
  color: #6b7280;
  font-size: 12.5px;
  text-align: center;
}
.saved--ok { color: #1c7a3f; }
.saved--saving { color: #6b7280; }
.saved--error { color: #b3261e; font-size: 13px; }
.saved-when { color: #6b7280; font-weight: 400; }
.saved--ok .saved-when { opacity: .85; }

.form-version--sandbox {
  color: #92400e;
  font-weight: 700;
  border-top-color: #fcd34d;
}

/* SANDBOX banner (forms) — shown by app.js ONLY for sandbox-* forms (hidden by default
   in index.html). Real/prod forms never display it, so no need to remove anything. */
.sandbox-banner {
  max-width: 900px;
  margin: 0 auto 16px;
  padding: 10px 16px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  font-weight: 700;
  text-align: center;
  font-size: .95rem;
}