/* ===========================================================================
   CAMADA 6 - PAGINA (autenticacao)

   Login, cadastro, confirmacao de codigo e a pagina de erro. Curto DE
   PROPOSITO: a marca e o macro `brand`, os campos e botoes sao componentes,
   e aqui fica so a composicao desta tela.

   REGRAS DESTE ARQUIVO:
     1. nenhuma cor literal, tudo vem de tokens.css;
     2. nao reestilizar seletor interno de componente;
     3. o atraso de entrada nunca e escrito aqui: vem de --reveal-offset, que
        a cortina de abertura define sozinha.
   =========================================================================== */

/* A ENTRADA DESTA TELA E SO DE OPACIDADE, e nao a subida padrao do
   `ipr-reveal`: o icone da abertura pousa no lugar do icone do cabecalho, e
   um cabecalho subindo 10px faria o pouso errar o alvo e o icone pular no
   fim. */
.ipr-auth__panel.ipr-reveal > * { animation-name: ipr-fade; }

/* --- A coluna --------------------------------------------------------------
   UMA COLUNA ESTREITA SOBRE O FUNDO LISO, e nao um cartao. E o login da
   referencia do cliente: icone, titulo, formulario e links, cada coisa
   separada pelo espaco, e nao por caixa. Sem a casca, o que separa o campo do
   fundo e a borda dele, que tem contraste de 3:1. */
.ipr-auth__card {
  width: 100%;
  display: grid;
  gap: var(--space-6);
}

/* Cabecalho centrado: com o icone centrado logo acima, alinhar o texto a
   esquerda quebraria o eixo da composicao. Os CAMPOS continuam a esquerda,
   porque rotulo centrado sobre campo e ilegivel de varrer com o olho. */
.ipr-auth__header {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
}
/* O icone respira antes do titulo: encostado nele, o quadrado vira um
   enfeite do texto, e nao a assinatura da tela. */
.ipr-auth__header .ipr-brand { margin-block-end: var(--space-4); }
.ipr-auth__titulo {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.ipr-auth__sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.ipr-auth__sub:empty { display: none; }

/* O rodape e outra conversa ("ainda nao tem acesso?"), em tom de apoio. */
.ipr-auth__footer {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}
.ipr-auth__footer:empty { display: none; }

.ipr-auth__legal {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* Bloco de reenviar o codigo: pergunta e botao lado a lado, centrados como o
   resto do rodape. */
.ipr-reenvio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ipr-reenvio__voltar { margin-block-start: var(--space-3); }

/* --- Responsivo -----------------------------------------------------------
   Quase nada: coluna unica centrada ja E o layout de celular. */
@media (width < 40rem) {
  .ipr-auth { padding: var(--space-8) var(--space-5); }
}