/* ═══════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════ */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}
@keyframes loadBar {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(20px) scale(0.9); }
}
@keyframes checkPop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes ripple {
  from { transform: scale(0); opacity: 0.4; }
  to   { transform: scale(2.5); opacity: 0; }
}
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

/* Ripple on tap */
.ripple-container { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(108,71,255,.2);
  width: 100px; height: 100px;
  margin-top: -50px; margin-left: -50px;
  animation: ripple 0.5s ease;
  pointer-events: none;
}

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--bg-surface-3) 25%, var(--bg-surface-2) 50%, var(--bg-surface-3) 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--radius-sm);
}

/* Swipe hint — se muestra la primera vez para enseñar el gesto */
@keyframes swipeHint {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-28px); }
  40%  { transform: translateX(0); }
  60%  { transform: translateX(-14px); }
  80%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}
.swipe-hint-demo .list-item {
  animation: swipeHint 1.4s ease 0.8s both;
}

/* Check animado cuando se marca un item */
@keyframes checkBounce {
  0%   { transform: scale(0.5); opacity: 0; }
  50%  { transform: scale(1.3); }
  75%  { transform: scale(0.9); }
  100% { transform: scale(1);   opacity: 1; }
}
.list-item.checked .list-item__check {
  animation: checkBounce 0.3s cubic-bezier(.36,.07,.19,.97) both;
}

/* Fade de fila nueva (override de fadeSlideIn para swipe-row) */
.swipe-row { animation: fadeSlideIn 0.2s both; }

/* Sacudida de error (ej: lista vacía al intentar guardar) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.shake { animation: shake 0.4s ease; }