/* ==========================================================================
   Login "caixa de vidro" — TODAS as telas de acesso (painel, GPD,
   Almoxarifado, Produção, Recibo, Margem Região). Nasceu no GPD em
   11/09/2026 (desenho trazido pelo usuário) e no mesmo dia foi pra todas:
   "é para todos os acessos". Comportamento em js/login-vidro.js.

   Caixa fechada mostrando só o título; um toque abre e revela o formulário.
   Um feixe de luz gira no aro. Tema claro (padrão) e escuro, com botão.

   TRÊS DESVIOS DO DESENHO ORIGINAL, todos de propósito:

   1. SEM backdrop-filter. O original borrava o vidro (blur 6px) por cima dos
      feixes. Neste projeto backdrop-filter num ancestral já deixou texto de
      botão/campo ilegível no WebView do Android várias vezes (ver a nota no
      topo de css/styles.css e o .auth-gate de lá). Aqui o formulário inteiro
      mora dentro do vidro — seria exatamente o caso do bug.

   2. O feixe gira SÓ NO ARO. No original os feixes eram um cone de 200% do
      tamanho da caixa, e o vidro (7% de branco no escuro) deixava ver as
      faixas atravessando o card inteiro. Pedido do usuário: "no modo escuro
      deixe circulando em tom de verde em torno do card, não como está agora".
      O .gl-rim usa a máscara de borda (content-box xor) e só o anel de 2px
      aparece — o vidro por dentro fica limpo nos dois temas.

   3. Título no idioma do painel (pedido do usuário): selo em mono com o
      ponto aceso + título em Oswald caixa-alta, o mesmo do .auth-eyebrow /
      .auth-card h2 do painel comercial — no lugar do serifado do desenho.

   As cores de tema vivem no próprio #gpdAuthGate (data-theme nele, NÃO no
   <html>): o tema do login não pode vazar pro GPD depois de entrar.
   ========================================================================== */

.gl-gate{
  --base:#E6E9EE; --ink:#14130F; --ink2:#3F3E39; --ink3:#5A5954;
  --glass:rgba(255,255,255,.88); --rim:rgba(255,255,255,1); --shade:rgba(60,70,90,.16);
  --drop:rgba(40,45,60,.16); --drop2:rgba(40,45,60,.07); --sheen:rgba(255,255,255,.55);
  --inner:rgba(225,229,236,.9); --innershade:rgba(60,70,90,.22);
  --blue:rgba(150,190,255,.6); --blue-ink:#042C53; --blue-glow:rgba(60,120,240,.30);
  /* verde no aro também no claro (pedido do usuário, 11/09/2026) — um tom
     mais fechado que o do escuro, senão some contra o fundo quase branco */
  --beam1:rgba(30,150,90,1); --beam2:rgba(70,200,140,.95);
  --field:rgba(255,255,255,.7); --err:#A32D2D; --ok:#1E7A4C;
  --eyebrow:#1D5E86; --eyebrow-glow:rgba(29,94,134,.45);
  --halo:rgba(38,140,88,.32);
  --title:#0B0A08; --title-shadow:rgba(255,255,255,.6);

  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
  background:var(--base); color:var(--ink);
  font-family:Manrope, Inter, system-ui, sans-serif; font-size:15px;
  transition:background .35s ease, color .35s ease;
  -webkit-tap-highlight-color:transparent;
  overflow:auto;
}
.gl-gate[data-theme="dark"]{
  --base:#15171B; --ink:#F1F1EE; --ink2:#C4C4BE; --ink3:#6E6E69;
  --glass:rgba(255,255,255,.07); --rim:rgba(255,255,255,.22); --shade:rgba(0,0,0,.45);
  --drop:rgba(0,0,0,.55); --drop2:rgba(0,0,0,.35); --sheen:rgba(255,255,255,.28);
  --inner:rgba(0,0,0,.35); --innershade:rgba(0,0,0,.6);
  --blue:rgba(90,140,255,.32); --blue-ink:#B5D4F4; --blue-glow:rgba(70,130,255,.35);
  /* verde no aro (pedido do usuário) — o --good do painel e um verde-menta
     mais claro, pra o feixe ter cabeça e cauda */
  --beam1:rgba(96,200,146,1); --beam2:rgba(160,242,200,.95);
  --field:rgba(255,255,255,.06); --err:#F09595; --ok:#7FD3A6;
  --eyebrow:#86CBEE; --eyebrow-glow:rgba(110,190,235,.8);
  --halo:rgba(79,174,124,.45);
  --title:#FFFFFF; --title-shadow:rgba(0,0,0,.55);
}

