/* login.css — layout específico de la página de inicio de sesión.
   Los colores, tipografía y el botón vienen de design-system.css;
   aquí solo va lo que es propio de esta pantalla. */

.login-page {
  min-height: 100vh;
  background: var(--ink-900);
  background-image: radial-gradient(circle at 15% 20%, rgba(46, 95, 191, 0.35), transparent 45%),
                     radial-gradient(circle at 85% 80%, rgba(30, 60, 114, 0.45), transparent 50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.login-container { width: 100%; max-width: 400px; position: relative; }

.login-back {
  position: absolute;
  top: -2.75rem;
  left: 0;
  color: rgba(255,255,255,0.65);
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.login-back:hover { color: var(--white); text-decoration: none; }

.login-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.login-logo { margin-bottom: var(--space-4); }
.login-logo img { max-height: 64px; }

.login-title { margin-bottom: var(--space-1); }
.login-subtitle { color: var(--slate-500); font-size: var(--text-sm); margin-bottom: var(--space-5); }

.login-card .field { text-align: left; }

.login-footer-link { margin-top: var(--space-4); }
.login-footer-link a { font-size: var(--text-sm); color: var(--slate-500); }
.login-footer-link a:hover { color: var(--blue-500); }

.login-spinner {
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: login-spin 0.7s linear infinite;
  vertical-align: -0.15em;
}
@keyframes login-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .login-spinner { animation: none; }
}

@media (max-width: 420px) {
  .login-card { padding: var(--space-6) var(--space-4); }
  .login-back { position: static; display: inline-flex; margin-bottom: var(--space-4); }
}