/* Animaciones para el loader */
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes progress {
    0% {
      width: 0%;
      transform: translateX(-100%);
    }
    50% {
      width: 60%;
    }
    100% {
      width: 100%;
      transform: translateX(100%);
    }
  }

  .animate-spin {
    animation: spin 1s linear infinite;
  }

  .animate-progress {
    animation: progress 2s ease-in-out infinite;
  }

  /* Animación de entrada/salida del loader */
  .fade-in {
    animation: fadeIn 0.3s ease-out forwards;
  }

  .fade-out {
    animation: fadeOut 0.3s ease-out forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }