/* ═══ Tela de login (js/login.js) — sempre escura, como a referência ═══ */
.lg{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;background:#0B0B0E;color:#EDEDF2;overflow:hidden;font-family:'Inter',system-ui,sans-serif}
.lg.on{display:flex;animation:lgIn .5s ease both}
.lg.saindo{animation:lgOut .55s ease both}
@keyframes lgIn{from{opacity:0}}
@keyframes lgOut{to{opacity:0}}
.lg-cv{position:absolute;top:0;bottom:0;width:40%;height:100%}
.lg-cv.esq{left:0}
.lg-cv.dir{right:0}
.lg-card{position:relative;z-index:3;width:min(340px,86vw);display:flex;flex-direction:column;gap:12px;animation:lgCard .7s cubic-bezier(.16,1,.3,1) .2s both}
@keyframes lgCard{from{opacity:0;transform:translateY(14px)}}
.lg-logo{width:54px;height:54px;border-radius:50%;overflow:hidden;align-self:center;margin-bottom:4px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 30px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;background:#16161B;font-weight:700}
.lg-logo img{width:100%;height:100%;object-fit:cover}
.lg-card h1{margin:0 0 14px;text-align:center;font-family:'Inter',system-ui,sans-serif;font-size:26px;font-weight:600;letter-spacing:-.035em}
.lg-f{display:flex;flex-direction:column;gap:6px}
.lg-f>span{font-size:12px;font-weight:600;color:#D9D9E0}
.lg-in{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;border-radius:9px;background:#18181D;border:1px solid #26262D;color:#6F6F7B;transition:border-color .15s,box-shadow .15s}
.lg-in:focus-within{border-color:rgba(139,92,246,.6);box-shadow:0 0 0 3px rgba(139,92,246,.12)}
.lg-in input{flex:1;min-width:0;background:none;border:none;outline:none;color:#EDEDF2;font:inherit;font-size:13px}
.lg-in input::placeholder{color:#5E5E69}
.lg-olho{display:inline-flex;color:#6F6F7B;padding:4px;border-radius:6px}
.lg-olho:hover,.lg-olho.on{color:#EDEDF2}
.lg-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#8A8A96;margin-top:-2px}
.lg-row a{color:#B9B9C4;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lg-row a:hover{color:#fff}
.lg-chk{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.lg-chk input{display:none}
.lg-chk i{width:15px;height:15px;border-radius:4px;border:1px solid #3A3A44;display:inline-flex;align-items:center;justify-content:center}
.lg-chk input:checked+i{background:#8B5CF6;border-color:#8B5CF6}
.lg-chk input:checked+i::after{content:'';width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.lg-btn{height:40px;margin-top:8px;border-radius:9px;background:linear-gradient(135deg,#8B5CF6,#7C3AED);color:#fff;font-weight:600;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 24px rgba(124,58,237,.3);transition:filter .15s,transform .15s}
.lg-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.lg-btn.carregando{pointer-events:none;filter:brightness(.9)}
.lg-btn.carregando::before{content:'';width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:lgGira .7s linear infinite}
@keyframes lgGira{to{transform:rotate(360deg)}}
.lg-or{display:flex;align-items:center;gap:10px;font-size:11px;color:#5E5E69}
.lg-or i{flex:1;height:1px;background:#24242B}
.lg-btn2{height:40px;border-radius:9px;background:#050507;border:1px solid #24242B;color:#EDEDF2;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:border-color .15s}
.lg-btn2:hover{border-color:#3A3A44}
.lg-msg{min-height:16px;text-align:center;font-size:11.5px;color:#C4B5FD}
.lg-msg.pisca{animation:lgCard .4s ease}
.lg-foot{text-align:center;font-size:11.5px;color:#6F6F7B;line-height:1.6}
.lg-ver{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;font-size:10.5px;letter-spacing:.08em;color:#4A4A55;font-family:"JetBrains Mono",ui-monospace,monospace}
@media(max-width:900px){.lg-cv{width:60%;opacity:.35}}

/* ═══ Carregamento depois de "Conectar" ═══ */
.lg-boot{position:fixed;inset:0;z-index:5100;display:none;align-items:center;justify-content:center;background:#0A0A0D;font-family:'Inter',system-ui,sans-serif;color:#EDEDF2}
.lg-boot.on{display:flex;animation:lgIn .45s ease both}
.lg-boot.sai{animation:lgbSai .7s cubic-bezier(.4,0,.2,1) both}
@keyframes lgbSai{to{opacity:0;filter:blur(6px)}}
.lgb-c{display:flex;flex-direction:column;align-items:center;gap:18px;animation:lgCard .6s cubic-bezier(.16,1,.3,1) both}
.lgb-logo{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
.lgb-anel{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 55%,rgba(167,139,250,.15) 65%,#A78BFA 92%,#fff 100%);-webkit-mask:radial-gradient(circle,transparent 61%,#000 62%);mask:radial-gradient(circle,transparent 61%,#000 62%);animation:lgGira 1.1s linear infinite}
.lgb-anel.b{inset:10px;background:conic-gradient(from 180deg,transparent 0 60%,rgba(139,92,246,.6) 100%);animation-duration:1.8s;animation-direction:reverse;opacity:.7}
.lgb-img{width:52px;height:52px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.lgb-img img{width:100%;height:100%;object-fit:cover}
.lgb-nome{font-size:24px;font-weight:600;letter-spacing:-.035em}
.lgb-barra{width:220px;height:3px;border-radius:3px;background:#1E1E25;overflow:hidden}
.lgb-barra i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#7C3AED,#C4B5FD);box-shadow:0 0 12px rgba(167,139,250,.6)}
.lgb-st{width:220px;display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:#8A8A96}
.lgb-st b{font-weight:500;color:#C4B5FD;font-variant-numeric:tabular-nums;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px}
.lgb-st span.troca{animation:lgbTxt .35s ease}
@keyframes lgbTxt{from{opacity:0;transform:translateY(4px)}}

/* ═══ O sistema "nascendo" depois do carregamento ═══ */
.lg-nasce{animation:lgNasce .6s cubic-bezier(.16,1,.3,1) backwards;animation-delay:var(--nd,0ms)}
.lg-nasce.nx{--nt:translateX(-10px)}
.lg-nasce.ny{--nt:translateY(-8px)}
.lg-nasce.nz{--nt:translateY(12px) scale(.985)}
@keyframes lgNasce{from{opacity:0;transform:var(--nt);filter:blur(5px)}}

/* ═══ Menu da foto: "Sair" com fundo vermelho de ponta a ponta ao passar o mouse ═══ */
#drop-perfil .pf-sair{width:100%;border:1px solid transparent;border-radius:8px;color:var(--red);transition:background .15s,border-color .15s}
#drop-perfil .pf-sair:hover{background:rgba(127,29,29,.28);border-color:rgba(248,113,113,.55);color:#F87171}
/* textura de pontinhos no fundo (a mesma do quadro de Departamentos), parada */
.lg{background-color:#0B0B0E;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:22px 22px}

/* ═══ Símbolo do MadeOS no login ═══ */
.mos-sim{display:block;width:100%;height:100%}
.lg-logo-mos{width:64px!important;height:64px!important;border-radius:18px!important;padding:12px;box-sizing:border-box;background:radial-gradient(circle at 50% 35%,#2A2142,#151320 70%)!important;box-shadow:0 0 0 1px rgba(167,139,250,.28),0 12px 34px rgba(0,0,0,.6),0 0 40px rgba(139,92,246,.18)!important;overflow:visible!important;position:relative}
.lg-logo-mos::after{content:"";position:absolute;inset:-1px;border-radius:19px;background:conic-gradient(from 0deg,transparent 0 70%,rgba(196,181,253,.55) 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;animation:lgMosAro 4s linear infinite;pointer-events:none}
.lg-logo-mos .mos-sim{filter:drop-shadow(0 0 10px rgba(196,181,253,.35));animation:lgMosRespira 3.2s ease-in-out infinite}
@keyframes lgMosAro{to{transform:rotate(360deg)}}
@keyframes lgMosRespira{0%,100%{filter:drop-shadow(0 0 6px rgba(196,181,253,.25))}50%{filter:drop-shadow(0 0 16px rgba(196,181,253,.6))}}

/* ═══ Carregamento com o símbolo (cerca de 4,6 s) ═══ */
.lgb2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lgb2-fundo{position:absolute;inset:0;pointer-events:none}
.lgb2-luz{position:absolute;left:50%;top:46%;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.22),rgba(139,92,246,.06) 40%,transparent 70%);opacity:0;transform:scale(.6);animation:lgbLuz 1.6s cubic-bezier(.2,.8,.2,1) .1s forwards}
.lgb2-grade{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.2px);background-size:26px 26px;-webkit-mask:radial-gradient(circle at 50% 46%,#000 0,transparent 55%);mask:radial-gradient(circle at 50% 46%,#000 0,transparent 55%);opacity:0;animation:lgbFade 1.2s ease .2s forwards}
.lgb2-c{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px}
.lgb2-marca{width:min(440px,64vw);height:auto;overflow:visible}
/* 1. o ponto de luz acende no centro */
.lgb2-nucleo{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;animation:lgbNucleo 2.4s cubic-bezier(.2,.8,.2,1) .2s forwards}
/* 2. a linha contorna o símbolo */
.lgb2-linha{fill:none;stroke:#C4B5FD;stroke-width:4;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:lgbLinha 1.5s cubic-bezier(.45,.05,.25,1) .5s forwards,lgbLinhaSai .8s ease 2.1s forwards}
/* 3. o preenchimento varre da esquerda para a direita */
.lgb2-varre{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:lgbVarre .85s cubic-bezier(.65,0,.25,1) 1.55s forwards}
/* 4. ondas de luz saindo do centro */
.lgb2-onda{fill:none;stroke:#A78BFA;stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center;animation:lgbOnda 1.3s cubic-bezier(.2,.8,.2,1) 2.25s forwards}
.lgb2-onda.o2{stroke:#E9E3FF;stroke-width:1.5;animation-delay:2.45s}
/* 5. M e S saem de trás do símbolo */
.lgb2-m{transform:translateX(560px);animation:lgbM 1.35s cubic-bezier(.3,.9,.25,1) 2.5s forwards}
.lgb2-s{transform:translateX(-470px);animation:lgbS 1.35s cubic-bezier(.3,.9,.25,1) 2.58s forwards}
/* 6. brilho passando por cima da marca */
.lgb2-brilho{transform:skewX(-18deg) translateX(0);animation:lgbBrilho 1.1s cubic-bezier(.45,0,.25,1) 3.45s forwards}
/* barra e textos */
.lgb2-base{display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transform:translateY(8px);animation:lgbBase .6s ease .9s forwards}
.lgb2-base .lgb-barra{width:240px}
.lgb2-base .lgb-st{width:240px}
@keyframes lgbLuz{to{opacity:1;transform:scale(1)}}
@keyframes lgbFade{to{opacity:1}}
@keyframes lgbNucleo{0%{transform:scale(0);opacity:0}18%{transform:scale(.22);opacity:1}55%{transform:scale(.55);opacity:1}75%{transform:scale(1.05);opacity:.9}100%{transform:scale(.6);opacity:0}}
@keyframes lgbLinha{0%{stroke-dashoffset:1;opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes lgbLinhaSai{to{opacity:.0;stroke-width:1}}
@keyframes lgbVarre{to{transform:scaleX(1)}}
@keyframes lgbOnda{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(6.5)}}
@keyframes lgbM{to{transform:translateX(0)}}
@keyframes lgbS{to{transform:translateX(0)}}
@keyframes lgbBrilho{to{transform:skewX(-18deg) translateX(2300px)}}
@keyframes lgbBase{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lgb2 *{animation-duration:.01s!important;animation-delay:0s!important}}

/* ═══ Marca inteira do MadeOS no cartão de login: entra animada e fica parada em branco ═══ */
.lg-marca{align-self:center;display:flex;justify-content:center;margin:2px 0 18px}
.mos-marca{display:block;width:150px;height:auto;overflow:visible}
.mos-marca.anima .mos-o{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.82);filter:blur(6px);animation:mosO .8s cubic-bezier(.2,.8,.2,1) .15s forwards}
.mos-marca.anima .mos-m{transform:translateX(560px);animation:mosL 1.1s cubic-bezier(.3,.9,.25,1) .55s forwards}
.mos-marca.anima .mos-s{transform:translateX(-470px);animation:mosL 1.1s cubic-bezier(.3,.9,.25,1) .62s forwards}
@keyframes mosO{60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes mosL{to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.mos-marca.anima *{animation-duration:.01s!important;animation-delay:0s!important}}

/* tela de entrar: sem os títulos "E-mail" e "Senha" em cima dos campos (o ícone e o texto de dentro já dizem) */
.lg-card.sem-rot .lg-f>span{display:none}
.lg-card.sem-rot .lg-msg:empty{display:none}