/* Estilos para el toggle (checkbox personalizado) */
 .toggle {
     appearance: none;
     width: 3.5rem;
     height: 2rem;
     border-radius: 9999px;
     background-color: #d1d5db;
     position: relative;
     cursor: pointer;
     transition: background-color 0.3s ease;
 }

 .toggle::before {
     content: '';
     position: absolute;
     top: 0.25rem;
     left: 0.25rem;
     width: 1.5rem;
     height: 1.5rem;
     border-radius: 50%;
     background-color: #ffffff;
     transition: transform 0.3s ease;
 }

 .toggle:checked {
     background-image: linear-gradient(to right, var(--tw-gradient-stops));
     --tw-gradient-from: #f97316;
     --tw-gradient-to: #2563eb;
 }

 .toggle:checked::before {
     transform: translateX(1.5rem);
 }


 @keyframes spin {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 /* Aplicación de la animación */
 .animate-spin-slow {
     animation: spin 1.5s linear infinite;
     /* 1.5 segundos, lineal, infinito */
 }

 /* Video */
 .card-shadow {
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 }

 .card-hover-scale:hover {
     transform: scale(1.02);
 }

 /* Skeleton */
 .skeleton-placeholder {
     background-color: #e2e8f0;
     /* bg-gray-200 */
 }

 .animate-pulse {
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }

 @keyframes pulse {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: .5;
     }
 }

 /* VideoJS */

 /* Bloquea interacción con los enlaces y overlays de YouTube */
 .video-js .vjs-tech {
     pointer-events: none !important;
 }

 .video-js.vjs-paused .vjs-big-play-button {
     display: block !important;
     opacity: 1 !important;
 }

 /* Ocultar el botón cuando está reproduciendo */
 .video-js.vjs-playing .vjs-big-play-button {
     display: none !important;
 }

 .video-js .vjs-big-play-button {
     top: 50% !important;
     left: 50% !important;
     transform: translate(-50%, -50%) !important;
     position: absolute !important;
     width: 80px !important;
     height: 80px !important;
     border-radius: 50% !important;
     font-size: 3rem !important;
     background: rgba(0, 0, 0, 0.5) !important;
     margin: 0 !important;
 }