/* ==========================================================================
   Portal Arlindo Armando — telas de ACESSO do aluno
   /  ·  /esqueci-senha/  ·  /nova-senha/  ·  /acesso/

   Carregar DEPOIS de /assets/base.css. Estas telas NÃO carregam app.css:
   elas usam a moldura da Boas-vindas (logo + coluna única), não a casca com
   lateral e barra inferior.

   NÃO VEIO MOCKUP. Tudo aqui é DERIVADO do que já existe — cada bloco traz a
   origem (arquivo:linha). Nenhuma cor, fonte, raio, sombra ou espaçamento foi
   inventado. Mobile-first, breakpoint único em 900px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Moldura — cópia literal da Boas-vindas
   DERIVADO (fonte: assets/boas-vindas.css:16-58). Mesmos valores, sem alterar
   nenhum. Duplicado porque a moldura da Boas-vindas é de uso único: o app.css
   só serve às telas com casca. Candidato a subir para app.css com o backend.
   -------------------------------------------------------------------------- */
body {
  min-height: 100vh;       /* fallback */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Faixa do topo: full-bleed. A borda inferior só existe a partir de 900px. */
.topo-faixa {
  width: 100%;
  padding-top: 28px;
}

.topo {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  width: 108px;
  height: 11px;
}

.palco {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-bottom: 28px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* DERIVADO (fonte: assets/boas-vindas.css:49-53) — a mesma coluna de 560 do
   .palco do mobile, mantida em TODAS as larguras. A tela de acesso não cresce
   com a janela: são dois campos e um botão. */
.ac-coluna {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

/* DERIVADO (fonte: assets/boas-vindas.css:63-65, .coluna-video .eyebrow).
   No celular o conteúdo segue o fluxo do topo — nada de centragem vertical:
   com o teclado virtual aberto uma coluna centrada salta na tela. */
.ac-coluna .eyebrow {
  margin-top: 22px;
}

/* --------------------------------------------------------------------------
   2. Texto — cópia literal da Boas-vindas
   DERIVADO (fonte: assets/boas-vindas.css:67-82 e 198-203)
   -------------------------------------------------------------------------- */
.titulo {
  margin: 10px 0 0;
  font-family: var(--fonte-display);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.024em;
  color: var(--creme);
}

.subtitulo {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cinza);
}

.dica {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--cinza);
}

/* --------------------------------------------------------------------------
   3. Campos — cópia literal do Perfil
   DERIVADO (fonte: assets/perfil.css:172-241 e 390-392). Duplicado porque os
   campos do aluno moram em perfil.css, não numa camada comum. Candidato óbvio
   a subir para app.css quando o backend existir.
   -------------------------------------------------------------------------- */
/* 24px entre o h1 (ou o subtítulo) e o primeiro campo.
   DERIVADO: medido contra .acao (boas-vindas.css:194-196, 28px no mobile);
   aqui o antecessor é texto curto, e 24 é o respiro do bloco de perguntas
   (.pergunta-grupo + .pergunta-grupo, boas-vindas.css:190-192). */
.ac-forma {
  margin-top: 24px;
}

.campo label {
  display: block;
  font-family: var(--fonte-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
}

.campo input {
  display: block;
  margin-top: 8px;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--creme);
  /* os 16px são obrigatórios: menos que isso faz o iOS dar zoom ao focar */
  font-size: 16px;
  /* sem isto o Safari ignora a borda e o raio do campo */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--transicao);
}

.campo input:hover {
  border-color: var(--cinza-inativo);
}

/* DERIVADO (fonte: assets/perfil.css:204-206, .campo--email { margin-top:20px }) */
.campo + .campo {
  margin-top: 20px;
}

.campo-wrap {
  position: relative;
  margin-top: 8px;
}

/* a margem de 8px vive no .campo-wrap (é ele que ancora o "Mostrar")
   DERIVADO (fonte: assets/perfil.css:213-216, .campo--email input) */
.campo-wrap input {
  margin-top: 0;
}

.campo-ajuda {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--cinza);
}

/* DERIVADO (fonte: assets/admin.css:859, .cel-num--alerta) — terracota é a cor
   de alerta da interface. Usado no 422, com aria-describedby ligando o campo. */
.campo-ajuda--erro {
  color: var(--terracota);
}

/* --------------------------------------------------------------------------
   4. "Mostrar" / "Ocultar" — não existia campo de senha no portal
   DERIVADO:
     posição  → assets/perfil.css:227-234 (.cadeado: right:14px dentro do campo;
                aqui o translateY(-50%) é equivalente e não depende da altura)
     tipografia → assets/boas-vindas.css:356-366 (.conta-sair)
     hover    → assets/boas-vindas.css:299-301 (.modal-fechar:hover)
     toque    → assets/admin.css:433-443 e assets/app.css (::after ampliando o alvo)
   -------------------------------------------------------------------------- */
.ac-ver-senha {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--fonte-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
  transition: color var(--transicao);
}

.ac-ver-senha:hover {
  color: var(--creme);
}

/* alvo de toque de 44px: o botão renderiza com 14px de altura de texto */
.ac-ver-senha::after {
  content: "";
  position: absolute;
  inset: -14px -10px;
}

/* respiro do campo para o texto digitado nunca passar por baixo do botão.
   MEDIDO no navegador, nos dois estados: o mais largo é "MOSTRAR", com 66,83px
   (Source Serif 4 11px/600, 0.14em; "OCULTAR" dá 63,27 — remedido em
   23/09/2026, na troca da Noto Serif Display). 14 (right) + 66,83 = 80,83 de
   mínimo; 88 deixa 7,17px de folga. Vale nos dois breakpoints: a tipografia
   do botão não muda com a largura. */
