/* =====================================================================
   Tela de login animada (cena 3D) — só vale dentro de .lk-tela
   ===================================================================== */
.lk-tela{
  --lk-o1:#ff6b35; --lk-deep:#e8630a; --lk-err:#dc2626;
  --lk-grad:linear-gradient(135deg,#ff6b35,#f7931e);
  --lk-display:'Poppins','Inter',system-ui,sans-serif;
  --lk-bg1:#fff8f2; --lk-bg2:#ffe3cf; --lk-ink:#1f1a17; --lk-muted:#7b6e65;
  --lk-card:rgba(255,255,255,.74); --lk-card-line:rgba(255,255,255,.9);
  --lk-input:#fffaf6; --lk-input-line:#f1ddcd; --lk-seg:rgba(255,107,53,.1);
  --lk-chip:rgba(255,255,255,.96); --lk-chip-ink:#1f1a17; --lk-chip-edge:rgba(230,196,170,.8);
  --lk-grid:rgba(232,99,10,.22);
}
.lk-tela[data-tema="dark"]{
  --lk-bg1:#1a1411; --lk-bg2:#0d0a08; --lk-ink:#f7efe8; --lk-muted:#b5a597;
  --lk-card:rgba(34,27,23,.72); --lk-card-line:rgba(255,255,255,.1);
  --lk-input:rgba(255,255,255,.06); --lk-input-line:rgba(255,255,255,.12); --lk-seg:rgba(255,255,255,.07);
  --lk-chip:rgba(42,34,29,.96); --lk-chip-ink:#f7efe8; --lk-chip-edge:rgba(0,0,0,.5);
  --lk-grid:rgba(255,120,50,.28);
}
.lockscreen.lk-tela{
  position:relative; display:block; padding:0; height:100vh; min-height:100vh; overflow:hidden;
  background:radial-gradient(120% 90% at 20% 30%, var(--lk-bg1), var(--lk-bg2)); color:var(--lk-ink);
  transition:background .5s, color .3s;
}

/* ===================== CENÁRIO 3D ===================== */
.lk-scene{ position:absolute; inset:0 auto 0 0; width:60%; perspective:1300px; overflow:hidden; }
.lk-glow{ position:absolute; left:50%; top:46%; width:640px; height:640px; margin:-320px 0 0 -320px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,120,50,.5), rgba(255,160,70,.18) 55%, transparent 72%); filter:blur(10px);
  animation:lk-k-respira 6s ease-in-out infinite; }
.lk-tela[data-tema="dark"] .lk-glow{ background:radial-gradient(closest-side, rgba(255,107,53,.55), rgba(255,140,50,.14) 55%, transparent 72%); }
@keyframes lk-k-respira{ 50%{ transform:scale(.92); opacity:.8; } }

