diff --git a/src/components/Holos/Canvas.vue b/src/components/Holos/PDF/Canvas.vue
similarity index 73%
rename from src/components/Holos/Canvas.vue
rename to src/components/Holos/PDF/Canvas.vue
index e675454..92c32c1 100644
--- a/src/components/Holos/Canvas.vue
+++ b/src/components/Holos/PDF/Canvas.vue
@@ -31,12 +31,80 @@ const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 });
 const fileInput = ref(null);
 
 /** Propiedades computadas */
-const elementStyles = computed(() => ({
-    left: `${props.element.x}px`,
-    top: `${props.element.y}px`,
-    width: `${props.element.width || 200}px`,
-    height: `${props.element.height || 40}px`
-}));
+const elementStyles = computed(() => {
+    const baseStyles = {
+        left: `${props.element.x}px`,
+        top: `${props.element.y}px`,
+        width: `${props.element.width || 200}px`,
+        height: `${props.element.height || 40}px`
+    };
+
+    // Aplicar estilos de formato para elementos de texto
+    if (props.element.type === 'text' && props.element.formatting) {
+        const formatting = props.element.formatting;
+        
+        if (formatting.fontSize) {
+            baseStyles.fontSize = `${formatting.fontSize}px`;
+        }
+        
+        if (formatting.color) {
+            baseStyles.color = formatting.color;
+        }
+    }
+
+    return baseStyles;
+});
+
+// Propiedades computadas para clases CSS dinámicas
+const textContainerClasses = computed(() => {
+    if (props.element.type !== 'text') return {};
+    
+    const formatting = props.element.formatting || {};
+    
+    return {
+        'font-bold': formatting.bold,
+        'italic': formatting.italic,
+        'underline': formatting.underline,
+        'text-left': !formatting.textAlign || formatting.textAlign === 'left',
+        'text-center': formatting.textAlign === 'center',
+        'text-right': formatting.textAlign === 'right',
+        'justify-start': !formatting.textAlign || formatting.textAlign === 'left',
+        'justify-center': formatting.textAlign === 'center',
+        'justify-end': formatting.textAlign === 'right'
+    };
+});
+
+const inputClasses = computed(() => {
+    if (props.element.type !== 'text') return {};
+    
+    const formatting = props.element.formatting || {};
+    
+    return {
+        'font-bold': formatting.bold,
+        'italic': formatting.italic,
+        'underline': formatting.underline,
+        'text-left': !formatting.textAlign || formatting.textAlign === 'left',
+        'text-center': formatting.textAlign === 'center',
+        'text-right': formatting.textAlign === 'right'
+    };
+});
+
+const inputStyles = computed(() => {
+    if (props.element.type !== 'text') return {};
+    
+    const formatting = props.element.formatting || {};
+    const styles = {};
+    
+    if (formatting.fontSize) {
+        styles.fontSize = `${formatting.fontSize}px`;
+    }
+    
+    if (formatting.color) {
+        styles.color = formatting.color;
+    }
+    
+    return styles;
+});
 
 /** Watchers */
 watch(() => props.isSelected, (selected) => {
@@ -304,7 +372,9 @@ const getMaxHeight = () => {
             'cursor-text': isEditing && (element.type === 'text' || element.type === 'code'),
             'cursor-se-resize': isResizing && resizeDirection === 'corner',
             'cursor-e-resize': isResizing && resizeDirection === 'right',
-            'cursor-s-resize': isResizing && resizeDirection === 'bottom'
+            'cursor-s-resize': isResizing && resizeDirection === 'bottom',
+            'z-50': isSelected,
+            'z-10': !isSelected
         }"
     >
         <!-- Input oculto para selección de archivos -->
@@ -316,10 +386,15 @@ const getMaxHeight = () => {
             class="hidden"
         />
 
-        <!-- Elemento de Texto -->
+        <!-- Elemento de Texto con formato aplicado -->
         <div
             v-if="element.type === 'text'"
-            class="w-full h-full flex items-center px-3 py-2 bg-blue-100 rounded border border-blue-300 text-blue-800 text-sm font-medium dark:bg-blue-900/30 dark:border-blue-600 dark:text-blue-300"
+            class="w-full h-full flex items-center px-3 py-2 bg-white rounded border border-gray-300 shadow-sm dark:bg-white dark:border-gray-400"
+            :class="textContainerClasses"
+            :style="{
+                fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
+                color: element.formatting?.color || '#374151'
+            }"
         >
             <input
                 v-if="isEditing"
@@ -328,14 +403,24 @@ const getMaxHeight = () => {
                 @blur="finishEditing"
                 @keydown="handleKeydown"
                 class="w-full bg-transparent outline-none cursor-text"
+                :class="inputClasses"
+                :style="inputStyles"
                 @mousedown.stop
             />
-            <span v-else class="truncate pointer-events-none">
+            <span 
+                v-else 
+                class="truncate pointer-events-none w-full"
+                :class="textContainerClasses"
+                :style="{
+                    fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
+                    color: element.formatting?.color || '#374151'
+                }"
+            >
                 {{ element.content || 'Nuevo texto' }}
             </span>
         </div>
 
-        <!-- Elemento de Imagen -->
+        <!-- Elemento de Imagen (sin cambios) -->
         <div
             v-else-if="element.type === 'image'"
             class="w-full h-full flex items-center justify-center bg-gray-100 rounded border border-gray-300 dark:bg-primary/10 dark:border-primary/20 overflow-hidden"
@@ -354,34 +439,7 @@ const getMaxHeight = () => {
             </div>
         </div>
 
-        <!-- Elemento de Código -->
-        <div
-            v-else-if="element.type === 'code'"
-            class="w-full h-full bg-gray-900 rounded border overflow-hidden"
-        >
-            <div class="w-full h-6 bg-gray-800 flex items-center px-2 text-xs text-gray-400 border-b border-gray-700">
-                <div class="flex gap-1">
-                    <div class="w-2 h-2 bg-red-500 rounded-full"></div>
-                    <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
-                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
-                </div>
-                <span class="ml-2">{{ element.fileName || 'script.js' }}</span>
-            </div>
-            <div class="p-2 h-[calc(100%-24px)]">
-                <textarea
-                    v-if="isEditing"
-                    ref="editTextarea"
-                    v-model="editValue"
-                    @blur="finishEditing"
-                    @keydown="handleKeydown"
-                    class="w-full h-full bg-transparent text-green-400 text-xs font-mono outline-none resize-none cursor-text"
-                    @mousedown.stop
-                />
-                <pre v-else class="text-green-400 text-xs font-mono overflow-auto h-full pointer-events-none whitespace-pre-wrap">{{ element.content || 'console.log("Hola mundo");' }}</pre>
-            </div>
-        </div>
-
-        <!-- Elemento de Tabla -->
+        <!-- Elemento de Tabla (sin cambios en esta parte) -->
         <div
             v-else-if="element.type === 'table'"
             class="w-full h-full bg-white rounded border overflow-hidden"
@@ -439,10 +497,10 @@ const getMaxHeight = () => {
             </div>
         </div>
 
-        <!-- Controles del elemento -->
+        <!-- Controles del elemento con z-index más alto -->
         <div
             v-if="isSelected && !isEditing"
-            class="absolute -top-8 right-0 flex gap-1 opacity-100 transition-opacity z-10"
+            class="absolute -top-8 right-0 flex gap-1 opacity-100 transition-opacity z-[60]"
         >
             <!-- Indicador de tamaño -->
             <div class="px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-sm pointer-events-none">
@@ -470,31 +528,60 @@ const getMaxHeight = () => {
         </div>
 
         <!-- Controles de redimensionamiento mejorados -->
-        <div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none">
-            <!-- Esquina inferior derecha -->
+        <div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none z-[55]">
+            <!-- Esquina inferior derecha - MÁS GRANDE Y VISIBLE -->
             <div
                 @mousedown.stop="startResize"
-                class="absolute -bottom-1 -right-1 w-2 h-2 bg-blue-500 border border-white cursor-se-resize pointer-events-auto rounded-sm resize-handle-corner"
+                class="absolute -bottom-2 -right-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-se-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
                 title="Redimensionar"
-            ></div>
+            >
+                <div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
+            </div>
 
-            <!-- Lado derecho -->
+            <!-- Lado derecho - MÁS VISIBLE -->
             <div
                 @mousedown.stop="(event) => startResizeEdge(event, 'right')"
-                class="absolute top-1 bottom-1 -right-0.5 w-1 bg-blue-500 opacity-0 cursor-e-resize pointer-events-auto resize-handle-edge"
+                class="absolute top-2 bottom-2 -right-1 w-2 bg-blue-500 cursor-e-resize pointer-events-auto rounded-sm shadow-sm hover:bg-blue-600 transition-all"
                 title="Redimensionar ancho"
-            ></div>
+            >
+                <!-- Indicador visual en el centro -->
+                <div class="absolute top-1/2 left-1/2 w-0.5 h-4 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
+            </div>
 
-            <!-- Lado inferior -->
+            <!-- Lado inferior - MÁS VISIBLE -->
             <div
                 @mousedown.stop="(event) => startResizeEdge(event, 'bottom')"
-                class="absolute -bottom-0.5 left-1 right-1 h-1 bg-blue-500 opacity-0 cursor-s-resize pointer-events-auto resize-handle-edge"
+                class="absolute -bottom-1 left-2 right-2 h-2 bg-blue-500 cursor-s-resize pointer-events-auto rounded-sm shadow-sm hover:bg-blue-600 transition-all"
                 title="Redimensionar alto"
-            ></div>
+            >
+                <!-- Indicador visual en el centro -->
+                <div class="absolute top-1/2 left-1/2 w-4 h-0.5 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
+            </div>
 
-            <!-- Puntos de agarre visuales en los bordes (solo visuales) -->
-            <div class="absolute top-1/2 -right-0.5 w-1 h-6 -translate-y-1/2 bg-blue-500 opacity-30 rounded-full pointer-events-none resize-handle-visual"></div>
-            <div class="absolute -bottom-0.5 left-1/2 w-6 h-1 -translate-x-1/2 bg-blue-500 opacity-30 rounded-full pointer-events-none resize-handle-visual"></div>
+            <!-- Esquinas adicionales para mejor UX -->
+            <div
+                @mousedown.stop="startResize"
+                class="absolute -top-2 -left-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-nw-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
+                title="Redimensionar"
+            >
+                <div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
+            </div>
+            
+            <div
+                @mousedown.stop="startResize"
+                class="absolute -top-2 -right-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-ne-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
+                title="Redimensionar"
+            >
+                <div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
+            </div>
+            
+            <div
+                @mousedown.stop="startResize"
+                class="absolute -bottom-2 -left-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-sw-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
+                title="Redimensionar"
+            >
+                <div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
+            </div>
         </div>
 
         <!-- Indicador de arrastre -->
@@ -509,98 +596,55 @@ const getMaxHeight = () => {
             class="absolute inset-0 bg-green-500 opacity-20 rounded pointer-events-none"
         ></div>
 
-        <!-- Tooltip con instrucciones -->
-        <div
-            v-if="isSelected && !element.content && element.type !== 'image' && !isResizing"
-            class="absolute -bottom-8 left-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10"
-        >
-            {{ element.type === 'text' ? 'Doble clic para editar texto' : 'Doble clic para editar código' }}
-            {{ element.type === 'code' ? ' (Ctrl+Enter para guardar)' : '' }}
-        </div>
-
-        <!-- Tooltip con instrucciones de redimensionamiento -->
-        <div
-            v-if="isSelected && !isEditing && element.type === 'image' && !element.content && !isResizing"  
-            class="absolute -bottom-8 left-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10"
-        >
-            Arrastra las esquinas para redimensionar
-        </div>
-
         <!-- Botón para terminar edición de tabla -->
         <div
             v-if="isEditing && element.type === 'table'"
-            class="absolute -bottom-10 left-0 flex gap-2 z-20"
+            class="absolute -bottom-10 left-0 flex gap-2 z-[60]"
         >
             <button
                 @click="finishEditing"
                 class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded shadow-sm transition-colors"
             >
-                Guardar (Ctrl+Enter)
+                Guardar
             </button>
             <button
                 @click="() => { isEditing = false; editValue = JSON.parse(JSON.stringify(element.content)); }"
                 class="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white text-xs rounded shadow-sm transition-colors"
             >
-                Cancelar (Esc)
+                Cancelar
             </button>
         </div>
     </div>
 </template>
 
 <style scoped>
-/* Estilos para los controles de redimensionamiento mejorados */
+/* Estilos existentes sin cambios... */
 .resize-handle-corner {
     transition: all 0.2s ease;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 
 .resize-handle-corner:hover {
-    background-color: #2563eb;
     transform: scale(1.1);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
 
 .resize-handle-edge {
     transition: all 0.2s ease;
+    opacity: 0.7;
 }
 
 .resize-handle-edge:hover {
-    opacity: 0.7 !important;
-    background-color: #2563eb;
-}
-
-.resize-handle-visual {
-    transition: all 0.2s ease;
-}
-
-/* Efecto hover para los indicadores visuales */
-.group:hover .resize-handle-visual {
-    opacity: 0.6 !important;
+    opacity: 1;
+    transform: scale(1.05);
 }
 
 .group:hover .resize-handle-edge {
-    opacity: 0.4 !important;
+    opacity: 0.8;
 }
 
-/* Prevenir selección de texto durante el redimensionamiento */
 .select-none {
     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
 }
-
-/* Animación suave para los controles */
-@keyframes pulse-resize {
-    0%, 100% {
-        opacity: 0.3;
-    }
-    50% {
-        opacity: 0.7;
-    }
-}
-
-.group:hover .resize-handle-visual {
-    animation: pulse-resize 2s infinite;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/Holos/Draggable.vue b/src/components/Holos/PDF/Draggable.vue
similarity index 100%
rename from src/components/Holos/Draggable.vue
rename to src/components/Holos/PDF/Draggable.vue
diff --git a/src/components/Holos/PDF/PDFViewport.vue b/src/components/Holos/PDF/PDFViewport.vue
new file mode 100644
index 0000000..5ea3d6a
--- /dev/null
+++ b/src/components/Holos/PDF/PDFViewport.vue
@@ -0,0 +1,353 @@
+<script setup>
+import { ref, computed, nextTick, watch } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import PageSizeSelector from '@Holos/PDF/PageSizeSelector.vue';
+
+/** Propiedades */
+const props = defineProps({
+    pages: {
+        type: Array,
+        default: () => [{ id: 1, elements: [] }]
+    },
+    selectedElementId: String,
+    isExporting: Boolean
+});
+
+/** Eventos */
+const emit = defineEmits(['drop', 'dragover', 'click', 'add-page', 'delete-page', 'page-change', 'page-size-change']);
+
+/** Referencias */
+const viewportRef = ref(null);
+const currentPage = ref(1);
+const pageSize = ref('A4');
+
+/** Tamaños de página */
+const pageSizes = {
+    'A4': { width: 794, height: 1123, label: '210 × 297 mm' },
+    'A3': { width: 1123, height: 1587, label: '297 × 420 mm' },
+    'Letter': { width: 816, height: 1056, label: '216 × 279 mm' },
+    'Legal': { width: 816, height: 1344, label: '216 × 356 mm' },
+    'Tabloid': { width: 1056, height: 1632, label: '279 × 432 mm' }
+};
+
+/** Constantes de diseño ajustadas */
+const PAGE_MARGIN = 50;
+const ZOOM_LEVEL = 0.65;
+
+/** Propiedades computadas */
+const currentPageSize = computed(() => pageSizes[pageSize.value]);
+const PAGE_WIDTH = computed(() => currentPageSize.value.width);
+const PAGE_HEIGHT = computed(() => currentPageSize.value.height);
+const scaledPageWidth = computed(() => PAGE_WIDTH.value * ZOOM_LEVEL);
+const scaledPageHeight = computed(() => PAGE_HEIGHT.value * ZOOM_LEVEL);
+const totalPages = computed(() => props.pages.length);
+
+/** Watchers */
+watch(pageSize, (newSize) => {
+    emit('page-size-change', {
+        size: newSize,
+        dimensions: pageSizes[newSize]
+    });
+});
+
+/** Métodos */
+const handleDrop = (event, pageIndex) => {
+    event.preventDefault();
+    
+    const pageElement = event.currentTarget;
+    const rect = pageElement.getBoundingClientRect();
+    
+    const relativeX = (event.clientX - rect.left) / ZOOM_LEVEL;
+    const relativeY = (event.clientY - rect.top) / ZOOM_LEVEL;
+    
+    emit('drop', {
+        originalEvent: event,
+        pageIndex,
+        x: Math.max(0, Math.min(PAGE_WIDTH.value, relativeX)),
+        y: Math.max(0, Math.min(PAGE_HEIGHT.value, relativeY))
+    });
+};
+
+const handleDragOver = (event) => {
+    event.preventDefault();
+    emit('dragover', event);
+};
+
+const handleClick = (event, pageIndex) => {
+    if (event.target.classList.contains('pdf-page')) {
+        emit('click', { originalEvent: event, pageIndex });
+    }
+};
+
+const handleNextPage = () => {
+    if (currentPage.value >= totalPages.value) {
+        addPage();
+    } else {
+        setCurrentPage(currentPage.value + 1);
+    }
+};
+
+const addPage = () => {
+    emit('add-page');
+    // Solo cambiar a la nueva página cuando se agrega una
+    nextTick(() => {
+        const newPageNumber = totalPages.value + 1;
+        setCurrentPage(newPageNumber);
+    });
+};
+
+const deletePage = (pageIndex) => {
+    if (totalPages.value > 1) {
+        emit('delete-page', pageIndex);
+    }
+};
+
+const scrollToPage = (pageNumber) => {
+    if (viewportRef.value) {
+        const pageElement = viewportRef.value.querySelector(`[data-page="${pageNumber}"]`);
+        if (pageElement) {
+            pageElement.scrollIntoView({ 
+                behavior: 'smooth', 
+                block: 'nearest',
+                inline: 'center'
+            });
+        }
+    }
+};
+
+const setCurrentPage = (pageNumber) => {
+    currentPage.value = pageNumber;
+    emit('page-change', pageNumber);
+    
+    // Mantener la página actual centrada
+    nextTick(() => {
+        scrollToPage(pageNumber);
+    });
+};
+
+/** Métodos expuestos */
+defineExpose({
+    scrollToPage,
+    setCurrentPage,
+    PAGE_WIDTH,
+    PAGE_HEIGHT,
+    ZOOM_LEVEL
+});
+</script>
+
+<template>
+    <div class="flex-1 flex flex-col bg-gray-100 dark:bg-primary-d/20">
+        <!-- Toolbar de páginas -->
+        <div class="flex items-center justify-between px-4 py-3 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20">
+            <div class="flex items-center gap-4">
+                <span class="text-sm font-medium text-gray-700 dark:text-primary-dt">
+                    Página {{ currentPage }} de {{ totalPages }}
+                </span>
+                
+                <div class="flex items-center gap-1 border-l border-gray-200 dark:border-primary/20 pl-4">
+                    <button
+                        @click="setCurrentPage(Math.max(1, currentPage - 1))"
+                        :disabled="currentPage <= 1"
+                        class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded hover:bg-gray-100 dark:hover:bg-primary/10"
+                        title="Página anterior"
+                    >
+                        <GoogleIcon name="keyboard_arrow_left" class="text-lg" />
+                    </button>
+                    
+                    <button
+                        @click="handleNextPage"
+                        :disabled="isExporting"
+                        class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded hover:bg-gray-100 dark:hover:bg-primary/10 relative"
+                        :title="currentPage >= totalPages ? 'Crear nueva página' : 'Página siguiente'"
+                    >
+                        <GoogleIcon name="keyboard_arrow_right" class="text-lg" />
+                        <!-- Indicador solo cuando estamos en la última página -->
+                        <GoogleIcon 
+                            v-if="currentPage >= totalPages"
+                            name="add" 
+                            class="absolute -top-1 -right-1 text-xs text-green-500 bg-white rounded-full"
+                        />
+                    </button>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-4">
+                <!-- Selector de tamaño de página -->
+                <PageSizeSelector v-model="pageSize" />
+                
+                <span class="text-xs text-gray-500 dark:text-primary-dt/70 bg-gray-50 dark:bg-primary/10 px-2 py-1 rounded">
+                    {{ Math.round(ZOOM_LEVEL * 100) }}% • {{ currentPageSize.label }}
+                </span>
+                
+                <button
+                    @click="addPage"
+                    :disabled="isExporting"
+                    class="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors disabled:opacity-50 font-medium"
+                >
+                    <GoogleIcon name="add" class="text-sm" />
+                    Nueva Página
+                </button>
+            </div>
+        </div>
+
+        <!-- Viewport de páginas horizontal -->
+        <div
+            ref="viewportRef"
+            class="flex-1 overflow-auto"
+            style="background-color: #f8fafc; background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px); background-size: 24px 24px;"
+        >
+            <!-- Contenedor horizontal centrado -->
+            <div class="flex items-center justify-center min-h-full p-6">
+                <div class="flex items-center gap-8">
+                    <!-- Páginas -->
+                    <div
+                        v-for="(page, pageIndex) in pages"
+                        :key="page.id"
+                        :data-page="pageIndex + 1"
+                        class="relative group flex-shrink-0"
+                    >
+                        <!-- Header de página -->
+                        <div class="flex flex-col items-center mb-3">
+                            <div class="flex items-center gap-3">
+                                <span class="text-sm font-medium text-gray-600 dark:text-primary-dt/80">
+                                    Página {{ pageIndex + 1 }}
+                                </span>
+                                <button
+                                    v-if="totalPages > 1"
+                                    @click="deletePage(pageIndex)"
+                                    :disabled="isExporting"
+                                    class="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-700 disabled:opacity-50 p-1 rounded hover:bg-red-50 transition-all"
+                                    title="Eliminar página"
+                                >
+                                    <GoogleIcon name="delete" class="text-sm" />
+                                </button>
+                            </div>
+                            <span class="text-xs text-gray-400 dark:text-primary-dt/50">
+                                {{ currentPageSize.label }}
+                            </span>
+                        </div>
+                        
+                        <!-- Contenedor de página con sombra -->
+                        <div class="relative">
+                            <!-- Sombra de página -->
+                            <div class="absolute top-2 left-2 w-full h-full bg-gray-400/30 rounded-lg"></div>
+                            
+                            <!-- Página PDF -->
+                            <div
+                                class="pdf-page relative bg-white rounded-lg border border-gray-300 dark:border-primary/20 overflow-hidden"
+                                :class="{
+                                    'ring-2 ring-blue-500 ring-opacity-50 shadow-lg': currentPage === pageIndex + 1,
+                                    'shadow-md hover:shadow-lg': currentPage !== pageIndex + 1,
+                                    'opacity-50': isExporting
+                                }"
+                                :style="{
+                                    width: `${scaledPageWidth}px`,
+                                    height: `${scaledPageHeight}px`
+                                }"
+                                @drop="(e) => handleDrop(e, pageIndex)"
+                                @dragover="handleDragOver"
+                                @click="(e) => handleClick(e, pageIndex)"
+                            >
+                                <!-- Área de contenido con márgenes visuales -->
+                                <div class="relative w-full h-full">
+                                    <!-- Guías de margen -->
+                                    <div
+                                        class="absolute border border-dashed border-blue-300/40 pointer-events-none"
+                                        :style="{
+                                            top: `${PAGE_MARGIN * ZOOM_LEVEL}px`,
+                                            left: `${PAGE_MARGIN * ZOOM_LEVEL}px`,
+                                            width: `${(PAGE_WIDTH - (PAGE_MARGIN * 2)) * ZOOM_LEVEL}px`,
+                                            height: `${(PAGE_HEIGHT - (PAGE_MARGIN * 2)) * ZOOM_LEVEL}px`
+                                        }"
+                                    ></div>
+                                    
+                                    <!-- Elementos de la página con transformación -->
+                                    <div 
+                                        class="absolute inset-0"
+                                        :style="{
+                                            transform: `scale(${ZOOM_LEVEL})`,
+                                            transformOrigin: 'top left',
+                                            width: `${PAGE_WIDTH}px`,
+                                            height: `${PAGE_HEIGHT}px`
+                                        }"
+                                    >
+                                        <slot
+                                            name="elements"
+                                            :page="page"
+                                            :pageIndex="pageIndex"
+                                            :pageWidth="PAGE_WIDTH"
+                                            :pageHeight="PAGE_HEIGHT"
+                                            :zoomLevel="ZOOM_LEVEL"
+                                        />
+                                    </div>
+                                </div>
+                                
+                                <!-- Indicador de página vacía -->
+                                <div
+                                    v-if="page.elements.length === 0"
+                                    class="absolute inset-0 flex items-center justify-center pointer-events-none z-10"
+                                    :style="{ transform: `scale(${1/ZOOM_LEVEL})` }"
+                                >
+                                    <div class="text-center text-gray-400 dark:text-primary-dt/50">
+                                        <GoogleIcon name="description" class="text-4xl mb-2" />
+                                        <p class="text-sm font-medium">Página {{ pageIndex + 1 }}</p>
+                                        <p class="text-xs">Arrastra elementos aquí</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Overlay durante exportación -->
+        <div
+            v-if="isExporting"
+            class="absolute inset-0 bg-white/90 dark:bg-primary-d/90 flex items-center justify-center z-50 backdrop-blur-sm"
+        >
+            <div class="text-center bg-white dark:bg-primary-d rounded-lg p-6 shadow-lg border border-gray-200 dark:border-primary/20">
+                <GoogleIcon name="picture_as_pdf" class="text-5xl text-red-600 dark:text-red-400 animate-pulse mb-3" />
+                <p class="text-lg font-semibold text-gray-900 dark:text-primary-dt mb-1">Generando PDF...</p>
+                <p class="text-sm text-gray-500 dark:text-primary-dt/70">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.pdf-page {
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.pdf-page:hover {
+    transform: translateY(-2px);
+}
+
+.pdf-page.ring-2 {
+    transform: translateY(-4px);
+}
+
+.overflow-auto {
+    scroll-behavior: smooth;
+}
+
+.overflow-auto::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.overflow-auto::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+}
+
+.overflow-auto::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}
+
+.overflow-auto::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Holos/PDF/PageSizeSelector.vue b/src/components/Holos/PDF/PageSizeSelector.vue
new file mode 100644
index 0000000..1ec725e
--- /dev/null
+++ b/src/components/Holos/PDF/PageSizeSelector.vue
@@ -0,0 +1,141 @@
+<script setup>
+import { ref, computed } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: 'A4'
+    }
+});
+
+/** Eventos */
+const emit = defineEmits(['update:modelValue']);
+
+/** Referencias */
+const isOpen = ref(false);
+
+/** Tamaños de página disponibles */
+const pageSizes = [
+    {
+        name: 'A4',
+        label: 'A4 (210 x 297 mm)',
+        width: 794,
+        height: 1123,
+        description: 'Estándar internacional'
+    },
+    {
+        name: 'A3',
+        label: 'A3 (297 x 420 mm)',
+        width: 1123,
+        height: 1587,
+        description: 'Doble de A4'
+    },
+    {
+        name: 'Letter',
+        label: 'Carta (216 x 279 mm)',
+        width: 816,
+        height: 1056,
+        description: 'Estándar US'
+    },
+    {
+        name: 'Legal',
+        label: 'Oficio (216 x 356 mm)', 
+        width: 816,
+        height: 1344,
+        description: 'Legal US'
+    },
+    {
+        name: 'Tabloid',
+        label: 'Tabloide (279 x 432 mm)',
+        width: 1056,
+        height: 1632,
+        description: 'Doble carta'
+    }
+];
+
+/** Propiedades computadas */
+const selectedSize = computed(() => {
+    return pageSizes.find(size => size.name === props.modelValue) || pageSizes[0];
+});
+
+/** Métodos */
+const selectSize = (size) => {
+    emit('update:modelValue', size.name);
+    isOpen.value = false;
+};
+</script>
+
+<template>
+    <div class="relative">
+        <!-- Selector principal -->
+        <button
+            @click="isOpen = !isOpen"
+            class="flex items-center gap-2 px-3 py-2 text-sm bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-md hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
+        >
+            <GoogleIcon name="aspect_ratio" class="text-gray-500 dark:text-primary-dt/70" />
+            <span class="text-gray-700 dark:text-primary-dt">{{ selectedSize.name }}</span>
+            <GoogleIcon 
+                name="expand_more" 
+                class="text-gray-400 dark:text-primary-dt/50 transition-transform"
+                :class="{ 'rotate-180': isOpen }"
+            />
+        </button>
+
+        <!-- Dropdown -->
+        <div
+            v-if="isOpen"
+            @click.away="isOpen = false"
+            class="absolute top-full left-0 mt-1 w-72 bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-lg shadow-lg z-50 py-2"
+        >
+            <div class="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider border-b border-gray-100 dark:border-primary/20">
+                Tamaños de página
+            </div>
+            
+            <div class="max-h-64 overflow-y-auto">
+                <button
+                    v-for="size in pageSizes"
+                    :key="size.name"
+                    @click="selectSize(size)"
+                    class="w-full flex items-center gap-3 px-3 py-3 hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors text-left"
+                    :class="{
+                        'bg-blue-50 dark:bg-blue-900/20': selectedSize.name === size.name
+                    }"
+                >
+                    <div class="flex-shrink-0">
+                        <div 
+                            class="w-8 h-10 border border-gray-300 dark:border-primary/30 rounded-sm bg-white dark:bg-primary-d flex items-center justify-center"
+                            :class="{
+                                'border-blue-500 dark:border-blue-400': selectedSize.name === size.name
+                            }"
+                        >
+                            <div 
+                                class="bg-gray-200 dark:bg-primary/20 rounded-sm"
+                                :style="{
+                                    width: `${Math.min(20, (size.width / size.height) * 32)}px`,
+                                    height: `${Math.min(32, (size.height / size.width) * 20)}px`
+                                }"
+                                :class="{
+                                    'bg-blue-200 dark:bg-blue-800': selectedSize.name === size.name
+                                }"
+                            ></div>
+                        </div>
+                    </div>
+                    
+                    <div class="flex-1 min-w-0">
+                        <div class="font-medium text-gray-900 dark:text-primary-dt">{{ size.label }}</div>
+                        <div class="text-xs text-gray-500 dark:text-primary-dt/70">{{ size.description }}</div>
+                        <div class="text-xs text-gray-400 dark:text-primary-dt/50 mt-1">
+                            {{ size.width }} x {{ size.height }} px
+                        </div>
+                    </div>
+                    
+                    <div v-if="selectedSize.name === size.name" class="flex-shrink-0">
+                        <GoogleIcon name="check" class="text-blue-500 dark:text-blue-400" />
+                    </div>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/components/Holos/PDF/TextFormatter.vue b/src/components/Holos/PDF/TextFormatter.vue
new file mode 100644
index 0000000..eec22f7
--- /dev/null
+++ b/src/components/Holos/PDF/TextFormatter.vue
@@ -0,0 +1,233 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const props = defineProps({
+    element: {
+        type: Object,
+        default: null
+    },
+    visible: {
+        type: Boolean,
+        default: false
+    }
+});
+
+/** Eventos */
+const emit = defineEmits(['update']);
+
+/** Propiedades computadas */
+const formatting = computed(() => props.element?.formatting || {});
+const hasTextElement = computed(() => props.element?.type === 'text');
+
+/** Métodos */
+const toggleBold = () => {
+    if (!hasTextElement.value) return;
+    updateFormatting('bold', !formatting.value.bold);
+};
+
+const toggleItalic = () => {
+    if (!hasTextElement.value) return;
+    updateFormatting('italic', !formatting.value.italic);
+};
+
+const toggleUnderline = () => {
+    if (!hasTextElement.value) return;
+    updateFormatting('underline', !formatting.value.underline);
+};
+
+const updateFontSize = (size) => {
+    if (!hasTextElement.value) return;
+    updateFormatting('fontSize', size);
+};
+
+const updateTextAlign = (align) => {
+    if (!hasTextElement.value) return;
+    updateFormatting('textAlign', align);
+};
+
+const updateColor = (color) => {
+    if (!hasTextElement.value) return;
+    updateFormatting('color', color);
+};
+
+const updateFormatting = (key, value) => {
+    const newFormatting = { ...formatting.value, [key]: value };
+    emit('update', {
+        id: props.element.id,
+        formatting: newFormatting
+    });
+};
+
+/** Colores predefinidos */
+const predefinedColors = [
+    '#000000', '#333333', '#666666', '#999999',
+    '#FF0000', '#00FF00', '#0000FF', '#FFFF00',
+    '#FF00FF', '#00FFFF', '#FFA500', '#800080'
+];
+
+/** Tamaños de fuente */
+const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
+</script>
+
+<template>
+    <div 
+        v-if="visible && hasTextElement"
+        class="flex items-center gap-6 px-4 py-2 bg-gray-50 dark:bg-primary-d/50 border-b border-gray-200 dark:border-primary/20"
+    >
+        <!-- Estilo de texto -->
+        <div class="flex items-center gap-2">
+            <span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Estilo:</span>
+            <div class="flex gap-1">
+                <button
+                    @click="toggleBold"
+                    :class="[
+                        'w-8 h-8 rounded flex items-center justify-center text-sm font-bold transition-colors',
+                        formatting.bold
+                            ? 'bg-blue-500 text-white shadow-sm'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
+                    ]"
+                    title="Negrita (Ctrl+B)"
+                >
+                    B
+                </button>
+                
+                <button
+                    @click="toggleItalic"
+                    :class="[
+                        'w-8 h-8 rounded flex items-center justify-center text-sm italic transition-colors',
+                        formatting.italic
+                            ? 'bg-blue-500 text-white shadow-sm'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
+                    ]"
+                    title="Cursiva (Ctrl+I)"
+                >
+                    I
+                </button>
+                
+                <button
+                    @click="toggleUnderline"
+                    :class="[
+                        'w-8 h-8 rounded flex items-center justify-center text-sm underline transition-colors',
+                        formatting.underline
+                            ? 'bg-blue-500 text-white shadow-sm'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
+                    ]"
+                    title="Subrayado (Ctrl+U)"
+                >
+                    U
+                </button>
+            </div>
+        </div>
+
+        <!-- Separador -->
+        <div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
+
+        <!-- Tamaño de fuente -->
+        <div class="flex items-center gap-2">
+            <span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Tamaño:</span>
+            <select
+                :value="formatting.fontSize || 12"
+                @change="updateFontSize(parseInt($event.target.value))"
+                class="px-2 py-1 text-sm border border-gray-200 rounded bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            >
+                <option v-for="size in fontSizes" :key="size" :value="size">
+                    {{ size }}px
+                </option>
+            </select>
+        </div>
+
+        <!-- Separador -->
+        <div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
+
+        <!-- Alineación -->
+        <div class="flex items-center gap-2">
+            <span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Alinear:</span>
+            <div class="flex gap-1">
+                <button
+                    @click="updateTextAlign('left')"
+                    :class="[
+                        'w-8 h-8 rounded flex items-center justify-center transition-colors',
+                        (formatting.textAlign || 'left') === 'left'
+                            ? 'bg-blue-500 text-white shadow-sm'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
+                    ]"
+                    title="Alinear izquierda"
+                >
+                    <GoogleIcon name="format_align_left" class="text-sm" />
+                </button>
+                
+                <button
+                    @click="updateTextAlign('center')"
+                    :class="[
+                        'w-8 h-8 rounded flex items-center justify-center transition-colors',
+                        formatting.textAlign === 'center'
+                            ? 'bg-blue-500 text-white shadow-sm'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
+                    ]"
+                    title="Centrar"
+                >
+                    <GoogleIcon name="format_align_center" class="text-sm" />
+                </button>
+                
+                <button
+                    @click="updateTextAlign('right')"
+                    :class="[
+                        'w-8 h-8 rounded flex items-center justify-center transition-colors',
+                        formatting.textAlign === 'right'
+                            ? 'bg-blue-500 text-white shadow-sm'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
+                    ]"
+                    title="Alinear derecha"
+                >
+                    <GoogleIcon name="format_align_right" class="text-sm" />
+                </button>
+            </div>
+        </div>
+
+        <!-- Separador -->
+        <div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
+
+        <!-- Color de texto -->
+        <div class="flex items-center gap-2">
+            <span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Color:</span>
+            <div class="flex items-center gap-2">
+                <!-- Color actual -->
+                <div 
+                    class="w-8 h-8 rounded border-2 border-gray-300 cursor-pointer relative overflow-hidden"
+                    :style="{ backgroundColor: formatting.color || '#000000' }"
+                    title="Color actual"
+                >
+                    <input
+                        type="color"
+                        :value="formatting.color || '#000000'"
+                        @input="updateColor($event.target.value)"
+                        class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                    />
+                </div>
+                
+                <!-- Colores rápidos -->
+                <div class="flex gap-1">
+                    <button
+                        v-for="color in predefinedColors.slice(0, 6)"
+                        :key="color"
+                        @click="updateColor(color)"
+                        class="w-6 h-6 rounded border border-gray-300 hover:scale-110 transition-transform"
+                        :class="{
+                            'ring-2 ring-blue-500': (formatting.color || '#000000') === color
+                        }"
+                        :style="{ backgroundColor: color }"
+                        :title="color"
+                    ></button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Información del elemento -->
+        <div class="ml-auto flex items-center gap-2 text-xs text-gray-500 dark:text-primary-dt/70">
+            <GoogleIcon name="text_fields" class="text-sm" />
+            <span>Elemento de texto seleccionado</span>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/components/Holos/PDFViewport.vue b/src/components/Holos/PDFViewport.vue
deleted file mode 100644
index 967ca1b..0000000
--- a/src/components/Holos/PDFViewport.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<script setup>
-import { ref, computed, nextTick } from 'vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Propiedades */
-const props = defineProps({
-    pages: {
-        type: Array,
-        default: () => [{ id: 1, elements: [] }]
-    },
-    selectedElementId: String,
-    isExporting: Boolean
-});
-
-/** Eventos */
-const emit = defineEmits(['drop', 'dragover', 'click', 'add-page', 'delete-page', 'page-change']);
-
-/** Referencias */
-const viewportRef = ref(null);
-const currentPage = ref(1);
-
-/** Constantes de diseño */
-const PAGE_WIDTH = 794; // A4 width in pixels (210mm @ 96dpi * 3.78)
-const PAGE_HEIGHT = 1123; // A4 height in pixels (297mm @ 96dpi * 3.78)
-const PAGE_MARGIN = 40;
-const ZOOM_LEVEL = 0.8; // Factor de escala para visualización
-
-/** Propiedades computadas */
-const scaledPageWidth = computed(() => PAGE_WIDTH * ZOOM_LEVEL);
-const scaledPageHeight = computed(() => PAGE_HEIGHT * ZOOM_LEVEL);
-const totalPages = computed(() => props.pages.length);
-
-/** Métodos */
-const handleDrop = (event, pageIndex) => {
-    event.preventDefault();
-    
-    const pageElement = event.currentTarget;
-    const rect = pageElement.getBoundingClientRect();
-    
-    // Calcular posición relativa a la página específica
-    const relativeX = (event.clientX - rect.left) / ZOOM_LEVEL;
-    const relativeY = (event.clientY - rect.top) / ZOOM_LEVEL;
-    
-    emit('drop', {
-        originalEvent: event,
-        pageIndex,
-        x: Math.max(PAGE_MARGIN, Math.min(PAGE_WIDTH - PAGE_MARGIN, relativeX)),
-        y: Math.max(PAGE_MARGIN, Math.min(PAGE_HEIGHT - PAGE_MARGIN, relativeY))
-    });
-};
-
-const handleDragOver = (event) => {
-    event.preventDefault();
-    emit('dragover', event);
-};
-
-const handleClick = (event, pageIndex) => {
-    if (event.target.classList.contains('pdf-page')) {
-        emit('click', { originalEvent: event, pageIndex });
-    }
-};
-
-const addPage = () => {
-    emit('add-page');
-    nextTick(() => {
-        scrollToPage(totalPages.value);
-    });
-};
-
-const deletePage = (pageIndex) => {
-    if (totalPages.value > 1) {
-        emit('delete-page', pageIndex);
-    }
-};
-
-const scrollToPage = (pageNumber) => {
-    if (viewportRef.value) {
-        const pageElement = viewportRef.value.querySelector(`[data-page="${pageNumber}"]`);
-        if (pageElement) {
-            pageElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-    }
-};
-
-const setCurrentPage = (pageNumber) => {
-    currentPage.value = pageNumber;
-    emit('page-change', pageNumber);
-};
-
-/** Métodos expuestos */
-defineExpose({
-    scrollToPage,
-    setCurrentPage,
-    PAGE_WIDTH,
-    PAGE_HEIGHT,
-    ZOOM_LEVEL
-});
-</script>
-
-<template>
-    <div class="flex-1 flex flex-col bg-gray-100 dark:bg-primary-d/20">
-        <!-- Toolbar de páginas -->
-        <div class="flex items-center justify-between px-4 py-2 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20">
-            <div class="flex items-center gap-3">
-                <span class="text-sm text-gray-600 dark:text-primary-dt">
-                    Página {{ currentPage }} de {{ totalPages }}
-                </span>
-                
-                <div class="flex items-center gap-1">
-                    <button
-                        @click="setCurrentPage(Math.max(1, currentPage - 1))"
-                        :disabled="currentPage <= 1"
-                        class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt"
-                    >
-                        <GoogleIcon name="keyboard_arrow_left" class="text-lg" />
-                    </button>
-                    
-                    <button
-                        @click="setCurrentPage(Math.min(totalPages, currentPage + 1))"
-                        :disabled="currentPage >= totalPages"
-                        class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt"
-                    >
-                        <GoogleIcon name="keyboard_arrow_right" class="text-lg" />
-                    </button>
-                </div>
-            </div>
-
-            <div class="flex items-center gap-2">
-                
-                <button
-                    @click="addPage"
-                    :disabled="isExporting"
-                    class="flex items-center gap-1 px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors disabled:opacity-50"
-                >
-                    <GoogleIcon name="add" class="text-sm" />
-                    Nueva Página
-                </button>
-            </div>
-        </div>
-
-        <!-- Viewport de páginas -->
-        <div
-            ref="viewportRef"
-            class="flex-1 overflow-auto p-8"
-            style="background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"
-        >
-            <div class="flex flex-col items-center gap-8">
-                <!-- Páginas -->
-                <div
-                    v-for="(page, pageIndex) in pages"
-                    :key="page.id"
-                    :data-page="pageIndex + 1"
-                    class="relative"
-                    @mouseenter="setCurrentPage(pageIndex + 1)"
-                >
-                    <!-- Número de página -->
-                    <div class="absolute -top-6 left-0 flex items-center gap-2 text-xs text-gray-500 dark:text-primary-dt/70">
-                        <span>Página {{ pageIndex + 1 }}</span>
-                        
-                        <button
-                            v-if="totalPages > 1"
-                            @click="deletePage(pageIndex)"
-                            :disabled="isExporting"
-                            class="text-red-500 hover:text-red-700 disabled:opacity-50"
-                            title="Eliminar página"
-                        >
-                            <GoogleIcon name="delete" class="text-sm" />
-                        </button>
-                    </div>
-                    
-                    <!-- Página PDF -->
-                    <div
-                        class="pdf-page relative bg-white rounded-lg shadow-lg border border-gray-300 dark:border-primary/20"
-                        :class="{
-                            'ring-2 ring-blue-500': currentPage === pageIndex + 1,
-                            'opacity-50': isExporting
-                        }"
-                        :style="{
-                            width: `${scaledPageWidth}px`,
-                            height: `${scaledPageHeight}px`,
-                            transform: `scale(${ZOOM_LEVEL})`,
-                            transformOrigin: 'top left'
-                        }"
-                        @drop="(e) => handleDrop(e, pageIndex)"
-                        @dragover="handleDragOver"
-                        @click="(e) => handleClick(e, pageIndex)"
-                    >
-                        <!-- Márgenes visuales -->
-                        <div
-                            class="absolute border border-dashed border-gray-300 dark:border-primary/30 pointer-events-none"
-                            :style="{
-                                top: `${PAGE_MARGIN}px`,
-                                left: `${PAGE_MARGIN}px`,
-                                width: `${PAGE_WIDTH - (PAGE_MARGIN * 2)}px`,
-                                height: `${PAGE_HEIGHT - (PAGE_MARGIN * 2)}px`
-                            }"
-                        ></div>
-                        
-                        <!-- Elementos de la página -->
-                        <slot
-                            name="elements"
-                            :page="page"
-                            :pageIndex="pageIndex"
-                            :pageWidth="PAGE_WIDTH"
-                            :pageHeight="PAGE_HEIGHT"
-                        />
-                        
-                        <!-- Indicador de página vacía -->
-                        <div
-                            v-if="page.elements.length === 0"
-                            class="absolute inset-0 flex items-center justify-center pointer-events-none"
-                        >
-                            <div class="text-center text-gray-400 dark:text-primary-dt/50">
-                                <GoogleIcon name="description" class="text-4xl mb-2" />
-                                <p class="text-sm">Página {{ pageIndex + 1 }}</p>
-                                <p class="text-xs">Arrastra elementos aquí</p>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Regla inferior (tamaño de referencia) -->
-                    <div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/50 text-center">
-                        210 × 297 mm (A4)
-                    </div>
-                </div>
-                
-                <!-- Botón para agregar página al final -->
-                <button
-                    @click="addPage"
-                    :disabled="isExporting"
-                    class="flex flex-col items-center justify-center w-40 h-20 border-2 border-dashed border-gray-300 dark:border-primary/30 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors disabled:opacity-50"
-                >
-                    <GoogleIcon name="add" class="text-2xl text-gray-400 dark:text-primary-dt/50" />
-                    <span class="text-xs text-gray-500 dark:text-primary-dt/70 mt-1">Nueva Página</span>
-                </button>
-            </div>
-        </div>
-
-        <!-- Overlay durante exportación -->
-        <div
-            v-if="isExporting"
-            class="absolute inset-0 bg-white/80 dark:bg-primary-d/80 flex items-center justify-center z-50"
-        >
-            <div class="text-center">
-                <GoogleIcon name="picture_as_pdf" class="text-4xl text-red-600 dark:text-red-400 animate-pulse mb-2" />
-                <p class="text-sm font-medium text-gray-900 dark:text-primary-dt">Generando PDF...</p>
-                <p class="text-xs text-gray-500 dark:text-primary-dt/70">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.pdf-page {
-    transition: all 0.2s ease;
-}
-
-.pdf-page:hover {
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/Maquetador/Index.vue b/src/pages/Maquetador/Index.vue
index a9f2790..af51117 100644
--- a/src/pages/Maquetador/Index.vue
+++ b/src/pages/Maquetador/Index.vue
@@ -1,10 +1,11 @@
 <script setup>
-import { ref, nextTick, onMounted, computed } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
 import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Draggable from '@Holos/Draggable.vue';
-import CanvasElement from '@Holos/Canvas.vue';
-import PDFViewport from '@Holos/PDFViewport.vue';
+import Draggable from '@Holos/PDF/Draggable.vue';
+import CanvasElement from '@Holos/PDF/Canvas.vue';
+import PDFViewport from '@Holos/PDF/PDFViewport.vue';
+import TextFormatter from '@Holos/PDF/TextFormatter.vue';
 
 /** Estado reactivo */
 const pages = ref([{ id: 1, elements: [] }]);
@@ -13,10 +14,61 @@ const elementCounter = ref(0);
 const documentTitle = ref('Documento sin título');
 const isExporting = ref(false);
 const currentPage = ref(1);
+const pageIdCounter = ref(1); // <-- Agregar contador separado para páginas
+
+/** Estado para tamaño de página */
+const currentPageSize = ref({
+    width: 794,  // A4 por defecto
+    height: 1123
+});
+
+/** Manejar cambio de tamaño de página */
+const handlePageSizeChange = (sizeData) => {
+    currentPageSize.value = sizeData.dimensions;
+    // Aquí podrías ajustar elementos existentes si es necesario
+    window.Notify.info(`Tamaño de página cambiado a ${sizeData.size}`);
+};
+
+// Actualizar el método moveElement para usar el tamaño dinámico
+const moveElement = (moveData) => {
+    const element = allElements.value.find(el => el.id === moveData.id);
+    if (element) {
+        element.x = Math.max(0, Math.min(currentPageSize.value.width - (element.width || 200), moveData.x));
+        element.y = Math.max(0, Math.min(currentPageSize.value.height - (element.height || 40), moveData.y));
+    }
+};
 
 /** Referencias */
 const viewportRef = ref(null);
 
+/** Referencias adicionales */
+const textFormatterElement = ref(null);
+const showTextFormatter = ref(false);
+
+const selectElement = (elementId) => {
+    selectedElementId.value = elementId;
+    const selectedEl = allElements.value.find(el => el.id === elementId);
+    showTextFormatter.value = selectedEl?.type === 'text';
+    textFormatterElement.value = selectedEl;
+};
+
+const updateElement = (update) => {
+    const element = allElements.value.find(el => el.id === update.id);
+    if (element) {
+        Object.assign(element, update);
+        // Si se actualiza el formato, actualizar la referencia
+        if (update.formatting && textFormatterElement.value?.id === update.id) {
+            textFormatterElement.value = { ...element };
+        }
+    }
+};
+
+const handleCanvasClick = (clickData) => {
+    selectedElementId.value = null;
+    showTextFormatter.value = false;
+    textFormatterElement.value = null;
+};
+
 /** Tipos de elementos disponibles */
 const availableElements = [
     {
@@ -109,14 +161,6 @@ const handleDragOver = (event) => {
     event.preventDefault();
 };
 
-const handleCanvasClick = (clickData) => {
-    selectedElementId.value = null;
-};
-
-const selectElement = (elementId) => {
-    selectedElementId.value = elementId;
-};
-
 const deleteElement = (elementId) => {
     const index = allElements.value.findIndex(el => el.id === elementId);
     if (index !== -1) {
@@ -128,26 +172,11 @@ const deleteElement = (elementId) => {
     }
 };
 
-const updateElement = (update) => {
-    const element = allElements.value.find(el => el.id === update.id);
-    if (element) {
-        Object.assign(element, update);
-    }
-};
-
-const moveElement = (moveData) => {
-    const element = allElements.value.find(el => el.id === moveData.id);
-    if (element) {
-        element.x = moveData.x;
-        element.y = moveData.y;
-    }
-};
-
 /** Paginación */
 const addPage = () => {
-    const newPageId = Math.max(...pages.value.map(p => p.id)) + 1;
+    pageIdCounter.value++; // <-- Incrementar contador independiente
     pages.value.push({
-        id: newPageId,
+        id: pageIdCounter.value,
         elements: []
     });
 };
@@ -211,249 +240,215 @@ const exportPDF = async () => {
         isExporting.value = true;
         window.Notify.info('Generando PDF...');
 
-        // Crear un nuevo documento PDF
+        // Crear un nuevo documento PDF con el tamaño de página seleccionado
         const pdfDoc = await PDFDocument.create();
-        let currentPage = pdfDoc.addPage([595.28, 841.89]); // A4 size in points
-        let currentPageHeight = 841.89;
+        
+        // Convertir dimensiones de pixels a puntos (1 px = 0.75 puntos)
+        const pageWidthPoints = currentPageSize.value.width * 0.75;
+        const pageHeightPoints = currentPageSize.value.height * 0.75;
+        
+        let currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
+        let currentPageHeight = pageHeightPoints;
         let yOffset = 50; // Margen superior
 
         // Obtener fuentes
         const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
         const courierFont = await pdfDoc.embedFont(StandardFonts.Courier);
 
-        // Ordenar elementos por posición (de arriba hacia abajo, de izquierda a derecha)
-        const sortedElements = [...allElements.value].sort((a, b) => {
-            if (Math.abs(a.y - b.y) < 20) {
-                return a.x - b.x; // Si están en la misma línea, ordenar por X
-            }
-            return a.y - b.y; // Ordenar por Y
-        });
-
-        // Procesar elementos
-        for (const element of sortedElements) {
-            // Calcular posición en el PDF
-            const x = Math.max(50, Math.min(500, (element.x * 0.75) + 50)); // Convertir y limitar X
-            let y = currentPageHeight - yOffset - (element.y * 0.75); // Convertir Y
-
-            // Verificar si necesitamos una nueva página
-            const elementHeight = getElementHeight(element);
-            if (y - elementHeight < 50) {
-                currentPage = pdfDoc.addPage([595.28, 841.89]);
-                currentPageHeight = 841.89;
+        // Procesar páginas del maquetador
+        for (let pageIndex = 0; pageIndex < pages.value.length; pageIndex++) {
+            const page = pages.value[pageIndex];
+            
+            // Crear nueva página PDF si no es la primera
+            if (pageIndex > 0) {
+                currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
+                currentPageHeight = pageHeightPoints;
                 yOffset = 50;
-                y = currentPageHeight - yOffset;
             }
 
-            switch (element.type) {
-                case 'text':
-                    if (element.content) {
-                        // Dividir texto largo en líneas
-                        const words = element.content.split(' ');
-                        const lines = [];
-                        let currentLine = '';
-                        const maxWidth = Math.min(400, (element.width || 200) * 0.75);
+            // Ordenar elementos de esta página por posición
+            const sortedElements = [...page.elements].sort((a, b) => {
+                if (Math.abs(a.y - b.y) < 20) {
+                    return a.x - b.x; // Si están en la misma línea, ordenar por X
+                }
+                return a.y - b.y; // Ordenar por Y
+            });
 
-                        for (const word of words) {
-                            const testLine = currentLine + (currentLine ? ' ' : '') + word;
-                            const testWidth = helveticaFont.widthOfTextAtSize(testLine, 12);
-                            
-                            if (testWidth <= maxWidth) {
-                                currentLine = testLine;
-                            } else {
-                                if (currentLine) lines.push(currentLine);
-                                currentLine = word;
+            // Procesar elementos de la página
+            for (const element of sortedElements) {
+                // Calcular posición en el PDF manteniendo proporciones
+                const scaleX = pageWidthPoints / currentPageSize.value.width;
+                const scaleY = pageHeightPoints / currentPageSize.value.height;
+                
+                const x = Math.max(50, element.x * scaleX);
+                const y = currentPageHeight - (element.y * scaleY) - 50; // Margen superior
+
+                switch (element.type) {
+                    case 'text':
+                        if (element.content) {
+                            // Dividir texto largo en líneas
+                            const words = element.content.split(' ');
+                            const lines = [];
+                            let currentLine = '';
+                            const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
+
+                            for (const word of words) {
+                                const testLine = currentLine + (currentLine ? ' ' : '') + word;
+                                const testWidth = helveticaFont.widthOfTextAtSize(testLine, 12);
+                                
+                                if (testWidth <= maxWidth) {
+                                    currentLine = testLine;
+                                } else {
+                                    if (currentLine) lines.push(currentLine);
+                                    currentLine = word;
+                                }
                             }
+                            if (currentLine) lines.push(currentLine);
+
+                            // Dibujar cada línea
+                            lines.forEach((line, index) => {
+                                currentPDFPage.drawText(line, {
+                                    x: x,
+                                    y: y - (index * 15),
+                                    size: 12,
+                                    font: helveticaFont,
+                                    color: rgb(0, 0, 0),
+                                });
+                            });
                         }
-                        if (currentLine) lines.push(currentLine);
+                        break;
 
-                        // Dibujar cada línea
-                        lines.forEach((line, index) => {
-                            currentPage.drawText(line, {
-                                x: x,
-                                y: y - (index * 15),
-                                size: 12,
-                                font: helveticaFont,
-                                color: rgb(0, 0, 0),
-                            });
-                        });
-
-                        yOffset += lines.length * 15 + 10;
-                    }
-                    break;
-
-                case 'code':
-                    if (element.content) {
-                        // Dibujar fondo para el código
-                        const codeLines = element.content.split('\n');
-                        const codeWidth = Math.min(450, (element.width || 300) * 0.75);
-                        const codeHeight = (codeLines.length * 12) + 20;
-
-                        currentPage.drawRectangle({
-                            x: x - 10,
-                            y: y - codeHeight,
-                            width: codeWidth,
-                            height: codeHeight,
-                            color: rgb(0.95, 0.95, 0.95),
-                        });
-
-                        // Dibujar código
-                        codeLines.forEach((line, index) => {
-                            // Truncar líneas muy largas
-                            const maxChars = Math.floor(codeWidth / 6);
-                            const displayLine = line.length > maxChars ? 
-                                line.substring(0, maxChars - 3) + '...' : line;
-
-                            currentPage.drawText(displayLine, {
-                                x: x - 5,
-                                y: y - 15 - (index * 12),
-                                size: 9,
-                                font: courierFont,
-                                color: rgb(0, 0, 0),
-                            });
-                        });
-
-                        yOffset += codeHeight + 20;
-                    }
-                    break;
-
-                case 'image':
-                    if (element.content && element.content.startsWith('data:image')) {
-                        try {
-                            // Convertir base64 a bytes
-                            const base64Data = element.content.split(',')[1];
-                            const imageBytes = Uint8Array.from(
-                                atob(base64Data), 
-                                c => c.charCodeAt(0)
-                            );
-                            
-                            let image;
-                            if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) {
-                                image = await pdfDoc.embedJpg(imageBytes);
-                            } else if (element.content.includes('image/png')) {
-                                image = await pdfDoc.embedPng(imageBytes);
-                            }
-
-                            if (image) {
-                                // Calcular dimensiones manteniendo proporción
-                                const maxWidth = Math.min(400, (element.width || 200) * 0.75);
-                                const maxHeight = Math.min(300, (element.height || 150) * 0.75);
+                    case 'image':
+                        if (element.content && element.content.startsWith('data:image')) {
+                            try {
+                                // Convertir base64 a bytes
+                                const base64Data = element.content.split(',')[1];
+                                const imageBytes = Uint8Array.from(
+                                    atob(base64Data), 
+                                    c => c.charCodeAt(0)
+                                );
                                 
-                                const imageAspectRatio = image.width / image.height;
-                                let displayWidth = maxWidth;
-                                let displayHeight = maxWidth / imageAspectRatio;
-                                
-                                if (displayHeight > maxHeight) {
-                                    displayHeight = maxHeight;
-                                    displayWidth = maxHeight * imageAspectRatio;
+                                let image;
+                                if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) {
+                                    image = await pdfDoc.embedJpg(imageBytes);
+                                } else if (element.content.includes('image/png')) {
+                                    image = await pdfDoc.embedPng(imageBytes);
                                 }
 
-                                currentPage.drawImage(image, {
+                                if (image) {
+                                    // Calcular dimensiones manteniendo proporción y escala
+                                    const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
+                                    const maxHeight = Math.min(300, (element.height || 150) * scaleY);
+                                    
+                                    const imageAspectRatio = image.width / image.height;
+                                    let displayWidth = maxWidth;
+                                    let displayHeight = maxWidth / imageAspectRatio;
+                                    
+                                    if (displayHeight > maxHeight) {
+                                        displayHeight = maxHeight;
+                                        displayWidth = maxHeight * imageAspectRatio;
+                                    }
+
+                                    currentPDFPage.drawImage(image, {
+                                        x: x,
+                                        y: y - displayHeight,
+                                        width: displayWidth,
+                                        height: displayHeight,
+                                    });
+                                }
+                            } catch (imageError) {
+                                console.warn('Error al procesar imagen:', imageError);
+                                // Dibujar placeholder para imagen
+                                currentPDFPage.drawRectangle({
                                     x: x,
-                                    y: y - displayHeight,
-                                    width: displayWidth,
-                                    height: displayHeight,
+                                    y: y - 60,
+                                    width: 100 * scaleX,
+                                    height: 60 * scaleY,
+                                    borderColor: rgb(0.7, 0.7, 0.7),
+                                    borderWidth: 1,
                                 });
 
-                                yOffset += displayHeight + 20;
+                                currentPDFPage.drawText('[Imagen no disponible]', {
+                                    x: x + 5,
+                                    y: y - 35,
+                                    size: 10,
+                                    font: helveticaFont,
+                                    color: rgb(0.7, 0.7, 0.7),
+                                });
                             }
-                        } catch (imageError) {
-                            console.warn('Error al procesar imagen:', imageError);
-                            // Dibujar placeholder para imagen
-                            currentPage.drawRectangle({
+                        } else {
+                            // Placeholder para imagen vacía
+                            currentPDFPage.drawRectangle({
                                 x: x,
                                 y: y - 60,
-                                width: 100,
-                                height: 60,
+                                width: 100 * scaleX,
+                                height: 60 * scaleY,
                                 borderColor: rgb(0.7, 0.7, 0.7),
                                 borderWidth: 1,
+                                borderDashArray: [3, 3],
                             });
 
-                            currentPage.drawText('[Imagen no disponible]', {
-                                x: x + 5,
+                            currentPDFPage.drawText('[Imagen]', {
+                                x: x + 25,
                                 y: y - 35,
                                 size: 10,
                                 font: helveticaFont,
                                 color: rgb(0.7, 0.7, 0.7),
                             });
-
-                            yOffset += 80;
                         }
-                    } else {
-                        // Placeholder para imagen vacía
-                        currentPage.drawRectangle({
-                            x: x,
-                            y: y - 60,
-                            width: 100,
-                            height: 60,
-                            borderColor: rgb(0.7, 0.7, 0.7),
-                            borderWidth: 1,
-                            borderDashArray: [3, 3],
-                        });
+                        break;
 
-                        currentPage.drawText('[Imagen]', {
-                            x: x + 25,
-                            y: y - 35,
-                            size: 10,
-                            font: helveticaFont,
-                            color: rgb(0.7, 0.7, 0.7),
-                        });
+                    case 'table':
+                        if (element.content && element.content.data) {
+                            const tableData = element.content.data;
+                            const cellWidth = 80 * scaleX;
+                            const cellHeight = 20 * scaleY;
+                            const tableWidth = tableData[0].length * cellWidth;
+                            const tableHeight = tableData.length * cellHeight;
 
-                        yOffset += 80;
-                    }
-                    break;
+                            // Dibujar bordes de la tabla
+                            currentPDFPage.drawRectangle({
+                                x: x,
+                                y: y - tableHeight,
+                                width: tableWidth,
+                                height: tableHeight,
+                                borderColor: rgb(0.3, 0.3, 0.3),
+                                borderWidth: 1,
+                            });
 
-                case 'table':
-                    if (element.content && element.content.data) {
-                        const tableData = element.content.data;
-                        const cellWidth = 80;
-                        const cellHeight = 20;
-                        const tableWidth = tableData[0].length * cellWidth;
-                        const tableHeight = tableData.length * cellHeight;
+                            // Dibujar contenido de las celdas
+                            tableData.forEach((row, rowIndex) => {
+                                row.forEach((cell, colIndex) => {
+                                    const cellX = x + (colIndex * cellWidth);
+                                    const cellY = y - (rowIndex * cellHeight) - 15;
 
-                        // Dibujar bordes de la tabla
-                        currentPage.drawRectangle({
-                            x: x,
-                            y: y - tableHeight,
-                            width: tableWidth,
-                            height: tableHeight,
-                            borderColor: rgb(0.3, 0.3, 0.3),
-                            borderWidth: 1,
-                        });
+                                    // Dibujar borde de celda
+                                    currentPDFPage.drawRectangle({
+                                        x: cellX,
+                                        y: y - ((rowIndex + 1) * cellHeight),
+                                        width: cellWidth,
+                                        height: cellHeight,
+                                        borderColor: rgb(0.7, 0.7, 0.7),
+                                        borderWidth: 0.5,
+                                    });
 
-                        // Dibujar contenido de las celdas
-                        tableData.forEach((row, rowIndex) => {
-                            row.forEach((cell, colIndex) => {
-                                const cellX = x + (colIndex * cellWidth);
-                                const cellY = y - (rowIndex * cellHeight) - 15;
+                                    // Dibujar texto de la celda (truncar si es muy largo)
+                                    const maxChars = Math.floor(cellWidth / 8);
+                                    const displayText = cell.length > maxChars ? 
+                                        cell.substring(0, maxChars - 3) + '...' : cell;
 
-                                // Dibujar borde de celda
-                                currentPage.drawRectangle({
-                                    x: cellX,
-                                    y: y - ((rowIndex + 1) * cellHeight),
-                                    width: cellWidth,
-                                    height: cellHeight,
-                                    borderColor: rgb(0.7, 0.7, 0.7),
-                                    borderWidth: 0.5,
-                                });
-
-                                // Dibujar texto de la celda (truncar si es muy largo)
-                                const maxChars = 10;
-                                const displayText = cell.length > maxChars ? 
-                                    cell.substring(0, maxChars - 3) + '...' : cell;
-
-                                currentPage.drawText(displayText, {
-                                    x: cellX + 5,
-                                    y: cellY,
-                                    size: 8,
-                                    font: helveticaFont,
-                                    color: rowIndex === 0 ? rgb(0.2, 0.2, 0.8) : rgb(0, 0, 0), // Encabezados en azul
+                                    currentPDFPage.drawText(displayText, {
+                                        x: cellX + 5,
+                                        y: cellY,
+                                        size: 8,
+                                        font: helveticaFont,
+                                        color: rowIndex === 0 ? rgb(0.2, 0.2, 0.8) : rgb(0, 0, 0),
+                                    });
                                 });
                             });
-                        });
-
-                        yOffset += tableHeight + 20;
-                    }
-                    break;
+                        }
+                        break;
+                }
             }
         }
 
@@ -504,6 +499,8 @@ const clearCanvas = () => {
         pages.value = [{ id: 1, elements: [] }];
         selectedElementId.value = null;
         elementCounter.value = 0;
+        pageIdCounter.value = 1; // <-- Resetear también el contador de páginas
+        currentPage.value = 1;
     }
 };
 
@@ -526,7 +523,7 @@ onMounted(() => {
 
 <template>
     <div class="flex h-screen bg-gray-50 dark:bg-primary-d/50">
-        <!-- Panel Izquierdo - Elementos -->
+        <!-- Panel Izquierdo - Elementos (sin cambios) -->
         <div class="w-64 bg-white dark:bg-primary-d border-r border-gray-200 dark:border-primary/20 flex flex-col">
             <!-- Header del panel -->
             <div class="p-4 border-b border-gray-200 dark:border-primary/20">
@@ -602,18 +599,12 @@ onMounted(() => {
 
         <!-- Área Principal con Viewport -->
         <div class="flex-1 flex flex-col">
-            <!-- Toolbar superior -->
+            <!-- Toolbar superior básico -->
             <div class="h-14 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20 flex items-center justify-between px-4">
                 <div class="flex items-center gap-4">
-                    <!-- Herramientas de formato (simuladas) -->
-                    <div class="flex items-center gap-1 text-sm">
-                        <button class="p-1 hover:bg-gray-100 dark:hover:bg-primary/10 rounded" :disabled="isExporting">
-                            <GoogleIcon name="format_bold" class="text-gray-600 dark:text-primary-dt" />
-                        </button>
-                        <button class="p-1 hover:bg-gray-100 dark:hover:bg-primary/10 rounded" :disabled="isExporting">
-                            <GoogleIcon name="format_italic" class="text-gray-600 dark:text-primary-dt" />
-                        </button>
-                    </div>
+                    <h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm">
+                        {{ documentTitle }}
+                    </h2>
                 </div>
 
                 <div class="flex items-center gap-4">
@@ -633,6 +624,13 @@ onMounted(() => {
                 </div>
             </div>
 
+            <!-- TextFormatter como toolbar estático -->
+            <TextFormatter
+                :element="textFormatterElement"
+                :visible="showTextFormatter"
+                @update="updateElement"
+            />
+
             <!-- PDFViewport -->
             <PDFViewport
                 ref="viewportRef"
@@ -644,6 +642,7 @@ onMounted(() => {
                 @add-page="addPage"
                 @delete-page="deletePage"
                 @page-change="(page) => currentPage = page"
+                @page-size-change="handlePageSizeChange"
             >
                 <template #elements="{ page, pageIndex }">
                     <CanvasElement