.campo--senha input {
  padding-right: 88px;
}

/* --------------------------------------------------------------------------
   5. Mensagem de erro — o único componente sem precedente no portal
   DERIVADO — não existe caixa de erro em nenhum CSS do portal.
   Caixa: a mesma do .material-h (base.css:216-236) — superfície, borda de 1px,
   raio 2. Borda em --terracota porque terracota já é a cor de alerta/novidade
   da interface (base.css:300-312 .material-h-novo; admin.css:859
   .cel-num--alerta; e o próprio anel de foco).
   padding 12/14 = os do .material-h (12) e do .campo input (14).
   font-size 13px = .conta-email / .identidade-email. line-height 1.5 = .subtitulo.
   -------------------------------------------------------------------------- */
.ac-erro {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--superficie);
  border: 1px solid var(--terracota);
  border-radius: var(--raio);
  color: var(--creme);
  font-size: 13px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   6. Link de frase — "Esqueci minha senha", "Voltar para o login", "Já tenho senha"
   A cor vem do `a` de base.css:52-59 (terracota, hover creme): não redeclarar.
   Alvo de toque pelo mesmo ::after do .rotulo-link (admin.css:433-443).
   -------------------------------------------------------------------------- */
.ac-link {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

.ac-link a {
  position: relative;
}

.ac-link a::after {
  content: "";
  position: absolute;
  inset: -14px -12px;
}

/* linha final do login: .dica com mais respiro */
.ac-rodape {
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   6.1 Linha de consentimento do /cadastro/ (T-12) — única classe nova da tela
   DERIVADO (fonte: a .dica desta mesma folha, 96-101, que já é cópia de
   assets/boas-vindas.css:198-203). Mesmas declarações, com o margin-top do
   .campo-ajuda (165-170) — é o mesmo respiro que uma linha de apoio dá ao que
   vem acima dela. Nenhuma cor, fonte ou tamanho novo.
   Existe porque não havia parágrafo de rodapé DENTRO de formulário: a .ac-rodape
   do login fica fora do <form>, depois do link de "esqueci".
   -------------------------------------------------------------------------- */
.ac-consentimento {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--cinza);
}

/* --------------------------------------------------------------------------
   7. Botão principal — cópia literal do CTA da Boas-vindas
   DERIVADO (fonte: assets/boas-vindas.css:205-244 e 467-469)
   -------------------------------------------------------------------------- */
.cta {
  margin-top: 10px;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--cinza-inativo);
  font-family: var(--fonte-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition:
    background-color var(--transicao),
    border-color var(--transicao),
    color var(--transicao),
    filter var(--transicao);
}

.cta[disabled] {
  cursor: default;
}

.cta:not([disabled]) {
  background: var(--creme);
  border-color: var(--creme);
  color: var(--fundo);
}

.cta:not([disabled]):hover {
  filter: brightness(0.95);
}

/* DERIVADO (fonte: assets/boas-vindas.css:232-234, .cta--abrir { margin-top:20px }):
   nestas telas o botão sempre fica 20px abaixo do que vem antes — campo, caixa
   de erro ou subtítulo. Com a .ac-erro visível são 16 (caixa) + 20 (botão). */
.ac-coluna .cta {
  margin-top: 20px;
}

/* "Pedir novo link" é NAVEGAÇÃO, então é <a> e não <button>.
   O `a` de base.css:52-59 pintaria terracota por cima, e o .cta:not([disabled])
   já vence em especificidade — estas duas declarações são a garantia explícita
   de que <a class="cta"> mede e pinta igual a <button class="cta">. */
.ac-cta-link {
  text-decoration: none;
  color: var(--fundo);
}

.ac-cta-link:hover {
  color: var(--fundo);
}

/* ==========================================================================
   8. DESKTOP (≥ 900px) — mesmos valores da Boas-vindas
   DERIVADO (fonte: assets/boas-vindas.css:328-343, 372-377, 389-400, 445-447,
   467-469 e 390-392 do perfil.css)
   ========================================================================== */
@media (min-width: 900px) {

  /* Barra superior: 72px de altura TOTAL, borda inclusa. */
  .topo-faixa {
    padding-top: 0;
    height: 72px;
    border-bottom: 1px solid var(--linha);
  }

  .topo {
    max-width: 1440px;
    height: 100%;
    padding-inline: clamp(24px, calc(7.4074vw - 42.667px), 64px);
  }

  .logo {
    width: 164px;
    height: 17px;
  }

  /* justify-content é DERIVADO: a coluna de acesso é curta e não tem vídeo,
     então ela fica no centro vertical do palco. O align-items já era do mockup. */
  .palco {
    max-width: none;
    padding-inline: 32px;
    padding-block: clamp(40px, calc(5.9259vw - 13.333px), 72px);
    align-items: center;
    justify-content: center;
  }

  .ac-coluna .eyebrow {
    margin-top: 0;
  }

  /* 38px é o PISO do clamp da Boas-vindas (boas-vindas.css:391), ou seja, o
     tamanho que o título já tem em 900px. A coluna de acesso não cresce com a
     janela (fica em 560), então o título também não. */
  .titulo {
    margin-top: 12px;
    font-size: 38px;
    line-height: 1.02;
    letter-spacing: -0.028em;
  }

  .subtitulo {
    margin-top: 14px;
    max-width: 520px;
    font-size: 18px;
  }

  .dica {
    font-size: 13px;
  }

  .campo-ajuda {
    font-size: 13px;
  }

  .ac-consentimento {
    font-size: 13px;
  }

  .cta {
    margin-top: 12px;
  }
}