feat: print-friendly improvements and PDF download modal

Print CSS enhancements:
- Show ALL icons, logos, and badges by default in print (16px section icons, 40px company/project logos)
- Improved header layout with bigger photo (110x147px, 3:4 ratio) positioned on right
- Name and years right-aligned with justified intro text below
- Maintained flex layout for experience/project items to show logos side-by-side
- Compact badge sizing (7pt font) for print

PDF Download UX:
- Replaced direct download links with modal popup
- Shows work-in-progress message directing users to Print Friendly feature
- Bilingual modal (English/Spanish) matching info modal styling
- Modal closable via backdrop click, X button, or Escape key
- Prevents accidental downloads of outdated PDFs

UI improvements:
- Enhanced icon toggle contrast and visibility
- Consistent modal behavior across info and PDF modals

static/css/main.css

@@ -2165,11 +2165,11 @@ a:focus {
     border-bottom: none !important;
 }
 
-/* ========== Menu Controls & Actions (Mobile) ========== */
+/* ========== Menu Controls & Actions (Always Visible) ========== */
-/* Hidden by default, shown only on mobile (< 900px) */
+/* Always visible in hamburger menu at all screen sizes */
 .menu-controls-section,
 .menu-actions-section {
-    display: none;
+    display: block;
     padding: 0.5rem 1.5rem 1rem;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }

static/css/print.css

@@ -192,20 +192,30 @@
     }
 
     /* ===================================
-       HEADER - Reduced Spacing
+       HEADER - Reduced Spacing with Desktop Layout
        =================================== */
     .cv-header {
         page-break-after: avoid;
         margin-bottom: 8mm !important; /* Reduced from 15mm */
     }
 
