.login-page {
  background:
    radial-gradient(ellipse 85% 65% at 12% 18%, rgba(46,49,146,.16) 0%, transparent 52%),
    radial-gradient(ellipse 70% 55% at 88% 72%, rgba(245,130,32,.08) 0%, transparent 48%),
    linear-gradient(118deg, #dde5f2 0%, #e4eaf4 28%, #e8edf6 52%, #e2e9f4 78%, #dce4f0 100%);
  overflow: hidden;
  padding: 32px 20px;
}
.login-page::before { content: none; }
.login-brand-waves {
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  height: min(54vh,440px);
  min-height: 200px;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}
.login-wave-track {
  position: absolute;
  inset: auto auto 0 0;
  width: 400%;
  height: 100%;
  display: flex;
  will-change: transform;
  backface-visibility: hidden;
  animation: login-wave-flow 24s linear infinite;
}
.login-wave-track svg { width: 25%; height: 100%; flex-shrink: 0; }
.login-layout { position: relative; z-index: 1; display: block; max-width: 400px; }
.login-card { padding: 30px 24px; box-shadow: 0 16px 48px rgba(24,35,59,.28); }
.login-mobile-brand { text-align: center; margin-bottom: 28px; }
.login-mobile-brand .brand-name { font-size: 32px; }
.login-mobile-brand .brand-logo { width:210px; margin-inline:auto; }
.login-intro>.brand-logo { width:250px; margin-bottom:24px; }
.login-symbol { display: none; }
.login-card h1 { text-align: center; font-size: 28px; }
.login-card>p { text-align: center; }
.login-card { padding:32px; }
.login-symbol { width:64px; height:64px; }
.login-card h1 { font-size:30px; }
#login-form { display:flex; flex-direction:column; gap:24px; }
/* Excepción del acceso: color propio y sin flecha, ver DESIGN.md. */
#login-form .button { margin-top:0; background:#4F46E5; }
@media (hover:hover) { #login-form .button:hover { background:#4338CA; } }
#login-form input { min-height:44px; }
.password-field { position:relative; }
.password-field input { padding-right:52px; }
.password-field .icon-button { position:absolute; right:1px; top:1px; width:44px; height:44px; }
.login-password-help { font-size:12px; color:var(--muted); margin:6px 0 0; }
.demo-credentials { font-size:12px; color:var(--muted); margin-top:12px; }
.demo-credentials summary { cursor:pointer; padding-block:10px; min-height:44px; color:var(--primary); }
.demo-credentials p { overflow-wrap:anywhere; line-height:1.7; margin:4px 0 0; }
.account { min-width:0; }
.account>div { min-width:0; }
.account strong { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.note-meta strong { overflow-wrap:anywhere; }
.login-intro { display: none; }
.login-footer { position: relative; z-index: 1; color: white; margin-top: 32px; }
@keyframes login-wave-flow {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}
.login-demo-info { margin-top:16px; padding:12px 16px; background:#e8edf6; border-radius:8px; }
.login-demo-info .demo-help { margin-top:0; }
.login-demo-info .demo-credentials { margin-top:0; }
.login-card #login-email,.login-card #login-password { height:44px; min-height:44px; }
@media (min-width:640px) { .login-brand-waves { min-height:240px; } .login-card { padding:32px; } }
@media (min-width:1024px) {
  .login-page { padding:48px 40px 24px; }
  .login-brand-waves { height:min(68vh,640px); }
  .login-layout { display:grid; grid-template-columns:400px minmax(0,1fr); max-width:1040px; gap:64px; }
  .login-layout { column-gap:64px; row-gap:16px; }
  .login-card { grid-column:1; grid-row:1; }
  .login-card { min-height:526px; display:flex; flex-direction:column; }
  .login-card #login-form { margin-top:auto; }
  .login-demo-info { grid-column:1; grid-row:2; margin-top:0; }
  .login-intro { grid-column:2; grid-row:1 / 3; }
  .login-intro { display:block; }
  .login-mobile-brand { display:none; }
  .login-symbol { display:grid; margin-inline:auto; }
  .login-intro h2 { color:#2E3192; }
  .login-intro>p { color:#373164; background:rgba(232,237,246,.96); padding:6px 8px; border-radius:4px; width:fit-content; }
  .login-intro .login-caption { color:#373164; background:#e8edf6; display:table; padding:4px 8px; border-radius:4px; }
}
@media (prefers-reduced-motion:reduce) {
  .login-wave-track { animation:none; will-change:auto; transform:translate3d(0,0,0); }
}