/*
 * Casca das telas públicas (convite, esqueci a senha, senha nova, erro,
 * offline): mesmo cartão do login, sem menu nem Bootstrap. Os campos
 * valem para qualquer tipo de texto (o convite tem text, email, tel e
 * password).
 */
*{box-sizing:border-box}
body{
  font-family:var(--fonte);font-size:15px;color:var(--tinta);margin:0;
  background:
    radial-gradient(1200px 500px at 50% -10%, var(--ag-evento-fundo), transparent 70%),
    var(--papel);
  padding:calc(24px + env(safe-area-inset-top, 0px))
          calc(16px + env(safe-area-inset-right, 0px))
          calc(40px + env(safe-area-inset-bottom, 0px))
          calc(16px + env(safe-area-inset-left, 0px));
}
.folha{
  max-width:var(--largura-tela, 560px);margin:0 auto;background:var(--n-0);
  border:1px solid var(--linha);border-radius:var(--raio-g);
  box-shadow:0 18px 40px rgba(39,51,143,.10), var(--sombra-1);
  padding:26px 26px 22px;
}
.marca{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.marca .logo-app{width:46px;height:46px;flex:0 0 46px;border-radius:12px;
  display:block}
.marca b{font-size:1.1rem;display:block;line-height:1.2}
.marca small{color:var(--tinta-2);font-size:.78rem}
h1{font-size:1.3rem;margin:18px 0 4px;letter-spacing:-.01em}
.sub{color:var(--tinta-2);font-size:.88rem;margin:0 0 18px;line-height:1.45}
.obs{font-size:.8rem;color:var(--tinta-2)}
a{color:var(--cor-primaria)}

label{display:block;margin-bottom:14px}
label span{display:block;font-size:.8rem;font-weight:600;
  color:var(--tinta-2);margin-bottom:6px;line-height:1.4}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea{
  width:100%;min-height:46px;padding:0 13px;border:1px solid var(--linha);
  border-radius:10px;font-size:1rem;color:var(--tinta);font-family:inherit;
  background:var(--n-0);transition:border-color .15s, box-shadow .15s;
}
input:focus,textarea:focus{outline:0;border-color:var(--cor-primaria);
  box-shadow:0 0 0 4px var(--ag-evento-fundo)}
button[type=submit],a.botao{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-height:48px;margin-top:4px;background:var(--cor-primaria);
  color:var(--n-0);border:0;border-radius:10px;font-size:1rem;
  font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;
}
button[type=submit]:hover,a.botao:hover{background:var(--cor-primaria-escura)}
a.voltar{display:inline-block;margin-top:16px;font-size:.88rem;
  font-weight:600;text-decoration:none}

.flash{
  background:var(--info-fundo);border:1px solid var(--info-borda);
  color:var(--info-texto);border-radius:10px;padding:11px 13px;
  font-size:.86rem;margin-bottom:16px;line-height:1.45;
}
.flash.erro{background:var(--erro-fundo);border-color:var(--erro-borda);
  color:var(--erro-texto)}
.ok{background:var(--ok-fundo);border:1px solid var(--ok-borda);
  color:var(--ok-texto);border-radius:10px;padding:11px 13px;
  font-size:.9rem;margin-bottom:14px;line-height:1.45}
.vazio{border:1px dashed var(--linha);border-radius:10px;padding:20px;
  text-align:center;color:var(--tinta-2);font-size:.9rem}

@media (max-width:575px){
  body{padding:12px 10px 30px}
  .folha{padding:20px 16px 18px}
}