/* ══════════════════════════════════════════════════════════════
   TELA DE ENTRADA — o arranjo do desenho: o painel preto à esquerda,
   o formulário à direita

   A única tela sem o shell: quem não entrou não tem para onde
   navegar. Acima de 900px os dois lados dividem a largura, como no
   desenho (440 e 520 de base); abaixo, o painel vira uma faixa no
   topo e o formulário vem logo embaixo, à vista sem rolar.

   Cor, letra e espaço de tokens.css. Os números crus são os do recorte
   da marca, como no menu (shell.css), e os do desenho das linhas.
   ══════════════════════════════════════════════════════════════ */

.login-corpo { margin: 0; background: var(--tela); }

.login {
  display: flex;
  min-height: 100vh;
  /* no celular, a altura com a barra do navegador à vista */
  min-height: 100dvh;
}

/* ── O PAINEL DA MARCA ────────────────────────────────────────── */
.login-painel {
  flex: 1 1 calc(var(--e-8) * 9 + var(--e-3));                    /* 440 */
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--e-7) + var(--e-2));                         /* 36 */
  padding: calc(var(--e-8) - var(--e-2)) calc(var(--e-8) - var(--e-2)) calc(var(--e-7) + var(--e-2));   /* 44 44 36 */
  background: var(--rail);
  color: var(--rail-ink);
}
/* Tudo o que se lê fica por cima das linhas. */
.login-logo-caixa,
.login-chamada,
.login-painel-pe { position: relative; }

/* O recorte do desenho, uma vez e meia o do menu: a caixa de 198x72 mostra
   o pedaço da arte de 1920x1080 em que a marca está. Os números são os do
   recorte do menu (shell.css), multiplicados por 1,5. */
.login-logo-caixa {
  flex: none;
  width: 198px;
  height: 72px;
  overflow: hidden;
}
.login-logo-caixa img {
  position: absolute;
  left: -63px;
  top: -49px;
  width: 324px;
  height: 182px;
  display: block;
}

.login-chamada {
  margin-top: auto;
  max-width: calc(var(--e-8) * 9 - var(--e-4));                    /* 420 */
}
.login-faixa {
  height: calc(var(--e-2) + 1px);                                  /* 5 */
  border-radius: var(--e-1);
  background: var(--paleta-degrade);
}
.login-titulo {
  margin: calc(var(--e-6) - var(--e-1)) 0 0;                       /* 22 */
  font-family: var(--fonte-num);
  font-size: var(--fs-numerao);
  font-weight: var(--peso-normal);
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--rail-ink);
  text-wrap: pretty;
}
.login-descricao {
  margin: var(--e-4) 0 0;
  font-size: var(--fs-dado);
  line-height: 1.6;
  color: var(--rail-ink-2);
  text-wrap: pretty;
}

.login-painel-pe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  margin-top: var(--e-7);
  padding-top: calc(var(--e-5) + var(--e-1));                      /* 18 */
  border-top: 1px solid var(--rail-linha);
  font-size: var(--fs-rotulo);
  color: var(--rail-ink-2);
}
.login-versao {
  margin-left: auto;
  font-family: var(--fonte-num);
  white-space: nowrap;
}

/* ── AS LINHAS EM MOVIMENTO ───────────────────────────────────────
   Decoração: o leitor de tela não as lê (aria-hidden no HTML) e o clique
   passa por elas. Moram na faixa do meio do painel, entre a marca e o
   texto, e a máscara as apaga nas duas bordas — o texto de baixo nunca
   fica sobre elas, e por isso o contraste dele é o do preto do painel.

   O feixe é o do site da GS3, com as mesmas camadas, passos, espessuras e
   intensidades: cada camada RESPIRA (sobe e desce devagar) e o desenho
   dentro dela CORRE metade da própria largura e recomeça, sem emenda,
   porque a linha e a cor se repetem a cada período. O movimento é só de
   transform, que o navegador faz sem refazer a página. Quando a aba ou o
   painel saem de vista, o login-ondas.js põe o data-parada e tudo para.

   A LARGURA DO DESENHO é a que dá ao painel a curva do site: lá um período
   ocupa a tela inteira, e o painel tem perto da metade dela, então o SVG
   tem quatro vezes a largura da camada, e não duas. Os números crus desta
   parte são os do desenho das linhas: espessura, desfoque e intensidade. */
