/* =====================================================================
   Tela de acesso (LoginScene) — design system "Acce Interno" v2.
   Veio do bloco "LoginScene" do bundle.css do design system, com as cores
   fixas da marca: a cena é sempre escura, qualquer que seja o tema do app
   (não usa --bg/--ink do app). Componente: src/ui/LoginScene.jsx.
   Fundo: /marca/montanha.jpg em cinza + as linhas brancas do manual. A foto
   entra com fade quando termina de carregar; o cartão não espera por ela.
   ===================================================================== */
.lg {
  position: fixed; inset: 0; overflow: hidden; z-index: 50000;
  background: #141413; color: #F2F2F2;
  --lg-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lg-accent: #6FA6E0; --lg-line: rgba(242,242,242,.9);
  --focus: #6FA6E0; /* o anel de foco global do app usa --focus: aqui ele vira o azul da cena */
  font-family: var(--lg-font); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; color-scheme: dark; text-align: left;
}
.lg * { box-sizing: border-box; }
.lg-world { position: absolute; inset: -4%; transform: translate(var(--px, 0px), var(--py, 0px)) scale(var(--z, 1)) translateY(var(--ty, 0%)); transition: transform 1.4s cubic-bezier(.22,.8,.24,1); will-change: transform; }
.lg-kb { position: absolute; inset: 0; animation: lg-kb 48s ease-in-out infinite alternate; }
@keyframes lg-kb { from { transform: scale(1.02); } to { transform: scale(1.1) translateX(-1.5%); } }
.lg-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.08) brightness(.72); opacity: 0; transition: opacity 1.2s ease; }
.lg.has-bg .lg-bg { opacity: 1; }
.lg-ridge { position: absolute; inset: 0; width: 100%; height: 100%; }
.lg-ridge .deco { fill: none; stroke: var(--lg-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .42; vector-effect: non-scaling-stroke; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: lg-draw 2.6s cubic-bezier(.6,.1,.2,1) forwards; }
@keyframes lg-draw { to { stroke-dashoffset: 0; } }
.lg-ridge .trail-bg { fill: none; stroke: rgba(242,242,242,.55); stroke-width: 1.5; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }
/* A trilha acesa não usa non-scaling-stroke: com ele o tracejado é medido na tela, não na foto,
   e a parte acesa parava antes do ponto da etapa. Largura em unidades da foto (~3,4px a 1440px). */
.lg-ridge .trail { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255,255,255,.55)); transition: stroke-dashoffset 1.3s cubic-bezier(.22,.8,.24,1); }
.lg-node circle.dot { fill: #1C1C1B; stroke: rgba(242,242,242,.7); stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill .4s, stroke .4s; }
.lg-node circle.ring { fill: none; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lg-node.is-done circle.dot { fill: #fff; stroke: #fff; }
.lg-node.is-now circle.dot { fill: var(--lg-accent); stroke: #fff; }
.lg-node.is-now circle.ring { animation: lg-pulse 1.8s ease-out infinite; }
@keyframes lg-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.lg-node text { fill: rgba(242,242,242,.72); font-family: var(--lg-font); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; paint-order: stroke; stroke: rgba(20,20,19,.55); stroke-width: 3px; transition: fill .4s; }
.lg-node.is-now text, .lg-node.is-done text { fill: #fff; }
.lg-fog { position: absolute; left: -30%; width: 160%; pointer-events: none; mix-blend-mode: screen; }
.lg-fog.f1 { bottom: -8%; height: 55%; background: radial-gradient(40% 60% at 30% 70%, rgba(220,222,224,.34), transparent 70%), radial-gradient(35% 50% at 75% 60%, rgba(220,222,224,.26), transparent 70%); animation: lg-fog 70s linear infinite alternate; }
.lg-fog.f2 { bottom: 10%; height: 40%; background: radial-gradient(30% 45% at 55% 60%, rgba(230,232,234,.2), transparent 70%), radial-gradient(25% 40% at 10% 50%, rgba(230,232,234,.16), transparent 70%); animation: lg-fog 46s linear infinite alternate-reverse; }
@keyframes lg-fog { from { transform: translateX(-6%); } to { transform: translateX(8%); } }
.lg-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,20,19,.55) 0%, rgba(20,20,19,0) 22%, rgba(20,20,19,0) 55%, rgba(20,20,19,.72) 100%), radial-gradient(60% 80% at 78% 70%, rgba(20,20,19,.45), transparent 70%); }

.lg-top { position: absolute; left: 32px; top: calc(24px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 14px; z-index: 3; color: #F2F2F2; }
.lg-top .sym { width: 40px; height: 38px; }
.lg-top .wm { width: 150px; height: 22px; display: block; }
.lg-top .sym img, .lg-top .wm img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lg-top .sub { font-size: 10.5px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: rgba(242,242,242,.7); border-left: 1px solid rgba(242,242,242,.3); padding-left: 14px; line-height: 22px; }
.lg-foot { position: absolute; left: 32px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 3; font-size: 11px; letter-spacing: .08em; color: rgba(242,242,242,.62); display: flex; gap: 18px; align-items: center; }
.lg-foot b { color: #fff; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: 10.5px; }
.lg-alt { font-variant-numeric: tabular-nums; }

/* Palco: mesma posição do design (à direita, um pouco abaixo do centro, mascote por cima), mas
   dentro de uma camada que rola quando o cartão não cabe (cadastro em tela baixa, teclado do celular). */
.lg-scroll { position: absolute; inset: 0; z-index: 4; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; padding: 150px clamp(16px, 9vw, 150px) 72px; }
.lg-stage { position: relative; width: 380px; max-width: 100%; margin: auto 0 auto auto; }
.lg-mascot { position: absolute; left: 50%; top: 0; width: 200px; height: 155px; transform: translate(-50%, -136px); pointer-events: none; z-index: 2; }
.lg-mascot svg { width: 100%; height: 100%; overflow: visible; }
.lg-card { position: relative; z-index: 1; background: rgba(28,28,27,.74); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); border: 1px solid rgba(242,242,242,.16); border-radius: 12px; padding: 30px 28px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden; min-height: 318px; transition: min-height .4s; }
.lg-card.shake { animation: lg-shake .42s cubic-bezier(.36,.07,.19,.97); }
.lg-card.shake2 { animation: lg-shake2 .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes lg-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
@keyframes lg-shake2 { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.lg-pane { display: none; flex-direction: column; gap: 14px; }
.lg-pane.is-in { display: flex; animation: lg-in .5s cubic-bezier(.22,.8,.24,1) both; }
.lg-pane.is-back { animation-name: lg-in-back; }
/* conferindo a sessão: o texto só aparece se a resposta demorar (sem piscar quando é rápida) */
.lg-pane.lg-pane-wait.is-in { animation-delay: .35s; }
@keyframes lg-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes lg-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.lg-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(242,242,242,.6); }
.lg-h { font-size: 20px; line-height: 26px; font-weight: 600; margin: -6px 0 0; letter-spacing: -.01em; color: #F2F2F2; }
.lg-p { font-size: 12.5px; line-height: 19px; color: rgba(242,242,242,.7); margin: -6px 0 0; }
.lg-p b { color: #F2F2F2; font-weight: 600; }
.lg-f { display: flex; flex-direction: column; gap: 6px; }
.lg-f > span { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(242,242,242,.66); }
.lg-inwrap { position: relative; }
.lg .lg-in { width: 100%; height: 40px; border-radius: 8px; border: 1px solid rgba(242,242,242,.3); background: rgba(10,10,10,.32); color: #fff; padding: 0 12px; font: 500 14px var(--lg-font); outline: none; transition: border-color .2s, box-shadow .2s; }
.lg .lg-in::placeholder { color: rgba(242,242,242,.4); opacity: 1; }
.lg .lg-in:focus { border-color: var(--lg-accent); box-shadow: 0 0 0 3px rgba(111,166,224,.25); }
.lg .lg-in.is-err { border-color: #FF6B57; box-shadow: 0 0 0 3px rgba(255,107,87,.2); }
.lg-inwrap .lg-in { padding-right: 46px; }
/* o Edge desenha o próprio olho no campo de senha: a cena já tem o dela */
.lg input::-ms-reveal, .lg input::-ms-clear { display: none; }
/* preenchimento automático do navegador: sem o fundo claro no vidro escuro */
.lg .lg-in:-webkit-autofill, .lg .lg-in:-webkit-autofill:hover, .lg .lg-in:-webkit-autofill:focus { -webkit-text-fill-color: #fff; caret-color: #fff; -webkit-box-shadow: 0 0 0 40px #262625 inset; transition: background-color 600000s 0s; }
.lg-eye { position: absolute; right: 4px; top: 4px; width: 34px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: rgba(242,242,242,.75); cursor: pointer; display: grid; place-items: center; }
.lg-eye:hover { background: rgba(242,242,242,.08); color: #fff; }
.lg-eye svg { width: 20px; height: 20px; overflow: visible; }
.lg-eye .lid { transform-origin: 12px 12px; transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.lg-eye .pupil { transition: transform .28s, opacity .2s; transform-origin: 12px 12px; }
.lg-eye .slash { stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset .3s; }
.lg-eye[aria-pressed="true"] .slash { stroke-dashoffset: 24; }
.lg-eye[aria-pressed="false"] .pupil { transform: scale(.4); opacity: .4; }
.lg-err { font-size: 12px; color: #FF8A7A; min-height: 0; margin-top: 2px; }
.lg-err:empty { display: none; }
.lg-err small { font-size: 11px; color: rgba(255,138,122,.7); white-space: nowrap; }
.lg-hint { font-size: 11.5px; color: rgba(242,242,242,.55); }
.lg-caps { display: none; font-size: 11.5px; color: #F08252; }
.lg-caps.on { display: block; }
.lg-btn { height: 42px; border: 0; border-radius: 8px; background: #F2F2F2; color: #3C3C3B; font: 700 13px var(--lg-font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden; transition: transform .15s, background .2s; }
.lg-btn:hover { background: #fff; }
.lg-btn:active { transform: scale(.98); }
.lg-btn .arr { transition: transform .25s; }
.lg-btn:hover .arr { transform: translateX(4px); }
.lg-btn.busy { pointer-events: none; color: transparent; }
.lg-btn.busy::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #3C3C3B; border-right-color: transparent; animation: lg-spin .7s linear infinite; }
@keyframes lg-spin { to { transform: rotate(360deg); } }
.lg-links { display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 12px; }
.lg-link { border: 0; background: none; padding: 0; color: rgba(242,242,242,.72); cursor: pointer; font: 500 12px var(--lg-font); text-decoration: underline; text-decoration-color: rgba(242,242,242,.3); text-underline-offset: 3px; }
.lg-link:hover { color: #fff; text-decoration-color: #fff; }
.lg-link[disabled] { text-decoration: none; cursor: default; color: rgba(242,242,242,.5); }
.lg-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; height: 30px; padding: 0 6px 0 4px; border-radius: 99px; border: 1px solid rgba(242,242,242,.2); background: rgba(242,242,242,.06); font-size: 12.5px; }
.lg-chip i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #525151; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; }
.lg-chip .lg-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-chip button { flex: none; border: 0; background: none; color: var(--lg-accent); font: 600 11.5px var(--lg-font); cursor: pointer; padding: 0 6px; }
.lg-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.lg .lg-otp input { width: 100%; min-width: 0; height: 50px; padding: 0; text-align: center; font: 700 22px var(--lg-font); color: #fff; border-radius: 8px; border: 1px solid rgba(242,242,242,.3); background: rgba(10,10,10,.32); outline: none; caret-color: var(--lg-accent); transition: border-color .2s, transform .2s, background .2s; }
.lg .lg-otp input:focus { border-color: var(--lg-accent); box-shadow: 0 0 0 3px rgba(111,166,224,.25); }
.lg .lg-otp input.filled { background: rgba(242,242,242,.1); transform: translateY(-2px); }
.lg .lg-otp.ok input { border-color: #B9CD00; }
.lg .lg-otp.is-err input { border-color: #FF6B57; }
.lg-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(242,242,242,.8); cursor: pointer; }
.lg .lg-check input { width: 15px; height: 15px; accent-color: #6FA6E0; margin: 0; }
.lg-done { align-items: center; text-align: center; padding-top: 12px; }
.lg-bar { width: 100%; height: 3px; border-radius: 3px; background: rgba(242,242,242,.14); overflow: hidden; }
.lg-bar i { display: block; height: 100%; width: 0; background: #F2F2F2; transition: width 1.6s cubic-bezier(.5,0,.2,1); }
.lg-bar.is-wait i { width: 38%; transition: none; animation: lg-wait 1.3s ease-in-out infinite; }
@keyframes lg-wait { from { transform: translateX(-100%); } to { transform: translateX(270%); } }
.lg-sent { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; line-height: 19px; color: rgba(242,242,242,.8); padding: 12px; border: 1px solid rgba(185,205,0,.4); border-radius: 8px; background: rgba(185,205,0,.07); }
.lg-sent svg { flex: none; width: 18px; height: 18px; color: #B9CD00; margin-top: 1px; }
.lg.leaving { animation: lg-leave .9s cubic-bezier(.6,0,.3,1) forwards; pointer-events: none; }
@keyframes lg-leave { to { opacity: 0; transform: scale(1.06); filter: blur(4px); visibility: hidden; } }
.lg-card:has(.lg-done.is-in) { min-height: 0; }
.lg-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

/* foco: campos marcam pela borda azul; botões e links pelo anel azul da cena */
.lg .lg-in:focus-visible, .lg .lg-otp input:focus-visible { outline: none !important; }
.lg .lg-eye:focus-visible { outline-offset: 0 !important; }

/* mascote */
.lg-mascot .part { transition: transform .42s cubic-bezier(.34,1.56,.64,1); transform-box: fill-box; transform-origin: center; }
.lg-mascot .pupils { transition: transform .18s ease-out; }
.lg-mascot .eye { transform-box: fill-box; transform-origin: center; animation: lg-blink 5.5s infinite; }
@keyframes lg-blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }
.lg-mascot .whole { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.lg-mascot .mouth path { transition: opacity .2s; }
.lg-mascot .m-o, .lg-mascot .m-sad, .lg-mascot .m-big { opacity: 0; }
.lg-mascot.cover .hand-l { transform: translate(8px, -64px) rotate(14deg); }
.lg-mascot.cover .hand-r { transform: translate(-8px, -64px) rotate(-14deg); }
.lg-mascot.cover .pupils { transform: translate(0, 3px) !important; }
.lg-mascot.cover .m-smile { opacity: 0; } .lg-mascot.cover .m-o { opacity: 1; }
.lg-mascot.cover .brow-l { transform: translateY(-3px) rotate(-8deg); } .lg-mascot.cover .brow-r { transform: translateY(-3px) rotate(8deg); }
.lg-mascot.peek .hand-l { transform: translate(8px, -64px) rotate(14deg); }
.lg-mascot.peek .hand-r { transform: translate(6px, -30px) rotate(-38deg); }
.lg-mascot.peek .m-smile { opacity: 0; } .lg-mascot.peek .m-o { opacity: 1; }
.lg-mascot.look .brow-l { transform: translateY(-4px) rotate(-10deg); } .lg-mascot.look .brow-r { transform: translateY(-4px) rotate(10deg); }
.lg-mascot.look .whole { transform: translateY(-4px) rotate(-2deg); }
.lg-mascot.sad .brow-l { transform: translateY(1px) rotate(18deg); } .lg-mascot.sad .brow-r { transform: translateY(1px) rotate(-18deg); }
.lg-mascot.sad .m-smile { opacity: 0; } .lg-mascot.sad .m-sad { opacity: 1; }
.lg-mascot.sad .whole { animation: lg-no .55s ease-in-out; }
@keyframes lg-no { 20% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } }
.lg-mascot.happy .m-smile { opacity: 0; } .lg-mascot.happy .m-big { opacity: 1; }
.lg-mascot.happy .eye { animation: none; transform: scaleY(.55); }
.lg-mascot.happy .whole { animation: lg-hop .9s cubic-bezier(.3,1.6,.5,1) 2; }
.lg-mascot.happy .hand-l { transform: translate(-18px, -58px) rotate(-30deg); }
.lg-mascot.happy .hand-r { transform: translate(18px, -58px) rotate(30deg); }
@keyframes lg-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }
.lg-mascot.nod .whole { animation: lg-nod .25s ease-out; }
.lg-mascot.nod2 .whole { animation: lg-nod2 .25s ease-out; }
@keyframes lg-nod { 50% { transform: translateY(3px) rotate(1deg); } }
@keyframes lg-nod2 { 50% { transform: translateY(3px) rotate(1deg); } }

@media (max-width: 760px) {
  .lg-scroll { padding: 150px 16px 24px; }
  .lg-stage { margin: auto; }
  .lg-node text, .lg-foot .lg-alt { display: none; }
  .lg-top { left: 16px; } .lg-top .sub { display: none; } .lg-foot { left: 16px; }
}
@media (max-height: 620px) { .lg-mascot { display: none; } .lg-scroll { padding-top: 72px; } }
@media (prefers-reduced-motion: reduce) {
  .lg-kb, .lg-fog, .lg-mascot .eye, .lg-node.is-now circle.ring, .lg-bar.is-wait i { animation: none !important; }
  .lg-world, .lg-ridge .trail, .lg-mascot .part, .lg-mascot .whole, .lg-mascot .pupils, .lg-bar i, .lg-bg { transition-duration: .01s !important; }
  .lg-ridge .deco { animation-duration: .01s; }
  .lg-pane.is-in { animation: none; }
  .lg-card.shake, .lg-card.shake2, .lg-mascot .whole { animation: none !important; }
  .lg.leaving { animation: lg-leave-rm .3s linear forwards; }
}
@keyframes lg-leave-rm { to { opacity: 0; visibility: hidden; } }