/* ==========================================================================
   solitpmt · css/login.css — página de acesso (/login)
   Carregue depois de /static/css/solit.css. Só a composição da página: os
   componentes (cartão, campos, alertas, .codigo-unico, .qr, link-seta)
   ficam no solit.css. Nenhuma cor nova: só tokens.

   Composição (protótipo aprovado: design/site/entrar.html)
   - Fundo Off-White (--fundo-suave) e o acesso num cartão; ao lado (>= 1024
     px) ou abaixo, a coluna de informação: convite, status, suporte e um
     lembrete de segurança.
   - O cartão tem um estado visível por vez, trocado pelo js/login.js com a
     classe .hidden (calço do solit.css): #login-form (usuário e senha),
     #mfa-block (autenticador: configurar ou verificar) e #reset-block
     (primeiro acesso ou nova senha). Cada estado traz o próprio corpo e o
     próprio rodapé.
   - #login-codes-modal (códigos mostrados uma única vez) é um cartão no
     lugar do cartão de acesso: enquanto ele aparece, o outro sai da tela.
     Sem :has(), os dois aparecem, o dos códigos primeiro.

   Pares de cor: os mesmos medidos no protótipo (css/entrar.css) e no
   solit.css; nenhum par novo.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Área principal
   -------------------------------------------------------------------------- */
.acesso {
  padding-block: clamp(24px, 6vw, 96px) clamp(56px, 8vw, 120px);
  background: var(--fundo-suave);
}

.acesso__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-9);
  align-items: start;
}

.acesso__principal,
.acesso__info { max-width: 32rem; }

/* cartão alinhado ao símbolo do cabeçalho; a informação logo ao lado */
@media (min-width: 1024px) {
  .acesso__grade {
    grid-template-columns: minmax(0, 31rem) minmax(0, 24rem);
    justify-content: start;
    column-gap: clamp(72px, 10vw, 144px);
  }
  .acesso__principal,
  .acesso__info { max-width: none; }
}

/* códigos mostrados uma vez: o cartão deles fica no lugar do de acesso */
.acesso__principal:has(> .acesso__codigos:not(.hidden)) > .acesso__painel:not(.acesso__codigos) { display: none; }

/* nenhum estado visível (entre o fim do segundo passo e a abertura do
   painel): o cartão não fica vazio na tela */
.acesso__painel:not(.acesso__codigos):not(:has(> .acesso__estado:not(.hidden))) { display: none; }

/* o fundo escurecido do diálogo não é usado: os códigos ficam na página (o
   common.js deixa o resto da página inerte enquanto eles aparecem) */
#modal-backdrop { display: none; }


/* --------------------------------------------------------------------------
   Cartão de cada estado
   -------------------------------------------------------------------------- */
.acesso__corpo { padding: var(--esp-8); }

.acesso__titulo {
  margin-top: var(--esp-3);
  font-size: clamp(1.625rem, 1.4rem + 0.6vw, 2rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.018em;
}
.acesso__corpo > .acesso__titulo:first-child { margin-top: 0; }

.acesso__intro {
  margin-top: var(--esp-3);
  font-size: var(--tam-campo);
  line-height: 1.6;
}

.acesso__alerta { margin-top: var(--esp-6); }
.acesso__alerta:not(.hidden) ~ .acesso__alerta { margin-top: var(--esp-3); }

/* 24 px depois da introdução ou do alerta; 32 px depois das etapas do QR */
.acesso__form { margin-top: var(--esp-6); gap: var(--esp-5); }
.acesso__matricula:not(.hidden) ~ .acesso__form { margin-top: var(--esp-7); }
.acesso__form > .botao--primario { margin-top: var(--esp-2); }

/* "Tempo para confirmar" com o relógio do desafio */
.acesso__prazo { font-variant-numeric: tabular-nums lining-nums; }

/* configurar o autenticador: duas etapas numeradas (QR e texto). Uma etapa
   oculta (sem QR ou sem texto) não conta na numeração. */
.acesso__etapas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-6);
  margin-top: var(--esp-6);
  counter-reset: etapa;
}
.acesso__etapas > li { counter-increment: etapa; }
.acesso__etapa {
  display: flex;
  gap: var(--esp-2);
  margin-bottom: var(--esp-3);
  font-size: var(--tam-ui);
  font-weight: 500;
  line-height: 1.45;
  color: var(--tinta);
}
.acesso__etapa::before {
  content: counter(etapa) ".";
  flex: none;
  min-width: 1.1em;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/* texto de configuração (otpauth): quebra em qualquer ponto */
.acesso__config .codigo-unico__rotulo {
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--linha);
}
.acesso__config .codigo-unico__valor {
  padding-block: var(--esp-4) var(--esp-5);
  font-size: var(--tam-pequeno);
}

/* código mostrado uma vez e o aviso logo abaixo */
.acesso__codigo { margin-top: var(--esp-6); }
.acesso__codigo + .acesso__alerta { margin-top: var(--esp-5); }

/* a lista recebe um <p> por código (js/login.js). O código de recuperação
   (um só) aparece maior, numa linha: 23 caracteres em Plex Mono cabem
   inteiros a partir de 360 px. */
.acesso__codigos-lista > p:only-child {
  grid-column: 1 / -1;
  font-size: clamp(1rem, 0.6rem + 1.6vw, 1.375rem);
  line-height: 1.45;
  letter-spacing: 0.04em;
}
.acesso__codigos-lista > p { text-wrap: balance; }

/* rodapé do cartão: voltar, primeiro acesso, nota de suporte */
.acesso__rodape {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-1);
  padding: var(--esp-2) var(--esp-8) var(--esp-3);
  font-size: var(--tam-pequeno);
}
.acesso__rodape-nota { padding-block: var(--esp-2) var(--esp-1); }
/* link dentro da frase do rodapé: alvo de 44 px de altura sem mudar a linha
   do texto (a mesma técnica do .alerta .link no solit.css) */
.acesso__rodape-nota .link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -12px;
}

.link-seta:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 479px) {
  .acesso__corpo { padding: var(--esp-6) var(--esp-5) var(--esp-7); }
  .acesso__rodape { padding-inline: var(--esp-5); }
  .acesso__titulo { margin-top: var(--esp-2); }
}


/* --------------------------------------------------------------------------
   Coluna de informação: convite, status, suporte, segurança
   -------------------------------------------------------------------------- */
.acesso__info-texto { margin-top: var(--esp-2); font-size: var(--tam-campo); }

.acesso__lista {
  margin-top: var(--esp-7);
  border-top: 1px solid var(--linha-forte);
}

.acesso__item {
  padding-block: var(--esp-5) var(--esp-4);
  border-bottom: 1px solid var(--linha);
}

.acesso__item dt {
  font-size: var(--tam-ui);
  font-weight: 500;
  line-height: 1.4;
  color: var(--tinta);
}

.acesso__item dd p {
  margin-top: var(--esp-1);
  font-size: var(--tam-ui);
  line-height: 1.55;
}

.acesso__item .link-seta { margin-bottom: calc(-1 * var(--esp-2)); }
.acesso__email { overflow-wrap: anywhere; }

@media (min-width: 1024px) {
  .acesso__info { padding-top: var(--esp-8); }
}