/* ---- botão de tema -------------------------------------------------- */
.gl-theme{
  position:fixed; top:18px; right:18px; z-index:5;
  height:44px; padding:0 16px 0 12px; border-radius:999px;
  display:flex; align-items:center; gap:8px;
  font:600 13px Manrope, Inter, sans-serif; color:var(--ink);
  cursor:pointer; user-select:none;
  border:1px solid var(--rim); background:var(--glass);
  box-shadow:inset 0 1px 1px var(--sheen), inset 0 -3px 6px var(--shade), 0 12px 26px var(--drop);
}
.gl-theme i{ font-style:normal; font-size:18px; line-height:1; }
.gl-theme:focus-visible{ outline:2px solid var(--beam1); outline-offset:3px; }

/* ---- a caixa ------------------------------------------------------- */
.gl-box{
  position:relative; isolation:isolate;
  width:380px; max-width:100%; height:190px;
  border-radius:32px;
  transition:height .5s ease;
  box-shadow:0 18px 40px var(--drop), 0 2px 4px var(--drop2), 0 0 38px -6px var(--halo);
}
/* altura aberta medida em js/login-vidro.js (cada tela tem um formulário de
   tamanho diferente); 470px é o piso e o valor até o JS medir */
.gl-box.open{ height:var(--gl-open-h, 470px); }

/* aro: só o anel entre a borda da caixa e o vidro recebe o feixe.
   Histórico da espessura (11/09/2026, tudo pedido do usuário no mesmo dia):
   2px -> 3px ("deixe mais visível") -> 1.5px ("deixe a borda fina"). O que
   ficou do "mais visível" foi a cauda longa do feixe e o brilho que o
   acompanha (.gl-rim-glow) — a linha em si é fina. Se mudar a espessura
   aqui, mude junto o inset do .gl-glass logo abaixo: é ele que define onde
   o anel termina por dentro. */
.gl-rim{
  position:absolute; inset:0; border-radius:inherit;
  padding:1.5px; overflow:hidden; pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.gl-rim::before,
.gl-rim::after{
  content:""; position:absolute;
  top:-50%; left:-50%; width:200%; height:200%;
  background:conic-gradient(from 0deg, transparent 0 48%, var(--beam1) 70%, transparent 83%);
  animation:gl-spin 7s linear infinite;
}
.gl-rim::after{
  background:conic-gradient(from 180deg, transparent 0 48%, var(--beam2) 70%, transparent 83%);
}
@keyframes gl-spin{ to{ transform:rotate(360deg); } }

/* Brilho que acompanha o feixe: uma segunda cópia do aro, mais grossa e
   borrada, por baixo da nítida. O blur fica no EMBRULHO (.gl-rim-glow), não
   no aro — filter é aplicado antes da máscara, então um blur no próprio
   .gl-rim seria cortado pela máscara e não sairia da linha. Custa um blur
   por quadro enquanto o feixe gira; é só a tela de login, e com
   prefers-reduced-motion o giro para. Não é backdrop-filter: borra só o
   desenho do feixe, nada do que está atrás ou dentro do vidro. */
.gl-rim-glow{
  position:absolute; inset:0; border-radius:inherit;
  filter:blur(6px); opacity:1;
  pointer-events:none;
}
.gl-rim-glow .gl-rim{ padding:4px; }

.gl-glass{
  position:absolute; inset:1.5px; z-index:2;
  border-radius:30.5px; border:1px solid var(--rim);
  background:var(--glass);
  box-shadow:inset 0 1px 1px var(--sheen), inset 0 -3px 6px var(--shade);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.gl-glass::before{
  /* brilho do topo do vidro: altura FIXA, cabendo na moldura de 12px. Era
     14% da altura — com a moldura fina ele passou a invadir o poço, que no
     escuro é translúcido, e aparecia como uma faixa atrás do título. */
  content:""; position:absolute; left:10%; right:10%; top:1px; height:9px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--sheen), rgba(255,255,255,0));
  opacity:.35; pointer-events:none;
}

