/* public/css/entrada.css — telas de entrada (login, cadastro, senha e
   confirmação de e-mail). Fase 2 do redesenho (07/10/2026). Só tokens.
   Computador: imagem quadrada da marca à esquerda, formulário à direita.
   Celular: imagem no topo e o formulário subindo 20px por cima dela. */

.entrada { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--e-6); }

.entrada__caixa {
  display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 420px);
  width: 100%; max-width: 960px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--r-xg); overflow: hidden; box-shadow: var(--sombra-flutuante);
}

/* A marca aparece sempre inteira (contain). Quando o formulário é mais alto
   que a coluna é larga (ex.: cadastro em 720–960px), a sobra é preenchida pela
   própria arte desfocada, sem emenda de cor. */
.entrada__moldura { position: relative; overflow: hidden; min-height: 100%; background: var(--marca); }
.entrada__moldura::before {
  content: ''; position: absolute; inset: -32px;
  background: url('/img/marca-login.webp') center / cover; filter: blur(28px);
}
.entrada__arte {
  position: relative; display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1;
  object-fit: contain;
  /* Bordas de cima e de baixo se fundem no desfoque, sem linha dura. Na máscara
     só a opacidade conta: "black" aqui não é cor da paleta. */
  -webkit-mask-image: linear-gradient(transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(transparent, black 5%, black 95%, transparent);
}

.entrada__form { display: flex; flex-direction: column; justify-content: center; padding: 48px 44px; }
.entrada__sub { margin: 6px 0 26px; font-size: 14px; color: var(--texto-2); }
/* Olho para ver a senha (08/10/2026): botão dentro do campo, à direita. */
.entrada__senha { position: relative; }
.entrada__senha .ui-entrada { padding-right: 48px; }
.entrada__olho {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: grid; place-items: center; width: 38px; height: 38px;
  background: none; border: none; border-radius: var(--r-p); cursor: pointer; color: var(--texto-2);
}
.entrada__olho:hover { color: var(--texto); background: var(--superficie-2); }
.entrada__olho:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.entrada__olho .ui-icone { width: 20px; height: 20px; }
.entrada__esqueci { margin: -4px 0 20px; text-align: right; font-size: 13px; }
.entrada__rodape { margin: 20px 0 0; text-align: center; font-size: 13.5px; color: var(--texto-2); }

/* Escondidas até o JS mostrar (style.display = 'block'). Vem depois do
   componentes.css, então vence o display:flex do .ui-alerta. */
.entrada__msg { display: none; margin-top: var(--e-3); }

.entrada__status {
  display: inline-grid; place-items: center; width: 56px; height: 56px;
  margin-bottom: var(--e-4); border-radius: 16px;
  background: var(--marca-suave); color: var(--marca-texto);
}
.entrada__status .ui-icone { width: 28px; height: 28px; }
.entrada__status--ok { background: var(--ok-suave); color: var(--ok); }
.entrada__status--falta { background: var(--falta-suave); color: var(--falta); }

/* Até 700px (celular) a imagem vai para o topo. Acima disso, imagem e formulário
   ainda cabem lado a lado, com a imagem encolhendo. */
@media (max-width: 700px) {
  .entrada { display: block; padding: 0; }
  .entrada__caixa {
    grid-template-columns: 1fr; grid-template-rows: auto 1fr; max-width: none; min-height: 100vh; min-height: 100dvh;
    border: 0; border-radius: 0; box-shadow: none;
  }
  /* Proporção em vez de altura fixa: numa tela mais larga a faixa cresce e não corta a marca. */
  .entrada__arte { height: auto; aspect-ratio: 5 / 4; max-height: 360px; object-fit: cover; object-position: center 42%; -webkit-mask-image: none; mask-image: none; }
  .entrada__form {
    position: relative; justify-content: flex-start; margin-top: -20px; padding: 26px 20px 32px;
    border-radius: 22px 22px 0 0; background: var(--superficie);
  }
}

/* Saídas depois do cadastro: conectar o Telegram ou entrar no app (08/10/2026). */
.entrada__saidas { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-4); }

/* === Aurora (27/10/2026) ===
   A caixa vira vidro sobre o brilho do fundo, com um halo violeta em volta;
   título maior e o ícone de status em degradê. No celular o formulário é
   vidro por cima da arte do globo. */
.entrada__caixa {
  background: var(--vidro-forte); border-color: var(--vidro-borda);
  box-shadow: var(--sombra-flutuante), var(--halo);
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
}
.entrada__form .ui-titulo { font-size: 32px; letter-spacing: -0.04em; }
.entrada__status { background: var(--marca) var(--grad-marca); color: var(--sobre-marca); box-shadow: var(--brilho-marca); }
.entrada__status--ok { background: var(--ok-suave); color: var(--ok); box-shadow: none; }
.entrada__status--falta { background: var(--falta-suave); color: var(--falta); box-shadow: none; }
@media (max-width: 700px) {
  .entrada__caixa { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .entrada__form { background: var(--vidro-forte); -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque); }
}