/* ============================================================
   ProAgentes — /entrar (a porta única)
   Missão HEADER-ENTRAR, 17/08/2026.

   O PADRÃO de layout foi estudado na app.sintra.ai/login e reproduzido como
   PADRÃO: fundo escuro de tela cheia, marca no topo, elenco espiando por trás
   de um cartão claro centrado, rodapé curto embaixo, tudo dentro da viewport
   (sem barra de rolagem). Nada além do padrão veio de lá — nenhum CSS, fonte,
   ícone ou imagem deles foi baixado ou servido; os tokens, a tipografia, a
   copy e o elenco (os 8 agentes) são nossos, do mesmo acervo dos chips da
   navbar e dos heróis das landings.

   Regra de ouro desta tela: ela NÃO ROLA. A altura vem de `svh` (a menor
   viewport visível — no celular a barra do navegador não cria barra de
   rolagem), o miolo é a única região que pode rolar por dentro em casos
   patológicos (teclado aberto em tela minúscula, zoom de 200%), e nada
   ultrapassa a largura.
   ============================================================ */

/* ————— a tela ————— */
html { height: 100%; }

body.pa-porta-body {
  height: 100vh;   /* fallback para quem não conhece svh */
  height: 100svh;
  overflow: hidden; /* a página não rola; quem rola (se precisar) é o miolo */
  background: #04060f;
  color: #e2e8f0;
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

/* fundo: gradiente da casa (navy → índigo do CTA da landing) + brilho do accent */
.pa-porta {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding:
    calc(env(safe-area-inset-top, 0px) + clamp(14px, 2.6vh, 28px))
    max(16px, env(safe-area-inset-right, 0px))
    calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 2.2vh, 24px))
    max(16px, env(safe-area-inset-left, 0px));
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(59, 130, 246, 0.22), rgba(4, 6, 15, 0) 62%),
    radial-gradient(90% 60% at 50% 108%, rgba(109, 68, 204, 0.18), rgba(4, 6, 15, 0) 60%),
    linear-gradient(180deg, #0f172a 0%, #080c1a 46%, #04060f 100%);
  overflow: hidden;
}

