Update index.html

index.html

@@ -166,6 +166,8 @@
         .roi-excellent { color: #4ade80; } .roi-good { color: #22c55e; } .roi-ok { color: #fbbf24; } .roi-risk { color: #fb923c; } .roi-low { color: #f87171; }
 
         .overlay-slide5 { background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0.0) 100%); }
+        
+        /* ESTILOS DE PANTALLA PARA SLIDE 5 (COMPACTO) */
         .content-slide5 { 
             position: absolute; 
             top: 20px; 
@@ -178,7 +180,7 @@
         }
         .titulo-slide5 {
             font-family: 'EB Garamond', serif; 
-            font-size: 2.2rem; 
+            font-size: 2.2rem; /* Compacto para pantalla */
             font-weight: 600;
             letter-spacing: 1px; 
             margin-bottom: 12px; 
@@ -200,7 +202,7 @@
         .cascada-table .fase3-row .col-monto { color: #fbbf24; }
         .notas-tecnicas {
             background: rgba(0,0,0,0.8); border-left: 3px solid rgba(255,255,255,0.3);
-            padding: 15px; margin-top: 45px; /* DEVUELTO A POSICIÓN ORIGINAL */
+            padding: 15px; margin-top: 45px;
         }
         .notas-tecnicas h3 { font-family: 'EB Garamond', serif; font-size: 1.2rem; margin-bottom: 10px; color: #fff; font-weight: 600; }
         .nota-item { margin-bottom: 12px; font-size: 0.8rem; line-height: 1.5; color: #ccc; }
@@ -291,23 +293,6 @@
             margin-top: 10px;
         }
 
-        /* ===================== MODO CAPTURA PDF (FUERZA DESKTOP) ===================== */
-        body.pdf-capture-mode {
-            min-width: 1920px !important;
-            width: 1920px !important;
-            overflow-x: hidden !important;
-        }
-        body.pdf-capture-mode .content-slide5 {
-            max-height: none !important;
-            overflow: visible !important;
-            padding-bottom: 0 !important;
-        }
-        body.pdf-capture-mode .titulo-slide5 { font-size: 2.2rem !important; margin-bottom: 12px !important; }
-        body.pdf-capture-mode .slide5-desc { font-size: 0.95rem !important; margin-bottom: 18px !important; }
-        body.pdf-capture-mode .notas-tecnicas { margin-top: 45px !important; }
-        body.pdf-capture-mode .cascada-table { font-size: 0.9rem !important; }
-        body.pdf-capture-mode .nota-item { font-size: 0.8rem !important; }
-
         /* ===================== RESPONSIVE ===================== */
         @media (max-width: 1024px) {
             .titulo-main { font-size: 6rem; letter-spacing: 15px; }
@@ -433,6 +418,61 @@
             #btn-pdf { top: 10px; right: 10px; padding: 8px 12px; font-size: 0.75rem; bottom: auto; }
         }
 
+        /* ===================== MODO CAPTURA PDF (GHOST MODE) ===================== */
+        body.generating-pdf {
+            width: 1920px !important;
+            min-width: 1920px !important;
+            overflow: hidden !important;
+        }
+        body.generating-pdf .slide {
+            width: 1920px !important;
+            height: 1080px !important;
+        }
+        
+        /* Forzar Slide 5 grande en PDF */
+        body.generating-pdf .content-slide5 {
+            max-height: none !important;
+            overflow: visible !important;
+            padding-bottom: 0 !important;
+        }
+        body.generating-pdf .titulo-slide5 {
+            font-size: 3.2rem !important; /* Vuelve a ser grande para el PDF */
+            margin-bottom: 15px !important;
+        }
+        body.generating-pdf .slide5-desc {
+            font-size: 1.1rem !important;
+            margin-bottom: 20px !important;
+        }
+        body.generating-pdf .notas-tecnicas {
+            margin-top: 45px !important;
+        }
+        
+        /* Anular Mobile Styles durante captura */
+        body.generating-pdf .bottom-controls,
+        body.generating-pdf .slide-counter,
+        body.generating-pdf .nav,
+        body.generating-pdf #btn-pdf {
+            display: none !important;
+        }
+        body.generating-pdf .content-slide5,
+        body.generating-pdf .content-slide4,
+        body.generating-pdf .content-slide6 {
+            max-height: none !important;
+            overflow: visible !important;
+            width: 65% !important; /* Desktop width */
+            top: 40px !important;
+            left: 5% !important;
+            transform: none !important;
+        }
+        body.generating-pdf .titulo-slide5,
+        body.generating-pdf .titulo-slide4 {
+            font-size: 3.2rem !important;
+        }
+        body.generating-pdf .equipo-container {
+            grid-template-columns: 1fr 1fr 1fr !important;
+            display: grid !important;
+        }
+
         /* ===================== MODO CAPTURA PDF ===================== */
         .slide.capture-mode {
             display: flex !important;
@@ -710,7 +750,7 @@
             if (e.key === 'ArrowLeft') changeSlide(-1);
         });
 
-        // ===================== GENERADOR DE PDF - CONSISTENCIA DESKTOP =====================
+        // ===================== GENERADOR DE PDF - FORZADO DESKTOP =====================
         async function generatePDF() {
             const loadingOverlay = document.getElementById('pdf-loading');
             const progressText = document.getElementById('progress-text');
@@ -722,11 +762,13 @@
             btnPdf.disabled = true;
             progressText.textContent = 'Inicializando...';
 
-            // 1. Bloquear viewport a dimensiones desktop ANTES de ocultar slides
-            document.body.classList.add('pdf-capture-mode');
-            document.body.style.width = '1920px';
-            document.body.style.overflow = 'hidden';
+            // 1. ACTIVAR MODO GHOST (Fuerza estilos desktop y tamaño de fuente)
+            document.body.classList.add('generating-pdf');
             
+            // Esperar a que el CSS tome efecto antes de ocultar
+            await new Promise(resolve => setTimeout(resolve, 500));
+            
+            // 2. Ocultar slides
             slides.forEach(s => s.style.display = 'none');
             await new Promise(resolve => setTimeout(resolve, 200));
 
@@ -762,7 +804,6 @@
                         }
                     });
 
