/* ============================================================
   VagasTrans — as telas de sessão: entrar, recuperar e redefinir senha.

   As três são a **mesma leitura** — um formulário curto que decide se a
   pessoa entra —, e por isso dividem uma folha só. Antes eram um `<h1>` e
   três campos soltos num container estreito, encostados à esquerda de uma
   página vazia: funcionava, e parecia rascunho.

   A tela tem uma responsabilidade que as outras não têm. Quem chega aqui já
   decidiu confiar na plataforma o suficiente para ter criado conta, e está
   digitando uma senha — às vezes num computador que não é seu. Daí o painel
   ao lado não ser enfeite: ele repete, no momento do login, as três garantias
   que a pessoa leu quando se cadastrou.

   Carregada só nestas três telas, pelo `{% block css_extra %}`.
   ============================================================ */

.autenticacao {
  display: grid;
  gap: var(--space-8);
  align-items: stretch;
  padding-block: var(--space-12);
}

/* O cartão vem **primeiro no HTML** e fica à esquerda: é a tarefa da tela.
   Fosse o painel o primeiro, quem chega no celular rolaria três parágrafos
   institucionais antes de achar o campo de e-mail — e a ordem de tabulação
   passaria pelo mesmo desvio. Aqui a ordem visual e a ordem de leitura são a
   mesma, nas duas larguras: nenhuma reordenação por CSS. */
@media (min-width: 900px) {
  .autenticacao {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
    padding-block: var(--space-16);
  }
}

/* O cadastro tem seis e nove campos, contra os dois do login. O cartão
   estreito serviria, mas empilharia tudo numa coluna comprida — e formulário
   comprido é abandonado. Aqui ele fica mais largo e alguns campos se
   emparelham. */
@media (min-width: 900px) {
  .autenticacao-larga { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .autenticacao-larga .autenticacao-cartao { max-inline-size: 38rem; }
  /* Num formulário longo o painel **acompanha a rolagem**: o que ele diz é o
     que decide se a pessoa termina de preencher, e ficaria para trás na
     primeira tela. Preso ao topo do bloco (`align-self: start`) ele também
     deixa de esticar até a altura do cartão, que era o que criava um campo
     escuro quase vazio ao lado de um formulário de nove campos. */
  .autenticacao-larga .autenticacao-painel {
    position: sticky;
    inset-block-start: var(--space-8);
    align-self: start;
  }
}

/* ── o cartão ─────────────────────────────────────────────────────────── */

.autenticacao-cartao {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: 0 18px 48px rgba(43,14,61,.08);
  align-self: center;
  inline-size: 100%;
  max-inline-size: 30rem;
  /* Encostado à direita na coluna, para os dois blocos se aproximarem no
     centro da tela em vez de se afastarem para as bordas. */
  margin-inline-start: auto;
}

.autenticacao-cartao h1 {
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  margin: 0 0 var(--space-2);
}
.autenticacao-apoio {
  color: var(--muted);
  margin: 0 0 var(--space-8);
  max-inline-size: none;
}

/* O `.form` de `base.css` abre com margem de 32px, pensada para uma página
   em que o formulário vem depois de um texto. Aqui ele vem depois do próprio
   cabeçalho do cartão, que já tem o espaço. */
.autenticacao-cartao .form { margin-top: 0; }
.autenticacao-cartao .campo:last-of-type { margin-bottom: var(--space-6); }

/* Erro de login **dentro** do cartão, e não no alto da página.
   Ficava lá, a meia tela de distância do campo que precisava ser corrigido:
   quem errava a senha via a mensagem sumir do canto do olho ao rolar até o
   formulário. `base.html` expõe o bloco `mensagens` justamente para esta
   tela poder trazê-lo para perto. */
.autenticacao-mensagens { margin-bottom: var(--space-6); }
.autenticacao-mensagens .aviso { padding: var(--space-3) var(--space-4); }
.autenticacao-mensagens .aviso + .aviso { margin-top: var(--space-3); }

/* Rótulo e "esqueci minha senha" na mesma linha: o link fica onde a dúvida
   aparece — ao lado do campo de senha — em vez de depois do botão, onde só
   chega quem já tentou e falhou. */
.campo-linha-rotulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.campo-linha-rotulo label { margin-bottom: 0; }
.campo-linha-rotulo a { font-size: .875rem; font-weight: 700; }

.btn-bloco { inline-size: 100%; }

/* ── mostrar/ocultar senha ────────────────────────────────────────────── */

/* O botão é **criado pelo `senha.js`**, nunca escrito no HTML: sem script ele
   não faria nada, e um botão morto é pior que botão nenhum. O recuo do campo
   também só existe depois que ele aparece — senão haveria um vão à direita da
   senha para quem está sem JavaScript. */
.campo-senha { position: relative; }
.campo-senha .senha-alternar {
  position: absolute;
  inset-inline-end: var(--space-2);
  /* Alinhado pela borda de baixo do campo, não centralizado no bloco: o
     bloco inclui rótulo e mensagem de erro, e centralizar ali punha o botão
     no meio da palavra "Senha". */
  inset-block-end: var(--space-2);
  min-block-size: 36px;
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--brand-violet-deep);
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
}
.campo-senha .senha-alternar:hover { background: var(--brand-violet-soft); }
/* Com erro, o bloco cresce por baixo do campo (a mensagem entra ali), e o
   botão ancorado na base do bloco desceria junto, saindo de dentro do campo.
   Ancorado no topo, ele acompanha a caixa de texto, que não se moveu. */
.campo-senha.campo-com-erro .senha-alternar {
  inset-block-end: auto;
  inset-block-start: 2.25rem;
}
.campo-senha.senha-tem-botao input { padding-inline-end: 5.5rem; }

/* ── resumo de erros ──────────────────────────────────────────────────── */

/* Vermelho de erro na borda, não no fundo: um bloco inteiro em vermelho na
   abertura da tela lê como acidente grave, e o que houve foi um campo em
   branco. */
.resumo-erros {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--danger);
  border-inline-start: 4px solid var(--danger);
  border-radius: var(--radius-sm);
  background: #FCF2F1;
}
.resumo-erros:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.resumo-erros-titulo { font-weight: 700; margin: 0 0 var(--space-2); }
.resumo-erros p { margin: 0 0 var(--space-2); max-inline-size: none; }
.resumo-erros ul { margin: 0; padding-inline-start: var(--space-5); }
.resumo-erros li { margin-block-end: var(--space-1); font-size: .9375rem; }
.resumo-erros a { font-weight: 700; }

/* ── campos lado a lado ───────────────────────────────────────────────── */

/* Só campos que se leem juntos: senha e confirmação, nome e contato de quem
   responde. Emparelhar coisas sem relação (CNPJ ao lado de e-mail) faria a
   pessoa procurar a ordem em vez de segui-la. */
.campos-par { display: grid; gap: 0 var(--space-5); }
@media (min-width: 640px) {
  .campos-par { grid-template-columns: 1fr 1fr; }
  /* Alinhados pela **base**, não esticados. Esticando (o padrão do grid), o
     bloco mais curto do par cresce até a altura do outro — e o botão de
     mostrar a senha, que se ancora na base do bloco, ia parar abaixo do campo
     em vez de dentro dele. Alinhar pela base também faz os dois campos
     terminarem na mesma linha mesmo quando um dos rótulos tem ajuda e o
     outro não. */
  .campos-par > .campo { align-self: end; }
}

/* ── grupos do formulário longo ───────────────────────────────────────── */

/* `fieldset` de verdade, com `legend`: nove campos em sequência única não
   dizem onde termina a instituição e começa quem responde por ela — e para
   quem navega por leitor de tela, o `legend` é o que anuncia essa fronteira.
   O `fieldset` do navegador vem com borda e recuo próprios; aqui ele é só o
   agrupamento semântico, e a separação é o filete. */
.bloco-campos {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-8);
}
.bloco-campos + .bloco-campos {
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--line);
}
.bloco-campos legend {
  padding: 0;
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--brand-violet-deep);
}

/* ── o aceite ─────────────────────────────────────────────────────────── */

/* O consentimento é o ato jurídico da tela, não mais uma caixa de seleção:
   destacá-lo é o que impede que ele seja marcado sem ser lido. Fundo próprio
   e filete na cor da marca, encostado no botão que o efetiva. */
