/* ============================================================
   Faixa e portão do ambiente de teste. Ver js/qa.js.

   Só aparece em dev.gymwp.app. Feia de propósito: precisa destoar do
   produto para ninguém confundir uma tela de teste com a real.
   ============================================================ */

.qa-faixa {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10001;
  padding: 5px 12px;
  background: #f0b429; color: #1a1205;
  font: 700 11px/1.3 var(--font); letter-spacing: .04em;
  text-align: center; text-transform: uppercase;
  pointer-events: none;
}

/* Empurra o conteúdo para a faixa não cobrir a primeira linha da tela. */
body.tem-qa-faixa { padding-top: 22px; }

.qa-portao {
  position: fixed; inset: 0; z-index: 10002;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter); background: var(--bg);
}

.qa-portao-miolo {
  display: flex; flex-direction: column; align-items: stretch;
  text-align: center; width: 100%; max-width: 320px;
}

.qa-portao-titulo { margin: 0; font: 700 20px/1.3 var(--font); color: var(--ink); }
.qa-portao-sub { margin: 10px 0 22px; font: 400 14px/1.5 var(--font); color: var(--ink-2); }

.qa-portao-campo {
  box-sizing: border-box; width: 100%; height: var(--btn-h);
  padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 400 16px/1 var(--font); text-align: center;
}
.qa-portao-campo:focus { outline: none; border-color: var(--brand); }

.qa-portao-bt {
  margin-top: 12px; width: 100%; height: var(--btn-h);
  border: 0; border-radius: var(--btn-r);
  background: var(--brand); color: var(--brand-ink);
  font: 600 16px/1 var(--font); cursor: pointer;
}

.qa-portao-erro { margin: 12px 0 0; min-height: 18px; font: 400 13px/1.35 var(--font); color: #ff453a; }