/* Tela de entrada (/entrar).

   Estrutura pedida: cartao claro flutuando sobre o ceu escuro — a mesma leitura
   da tela da Zenvia, com a identidade do Orbi. O ceu nao e decoracao emprestada:
   a marca e um anel cruzado por uma orbita, e a tela e o contexto dele.

   Nada aqui usa --vn-* direto. O cartao fica claro porque a view marca
   data-theme="claro" nele, e os tokens semanticos se reapontam sozinhos. */

.entrada {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.25rem 3.5rem;
  position: relative; isolation: isolate; overflow: hidden;
}

/* Camada 1 — o ceu, agora animado (piscando). Precisa ser <circle> de verdade
   no DOM (partial shared/_ceu, incluido em cada view) em vez de
   background-image: SVG usado como imagem de fundo e rasterizado uma vez e
   fica congelado -- CSS nao alcanca o que tem dentro pra animar.

   Duas passadas do mesmo campo de estrelas em escalas diferentes: a de tras
   usa um viewBox maior no proprio SVG (mesmos pontos, aparentam menores) --
   e o que da profundidade sem duplicar a lista com valores diferentes. */
.entrada__ceu {
  position: absolute; inset: -10%;
  opacity: .7;
  z-index: -2;
  pointer-events: none;
}

.entrada__ceu-camada { position: absolute; inset: 0; width: 100%; height: 100%; }
.entrada__ceu-camada--pequena { opacity: .6; }

