/* ==========================================================================
   Tela de login — GP Gestão (referência: img/login.png)
   Composição de 1672×941 que escala como um todo:
     --u  (contain) escala o cartão e o texto;
     --c  (cover)   escala a foto do painel escuro.
   ========================================================================== */
#page-login {
  position: fixed; inset: 0; z-index: 10; overflow: auto;
  container-type: size; background: #FAFAF8;
  font-family: "Inter", system-ui, sans-serif; color: #111;
}
.lgx-wrap {
  --u: min(calc(100cqw / 1672), calc(100cqh / 941));
  /* cover, limitado a 1,2× a escala da altura: em telas ultralargas a foto não invade o texto */
  --c: min(max(calc(100cqw / 1672), calc(100cqh / 941)), calc(100cqh / 941 * 1.2));
  --folga: calc(54.85cqw - 917 * var(--c));   /* >0: a foto não cobre o painel inteiro */
  --verde: #B9E769;          /* destaques sobre o painel escuro */
  --verde-txt: #3E7203;      /* "vindo!" e links */
  --verde-ic: #5E9A25;       /* ícones dos campos */
  --linha: #E6E8E1;
  --pad: calc(var(--u) * 54);
  display: grid; grid-template-columns: 54.85cqw 1fr; min-height: 100cqh;
}