.lk-grid{
  position:absolute; left:-30%; right:-30%; bottom:-6%; height:58%;
  transform:perspective(520px) rotateX(64deg); transform-origin:50% 100%;
  background-image:linear-gradient(var(--lk-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lk-grid) 1px, transparent 1px);
  background-size:54px 54px; animation:lk-k-avanca 5s linear infinite;
  -webkit-mask-image:linear-gradient(to top, #000 8%, transparent 88%); mask-image:linear-gradient(to top, #000 8%, transparent 88%);
}
@keyframes lk-k-avanca{ to{ background-position:0 54px; } }

.lk-bokeh{ position:absolute; border-radius:50%; filter:blur(14px); opacity:.55; animation:lk-k-sobe 14s ease-in-out infinite; }
.lk-b1{ width:90px; height:90px; left:12%; top:64%; background:#ffb27a; }
.lk-b2{ width:54px; height:54px; left:78%; top:18%; background:#ff8a4c; animation-delay:-5s; }
.lk-b3{ width:110px; height:110px; left:46%; top:80%; background:#ffd2a6; animation-delay:-9s; }
.lk-b4{ width:38px; height:38px; left:24%; top:20%; background:#ffa15c; animation-delay:-3s; }
.lk-tela[data-tema="dark"] .lk-bokeh{ opacity:.26; mix-blend-mode:screen; }
.lk-tela[data-tema="dark"] .lk-b1,.lk-tela[data-tema="dark"] .lk-b3{ background:#ff7a3c; }
@keyframes lk-k-sobe{ 50%{ translate:0 -34px; } }

.lk-world{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); will-change:transform; }

/* anéis no "chão", abaixo do selo (nunca atravessam o selo) */
.lk-orbit{ position:absolute; left:50%; top:calc(46% + 150px); }
.lk-ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(232,99,10,.42); }
.lk-ring i{ position:absolute; top:-6px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:#ff8a3c; box-shadow:0 0 16px 4px rgba(255,107,53,.7); }
.lk-o1{ width:560px; height:560px; margin:-280px 0 0 -280px; transform:rotateX(76deg); }
.lk-o1 .lk-ring{ animation:lk-k-giraz 18s linear infinite; }
.lk-o2{ width:420px; height:420px; margin:-210px 0 0 -210px; transform:rotateX(76deg); }
.lk-o2 .lk-ring{ border-style:dashed; border-color:rgba(232,99,10,.34); animation:lk-k-giraz 26s linear infinite reverse; }
.lk-o3{ width:700px; height:700px; margin:-350px 0 0 -350px; transform:rotateX(76deg); }
.lk-o3 .lk-ring{ border-color:rgba(232,99,10,.18); animation:lk-k-giraz 40s linear infinite; }
@keyframes lk-k-giraz{ to{ transform:rotate(360deg); } }

.lk-drop{ position:absolute; left:50%; top:46%; width:260px; height:260px; margin:-130px 0 0 -130px; transform-style:preserve-3d; animation:lk-k-carimbo 1.1s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes lk-k-carimbo{
  0%{ transform:translateY(-260px) scale(1.7) rotateX(50deg); opacity:0; }
  55%{ opacity:1; }
  100%{ transform:none; opacity:1; }
}
.lk-wrap{ position:absolute; inset:0; transform-style:preserve-3d; animation:lk-k-flutua 6s ease-in-out 1.1s infinite; }
@keyframes lk-k-flutua{ 50%{ translate:0 -16px; } }
.lk-seal{ position:absolute; inset:0; transform-style:preserve-3d; animation:lk-k-gira 16s linear infinite; }
@keyframes lk-k-gira{ from{ transform:rotateX(-10deg) rotateY(0deg); } to{ transform:rotateX(-10deg) rotateY(360deg); } }
.lk-edge{ position:absolute; inset:0; border-radius:50%; background:#cf5c0a; border:1px solid #8f3a04; }
.lk-edge:nth-child(odd){ background:#e0700f; }
.lk-face{ position:absolute; inset:0; border-radius:50%; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:radial-gradient(circle at 30% 22%, #ffd199 0%, #ff9a4a 30%, #ee6a12 66%, #b84606 100%);
  box-shadow:inset 0 3px 3px rgba(255,255,255,.55), inset 0 -12px 22px rgba(120,40,0,.45); }
.lk-face svg{ position:absolute; inset:0; width:100%; height:100%; }
.lk-face::after{ content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.5) 47%, transparent 62%) -160% 0/260% 100% no-repeat;
  mix-blend-mode:soft-light; animation:lk-k-brilho 5s ease-in-out infinite; }
@keyframes lk-k-brilho{ 60%,100%{ background-position:180% 0; } }
.lk-front{ transform:translateZ(13px); }
.lk-back{ transform:rotateY(180deg) translateZ(13px); }
.lk-sombra{ position:absolute; left:50%; top:calc(46% + 178px); width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%;
  transform:rotateX(76deg); background:radial-gradient(circle, rgba(120,45,0,.5), rgba(120,45,0,.12) 55%, transparent 70%); filter:blur(6px); animation:lk-k-sombra 6s ease-in-out 1.1s infinite; }
@keyframes lk-k-sombra{ 50%{ transform:rotateX(76deg) scale(.86); opacity:.7; } }
.lk-onda{ position:absolute; left:50%; top:calc(46% + 150px); width:260px; height:260px; margin:-130px 0 0 -130px; border-radius:50%;
  border:2px solid rgba(255,107,53,.7); transform:rotateX(76deg) scale(.3); opacity:0; animation:lk-k-onda 1.4s ease-out .85s 1 both; }
@keyframes lk-k-onda{ 0%{ opacity:.9; transform:rotateX(76deg) scale(.3); } 100%{ opacity:0; transform:rotateX(76deg) scale(2.6); } }

.lk-chip{ position:absolute; display:flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border-radius:18px;
  background:var(--lk-chip); color:var(--lk-chip-ink); font:600 13px/1.2 var(--lk-display); letter-spacing:-.01em; white-space:nowrap;
  box-shadow:0 6px 0 var(--lk-chip-edge), 0 12px 18px -8px rgba(120,50,0,.35); animation:lk-k-float 5s ease-in-out infinite, lk-k-entra .8s ease-out both; }
.lk-ic{ width:34px; height:34px; border-radius:11px; background:var(--lk-grad); color:#fff; display:grid; place-items:center; }
.lk-ic svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lk-c1{ left:12%; top:24%; transform:translateZ(110px) rotateY(14deg) rotateX(4deg); animation-delay:-1.5s, 1.3s; }
.lk-c2{ right:9%; top:44%; transform:translateZ(150px) rotateY(-16deg) rotateX(4deg); animation-delay:-3s, 1.5s; }
.lk-c3{ right:7%; bottom:21%; transform:translateZ(90px) rotateY(12deg) rotateX(-4deg); animation-delay:-4.2s, 1.7s; }
@keyframes lk-k-float{ 50%{ translate:0 -14px; } }
@keyframes lk-k-entra{ from{ opacity:0; } }

.lk-tagline{ position:absolute; left:7%; bottom:12%; max-width:430px; z-index:2; }
.lk-tagline small{ display:inline-flex; align-items:center; gap:8px; font:600 12px var(--lk-display); text-transform:uppercase; letter-spacing:.12em; color:var(--lk-deep); margin-bottom:10px; }
.lk-tagline small::before{ content:''; width:26px; height:2px; background:var(--lk-grad); border-radius:2px; }
.lk-tagline h1{ font-family:var(--lk-display); font-size:clamp(26px,2.7vw,38px); line-height:1.1; letter-spacing:-.04em; font-weight:700; margin:0; color:var(--lk-ink); }
.lk-tagline h1 em{ font-style:normal; background:var(--lk-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ===================== CARTÃO DE LOGIN ===================== */
.lk-tela .lk-login{ position:absolute; inset:0 0 0 auto; width:44%; min-width:420px; display:flex; align-items:center; justify-content:center; padding:24px; perspective:1100px; z-index:3; }
.lk-tela .lockcard{
  width:100%; max-width:430px; padding:34px 32px 30px; border-radius:30px;
  background:var(--lk-card); border:1px solid var(--lk-card-line);
  backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 40px 90px -40px rgba(180,70,10,.55), 0 2px 0 rgba(255,255,255,.4) inset;
  transform:rotateY(calc(var(--ry,0deg) * -.25)) rotateX(calc(var(--rx,0deg) * -.25));
  animation:lk-k-sobe-card .9s cubic-bezier(.16,1,.3,1) .5s both; transition:transform .12s linear; color:var(--lk-ink);
}
.lk-tela .lockcard:focus-within{ transform:none; }
@keyframes lk-k-sobe-card{ from{ opacity:0; translate:0 40px; } }
.lk-tela .lockcard.lk-shake{ animation:lk-k-treme .45s; }
@keyframes lk-k-treme{ 20%,60%{ translate:-9px 0; } 40%,80%{ translate:9px 0; } }

.lk-tela .logo-wrap-lock{ margin-bottom:20px; }
.lk-tela .logo-wrap-lock img{ height:46px; width:auto; max-width:100%; display:block; margin:0 auto; }

.lk-seg{ position:relative; display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:999px; background:var(--lk-seg); margin-bottom:22px; }
.lk-seg-ind{ position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:999px; background:var(--lk-grad);
  box-shadow:0 8px 18px -8px rgba(232,99,10,.8); transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.lk-seg.cliente .lk-seg-ind{ transform:translateX(100%); }
.lk-seg button{ position:relative; z-index:1; border:0; background:none; box-shadow:none; cursor:pointer; font:600 13.5px var(--lk-display); letter-spacing:-.01em; padding:11px 8px; border-radius:999px; color:var(--lk-muted); transition:color .25s; width:auto; }
.lk-seg button.on{ color:#fff; }

.lk-tela .lockcard h2{ font-family:var(--lk-display); font-size:26px; font-weight:700; letter-spacing:-.04em; text-align:center; margin:0 0 6px; color:var(--lk-ink); }
.lk-tela .lockcard .small{ color:var(--lk-muted); font-size:14px; }
.lk-tela .lockcard label{ display:block; font-size:14px; font-weight:600; color:var(--lk-ink); margin:16px 0 6px; }
.lk-tela .lockcard .req-star{ color:var(--lk-deep); }
.lk-tela .lockcard input:not([type=checkbox]){
  width:100%; font-size:16px; color:var(--lk-ink); background:var(--lk-input); border:1.5px solid var(--lk-input-line); border-radius:16px; padding:14px 16px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.lk-tela .lockcard input:not([type=checkbox])::placeholder{ color:var(--lk-muted); opacity:.7; }
.lk-tela .lockcard input:not([type=checkbox]):focus{ outline:none; border-color:var(--lk-o1); box-shadow:0 0 0 4px rgba(255,107,53,.18); background:var(--lk-card); }
.lk-tela .lockcard .pwd-wrap input{ padding-right:48px; }
.lk-tela .lockcard .pwd-toggle{ right:6px; padding:9px; color:var(--lk-muted); }
.lk-tela .lockcard .pwd-toggle:hover{ color:var(--lk-deep); }
.lk-tela .lockcard label.checkbox-row{ display:flex; align-items:center; gap:10px; margin:14px 0 18px; font-size:14px; font-weight:400; color:var(--lk-ink); user-select:none; }
.lk-tela .lockcard .checkbox-row input{ appearance:none; -webkit-appearance:none; width:20px; height:20px; padding:0; border-radius:7px; border:1.5px solid var(--lk-input-line); background:var(--lk-input); display:grid; place-items:center; cursor:pointer; transition:all .2s; flex-shrink:0; }
.lk-tela .lockcard .checkbox-row input:checked{ background:var(--lk-grad); border-color:transparent; }
.lk-tela .lockcard .checkbox-row input:checked::after{ content:''; width:10px; height:5px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; rotate:-45deg; translate:0 -1px; }
.lk-err{ color:var(--lk-err); font-size:13.5px; text-align:center; margin:12px 0 0; }
.lk-tela .lockcard .btn{
  width:100%; border:0; cursor:pointer; font:600 16px var(--lk-display); letter-spacing:-.01em; color:#fff; padding:15px 22px; border-radius:16px; justify-content:center;
  background:linear-gradient(90deg,#ff8a4c,#ea580c,#ff8a4c) 0 0/200% 100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 5px 0 #a8420a, 0 18px 30px -12px rgba(234,88,12,.75);
  animation:lk-k-desliza 5s linear infinite; transition:transform .12s, box-shadow .12s, filter .2s;
}
.lk-tela .lockcard .btn:hover{ filter:brightness(1.06); transform:none; }
.lk-tela .lockcard .btn:active{ transform:translateY(4px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 #a8420a, 0 8px 16px -10px rgba(234,88,12,.75); }
.lk-tela .lockcard .btn:disabled{ opacity:.8; cursor:default; }
@keyframes lk-k-desliza{ to{ background-position:200% 0; } }

/* ===================== CELULAR / TABLET ===================== */
@media (max-width:960px){
  .lockscreen.lk-tela{ height:auto; min-height:100vh; overflow-x:hidden; overflow-y:visible; --lk-sh:280px; --lk-ss:.68; }
  .lk-scene{ position:relative; inset:auto; width:100%; height:var(--lk-sh);
    -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent); mask-image:linear-gradient(to bottom,#000 80%,transparent); }
  .lk-tagline,.lk-c3{ display:none; }
  .lk-wrap{ scale:var(--lk-ss) var(--lk-ss) var(--lk-ss); }
  .lk-drop,.lk-glow{ top:50%; }
  .lk-orbit{ top:calc(50% + 98px); }
  .lk-o1{ width:380px; height:380px; margin:-190px 0 0 -190px; }
  .lk-o2{ width:290px; height:290px; margin:-145px 0 0 -145px; }
  .lk-o3{ width:480px; height:480px; margin:-240px 0 0 -240px; }
  .lk-sombra{ top:calc(50% + 104px); width:210px; height:210px; margin:-105px 0 0 -105px; }
  .lk-onda{ top:calc(50% + 98px); width:200px; height:200px; margin:-100px 0 0 -100px; }
  .lk-glow{ width:440px; height:440px; margin:-220px 0 0 -220px; }
  .lk-chip{ font-size:11.5px; padding:8px 12px 8px 8px; }
  .lk-ic{ width:28px; height:28px; border-radius:9px; }
  .lk-c1{ left:4%; top:11%; transform:translateZ(40px) rotateY(10deg); }
  .lk-c2{ right:4%; top:60%; transform:translateZ(50px) rotateY(-10deg); }
  .lk-tela .lk-login{ position:relative; inset:auto; width:100%; min-width:0; margin-top:-22px; padding:0 16px calc(28px + env(safe-area-inset-bottom,0px)); }
  .lk-tela .lockcard{ padding:26px 20px 22px; border-radius:26px; }
  .lk-seg button{ font-size:12.5px; white-space:nowrap; padding:11px 4px; }
}
@media (max-width:960px) and (max-height:760px){
  .lockscreen.lk-tela{ --lk-sh:215px; --lk-ss:.52; }
  .lk-orbit{ top:calc(50% + 78px); } .lk-sombra{ top:calc(50% + 84px); } .lk-onda{ top:calc(50% + 78px); }
}
@media (prefers-reduced-motion:reduce){
  .lk-tela *,.lk-tela *::before,.lk-tela *::after{ animation:none !important; transition:none !important; }
  .lk-seal{ transform:rotateX(-10deg) rotateY(-24deg); }
}