.gl-inner{
  /* Moldura de vidro fina: 12px entre a beirada do card e o poço (eram
     34px x 28px no desenho original). Pedido do usuário, 11/09/2026: "reduza
     mais a borda, ainda está muito grossa". Raio 19px = 30.5 do vidro menos
     a moldura, pra as curvas ficarem concêntricas. As alturas da caixa são
     medidas em js/login-vidro.js a partir deste recuo — não precisa mexer
     em mais nada se ele mudar. */
  position:absolute; inset:12px; border-radius:19px;
  background:var(--inner);
  box-shadow:inset 0 3px 10px var(--innershade), inset 0 -1px 0 var(--sheen);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.gl-box.open .gl-inner{ cursor:default; }

.gl-login{
  /* position:relative faz do form o offsetParent do título — é dele que o
     JS mede o offsetTop. Sem isso a medida saía do .gl-inner e o
     deslocamento vinha com a sobra do centramento somada. */
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:13px;
  width:88%;
  /* Caixa fechada: o formulário desce até o TÍTULO ficar no centro do poço.
     O deslocamento é MEDIDO em js/gpd.js (gpdLoginBoxInit grava --gl-shift),
     não um número fixo: com 134px fixos, bastou o título ganhar uma linha
     pra o "Toque para entrar" sair cortado na borda de baixo (11/09/2026).
     O 128px é só o valor até o JS medir. A transição é disparada pela troca
     de classe (.open), nunca pela troca da variável — ver a nota de memória
     sobre Safari e transition por variável. */
  transform:translateY(var(--gl-shift, 128px));
  transition:transform .5s ease;
}
.gl-box.open .gl-login{ transform:translateY(0); }
/* Na caixa fechada só o título aparece: o resto some por opacidade, além de
   ficar abaixo da dobra — assim nenhum pedaço de campo "vaza" pela borda do
   poço, qualquer que seja a fonte ou a largura da tela. */
.gl-login > :not(.gl-title){ transition:opacity .35s ease; }
.gl-box:not(.open) .gl-login > :not(.gl-title){ opacity:0; pointer-events:none; }

/* ---- título no idioma do painel ------------------------------------ */
.gl-title{ display:flex; flex-direction:column; align-items:center; gap:6px; user-select:none; text-align:center; }
/* Título mais aceso (pedido do usuário, 11/09/2026: "deixe em melhor
   evidência as letras, ficou um pouco apagado"): selo mais claro no escuro
   e mais fechado no claro, título em 700 com uma sombra curta que recorta a
   letra do poço, e o "Toque para entrar" saiu do tom mais apagado (ink3)
   pro intermediário (ink2). */
.gl-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'JetBrains Mono', monospace;
  /* uma linha só também aqui: em tela de 320px o selo quebrava em duas */
  font-size:clamp(9px, 2.9vw, 10.5px); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap;
  color:var(--eyebrow);
}
.gl-eyebrow::before{
  content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  background:var(--eyebrow); box-shadow:0 0 10px 2px var(--eyebrow-glow);
}
.gl-title h2{
  margin:0;
  font-family:'Oswald', sans-serif; font-weight:700;
  text-shadow:0 1px 2px var(--title-shadow);
  /* uma linha só: em 27px "GPD · ACESSO RESTRITO" quebrava em duas e
     estourava a altura da caixa fechada. clamp encolhe junto com a tela
     estreita do celular em vez de quebrar. */
  font-size:clamp(18px, 5.4vw, 24px); line-height:1.1; letter-spacing:.03em; text-transform:uppercase;
  white-space:nowrap;
  color:var(--title);
}
.gl-hint{ font-size:13px; font-weight:600; color:var(--ink2); margin-top:4px; transition:opacity .3s; }
.gl-box.open .gl-hint{ opacity:0; }

