/* ============================================================
   CleanAHotel — Login Shared
   Solo lo que Tailwind no puede hacer:
   animaciones, estados de error controlados por JS, shake
   ============================================================ */

/* ── Variables ──────────────────────────────────────────── */
:root {
  --primary:    #00432f;
  --error:      #ba1a1a;
  --on-surface: #191c1a;
}

/* ── Animaciones ────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.fade-up { animation: fadeUp 0.4s ease-out both; }
.login-shake { animation: shake 0.4s ease-in-out; }

/* ── Spinner ────────────────────────────────────────────── */
.login-spinner {
  display: inline-block;
  width: 1.125rem; height: 1.125rem;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── Error en campo (JS añade esta clase) ───────────────── */
.field-error {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 1px var(--error) !important;
}

/* ── Error global (JS quita hidden) ─────────────────────── */
.global-error-hidden { display: none !important; }