/* Tela de login (17/10/2026) — medidas tiradas da imagem de referência do usuário:
   painel 600×588 #F2F2F2 com a ilustração; cartão 348×434 sobreposto (176 px), centrado na altura do painel;
   campos 316×60 brancos, botão 316×54 #9D4BFF, título #23004D. */
.lg-page { position: fixed; inset: 0; overflow: auto; background: #fff; font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lg-comp { position: relative; width: 772px; height: 588px; flex: 0 0 auto; margin: 16px; }
.lg-painel { position: absolute; left: 0; top: 0; width: 600px; height: 588px; background: #f2f2f2; border-radius: 16px; }
.lg-ilustracao { position: absolute; left: 20px; top: 110px; width: 382px; height: 376px; user-select: none; -webkit-user-drag: none; }
.lg-cartao { position: absolute; left: 424px; top: 78px; width: 348px; height: 432px; box-sizing: border-box; background: #f2f2f2; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(55, 25, 95, 0.16); }
.lg-titulo { position: absolute; left: 0; right: 0; top: 33px; margin: 0; height: 32px; line-height: 32px; text-align: center;
  font-size: 24px; font-weight: 700; color: #23004d; }
/* 23/10/2026: a mensagem quebra em até 2 linhas (antes cortava com "…" e mal dava para ler) */
.lg-erro { position: absolute; left: 16px; right: 16px; top: 64px; line-height: 16px; text-align: center; font-size: 13px;
  font-weight: 600; color: #d93025; white-space: normal; }
.lg-erro.lg-info { color: #5b2bd6; white-space: normal; height: auto; line-height: 15px; font-size: 12px; top: 66px; }
.lg-campo { position: absolute; left: 16px; width: 316px; height: 60px; box-sizing: border-box; background: #fff; border-radius: 8px; }
.lg-campo.usuario { top: 97px; }
.lg-campo.senha { top: 173px; }
.lg-campo.senha svg { top: 17px; }
.lg-campo svg { position: absolute; left: 15.5px; top: 16px; width: 25.5px; height: 25.5px; pointer-events: none; }
.lg-campo input { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; border: 0; outline: 0; background: transparent;
  border-radius: 8px; padding: 0 14px 0 50px; font: 700 16px "Open Sans", "Segoe UI", Arial, sans-serif; color: #23004d; }
.lg-campo input::placeholder { color: #cecbd2; opacity: 1; }
/* olho do campo Senha (mostrar/esconder) */
.lg-campo.senha input { padding-right: 52px; }
.lg-campo input::-ms-reveal, .lg-campo input::-ms-clear { display: none; }
.lg-olho { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  padding: 0; border: 0; border-radius: 8px; background: none; color: #a49eac; cursor: pointer; }
.lg-olho:hover { color: #9d4bff; background: #f6f1ff; }
.lg-olho:focus-visible { outline: 2px solid #9d4bff; outline-offset: 0; }
.lg-campo .lg-olho svg, .lg-campo.senha .lg-olho svg { position: static; width: 22px; height: 22px; pointer-events: none; }
.lg-olho .lg-olho-esconder, .lg-olho.on .lg-olho-ver { display: none; }
.lg-olho.on .lg-olho-esconder { display: block; }
.lg-olho.on { color: #9d4bff; }
.lg-campo:focus-within { box-shadow: 0 0 0 2px rgba(157, 75, 255, 0.35); }
.lg-esqueceu { position: absolute; right: 16px; top: 242px; height: 18px; line-height: 18px; font-size: 14px; font-weight: 600; color: #a49eac;
  text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; }
.lg-esqueceu:hover { color: #8a8394; }
.lg-entrar { position: absolute; left: 16px; top: 292px; width: 316px; height: 54px; border: 0; border-radius: 8px; background: #9d4bff; color: #fff;
  font: 600 16px "Open Sans", "Segoe UI", Arial, sans-serif; cursor: pointer; }
.lg-entrar:hover { background: #9040f5; }
.lg-entrar:focus-visible { outline: 2px solid #23004d; outline-offset: 2px; }
.lg-aviso { position: absolute; left: 16px; right: 16px; top: 372px; line-height: 16px; text-align: center; font-size: 12px; color: #6f6779; display: none; }
.lg-aviso.on { display: block; }
/* tela estreita: só o cartão, centrado */
@media (max-width: 820px), (max-height: 520px) {
  .lg-comp { width: 348px; height: 432px; }
  .lg-painel { display: none; }
  .lg-cartao { left: 0; top: 0; }
}
@media (max-width: 380px) {
  .lg-comp { width: calc(100vw - 32px); }
  .lg-cartao { width: 100%; }
  .lg-campo, .lg-entrar { width: calc(100% - 32px); }
}
/* 24/10/2026: "Salvar usuário" (só o usuário fica no navegador) na linha do "Esqueceu a senha?" */
.lg-lembrar { position: absolute; left: 16px; top: 242px; height: 18px; line-height: 18px; font-size: 14px; font-weight: 600; color: #a49eac; display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.lg-lembrar:hover { color: #8a8394; }
.lg-lembrar input { width: 16px; height: 16px; margin: 0; accent-color: #9d4bff; cursor: pointer; }
/* 24/10/2026: rodapé com os direitos, logo abaixo do quadro (a página é coluna: quadro + rodapé, centrados juntos) */
.lg-rodape { flex: 0 0 auto; margin: 0 16px 16px; font-size: 12px; color: #a49eac; text-align: center; }