/* Gridian WMS — tela de entrada. "Spatial Operations".
 *
 * A IDEIA, e por que ela e do Gridian e nao de outro produto
 * O nome e uma grade. O produto enderec,a posic,oes. Entao a tela de entrada mostra uma
 * CARTOGRAFIA OPERACIONAL abstrata: corredores, celulas de endereco, coordenadas e uma
 * unica rota atravessando a malha ate uma posic,ao — o desenho do que o sistema faz,
 * nao uma foto de galpao nem um gradiente decorativo.
 *
 * A composic,ao e assimetrica e ocupa a tela inteira: campo operacional escuro a
 * esquerda, superficie de autenticac,ao branca a direita. A superficie branca NAO e um
 * cartao flutuando sobre o fundo — ela e metade da pagina, encostada na borda, com
 * espac,o negativo generoso. Cartao centralizado em fundo cinza era exatamente o que
 * esta tela deixou de ser.
 *
 * NADA AQUI DEPENDE DE REDE
 * Sem fonte externa (a CSP e `font-src 'self'`), sem imagem de banco, sem video, sem
 * biblioteca. A malha e SVG inline; a profundidade vem de opacidade e escala, nao de
 * WebGL. Se o JavaScript falhar, o formulario continua desenhado e utilizavel.
 *
 * MOVIMENTO
 * Uma entrada de ~600 ms e uma rota que avanc,a devagar. Nada pulsa, nada quica, nada
 * se move embaixo do formulario. Com `prefers-reduced-motion` a tela fica inteira,
 * apenas parada — a rota aparece desenhada, nao sumida.
 */

:root{
  --entrada-fundo: #0e2126;        /* grafite esverdeado profundo */
  --entrada-fundo-2: #123037;
  --entrada-linha: #2b4d55;
  --entrada-tinta: #e8f2f4;
  --entrada-tinta-fraca: #8fa9af;
  --entrada-ambar: #feb602;        /* o ambar da propria logo */
  --entrada-branco: #ffffff;
  --entrada-texto: #10242a;
  --entrada-apoio: #5a7077;
  --entrada-borda: #dde5e7;
  --entrada-foco: #0f6b78;
  --entrada-erro: #b3261e;
  --entrada-fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;
  --entrada-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}

/* O #login deixa de ser cartao: vira a pagina. */
#login.entrada{
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 57fr 43fr;
  margin: 0;
  padding: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--entrada-branco);
  font-family: var(--entrada-fonte);
  overflow: auto;
  z-index: 10;
}
#login.entrada.hidden{ display: none; }

/* ------------------------------------------------ campo operacional (lado escuro) */
.entrada__campo{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 18% 12%, var(--entrada-fundo-2) 0%, transparent 60%),
    var(--entrada-fundo);
  color: var(--entrada-tinta);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4.2vw, 64px);
}

/* A malha cobre o campo e sangra pelas bordas: e um recorte de algo maior, nao um
 * desenho centralizado com moldura. */
.entrada__malha{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.entrada__marca{ position: relative; width: clamp(150px, 17vw, 236px); line-height: 0; }
/* O atributo width="2172" da logo e a proporcao para o navegador reservar espaco;
 * sem esta regra ele vira a largura de renderizacao e a marca estoura a coluna. */
.entrada__marca img,
.entrada__acesso .marca img{ display: block; width: 100%; height: auto; }

.entrada__lema{
  position: relative;
  margin: 0;
  /* O recuo do veu entra na medida: sem isto a primeira linha ficava com
   * uma palavra orfa. */
  max-width: 19ch;
  /* A rota passa por tras do lema. Sem este veu curto o texto disputa contraste com a
   * linha ambar justamente na palavra mais importante. O veu e do fundo, nao uma caixa:
   * ele se dissolve antes da borda. */
  padding: 18px 64px 20px 0;
  margin: 0 0 0 -40px;
  padding-left: 40px;
  /* O veu tem de sumir ANTES da borda, senao vira retangulo sobre a malha. Elipse larga
   * e parada final em zero: a transicao acontece dentro da area, nao no limite dela. */
  background: radial-gradient(60% 120% at 22% 50%,
              rgba(14,33,38,.92) 0%, rgba(14,33,38,.78) 38%,
              rgba(14,33,38,.34) 68%, rgba(14,33,38,0) 100%);
  font-size: clamp(24px, 2.5vw, 40px);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--entrada-tinta);
}
.entrada__lema span{ display: block; color: var(--entrada-tinta-fraca); }

