/* FlowZ · Painel: bloqueio (lock.js). Tela cheia por cima de tudo, logo Voltz em 3D.
   Arquivo isolado: as regras de celular deste módulo ficam aqui mesmo, no fim. */

/* ── Painel atrás: escondido enquanto bloqueado ── */
html.lk-on, html.lk-on body{overflow:hidden}
html.lk-on body > :not(.lk){visibility:hidden!important}
@media print{
  html.lk-on body > :not(.lk){display:none!important}
}

/* ── Camada da tela de bloqueio ── */
.lk{position:fixed;inset:0;z-index:2147483000;display:flex;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  background:#0a0f1d;color:var(--text);font-family:var(--sans);
  opacity:0;transition:opacity .5s var(--ease)}
.lk.in{opacity:1}
.lk.out{opacity:0;transition:opacity .55s var(--ease)}
.lk.instant,.lk.instant *{transition:none!important}

/* Fundo: o mesmo degradê animado do painel, cobrindo a tela inteira */
.lk-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:
  radial-gradient(ellipse at 95% 0%,rgba(18,61,83,.85) 0%,transparent 52%),
  linear-gradient(145deg,#0a0f1d,#0b1424 60%,#0d1628)}
.lk-bg::before{content:"";position:absolute;width:520px;height:520px;right:-240px;top:6%;border-radius:50%;background:radial-gradient(circle,rgba(57,160,200,.2),transparent 68%)}
.lk-bg .p-aurora-orb{opacity:.62}
.lk-bg .p-aurora-orb.b{opacity:.36}
.lk-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 42%,transparent 40%,rgba(6,8,16,.55) 100%)}

.lk-wrap{position:relative;margin:auto;width:100%;max-width:720px;display:flex;flex-direction:column;align-items:center;
  padding:max(40px,env(safe-area-inset-top)) 24px max(40px,env(safe-area-inset-bottom))}

/* ── Logo 3D ── */
.lk-stage{--w:min(600px,72vw);position:relative;width:var(--w);aspect-ratio:1442/476;margin:2vh 0 clamp(36px,6vh,64px);
  perspective:1100px;perspective-origin:50% 45%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:default}
.lk-obj{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;
  transform:translate3d(0,0,0)}
.lk-obj > *{position:absolute;inset:0;backface-visibility:hidden;outline:1px solid transparent}
/* Mesma silhueta da logo em todas as camadas (máscara do PNG) */
.lk-ex,.lk-shade,.lk-sheen{-webkit-mask:url(/login/src/voltz-logo.png) center/100% 100% no-repeat;mask:url(/login/src/voltz-logo.png) center/100% 100% no-repeat}
.lk-ex{background:var(--c);transform:translateZ(var(--z))}
.lk-face{width:100%;height:100%;display:block;transform:translateZ(.5px);pointer-events:none;-webkit-user-drag:none;
  filter:drop-shadow(0 0 .5px rgba(255,255,255,.25))}
/* Sombreado: lado oposto à luz fica levemente mais escuro */
.lk-shade{transform:translateZ(.6px);mix-blend-mode:multiply;opacity:.85;
  background:linear-gradient(var(--la,90deg),rgba(255,255,255,0) 20%,rgba(78,64,150,.34) 100%)}
/* Reflexo que acompanha o cursor */
.lk-sheen{transform:translateZ(.7px);mix-blend-mode:soft-light;
  background:radial-gradient(ellipse 34% 90% at var(--lx,50%) var(--ly,38%),rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}
/* Sombra de contato no "chão" */
.lk-floor{position:absolute;left:12%;right:12%;bottom:-18%;height:22%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6),rgba(0,0,0,0) 70%);filter:blur(10px);opacity:.62}

/* Entrada: a logo chega de trás, devagar */
.lk .lk-stage{opacity:0;transform:translate3d(0,14px,0) scale(.94);transition:opacity .9s var(--ease) .08s,transform 1.1s var(--ease-out) .08s}
.lk.in .lk-stage{opacity:1;transform:none}
.lk.out .lk-stage{opacity:0;transform:scale(1.04);transition:opacity .5s var(--ease),transform .6s var(--ease-out)}
.lk .lk-info,.lk .lk-form{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .7s var(--ease-out)}
.lk .lk-info{transition-delay:.22s}
.lk .lk-form{transition-delay:.3s}
.lk.in .lk-info,.lk.in .lk-form{opacity:1;transform:none}
.lk.out .lk-info,.lk.out .lk-form{opacity:0;transform:translateY(6px);transition-delay:0s}

