Mejora la visualización del nombre del archivo al agregar un tooltip con el nombre completo y se implementan estilos para truncar nombres largos en la interfaz.

static/app.js

@@ -74,6 +74,7 @@ function handleFile(file) {
 
     selectedFile = file;
     fileName.textContent = file.name;
+    fileName.title = file.name; // Agregar título completo para tooltip
     fileSize.textContent = formatFileSize(file.size);
     
     // Aplicar clase de advertencia si el archivo es grande (>10MB)

static/styles.css

@@ -64,6 +64,18 @@
     transition: transform 0.3s ease;
 }
 
+/* Estilos para truncate mejorado */
+.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Mejorar el tooltip para nombres largos */
+[title] {
+    cursor: help;
+}
+
 .notification.show {
     transform: translateX(0);
 }

templates/index.html

@@ -47,11 +47,11 @@
 
                         <div id="fileInfo" class="hidden mb-6 p-4 bg-blue-50 rounded-lg">
                             <div class="flex items-center justify-between">
-                                <div>
-                                    <p class="font-medium text-blue-900" id="fileName"></p>
+                                <div class="flex-1 min-w-0 mr-3">
+                                    <p class="font-medium text-blue-900 truncate" id="fileName" title=""></p>
                                     <p class="text-sm text-blue-700" id="fileSize"></p>
                                 </div>
-                                <button type="button" id="removeFile" class="text-red-600 hover:text-red-800">
+                                <button type="button" id="removeFile" class="text-red-600 hover:text-red-800 flex-shrink-0">
                                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                     </svg>