/* ==========================================================================
   ESTILOS DINÁMICOS: EXTRACTOR DE FOTOGRAMAS DE VIDEO (WEBGL PRO)
   Optimizado 100% para Tailwind CSS v4. Solo reglas indispensables no utilitarias.
   ========================================================================== */

/* Indicador Pulsante WebGL */
.vfe-badge-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: vfePulseDot 1.6s infinite;
}

@keyframes vfePulseDot {
  0%, 100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 12px #10b981;
  }
}

/* Estado Drag & Drop Activo */
.vfe-dropzone.dragover {
  border-color: var(--primary, #6366f1) !important;
  background-color: rgba(99, 102, 241, 0.08) !important;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.25) !important;
}

/* Modal de Vista Previa */
.vfe-preview-modal.active {
  display: flex !important;
}

/* Scrollbar sutil para Galería */
#galleryGrid::-webkit-scrollbar {
  width: 6px;
}

#galleryGrid::-webkit-scrollbar-track {
  background: transparent;
}

#galleryGrid::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 9999px;
}

#galleryGrid::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
}