/* ============================
   Animações visuais modernas
   ============================ */

/* 1. Fade-in suave (entrada de elementos) */
.fade-in {
  animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Crescimento sutil ao surgir */
.grow-in {
  animation: growIn 0.4s ease-in-out;
}

@keyframes growIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 3. Hover animado em botões */
.btn-animado {
  transition: all 0.2s ease-in-out;
}

.btn-animado:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* 4. Transição para menu lateral (expandir/retrair) */
.sidebar {
  transition: all 0.3s ease;
}

.sidebar.collapsed {
  transform: translateX(-100%);
  opacity: 0;
}