.consentimento {
  margin-block: var(--space-8) var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--brand-violet);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.consentimento .campo { margin-bottom: 0; }
.consentimento-nota {
  margin: var(--space-3) 0 0;
  padding-inline-start: calc(24px + var(--space-3));
  font-size: .875rem;
  color: var(--muted);
  max-inline-size: none;
}

/* ── escolha de caminho (/cadastro) ───────────────────────────────────── */

/* Dois caminhos empilhados, e não lado a lado num `grid-2`: são opções
   **excludentes** e de peso desigual — esta é uma plataforma para pessoas
   trans, e o cadastro de instituição existe para que haja vagas. Lado a lado
   os dois pesavam igual e a página virava uma comparação. */
.escolhas { display: grid; gap: var(--space-4); }

.escolha {
  display: block;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.escolha:hover,
.escolha:focus-visible {
  border-color: var(--brand-violet);
  background: var(--brand-violet-soft);
  color: inherit;
}
.escolha-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--brand-violet-deep);
  margin: 0 0 var(--space-2);
}
.escolha p {
  margin: 0;
  font-size: .9375rem;
  color: var(--muted);
  max-inline-size: none;
}
.escolha-seta { color: var(--brand-violet); }

/* O caminho principal é a pessoa trans: fundo próprio e filete, para que a
   hierarquia esteja no desenho e não só na ordem. */
.escolha-principal {
  border-color: var(--brand-violet);
  box-shadow: inset 4px 0 0 var(--brand-violet);
}

/* Caminho fechado pela flag: continua na tela, dizendo por quê. Sumir com ele
   faria a página esconder metade do que a plataforma é. */
.escolha-fechada {
  background: var(--bg);
  border-style: dashed;
  cursor: default;
}
.escolha-fechada .escolha-titulo { color: var(--muted); }

/* ── rodapé do cartão ─────────────────────────────────────────────────── */

.autenticacao-saida {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9375rem;
}
.autenticacao-saida a { font-weight: 700; }

/* ── o painel ─────────────────────────────────────────────────────────── */

.autenticacao-painel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  background: var(--violeta-noite);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .autenticacao-painel {
    padding: var(--space-12);
    max-inline-size: 32rem;
  }
}

/* Os arcos são a mesma geometria da marca, em escala grande — desenhados
   aqui e não baixados: uma imagem de fundo custaria um request e alguns
   quilobytes para dizer o que meia dúzia de curvas já diz. Decorativos, e
   por isso `aria-hidden` no template. */
.painel-arcos {
  position: absolute;
  inset-block-start: -18%;
  inset-inline-end: -22%;
  inline-size: 78%;
  z-index: -1;
  opacity: .5;
}
.autenticacao-painel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(107,44,145,.55), transparent 62%),
    linear-gradient(to top, rgba(12,3,20,.72), transparent 58%);
}

.painel-frase {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

.painel-garantias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
/* Marca posicionada, e não alinhada por flex: com `display: flex` no `<li>`,
   um `<strong>` no meio da frase viraria uma coluna própria e o texto sairia
   quebrado em três pedaços. Mesma correção da lista de acolhimento. */
.painel-garantias li {
  position: relative;
  padding-inline-start: var(--space-8);
  font-size: .9375rem;
  line-height: 1.5;
  color: rgba(255,255,255,.86);
}
.painel-garantias li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .45em;
  inline-size: 18px;
  block-size: 3px;
  border-radius: 999px;
  background: var(--gradient-ponte);
}
.painel-garantias strong { color: #fff; font-weight: 700; }

.painel-saiba {
  margin: 0;
  font-size: .9375rem;
}
.painel-saiba a {
  color: #fff;
  font-weight: 700;
  text-underline-offset: 4px;
}
.painel-saiba a:hover { color: var(--accent-rose); }

/* Na tela estreita o painel vira o rodapé da tela, e encolhe: ele é reforço,
   não a tarefa. */
@media (max-width: 899px) {
  .autenticacao-cartao { margin-inline: auto; }
  .autenticacao-painel { padding: var(--space-6); }
  .painel-arcos { inline-size: 62%; inset-block-start: -30%; }
}

@media print {
  .autenticacao-painel { display: none; }
  .autenticacao-cartao { border: 0; box-shadow: none; padding: 0; }
}