/* ————— marca (topo) ————— */
.pa-marca {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pa-marca img {
  height: clamp(20px, 2.9vh, 28px);
  width: auto;
}

/* ————— miolo: elenco + cartão, centrados ————— */
.pa-centro {
  display: flex;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
/* `margin: auto` (e não justify-content) centra SEM cortar o topo quando a
   pilha é mais alta que o miolo — o bug clássico do flex centrado que rola. */
.pa-pilha {
  margin: auto;
  width: 100%;
  max-width: 27.5rem; /* 440px */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ————— o elenco espiando por trás do cartão ————— */
/* Os 8 agentes em fileira sobreposta, com um arco leve: o do meio mais alto,
   os das pontas mais baixos — a mesma arte dos chips da navbar. */
.pa-elenco {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  padding: 0 8px;
  --pa-chip: clamp(42px, 7vh, 64px);
  margin-bottom: calc(var(--pa-chip) * -0.16); /* espia por trás do cartão */
  position: relative;
  z-index: 0;
  pointer-events: none;
}
.pa-elenco img {
  width: var(--pa-chip);
  height: var(--pa-chip);
  border-radius: 50%;
  margin-inline: calc(var(--pa-chip) * -0.07);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transform: translateY(var(--pa-arco, 0));
}
/* o arco: pontas mais baixas, centro mais alto */
.pa-elenco img:nth-child(1), .pa-elenco img:nth-child(8) { --pa-arco: 22%; z-index: 1; }
.pa-elenco img:nth-child(2), .pa-elenco img:nth-child(7) { --pa-arco: 10%; z-index: 2; }
.pa-elenco img:nth-child(3), .pa-elenco img:nth-child(6) { --pa-arco: 2%;  z-index: 3; }
.pa-elenco img:nth-child(4), .pa-elenco img:nth-child(5) { --pa-arco: -2%; z-index: 4; }

/* ————— o cartão ————— */
.pa-cartao {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #ffffff;
  color: #0f172a;
  border-radius: 16px;
  padding: clamp(18px, 2.9vh, 28px) clamp(18px, 5%, 26px);
  box-shadow:
    rgba(2, 6, 23, 0.55) 0 24px 60px -20px,
    rgba(255, 255, 255, 0.06) 0 0 0 1px;
}
.pa-cartao h1 {
  font-size: clamp(1.35rem, 3.2vh, 1.75rem);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #0f172a;
}
.pa-sub {
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: #475569;
}

/* ————— campos ————— */
#nx-form-login { margin-top: clamp(12px, 2.2vh, 20px); }
.nx-field {
  display: block;
  margin-bottom: clamp(8px, 1.5vh, 14px);
}
.nx-field > span {
  display: block;
  margin-bottom: 5px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #334155;
}
.nx-input {
  width: 100%;
  height: clamp(40px, 5.6vh, 46px);
  padding: 0 14px;
  font: inherit;
  font-size: 1rem; /* < 16px faz o iOS dar zoom no foco — e zoom vira barra */
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.nx-input::placeholder { color: #94a3b8; }
.nx-input:hover { border-color: #cbd5e1; }
.nx-input:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* ————— botões ————— */
.nx-acoes { margin-top: clamp(10px, 1.8vh, 16px); }
.pa-cartao .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(42px, 5.8vh, 48px);
  padding: 0 20px;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 12px;
  background-image: linear-gradient(rgb(15, 23, 42) 49.83%, rgb(16, 12, 82) 100%);
  color: #ffffff;
  font-family: 'DM Sans', 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  transition: filter 220ms ease, transform 220ms ease;
}
.pa-cartao .button:hover { filter: brightness(1.25); }
.pa-cartao .button:active { transform: translateY(1px); }
.pa-cartao .button[disabled] { opacity: 0.65; cursor: progress; }

.pa-secundario {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: clamp(42px, 5.6vh, 46px);
  padding: 8px 14px;
  line-height: 1.25;
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  font-family: 'DM Sans', 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  text-align: center;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.pa-secundario:hover { background: #f8fafc; border-color: #94a3b8; }
.pa-secundario svg { flex: none; }

:where(.pa-cartao, .pa-rodape) :focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}

/* ————— divisor "ou" ————— */
.pa-ou {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(10px, 1.9vh, 18px) 0;
  color: #94a3b8;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pa-ou::before, .pa-ou::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

/* ————— avisos (não podem sumir por estética: são a fala da porta) ————— */
.nx-alerta, .nx-perigo, #nx-erro {
  margin-top: clamp(9px, 1.6vh, 13px);
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid;
  font-size: 0.8125rem;  /* aviso é recado curto, não corpo de texto: cabe em
                            tela baixa sem empurrar o formulário para fora */
  line-height: 1.35;
}
.nx-alerta { border-color: #fcd34d; background: #fffbeb; color: #78350f; }
.nx-perigo, #nx-erro { border-color: #fca5a5; background: #fef2f2; color: #7f1d1d; }

/* ————— nota do rodapé do cartão ————— */
.nx-nota {
  margin-top: clamp(10px, 1.8vh, 16px);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #64748b;
  text-align: center;
}
.nx-nota a { color: #1d4ed8; font-weight: 500; }
.nx-nota a:hover { text-decoration: underline; }

/* ————— rodapé da tela ————— */
.pa-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 20px;
  font-size: 0.8125rem;
  color: #8ea0bd;
  text-align: center;
}
.pa-rodape a { color: #b6c4dc; }
.pa-rodape a:hover { color: #ffffff; }

/* ————— alturas curtas: a tela aperta, nada vaza ————— */
/* Duas réguas, não uma: a de 800 px encolhe RESPIROS (é o que sobra quando o
   cartão ganha um aviso — sessão expirada, erro de senha, link manual); a de
   680 px encolhe também o que é supérfluo (subtítulo, elenco). */
@media (max-height: 800px) {
  .nx-alerta, .nx-perigo, #nx-erro { padding: 8px 10px; margin-top: 8px; }
  .pa-ou { margin: 8px 0; }
  .pa-elenco { --pa-chip: clamp(34px, 5.4vh, 48px); }
  .nx-field { margin-bottom: clamp(8px, 1.3vh, 12px); }
}
@media (max-height: 680px) {
  .pa-sub { display: none; }             /* o h1 já diz o que é */
  .nx-nota { font-size: 0.75rem; margin-top: 8px; }
  .nx-acoes { margin-top: 8px; }
  .pa-cartao { padding-top: clamp(14px, 2.4vh, 22px); padding-bottom: clamp(14px, 2.4vh, 22px); }
  #nx-form-login { margin-top: clamp(10px, 1.8vh, 16px); }
}
@media (max-height: 560px) {
  .pa-elenco { display: none; }          /* último a sair: primeiro o supérfluo */
  .pa-cartao { border-radius: 14px; }
}

/* ————— telas estreitas ————— */
@media (max-width: 420px) {
  .pa-pilha { max-width: 100%; }
  .pa-elenco img { margin-inline: calc(var(--pa-chip) * -0.14); }
  .pa-rodape { gap: 4px 14px; font-size: 0.75rem; }
  .pa-secundario { font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-cartao .button, .pa-secundario, .nx-input { transition: none; }
  .pa-cartao .button:active { transform: none; }
}