:root{
  --bh-blue: #0f4daa;
  --bh-blue-dark: #0d3f8a;
  --accent: #1f64e0; /* azul do sistema */
}

html, body { height: 100%; }
body.login-page{
  margin: 0;
  background: #eef3f8;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

/* Split */
.login-split{ min-height: 100vh; display: flex; }

/* ================== ESQUERDA ================== */
.hero-left{
  position: relative; overflow: hidden; flex: 1 1 50%;
  background: linear-gradient(180deg, #f7f8fb 0%, #eef2f6 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1.5rem;
}
.pbh-mark{ max-width: 56%; height: auto; object-fit: contain; z-index: 1; }
.left-topo{ position: absolute; top: -12%; left: -12%; width: 124%; height: 124%; pointer-events: none; z-index: 0; }
.topo-line{ fill: none; stroke: url(#topoGrad); stroke-width: 2; stroke-linecap: round; opacity: .38; filter: url(#topoSoft); animation: topoDrift 18s ease-in-out infinite alternate; transform: translateZ(0); }
.t2{ stroke-width: 2.2; opacity: .36; animation-duration: 20s; animation-delay: .2s; }
.t3{ stroke-width: 2.0; opacity: .34; animation-duration: 22s; animation-delay: .35s; }
.t4{ stroke-width: 2.2; opacity: .33; animation-duration: 24s; animation-delay: .5s; }
.t5{ stroke-width: 2.0; opacity: .32; animation-duration: 26s; animation-delay: .65s; }
.t6{ stroke-width: 1.9; opacity: .31; animation-duration: 28s; animation-delay: .8s; }
@keyframes topoDrift{ from { transform: translateX(-1.2%) translateY(-0.6%);} to { transform: translateX(1.2%) translateY(0.6%);} }
@media (prefers-reduced-motion: reduce){ .topo-line{ animation: none; }}

/* ================== DIREITA ================== */
.hero-right{
  flex: 1 1 50%; color: #fff;
  background: linear-gradient(135deg, var(--bh-blue) 0%, var(--bh-blue-dark) 100%);
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 2rem 1rem; overflow: hidden;
}
.hero-right::after{
  content: ""; position: absolute; right: -10%; bottom: -22%;
  width: 60vw; max-width: 900px; height: 60vw; max-height: 980px;
  background: url("../img/logologin.png") no-repeat center / contain;
  opacity: .08; pointer-events: none;
}
.brand{ display: flex; align-items: center; gap: 12px; margin-bottom: 1.25rem; z-index: 1; }
.brand-mark{ width: 56px; height: 56px; object-fit: contain; }
.brand-name{ margin: 0; font-weight: 700; font-size: 2.35rem; letter-spacing: .2px; }

/* Card de login */
.login-card{
  z-index: 1; width: min(430px, 86%);
  background: #F5F7F8; color: #2b2f34;
  border-radius: 14px; padding: 22px 22px 18px;
  box-shadow: 0 22px 44px rgba(0,0,0,.18);
}
.lead-msg{ margin: 0 0 .75rem 0; font-size: .98rem; color: #4a5568; }

/* Campos com azul pastel */
.input-group-lg > .form-control,
.input-group-lg > .input-group-text{ height: 48px; }
.input-group-text{
  background: #EAF2FF; border-color: #dfe9ff; color: #5270a3;
}
.form-control{
  background: #EAF2FF; border-color: #dfe9ff; color: #2b2f34;
}
.form-control::placeholder{ color: #5a79a8; opacity: .9; }
.form-control:focus{
  border-color: #c8dbff; box-shadow: 0 0 0 .2rem rgba(63,116,227,.12);
}

/* ===== Botão Login no padrão solicitado ===== */
.btn-login{
  background: #ffffff;       /* fundo branco */
  color: #000000;            /* texto preto  */
  border: 2px solid #000000; /* contorno preto */
  transition: all .15s ease-in-out;
  margin-bottom: 10px;
}
.btn-login:hover,
.btn-login:focus{
  background: var(--accent); /* azul */
  color: #ffffff;            /* texto branco */
  border-color: #ffffff;     /* contorno branco */
  box-shadow: 0 0 0 .2rem rgba(31,100,224,.25);
}

/* Botão "mostrar senha" (único ícone ao lado) */
.btn-eye{ background: #EAF2FF; border-color: #dfe9ff; color: #5270a3; }
.btn-eye:hover, .btn-eye:focus{ background: #dfe9ff; color: #325389; }

/* Ajuste de bordas quando existir o botão-olho à direita */
.input-with-eye{ border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-eye{ border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Rodapé */
.login-footer{
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  font-size: .92rem; opacity: .9; white-space: nowrap;
}

/* Responsivo */
@media (max-width: 992px){
  .login-split{ flex-direction: column; }
  .hero-left{ padding: 1.25rem 1rem; }
  .hero-right{ padding: 2rem 1rem; }
  .brand-name{ font-size: 1.9rem; }
}
@media (max-width: 420px){
  .brand-mark{ width: 44px; height: 44px; }
  .brand-name{ font-size: 1.6rem; }
  .login-card{ width: 92%; padding: 18px; }
}

/* Link "Esqueci minha senha" */
.forgot-password-wrap{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.forgot-password-link{
  color: var(--bh-blue);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease-in-out, opacity .15s ease-in-out;
}

.forgot-password-link:hover,
.forgot-password-link:focus{
  color: var(--accent);
  text-decoration: underline;
  opacity: 1;
}

.forgot-password-link:visited{
  color: #174b9b;
}

/* Link "Esqueci minha senha" centralizado */
.forgot-password-wrap-center{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* Mais espaço entre a descrição e o botão */
.lead-msg{ margin: 0 0 1.15rem 0; }

.forgot-password-wrap-center{
  display: flex;
  justify-content: center;
  margin-top: 14px; /* aumenta espaço após o botão */
}

/* Botão Google centralizado abaixo do botão Login */
.google-login-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
}

.google-login-btn{
  display: flex;
  justify-content: center;
  width: 100%;
}

.google-login-btn .g_id_signin{
  display: flex;
  justify-content: center;
  width: 100%;
}

.google-login-btn iframe{
  margin: 0 auto !important;
}

.google-login-wrap{
  width: 100%;
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

/* Escondi atrás do botão do google, não mexer aqui */
/* .google-custom-btn{
  width: 100%;
  max-height: 36px;
  max-width: 100%;
  border: 2px solid #d9d9d9;
  border-radius: 999px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
  cursor: pointer;
  transition: all 0.2s ease;
} */
/* 
.google-custom-btn:hover{
  background: #f8f9fa;
  border-color: #cfcfcf;
}

.google-custom-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.18);
}

.google-custom-btn__icon{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.google-custom-btn__icon svg{
  width: 22px;
  height: 22px;
  display: block;
}

.google-custom-btn__text{
  font-size: 16px;
  font-weight: 600;
  color: #3c4043;
  line-height: 1;
}

#googleCustomBtn {
  width: 100%;
  display: flex;
  justify-content: center;
}

#googleCustomBtn > div {
  display: flex;
  justify-content: center;
  width: auto;
}

#googleCustomBtn iframe {
  max-width: 100%;
}

/* Removendo a caixa externa */
/* #googleCustomBtn iframe {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
} */