:root{
  --page-bg-1:#0b1118;
  --page-bg-2:#0a0f16;

  --card-bg-top:#0f1624;
  --card-bg-bottom:#0b1119;

  --border-glass:rgba(255,255,255,.08);

  --text:#eaf1ff;
  --muted:#aab7cc;

  --accent:#0084ff;

  --radius-xl:20px;
  --radius-md:12px;

  --shadow-card:0 30px 60px rgba(0,0,0,.6);

  --hero-max-h-desktop: 460px;
  --hero-max-h-mobile:  220px;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -20%, rgba(0,132,255,.10) 0%, transparent 60%),
    radial-gradient(900px 500px at 110% -10%, rgba(0,132,255,.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--page-bg-1), var(--page-bg-2));
  color:var(--text);
}

/* ===== wrapper total (CENTRALIZADO) ===== */
.login-section{
  min-height:100dvh;                    /* viewport dinâmica: corrige mobile */
  display:grid;
  place-content:center;                 /* centro vertical do grid */
  place-items:center;                   /* centro horizontal do item */
  padding-block: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-bottom));
  padding-inline: clamp(12px, 3vw, 24px);
  position:relative;
  overflow:hidden;
}

/* glow extra de fundo */
.login-section::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(800px 600px at 15% 10%, rgba(0,132,255,.18) 0%, transparent 70%),
    radial-gradient(800px 600px at 80% 0%, rgba(0,132,255,.10) 0%, transparent 70%);
  filter:blur(60px);
  opacity:.25;
  pointer-events:none;
}

/* ===== grid principal ===== */
.auth-wrap{
  width:min(960px,100%);
  display:grid;
  grid-template-columns:1fr 1fr;       /* 50/50 desktop */
  align-items:stretch;
  gap:0;
  border-radius:var(--radius-xl);
  background:transparent;

  /* garante centralização dentro do grid-pai */
  justify-self:center;
  align-self:center;
  margin:0;
}

/* ===== banner ===== */
.hero-card{
  position:relative;
  background:linear-gradient(180deg,#0f1624 0%,#0a0f16 100%);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-xl) 0 0 var(--radius-xl);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.07);

  max-height: var(--hero-max-h-desktop); /* evita esticar demais e “descentralizar” */
  width:100%;
  display:flex;
  overflow:hidden;
}

.hero-img-desktop,
.hero-img-mobile{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  display:block;
}
.hero-img-mobile{ display:none; }

.hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 60% at 50% 110%, rgba(0,0,0,.55) 0%, transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%);
  pointer-events:none;
}

/* ===== formulário ===== */
.auth-card{
  position:relative;
  background:linear-gradient(180deg,var(--card-bg-top) 0%,var(--card-bg-bottom) 100%);
  border:1px solid var(--border-glass);
  border-left:0;
  border-radius:0 var(--radius-xl) var(--radius-xl) 0;
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.07);

  min-height:380px;
  display:flex;
  flex-direction:column;
  padding:24px 24px 20px;
  color:var(--text);
}

/* abas */
.auth-tabs{
  display:flex; align-items:center; justify-content:flex-start;
  gap:24px; margin-top:8px;
}
.auth-tab{
  font-size:16px; font-weight:600; color:var(--muted);
  text-decoration:none; padding-bottom:8px; position:relative; line-height:1.2;
}
.auth-tab.is-active{ color:var(--text); }
.auth-tab.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; border-radius:2px; background:var(--accent);
}

/* subtítulo */
.auth-desc{ margin:16px 0 20px; font-size:14px; line-height:1.4; font-weight:500; color:var(--text); }

