diff --git a/api/routes.py b/api/routes.py
index ff7cf1d..b01fc2f 100644
--- a/api/routes.py
+++ b/api/routes.py
@@ -2,6 +2,7 @@
 Flask API routes for CBCFacil dashboard
 """
 import os
+import time
 from datetime import datetime
 from pathlib import Path
 from typing import Dict, Any, List
@@ -9,14 +10,20 @@ from flask import Flask, render_template, request, jsonify, send_from_directory
 from flask_cors import CORS
 
 from config import settings
-from storage import processed_registry
+from storage.processed_registry import processed_registry
 from services.webdav_service import webdav_service
 from services import vram_manager
+from document.generators import DocumentGenerator
 
 
 def create_app() -> Flask:
     """Create and configure Flask application"""
-    app = Flask(__name__)
+    # Get the project root directory (parent of api/)
+    current_dir = Path(__file__).parent
+    project_root = current_dir.parent
+    template_dir = project_root / 'templates'
+
+    app = Flask(__name__, template_folder=str(template_dir))
     CORS(app)
 
     # Configure app
@@ -157,6 +164,60 @@ def create_app() -> Flask:
             app.logger.error(f"Error downloading file: {e}")
             return jsonify({'error': 'File not found'}), 404
 
+    @app.route('/downloads/find-file')
+    def find_and_download_file():
+        """Find and download file with various name variants"""
+        try:
+            filename = request.args.get('filename', '')
+            ext = request.args.get('ext', 'txt')
+            
+            if not filename:
+                return jsonify({'error': 'Filename required'}), 400
+            
+            # Validate to prevent path traversal
+            if '..' in filename or filename.startswith('/'):
+                return jsonify({'error': 'Invalid filename'}), 400
+            
+            # Try various name variants
+            base_name = filename.replace('_unificado', '').replace('_unified', '')
+            name_variants = [
+                f"{base_name}.{ext}",
+                f"{base_name}_unificado.{ext}",
+                f"{base_name}_unified.{ext}",
+                f"{base_name.replace(' ', '_')}.{ext}",
+                f"{base_name.replace(' ', '_')}_unificado.{ext}",
+            ]
+            
+            # Directories to search
+            directories = [
+                settings.LOCAL_DOWNLOADS_PATH,
+                settings.LOCAL_DOCX
+            ]
+            
+            # Search for file
+            for directory in directories:
+                if not directory.exists():
+                    continue
+                for variant in name_variants:
+                    file_path = directory / variant
+                    if file_path.exists():
+                        # Determinar mimetype para que se abra en el navegador
+                        mimetype = None
+                        if ext == 'pdf':
+                            mimetype = 'application/pdf'
+                        elif ext == 'md':
+                            mimetype = 'text/markdown'
+                        elif ext == 'txt':
+                            mimetype = 'text/plain'
+                        # as_attachment=False para abrir en navegador, no descargar
+                        return send_from_directory(str(directory), variant, as_attachment=False, mimetype=mimetype)
+            
+            return jsonify({'error': f'File not found: {filename}.{ext}'}), 404
+            
+        except Exception as e:
+            app.logger.error(f"Error finding file: {e}")
+            return jsonify({'error': 'File not found'}), 404
+
     @app.route('/health')
     def health_check():
         """Health check endpoint"""
@@ -174,11 +235,316 @@ def create_app() -> Flask:
             }
         })
 
+    @app.route('/api/transcription/<filename>')
+    def get_transcription(filename: str):
+        """Get transcription content for a specific file"""
+        try:
+            # Validate filename to prevent path traversal
+            if '..' in filename or filename.startswith('/'):
+                return jsonify({
+                    'success': False,
+                    'message': 'Invalid filename'
+                }), 400
+
+            # Extract base name without extension (handle .mp3, .wav, .txt, etc.)
+            base_name = Path(filename).stem
+            
+            # Construct file path for transcription
+            file_path = settings.LOCAL_DOWNLOADS_PATH / f"{base_name}.txt"
+
+            # Check if file exists
+            if not file_path.exists():
+                return jsonify({
+                    'success': False,
+                    'message': f'Transcription file not found: {base_name}.txt'
+                }), 404
+
+            # Read file content
+            with open(file_path, 'r', encoding='utf-8') as f:
+                transcription_text = f.read()
+
+            # Calculate statistics
+            word_count = len(transcription_text.split())
+            char_count = len(transcription_text)
+
+            return jsonify({
+                'success': True,
+                'filename': filename,
+                'transcription': transcription_text,
+                'file_path': str(file_path),
+                'word_count': word_count,
+                'char_count': char_count
+            })
+
+        except Exception as e:
+            app.logger.error(f"Error reading transcription: {e}")
+            return jsonify({
+                'success': False,
+                'message': f"Error reading transcription: {str(e)}"
+            }), 500
+
+    @app.route('/api/summary/<filename>')
+    def get_summary(filename: str):
+        """Get summary content for a specific file"""
+        try:
+            # Validate filename to prevent path traversal
+            if '..' in filename or filename.startswith('/'):
+                return jsonify({
+                    'success': False,
+                    'message': 'Invalid filename'
+                }), 400
+
+            # Extract base name without extension (handle .mp3, .wav, etc.)
+            base_name = Path(filename).stem
+            # Also remove _unificado/_unified suffixes if present
+            base_name = base_name.replace('_unificado', '').replace('_unified', '')
+
+            # Try different file path variants
+            possible_paths = [
+                settings.LOCAL_DOWNLOADS_PATH / f"{base_name}_unificado.md",
+                settings.LOCAL_DOWNLOADS_PATH / f"{base_name}_unified.md",
+                settings.LOCAL_DOWNLOADS_PATH / f"{base_name}.md",
+            ]
+
+            file_path = None
+            for path in possible_paths:
+                if path.exists():
+                    file_path = path
+                    break
+
+            if not file_path:
+                return jsonify({
+                    'success': False,
+                    'message': f'Summary file not found for: {filename}'
+                }), 404
+
+            # Read file content
+            with open(file_path, 'r', encoding='utf-8') as f:
+                summary_text = f.read()
+
+            # Get available formats
+            formats_available = get_available_formats(base_name)
+
+            return jsonify({
+                'success': True,
+                'filename': base_name,
+                'summary': summary_text,
+                'file_path': str(file_path),
+                'formats_available': formats_available
+            })
+
+        except Exception as e:
+            app.logger.error(f"Error reading summary: {e}")
+            return jsonify({
+                'success': False,
+                'message': f"Error reading summary: {str(e)}"
+            }), 500
+
+    @app.route('/api/versions/<filename>')
+    def get_versions(filename: str):
+        """Get all summary versions for a file"""
+        try:
+            # Validate filename
+            if '..' in filename or filename.startswith('/'):
+                return jsonify({'success': False, 'message': 'Invalid filename'}), 400
+            
+            # Extract base name
+            base_name = Path(filename).stem
+            base_name = base_name.replace('_unificado', '').replace('_unified', '')
+            
+            versions = []
+            downloads_path = settings.LOCAL_DOWNLOADS_PATH
+            docx_path = settings.LOCAL_DOCX
+            
+            # Check for transcription (original)
+            txt_path = downloads_path / f"{base_name}.txt"
+            if txt_path.exists():
+                stat = txt_path.stat()
+                versions.append({
+                    'type': 'transcription',
+                    'label': '📝 Transcripción Original',
+                    'filename': txt_path.name,
+                    'path': f"/downloads/find-file?filename={base_name}&ext=txt",
+                    'date': datetime.fromtimestamp(stat.st_mtime).strftime('%Y-%m-%d %H:%M'),
+                    'size': f"{stat.st_size / 1024:.1f} KB"
+                })
+            
+            # Check for summary versions (md, docx, pdf)
+            summary_patterns = [
+                (f"{base_name}_unificado.md", "📋 Resumen MD"),
+                (f"{base_name}_unificado.docx", "📄 Documento DOCX"),
+                (f"{base_name}_unificado.pdf", "📑 PDF"),
+            ]
+            
+            for pattern, label in summary_patterns:
+                # Check downloads path
+                file_path = downloads_path / pattern
+                if not file_path.exists():
+                    file_path = docx_path / pattern
+                
+                if file_path.exists():
+                    stat = file_path.stat()
+                    ext = file_path.suffix[1:]  # Remove the dot
+                    versions.append({
+                        'type': 'summary',
+                        'label': label,
+                        'filename': pattern,
+                        'path': f"/downloads/find-file?filename={base_name}&ext={ext}",
+                        'date': datetime.fromtimestamp(stat.st_mtime).strftime('%Y-%m-%d %H:%M'),
+                        'size': f"{stat.st_size / 1024:.1f} KB"
+                    })
+            
+            # Sort by date descending
+            versions.sort(key=lambda x: x['date'], reverse=True)
+            
+            return jsonify({
+                'success': True,
+                'base_name': base_name,
+                'versions': versions,
+                'count': len(versions)
+            })
+            
+        except Exception as e:
+            app.logger.error(f"Error getting versions: {e}")
+            return jsonify({'success': False, 'message': str(e)}), 500
+
+    @app.route('/api/regenerate-summary', methods=['POST'])
+    def regenerate_summary():
+        """Regenerate summary from existing transcription"""
+        start_time = time.time()
+
+        try:
+            data = request.get_json()
+            filename = data.get('filename')
+            custom_prompt = data.get('custom_prompt')
+
+            if not filename:
+                return jsonify({
+                    'success': False,
+                    'message': 'Filename is required'
+                }), 400
+
+            # Validate filename to prevent path traversal
+            if '..' in filename or filename.startswith('/'):
+                return jsonify({
+                    'success': False,
+                    'message': 'Invalid filename'
+                }), 400
+
+            # Get base name (remove extension if present)
+            base_name = Path(filename).stem
+
+            # Read transcription from .txt file
+            transcription_path = settings.LOCAL_DOWNLOADS_PATH / f"{base_name}.txt"
+
+            if not transcription_path.exists():
+                # Try without .txt extension if already included
+                transcription_path = settings.LOCAL_DOWNLOADS_PATH / filename
+                if not transcription_path.exists():
+                    return jsonify({
+                        'success': False,
+                        'message': f'Transcription file not found for: {filename}'
+                    }), 404
+
+            with open(transcription_path, 'r', encoding='utf-8') as f:
+                transcription_text = f.read()
+
+            # Generate new summary using DocumentGenerator
+            doc_generator = DocumentGenerator()
+            success, new_summary, metadata = doc_generator.generate_summary(
+                transcription_text,
+                base_name
+            )
+
+            if not success:
+                return jsonify({
+                    'success': False,
+                    'message': 'Failed to generate summary'
+                }), 500
+
+            # Upload to WebDAV if configured
+            files_updated = []
+            if settings.has_webdav_config:
+                try:
+                    # Upload markdown
+                    if 'markdown_path' in metadata:
+                        md_path = Path(metadata['markdown_path'])
+                        if md_path.exists():
+                            remote_md_path = f"{settings.REMOTE_TXT_FOLDER}/{md_path.name}"
+                            webdav_service.upload(str(md_path), remote_md_path)
+                            files_updated.append(remote_md_path)
+
+                    # Upload DOCX
+                    if 'docx_path' in metadata:
+                        docx_path = Path(metadata['docx_path'])
+                        if docx_path.exists():
+                            remote_docx_path = f"{settings.DOCX_FOLDER}/{docx_path.name}"
+                            webdav_service.upload(str(docx_path), remote_docx_path)
+                            files_updated.append(remote_docx_path)
+
+                    # Upload PDF if available
+                    if 'pdf_path' in metadata:
+                        pdf_path = Path(metadata['pdf_path'])
+                        if pdf_path.exists():
+                            remote_pdf_path = f"{settings.REMOTE_PDF_FOLDER}/{pdf_path.name}"
+                            webdav_service.upload(str(pdf_path), remote_pdf_path)
+                            files_updated.append(remote_pdf_path)
+
+                except Exception as e:
+                    app.logger.warning(f"WebDAV upload failed: {e}")
+                    # Continue even if upload fails
+
+            processing_time = time.time() - start_time
+
+            return jsonify({
+                'success': True,
+                'message': 'Summary regenerated successfully',
+                'new_summary': new_summary,
+                'files_updated': files_updated,
+                'processing_time': f"{processing_time:.2f}s",
+                'metadata': metadata
+            })
+
+        except Exception as e:
+            app.logger.error(f"Error regenerating summary: {e}")
+            return jsonify({
+                'success': False,
+                'message': f"Error regenerating summary: {str(e)}"
+            }), 500
+
+    @app.route('/api/files-detailed')
+    def get_files_detailed():
+        """Get detailed list of files with transcription and summary info"""
+        try:
+            files = get_audio_files_detailed()
+
+            # Calculate statistics
+            total = len(files)
+            with_transcription = sum(1 for f in files if f['has_transcription'])
+            with_summary = sum(1 for f in files if f['has_summary'])
+
+            return jsonify({
+                'success': True,
+                'files': files,
+                'total': total,
+                'with_transcription': with_transcription,
+                'with_summary': with_summary
+            })
+
+        except Exception as e:
+            app.logger.error(f"Error getting detailed files: {e}")
+            return jsonify({
+                'success': False,
+                'message': f"Error: {str(e)}"
+            }), 500
+
     return app
 
 
 def get_audio_files() -> List[Dict[str, Any]]:
     """Get list of audio files from WebDAV and local"""
+    import logging
+    logger = logging.getLogger(__name__)
     files = []
 
     # Get files from WebDAV
@@ -202,7 +568,7 @@ def get_audio_files() -> List[Dict[str, Any]]:
                         'available_formats': get_available_formats(base_name)
                     })
         except Exception as e:
-            app.logger.error(f"Error getting WebDAV files: {e}")
+            logger.warning(f"Error getting WebDAV files: {e}")
 
     # Get local files
     try:
@@ -222,13 +588,113 @@ def get_audio_files() -> List[Dict[str, Any]]:
                         'available_formats': get_available_formats(file_path.name)
                     })
     except Exception as e:
-        app.logger.error(f"Error getting local files: {e}")
+        logger.error(f"Error getting local files: {e}")
 
-    # Remove duplicates (WebDAV takes precedence)
+    # Remove duplicates (keep both local and webdav - distinguish by source)
     unique_files = {}
     for file in files:
-        key = file['filename']
-        if key not in unique_files or file['source'] == 'webdav':
+        # Use (filename, source) as key to keep both local and webdav files
+        key = (file['filename'], file['source'])
+        unique_files[key] = file
+
+    return sorted(unique_files.values(), key=lambda x: (x['source'], x['filename']))
+
+
+def get_audio_files_detailed() -> List[Dict[str, Any]]:
+    """Get detailed list of audio files with transcription and summary information"""
+    files = []
+
+    # Get local audio files only for detailed view
+    try:
+        if settings.LOCAL_DOWNLOADS_PATH.exists():
+            for ext in settings.AUDIO_EXTENSIONS:
+                for file_path in settings.LOCAL_DOWNLOADS_PATH.glob(f"*{ext}"):
+                    stat = file_path.stat()
+                    filename = file_path.name
+                    base_name = file_path.stem
+
+                    # Check for transcription
+                    transcription_path = settings.LOCAL_DOWNLOADS_PATH / f"{base_name}.txt"
+                    has_transcription = transcription_path.exists()
+                    transcription_words = 0
+
+                    if has_transcription:
+                        try:
+                            with open(transcription_path, 'r', encoding='utf-8') as f:
+                                transcription_text = f.read()
+                                transcription_words = len(transcription_text.split())
+                        except Exception:
+                            pass
+
+                    # Check for summary and formats
+                    formats = get_available_formats(filename)
+                    has_summary = formats.get('md', False)
+
+                    # Get summary path
+                    summary_path = None
+                    if has_summary:
+                        summary_variants = [
+                            settings.LOCAL_DOWNLOADS_PATH / f"{base_name}_unificado.md",
+                            settings.LOCAL_DOWNLOADS_PATH / f"{base_name}_unified.md",
+                            settings.LOCAL_DOWNLOADS_PATH / f"{base_name}.md",
+                        ]
+                        for variant in summary_variants:
+                            if variant.exists():
+                                summary_path = str(variant)
+                                break
+
+                    files.append({
+                        'filename': filename,
+                        'base_name': base_name,
+                        'audio_path': str(file_path),
+                        'has_transcription': has_transcription,
+                        'transcription_path': str(transcription_path) if has_transcription else None,
+                        'transcription_words': transcription_words,
+                        'has_summary': has_summary,
+                        'summary_path': summary_path,
+                        'formats': formats,
+                        'processed': processed_registry.is_processed(filename),
+                        'last_modified': datetime.fromtimestamp(stat.st_mtime).strftime('%Y-%m-%d %H:%M:%S'),
+                        'size': format_size(stat.st_size)
+                    })
+    except Exception as e:
+        pass  # Error logged in endpoint
+
+    # Get WebDAV files
+    if settings.has_webdav_config:
+        try:
+            webdav_files = webdav_service.list(settings.REMOTE_AUDIOS_FOLDER)
+            for file_path in webdav_files:
+                normalized_path = webdav_service.normalize_path(file_path)
+                base_name = Path(normalized_path).stem
+
+                if any(normalized_path.lower().endswith(ext) for ext in settings.AUDIO_EXTENSIONS):
+                    # Check if already in local files
+                    if not any(f['base_name'] == base_name for f in files):
+                        formats = get_available_formats(base_name)
+
+                        files.append({
+                            'filename': Path(normalized_path).name,
+                            'base_name': base_name,
+                            'audio_path': normalized_path,
+                            'has_transcription': formats.get('txt', False),
+                            'transcription_path': None,
+                            'transcription_words': 0,
+                            'has_summary': formats.get('md', False),
+                            'summary_path': None,
+                            'formats': formats,
+                            'processed': processed_registry.is_processed(normalized_path),
+                            'last_modified': 'Unknown',
+                            'size': 'Unknown'
+                        })
+        except Exception as e:
+            pass  # Error logged in endpoint
+
+    # Remove duplicates and sort
+    unique_files = {}
+    for file in files:
+        key = file['base_name']
+        if key not in unique_files:
             unique_files[key] = file
 
     return sorted(unique_files.values(), key=lambda x: x['filename'])
diff --git a/templates/index.html b/templates/index.html
index 241eae0..9cc9430 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="es">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dashboard de Gestión de Audio</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+        rel="stylesheet">
     <style>
         :root {
             /* Dark Mode Colors */
@@ -63,8 +65,15 @@
         }
 
         @keyframes backgroundShift {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.8; }
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.8;
+            }
         }
 
         .container {
@@ -81,6 +90,7 @@
                 opacity: 0;
                 transform: translateY(20px);
             }
+
             to {
                 opacity: 1;
                 transform: translateY(0);
@@ -113,8 +123,13 @@
         }
 
         @keyframes gradientMove {
-            0% { background-position: 0% 0%; }
-            100% { background-position: 200% 0%; }
+            0% {
+                background-position: 0% 0%;
+            }
+
+            100% {
+                background-position: 200% 0%;
+            }
         }
 
         .header:hover {
@@ -142,9 +157,19 @@
         }
 
         @keyframes float {
-            0%, 100% { transform: translateY(0px) rotate(0deg); }
-            33% { transform: translateY(-8px) rotate(1deg); }
-            66% { transform: translateY(-4px) rotate(-1deg); }
+
+            0%,
+            100% {
+                transform: translateY(0px) rotate(0deg);
+            }
+
+            33% {
+                transform: translateY(-8px) rotate(1deg);
+            }
+
+            66% {
+                transform: translateY(-4px) rotate(-1deg);
+            }
         }
 
         .header p {
@@ -160,6 +185,7 @@
                 opacity: 0;
                 transform: translateY(-60px) scale(0.95);
             }
+
             to {
                 opacity: 1;
                 transform: translateY(0) scale(1);
@@ -171,6 +197,7 @@
                 opacity: 0;
                 transform: translateY(30px);
             }
+
             to {
                 opacity: 1;
                 transform: translateY(0);
@@ -221,9 +248,17 @@
             transform: translateX(0);
         }
 
-        .stat-card:nth-child(1) { animation-delay: 0.1s; }
-        .stat-card:nth-child(2) { animation-delay: 0.2s; }
-        .stat-card:nth-child(3) { animation-delay: 0.3s; }
+        .stat-card:nth-child(1) {
+            animation-delay: 0.1s;
+        }
+
+        .stat-card:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        .stat-card:nth-child(3) {
+            animation-delay: 0.3s;
+        }
 
         .stat-card:hover {
             transform: translateY(-8px) scale(1.02);
@@ -249,6 +284,7 @@
                 opacity: 0;
                 filter: blur(10px);
             }
+
             to {
                 transform: scale(1);
                 opacity: 1;
@@ -474,19 +510,27 @@
             box-shadow: 0 0 15px rgba(100, 108, 255, 0.3);
         }
 
-        .filter-checkbox input[type="checkbox"]:checked + .checkmark {
+        .filter-checkbox input[type="checkbox"]:checked+.checkmark {
             background: var(--accent-color);
             border-color: var(--accent-color);
             animation: checkMarkPop 0.3s ease;
         }
 
         @keyframes checkMarkPop {
-            0% { transform: scale(0); }
-            50% { transform: scale(1.3); }
-            100% { transform: scale(1); }
+            0% {
+                transform: scale(0);
+            }
+
+            50% {
+                transform: scale(1.3);
+            }
+
+            100% {
+                transform: scale(1);
+            }
         }
 
-        .filter-checkbox input[type="checkbox"]:checked + .checkmark::after {
+        .filter-checkbox input[type="checkbox"]:checked+.checkmark::after {
             content: '✓';
             color: white;
             font-size: 14px;
@@ -495,9 +539,17 @@
         }
 
         @keyframes checkMarkBounce {
-            0% { transform: scale(0) rotate(-180deg); }
-            50% { transform: scale(1.2) rotate(-90deg); }
-            100% { transform: scale(1) rotate(0deg); }
+            0% {
+                transform: scale(0) rotate(-180deg);
+            }
+
+            50% {
+                transform: scale(1.2) rotate(-90deg);
+            }
+
+            100% {
+                transform: scale(1) rotate(0deg);
+            }
         }
 
         .sort-checkbox {
@@ -571,13 +623,13 @@
             box-shadow: 0 0 15px rgba(61, 220, 132, 0.3);
         }
 
-        .sort-checkbox input[type="radio"]:checked + .checkmark {
+        .sort-checkbox input[type="radio"]:checked+.checkmark {
             background: var(--success-color);
             border-color: var(--success-color);
             animation: checkMarkPop 0.3s ease;
         }
 
-        .sort-checkbox input[type="radio"]:checked + .checkmark::after {
+        .sort-checkbox input[type="radio"]:checked+.checkmark::after {
             content: '';
             width: 10px;
             height: 10px;
@@ -587,9 +639,20 @@
         }
 
         @keyframes checkMarkBounce {
-            0% { transform: scale(0); opacity: 0; }
-            50% { transform: scale(1.5); opacity: 1; }
-            100% { transform: scale(1); opacity: 1; }
+            0% {
+                transform: scale(0);
+                opacity: 0;
+            }
+
+            50% {
+                transform: scale(1.5);
+                opacity: 1;
+            }
+
+            100% {
+                transform: scale(1);
+                opacity: 1;
+            }
         }
 
         .search-box {
@@ -654,14 +717,20 @@
             transform: scaleY(1);
         }
 
-        .file-card:nth-child(odd) { animation-delay: 0.1s; }
-        .file-card:nth-child(even) { animation-delay: 0.2s; }
+        .file-card:nth-child(odd) {
+            animation-delay: 0.1s;
+        }
+
+        .file-card:nth-child(even) {
+            animation-delay: 0.2s;
+        }
 
         @keyframes fadeInLeft {
             from {
                 opacity: 0;
                 transform: translateX(-50px);
             }
+
             to {
                 opacity: 1;
                 transform: translateX(0);
@@ -719,8 +788,17 @@
         }
 
         @keyframes pulse {
-            0%, 100% { transform: scale(1); opacity: 1; }
-            50% { transform: scale(1.05); opacity: 0.9; }
+
+            0%,
+            100% {
+                transform: scale(1);
+                opacity: 1;
+            }
+
+            50% {
+                transform: scale(1.05);
+                opacity: 0.9;
+            }
         }
 
         .status-processed {
@@ -790,6 +868,15 @@
             box-shadow: 0 8px 25px rgba(249, 168, 38, 0.5);
         }
 
+        .action-btn.regen-btn {
+            background: linear-gradient(135deg, #9333ea 0%, #c084fc 100%);
+            color: white;
+        }
+
+        .action-btn.regen-btn:hover {
+            box-shadow: 0 8px 25px rgba(147, 51, 234, 0.5);
+        }
+
         .source-badge {
             padding: 5px 12px;
             border-radius: 14px;
@@ -834,13 +921,25 @@
         }
 
         @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
         }
 
         @keyframes glow {
-            0%, 100% { box-shadow: 0 0 20px rgba(100, 108, 255, 0.3); }
-            50% { box-shadow: 0 0 40px rgba(100, 108, 255, 0.6); }
+
+            0%,
+            100% {
+                box-shadow: 0 0 20px rgba(100, 108, 255, 0.3);
+            }
+
+            50% {
+                box-shadow: 0 0 40px rgba(100, 108, 255, 0.6);
+            }
         }
 
         .loading p {
@@ -849,7 +948,8 @@
             font-weight: 600;
         }
 
-        .error, .success {
+        .error,
+        .success {
             padding: 20px 24px;
             border-radius: 14px;
             margin: 20px 0;
@@ -864,6 +964,7 @@
                 opacity: 0;
                 transform: translateX(100px);
             }
+
             to {
                 opacity: 1;
                 transform: translateX(0);
@@ -932,12 +1033,439 @@
                 opacity: 0;
                 transform: translateX(50px);
             }
+
             to {
                 opacity: 1;
                 transform: translateX(0);
             }
         }
 
+        /* Preview Panel Styles */
+        .preview-panel {
+            position: fixed;
+            top: 0;
+            right: -500px;
+            width: 500px;
+            height: 100vh;
+            background: var(--bg-secondary);
+            border-left: 1px solid var(--border-color);
+            box-shadow: var(--shadow-xl);
+            z-index: 1000;
+            transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .preview-panel.open {
+            right: 0;
+        }
+
+        .preview-header {
+            background: var(--bg-tertiary);
+            border-bottom: 1px solid var(--border-color);
+            padding: 20px 24px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-shrink: 0;
+        }
+
+        .preview-header h3 {
+            color: var(--text-primary);
+            font-size: 1.3rem;
+            font-weight: 700;
+            margin: 0;
+            letter-spacing: -0.01em;
+        }
+
+        .preview-close {
+            background: var(--bg-hover);
+            border: 1px solid var(--border-color);
+            color: var(--text-secondary);
+            width: 36px;
+            height: 36px;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 1.2rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+            font-family: 'Inter', sans-serif;
+        }
+
+        .preview-close:hover {
+            background: var(--error-color);
+            border-color: var(--error-color);
+            color: white;
+            transform: rotate(90deg);
+        }
+
+        .preview-tabs {
+            display: flex;
+            background: var(--bg-tertiary);
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+
+        .tab-btn {
+            flex: 1;
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            padding: 16px;
+            cursor: pointer;
+            font-size: 0.95rem;
+            font-weight: 600;
+            font-family: 'Inter', sans-serif;
+            transition: all 0.3s ease;
+            position: relative;
+            border-bottom: 2px solid transparent;
+        }
+
+        .tab-btn:hover {
+            color: var(--text-primary);
+            background: var(--bg-hover);
+        }
+
+        .tab-btn.active {
+            color: var(--accent-color);
+            border-bottom-color: var(--accent-color);
+        }
+
+        .preview-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 24px;
+            background: var(--bg-secondary);
+        }
+
+        .preview-content::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        .preview-content::-webkit-scrollbar-track {
+            background: var(--bg-tertiary);
+        }
+
+        .preview-content::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 4px;
+        }
+
+        .preview-content::-webkit-scrollbar-thumb:hover {
+            background: var(--accent-color);
+        }
+
+        .tab-content {
+            display: none;
+            animation: fadeIn 0.3s ease;
+        }
+
+        .tab-content.active {
+            display: block;
+        }
+
+        .content-stats {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 20px;
+            padding: 16px;
+            background: var(--bg-tertiary);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+        }
+
+        .stat-item {
+            flex: 1;
+            text-align: center;
+        }
+
+        .stat-label {
+            color: var(--text-tertiary);
+            font-size: 0.8rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-bottom: 4px;
+        }
+
+        .stat-value {
+            color: var(--text-primary);
+            font-size: 1.1rem;
+            font-weight: 700;
+        }
+
+        .text-preview {
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            padding: 20px;
+            color: var(--text-primary);
+            font-size: 0.95rem;
+            line-height: 1.7;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+
+        .text-preview::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .text-preview::-webkit-scrollbar-track {
+            background: var(--bg-secondary);
+        }
+
+        .text-preview::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 3px;
+        }
+
+        .text-preview::-webkit-scrollbar-thumb:hover {
+            background: var(--accent-color);
+        }
+
+        .markdown-preview {
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            padding: 20px;
+            color: var(--text-primary);
+            font-size: 0.95rem;
+            line-height: 1.7;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+
+        .markdown-preview::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .markdown-preview::-webkit-scrollbar-track {
+            background: var(--bg-secondary);
+        }
+
+        .markdown-preview::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 3px;
+        }
+
+        .markdown-preview::-webkit-scrollbar-thumb:hover {
+            background: var(--accent-color);
+        }
+
+        .versions-list {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            max-height: 400px;
+            overflow-y: auto;
+            padding: 10px 0;
+        }
+
+        .version-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 14px 18px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            color: inherit;
+        }
+
+        .version-item:hover {
+            border-color: var(--accent-color);
+            background: var(--bg-hover);
+            transform: translateX(5px);
+            box-shadow: 0 4px 15px rgba(100, 108, 255, 0.2);
+        }
+
+        .version-info {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .version-label {
+            font-weight: 600;
+            font-size: 0.95rem;
+            color: var(--text-primary);
+        }
+
+        .version-meta {
+            font-size: 0.8rem;
+            color: var(--text-tertiary);
+            display: flex;
+            gap: 12px;
+        }
+
+        .version-open-icon {
+            color: var(--accent-color);
+            font-size: 1.2rem;
+        }
+
+        .markdown-preview h1,
+        .markdown-preview h2,
+        .markdown-preview h3 {
+            color: var(--text-primary);
+            margin-top: 20px;
+            margin-bottom: 12px;
+            font-weight: 700;
+        }
+
+        .markdown-preview h1 {
+            font-size: 1.5rem;
+            border-bottom: 1px solid var(--border-color);
+            padding-bottom: 8px;
+        }
+
+        .markdown-preview h2 {
+            font-size: 1.3rem;
+        }
+
+        .markdown-preview h3 {
+            font-size: 1.1rem;
+        }
+
+        .markdown-preview p {
+            margin-bottom: 12px;
+        }
+
+        .markdown-preview ul,
+        .markdown-preview ol {
+            margin-left: 24px;
+            margin-bottom: 12px;
+        }
+
+        .markdown-preview li {
+            margin-bottom: 6px;
+        }
+
+        .markdown-preview strong {
+            color: var(--accent-color);
+            font-weight: 700;
+        }
+
+        .markdown-preview em {
+            color: var(--text-secondary);
+        }
+
+        .preview-actions {
+            background: var(--bg-tertiary);
+            border-top: 1px solid var(--border-color);
+            padding: 20px 24px;
+            display: flex;
+            gap: 12px;
+            flex-shrink: 0;
+        }
+
+        .regenerate-btn,
+        .download-btn {
+            flex: 1;
+            padding: 12px 20px;
+            border: none;
+            border-radius: 12px;
+            font-size: 0.95rem;
+            font-weight: 600;
+            font-family: 'Inter', sans-serif;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        .regenerate-btn {
+            background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
+            color: white;
+        }
+
+        .regenerate-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(100, 108, 255, 0.4);
+        }
+
+        .regenerate-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+
+        .download-btn {
+            background: var(--bg-hover);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
+        }
+
+        .download-btn:hover {
+            background: var(--success-color);
+            border-color: var(--success-color);
+            color: #000;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(61, 220, 132, 0.4);
+        }
+
+        .regenerate-progress {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 10001;
+            backdrop-filter: blur(5px);
+        }
+
+        .regenerate-progress.active {
+            display: flex;
+        }
+
+        .progress-spinner {
+            width: 50px;
+            height: 50px;
+            border: 4px solid var(--border-color);
+            border-top: 4px solid var(--accent-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        .regenerate-progress .progress-text {
+            position: absolute;
+            top: 60%;
+            color: var(--text-primary);
+            font-size: 1rem;
+            font-weight: 600;
+        }
+
+        .preview-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 999;
+            display: none;
+            backdrop-filter: blur(3px);
+        }
+
+        .preview-overlay.active {
+            display: block;
+            animation: fadeIn 0.3s ease;
+        }
+
         @media (max-width: 768px) {
             .container {
                 padding: 30px 15px;
@@ -995,9 +1523,19 @@
             .controls button {
                 width: 100%;
             }
+
+            .preview-panel {
+                width: 100%;
+                right: -100%;
+            }
+
+            .preview-panel.open {
+                right: 0;
+            }
         }
 
         @media (prefers-reduced-motion: reduce) {
+
             *,
             *::before,
             *::after {
@@ -1008,6 +1546,7 @@
         }
     </style>
 </head>
+
 <body>
     <div class="container">
         <!-- Header -->
@@ -1074,7 +1613,8 @@
                         </label>
                         <div style="width: 2px; height: 30px; background: var(--border-color); margin: 0 10px;"></div>
                         <label class="sort-checkbox">
-                            <input type="radio" id="sortDate" name="sortBy" value="date" checked onchange="filterFiles()">
+                            <input type="radio" id="sortDate" name="sortBy" value="date" checked
+                                onchange="filterFiles()">
                             <span class="checkmark"></span>
                             <span>📅 Fecha</span>
                         </label>
@@ -1084,7 +1624,8 @@
                             <span>🔤 Nombre</span>
                         </label>
                     </div>
-                    <input type="text" class="search-box" id="searchBox" placeholder="🔍 Buscar archivos..." onkeyup="filterFiles()">
+                    <input type="text" class="search-box" id="searchBox" placeholder="🔍 Buscar archivos..."
+                        onkeyup="filterFiles()">
                 </div>
             </div>
             <div class="files-grid" id="filesGrid">
@@ -1093,12 +1634,86 @@
         </div>
     </div>
 
+    <!-- Preview Panel -->
+    <div class="preview-overlay" id="previewOverlay" onclick="closePreview()"></div>
+    <div class="preview-panel" id="previewPanel">
+        <div class="regenerate-progress" id="regenerateProgress">
+            <div class="progress-spinner"></div>
+            <div class="progress-text">Regenerando resumen...</div>
+        </div>
+
+        <div class="preview-header">
+            <h3 id="previewTitle">Vista Previa</h3>
+            <button class="preview-close" onclick="closePreview()">×</button>
+        </div>
+
+        <div class="preview-tabs">
+            <button class="tab-btn active" onclick="switchTab('transcription')">Transcripción</button>
+            <button class="tab-btn" onclick="switchTab('summary')">Resumen</button>
+            <button class="tab-btn" onclick="switchTab('versions')">📁 Versiones</button>
+        </div>
+
+        <div class="preview-content">
+            <div class="tab-content active" id="tabTranscription">
+                <div class="content-stats">
+                    <div class="stat-item">
+                        <div class="stat-label">Palabras</div>
+                        <div class="stat-value" id="transcriptionWords">-</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">Caracteres</div>
+                        <div class="stat-value" id="transcriptionChars">-</div>
+                    </div>
+                </div>
+                <div class="text-preview" id="transcriptionPreview">
+                    Cargando transcripción...
+                </div>
+            </div>
+
+            <div class="tab-content" id="tabSummary">
+                <div class="content-stats">
+                    <div class="stat-item">
+                        <div class="stat-label">Palabras</div>
+                        <div class="stat-value" id="summaryWords">-</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-label">Caracteres</div>
+                        <div class="stat-value" id="summaryChars">-</div>
+                    </div>
+                </div>
+                <div class="markdown-preview" id="summaryPreview">
+                    Cargando resumen...
+                </div>
+            </div>
+
+            <div class="tab-content" id="tabVersions">
+                <div class="versions-header">
+                    <h4 style="color: var(--text-primary); margin-bottom: 10px;">📁 Archivos Generados</h4>
+                    <p style="color: var(--text-tertiary); font-size: 0.85rem;">Haz clic para abrir en nueva pestaña</p>
+                </div>
+                <div class="versions-list" id="versionsList">
+                    Cargando versiones...
+                </div>
+            </div>
+        </div>
+
+        <div class="preview-actions">
+            <button class="regenerate-btn" onclick="regenerateSummary()" id="regenerateBtn">
+                🔄 Regenerar
+            </button>
+            <button class="download-btn" onclick="downloadFiles()">
+                ⬇️ Descargar
+            </button>
+        </div>
+    </div>
+
     <script>
         let files = [];
         let loading = false;
+        let currentPreviewFile = null;
 
         // Inicialización
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', function () {
             loadFiles();
         });
 
@@ -1154,6 +1769,9 @@
                 const formats = file.available_formats || {};
                 const availableFormatsList = Object.keys(formats).filter(ext => formats[ext]);
 
+                // Determinar si tiene transcripción (txt disponible)
+                const hasTranscription = formats.txt === true;
+
                 const formatLinks = availableFormatsList.length > 0
                     ? availableFormatsList.map(ext => {
                         const baseName = file.filename.substring(0, file.filename.lastIndexOf('.'));
@@ -1169,7 +1787,7 @@
                     : '<span style="color: var(--text-tertiary); font-size: 0.9rem;">no procesado aún</span>';
 
                 return `
-                    <div class="file-card" data-filename="${file.filename.toLowerCase()}">
+                    <div class="file-card" data-filename="${file.filename.toLowerCase()}" onclick="openPreview('${file.filename}')">
                         <div class="file-info">
                             <div class="file-name">${file.filename}</div>
                             <div class="file-meta">
@@ -1186,11 +1804,16 @@
                                 ${file.processed ? 'Procesado' : 'Pendiente'}
                             </span>
                             ${!file.processed ? `
-                                <button class="action-btn" onclick="reprocessFile('${file.path}', '${file.source}')" id="btn-${file.filename.replace(/[^a-zA-Z0-9]/g, '')}">
+                                <button class="action-btn" onclick="event.stopPropagation(); reprocessFile('${file.path}', '${file.source}')" id="btn-${file.filename.replace(/[^a-zA-Z0-9]/g, '')}">
                                     🚀 Procesar
                                 </button>
                             ` : `
-                                <button class="action-btn reset" onclick="markUnprocessed('${file.path}')" id="btn-${file.filename.replace(/[^a-zA-Z0-9]/g, '')}">
+                                ${hasTranscription ? `
+                                    <button class="action-btn regen-btn" onclick="event.stopPropagation(); quickRegenerate('${file.filename}')" id="regen-${file.filename.replace(/[^a-zA-Z0-9]/g, '')}" title="Regenerar resumen (mantiene transcripción)">
+                                        ✨ Regenerar
+                                    </button>
+                                ` : ''}
+                                <button class="action-btn reset" onclick="event.stopPropagation(); markUnprocessed('${file.path}')" id="btn-${file.filename.replace(/[^a-zA-Z0-9]/g, '')}">
                                     🔄 Resetear
                                 </button>
                             `}
@@ -1557,6 +2180,478 @@
             });
         }
 
+        // Preview Panel Functions
+        function openPreview(filename) {
+            currentPreviewFile = filename;
+            const panel = document.getElementById('previewPanel');
+            const overlay = document.getElementById('previewOverlay');
+            const title = document.getElementById('previewTitle');
+
+            title.textContent = filename;
+            panel.classList.add('open');
+            overlay.classList.add('active');
+
+            // Load content
+            loadTranscription(filename);
+            loadSummary(filename);
+        }
+
+        function closePreview() {
+            currentPreviewFile = null;
+            const panel = document.getElementById('previewPanel');
+            const overlay = document.getElementById('previewOverlay');
+
+            panel.classList.remove('open');
+            overlay.classList.remove('active');
+        }
+
+        function switchTab(tabName) {
+            const tabs = document.querySelectorAll('.tab-btn');
+            const contents = document.querySelectorAll('.tab-content');
+
+            tabs.forEach(tab => tab.classList.remove('active'));
+            contents.forEach(content => content.classList.remove('active'));
+
+            if (tabName === 'transcription') {
+                tabs[0].classList.add('active');
+                document.getElementById('tabTranscription').classList.add('active');
+            } else if (tabName === 'summary') {
+                tabs[1].classList.add('active');
+                document.getElementById('tabSummary').classList.add('active');
+            } else if (tabName === 'versions') {
+                tabs[2].classList.add('active');
+                document.getElementById('tabVersions').classList.add('active');
+                // Load versions when tab is clicked
+                if (currentPreviewFile) {
+                    loadVersions(currentPreviewFile);
+                }
+            }
+        }
+
+        async function loadVersions(filename) {
+            const listEl = document.getElementById('versionsList');
+            listEl.innerHTML = '<div style="text-align: center; padding: 20px; color: var(--text-tertiary);">Cargando versiones...</div>';
+
+            try {
+                const response = await fetch(`/api/versions/${encodeURIComponent(filename)}`);
+                const data = await response.json();
+
+                if (data.success && data.versions.length > 0) {
+                    listEl.innerHTML = data.versions.map(v => `
+                        <a href="${v.path}" target="_blank" class="version-item">
+                            <div class="version-info">
+                                <div class="version-label">${v.label}</div>
+                                <div class="version-meta">
+                                    <span>📅 ${v.date}</span>
+                                    <span>📦 ${v.size}</span>
+                                </div>
+                            </div>
+                            <span class="version-open-icon">↗️</span>
+                        </a>
+                    `).join('');
+                } else {
+                    listEl.innerHTML = '<div style="text-align: center; padding: 30px; color: var(--text-tertiary);">No hay versiones disponibles aún</div>';
+                }
+            } catch (error) {
+                listEl.innerHTML = '<div style="text-align: center; padding: 30px; color: var(--error-color);">Error al cargar versiones</div>';
+                console.error('Error loading versions:', error);
+            }
+        }
+
+        async function loadTranscription(filename) {
+            const preview = document.getElementById('transcriptionPreview');
+            const wordsEl = document.getElementById('transcriptionWords');
+            const charsEl = document.getElementById('transcriptionChars');
+
+            preview.innerHTML = 'Cargando transcripción...';
+
+            try {
+                const response = await fetch(`/api/transcription/${encodeURIComponent(filename)}`);
+                const data = await response.json();
+
+                if (data.success && data.transcription) {
+                    preview.textContent = data.transcription;
+
+                    // Update stats
+                    const words = data.transcription.split(/\s+/).filter(w => w.length > 0).length;
+                    const chars = data.transcription.length;
+
+                    wordsEl.textContent = words.toLocaleString();
+                    charsEl.textContent = chars.toLocaleString();
+                } else {
+                    preview.textContent = 'No se encontró transcripción para este archivo.';
+                    wordsEl.textContent = '0';
+                    charsEl.textContent = '0';
+                }
+            } catch (error) {
+                preview.textContent = 'Error al cargar la transcripción.';
+                wordsEl.textContent = '0';
+                charsEl.textContent = '0';
+                console.error('Error loading transcription:', error);
+            }
+        }
+
+        async function loadSummary(filename) {
+            const preview = document.getElementById('summaryPreview');
+            const wordsEl = document.getElementById('summaryWords');
+            const charsEl = document.getElementById('summaryChars');
+
+            preview.innerHTML = 'Cargando resumen...';
+
+            try {
+                const response = await fetch(`/api/summary/${encodeURIComponent(filename)}`);
+                const data = await response.json();
+
+                if (data.success && data.summary) {
+                    preview.innerHTML = renderMarkdown(data.summary);
+
+                    // Update stats (strip HTML for word count)
+                    const tempDiv = document.createElement('div');
+                    tempDiv.innerHTML = data.summary;
+                    const textContent = tempDiv.textContent || tempDiv.innerText || '';
+
+                    const words = textContent.split(/\s+/).filter(w => w.length > 0).length;
+                    const chars = textContent.length;
+
+                    wordsEl.textContent = words.toLocaleString();
+                    charsEl.textContent = chars.toLocaleString();
+                } else {
+                    preview.textContent = 'No se encontró resumen para este archivo.';
+                    wordsEl.textContent = '0';
+                    charsEl.textContent = '0';
+                }
+            } catch (error) {
+                preview.textContent = 'Error al cargar el resumen.';
+                wordsEl.textContent = '0';
+                charsEl.textContent = '0';
+                console.error('Error loading summary:', error);
+            }
+        }
+
+        function renderMarkdown(text) {
+            if (!text) return '';
+
+            // Basic markdown to HTML conversion
+            let html = text
+
+                // Escape HTML
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+
+                // Headers
+                .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+                .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+                .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+
+                // Bold
+                .replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>')
+
+                // Italic
+                .replace(/\*(.*?)\*/gim, '<em>$1</em>')
+
+                // Unordered lists
+                .replace(/^\* (.*$)/gim, '<li>$1</li>')
+                .replace(/^(\s*)- (.*$)/gim, '<li>$2</li>')
+
+                // Ordered lists
+                .replace(/^\d+\. (.*$)/gim, '<li>$1</li>')
+
+                // Paragraphs
+                .replace(/\n\n/g, '</p><p>')
+
+                // Line breaks
+                .replace(/\n/g, '<br>');
+
+            // Wrap in paragraph if not starting with header
+            if (!html.startsWith('<h')) {
+                html = '<p>' + html + '</p>';
+            }
+
+            // Wrap lists
+            html = html.replace(/(<li>.*?<\/li>)/gim, '<ul>$1</ul>');
+            html = html.replace(/<\/ul><ul>/gim, '');
+
+            return html;
+        }
+
+        async function regenerateSummary() {
+            if (!currentPreviewFile) return;
+
+            const progress = document.getElementById('regenerateProgress');
+            const btn = document.getElementById('regenerateBtn');
+
+            progress.classList.add('active');
+            btn.disabled = true;
+
+            try {
+                const response = await fetch('/api/regenerate-summary', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        filename: currentPreviewFile
+                    })
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    showMessage('✅ Resumen regenerado exitosamente', 'success');
+                    await loadSummary(currentPreviewFile);
+                } else {
+                    showMessage('❌ ' + data.message, 'error');
+                }
+            } catch (error) {
+                showMessage('❌ Error al regenerar el resumen', 'error');
+                console.error('Error regenerating summary:', error);
+            } finally {
+                progress.classList.remove('active');
+                btn.disabled = false;
+            }
+        }
+
+        // Regeneración rápida desde la lista de archivos
+        async function quickRegenerate(filename) {
+            const btnId = 'regen-' + filename.replace(/[^a-zA-Z0-9]/g, '');
+            const btn = document.getElementById(btnId);
+
+            if (!btn) return;
+
+            // Crear modal de progreso
+            const modal = document.createElement('div');
+            modal.id = 'progressModal';
+            modal.innerHTML = `
+                <div style="
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background: rgba(0, 0, 0, 0.85);
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    z-index: 10000;
+                    backdrop-filter: blur(5px);
+                ">
+                    <div style="
+                        background: var(--bg-secondary);
+                        border: 2px solid var(--accent-color);
+                        border-radius: 20px;
+                        padding: 40px;
+                        min-width: 350px;
+                        text-align: center;
+                        box-shadow: 0 20px 60px rgba(100, 108, 255, 0.3);
+                    ">
+                        <div style="
+                            width: 60px;
+                            height: 60px;
+                            border: 4px solid var(--border-color);
+                            border-top-color: var(--accent-color);
+                            border-radius: 50%;
+                            animation: spin 1s linear infinite;
+                            margin: 0 auto 25px;
+                        "></div>
+                        <h3 style="color: var(--text-primary); margin-bottom: 15px; font-size: 1.4rem;">
+                            ✨ Regenerando Resumen
+                        </h3>
+                        <p id="progressStatus" style="color: var(--text-secondary); margin-bottom: 20px; font-size: 1rem;">
+                            📖 Leyendo transcripción...
+                        </p>
+                        <div style="
+                            background: var(--bg-tertiary);
+                            border-radius: 10px;
+                            height: 8px;
+                            overflow: hidden;
+                            margin-bottom: 15px;
+                        ">
+                            <div id="progressBar" style="
+                                background: linear-gradient(90deg, var(--accent-color), var(--success-color));
+                                height: 100%;
+                                width: 10%;
+                                transition: width 0.5s ease;
+                                border-radius: 10px;
+                            "></div>
+                        </div>
+                        <p style="color: var(--text-tertiary); font-size: 0.85rem;">
+                            Archivo: ${filename}
+                        </p>
+                    </div>
+                </div>
+            `;
+            document.body.appendChild(modal);
+
+            const originalText = btn.innerHTML;
+            btn.disabled = true;
+            btn.innerHTML = '⏳...';
+
+            // Función para actualizar progreso
+            const updateProgress = (status, percent) => {
+                const statusEl = document.getElementById('progressStatus');
+                const barEl = document.getElementById('progressBar');
+                if (statusEl) statusEl.textContent = status;
+                if (barEl) barEl.style.width = percent + '%';
+            };
+
+            try {
+                updateProgress('🤖 Conectando con IA...', 25);
+
+                const response = await fetch('/api/regenerate-summary', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        filename: filename
+                    })
+                });
+
+                updateProgress('📝 Generando resumen...', 60);
+
+                const data = await response.json();
+
+                if (data.success) {
+                    updateProgress('✅ ¡Completado!', 100);
+                    await new Promise(r => setTimeout(r, 800));
+                    showMessage(`✅ Resumen regenerado en ${data.processing_time}`, 'success');
+                    await loadFiles();
+                } else {
+                    showMessage('❌ ' + data.message, 'error');
+                    btn.disabled = false;
+                    btn.innerHTML = originalText;
+                }
+            } catch (error) {
+                showMessage('❌ Error al regenerar el resumen', 'error');
+                console.error('Error regenerating summary:', error);
+                btn.disabled = false;
+                btn.innerHTML = originalText;
+            } finally {
+                const modalEl = document.getElementById('progressModal');
+                if (modalEl) document.body.removeChild(modalEl);
+            }
+        }
+
+        async function downloadFiles() {
+            if (!currentPreviewFile) return;
+
+            const baseName = currentPreviewFile.substring(0, currentPreviewFile.lastIndexOf('.'));
+
+            // Create download menu
+            const menu = document.createElement('div');
+            menu.style.cssText = `
+                position: fixed;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                background: var(--bg-secondary);
+                border: 2px solid var(--border-color);
+                border-radius: 20px;
+                padding: 30px;
+                min-width: 300px;
+                box-shadow: var(--shadow-xl);
+                z-index: 10002;
+                animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+            `;
+
+            menu.innerHTML = `
+                <h3 style="color: var(--text-primary); margin-bottom: 20px; font-size: 1.5rem; font-weight: 700;">Descargar Archivos</h3>
+                <div style="display: flex; flex-direction: column; gap: 10px;">
+                    <a href="/downloads/find-file?filename=${encodeURIComponent(baseName)}&ext=txt" target="_blank" style="
+                        background: var(--bg-tertiary);
+                        color: var(--text-primary);
+                        border: 1px solid var(--border-color);
+                        padding: 12px 20px;
+                        border-radius: 12px;
+                        text-decoration: none;
+                        font-weight: 600;
+                        text-align: center;
+                        transition: all 0.3s ease;
+                        display: block;
+                    ">📝 Transcripción (TXT)</a>
+                    <a href="/downloads/find-file?filename=${encodeURIComponent(baseName)}&ext=md" target="_blank" style="
+                        background: var(--bg-tertiary);
+                        color: var(--text-primary);
+                        border: 1px solid var(--border-color);
+                        padding: 12px 20px;
+                        border-radius: 12px;
+                        text-decoration: none;
+                        font-weight: 600;
+                        text-align: center;
+                        transition: all 0.3s ease;
+                        display: block;
+                    ">📋 Resumen (MD)</a>
+                    <a href="/downloads/find-file?filename=${encodeURIComponent(baseName)}&ext=docx" target="_blank" style="
+                        background: var(--bg-tertiary);
+                        color: var(--text-primary);
+                        border: 1px solid var(--border-color);
+                        padding: 12px 20px;
+                        border-radius: 12px;
+                        text-decoration: none;
+                        font-weight: 600;
+                        text-align: center;
+                        transition: all 0.3s ease;
+                        display: block;
+                    ">📄 Documento (DOCX)</a>
+                    <button id="closeDownloadMenu" style="
+                        background: var(--bg-hover);
+                        color: var(--text-secondary);
+                        border: 1px solid var(--border-color);
+                        padding: 12px 20px;
+                        border-radius: 12px;
+                        cursor: pointer;
+                        font-weight: 600;
+                        font-family: 'Inter', sans-serif;
+                        transition: all 0.3s ease;
+                        margin-top: 10px;
+                    ">Cancelar</button>
+                </div>
+            `;
+
+            document.body.appendChild(menu);
+
+            // Add hover effects
+            const links = menu.querySelectorAll('a');
+            links.forEach(link => {
+                link.addEventListener('mouseenter', () => {
+                    link.style.background = 'var(--accent-color)';
+                    link.style.color = 'white';
+                    link.style.borderColor = 'var(--accent-color)';
+                    link.style.transform = 'translateY(-2px)';
+                });
+                link.addEventListener('mouseleave', () => {
+                    link.style.background = 'var(--bg-tertiary)';
+                    link.style.color = 'var(--text-primary)';
+                    link.style.borderColor = 'var(--border-color)';
+                    link.style.transform = 'translateY(0)';
+                });
+            });
+
+            const closeBtn = document.getElementById('closeDownloadMenu');
+            closeBtn.addEventListener('click', () => {
+                document.body.removeChild(menu);
+            });
+
+            closeBtn.addEventListener('mouseenter', () => {
+                closeBtn.style.background = 'var(--bg-hover)';
+                closeBtn.style.borderColor = 'var(--error-color)';
+                closeBtn.style.color = 'var(--error-color)';
+            });
+            closeBtn.addEventListener('mouseleave', () => {
+                closeBtn.style.background = 'var(--bg-hover)';
+                closeBtn.style.borderColor = 'var(--border-color)';
+                closeBtn.style.color = 'var(--text-secondary)';
+            });
+
+            // Close on outside click
+            menu.addEventListener('click', (e) => {
+                if (e.target === menu) {
+                    document.body.removeChild(menu);
+                }
+            });
+        }
+
         // Añadir estilos de animación dinámicos
         const style = document.createElement('style');
         style.textContent = `
@@ -1583,4 +2678,5 @@
         document.head.appendChild(style);
     </script>
 </body>
+
 </html>
\ No newline at end of file