/* v298 — Tela de entrada em duas colunas (arte/banner à esquerda, formulário à direita).
   Usada por: /login (sistema), /portal/login (Portal do Aluno) e /aula-portal/login.
   Responsivo: abaixo de 900px vira uma coluna só (faixa de marca em cima, formulário embaixo). */
.ls-page{
  --ls-bg:#ffffff; --ls-ink:#16232e; --ls-muted:#647485; --ls-line:#d5dde4; --ls-field:#ffffff;
  --ls-accent:#e0972d; --ls-accent-dark:#c67f1e; --ls-accent-ink:#1c1300; --ls-link:#1c3a52; --ls-soft:#f3f5f7;
  min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  background:var(--ls-bg); color:var(--ls-ink);
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif; font-size:15px;
}
.ls-page.ls-dark{
  --ls-bg:#11161d; --ls-ink:#eef2f6; --ls-muted:#93a1b0; --ls-line:#2b3643; --ls-field:#0d1218;
  --ls-link:#e0972d; --ls-soft:#161d26;
}
.ls-page *{box-sizing:border-box}

/* ---------- Coluna da esquerda (arte ou banner) ---------- */
.ls-hero{
  position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 40px; text-align:center; color:#fff;
  background:linear-gradient(150deg,#0f2233 0%,#1c3a52 55%,#2b5877 100%);
}
.ls-dark .ls-hero{background:linear-gradient(150deg,#05070a 0%,#11161d 55%,#1c2531 100%)}
.ls-hero::before,.ls-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.ls-hero::before{width:420px;height:420px;right:-140px;top:-140px;background:rgba(224,151,45,.12)}
.ls-hero::after{width:300px;height:300px;left:-110px;bottom:-110px;background:rgba(255,255,255,.06)}
.ls-hero-txt{position:relative;z-index:1;max-width:460px}
.ls-hero-txt h2{margin:0 0 8px;font-size:30px;line-height:1.25;font-weight:400}
.ls-hero-txt h2 b{font-weight:800;color:#ffd08a}
.ls-hero-txt p{margin:0;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.ls-art{position:relative;z-index:1;width:100%;max-width:440px;height:auto;margin-top:26px}
/* Quando a escola cadastrou uma imagem/banner de fundo em Configurações, ele ocupa a coluna inteira */
.ls-hero--banner{background-color:#05070a;background-repeat:no-repeat;background-position:center;background-size:cover;padding:0}
.ls-hero--banner::before,.ls-hero--banner::after,.ls-hero--banner .ls-hero-txt,.ls-hero--banner .ls-art{display:none}

/* ---------- Coluna da direita (formulário) ---------- */
.ls-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;position:relative}
.ls-box{width:100%;max-width:400px}
.ls-logo{display:block;max-width:100%;max-height:78px;object-fit:contain;margin:0 auto 14px;border-radius:10px}
.ls-brand{font-size:26px;font-weight:800;text-align:center;margin:0 0 10px;color:var(--ls-ink)}
.ls-system{margin:0;text-align:center;font-size:15px;font-weight:600;color:var(--ls-ink)}
.ls-date{margin:4px 0 26px;text-align:center;font-size:12.5px;color:var(--ls-muted);min-height:1.2em}
.ls-box .flash{margin:0 0 16px;border-radius:10px;font-size:13.2px}

.ls-field{margin-bottom:16px}
.ls-page .ls-field label{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--ls-muted);text-transform:none;letter-spacing:0}
.ls-input{position:relative}
.ls-page .ls-input input{
  display:block;width:100%;height:48px;padding:0 14px;border:1.5px solid var(--ls-line);border-radius:10px;
  background:var(--ls-field);color:var(--ls-ink);font:inherit;font-size:16px;margin:0;
  transition:border-color .15s, box-shadow .15s;
}
.ls-page .ls-input input::placeholder{color:#9aa7b4;font-size:14.5px}
.ls-page .ls-input input:focus{outline:none;border-color:var(--ls-accent);box-shadow:0 0 0 3px rgba(224,151,45,.22)}
.ls-input.ls-has-toggle input{padding-right:48px}
.ls-toggle{
  position:absolute;right:4px;top:4px;width:40px;height:40px;border:0;border-radius:8px;background:transparent;
  color:var(--ls-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.ls-toggle:hover{color:var(--ls-ink);background:rgba(128,140,152,.14)}
.ls-toggle:focus-visible{outline:2px solid var(--ls-accent)}
.ls-toggle svg{width:20px;height:20px}
.ls-toggle .ls-eye-off{display:none}
.ls-toggle[aria-pressed="true"] .ls-eye{display:none}
.ls-toggle[aria-pressed="true"] .ls-eye-off{display:block}
.ls-help{display:block;margin-top:6px;font-size:12.3px;text-align:right}

.ls-btn{
  display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin-top:8px;border:0;border-radius:10px;
  background:var(--ls-accent);color:var(--ls-accent-ink);font:inherit;font-size:16px;font-weight:700;cursor:pointer;
  transition:background .15s, transform .05s;
}
.ls-btn:hover{background:var(--ls-accent-dark)}
.ls-btn:active{transform:translateY(1px)}
.ls-btn:disabled{opacity:.7;cursor:wait}
.ls-btn:focus-visible{outline:3px solid rgba(224,151,45,.45);outline-offset:2px}

.ls-sep{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:var(--ls-muted);font-size:12.5px}
.ls-sep::before,.ls-sep::after{content:"";flex:1;height:1px;background:var(--ls-line)}
.ls-alt{
  display:block;width:100%;padding:13px 14px;border:1.5px solid var(--ls-line);border-radius:10px;text-align:center;
  font-weight:700;font-size:14.5px;color:var(--ls-link);background:transparent;
}
.ls-alt:hover{border-color:var(--ls-accent);color:var(--ls-accent-dark)}
.ls-links{margin-top:18px;text-align:center;font-size:13px;line-height:1.7;color:var(--ls-muted)}
.ls-links a,.ls-help a{color:var(--ls-link);font-weight:600}
.ls-links a:hover,.ls-help a:hover{color:var(--ls-accent-dark);text-decoration:underline}
.ls-links p{margin:0 0 8px}
.ls-foot{margin-top:28px;text-align:center;font-size:12px;color:var(--ls-muted)}

/* ---------- Celular / tablet ---------- */
@media (max-width:900px){
  .ls-page{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .ls-hero{padding:26px 22px 22px}
  .ls-hero-txt h2{font-size:21px;margin-bottom:4px}
  .ls-hero-txt p{font-size:13.5px}
  .ls-art{display:none}
  .ls-hero::before{width:220px;height:220px;right:-90px;top:-100px}
  .ls-hero::after{display:none}
  /* banner cadastrado: preenche toda a faixa do topo (cover, centralizado) */
  .ls-hero--banner{aspect-ratio:4/3;max-height:44vh;min-height:210px;padding:0}
  .ls-panel{justify-content:flex-start;padding:26px 20px calc(28px + env(safe-area-inset-bottom,0px))}
  .ls-date{margin-bottom:20px}
}
@media (max-width:380px){
  .ls-brand{font-size:22px}
  .ls-hero-txt h2{font-size:19px}
}
@media (prefers-reduced-motion:reduce){.ls-page *{transition:none!important}}