/* ── Identificação ── */
.lk-info{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.lk-badge{display:flex;align-items:center;gap:9px}
.lk-badge img{width:22px;height:22px;border-radius:6px;flex-shrink:0}
.lk-badge h1{margin:0;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72)}
.lk-who{margin:0;display:flex;flex-direction:column;gap:2px;max-width:100%}
.lk-who b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-who span{font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-clock{display:flex;align-items:baseline;gap:10px;margin-top:2px}
.lk-clock b{font-family:var(--cond);font-weight:700;font-size:28px;line-height:1;letter-spacing:.4px;font-variant-numeric:tabular-nums}
.lk-clock span{font-size:13px;color:var(--text-3)}

/* ── Senha ── */
.lk-form{width:100%;max-width:360px;margin-top:28px;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.lk-field{position:relative;display:flex;align-items:center;height:52px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(14,13,24,.78);transition:border-color .2s var(--ease),background .2s var(--ease)}
.lk-field > svg{position:absolute;left:16px;color:var(--text-3);pointer-events:none;transition:color .2s var(--ease)}
.lk-field:focus-within{border-color:var(--accent-ink);background:rgba(20,18,32,.9)}
.lk-field:focus-within > svg{color:var(--accent-ink)}
.lk-field.bad{border-color:rgba(248,113,113,.6)}
.lk-field.shake{animation:lk-shake .42s var(--ease)}
@keyframes lk-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.lk-field input{flex:1;min-width:0;height:100%;padding:0 6px 0 46px;border:0;background:transparent;color:var(--text);font-size:16px;letter-spacing:.3px}
.lk-field input::placeholder{color:var(--text-3);letter-spacing:0}
.lk-field input:focus{outline:none}
.lk-peek{flex-shrink:0;width:44px;height:44px;margin-right:4px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--text-3);cursor:pointer;transition:color .15s var(--ease),background .15s var(--ease)}
.lk-peek:hover{color:var(--text);background:rgba(255,255,255,.05)}
.lk-err{margin:0;min-height:18px;font-size:13px;color:var(--danger);text-align:center}
.lk-err:empty{min-height:0;margin-top:-10px}
.lk-go{height:50px;border-radius:14px;font-size:14.5px}
.lk-go .p-spin{border-color:rgba(255,255,255,.3);border-top-color:#fff}
.lk-out{align-self:center;margin-top:6px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--text-3);font-size:13px;cursor:pointer;transition:color .15s var(--ease)}
.lk-out u{text-decoration:none;color:var(--text-2);border-bottom:1px solid rgba(255,255,255,.2);transition:color .15s var(--ease),border-color .15s var(--ease)}
.lk-out:hover u{color:var(--text);border-bottom-color:rgba(255,255,255,.5)}

/* ── Configurações: bloco "Bloqueio do painel" ── */
.lk-cfg-col{display:grid;gap:16px;align-content:start;min-width:0}
.lk-cfg{transition:border-color .3s var(--ease)}
.lk-cfg-focus{animation:lk-cfg-focus 2.4s var(--ease) both}
@keyframes lk-cfg-focus{0%,55%{border-color:var(--accent-ink)}100%{border-color:var(--line)}}
.lk-cfg-body{display:flex;flex-direction:column;gap:16px}
.lk-cfg-hint{margin:-6px 0 0}
.lk-cfg-status{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2)}
.lk-cfg-status > svg{flex-shrink:0;color:var(--accent-ink)}
.lk-cfg-status > div{flex:1;min-width:0}
.lk-cfg-status b{display:block;font-weight:600;font-size:13.5px}
.lk-cfg-status small{display:block;font-size:12px;color:var(--text-3)}
.lk-cfg-form{gap:12px}
.lk-cfg-err{margin:0;font-size:12.5px;color:var(--danger)}
.lk-cfg-err:empty{display:none}
.lk-cfg-acts{display:flex;gap:8px;flex-wrap:wrap}
.lk-cfg-idle{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.lk-cfg-idle-t b{display:block;font-weight:600;font-size:13.5px}
.lk-cfg-idle-t small{display:block;font-size:12px;color:var(--text-3)}
.lk-cfg-idle .p-seg{align-self:flex-start}
.lk-cfg-rm{align-self:flex-start;color:var(--danger)}
.lk-cfg-rm:hover{color:var(--danger);background:var(--danger-soft)}

/* ── Movimento reduzido: logo parada, fundo parado ── */
@media (prefers-reduced-motion:reduce){
  .lk .p-aurora-orb{animation:none}
  .lk .lk-stage,.lk .lk-info,.lk .lk-form{opacity:1;transform:none;transition:none}
  .lk-field.shake{animation:none}
}

/* Tela baixa (até 620px de altura). No celular, as regras do bloqueio estão no mobile.css, seção "Bloqueio". */
@media (max-height:620px){
  .lk-stage{--w:min(420px,60vw);margin-bottom:24px}
  .lk-form{margin-top:16px}
}