/* ---- campos ---------------------------------------------------------- */
.gl-field{ position:relative; width:100%; }
.gl-field input{
  width:100%; height:48px;
  padding:0 18px 0 46px; border-radius:999px;
  border:1px solid var(--rim); background:var(--field); color:var(--ink);
  font:500 15px Manrope, Inter, sans-serif;
  outline:none;
  box-shadow:inset 0 2px 5px var(--shade);
  transition:box-shadow .2s;
}
.gl-field-pass input{ padding-right:52px; }
.gl-field input::placeholder{ color:var(--ink3); }
.gl-field input:focus{ box-shadow:inset 0 2px 5px var(--shade), 0 0 0 3px var(--blue); }
.gl-field > svg{
  position:absolute; left:17px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; stroke:var(--ink2); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; pointer-events:none;
}
/* usuário + senha batem com uma credencial real (gpdFindUser em js/gpd.js) */
.gl-field.is-correct input{ box-shadow:inset 0 2px 5px var(--shade), 0 0 0 2px var(--ok); }
.gl-field.is-correct > svg{ stroke:var(--ok); }

/* "Mostrar senha" — NÃO saiu no desenho novo, mas fica: login errado no
   celular é difícil de diagnosticar às cegas (autofill antigo, maiúscula do
   teclado, espaço sobrando). Ver o comentário em js/gpd.js. */
.gl-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--ink2); cursor:pointer;
}
.gl-eye svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.gl-eye .gl-eye-off{ display:none; }
/* o painel só mostra o olho pra admin (atributo hidden, js/app.js) — sem
   isto o display:flex acima venceria o hidden do navegador */
.gl-eye[hidden]{ display:none; }
.gl-eye[aria-pressed="true"] .gl-eye-on{ display:none; }
.gl-eye[aria-pressed="true"] .gl-eye-off{ display:block; }
.gl-eye:focus-visible{ outline:2px solid var(--beam1); outline-offset:1px; }

/* ---- botão, erro, links ------------------------------------------------ */
/* O botão é o .auth-submit dourado do painel (css/styles.css), não um botão
   novo: pedido do usuário ("mantenha o amarelo") — o desenho trazia um
   azul. Reaproveitar a classe traz junto as correções que esse botão já
   acumulou (texto em <span> acima do brilho, hover que não pinta dourado
   sobre dourado). Aqui só se tira a margem de cima, que o gap do formulário
   já dá, e se trava a altura pra casar com os campos. */
.gl-login .gl-submit{ margin-top:0; min-height:50px; font-family:Manrope, Inter, sans-serif; }
.gl-login .gl-submit.busy{ filter:saturate(.45); pointer-events:none; }
.gl-login .gl-submit:focus-visible{ outline:2px solid var(--beam1); outline-offset:3px; }

.gl-err{ width:100%; min-height:16px; margin:-5px 0 0; text-align:center; font-size:13px; color:var(--err); }

.gl-links{ width:100%; display:flex; justify-content:space-between; gap:12px; font-size:13px; font-weight:600; }
.gl-links a,
.gl-links button{
  color:var(--ink2); text-decoration:none;
  background:none; border:0; padding:0; font:inherit; cursor:pointer;
}
.gl-links a.acc,
.gl-links button.acc{ color:var(--blue-ink); }
.gl-links a:focus-visible,
.gl-links button:focus-visible{ outline:2px solid var(--beam1); outline-offset:3px; border-radius:4px; }

/* nota curta de cada tela (quem pode entrar, o que dá pra fazer sem login) */
.gl-note{ width:100%; margin:2px 0 0; text-align:center; font-size:12px; line-height:1.45; color:var(--ink3); }

/* ---- confirmação depois de entrar ------------------------------------ */
.gl-ok{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:20px; text-align:center;
  background:var(--inner);
  opacity:0; pointer-events:none; transition:opacity .4s;
}
.gl-ok.show{ opacity:1; pointer-events:auto; }
.gl-ok b{ font-family:'Oswald', sans-serif; font-weight:600; font-size:26px; letter-spacing:.03em; text-transform:uppercase; }
.gl-ok span{ font-size:13px; color:var(--ink2); }

/* senha errada: a caixa sacode (mesmo keyframe do .auth-card do painel) */
.gl-box.shake-invalid{ animation:btnFxShake .5s cubic-bezier(.36,.07,.19,.97) both; }

@media (prefers-reduced-motion: reduce){
  .gl-gate *, .gl-gate *::before, .gl-gate *::after{ animation:none !important; transition:none !important; }
}