/* Telas de acesso.

   Folha própria e curta: elas carregam para quem ainda não tem sessão, e não
   faz sentido baixar o CSS do sistema inteiro antes de saber quem é a pessoa. */

.ac-corpo {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--esp-5);
  background:
    radial-gradient(130% 130% at 15% -15%, rgba(255, 255, 255, .07) 0%, transparent 55%),
    linear-gradient(158deg, var(--azul-noite) 0%, var(--azul-fundo) 55%, var(--azul) 100%);
}
.ac-caixa { width: 100%; max-width: 400px; }
.ac-caixa .marca { margin-bottom: var(--esp-6); }

.ac-form {
  background: var(--fundo);
  border-radius: var(--raio-card);
  padding: var(--esp-6);
  box-shadow: var(--sombra-3);
}
.ac-form h1 { font-size: 24px; margin-bottom: 5px; }
.ac-intro {
  font-size: 13px; color: var(--texto-fraco);
  margin-bottom: var(--esp-5); line-height: 1.5;
}

.ac-campo { display: block; margin-bottom: var(--esp-4); }
.ac-campo > span {
  display: block;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-fraco); font-weight: 500; margin-bottom: 5px;
}
.ac-campo input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--fundo);
  font-size: 15px;
  color: var(--texto-forte);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.ac-campo input:focus {
  outline: none;
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(46, 90, 140, .16);
}
.ac-dica {
  display: block; font-style: normal;
  font-size: 11.5px; color: var(--texto-tenue); margin-top: 4px;
}

.ac-erro {
  margin-bottom: var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio);
  background: var(--vermelho-fundo);
  border: 1px solid #E6C4BE;
  color: #8E2F24;
  font-size: 13px;
}

.ac-btn { width: 100%; padding: 12px; text-decoration: none; }

.ac-rodape {
  margin-top: var(--esp-5);
  text-align: center;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .5);
}