/* ═══════════════════════════════════════════════════════════════════════════
   ENTRAR — ÁREA DO EMBAIXADOR (v2) — repele a paleta em 30/10/2026.

   ⚠️ A PELE É A DA PORTA. Esta é a MESMA natureza da tela de login do aluno
   (public/login.html): uma PORTA pré-autenticação, por link mágico. Quem chega
   ainda não tem preferência de tema guardada — então ela é SEMPRE a mesma noite,
   como a porta do aluno, e usa os tokens `--lg-*` de tokens.css (os únicos que
   NÃO seguem o tema). A versão anterior pintava o painel esquerdo com `--marca`
   chapado — verde de marca como preenchimento sólido, que não é a paleta do Rota.

   ZERO cor literal: só tokens. A atmosfera (névoa verde/ouro) sai de
   radial-gradient sobre tokens `--lg-nevoa-*`, igual ao `.lg-cena::after` da
   porta — nenhum hex solto, nenhum rgb() na mão.

   Estrutura preservada (duas colunas no desktop, uma no celular). Prefixo `pe-`.
   Mobile-first; alvos ≥44px; nada depende de :hover.
   ═══════════════════════════════════════════════════════════════════════════ */

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--lg-breu); color:var(--lg-claro);
  font-family:var(--font-corpo); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* a noite da porta: névoa baixa de verde e ouro, muito discreta, para a tela
   não ser um preto chapado. Mesma receita do `.lg-cena::after` do login. */
.pe{
  position:relative;
  min-height:100vh; min-height:100dvh;
  display:grid; grid-template-columns:1fr;
}
.pe::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(75% 55% at 22% 16%, var(--lg-nevoa-verde) 0%, transparent 60%),
    radial-gradient(60% 50% at 88% 90%, var(--lg-nevoa-ouro) 0%, transparent 66%),
    radial-gradient(120% 90% at 50% 40%, transparent 0%, var(--lg-nevoa-escura) 78%);
}

/* ── COLUNA DA MARCA — painel de vidro escuro, verde só como brilho ───────── */
.pe-marca{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:var(--espaco-5);
  padding:var(--espaco-7) var(--espaco-5) var(--espaco-6);
  background:
    radial-gradient(90% 60% at 20% 12%, var(--lg-nevoa-verde) 0%, transparent 58%),
    var(--lg-vidro);
  border-bottom:1px solid var(--lg-card-borda);
}
.pe-marca-topo{ display:flex; align-items:center; gap:var(--espaco-2); flex-wrap:wrap; }
/* o símbolo da marca: quadrado verde com "R" escuro — pop sobre a noite, mesma
   forma do selo do admin/shell (quadrado arredondado). */
.pe-selo{
  width:34px; height:34px; flex:0 0 34px; border-radius:var(--raio-sm);
  background:var(--lg-marca); color:var(--lg-tinta-btn);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-titulo); font-weight:800; font-size:18px; line-height:1;
  box-shadow:0 8px 22px -10px var(--lg-fumaca-a);
}
.pe-marca-nome{ font-family:var(--font-titulo); font-weight:700; font-size:var(--fs-titulo-bloco); color:var(--lg-claro); }
.pe-marca-tag{
  font-size:var(--fs-micro); letter-spacing:.09em; text-transform:uppercase;
  border:1px solid var(--lg-card-borda); border-radius:var(--raio-full);
  padding:3px 10px; color:var(--lg-meio);
}
.pe-marca-corpo{ display:flex; flex-direction:column; gap:var(--espaco-4); }
.pe-titulo{
  font-family:var(--font-titulo); font-weight:800; font-size:30px;
  line-height:1.12; letter-spacing:-.03em; margin:0; max-width:17ch; color:var(--lg-claro);
}
.pe-apoio{ margin:0; font-size:var(--fs-item); color:var(--lg-meio); max-width:42ch; line-height:1.55; }
.pe-itens{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--espaco-3); }
.pe-itens li{ display:flex; align-items:flex-start; gap:var(--espaco-3); font-size:var(--fs-item); color:var(--lg-claro); }
.pe-check{
  flex:0 0 24px; width:24px; height:24px; border-radius:var(--raio-full);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--lg-teste-fundo); border:1px solid var(--lg-teste-borda); color:var(--lg-marca);
}
.pe-check svg{ width:14px; height:14px; display:block; }

