/* Ruta: static/css/login.css */

/* ── Base ─────────────────────────────────────── */
body {
  background-color: #F8FAFC;
  font-family: 'Inter', sans-serif;
}

/* ── Animacion entrada tarjeta ───────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  animation: fadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Input: focus ring brand ─────────────────── */
.field-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field-input:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}
.field-input.input-error {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* ── Boton principal ─────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.32);
}
.btn-primary:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

/* ── Toggle contrasena ───────────────────────── */
.toggle-pwd {
  cursor: pointer;
}

/* ── Mensaje de error inline ─────────────────── */
.field-error-msg {
  display: none;
  font-size: 12px;
  color: #B91C1C;
  margin-top: 5px;
  font-weight: 500;
}
.field-error-msg.visible {
  display: block;
}