.login-ondas {
  position: absolute;
  left: 0;
  right: 0;
  top: 17%;
  height: 51%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--rail) 22%, var(--rail) 70%, transparent);
          mask-image: linear-gradient(to bottom, transparent, var(--rail) 22%, var(--rail) 70%, transparent);
}
.login-ondas-cores { position: absolute; width: 0; height: 0; }
.login-onda-cor-1 { stop-color: var(--paleta-laranja); }
.login-onda-cor-2 { stop-color: var(--paleta-rosa); }
.login-onda-cor-3 { stop-color: var(--paleta-roxo); }

.login-onda-camada {
  position: absolute;
  inset: 0;
  animation: login-respirar-a 13s ease-in-out infinite;
  will-change: transform;
}
.login-onda-camada-2 { animation: login-respirar-b 17s ease-in-out -5s infinite; }
.login-onda-camada-3 { animation: login-respirar-c 11s ease-in-out -2s infinite; }
.login-onda-camada-4 { animation: login-respirar-b 19s ease-in-out -9s infinite alternate-reverse; }
.login-onda-camada-5 { animation: login-respirar-a 15s ease-in-out -7s infinite alternate-reverse; }
.login-onda-camada-6 { animation: login-respirar-c 14s ease-in-out -3s infinite; }

.login-onda {
  display: block;
  width: 400%;
  height: 100%;
  animation: login-correr 26s linear infinite;
  will-change: transform;
}
.login-onda-camada-1 .login-onda { animation-duration: 24s; }
.login-onda-camada-2 .login-onda { animation-duration: 27s; }
.login-onda-camada-3 .login-onda { animation-duration: 25s; }
.login-onda-camada-4 .login-onda { animation-duration: 28s; }

.login-onda path {
  fill: none;
  stroke: url(#login-onda-cor);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.login-onda-fina { stroke-width: 1; }
.login-onda .login-onda-brilho { stroke-width: 2.2; }
.login-onda .login-onda-aura {
  stroke-width: 7;
  opacity: .55;
  filter: url(#login-onda-desfoque);
}

@keyframes login-correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes login-respirar-a {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(calc(var(--e-5) * -1)) scaleY(1.05); }
}
@keyframes login-respirar-b {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(calc(var(--e-4) + var(--e-1))) rotate(.5deg); }
}
@keyframes login-respirar-c {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(calc(var(--e-3) + var(--e-1))) scaleY(.95); }
}

.login-ondas[data-parada] .login-onda,
.login-ondas[data-parada] .login-onda-camada { animation-play-state: paused; }

/* Quem pede menos movimento vê as linhas paradas, como uma imagem. */
@media (prefers-reduced-motion: reduce) {
  .login-onda,
  .login-onda-camada { animation: none; will-change: auto; }
}

/* ── O LADO DO FORMULÁRIO ─────────────────────────────────────── */
.login-lado {
  flex: 1 1 calc(var(--e-8) * 11 - var(--e-3));                   /* 520 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--e-5) + var(--e-2));                          /* 20 */
}

.login-topo { display: flex; justify-content: flex-end; flex: none; }
/* Os ícones desta tela têm 16px, como no desenho. O .ic, que dá o tamanho
   nas telas com o shell, mora no shell.css, que esta tela não carrega. */
.login-ic { width: var(--e-5); height: var(--e-5); flex: none; }

/* A lua no claro, o sol no escuro: o ícone mostra para onde o botão leva. */
.login-tema-sol { display: none; }
[data-tema="escuro"] .login-tema-lua { display: none; }
[data-tema="escuro"] .login-tema-sol { display: block; }

.login-caixa {
  flex: 1 1 auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: calc(var(--e-8) * 8 + var(--e-5));                     /* 400 */
  padding: calc(var(--e-6) + var(--e-2)) 0;                        /* 28 */
}

.login-entrar {
  margin: 0;
  font-family: var(--fonte-num);
  font-size: var(--fs-tela);
  font-weight: var(--peso-medio);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--tinta);
}
.login-sub {
  margin: calc(var(--e-2) + 1px) 0 0;                              /* 5 */
  font-size: var(--fs-meta);
  color: var(--tinta-2);
}

/* O erro é o .aviso do sistema, com a régua lateral de sempre; aqui só o
   lugar e a letra do desenho. */