/* ── COLUNA DO FORMULÁRIO — o card de vidro da porta ──────────────────────── */
.pe-form-col{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  padding:var(--espaco-6) var(--espaco-5);
}
.pe-form{
  width:100%; max-width:400px;
  padding:var(--espaco-6) var(--espaco-6) var(--espaco-5);
  border-radius:20px;
  background:var(--lg-vidro);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border:1px solid var(--lg-card-borda);
  box-shadow:0 40px 90px -30px var(--lg-card-sombra), inset 0 1px 0 var(--lg-card-brilho);
}
.pe-form-t{
  font-family:var(--font-titulo); font-weight:800; font-size:var(--fs-kpi);
  letter-spacing:-.02em; color:var(--lg-claro); margin:0 0 var(--espaco-3);
}
.pe-form-sub{ margin:0 0 var(--espaco-5); color:var(--lg-meio); font-size:var(--fs-item); line-height:1.55; }
.pe-form-sub strong{ color:var(--lg-claro); }

.pe-campo{ display:block; font-size:var(--fs-apoio); font-weight:600; color:var(--lg-meio); margin-bottom:9px; }
.pe-input{
  width:100%; min-height:52px; padding:0 var(--espaco-4);
  font-family:inherit; font-size:15px; color:var(--lg-claro);
  background:var(--lg-campo-fundo); border:1px solid var(--lg-musgo);
  border-radius:var(--raio-lg); margin-bottom:var(--espaco-4);
  transition:border-color .14s ease, background .14s ease;
}
.pe-input::placeholder{ color:var(--lg-fraco); }
.pe-input:focus{ outline:none; border-color:var(--lg-brote); background:var(--lg-campo-fundo-foco); }
.pe-input:focus-visible{ border-color:var(--lg-marca); }

.pe-aviso{
  background:var(--lg-aviso-ruim-fundo); border:1px solid var(--lg-erro); color:var(--lg-erro);
  border-radius:var(--raio-lg); padding:12px 14px; font-size:var(--fs-apoio); line-height:1.5;
  margin-bottom:var(--espaco-4);
}

.pe-btn{
  width:100%; min-height:52px; border:0; border-radius:var(--raio-lg); cursor:pointer;
  background:var(--lg-marca); color:var(--lg-tinta-btn);
  font-family:inherit; font-weight:700; font-size:15px;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.pe-btn:focus-visible{ outline:2px solid var(--lg-marca); outline-offset:3px; }
@media (hover:hover){ .pe-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 28px -12px var(--lg-fumaca-a); filter:brightness(1.05); } }
.pe-btn:active{ transform:none; }
.pe-btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; filter:none; }

.pe-nota{
  margin:var(--espaco-5) 0 0; padding-top:var(--espaco-4);
  border-top:1px solid var(--lg-musgo);
  font-size:var(--fs-apoio); color:var(--lg-fraco); line-height:1.6;
}
.pe-nota strong{ color:var(--lg-claro); }
.pe-nota a{ color:var(--lg-meio); text-decoration:none; border-bottom:1px solid var(--lg-brote); }
.pe-nota a:hover{ color:var(--lg-claro); border-bottom-color:var(--lg-marca); }

/* ── ESTADO ENVIADO ───────────────────────────────────────────────────────── */
.pe-ok{
  display:flex; align-items:flex-start; gap:var(--espaco-3);
  background:var(--lg-aviso-certo-fundo); border:1px solid var(--lg-brote);
  border-radius:var(--raio-lg); padding:var(--espaco-4); margin-bottom:var(--espaco-5);
}
.pe-ok-ico{
  flex:0 0 24px; width:24px; height:24px; border-radius:var(--raio-full);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--lg-marca); color:var(--lg-tinta-btn);
}
.pe-ok-ico svg{ width:15px; height:15px; display:block; }
.pe-ok-l{ margin:0 0 4px; font-size:var(--fs-apoio); color:var(--lg-meio); line-height:1.5; }
.pe-ok-l:last-child{ margin-bottom:0; }
.pe-ok-l strong{ color:var(--lg-claro); }

/* "usar outro e-mail" — ação textual discreta, alvo ≥44px */
.pe-link-btn{
  display:block; width:100%; min-height:46px; margin-top:var(--espaco-2);
  background:none; border:0; cursor:pointer;
  color:var(--lg-meio); font-family:inherit; font-size:var(--fs-apoio);
}
.pe-link-btn:hover{ color:var(--lg-claro); }
.pe-link-btn:focus-visible{ outline:2px solid var(--lg-marca); outline-offset:2px; border-radius:var(--raio-sm); }

/* ═══ 640px+ — mais respiro ═══════════════════════════════════════════════ */
@media (min-width:640px){
  .pe-marca{ padding:var(--espaco-8) var(--espaco-7) var(--espaco-7); }
  .pe-form-col{ padding:var(--espaco-8) var(--espaco-7); }
}

/* ═══ 1024px+ — duas colunas lado a lado ═══════════════════════════════════ */
@media (min-width:1024px){
  .pe{ grid-template-columns:1.05fr 1fr; }
  .pe-marca{ justify-content:center; border-bottom:0; border-right:1px solid var(--lg-card-borda); }
}

/* quem pede menos movimento recebe a tela parada */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}