.entrada__ceu-camada circle {
  animation: entrada-piscar var(--dur, 3.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes entrada-piscar {
  0%, 100% { opacity: calc(var(--op, 1) * .3); }
  50%      { opacity: var(--op, 1); }
}

/* Camada 2 — a orbita. Uma elipse de luz com a MESMA inclinacao da orbita do
   simbolo. Fica DESLOCADA e contida de proposito: centrada e larga ela lavava
   o fundo inteiro e o ceu perdia a profundidade. */
.entrada::after {
  content: "";
  position: absolute; left: 26%; top: 34%;
  width: min(860px, 150vw); aspect-ratio: 5 / 2;
  translate: -50% -50%;
  rotate: -16deg;
  background:
    radial-gradient(closest-side ellipse,
      color-mix(in srgb, var(--bc-primary) 30%, transparent) 0%,
      color-mix(in srgb, var(--bc-primary) 8%, transparent) 52%,
      transparent 74%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

/* Vinheta: escurece as bordas para o cartao ser o ponto mais claro da tela. */
.entrada { background-image: radial-gradient(120% 90% at 50% 45%, transparent 38%, rgb(0 0 0 / .55) 100%); }

/* ── o cartao ───────────────────────────────────────────────────────────── */

.entrada__cartao {
  width: min(408px, 100%);
  padding: 2.5rem 2.25rem 1.75rem;
  background: var(--bc-surface);
  color: var(--bc-ink);
  border-radius: calc(var(--bc-raio) + 4px);
  box-shadow: 0 24px 60px -12px rgb(0 0 0 / .55);
  text-align: center;
  animation: entrada-sobe 460ms cubic-bezier(.2,.7,.3,1) both;
}

.entrada__marca { width: min(184px, 62%); height: auto; }

.entrada__mote {
  margin: .85rem 0 1.9rem;
  color: var(--bc-ink-mut);
  font-size: .68rem; letter-spacing: .34em; text-transform: uppercase;
}

/* ── formulario ─────────────────────────────────────────────────────────── */

.entrada__form { display: grid; gap: 1rem; text-align: left; }

.entrada__campo { display: grid; gap: .38rem; }

/* O captcha da entrada (Cloudflare Turnstile). O desafio e um quadro de
   largura FIXA (300px) desenhado por eles; aqui so se reserva a altura, para
   o botao nao pular quando ele termina de carregar, e se centra no cartao.
   A margem e calculada, e nao `auto`: quando o quadro e mais largo que a
   coluna ela fica NEGATIVA dos dois lados e o quadro continua no meio (com
   `auto`, `flex` ou `justify-self` ele encostava na esquerda e sobrava para
   a direita -- medido).

   No celular o formulario tem menos que 300px (a largura da tela menos 88px
   de margem e respiro do cartao: 287px num aparelho de 375, 232px num de
   320) e o quadro vazava para fora dele. Como a largura e deles, o que da
   para fazer daqui e encolher o quadro inteiro; cada faixa usa a escala que
   cabe na tela MAIS estreita dela. Medido no navegador em 375, 360 e 320. */
.entrada__captcha { width: 300px; min-height: 65px; margin-inline: calc((100% - 300px) / 2); }
@media (max-width: 387px) { .entrada__captcha { transform: scale(.91); } }
@media (max-width: 360px) { .entrada__captcha { transform: scale(.84); } }
@media (max-width: 340px) { .entrada__captcha { transform: scale(.77); } }

.entrada__campo label {
  color: var(--bc-ink-soft);
  font-size: .8rem; font-weight: 600;
}

.entrada__campo input {
  width: 100%;
  padding: .72rem .9rem;
  font: inherit;
  font-size: 1rem;                 /* abaixo de 16px o iOS da zoom ao focar */
  color: var(--bc-ink);
  background: var(--bc-bg);
  border: 1px solid var(--bc-campo-borda);
  border-radius: var(--bc-raio);
  transition: border-color 150ms ease;
}

.entrada__campo input::placeholder { color: var(--bc-ink-faint); }

.entrada__campo input:focus-visible {
  border-color: var(--bc-focus);
  outline: 2px solid var(--bc-focus);
  outline-offset: 1px;
}

/* Senha salva no navegador: sem isto o Chrome pinta o campo com o amarelo dele
   e joga fora a cor do texto. */
.entrada__campo input:-webkit-autofill {
  -webkit-text-fill-color: var(--bc-ink);
  box-shadow: 0 0 0 1000px var(--bc-bg) inset;
}

.entrada__form input[type="submit"] {
  margin-top: .5rem;
  padding: .82rem 1rem;
  font: inherit; font-weight: 600;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border: 0; border-radius: var(--bc-raio);
  cursor: pointer;
  transition: background-color 150ms ease, translate 80ms ease;
}

.entrada__form input[type="submit"]:hover { background: var(--bc-primary-hover); }
.entrada__form input[type="submit"]:active { translate: 0 1px; }
.entrada__form input[type="submit"]:focus-visible {
  outline: 2px solid var(--bc-focus); outline-offset: 2px;
}

/* ── recados ────────────────────────────────────────────────────────────── */

.entrada__alerta {
  margin: 0 0 1.1rem;
  padding: .68rem .85rem;
  color: var(--bc-danger);
  background: color-mix(in srgb, var(--bc-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc-danger) 32%, transparent);
  border-radius: var(--bc-raio);
  font-size: .88rem; text-align: left;
}

/* "Esqueci minha senha" (15/09): a mesma tela de login agora tambem mostra
   confirmacao (link mandado, senha redefinida) -- --bc-primary, nao
   --bc-danger, para nao parecer erro. */
.entrada__aviso {
  margin: 0 0 1.1rem;
  padding: .68rem .85rem;
  color: var(--bc-primary);
  background: color-mix(in srgb, var(--bc-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc-primary) 32%, transparent);
  border-radius: var(--bc-raio);
  font-size: .88rem; text-align: left;
}

.entrada__rodape {
  margin: 1.6rem 0 0;
  color: var(--bc-ink-faint);
  font-size: .85rem;          /* leva a instrucao do celular perdido e o "Esqueceu a senha?": nao e letra miuda */
}

/* marca_tokens.css ja desliga animacao para quem pediu menos movimento. */
@keyframes entrada-sobe {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (max-width: 420px) {
  .entrada__cartao { padding: 2rem 1.5rem 1.5rem; }
}

/* ── a configuracao obrigatoria do segundo fator (06/11) ─────────────────── */

/* As duas telas da configuracao (QR + passos, e os dez codigos) cabem mal nos
   408px do cartao de login: com 520px os codigos ficam em duas colunas, e o
   passo a passo nao vira uma tripa. O texto alinha a esquerda -- passo a
   passo centralizado se le mal. */
.entrada__cartao--largo { width: min(520px, 100%); }
.entrada__conteudo { text-align: left; }

.entrada__titulo {
  margin: 0 0 .5rem;
  font-size: 1.15rem; font-weight: 700;
  color: var(--bc-ink);
}

/* Titulo logo depois da marca (convite invalido): `.entrada__titulo` nasce para ir depois de um mote, entao sozinho ficava colado. */
.entrada__titulo--sozinho { margin-top: 1.5rem; }

.entrada__texto {
  margin: 0 0 1.25rem;
  color: var(--bc-ink-mut);
  font-size: .92rem; line-height: 1.5;
}

/* O QR. Preto no branco por dentro (as cores sao do proprio SVG, de
   proposito: leitor de QR espera modulo escuro em fundo claro); aqui so o
   tamanho e a moldura. 232px deixa cada modulo com uns 3,5px na tela -- folga
   para a camera do celular. */
.entrada__qr {
  display: block;
  width: min(232px, 100%); height: auto; aspect-ratio: 1;
  margin: .25rem 0 1rem;
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
}

/* "Continuar": um link (a sessao ja abriu; e so ir para o inicio) com a cara
   do botao do formulario de entrada. */
.entrada__botao {
  display: block;
  margin-top: 1.25rem;
  padding: .82rem 1rem;
  font-weight: 600; text-align: center; text-decoration: none;
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border-radius: var(--bc-raio);
  transition: background-color 150ms ease;
}
.entrada__botao:hover { background: var(--bc-primary-hover); }
.entrada__botao:focus-visible { outline: 2px solid var(--bc-focus); outline-offset: 2px; }