.login-erro { margin: calc(var(--e-5) + var(--e-2)) 0 0; font-size: var(--fs-meta); }

/* O CAMPO do sistema, com a altura e o fundo do desenho desta tela: 46px,
   no tom do quadro e com a sombra dele, porque aqui ele fica direto sobre o
   fundo da tela, sem quadro em volta. A borda é a do sistema. */
.login-form {
  --campo-h: calc(var(--e-8) - var(--e-1));                        /* 46 */
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  margin-top: var(--e-6);
}
.login-form .campo { gap: calc(var(--e-3) - var(--e-1)); }        /* 6, perto dos 7 */
.campo-caixa.login-campo {
  background: var(--bloco);
  box-shadow: var(--sh-quadro);
}
.login-form .campo-icone { width: var(--e-5); height: var(--e-5); }
.login-form .campo-icone ~ .campo-caixa { padding-left: calc(var(--e-4) + var(--e-5) + var(--e-4) - var(--e-1)); }   /* 38 */

.login-botao {
  width: 100%;
  height: var(--e-8);
  margin-top: calc(var(--e-1) * 3);                                /* +16 do vão = 22 */
  gap: calc(var(--e-3) + 1px);
  font-weight: var(--peso-negrito);
}

.login-nota {
  margin-top: var(--e-6);
  padding-top: calc(var(--e-5) + var(--e-1));                      /* 18 */
  border-top: 1px solid var(--linha);
  font-size: var(--fs-rotulo);
  line-height: 1.6;
  color: var(--tinta-2);
}
.login-nota p { margin: 0; text-wrap: pretty; }
.login-nota p + p { margin-top: var(--e-3); }

.login-rodape {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--e-1);
  font-size: var(--fs-rotulo);
  color: var(--tinta-2);
}

/* ══ TELA ESTREITA ═════════════════════════════════════════════════
   O painel vira uma faixa no topo: a marca do tamanho do menu, a faixa
   em degradê, o título e o texto, e as linhas em movimento numa tira
   embaixo deles, só as que o site também deixa no celular e sem
   respirar. O formulário vem logo abaixo. */
@media (max-width: 900px) {
  .login { flex-direction: column; }
  .login-painel {
    flex: none;
    row-gap: var(--e-4);
    padding: var(--e-5) var(--e-5) var(--e-8);                      /* a tira das linhas embaixo: 48 */
  }
  /* o recorte do menu, sem a multiplicação */
  .login-logo-caixa { width: 132px; height: 48px; }
  .login-logo-caixa img { left: -42px; top: -33px; width: 216px; height: 121px; }
  .login-chamada { margin-top: 0; }
  .login-titulo { margin-top: var(--e-4); font-size: var(--fs-tela); }
  .login-descricao { margin-top: var(--e-3); font-size: var(--fs-meta); line-height: 1.5; }
  .login-painel-pe { display: none; }

  .login-ondas {
    top: auto;
    bottom: var(--e-3);
    height: calc(var(--e-8) - var(--e-3));                        /* 40 */
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--rail) 30%, var(--rail) 70%, transparent);
            mask-image: linear-gradient(to bottom, transparent, var(--rail) 30%, var(--rail) 70%, transparent);
  }
  .login-onda-so-largo { display: none; }
  .login-onda-camada { animation: none; will-change: auto; }

  .login-lado { flex: 1 0 auto; padding: var(--e-4) var(--e-5) var(--e-5); }
  .login-caixa { justify-content: flex-start; padding: 0 0 var(--e-6); }
  .login-topo { margin-bottom: calc(var(--e-3) * -1); }
  /* o alvo de toque de 44, como os botões do topo nas outras telas */
  .login-topo .botao-icone { width: calc(var(--e-8) - var(--e-2)); height: calc(var(--e-8) - var(--e-2)); }
  .login-entrar { font-size: var(--fs-titulo); }
  .login-form { margin-top: var(--e-5); }
  .login-nota { margin-top: var(--e-5); }
}

/* O CELULAR DEITADO: a faixa fica só com a marca e o título, sem o texto e
   sem as linhas, para o formulário caber na altura que sobra. */
@media (max-width: 900px) and (max-height: 500px) {
  .login-painel { padding-bottom: var(--e-5); }
  .login-descricao,
  .login-ondas { display: none; }
}