.section-login-excedentes{
  background: radial-gradient(1100px 480px at 10% -10%, var(--asefh-blue-soft), transparent 60%),
              radial-gradient(900px 420px at 95% 0%, var(--asefh-gold-soft), transparent 60%),
              linear-gradient(180deg, var(--surface), var(--bg));
  padding: 24px 0 48px;
}

.login-wrap{
  width: min(1100px, 100%);
  margin: 0 auto;
}

.login-header{
  max-width: 860px;
  margin-bottom: 18px;
}

.login-header .badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--asefh-blue-dark);
  background: var(--asefh-blue-soft);
  margin-bottom: 10px;
}

.login-header h2{
  margin: 0 0 8px 0;
  font-size: clamp(24px, 3vw, 38px);
  color: var(--text);
}

.login-header p{
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.login-grid{
  display: grid;
  grid-template-columns: .95fr 1.15fr;
  gap: 16px;
  margin-top: 14px;
  align-items: start;
}

.login-form-card{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.login-form-card::before{
  content:"";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--asefh-blue-dark), var(--asefh-gold));
}

.login-form-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.login-form-card .pill{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  color: var(--asefh-blue-dark);
  background: rgba(214,162,26,.16);
  border: 1px solid rgba(214,162,26,.28);
}

.login-form-title{
  margin: 0 0 6px 0;
  font-size: 20px;
  color: var(--text);
}

.login-form-text{
  margin: 0 0 16px 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 14px;
}

.login-field{
  margin-bottom: 14px;
}

.login-field .form-label{
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.login-field .input-group-text{
  background: var(--asefh-blue-soft);
  border-color: var(--border);
  color: var(--asefh-blue-dark);
}

.login-field .form-control{
  border-color: var(--border);
  padding: 10px 12px;
  background-color: var(--input-bg);
  color: var(--input-text);
}

.login-field .form-control:focus{
  border-color: rgba(11,60,93,.45);
  box-shadow: 0 0 0 .2rem rgba(11,60,93,.12);
  background-color: var(--input-bg);
  color: var(--input-text);
}

.login-toggle-pass{
  border-color: var(--border);
  color: var(--asefh-blue-dark);
  background: var(--input-bg);
  min-width: 46px;
}

.login-toggle-pass:hover,
.login-toggle-pass:focus{
  background: var(--asefh-blue-soft);
  color: var(--asefh-blue-dark);
  border-color: var(--border);
}

.login-btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border-radius: 14px;
  font-weight: 900;
  background: #0B3C5D;
  color: #fff;
  border: 1px solid rgba(11,60,93,.25);
  margin-top: 6px;
}

[data-bs-theme="dark"] .login-btn-primary{
  background: #1a5a8a;
  border-color: rgba(126,182,217,.35);
}

.login-btn-primary:hover,
.login-btn-primary:focus{
  background: var(--asefh-blue);
  color: #fff;
  border-color: var(--asefh-blue);
}

.section-login-excedentes .side-card{
  top: 90px;
}

.section-login-excedentes .side-card h3{
  color: var(--text);
}

@media (max-width: 940px){
  .login-grid{
    grid-template-columns: 1fr;
  }

  /* En móvil: formulario primero */
  .login-side{
    order: 2;
  }

  .login-form-card{
    order: 1;
  }

  .section-login-excedentes .side-card{
    position: relative;
    top: 0;
  }

  .section-login-excedentes{
    padding: 12px 0 32px;
  }

  .login-form-card,
  .section-login-excedentes .side-card{
    border-radius: 16px;
    padding: 14px;
  }
}

@media (max-width: 420px){
  .login-field .input-group-text{
    padding-left: 10px;
    padding-right: 10px;
  }

  .login-btn-primary{
    min-height: 46px;
  }
}