/* ==== Design system (alinha com a landing) ==== */
:root{
  --gc-bg: #0B1B2B;
  --gc-bg-2:#0E2A47;
  --gc-accent:#2DD4BF;
  --gc-accent-2:#3B82F6;
  --gc-text:#0F172A;
  --gc-text-2:#334155;
  --gc-muted:#94A3B8;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --radius-xl:18px;
  --shadow-1:0 10px 28px rgba(2,6,23,.18);
  --shadow-2:0 6px 16px rgba(2,6,23,.12);
}

/* ==== Layout base ==== */
.login-page{
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* esquerda (hero) | direita (form) */
  background: radial-gradient(1200px 600px at 50% -200px, #153E6B 0%, var(--gc-bg) 45%, #07121E 100%);
  color: #E6F5FF;
}

.login-image{
  position: relative;
  padding: clamp(24px, 4vw, 48px);
  display: grid;
  place-items: center;
}

.login-image::before{
  /* moldura glass para ecoar a hero da landing */
  content:"";
  position:absolute; inset: clamp(18px,3vw,36px);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 60px rgba(59,130,246,.18);
}

/* texto sobreposto no painel esquerdo */
.login-overlay-text{
  position: relative;
  z-index: 1;
  max-width: 520px;
  text-align: left;
}

.login-overlay-text h3{
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 1.1vw + 1.2rem, 2rem);
  font-weight: 800;
  color:#E6F5FF;
}

.login-overlay-text p{
  margin: 0;
  color:#CFE3FF;
  opacity:.95;
}

/* ==== Coluna do formulário ==== */
.login-form-wrapper{
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

/* Card “glass” consistente com a landing */
.login-card{
  width: 100%;
  max-width: 420px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: var(--shadow-1);
  padding: 24px;
  color: var(--gc-text);
}

.brand-mini{
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.brand-mini img{
  height: 60px; width: auto;
}

.brand-mini .tagline{
  font-size: .92rem;
  color: var(--gc-text-2);
}

/* Mensagens */
#messages-container .alert{
  margin-bottom: 10px;
  border-radius: 12px;
}

/* ==== Form ==== */
.login-card label{
  font-weight: 600;
  color: var(--gc-text);
  margin-bottom: 6px;
}

.login-card .form-control{
  border-radius: 12px!important;
  border: 1px solid rgba(2,6,23,.12)!important;
  padding: 12px 14px!important;
  box-shadow: none!important;
}

.login-card .form-control:focus{
  border-color: rgba(59,130,246,.6)!important;
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,.15)!important;
}

.input-group .input-group-text{
  border-radius: 12px;
  border: 1px solid rgba(2,6,23,.12);
}

/* Botão primário no padrão da landing */
#loginBtn.btn-primary{
  background: linear-gradient(135deg, var(--gc-accent), var(--gc-accent-2));
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(59,130,246,.22);
  transition: transform .06s ease, box-shadow .2s ease;
}

#loginBtn.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(59,130,246,.3);
}

/* Link auxiliar */
.login-actions{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-top: 10px;
  font-size: .94rem;
}

.login-actions a{
  color: var(--gc-accent-2);
  text-decoration: none;
}
.login-actions a:hover{ opacity:.9 }

/* Captcha */
.login-card .captcha{
  display:flex;
  justify-content:center;
}

/* Responsivo */
@media (max-width: 980px){
  .login-page{
    grid-template-columns: 1fr;
  }
  .login-image{
    min-height: 220px;
    padding: 24px;
  }
  .login-image::before{
    inset: 12px;
  }
}