/* Pantalla de acceso. */

.login-page { min-height: 100vh; min-height: 100dvh; background: var(--bg); overflow: hidden; }

.login {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--sp-4);
  position: relative;
}

/* Halo de marca de fondo: el degradado violeta → rosa muy difuminado. */
.login__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58vw 46vh at 22% 12%, rgba(180, 124, 253, .22), transparent 62%),
    radial-gradient(52vw 42vh at 82% 88%, rgba(255, 127, 194, .18), transparent 62%);
  filter: blur(6px);
}

.login__card {
  position: relative;
  width: 100%; max-width: 396px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
}

.login__brand { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }

.login__title { font-size: 1.45rem; letter-spacing: -.02em; }
.login__sub   { margin-top: 5px; }

.login__submit { width: 100%; margin-top: var(--sp-5); padding: 11px; font-size: var(--fs-base); }

#login-error { margin-top: var(--sp-3); }

/* Sacudida al fallar: se nota el error sin tener que leerlo. */
.is-shaking { animation: shake 380ms var(--ease); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(2px); }
}

@media (max-width: 420px) {
  .login__card { padding: var(--sp-5) var(--sp-4); border: 0; box-shadow: none; background: transparent; }
}