/* campos */
.auth-form{ display:grid; gap:12px; }
.field{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#111a27 0%,#0e1622 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:box-shadow .15s, border-color .15s, transform .15s;
}
.field:focus-within{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 14px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.field-ico{ color:#9acbff; font-size:16px; line-height:1; }
.field-input{
  background:transparent; border:0; outline:0; width:100%;
  color:var(--text); font-size:15px; font-family:inherit;
}
.field-input::placeholder{ color:var(--muted); }

/* link "Esqueceu sua senha?" */
.forgot-only{ text-align:right; font-size:13px; line-height:1.4; margin-top:4px; }
.forgot-link{ color:var(--accent); text-decoration:none; font-weight:500; white-space:nowrap; }
.forgot-link:hover{ text-decoration:underline; }

/* botão */
.btn-primary{
  appearance:none; border:0; border-radius:8px; width:100%; height:48px;
  font-size:15px; font-weight:600; line-height:1; cursor:pointer;
  color:#071E3A; background:var(--accent);
  box-shadow:0 16px 32px rgba(0,132,255,.5), inset 0 1px 0 rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:filter .12s, box-shadow .12s, transform .12s;
  margin-top:8px;
}
.btn-primary:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:0 20px 36px rgba(0,132,255,.6), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:active{ transform:none; filter:saturate(1.07); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

.spinner{ display:none; font-size:16px; line-height:1; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn-primary.is-loading .spinner{ display:inline-block; }

/* rodapé */
.auth-footer{
  margin-top:16px;
  font-size:13px; line-height:1.4; text-align:center; color:var(--muted);
}
.auth-footer a{ font-weight:600; color:var(--accent); text-decoration:none; }
.auth-footer a:hover{ text-decoration:underline; }

/* ===== MOBILE ===== */
@media (max-width: 900px){
  .auth-wrap{
    grid-template-columns:1fr;          /* 1 coluna */
    max-width:420px;
    justify-self:center;                /* garante centro horizontal */
    align-self:center;                  /* garante centro vertical */
  }

  .hero-card{
    display:block;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    border-right:1px solid var(--border-glass);
    border-bottom:0;
    max-height: var(--hero-max-h-mobile);
  }

  .hero-img-desktop{ display:none; }
  .hero-img-mobile{
    display:block;
    width:100%; height:100%;
    object-fit:cover; object-position:center center;
  }

  .auth-card{
    border-radius:0 0 var(--radius-xl) var(--radius-xl);
    border-left:1px solid var(--border-glass);
    border-top:0;
    min-height:auto;
    padding-top:20px;                   /* respira, mas mantém centro */
  }
}

/* telas muito baixas (landscape/teclado aberto): mantém centro */
@media (max-height: 700px){
  .login-section{ padding-block: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom)); }
  .hero-card{ max-height: 160px; }
}

  /* ==== iOS: travar arrasto lateral e preencher o fundo do viewport ==== */

/* 1) Fundo sólido por trás do gradiente (evita "fundo branco" no bounce) */
html,
body{
  background-color: var(--page-bg-2); /* fallback do gradiente */
}

/* 2) Bloquear pan-x e evitar chain/bounce horizontal (iOS 16+) */
html, body{
  max-width:100%;
  overflow-x:hidden;                 /* corta qualquer overflow lateral */
  overscroll-behavior-x:none;        /* sem bounce horizontal */
  overscroll-behavior-inline:contain;/* idem em eixo inline quando suportado */
  touch-action:pan-y pinch-zoom;     /* permite rolar só no eixo Y e dar zoom */
}

/* 3) Garantir que o wrapper não ultrapasse a viewport */
.login-section{
  width:100%;
  max-width:100%;
  overflow-x:clip;                   /* Safari 16+/iOS 16+: melhor que hidden p/ perf */
}
@supports not (overflow: clip){
  .login-section{ overflow-x:hidden; }  /* fallback universal */
}

/* 4) Pequena proteção extra p/ subpixel: nenhum filho "alarga" a viewport */
.login-section,
.auth-wrap{
  contain:layout paint;  /* isola layout/pintura e evita jitter lateral */
}

/* 5) Imagens/banners nunca forçam largura > viewport */
.hero-card,
.hero-img-desktop,
.hero-img-mobile{
  max-width:100%;
}