/*
 * Tela de acesso
 * ==============
 *
 * Consome os tokens de `tokens.css`; não define cor nem medida próprias.
 *
 * A tela não carrega `app.css` nem `admin.css`. É a única do sistema que não
 * tem barra superior nem gaveta — quem não entrou não navega —, e carregar as
 * folhas do cromo traria de volta exatamente o que esta tela precisa não ter.
 */

/* ---------------------------------------------------------------------- */
/* Página                                                                  */
/* ---------------------------------------------------------------------- */

/*
 * Esta tela não carrega `app.css`, que é onde o resto do sistema define o
 * `border-box`. Sem esta linha, `width: 100%` no campo soma padding e borda
 * por cima da largura: o campo ficava ~27px mais largo que o botão e que as
 * réguas, e o alinhamento da coluna inteira se perdia.
 */
.pagina-acesso *,
.pagina-acesso *::before,
.pagina-acesso *::after { box-sizing: border-box; }

.pagina-acesso {
  margin: 0;
  min-height: 100vh;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-base);
  line-height: var(--linha-texto);

  display: flex;
  justify-content: center;
  /* `flex-start` com padding, não `center`: numa janela baixa, centrar
     verticalmente empurra o topo do conteúdo para fora da tela e não há como
     rolar até ele. */
  align-items: flex-start;
  padding: clamp(var(--e-6), 14vh, 10rem) var(--e-5) var(--e-6);
}

/*
 * O único cromo. Um filete do azul institucional na borda superior, em
 * sangria — presença da marca sem uma barra que não teria o que conter.
 */
.pagina-acesso::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--azul);
}

.acesso {
  width: 100%;
  /* ~27rem mantém a linha de texto da descrição abaixo de 80 caracteres. */
  max-width: 27rem;
}

/* ---------------------------------------------------------------------- */
/* Marca                                                                   */
/* ---------------------------------------------------------------------- */

.acesso-marca {
  margin-bottom: var(--e-6);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--linha);
}

.acesso-marca h1 {
  margin: 0 0 var(--e-2);
  font-family: var(--fonte-titulo);
  /* Cresce com a janela, mas para antes de virar cartaz. */
  font-size: clamp(1.875rem, 5vw, 2.375rem);
  font-weight: 400;
  line-height: var(--linha-apertada);
  letter-spacing: -0.015em;
  color: var(--azul);
}

.acesso-marca p {
  margin: 0;
  max-width: 38ch;
  font-size: var(--t-sm);
  color: var(--tinta-media);
  /* Evita a última linha órfã e escolhe pontos de quebra melhores. Onde não
     houver suporte, o texto quebra como quebraria de qualquer forma. */
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------- */
/* Formulário                                                              */
/* ---------------------------------------------------------------------- */

.acesso-form {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.campo label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tinta-media);
}

.campo input {
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  /* 44px de alvo: a tela é operada também em tablet, em campo. */
  padding: var(--e-3) var(--e-3);
  width: 100%;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo input:hover { border-color: var(--azul-medio); }

.campo input:focus {
  outline: none;
  border-color: var(--azul);
  /* Anel em vez de outline para não somar 2px à altura e deslocar o campo. */
  box-shadow: 0 0 0 3px var(--azul-vidro);
}

/*
 * Um anel só. `tokens.css` pinta um `outline` em todo `input:focus-visible`;
 * somado ao `box-shadow` acima, o campo em foco aparecia com duas bordas
 * concêntricas. O `outline: none` do `:focus` já neutraliza aquele — o que
 * faltava era não acrescentar um terceiro aqui.
 *
 * Em alto contraste forçado o `box-shadow` é descartado pelo sistema, e aí a
 * mudança de `border-color` é o que sinaliza o foco.
 */

.acesso-entrar {
  margin-top: var(--e-2);
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: 600;
  color: #fff;
  background: var(--azul);
  border: 1px solid var(--azul);
  border-radius: var(--raio);
  padding: var(--e-3) var(--e-5);
  cursor: pointer;
  /* Largura total: é a única ação da tela. Nada disputa com ela. */
  width: 100%;
  transition: background var(--transicao), border-color var(--transicao);
}

.acesso-entrar:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.acesso-entrar:active { background: var(--azul-escuro); }

/* ---------------------------------------------------------------------- */
/* Erro                                                                    */
/* ---------------------------------------------------------------------- */

/*
 * Borda à esquerda, como toda situação no sistema. Não depende só da cor:
 * a barra permanece legível em monocromático e para quem não distingue
 * vermelho.
 */
.acesso-erro {
  margin-bottom: var(--e-5);
  padding: var(--e-3) var(--e-4);
  background: var(--diverge-tenue);
  border-left: 3px solid var(--diverge);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: var(--t-sm);
  color: var(--diverge);
}

.acesso-erro p { margin: 0; }
.acesso-erro p + p { margin-top: var(--e-2); }

/* ---------------------------------------------------------------------- */
/* Nota                                                                    */
/* ---------------------------------------------------------------------- */

.acesso-nota {
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linha);
  font-size: var(--t-xs);
  color: var(--tinta-suave);
}

.acesso-nota p { margin: 0; }
.acesso-nota p + p { margin-top: var(--e-1); }

/* ---------------------------------------------------------------------- */
/* Telas estreitas                                                         */
/* ---------------------------------------------------------------------- */

@media (max-width: 480px) {
  .pagina-acesso { padding: var(--e-6) var(--e-4); }
  .acesso-marca { margin-bottom: var(--e-5); }
}