-                    // Esperar renderizado desktop
                     await new Promise(resolve => setTimeout(resolve, 1500));
 
                     // Convertir bg a base64
@@ -781,7 +822,7 @@
                         } catch (e) { console.warn("BG conversion failed:", e); }
                     }
 
-                    // Capturar FORZANDO MEDIA QUERIES DESKTOP
+                    // Capturar
                     const canvas = await html2canvas(slide, {
                         scale: 1, 
                         useCORS: false, 
@@ -790,7 +831,7 @@
                         logging: false, 
                         width: 1920, 
                         height: 1080, 
-                        windowWidth: 1920,  // Truco: engaña a los @media queries
+                        windowWidth: 1920,  // Fuerza ancho de ventana para evitar media queries de móvil
                         windowHeight: 1080,
                         scrollX: 0, 
                         scrollY: 0, 
@@ -819,11 +860,8 @@
                     s.style.display = idx === originalSlide ? 'flex' : 'none';
                 });
                 
-                // Restaurar viewport
-                document.body.classList.remove('pdf-capture-mode');
-                document.body.style.width = '';
-                document.body.style.overflow = '';
-                
+                // Desactivar modo ghost
+                document.body.classList.remove('generating-pdf');
                 setTimeout(() => location.reload(), 1000);
 
             } catch (err) {
@@ -832,10 +870,7 @@
             } finally {
                 loadingOverlay.style.display = 'none';
                 btnPdf.disabled = false;
-                // Seguridad: restaurar por si falla
-                document.body.classList.remove('pdf-capture-mode');
-                document.body.style.width = '';
-                document.body.style.overflow = '';
+                document.body.classList.remove('generating-pdf');
             }
         }