.entrada__rodape{
  position: relative;
  display: flex;
  gap: 26px;
  align-items: baseline;
  font-family: var(--entrada-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--entrada-tinta-fraca);
  text-transform: uppercase;
}
.entrada__rodape b{ color: var(--entrada-ambar); font-weight: 600; }

/* ------------------------------------------- superficie de autenticacao (branca) */
.entrada__acesso{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 76px) clamp(24px, 4.4vw, 88px);
  background: var(--entrada-branco);
}
.entrada__forma{ width: 100%; max-width: 380px; }

.entrada__acesso .marca{ width: 148px; margin-bottom: clamp(22px, 3.2vh, 38px); }

.entrada__micro{
  margin: 0 0 10px;
  font-family: var(--entrada-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--entrada-apoio);
}
.entrada__titulo{
  margin: 0 0 8px;
  font-size: clamp(23px, 2.2vw, 29px);
  line-height: 1.2;
  font-weight: 640;
  letter-spacing: -.022em;
  color: var(--entrada-texto);
}
.entrada__apoio{
  margin: 0 0 clamp(22px, 3.4vh, 34px);
  font-size: 14px;
  line-height: 1.5;
  color: var(--entrada-apoio);
}

.entrada__campo-form{ margin-bottom: 16px; }
.entrada__rotulo{
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--entrada-texto);
}

#login.entrada input[type="text"],
#login.entrada input[type="email"],
#login.entrada input[type="password"]{
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--entrada-borda);
  border-radius: 10px;
  background: #fff;
  /* 16px evita o zoom automatico do iOS ao focar o campo. */
  font: 400 16px/1.4 var(--entrada-fonte);
  color: var(--entrada-texto);
  transition: border-color .16s ease, box-shadow .16s ease;
}
#login.entrada input::placeholder{ color: #9bacb1; }
#login.entrada input:hover{ border-color: #c3d0d3; }
#login.entrada input:focus{
  outline: none;
  border-color: var(--entrada-foco);
  box-shadow: 0 0 0 3px rgba(15, 107, 120, .16);
}
/* O foco visivel tambem precisa existir para quem navega por teclado. */
#login.entrada input:focus-visible{ outline: 2px solid transparent; }

.entrada__senha{ position: relative; }
.entrada__senha input{ padding-right: 46px; }
.entrada__olho{
  position: absolute;
  right: 6px;
  /* O olho e ancorado pelo RODAPE do bloco — que coincide com a base do input,
   * ultimo filho de .entrada__senha — e recebe a mesma altura do campo. Assim ele
   * fica centralizado na vertical DO INPUT, e nao do conjunto rotulo + input, que
   * era o que o empurrava para cima. Horizontal (right: 6px) segue igual. */
  bottom: 0;
  height: 48px;
  transform: none;
  display: grid;
  place-items: center;
  width: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--entrada-apoio);
  cursor: pointer;
}
.entrada__olho:hover{ background: #f2f6f7; color: var(--entrada-texto); }
.entrada__olho:focus-visible{ outline: 2px solid var(--entrada-foco); outline-offset: 1px; }
.entrada__olho svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }

#login.entrada button.entrada__enviar{
  width: 100%;
  min-height: 50px;
  margin: 8px 0 0;
  border: 0;
  border-radius: 10px;
  background: var(--entrada-texto);
  color: #fff;
  font: 640 15px/1 var(--entrada-fonte);
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
#login.entrada button.entrada__enviar:hover{ background: #1b3a42; }
#login.entrada button.entrada__enviar:active{ transform: translateY(1px); }
#login.entrada button.entrada__enviar:focus-visible{
  outline: 2px solid var(--entrada-foco); outline-offset: 2px;
}
#login.entrada button.entrada__enviar[aria-busy="true"]{
  background: #43606a; cursor: progress;
}

#login.entrada #err{
  margin: 14px 0 0;
  min-height: 1em;
  font-size: 13px;
  line-height: 1.45;
  color: var(--entrada-erro);
}
#login.entrada #err:empty{ margin-top: 0; }

