/* =======================================================
   LOGIN — BASE TOKENS
   ======================================================= */
:root{
  --login-accent: #667eea;
  --login-accent-2: #764ba2;
  --login-gradient: linear-gradient(135deg, var(--login-accent) 0%, var(--login-accent-2) 100%);
  --login-shadow-lg: 0 25px 60px rgba(0,0,0,.35);
  --login-shadow-md: 0 12px 28px rgba(0,0,0,.25);
  --login-radius: 20px;
  --login-transition: all .35s cubic-bezier(.4,0,.2,1);
}

/* animações reutilizáveis */
@keyframes loginFadeUp { from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:translateY(0)} }
@keyframes loginPulseBg { 0%,100%{opacity:.9; transform:scale(1)} 50%{opacity:1; transform:scale(1.03)} }

/* =======================================================
   DARK (padrão)
   ======================================================= */
  
/* só por garantia, caso o layout conte com espaço da navbar */
body .navbar { display: none; } /* redundante se usou a flag, mas ok */
main { margin-top: 0 !important; }

.login-wrapper{
  min-height: calc(100svh - 64px); /* ajuste 64px ao tamanho real do footer */
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.login-bg-decor{
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(800px 500px at 20% 30%, rgba(102,126,234,.10), transparent 60%),
    radial-gradient(800px 600px at 80% 70%, rgba(118,75,162,.10), transparent 60%);
  animation: loginPulseBg 12s ease-in-out infinite;
  pointer-events: none;
}

.login-card{
  position: relative;
  z-index: 1;
  max-width: 460px;
  width: 100%;
  border-radius: var(--login-radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(26, 26, 46, .60);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--login-shadow-lg);
  animation: loginFadeUp .5s ease both;
  
}

.login-header .login-brand{
  font-weight: 800;
  letter-spacing: .3px;
  margin: 0;
  background: var(--login-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-header .login-sub{
  opacity: .9;
}

.login-form .form-label{
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.login-form .form-label::before{
  content:"";
  width: 3px; height: 14px; border-radius: 2px;
  background: var(--login-gradient);
}

/* Aumenta o espaço entre o switch e o texto "Lembrar-me" */
.login-form .form-switch .form-check-label{
  margin-left: .75rem;   /* ajuste: .5rem, .75rem, 1rem… */
}

/* campo + ícone */
.has-icon{ position: relative; }
.input-icon{
  position: absolute; left: .85rem; top: 50%;
  transform: translateY(-50%); opacity: .65;
  pointer-events: none;
  transition: var(--login-transition);
}

/* inputs dark */
.login-form .form-control{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: #eaf0ff;
  border-radius: 12px;
  padding: .75rem 1rem .75rem 2.4rem;
  transition: var(--login-transition);
}
.login-form .form-control::placeholder{ color: rgba(234,240,255,.55); }
.login-form .form-control:focus{
  background: rgba(255,255,255,.10);
  border-color: rgba(102,126,234,.55);
  box-shadow: 0 0 0 .25rem rgba(102,126,234,.25), 0 8px 24px rgba(102,126,234,.22);
}

/* switch lembrar-me */
.form-switch .form-check-input{
  width: 2.6rem; height: 1.3rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  cursor: pointer;
  transition: var(--login-transition);
}
.form-switch .form-check-input:checked{
  background: var(--login-gradient);
  border-color: transparent;
  box-shadow: 0 0 0 .25rem rgba(102,126,234,.25);
}

/* botão */
.login-btn{
  border-radius: 12px;
  padding: .8rem 1rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--login-gradient);
  border: none;
  box-shadow: var(--login-shadow-md);
  transition: var(--login-transition);
  position: relative; overflow: hidden;
}
.login-btn::before{
  content:""; position:absolute; inset:auto; left:50%; top:50%;
  width:0; height:0; border-radius:50%; background: rgba(255,255,255,.18);
  transform: translate(-50%,-50%);
  transition: width .6s, height .6s;
}
.login-btn:hover::before{ width: 320px; height: 320px; }
.login-btn:hover{ transform: translateY(-2px); }

/* ajuda/link */
.login-help{ color: #9fb2ff; text-decoration: none; }
.login-help:hover{ text-decoration: underline; }

/* alertas */
.alert{
  border-radius: 12px;
  background: rgba(239,68,68,.15);
  color: #ffecec;
  border: 1px solid rgba(239,68,68,.35);
}
.alert-warning{
  background: rgba(245,158,11,.15);
  color: #fff8e6;
  border-color: rgba(245,158,11,.35);
}

/* responsivo */
@media (max-width: 480px){
  .login-card{ border-radius: 16px; }
  .login-header .login-brand{ font-size: 1.6rem; }
}

/* =======================================================
   LIGHT (override quando <html data-bs-theme="light">)
   ======================================================= */
:root[data-bs-theme="light"] .login-bg-decor{
  background:
    radial-gradient(800px 500px at 20% 30%, rgba(102,126,234,.16), transparent 60%),
    radial-gradient(800px 600px at 80% 70%, rgba(118,75,162,.16), transparent 60%);
}

:root[data-bs-theme="light"] .login-card{
  background: rgba(255,255,255, .92);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 20px 50px rgba(16,22,34,.10);
}

:root[data-bs-theme="light"] .login-header .login-sub{
  color: #1b2236;
  opacity: .85;
}

/* inputs claros */
:root[data-bs-theme="light"] .login-form .form-control{
  background: rgba(17,24,39,.03);
  border: 1px solid rgba(17,24,39,.10);
  color: #0f1422;
}
:root[data-bs-theme="light"] .login-form .form-control::placeholder{
  color: rgba(15,20,34,.55);
}
:root[data-bs-theme="light"] .login-form .form-control:focus{
  background: rgba(17,24,39,.04);
  border-color: rgba(13,110,253,.55);
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.2), 0 8px 24px rgba(13,110,253,.16);
}
:root[data-bs-theme="light"] .input-icon{ opacity: .7; }

/* switch claro */
:root[data-bs-theme="light"] .form-switch .form-check-input{
  background: rgba(15,20,34,.06);
  border: 1px solid rgba(15,20,34,.14);
}
:root[data-bs-theme="light"] .form-switch .form-check-input:checked{
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.20);
}

/* alertas claros */
:root[data-bs-theme="light"] .alert{
  background: rgba(239,68,68,.12);
  color: #7a1020;
  border-color: rgba(239,68,68,.20);
}
:root[data-bs-theme="light"] .alert-warning{
  background: rgba(245,158,11,.12);
  color: #6a4a00;
  border-color: rgba(245,158,11,.20);
}

/* botão mantém o gradiente/acessibilidade */
:root[data-bs-theme="light"] .login-btn{
  box-shadow: 0 10px 24px rgba(102,126,234,.25);
}

/* link de ajuda */
:root[data-bs-theme="light"] .login-help{ color: #2645d8; }

/* =======================================================
   ACESSIBILIDADE (foco visível)
   ======================================================= */
.login-form .form-control:focus,
.form-switch .form-check-input:focus,
.login-btn:focus-visible,
.login-help:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(102,126,234,.25);
}
:root[data-bs-theme="light"] .login-btn:focus-visible,
:root[data-bs-theme="light"] .login-help:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}