/* Tela de entrada: marca à esquerda, formulário à direita.
 *
 * A tela inteira cabe na janela e não rola. Login que rola é login com
 * informação demais, quem chega aqui já decidiu entrar, e cada elemento a
 * mais é um obstáculo entre a pessoa e o painel dela. */

.entrada {
  height: 100dvh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 940px) { .entrada { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ marca -- */

.entrada-marca {
  position: relative; overflow: hidden;
  background:
    radial-gradient(76% 56% at 14% 10%, rgba(34,197,94,.20), transparent 62%),
    radial-gradient(62% 50% at 94% 96%, rgba(16,185,129,.15), transparent 58%),
    #0F172A;
  color: #fff;
  padding: clamp(var(--e6), 4.5vw, var(--e8));
  display: flex; flex-direction: column; justify-content: space-between;
}
@media (max-width: 940px) { .entrada-marca { display: none; } }

/* Grade fina ao fundo: textura sem competir com o texto. */
.entrada-marca::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(78% 68% at 26% 22%, #000, transparent 78%);
}
.entrada-marca > * { position: relative; }

.marca-painel { height: 38px; }

.entrada-marca h1 {
  font-size: clamp(30px, 3.1vw, 44px); line-height: 1.12;
  letter-spacing: -.03em; color: #fff; max-width: 12ch;
}
.entrada-marca h1 em { font-style: normal; color: #4ade80; }

.assinatura { color: rgba(255,255,255,.36); letter-spacing: .05em; }

/* -------------------------------------------------------- formulário -- */

.entrada-forma {
  display: grid; place-items: center;
  padding: var(--e5); background: var(--papel);
}
.entrada-caixa { width: min(364px, 100%); display: flex; flex-direction: column; gap: var(--e5); }

/* Voltar ao site. Discreto de propósito: é uma saída, não uma ação, competir
   com o "Entrar" seria empurrar para fora quem veio para dentro. Sem
   movimento no hover, como o resto dos botões; o que muda é a cor. */
.voltar-site {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 550; color: var(--tinta-2);
  padding: 5px 10px 5px 6px; margin-left: -6px;
  border-radius: var(--r2);
  transition: color .16s var(--curva), background .16s var(--curva);
}
.voltar-site:hover { color: var(--tinta); background: var(--realce); text-decoration: none; }
.voltar-site svg { width: 16px; height: 16px; }
.marca-caixa { height: 34px; }

.so-estreito { display: none; }
@media (max-width: 940px) { .so-estreito { display: block; } }

.entrada-caixa h2 { font-size: 26px; letter-spacing: -.025em; }
.entrada-caixa input { height: 44px; }

.rotulo-senha { margin-bottom: var(--e2); }
.rotulo-senha label { margin-bottom: 0; }
.capslock { margin-top: var(--e2); color: var(--alerta-tinta); }

#enviar[aria-busy="true"] { opacity: .75; cursor: progress; }

.pe-caixa { border-top: 1px solid var(--linha); padding-top: var(--e4); }