/* =========================================================
   LOGIN — Portal institucional + Fintech (FULL)
   - Desktop sem scroll (fit 100vh)
   - Responsivo (tablet/phone com scroll normal)
   ========================================================= */

/* Base */
.login-layout{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr; /* mobile-first */
}

/* HERO (lado esquerdo) */
.login-hero{
  position: relative;
  color: #fff;
  padding: 32px 22px;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg, #0b2e4a 0%, #0a3a63 55%, #0c2a45 100%);
}

.login-hero-inner{
  max-width: 680px;
}

.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .875rem;
  backdrop-filter: blur(6px);
}

.login-hero-title{
  font-size: 2.0rem;
  font-weight: 900;
  margin-top: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.login-hero-subtitle{
  opacity: .92;
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.45;
  max-width: 560px;
}

.login-hero-divider{
  width: 72px;
  height: 3px;
  margin: 16px 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
}

.hero-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  font-size: .95rem;
}

.hero-list li{
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  opacity: .95;
}

.hero-footnote{
  margin-top: 14px;
  display: flex;
  gap: .6rem;
  opacity: .9;
  font-size: .9rem;
}

/* PAINEL (lado direito) */
.login-panel{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background:
    radial-gradient(900px 400px at 20% 0%, rgba(13,110,253,.08), transparent 55%),
    #f6f8fb;
}

.login-wrapper{
  width: 100%;
  max-width: 480px;
}

.login-card{
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 35px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
}

/* Topo do card */
.login-logo{
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 14px;
  background: linear-gradient(135deg, #0b2e4a, #0a3a63);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 22px rgba(10,58,99,.25);
}

.logo-initial{
  font-weight: 900;
  font-size: 1.25rem;
  color: #fff;
}

.inst-name{
  font-size: .85rem;
  color: #6c757d;
}

.login-title{
  font-weight: 900;
  font-size: 1.65rem;
  margin-top: 6px;
}

.login-subtitle{
  color: #6c757d;
  font-size: .95rem;
}

/* Inputs com ícone */
.input-icon{
  position: relative;
}

.input-icon > i.bi{
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 1rem;
  pointer-events: none;
}

.input-icon .form-control{
  padding-left: 42px;
  padding-right: 52px;
  border-radius: 14px;
  height: 48px;
}

/* Botão olho / ghost */
.btn-ghost{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #6c757d;
  padding: 6px 10px;
  border-radius: 10px;
}

.btn-ghost:hover{
  background: rgba(13,110,253,.08);
  color: #0d6efd;
}

.caps-hint{
  margin-top: 8px;
  font-size: .85rem;
  color: #b02a37;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Botão entrar mais “fintech” */
.btn.btn-primary.btn-lg{
  height: 48px;
  border-radius: 14px;
  font-weight: 700;
  padding-top: 0;
  padding-bottom: 0;
}

/* Reduz margens do Bootstrap (sem mexer no HTML) */
.login-card .mb-4{ margin-bottom: 14px !important; }
.login-card .mb-3{ margin-bottom: 12px !important; }

/* =========================================================
   DESKTOP: 2 colunas + fit 100vh sem scroll
   ========================================================= */
@media (min-width: 992px){
  html, body{ height: 100%; }
  body{ overflow: hidden; } /* ✅ sem scroll no desktop */

  .login-layout{
    height: 100vh;
    grid-template-columns: 1fr 520px;
  }

  .login-hero{
    padding: 44px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-panel{
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-wrapper{
    max-width: 480px;
  }
}

/* =========================================================
   MOBILE/TABLET: 1 coluna com scroll normal
   ========================================================= */
@media (max-width: 991.98px){
  body{ overflow: auto; }
  .login-layout{ grid-template-columns: 1fr; }
  .login-hero{ padding: 32px 22px; }
}


.login-logo{
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 16px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;                 /* ✅ corta qualquer excesso */
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.login-logo-img{
  width: 100% !important;           /* ✅ força caber */
  height: 100% !important;
  object-fit: contain;              /* ✅ mantém proporção */
  display: block;                   /* ✅ evita “espaço fantasma” */
}