/* ── painel escuro ─────────────────────────────────────────────────────── */
.lgx-show { position: relative; overflow: hidden; background: #0B100A; min-height: 100cqh; }
.lgx-photo {
  /* ancorada acima do centro: em telas muito largas o corte vertical poupa a logo */
  position: absolute; left: max(0px, var(--folga)); top: 30%; transform: translateY(-30%);
  width: calc(var(--c) * 917); height: calc(var(--c) * 941);
  background: url(../img/login-fundo.webp) 0 0 / 100% 100% no-repeat;
  /* com folga, a borda esquerda da foto se dissolve no fundo escuro; sem folga o fade vale 0 */
  --fade: clamp(0px, calc((var(--folga) - 3px) * 1000), 160px);   /* tolera 3px de arredondamento */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade)); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade));
}
.lgx-copy {
  position: absolute; left: calc(var(--u) * 168); bottom: calc(var(--u) * 108);
  color: #fff; max-width: calc(var(--u) * 640);
}
.lgx-hl {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: calc(var(--u) * 37.5);
  line-height: calc(var(--u) * 47); letter-spacing: -.005em; margin: 0; color: #fff;
}
.lgx-hl em { font-style: normal; color: var(--verde); }
.lgx-rule {
  display: block; width: calc(var(--u) * 112); height: calc(var(--u) * 3); border-radius: 3px;
  margin-top: calc(var(--u) * 10);
  background: linear-gradient(90deg, #B9E769, rgba(185,231,105,.15));
}
.lgx-sub {
  margin: calc(var(--u) * 21) 0 0; font-size: calc(var(--u) * 23); line-height: calc(var(--u) * 30);
  color: rgba(255,255,255,.92); font-weight: 400;
}
.lgx-feats { list-style: none; margin: calc(var(--u) * 42) 0 0; padding: 0; display: flex; align-items: center; }
.lgx-feats li { display: flex; align-items: center; gap: calc(var(--u) * 14); font-size: calc(var(--u) * 15.5); line-height: 1.3; font-weight: 600; color: #fff; }
.lgx-feats .ring {
  width: calc(var(--u) * 56); height: calc(var(--u) * 56); flex: none; border-radius: 50%;
  border: calc(var(--u) * 2) solid var(--verde); color: var(--verde);
  background: rgba(185,231,105,.08); display: grid; place-items: center;
}
.lgx-feats .ring svg { width: 52%; height: 52%; }
.lgx-feats li:nth-child(1) { width: calc(var(--u) * 182); }
.lgx-feats li:nth-child(3) { width: calc(var(--u) * 167); }
.lgx-feats .sep { width: 1px; height: calc(var(--u) * 38); background: rgba(255,255,255,.26); margin: 0 calc(var(--u) * 29) 0 0; }

/* ── painel claro ──────────────────────────────────────────────────────── */
.lgx-main {
  position: relative; display: flex; align-items: center; overflow: hidden; min-height: 100cqh;
  padding-top: calc(var(--u) * 14);
  background: linear-gradient(180deg, #FDFDFC 0%, #F8F9F5 100%);
}
.lgx-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lgx-card {
  position: relative; flex: none; width: calc(var(--u) * 618);
  margin-left: max(calc(var(--u) * 1), calc((45.15cqw - var(--u) * 618) / 2 - var(--u) * 68));
  padding: calc(var(--u) * 50) var(--pad) calc(var(--u) * 26); background: #fff;
  border-radius: calc(var(--u) * 44); text-align: center;
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 8) rgba(26,26,24,.05),
              0 calc(var(--u) * 34) calc(var(--u) * 70) calc(var(--u) * -28) rgba(26,26,24,.22);
}
.lgx-dots { position: absolute; pointer-events: none; opacity: .75; }
.lgx-dots-a { top: calc(var(--u) * 18); right: calc(var(--u) * 8); width: calc(var(--u) * 140); }
.lgx-dots-b { bottom: calc(var(--u) * 22); left: calc(var(--u) * 20); width: calc(var(--u) * 50); }

.lgx-tile {
  width: calc(var(--u) * 141); height: calc(var(--u) * 131); margin: 0 auto; border-radius: calc(var(--u) * 38);
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 34) calc(var(--u) * -12) rgba(26,26,24,.22), 0 calc(var(--u) * 2) calc(var(--u) * 8) rgba(26,26,24,.06);
}
.lgx-tile img { width: 79%; height: auto; display: block; }
.lgx-card h1 {
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: calc(var(--u) * 50.5); line-height: 1.12;
  letter-spacing: -.025em; margin: calc(var(--u) * 20) 0 0; color: #111;
}
.lgx-card h1 span { color: var(--verde-txt); }
.lgx-lead { margin: calc(var(--u) * 6) 0 0; font-size: calc(var(--u) * 19.4); color: #737483; }

.lgx-form { text-align: left; margin-top: calc(var(--u) * 34); }
.lgx-field + .lgx-field { margin-top: calc(var(--u) * 23); }
.lgx-field > label { display: block; font-size: calc(var(--u) * 16.8); font-weight: 500; color: #111; margin: 0 0 calc(var(--u) * 11); }
.lgx-ctl { position: relative; display: flex; align-items: center; }
.lgx-ctl .ic {
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * 61); display: grid; place-items: center;
  background: #F5FAF2; color: var(--verde-ic); border-radius: calc(var(--u) * 14) 0 0 calc(var(--u) * 14); pointer-events: none;
}
.lgx-ctl .ic svg { width: calc(var(--u) * 31); height: calc(var(--u) * 31); }
.lgx-ctl input {
  width: 100%; height: calc(var(--u) * 58); padding: 0 calc(var(--u) * 58) 0 calc(var(--u) * 77);
  border: calc(var(--u) * 1.5) solid #E8E9EE; border-radius: calc(var(--u) * 14); background: #fff;
  font: 400 calc(var(--u) * 16.5) "Inter", sans-serif; color: #111; transition: border-color .15s, box-shadow .15s;
  min-height: 44px;
}
.lgx-ctl input::placeholder { color: #9A9CA8; }
.lgx-ctl input:focus { outline: none; border-color: #6FA82A; box-shadow: 0 0 0 4px rgba(111,168,42,.18); }
.lgx-eye {
  position: absolute; right: calc(var(--u) * 12); width: max(44px, calc(var(--u) * 44)); height: max(44px, calc(var(--u) * 44));
  border: 0; background: none; color: #6B7080; border-radius: calc(var(--u) * 12); cursor: pointer; display: grid; place-items: center;
}
.lgx-eye svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.lgx-eye:hover { color: #111; background: #F3F4F0; }
.lgx-eye:focus-visible, .lgx-alt:focus-visible, .lgx-cta:focus-visible, .lgx-opts a:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(111,168,42,.3); }

.lgx-opts { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--u) * 25); font-size: calc(var(--u) * 16.8); }
.lgx-opts .lgx-check { display: inline-flex; align-items: center; gap: calc(var(--u) * 14); cursor: pointer; color: #222; user-select: none; font-size: calc(var(--u) * 16.8); font-weight: 400; }
.lgx-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lgx-check .box {
  width: calc(var(--u) * 24); height: calc(var(--u) * 24); flex: none; border-radius: calc(var(--u) * 6);
  border: calc(var(--u) * 2) solid #5E9A25; background: #fff; display: grid; place-items: center; color: #fff; transition: background .15s;
}
.lgx-check .box svg { width: 72%; height: 72%; opacity: 0; transition: opacity .12s; }
.lgx-check input:checked + .box { background: #5E9A25; }
.lgx-check input:checked + .box svg { opacity: 1; }
.lgx-check input:focus-visible + .box { box-shadow: 0 0 0 4px rgba(111,168,42,.3); }
.lgx-opts a { color: #3E7900; font-weight: 600; text-decoration: none; border-radius: 6px; }
.lgx-opts a:hover { text-decoration: underline; }

.lgx-cta {
  width: 100%; height: calc(var(--u) * 66); margin-top: calc(var(--u) * 29); border: 0; border-radius: calc(var(--u) * 16);
  min-height: 48px; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center;
  font: 600 calc(var(--u) * 22.5) "Poppins", sans-serif; color: #fff; letter-spacing: .01em;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.06) 100%),
    linear-gradient(100deg, #8FBA5C 0%, #79A740 38%, #6B9C37 72%, #62972F 100%);
  box-shadow: inset 0 calc(var(--u) * 1.5) 0 rgba(255,255,255,.26), 0 calc(var(--u) * 12) calc(var(--u) * 22) calc(var(--u) * -14) rgba(94,148,46,.5);
  transition: filter .15s, transform .1s, box-shadow .15s;
}
.lgx-cta svg { position: absolute; right: calc(var(--u) * 28); width: calc(var(--u) * 28); height: calc(var(--u) * 28); transition: transform .18s; }
.lgx-cta:hover { filter: brightness(1.06); }
.lgx-cta:hover svg { transform: translateX(calc(var(--u) * 4)); }
.lgx-cta:active { transform: translateY(1px); }
.lgx-cta:disabled { cursor: progress; filter: saturate(.7) brightness(1.04); }
.lgx-error { margin: calc(var(--u) * 14) 0 0; text-align: center; font-size: calc(var(--u) * 16); font-weight: 600; color: #C73232; }

.lgx-or { position: relative; margin: calc(var(--u) * 20) 0 0; text-align: center; height: calc(var(--u) * 26); }
.lgx-or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--linha); }
.lgx-or span { position: relative; background: #fff; padding: 0 calc(var(--u) * 14); font-size: calc(var(--u) * 15); color: #707380; line-height: calc(var(--u) * 26); }
.lgx-alt {
  width: 100%; height: calc(var(--u) * 48); margin-top: calc(var(--u) * 7); min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 12);
  background: #fff; border: calc(var(--u) * 1.5) solid #E8E9EE; border-radius: calc(var(--u) * 12);
  font: 500 calc(var(--u) * 17) "Inter", sans-serif; color: #222; cursor: pointer; transition: border-color .15s, background .15s;
}
.lgx-alt svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); color: var(--verde-ic); }
.lgx-alt:not(:disabled):hover { border-color: #6FA82A; background: #FAFCF7; }
.lgx-alt:disabled { cursor: not-allowed; color: #6B6F7E; background: #FAFAFB; }
.lgx-alt:disabled svg { color: #9AA0AE; }
.lgx-soon {
  padding: calc(var(--u) * 3) calc(var(--u) * 10); border-radius: 999px;
  background: #EEF1F5; color: #5A5F70; font-size: calc(var(--u) * 13.5); font-weight: 600; line-height: 1.3;
}
.lgx-foot { margin: calc(var(--u) * 28) 0 0; font-size: calc(var(--u) * 14.8); color: #7A7E8F; }
.lgx-foot b { color: #3D7C00; font-weight: 500; }

@media (prefers-reduced-motion: reduce) { .lgx-cta, .lgx-cta svg, .lgx-ctl input, .lgx-check .box { transition: none; } }

/* ── telas estreitas: só o cartão ──────────────────────────────────────── */
@container (max-width: 900px) {
  .lgx-wrap { --u: .9px; --pad: 18px; grid-template-columns: 1fr; }
  .lgx-show { display: none; }
  .lgx-main { justify-content: center; padding: 20px 14px; }
  .lgx-card { width: min(100%, 520px); margin-left: 0; padding-top: 34px; }
  .lgx-dots-a { width: 100px; }
  .lgx-ctl .ic { width: 52px; }
  .lgx-ctl input { padding-left: 62px; font-size: 16px; }   /* 16px evita o zoom automático do iOS */
  .lgx-opts, .lgx-opts .lgx-check { font-size: 14px; }
  .lgx-opts .lgx-check { gap: 10px; }
}