/* ============================================================
   Página de login (TASK-012) — painel da marca + formulário.
   Prefixo lg- para não colidir com os componentes compartilhados.
   ============================================================ */
.lg-body{background:var(--bg);}
.lg{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(420px,1fr); min-height:100vh;}
@media (min-width:981px){ .lg{height:100vh;} }

/* ---------------- painel da marca (sempre escuro) ---------------- */
.lg-hero{position:relative; overflow:hidden; color:#EAF4F2; padding:32px 56px 26px; display:flex; flex-direction:column; gap:24px;
  background:
    radial-gradient(900px 520px at 85% 110%, rgba(63,189,178,.28), transparent 60%),
    radial-gradient(700px 480px at -10% -10%, rgba(42,95,165,.30), transparent 60%),
    linear-gradient(160deg,#07201F 0%,#0A2E2B 45%,#0B1B2A 100%);}
.lg-hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 25%,transparent 75%); mask-image:radial-gradient(ellipse at 60% 40%,#000 25%,transparent 75%);}
.lg-hero > *{position:relative;}
.lg-hero-top{display:flex; align-items:center; gap:14px;}
.lg-hero-top img{height:30px; width:auto;}
.lg-sep{width:1px; height:22px; background:rgba(255,255,255,.22);}
.lg-hero-top small{font-size:12.5px; letter-spacing:.04em; color:rgba(234,244,242,.72);}

.lg-hero-copy{max-width:560px; margin-top:4px;}
.lg-pill{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#9FE3DA; background:rgba(63,189,178,.12); border:1px solid rgba(63,189,178,.28); padding:6px 12px; border-radius:999px;}
.lg-pill i{width:7px; height:7px; border-radius:50%; background:#3FBDB2; box-shadow:0 0 0 4px rgba(63,189,178,.2);}
.lg-hero h2{font-family:var(--font-display); font-weight:600; font-size:clamp(28px,2.9vw,42px); line-height:1.12; letter-spacing:-.01em; margin:14px 0 10px; text-wrap:balance;}
.lg-hero h2 em{font-style:normal; color:#7FDCD1;}
.lg-hero-copy p{font-size:15.5px; line-height:1.6; color:rgba(234,244,242,.74); max-width:500px;}

.lg-preview{max-width:600px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.11); border-radius:18px; padding:18px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.lg-preview-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.lg-preview-head b{font-family:var(--font-display); font-weight:600; font-size:15px;}
.lg-tag{font-size:11px; color:#9FE3DA; display:inline-flex; align-items:center; gap:6px;}
.lg-tag::before{content:""; width:6px; height:6px; border-radius:50%; background:#46D39A;}
.lg-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px;}
.lg-kpi{background:rgba(6,18,24,.55); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:12px;}
.lg-kpi span{display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(234,244,242,.55);}
.lg-kpi svg{display:block; width:100%; height:30px; margin-top:8px;}
.lg-bar{height:9px; border-radius:5px; background:rgba(255,255,255,.12); margin-top:8px; overflow:hidden;}
.lg-bar i{display:block; height:100%; border-radius:5px;}
.lg-bar-a{width:68%; background:linear-gradient(90deg,#3FBDB2,#7FDCD1);}
.lg-bar-b{width:44%; background:linear-gradient(90deg,#5B8DEF,#9DB9F5);}
.lg-chart{background:rgba(6,18,24,.55); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:12px 12px 8px;}
.lg-legend{display:flex; gap:14px; font-size:11px; color:rgba(234,244,242,.62); margin-bottom:6px;}
.lg-legend i{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:-1px;}
.lg-dot-real{background:#3FBDB2;}
.lg-dot-prev{background:#5B8DEF;}
.lg-chart svg{display:block; width:100%; height:78px;}
.lg-ilustra{font-size:10.5px; color:rgba(234,244,242,.42); margin-top:8px; text-align:right;}

.lg-features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:640px;}
.lg-feature{display:flex; flex-direction:column; gap:8px;}
.lg-ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(63,189,178,.14); border:1px solid rgba(63,189,178,.25);}
.lg-ic svg{width:17px; height:17px; stroke:#7FDCD1;}
.lg-feature b{font-size:13.5px; font-weight:600;}
.lg-feature span{font-size:12.5px; line-height:1.45; color:rgba(234,244,242,.62);}
.lg-hero-foot{font-size:12px; color:rgba(234,244,242,.45); display:flex; justify-content:space-between; gap:16px; margin-top:auto;}

/* ---------------- formulário ---------------- */
.lg-side{display:flex; flex-direction:column; padding:28px 40px; background:var(--bg); overflow-y:auto;}
.lg-side-top{display:flex; justify-content:space-between; align-items:center; min-height:36px;}
.lg-logo-mobile{visibility:hidden;}
.lg-form-wrap{flex:1; display:flex; align-items:center; justify-content:center; padding:32px 0;}
.lg-card{width:100%; max-width:420px;}
.lg-eyebrow{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand);}
.lg-card h1{font-family:var(--font-display); font-weight:600; font-size:34px; letter-spacing:-.01em; margin:10px 0 8px; color:var(--text-primary);}
.lg-lead{font-size:14.5px; line-height:1.55; color:var(--text-secondary); margin-bottom:24px;}
.lg-card .msg{margin-bottom:16px;}

.lg-field{margin-bottom:18px;}
.lg-field label{display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--text-primary);}
.lg-control{position:relative;}
.lg-control > svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--text-tertiary); pointer-events:none;}
.lg-control input{width:100%; height:50px; border-radius:12px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-primary);
  font:400 15px var(--font-body); padding:0 48px 0 44px; transition:border-color .15s, box-shadow .15s;}
.lg-control input::placeholder{color:var(--text-tertiary);}
.lg-control input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent);}
.lg-olho{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; border-radius:9px; background:transparent; cursor:pointer; display:grid; place-items:center;}
.lg-olho:hover{background:var(--surface-2);}
.lg-olho:focus-visible{outline:2px solid var(--brand); outline-offset:1px;}
.lg-olho svg{width:18px; height:18px; stroke:var(--text-secondary);}
.lg-olho .lg-olho-fechado{display:none;}
.lg-olho[aria-pressed="true"] .lg-olho-aberto{display:none;}
.lg-olho[aria-pressed="true"] .lg-olho-fechado{display:block;}
.lg-caps{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--warning); margin-top:8px;}
.lg-caps[hidden]{display:none;}
.lg-caps svg{width:14px; height:14px;}

.lg-btn{width:100%; height:50px; border:0; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  font:600 15px var(--font-body); color:var(--brand-on); background:linear-gradient(180deg,var(--brand),var(--brand-strong));
  box-shadow:0 10px 24px -10px color-mix(in srgb,var(--brand) 70%,transparent); transition:transform .12s, box-shadow .12s, opacity .12s; margin-top:6px;}
.lg-btn:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 14px 28px -10px color-mix(in srgb,var(--brand) 80%,transparent);}
.lg-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent); outline-offset:2px;}
.lg-btn:disabled{opacity:.7; cursor:progress;}
.lg-btn svg{width:18px; height:18px; stroke:currentColor;}

