/* ============================================
   PropCRM — Animations
   ============================================ */

.animate-in {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.4s var(--ease) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Page transition */
.page.active {
  animation: pageIn 0.25s var(--ease);
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulse */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.pulse { animation: pulse 2s infinite; }

/* Sidebar collapse (desktop only) */
@media (min-width: 769px) {
  .sidebar.collapsed { width: 68px; }
  .sidebar.collapsed .brand-tagline,
  .sidebar.collapsed .brand-name,
  .sidebar.collapsed .nav-link span,
  .sidebar.collapsed .nav-section-label,
  .sidebar.collapsed .nav-badge,
  .sidebar.collapsed .user-info,
  .sidebar.collapsed .user-arrow { display: none; }
  .sidebar.collapsed .nav-link { justify-content: center; padding: 12px 8px; margin: 2px 4px; }
  .sidebar.collapsed .nav-link i { font-size: 22px; }
  .sidebar.collapsed .sidebar-brand { justify-content: center; padding: 18px 0; }
  .sidebar.collapsed .sidebar-user { justify-content: center; padding: 14px 0; }
  .main-content.sidebar-collapsed { margin-left: 68px; }
}

/* ============================================
   Micro-interacciones (Etapa 2)
   Efecto "press" + brillo sutil para elementos clickeables.
   Respeta la preferencia de movimiento reducido.
   ============================================ */

/* Aplica .press a cualquier botón/tarjeta clickeable */
.press {
  transition: transform 0.14s var(--ease), box-shadow 0.22s var(--ease), background var(--transition);
}
.press:hover { transform: translateY(-1px); }
.press:active { transform: translateY(0) scale(0.97); }

/* Botones de la topbar: feedback al pasar y al pulsar */
.topbar-btn {
  transition: background var(--transition), color var(--transition), transform 0.14s var(--ease);
}
.topbar-btn:active { transform: scale(0.92); }

/* El switch de tema: el knob reacciona al pulsar */
#themeToggle:active #themeKnob { transform: scale(0.9); }

/* Tarjetas con efecto de elevación sutil al pasar (look fintech) */
.card-hover {
  transition: transform 0.18s var(--ease), box-shadow 0.22s var(--ease);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  .press, .press:hover, .press:active,
  .card-hover, .card-hover:hover,
  .btn-primary, .btn-ghost { transform: none !important; }
}