+    /* Override mobile layout - use positioned layout for print */
     .cv-header-content {
-        gap: 1.5rem !important;
+        display: block !important; /* Use block instead of flex */
+        position: relative !important;
+    }
+
+    .cv-header-left {
+        display: block !important;
+        position: static !important;
+        padding-right: 130px !important; /* Make room for bigger photo on the right */
+        text-align: right !important; /* Right-align name and years */
     }
 
     .cv-name {
         font-size: 20pt;
         margin-bottom: 4pt;
+        text-align: right !important; /* Override mobile center alignment */
     }
 
     .cv-title {
@@ -215,19 +225,25 @@
     .years-experience,
     .cv-experience-years {
         font-size: 10pt;
+        text-align: right !important; /* Override mobile center alignment */
     }
 
     /* ===================================
-       PHOTO - FIXED ASPECT RATIO (3:4 Portrait)
+       PHOTO - FIXED ASPECT RATIO (3:4 Portrait) - RIGHT SIDE
        =================================== */
     .cv-photo {
-        width: 90px !important;
+        width: 110px !important; /* Increased from 90px */
-        height: 120px !important; /* Maintains 3:4 ratio */
+        height: 147px !important; /* Maintains 3:4 ratio (110 * 1.33) */
         object-fit: contain !important; /* Show full photo, no crop */
         border: none !important; /* Remove border */
         box-shadow: none !important;
-        margin: 0px 0px 20px 20px !important;
         page-break-inside: avoid;
+        /* Position photo to the right */
+        position: absolute !important;
+        top: 0 !important;
+        right: 0 !important;
+        margin: 10px 0 0 0!important;
+        max-width: none !important;
     }
 
     .cv-photo img {
@@ -236,13 +252,15 @@
         object-fit: contain !important;
     }
 
-    /* ===================================
+    /* Intro text should be justified and below name/years */
-       INTRO TEXT
-       =================================== */
     .intro-text {
-        font-size: 9pt;
+        font-size: 9pt !important;
-        line-height: 1.5;
+        line-height: 1.5 !important;
+        text-align: justify !important; /* Justified text for print */
         margin-top: 3mm !important;
+        width: 100% !important;
+        padding-right: 0 !important; /* Intro text extends full width below photo */
+        text-align-last: left !important; /* Last line left-aligned */
     }
 
     /* ===================================
@@ -453,6 +471,13 @@
 
     .education-item {
         margin-bottom: 3mm;
+        font-size: 9pt !important; /* Match body text size (equivalent to 0.95rem) */
+        line-height: 1.5 !important;
+    }
+
+    .education-item strong {
+        font-size: 9pt !important; /* Ensure degree title matches body text */
+        font-weight: 600 !important;
     }
 
     /* ===================================

templates/index.html

@@ -169,14 +169,13 @@
 
             <!-- Right: Action buttons -->
             <div class="action-buttons-right">
-                <a
+                <button
                     class="action-btn pdf-btn"
-                    href="/export/pdf?lang={{.Lang}}"
+                    onclick="openPdfModal()"
-                    download
                     aria-label="{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}">
                     <iconify-icon icon="mdi:download" width="18" height="18"></iconify-icon>
                     {{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}
-                </a>
+                </button>
                 <button
                     class="action-btn print-btn"
                     onclick="printFriendly()"
@@ -323,10 +322,10 @@
                     <span>{{if eq .Lang "es"}}Acciones{{else}}Actions{{end}}</span>
                 </div>
 
-                <a class="menu-action-btn" href="/export/pdf?lang={{.Lang}}" download>
+                <button class="menu-action-btn" onclick="openPdfModal()">
                     <iconify-icon icon="mdi:download" width="20" height="20"></iconify-icon>
                     <span>{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}</span>
-                </a>
+                </button>
 
                 <button class="menu-action-btn" onclick="printFriendly()">
                     <iconify-icon icon="mdi:leaf" width="20" height="20"></iconify-icon>
@@ -420,6 +419,30 @@
         </div>
     </div>
 
+    <!-- PDF Export Modal -->
+    <div id="pdf-modal" class="info-modal no-print" onclick="closePdfModalOnBackdrop(event)">
+        <div class="info-modal-content" onclick="event.stopPropagation()">
+            <button class="info-modal-close" onclick="closePdfModal()" aria-label="Close">
+                <iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
+            </button>
+
+            <div class="info-modal-header">
+                <div class="icon" style="font-size: 3rem; margin-bottom: 1rem;">🚧</div>
+                <h2>{{if eq .Lang "es"}}Exportación PDF - En Desarrollo{{else}}PDF Export - Work in Progress{{end}}</h2>
+            </div>
+
+            <div class="info-modal-body">
+                <p class="info-modal-description">
+                    {{if eq .Lang "es"}}
+                        La función de exportación a PDF está siendo mejorada. Por favor, usa el botón <strong>Imprimir Amigable</strong> en su lugar (Ctrl+P o Cmd+P para guardar como PDF).
+                    {{else}}
+                        The PDF export feature is currently being improved. Please use the <strong>Print Friendly</strong> button instead (Ctrl+P or Cmd+P to save as PDF).
+                    {{end}}
+                </p>
+            </div>
+        </div>
+    </div>
+
     <script>
         // Hover-based menu control
         document.addEventListener('DOMContentLoaded', function() {
@@ -849,10 +872,30 @@
             }
         }
 
-        // Close modal with Escape key
+        // PDF Modal Functions
+        function openPdfModal() {
+            const modal = document.getElementById('pdf-modal');
+            modal.classList.add('active');
+            document.body.style.overflow = 'hidden'; // Prevent scrolling when modal is open
+        }
+
+        function closePdfModal() {
+            const modal = document.getElementById('pdf-modal');
+            modal.classList.remove('active');
+            document.body.style.overflow = ''; // Restore scrolling
+        }
+
+        function closePdfModalOnBackdrop(event) {
+            if (event.target.id === 'pdf-modal') {
+                closePdfModal();
+            }
+        }
+
+        // Close modals with Escape key
         document.addEventListener('keydown', function(event) {
             if (event.key === 'Escape') {
                 closeInfoModal();
+                closePdfModal();
             }
         });