/* -----------------------------------------------------------
   2026-11-10 (pedido do usuário): tela de LOGIN do PC com o líquido
   laranja no fundo, logo grande à esquerda e o cartão do formulário em
   relevo à direita. Só vale no PC (>= 901px): o js/login-mare.js põe a
   classe "lm" no body e monta a cena; no celular nada disto existe e a
   tela de login continua a de sempre (css/login.css).
   Tela "de design" de 1536x800 escalada pela janela.
   ----------------------------------------------------------- */
body.lm { display: block; padding: 0; margin: 0; min-height: 100vh; overflow: hidden; background-color: #030303; }
body.lm .pagina-login { display: none; }

.lm-raiz { position: fixed; inset: 0; z-index: 1; font-family: inherit; color: #f2f2f4; }
.lm-raiz *, .lm-raiz *::before, .lm-raiz *::after { box-sizing: border-box; }
.lm-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 25% 40%, rgba(252, 85, 3, 0.2), transparent 55%), #030303; }
.lm-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 35% 50%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 35% 50%, #000 10%, transparent 70%); }
.lm-cv { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }
.lm-vp { position: absolute; left: 0; top: 0; width: 1536px; height: 800px; transform-origin: 0 0; pointer-events: none; }
.lm-vp0 { z-index: 1; }
.lm-vpC { z-index: 5; }
.lm-vpL { z-index: 7; }
/* 2026-11-10 (Sugestão A, faixa de líquido): a camada do login é recortada pela faixa que sobe; embaixo dela já aparece o fundo da apresentação */
.lm-pbg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 38%, rgba(252, 85, 3, 0.26), rgba(252, 85, 3, 0.06) 42%, transparent 66%), #030303; }
.lm-pbg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 70%); }
.lm-cam { position: absolute; inset: 0; z-index: 2; }
.lm-cv2 { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; }
.lm-vpC > * { pointer-events: auto; }

.lm-dv { position: absolute; left: 100px; top: 452px; width: 64px; height: 4px; border-radius: 2px; background: #fc5503; }
.lm-tag { position: absolute; left: 100px; top: 480px; width: 760px; margin: 0; font-size: 40px; font-weight: 700; line-height: 1.15; color: #f2f2f4; }
.lm-sub { position: absolute; left: 100px; top: 540px; margin: 0; font-size: 21px; color: #a4a4ac; }
.lm-tag strong { color: #fc5503; font-weight: 700; }
.lm-rod { position: absolute; left: 100px; top: 700px; margin: 0; font-size: 14px; color: #6b6b72; }

.lm-logo { position: absolute; left: 100px; top: 175px; width: 290px; height: 231px; will-change: transform; }
.lm-logo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.lm-logo .lm-o { filter: drop-shadow(0 0 26px rgba(252, 85, 3, 0.55)); }
.lm-logo .lm-b { filter: brightness(0) invert(1); opacity: 0; }

/* cartão do formulário */
.lm-vpC .pagina-login__form { position: absolute; left: 928px; top: 185px; width: 460px; height: 430px; margin: 0; padding: 36px 40px; display: block; overflow: hidden; border-radius: 28px; border: 1px solid #2c2c31; background: linear-gradient(160deg, rgba(29, 29, 33, 0.92), rgba(15, 15, 17, 0.94)); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 70px rgba(252, 85, 3, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.09); }
.lm-fh { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.lm-fi { width: 40px; height: 40px; flex: none; border-radius: 12px; background: linear-gradient(180deg, #2a2a2e, #18181a); border: 1px solid #3a3a40; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; }
.lm-fi svg { width: 21px; height: 21px; stroke: #fc5503; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lm-vpC .pagina-login__form h1 { display: block; font-size: 25px; font-weight: 700; line-height: 1.1; margin: 0; color: #f2f2f4; }
.lm-vpC .pagina-login__form h1::before { display: none !important; } /* o ícone antigo do login.css: aqui o ícone é o do cabeçalho (.lm-fi) */
.lm-vpC .pagina-login__subtitulo { font-size: 13px; line-height: 1.35; max-width: 320px; margin: 4px 0 0; color: #a4a4ac; }
.lm-vpC .aviso-erro-login, .lm-vpC .aviso-sucesso-login { margin: 14px 0 0; }
.lm-vpC .pagina-login__form .campo-filtro { margin: 0; }
.lm-vpC .pagina-login__form .campo-filtro label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #b4b4bc; margin: 16px 0 8px; }
.lm-vpC .pagina-login__form .campo-filtro.espaco-acima { margin-top: 0; }
.lm-vpC .pagina-login__form .campo { width: 100%; height: 52px; border-radius: 13px; border: 1px solid #2c2c31; padding: 0 16px 0 46px; font-size: 15px; color: #fff; outline: none; background-color: #0b0b0d; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.05); }
.lm-vpC #campo-email { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fc5503' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>") no-repeat 16px center / 18px 18px, linear-gradient(180deg, #08080a, #141417); }
.lm-vpC #campo-senha { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fc5503' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='7.5' cy='15.5' r='5.5'/><path d='m21 2-9.6 9.6'/><path d='m15.5 7.5 3 3L22 7l-3-3'/></svg>") no-repeat 16px center / 18px 18px, linear-gradient(180deg, #08080a, #141417); }
.lm-vpC .pagina-login__form .campo:focus { border-color: #fc5503; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 0 3px rgba(252, 85, 3, 0.22), 0 0 22px rgba(252, 85, 3, 0.35); }
.lm-vpC .pagina-login__esqueci { display: block; text-align: right; font-size: 13px; color: #b0b0b8; margin: 12px 0 18px; }
.lm-vpC .pagina-login__form .btn { position: relative; overflow: hidden; width: 100%; height: 54px; border: none; border-radius: 13px; font-size: 17px; font-weight: 700; color: #fff; justify-content: center; background: linear-gradient(180deg, #ff8f4a, #e24800); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 28px -8px rgba(252, 85, 3, 0.75); }
.lm-vpC .pagina-login__form .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-18deg); animation: lm-brilho 3.6s ease-in-out infinite; }
@keyframes lm-brilho { 0%, 55% { left: -60%; } 100% { left: 140%; } }
.lm-vpC .pagina-login__form .btn:disabled { cursor: progress; opacity: 0.85; }

/* 2026-11-10 (texto junto com a faixa): a saudação, a data, as pílulas e o avatar da apresentação ficam já montados por baixo do login
   (mesmas peças de css/apresentacao-entrada.css); a faixa que sobe vai revelando. */
.lm-pres.ap-raiz { position: absolute; inset: 0; z-index: 1; }

/* 2026-11-10: aviso de sessão expirada (login aberto por js/sessao-expirada.js, com ?expirada=1) */
.lm-aviso { position: absolute; left: 928px; top: 126px; width: 460px; padding: 12px 18px; border-radius: 14px; border: 1px solid #7a4a10; background: linear-gradient(180deg, #1d1710, #121110); color: #f4d27a; font-size: 17px; display: flex; gap: 10px; align-items: center; }
.lm-aviso svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }