From 31f5edae846058f12a4e492767146a602972ff40 Mon Sep 17 00:00:00 2001
From: ronalds <ronalds@rshtech.com.py>
Date: Tue, 2 Dec 2025 15:57:55 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Mejoras=20Visuales=20del=20Drag-and?=
 =?UTF-8?q?-Drop=20Efectos=20Visuales=20A=C3=B1adidos:=20Al=20iniciar=20el?=
 =?UTF-8?q?=20arrastre:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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             |  2 +-
 frontend/public/service-worker.js |  2 +-
 frontend/src/App.jsx              | 26 +++++++++++++++++++++++---
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 80f2e78..882e45f 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/public/service-worker.js b/frontend/public/service-worker.js
index 8569123..08d0557 100644
--- a/frontend/public/service-worker.js
+++ b/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'
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e381aa2..646e8be 100644
--- a/frontend/src/App.jsx
+++ b/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>