.lg-ajuda{display:flex; gap:12px; align-items:flex-start; margin-top:26px; padding:14px 16px; border-radius:12px; background:var(--surface); border:1px solid var(--border);}
.lg-ajuda svg{flex:none; width:20px; height:20px; stroke:var(--brand); margin-top:1px;}
.lg-ajuda b{display:block; font-size:13px; margin-bottom:2px; color:var(--text-primary);}
.lg-ajuda span{font-size:12.5px; line-height:1.5; color:var(--text-secondary);}

.lg-seguranca{list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; margin:22px 0 0; padding:0; font-size:12px; color:var(--text-tertiary);}
.lg-seguranca li{display:inline-flex; align-items:center; gap:6px;}
.lg-seguranca svg{width:14px; height:14px; stroke:var(--positive);}
.lg-side-foot{font-size:12px; color:var(--text-tertiary); text-align:center;}

/* ---------------- responsivo ---------------- */
@media (min-width:981px) and (max-height:780px){ .lg-features span{display:none;} .lg-hero-copy p{font-size:14.5px;} }
@media (max-width:1180px){ .lg-hero{padding:30px 40px 24px;} .lg-features{gap:12px;} }
@media (max-width:980px){
  .lg{grid-template-columns:1fr;}
  .lg-hero{display:none;}
  .lg-side{min-height:100vh; padding:20px 16px;}
  .lg-logo-mobile{visibility:visible;}
  .lg-form-wrap{padding:24px 0;}
  .lg-card h1{font-size:28px;}
}

/* Tela de toque (TASK-074): o olho de "mostrar senha" com 44px. */
@media (pointer:coarse){ .lg-olho{width:44px; height:44px; right:4px;} }