/* ------------------------------------------------------------------ movimento */
@keyframes entrada-surge{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }
@keyframes entrada-malha{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes entrada-rota{ to{ stroke-dashoffset: 0; } }

.entrada__malha{ animation: entrada-malha .9s ease-out both; }
.entrada__marca, .entrada__lema, .entrada__rodape,
.entrada__acesso .marca, .entrada__micro, .entrada__titulo,
.entrada__apoio, .entrada__campo-form, .entrada__enviar{
  animation: entrada-surge .55s cubic-bezier(.22,.7,.3,1) both;
}
.entrada__lema{ animation-delay: .06s; }
.entrada__rodape{ animation-delay: .12s; }
.entrada__micro{ animation-delay: .05s; }
.entrada__titulo{ animation-delay: .09s; }
.entrada__apoio{ animation-delay: .13s; }
.entrada__campo-form{ animation-delay: .17s; }
.entrada__enviar{ animation-delay: .22s; }

.entrada__rota{
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: entrada-rota 2.6s cubic-bezier(.35,0,.15,1) .45s forwards;
}

/* ------------------------------------------------------------- 1366x768 e menores */
@media (max-width: 1500px){
  #login.entrada{ grid-template-columns: 54fr 46fr; }
}
@media (max-height: 800px){
  .entrada__acesso .marca{ margin-bottom: 26px; }
  .entrada__apoio{ margin-bottom: 20px; }
}

/* --------------------------------------------------------------------- tablet */
@media (max-width: 1024px){
  #login.entrada{ grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .entrada__campo{
    min-height: 210px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 32px;
  }
  .entrada__lema{ font-size: 21px; max-width: 20ch; }
  .entrada__rodape{ display: none; }
  .entrada__acesso{ padding: 40px 32px 56px; align-items: center; }
}

/* -------------------------------------------------------- celular e coletor
 * Aqui o formulario e o protagonista: a arte vira uma faixa curta, e some de vez nas
 * telas mais baixas. O operador pode estar de pe, com o equipamento numa mao so. */
@media (max-width: 720px){
  #login.entrada{ position: absolute; grid-template-rows: auto 1fr; }
  .entrada__campo{
    min-height: 0;
    padding: 18px 20px;
    justify-content: flex-start;
  }
  .entrada__lema, .entrada__rodape{ display: none; }
  .entrada__marca{ width: 138px; }
  .entrada__malha{ opacity: .5; }
  /* No celular o formulario comeca logo abaixo da faixa: centralizar na vertical
   * empurrava o campo para o meio da tela e criava um vao morto no topo. */
  .entrada__acesso{ padding: 26px 20px 44px; justify-content: flex-start; }
  .entrada__acesso .marca{ display: none; }   /* a logo ja esta na faixa acima */
  .entrada__forma{ max-width: 460px; }
  .entrada__titulo{ font-size: 22px; }
}

@media (max-width: 420px){
  .entrada__campo{ padding: 14px 16px; }
  .entrada__marca{ width: 118px; }
  .entrada__acesso{ padding: 24px 16px 40px; }
  #login.entrada input[type="text"],
  #login.entrada input[type="email"],
  #login.entrada input[type="password"]{ min-height: 52px; }
  #login.entrada button.entrada__enviar{ min-height: 54px; }
  /* acompanha a altura maior do campo nesta faixa */
  .entrada__senha .entrada__olho{ height: 52px; }
}

/* Coletor deitado ou tela muito baixa: a arte sai inteira para o teclado caber. */
@media (max-height: 560px) and (max-width: 900px){
  .entrada__campo{ display: none; }
  #login.entrada{ grid-template-rows: 1fr; }
  .entrada__acesso{ padding: 20px 18px 32px; }
  .entrada__acesso .marca{ display: block; width: 132px; margin-bottom: 18px; }
}

/* ----------------------------------------------------------- reducao de movimento
 * Sem animacao a tela continua COMPLETA: a rota aparece inteira, nao ausente. */
@media (prefers-reduced-motion: reduce){
  .entrada__malha, .entrada__marca, .entrada__lema, .entrada__rodape,
  .entrada__acesso .marca, .entrada__micro, .entrada__titulo,
  .entrada__apoio, .entrada__campo-form, .entrada__enviar{
    animation: none;
  }
  .entrada__rota{ stroke-dashoffset: 0; animation: none; }
  #login.entrada input, #login.entrada button{ transition: none; }
}