✅ Mejoras Visuales del Drag-and-Drop

Efectos Visuales Añadidos:
Al iniciar el arrastre:

La pregunta se vuelve semi-transparente (40% opacidad)
Se aplica un ligero zoom out (scale 0.98)
Aparece un borde morado brillante (ring-2 ring-purple-500)
Durante el arrastre sobre una pregunta:

La zona de destino se resalta con fondo morado claro
Borde superior morado grueso (4px)
Sombra pronunciada para destacar la zona
Indicador visual claro: Badge flotante que dice "Se moverá ANTES de esta pregunta" con ícono de cruz
Transiciones suaves:

Todas las transformaciones tienen duration-200 para animaciones fluidas
El elemento arrastrado mantiene su escala reducida durante el movimiento
Al soltar:

Se restauran todos los estilos originales
La pregunta regresa a opacidad 100% y escala normal

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "checklist-frontend",
   "private": true,
-  "version": "1.0.95",
+  "version": "1.0.96",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/public/service-worker.js

@@ -1,6 +1,6 @@
 // Service Worker para PWA con detección de actualizaciones
 // IMPORTANTE: Actualizar esta versión cada vez que se despliegue una nueva versión
-const CACHE_NAME = 'ayutec-v1.0.95';
+const CACHE_NAME = 'ayutec-v1.0.96';
 const urlsToCache = [
   '/',
   '/index.html'

frontend/src/App.jsx

@@ -1333,11 +1333,16 @@ function QuestionsManagerModal({ checklist, onClose }) {
   const handleDragStart = (e, question) => {
     setDraggedQuestion(question)
     e.dataTransfer.effectAllowed = 'move'
-    e.currentTarget.style.opacity = '0.5'
+    // Hacer semi-transparente y añadir borde para feedback visual
+    e.currentTarget.style.opacity = '0.4'
+    e.currentTarget.style.transform = 'scale(0.98)'
+    e.currentTarget.classList.add('ring-2', 'ring-purple-500')
   }
 
   const handleDragEnd = (e) => {
     e.currentTarget.style.opacity = '1'
+    e.currentTarget.style.transform = 'scale(1)'
+    e.currentTarget.classList.remove('ring-2', 'ring-purple-500')
     setDraggedQuestion(null)
     setDragOverQuestion(null)
     
@@ -1902,12 +1907,27 @@ function QuestionsManagerModal({ checklist, onClose }) {
                           onDragOver={(e) => handleDragOver(e, question)}
                           onDragLeave={handleDragLeave}
                           onDrop={(e) => handleDrop(e, question)}
-                          className={`p-4 hover:bg-gray-50 flex justify-between items-start cursor-move transition-all ${
+                          className={`p-4 hover:bg-gray-50 flex justify-between items-start cursor-move transition-all duration-200 relative ${
                             isSubQuestion ? 'bg-blue-50 ml-8 border-l-4 border-blue-300' : ''
                           } ${
-                            dragOverQuestion?.id === question.id ? 'border-t-4 border-indigo-500' : ''
+                            draggedQuestion?.id === question.id ? 'opacity-40 scale-95' : ''
+                          } ${
+                            dragOverQuestion?.id === question.id 
+                              ? 'bg-purple-50 border-t-4 border-purple-500 shadow-lg pt-8' 
+                              : ''
                           }`}
                         >
+                          {/* Indicador visual de zona de drop */}
+                          {dragOverQuestion?.id === question.id && (
+                            <div className="absolute -top-4 left-0 right-0 flex items-center justify-center">
+                              <div className="bg-purple-500 text-white px-4 py-1 rounded-full text-xs font-semibold flex items-center gap-2 shadow-lg">
+                                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                  <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
+                                </svg>
+                                Se moverá ANTES de esta pregunta
+                              </div>
+                            </div>
+                          )}
                           <div className="flex-1">
                             <div className="flex items-start gap-3">
                               <div className="text-gray-400 text-sm mt-1">#{question.id}</div>