diff --git a/src/components/Holos/PDF/Canvas.vue b/src/components/Holos/PDF/Canvas.vue
index d43e9fc..979d854 100644
--- a/src/components/Holos/PDF/Canvas.vue
+++ b/src/components/Holos/PDF/Canvas.vue
@@ -1,25 +1,26 @@
 <script setup>
-import { ref, computed, nextTick, watch } from 'vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
+import { ref, computed, nextTick, watch } from "vue";
+import GoogleIcon from "@Shared/GoogleIcon.vue";
+import SimpleTable from "./TableEditor.vue";
 
 /** Propiedades */
 const props = defineProps({
-    element: {
-        type: Object,
-        required: true
-    },
-    isSelected: {
-        type: Boolean,
-        default: false
-    }
+  element: {
+    type: Object,
+    required: true,
+  },
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 /** Eventos */
-const emit = defineEmits(['select', 'delete', 'update', 'move']);
+const emit = defineEmits(["select", "delete", "update", "move"]);
 
 /** Referencias */
 const isEditing = ref(false);
-const editValue = ref('');
+const editValue = ref("");
 const editInput = ref(null);
 const editTextarea = ref(null);
 const elementRef = ref(null);
@@ -33,694 +34,776 @@ const fileInput = ref(null);
 /** Referencias adicionales para auto-posicionamiento */
 const controlsRef = ref(null);
 
-/** Constantes para precisión WYSIWYG */
-const PDF_SCALE_FACTOR = 0.75; // 1px = 0.75 puntos PDF
-const CANVAS_DPI = 96; // DPI del canvas
-const PDF_DPI = 72; // DPI del PDF
-
 /** Propiedades computadas */
 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`,
-        // Asegurar que la fuente se renderice con la misma métrica que el PDF
-        fontFamily: 'Helvetica, Arial, sans-serif',
-        lineHeight: '1.2',
-        letterSpacing: 'normal'
-    };
+  const baseStyles = {
+    left: `${props.element.x}px`,
+    top: `${props.element.y}px`,
+    width: `${props.element.width || 200}px`,
+    height: `${props.element.height || 40}px`,
+    // Asegurar que la fuente se renderice con la misma métrica que el PDF
+    fontFamily: "Helvetica, Arial, sans-serif",
+    lineHeight: "1.2",
+    letterSpacing: "normal",
+  };
 
-    // Aplicar estilos de formato para elementos de texto
-    if (props.element.type === 'text' && props.element.formatting) {
-        const formatting = props.element.formatting;
-        
-        // Aplicar tamaño de fuente con factor de corrección
-        if (formatting.fontSize) {
-            baseStyles.fontSize = `${formatting.fontSize}px`;
-        }
-        
-        if (formatting.color) {
-            baseStyles.color = formatting.color;
-        }
-        
-        // Alineación del contenedor en la página
-        if (formatting.containerAlign) {
-            const pageWidth = 794; // A4 width por defecto
-            const elementWidth = props.element.width || 200;
-            
-            switch (formatting.containerAlign) {
-                case 'center':
-                    baseStyles.left = `${(pageWidth - elementWidth) / 2}px`;
-                    break;
-                case 'right':
-                    baseStyles.left = `${pageWidth - elementWidth - 50}px`; // 50px margen
-                    break;
-                case 'left':
-                default:
-                    baseStyles.left = `${props.element.x}px`;
-            }
-        }
+  // Aplicar estilos de formato para elementos de texto
+  if (props.element.type === "text" && props.element.formatting) {
+    const formatting = props.element.formatting;
+
+    // Aplicar tamaño de fuente con factor de corrección
+    if (formatting.fontSize) {
+      baseStyles.fontSize = `${formatting.fontSize}px`;
     }
 
-    return baseStyles;
+    if (formatting.color) {
+      baseStyles.color = formatting.color;
+    }
+
+    // Alineación del contenedor en la página
+    if (formatting.containerAlign) {
+      const pageWidth = 794; // A4 width por defecto
+      const elementWidth = props.element.width || 200;
+
+      switch (formatting.containerAlign) {
+        case "center":
+          baseStyles.left = `${(pageWidth - elementWidth) / 2}px`;
+          break;
+        case "right":
+          baseStyles.left = `${pageWidth - elementWidth - 50}px`; // 50px margen
+          break;
+        case "left":
+        default:
+          baseStyles.left = `${props.element.x}px`;
+      }
+    }
+  }
+
+  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'
-    };
+  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'
-    };
+  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;
+  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;
 });
 
 /** Propiedades computadas para posicionamiento dinámico */
 const controlsPosition = computed(() => {
-    if (!props.isSelected || isEditing.value) return {};
-    
-    // Si el elemento está muy cerca del borde superior (menos de 50px)
-    const isNearTop = props.element.y < 50;
-    
-    return {
-        position: isNearTop ? 'bottom' : 'top',
-        styles: isNearTop ? {
-            top: '100%',
-            marginTop: '8px'
-        } : {
-            bottom: '100%',
-            marginBottom: '8px'
+  if (!props.isSelected || isEditing.value) return {};
+
+  // Si el elemento está muy cerca del borde superior
+  const isNearTop = props.element.y < 50;
+
+  return {
+    styles: isNearTop
+      ? {
+          top: "100%",
+          marginTop: "8px",
         }
-    };
+      : {
+          bottom: "100%",
+          marginBottom: "8px",
+        },
+  };
 });
 
-/** Watchers */
-watch(() => props.isSelected, (selected) => {
-    if (selected && isEditing.value) {
-        nextTick(() => {
-            if (props.element.type === 'text' && editInput.value) {
-                editInput.value.focus();
-                editInput.value.select();
-            } else if (props.element.type === 'code' && editTextarea.value) {
-                editTextarea.value.focus();
-                editTextarea.value.select();
-            }
-        });
-    }
+const tooltipPosition = computed(() => {
+  if (!props.isSelected || isEditing.value) return {};
+
+  const isNearTop = props.element.y < 50;
+  const hasControlButtons = props.element.type === "image";
+
+  const rightOffset = hasControlButtons ? "60px" : "0px";
+
+  return {
+    position: isNearTop ? "bottom" : "top",
+    styles: isNearTop
+      ? {
+          top: "100%",
+          marginTop: "8px",
+          right: rightOffset,
+        }
+      : {
+          bottom: "100%",
+          marginBottom: "8px",
+          right: rightOffset,
+        },
+  };
 });
 
+const handleImageDoubleClick = (event) => {
+  event.stopPropagation();
+  if (props.element.type === "image") {
+    fileInput.value?.click();
+  }
+};
+
+
 /** Métodos */
 const handleSelect = (event) => {
-    event.stopPropagation();
-    emit('select', props.element.id);
+  event.stopPropagation();
+  emit("select", props.element.id);
 };
 
 const handleDelete = () => {
-    emit('delete', props.element.id);
+  emit("delete", props.element.id);
 };
 
 const startEditing = () => {
-    if (props.element.type === 'table' && props.element.content) {
-        // Deep copy para evitar mutaciones directas
-        editValue.value = JSON.parse(JSON.stringify(props.element.content));
-    } else if (props.element.type === 'code') {
-        editValue.value = props.element.content || 'console.log("Hola mundo");';
-    } else {
-        editValue.value = props.element.content || getDefaultEditValue();
-    }
-    isEditing.value = true;
-    
-    nextTick(() => {
-        if (editTextarea.value) editTextarea.value.focus();
-        if (editInput.value) editInput.value.focus();
-    });
+  if (props.element.type === "table" && props.element.content) {
+    // Deep copy para evitar mutaciones directas
+    editValue.value = JSON.parse(JSON.stringify(props.element.content));
+  } else if (props.element.type === "code") {
+    editValue.value = props.element.content || 'console.log("Hola mundo");';
+  } else {
+    editValue.value = props.element.content || getDefaultEditValue();
+  }
+  isEditing.value = true;
+
+  nextTick(() => {
+    if (editTextarea.value) editTextarea.value.focus();
+    if (editInput.value) editInput.value.focus();
+  });
 };
 
 const finishEditing = () => {
-    if (isEditing.value) {
-        isEditing.value = false;
-        
-        // Para tablas, emitir el objeto completo
-        if (props.element.type === 'table') {
-            emit('update', {
-                id: props.element.id,
-                content: editValue.value
-            });
-        } else {
-            emit('update', {
-                id: props.element.id,
-                content: editValue.value
-            });
-        }
+  if (isEditing.value) {
+    isEditing.value = false;
+
+    // Para tablas, los datos ya se actualizaron en tiempo real
+    // Solo necesitamos confirmar que se guardaron
+    if (props.element.type === "table" && editValue.value) {
+      emit("update", {
+        id: props.element.id,
+        content: editValue.value,
+      });
+    } else if (props.element.type !== "table") {
+      emit("update", {
+        id: props.element.id,
+        content: editValue.value,
+      });
     }
+  }
 };
 
 const handleKeydown = (event) => {
-    if (props.element.type === 'text') {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            finishEditing();
-        } else if (event.key === 'Escape') {
-            isEditing.value = false;
-            editValue.value = props.element.content || 'Nuevo texto';
-        }
-    } else if (props.element.type === 'code') {
-        if (event.key === 'Escape') {
-            isEditing.value = false;
-            editValue.value = props.element.content || 'console.log("Hola mundo");';
-        }
-        // Para código, permitimos Enter normal y usamos Ctrl+Enter para terminar
-        if (event.key === 'Enter' && event.ctrlKey) {
-            event.preventDefault();
-            finishEditing();
-        }
-    } else if (props.element.type === 'table') {
-        if (event.key === 'Escape') {
-            isEditing.value = false;
-            // Restaurar el contenido original de la tabla
-            editValue.value = props.element.content ? 
-                JSON.parse(JSON.stringify(props.element.content)) : 
-                getDefaultEditValue();
-        }
-        // Para tablas, Enter normal para nueva línea en celda, Ctrl+Enter para terminar
-        if (event.key === 'Enter' && event.ctrlKey) {
-            event.preventDefault();
-            finishEditing();
-        }
+  if (props.element.type === "text") {
+    // Permitir Enter para salto de línea
+    if (event.key === "Enter") {
+      if (event.shiftKey || event.ctrlKey) {
+        event.preventDefault();
+        finishEditing();
+      }
+      // Si es solo Enter, permitir el salto de línea normal
+    } else if (event.key === "Escape") {
+      isEditing.value = false;
+      editValue.value = props.element.content || "Nuevo texto";
+    } else if (event.key === "Tab") {
+      event.preventDefault();
+      const start = editTextarea.value.selectionStart;
+      const end = editTextarea.value.selectionEnd;
+      const spaces = "    ";
+      editValue.value =
+        editValue.value.substring(0, start) +
+        spaces +
+        editValue.value.substring(end);
+
+      // Restaurar posición del cursor
+      nextTick(() => {
+        editTextarea.value.selectionStart = editTextarea.value.selectionEnd =
+          start + spaces.length;
+      });
     }
+  } else if (props.element.type === "code") {
+    if (event.key === "Escape") {
+      isEditing.value = false;
+      editValue.value = props.element.content || 'console.log("Hola mundo");';
+    }
+    // Para código, permitimos Enter normal y usamos Ctrl+Enter para terminar
+    if (event.key === "Enter" && event.ctrlKey) {
+      event.preventDefault();
+      finishEditing();
+    }
+  } else if (props.element.type === "table") {
+    if (event.key === "Escape") {
+      isEditing.value = false;
+      // Restaurar el contenido original de la tabla
+      editValue.value = props.element.content
+        ? JSON.parse(JSON.stringify(props.element.content))
+        : getDefaultEditValue();
+    }
+  }
+};
+
+// Función para ajustar altura automáticamente del textarea
+const adjustTextareaHeight = () => {
+  if (editTextarea.value) {
+    editTextarea.value.style.height = "auto";
+    editTextarea.value.style.height = editTextarea.value.scrollHeight + "px";
+
+    // Actualizar altura del elemento si es necesario
+    const newHeight = Math.max(40, editTextarea.value.scrollHeight + 20);
+    if (newHeight !== props.element.height) {
+      emit("update", {
+        id: props.element.id,
+        height: newHeight,
+      });
+    }
+  }
+};
+
+// Función para contar líneas y ajustar altura
+const updateTextHeight = () => {
+  if (props.element.type === "text" && editValue.value) {
+    const lines = editValue.value.split("\n");
+    const fontSize = props.element.formatting?.fontSize || 14;
+    const lineHeight = fontSize * 1.4; // Factor de altura de línea
+    const padding = 20; // Padding vertical
+    const newHeight = Math.max(40, lines.length * lineHeight + padding);
+
+    if (newHeight !== props.element.height) {
+      emit("update", {
+        id: props.element.id,
+        height: newHeight,
+      });
+    }
+  }
 };
 
 // Manejo de archivo de imagen
 const handleFileSelect = (event) => {
-    const file = event.target.files[0];
-    if (file && file.type.startsWith('image/')) {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            emit('update', {
-                id: props.element.id,
-                content: e.target.result,
-                fileName: file.name
-            });
-        };
-        reader.readAsDataURL(file);
-    }
-    // Limpiar el input
-    event.target.value = '';
+  const file = event.target.files[0];
+  if (file && file.type.startsWith("image/")) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      emit("update", {
+        id: props.element.id,
+        content: e.target.result,
+        fileName: file.name,
+      });
+    };
+    reader.readAsDataURL(file);
+  }
+  // Limpiar el input
+  event.target.value = "";
 };
 
 // Funcionalidad de arrastre
 const handleMouseDown = (event) => {
-    if (isEditing.value || isResizing.value) return;
-    
-    isDragging.value = true;
-    dragStart.value = {
-        x: event.clientX - props.element.x,
-        y: event.clientY - props.element.y
-    };
+  if (isEditing.value || isResizing.value) return;
 
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-    
-    event.preventDefault();
+  isDragging.value = true;
+  dragStart.value = {
+    x: event.clientX - props.element.x,
+    y: event.clientY - props.element.y,
+  };
+
+  document.addEventListener("mousemove", handleMouseMove);
+  document.addEventListener("mouseup", handleMouseUp);
+
+  event.preventDefault();
 };
 
 const handleMouseMove = (event) => {
-    if (isDragging.value && !isResizing.value) {
-        const newX = event.clientX - dragStart.value.x;
-        const newY = event.clientY - dragStart.value.y;
+  if (isDragging.value && !isResizing.value) {
+    const newX = event.clientX - dragStart.value.x;
+    const newY = event.clientY - dragStart.value.y;
 
-        emit('move', {
-            id: props.element.id,
-            x: Math.max(0, newX),
-            y: Math.max(0, newY)
-        });
-    } else if (isResizing.value && !isDragging.value) {
-        handleResizeMove(event);
-    }
+    emit("move", {
+      id: props.element.id,
+      x: Math.max(0, newX),
+      y: Math.max(0, newY),
+    });
+  } else if (isResizing.value && !isDragging.value) {
+    handleResizeMove(event);
+  }
 };
 
 const handleMouseUp = () => {
-    isDragging.value = false;
-    isResizing.value = false;
-    resizeDirection.value = null;
-    document.removeEventListener('mousemove', handleMouseMove);
-    document.removeEventListener('mouseup', handleMouseUp);
+  isDragging.value = false;
+  isResizing.value = false;
+  resizeDirection.value = null;
+  document.removeEventListener("mousemove", handleMouseMove);
+  document.removeEventListener("mouseup", handleMouseUp);
 };
 
 // Funcionalidad de redimensionamiento por esquina
 const startResize = (event) => {
-    event.stopPropagation();
-    event.preventDefault();
-    
-    isResizing.value = true;
-    resizeDirection.value = 'corner';
-    resizeStart.value = {
-        x: event.clientX,
-        y: event.clientY,
-        width: props.element.width || 200,
-        height: props.element.height || 40
-    };
+  event.stopPropagation();
+  event.preventDefault();
 
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
+  isResizing.value = true;
+  resizeDirection.value = "corner";
+  resizeStart.value = {
+    x: event.clientX,
+    y: event.clientY,
+    width: props.element.width || 200,
+    height: props.element.height || 40,
+  };
+
+  document.addEventListener("mousemove", handleMouseMove);
+  document.addEventListener("mouseup", handleMouseUp);
 };
 
 // Funcionalidad de redimensionamiento por bordes
 const startResizeEdge = (event, direction) => {
-    event.stopPropagation();
-    event.preventDefault();
-    
-    isResizing.value = true;
-    resizeDirection.value = direction;
-    resizeStart.value = {
-        x: event.clientX,
-        y: event.clientY,
-        width: props.element.width || 200,
-        height: props.element.height || 40
-    };
+  event.stopPropagation();
+  event.preventDefault();
 
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
+  isResizing.value = true;
+  resizeDirection.value = direction;
+  resizeStart.value = {
+    x: event.clientX,
+    y: event.clientY,
+    width: props.element.width || 200,
+    height: props.element.height || 40,
+  };
+
+  document.addEventListener("mousemove", handleMouseMove);
+  document.addEventListener("mouseup", handleMouseUp);
 };
 
 const handleResizeMove = (event) => {
-    if (!isResizing.value) return;
+  if (!isResizing.value) return;
 
-    const deltaX = event.clientX - resizeStart.value.x;
-    const deltaY = event.clientY - resizeStart.value.y;
+  const deltaX = event.clientX - resizeStart.value.x;
+  const deltaY = event.clientY - resizeStart.value.y;
 
-    let newWidth = resizeStart.value.width;
-    let newHeight = resizeStart.value.height;
+  let newWidth = resizeStart.value.width;
+  let newHeight = resizeStart.value.height;
 
-    // Calcular nuevas dimensiones según la dirección
-    if (resizeDirection.value === 'corner') {
-        newWidth = Math.max(getMinWidth(), Math.min(getMaxWidth(), resizeStart.value.width + deltaX));
-        newHeight = Math.max(getMinHeight(), Math.min(getMaxHeight(), resizeStart.value.height + deltaY));
-    } else if (resizeDirection.value === 'right') {
-        newWidth = Math.max(getMinWidth(), Math.min(getMaxWidth(), resizeStart.value.width + deltaX));
-    } else if (resizeDirection.value === 'bottom') {
-        newHeight = Math.max(getMinHeight(), Math.min(getMaxHeight(), resizeStart.value.height + deltaY));
-    }
+  // Calcular nuevas dimensiones según la dirección
+  if (resizeDirection.value === "corner") {
+    newWidth = Math.max(
+      getMinWidth(),
+      Math.min(getMaxWidth(), resizeStart.value.width + deltaX)
+    );
+    newHeight = Math.max(
+      getMinHeight(),
+      Math.min(getMaxHeight(), resizeStart.value.height + deltaY)
+    );
+  } else if (resizeDirection.value === "right") {
+    newWidth = Math.max(
+      getMinWidth(),
+      Math.min(getMaxWidth(), resizeStart.value.width + deltaX)
+    );
+  } else if (resizeDirection.value === "bottom") {
+    newHeight = Math.max(
+      getMinHeight(),
+      Math.min(getMaxHeight(), resizeStart.value.height + deltaY)
+    );
+  }
 
-    emit('update', {
-        id: props.element.id,
-        width: newWidth,
-        height: newHeight
-    });
+  emit("update", {
+    id: props.element.id,
+    width: newWidth,
+    height: newHeight,
+  });
 };
 
 // Obtener tamaños mínimos según el tipo de elemento
 const getMinWidth = () => {
-    switch (props.element.type) {
-        case 'text':
-            return 100;
-        case 'image':
-            return 100;
-        case 'table':
-            return 200;
-        default:
-            return 100;
-    }
+  switch (props.element.type) {
+    case "text":
+      return 100;
+    case "image":
+      return 100;
+    case "table":
+      return 200;
+    default:
+      return 100;
+  }
 };
 
 const getMinHeight = () => {
-    switch (props.element.type) {
-        case 'text':
-            return 30;
-        case 'image':
-            return 80;
-        case 'table':
-            return 80;
-        default:
-            return 30;
-    }
+  switch (props.element.type) {
+    case "text":
+      return 30;
+    case "image":
+      return 80;
+    case "table":
+      return 80;
+    default:
+      return 30;
+  }
 };
 
 // Obtener tamaños máximos según el tipo de elemento
 const getMaxWidth = () => {
-    return 800; // Máximo general
+  return 800; // Máximo general
 };
 
 const getMaxHeight = () => {
-    return 600; // Máximo general
+  return 600; // Máximo general
 };
 
-// Nuevos métodos para alineación
-const updateContainerAlign = (align) => {
-    emit('update', {
-        id: props.element.id,
-        formatting: {
-            ...props.element.formatting,
-            containerAlign: align
+/** Watchers */
+watch(
+  () => props.isSelected,
+  (selected) => {
+    if (selected && isEditing.value) {
+      nextTick(() => {
+        if (props.element.type === "text" && editInput.value) {
+          editInput.value.focus();
+          editInput.value.select();
+        } else if (props.element.type === "code" && editTextarea.value) {
+          editTextarea.value.focus();
+          editTextarea.value.select();
         }
-    });
-};
-
-const updateSmartAlign = (align) => {
-    const pageWidth = 794; // Obtener dinámicamente del viewport
-    const elementWidth = props.element.width || 200;
-    let newX = props.element.x;
-    
-    switch (align) {
-        case 'center':
-            newX = (pageWidth - elementWidth) / 2;
-            break;
-        case 'right':
-            newX = pageWidth - elementWidth - 50; // margen derecho
-            break;
-        case 'left':
-        default:
-            newX = 50; // margen izquierdo
+      });
     }
-    
-    emit('update', {
-        id: props.element.id,
-        x: newX,
-        formatting: {
-            ...props.element.formatting,
-            textAlign: align
-        }
+  }
+);
+
+// Watch para ajustar altura cuando cambie el texto
+watch(editValue, () => {
+  if (isEditing.value && props.element.type === "text") {
+    nextTick(() => {
+      adjustTextareaHeight();
+      updateTextHeight();
     });
+  }
+});
+
+const getDefaultEditValue = () => {
+  switch (props.element.type) {
+    case "text":
+      return "Nuevo texto";
+    case "table":
+      return {
+        data: [
+          ["Columna 1", "Columna 2", "Columna 3"],
+          ["Fila 1", "Fila 1", "Fila 1"],
+          ["Fila 2", "Fila 2", "Fila 2"],
+        ],
+        rows: 3,
+        cols: 3,
+      };
+    default:
+      return "";
+  }
+};
+
+// Nuevas variables reactivas para selección de texto
+const selectedTextRange = ref(null);
+const isSelectingText = ref(false);
+
+// Método para capturar selección de texto
+const handleTextSelection = () => {
+    if (props.element.type === 'text' && !isEditing.value) {
+        const selection = window.getSelection();
+        if (selection.rangeCount > 0 && selection.toString().length > 0) {
+            const range = selection.getRangeAt(0);
+            selectedTextRange.value = {
+                start: range.startOffset,
+                end: range.endOffset,
+                text: selection.toString()
+            };
+            isSelectingText.value = true;
+            
+            // Emitir evento para activar TextFormatter
+            emit('text-selected', {
+                id: props.element.id,
+                selection: selectedTextRange.value,
+                element: props.element
+            });
+        } else {
+            selectedTextRange.value = null;
+            isSelectingText.value = false;
+        }
+    }
+};
+
+// Aplicar formato solo a texto seleccionado
+const applyFormatToSelection = (formatting) => {
+    if (selectedTextRange.value && props.element.type === 'text') {
+        // Crear un nuevo contenido con formato aplicado solo a la selección
+        const content = props.element.content || '';
+        const beforeSelection = content.substring(0, selectedTextRange.value.start);
+        const selectedText = content.substring(selectedTextRange.value.start, selectedTextRange.value.end);
+        const afterSelection = content.substring(selectedTextRange.value.end);
+        
+        // Aquí podrías implementar markdown o HTML para mantener formato
+        // Por ahora aplicamos formato a todo el elemento como antes
+        emit('update', {
+            id: props.element.id,
+            formatting: formatting
+        });
+    }
 };
 </script>
 
 <template>
+  <div
+    ref="elementRef"
+    :style="elementStyles"
+    @click="handleSelect"
+    @dblclick="startEditing"
+    @mousedown="handleMouseDown"
+    class="absolute group select-none"
+    :class="{
+      'ring-2 ring-blue-500 ring-opacity-50': isSelected,
+      'cursor-move': !isEditing && !isResizing,
+      'cursor-text': isEditing && element.type === 'text',
+      'cursor-se-resize': isResizing && resizeDirection === 'corner',
+      'cursor-e-resize': isResizing && resizeDirection === 'right',
+      'cursor-s-resize': isResizing && resizeDirection === 'bottom',
+      'z-50': isSelected,
+      'z-10': !isSelected,
+    }"
+  >
+    <!-- Input oculto para selección de archivos -->
+    <input
+      ref="fileInput"
+      type="file"
+      accept="image/*"
+      @change="handleFileSelect"
+      class="hidden"
+    />
+
+    <!-- Elemento de Texto MEJORADO -->
     <div
-        ref="elementRef"
-        :style="elementStyles"
-        @click="handleSelect"
-        @dblclick="startEditing"
-        @mousedown="handleMouseDown"
-        class="absolute group select-none"
-        :class="{
-            'ring-2 ring-blue-500 ring-opacity-50': isSelected,
-            'cursor-move': !isEditing && !isResizing,
-            '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',
-            'z-50': isSelected,
-            'z-10': !isSelected
-        }"
+      v-if="element.type === 'text'"
+      class="w-full h-full flex items-start px-3 py-2 bg-white rounded border border-gray-300 shadow-sm"
+      :class="textContainerClasses"
+      :style="{
+        fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
+        color: element.formatting?.color || '#374151',
+        fontFamily: 'Helvetica, Arial, sans-serif',
+        lineHeight: '1.4',
+        letterSpacing: 'normal',
+        textRendering: 'geometricPrecision',
+        fontSmooth: 'always',
+        WebkitFontSmoothing: 'antialiased',
+      }"
     >
-        <!-- Input oculto para selección de archivos -->
-        <input
-            ref="fileInput"
-            type="file"
-            accept="image/*"
-            @change="handleFileSelect"
-            class="hidden"
-        />
+      <!-- Textarea para edición -->
+      <textarea
+        v-if="isEditing"
+        ref="editTextarea"
+        v-model="editValue"
+        @blur="finishEditing"
+        @keydown="handleKeydown"
+        @input="adjustTextareaHeight"
+        class="w-full bg-transparent outline-none resize-none cursor-text"
+        :class="inputClasses"
+        :style="{
+          ...inputStyles,
+          fontFamily: 'Helvetica, Arial, sans-serif',
+          lineHeight: '1.4',
+          letterSpacing: 'normal',
+          minHeight: '20px',
+          height: 'auto',
+        }"
+        @mousedown.stop
+        placeholder="Escribe tu texto aquí... (Shift+Enter o Ctrl+Enter para terminar)"
+      ></textarea>
 
-        <!-- Elemento de Texto MEJORADO -->
-        <div
-            v-if="element.type === 'text'"
-            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',
-                fontFamily: 'Helvetica, Arial, sans-serif',
-                lineHeight: '1.2',
-                letterSpacing: 'normal',
-                // Simular exactamente como se verá en el PDF
-                textRendering: 'geometricPrecision',
-                fontSmooth: 'always',
-                WebkitFontSmoothing: 'antialiased'
-            }"
-        >
-            <input
-                v-if="isEditing"
-                ref="editInput"
-                v-model="editValue"
-                @blur="finishEditing"
-                @keydown="handleKeydown"
-                class="w-full bg-transparent outline-none cursor-text"
-                :class="inputClasses"
-                :style="{
-                    ...inputStyles,
-                    fontFamily: 'Helvetica, Arial, sans-serif',
-                    lineHeight: '1.2',
-                    letterSpacing: 'normal'
-                }"
-                @mousedown.stop
-            />
-            <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',
-                    fontFamily: 'Helvetica, Arial, sans-serif',
-                    lineHeight: '1.2',
-                    letterSpacing: 'normal'
-                }"
-            >
-                {{ element.content || 'Nuevo texto' }}
-            </span>
-        </div>
-
-        <!-- Elemento de Imagen -->
-        <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"
-        >
-            <!-- Si hay imagen cargada -->
-            <img
-                v-if="element.content && element.content.startsWith('data:image')"
-                :src="element.content"
-                :alt="element.fileName || 'Imagen'"
-                class="w-full h-full object-cover pointer-events-none"
-            />
-            <!-- Placeholder para imagen -->
-            <div v-else class="flex flex-col items-center justify-center text-gray-400 dark:text-primary-dt/50 p-4">
-                <GoogleIcon name="image" class="text-2xl mb-1" />
-                <span class="text-xs text-center">Haz doble clic para cargar imagen</span>
-            </div>
-        </div>
-
-        <!-- Elemento de Tabla -->
-        <div
-            v-else-if="element.type === 'table'"
-            class="w-full h-full bg-white rounded border overflow-hidden"
-        >
-            <div v-if="element.content && element.content.data" class="w-full h-full">
-                <table class="w-full h-full text-xs border-collapse">
-                    <thead v-if="element.content.data.length > 0">
-                        <tr class="bg-blue-50 dark:bg-blue-900/20">
-                            <th 
-                                v-for="(header, colIndex) in element.content.data[0]" 
-                                :key="colIndex"
-                                class="border border-gray-300 dark:border-primary/20 px-1 py-1 text-left font-semibold text-blue-800 dark:text-blue-300"
-                            >
-                                <input
-                                    v-if="isEditing"
-                                    v-model="editValue.data[0][colIndex]"
-                                    class="w-full bg-transparent outline-none text-xs"
-                                    @mousedown.stop
-                                    @click.stop
-                                    @focus.stop
-                                />
-                                <span v-else class="truncate">{{ header }}</span>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr 
-                            v-for="(row, rowIndex) in element.content.data.slice(1)" 
-                            :key="rowIndex"
-                            class="hover:bg-gray-50 dark:hover:bg-primary/5"
-                        >
-                            <td 
-                                v-for="(cell, colIndex) in row" 
-                                :key="colIndex"
-                                class="border border-gray-300 dark:border-primary/20 px-1 py-1"
-                            >
-                                <input
-                                    v-if="isEditing"
-                                    v-model="editValue.data[rowIndex + 1][colIndex]"
-                                    class="w-full bg-transparent outline-none text-xs"
-                                    @mousedown.stop
-                                    @click.stop
-                                    @focus.stop
-                                />
-                                <span v-else class="truncate text-gray-700 dark:text-primary-dt">{{ cell }}</span>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            <!-- Placeholder para tabla vacía -->
-            <div v-else class="flex flex-col items-center justify-center text-gray-400 dark:text-primary-dt/50 p-4">
-                <GoogleIcon name="table_chart" class="text-2xl mb-1" />
-                <span class="text-xs text-center">Doble clic para editar tabla</span>
-            </div>
-        </div>
-
-        <!-- Controles del elemento -->
-        <div
-            v-if="isSelected && !isEditing"
-            ref="controlsRef"
-            class="absolute right-0 flex gap-1 opacity-100 transition-opacity z-[60]"
-            :style="controlsPosition.styles"
-        >
-            <!-- Flecha indicadora cuando está abajo -->
-            <div 
-                v-if="controlsPosition.position === 'bottom'"
-                class="absolute -top-2 right-2 w-0 h-0 border-l-4 border-r-4 border-b-4 border-l-transparent border-r-transparent border-b-gray-800"
-            ></div>
-
-            <!-- Botón para cargar imagen (solo para elementos de imagen) -->
-            <button
-                v-if="element.type === 'image'"
-                @click.stop="() => fileInput.click()"
-                class="w-7 h-7 bg-blue-500 hover:bg-blue-600 text-white rounded-md text-xs flex items-center justify-center transition-colors shadow-md"
-                title="Cargar imagen"
-            >
-                <GoogleIcon name="upload" class="text-sm" />
-            </button>
-
-            <!-- Botón eliminar -->
-            <button
-                @click.stop="handleDelete"
-                class="w-7 h-7 bg-red-500 hover:bg-red-600 text-white rounded-md text-xs flex items-center justify-center transition-colors shadow-md"
-                title="Eliminar elemento"
-            >
-                <GoogleIcon name="close" class="text-sm" />
-            </button>
-            
-            <!-- Flecha indicadora cuando está arriba -->
-            <div 
-                v-if="controlsPosition.position === 'top'"
-                class="absolute -bottom-2 right-2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-gray-800"
-            ></div>
-        </div>
-
-        <!-- Controles de redimensionamiento  -->
-        <div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none z-[55]">
-            <!-- Esquina inferior derecha -->
-            <div
-                @mousedown.stop="startResize"
-                class="absolute -bottom-2 -right-2 w-5 h-5 bg-blue-500 border-2 border-white cursor-se-resize pointer-events-auto rounded-md shadow-lg hover:bg-blue-600 hover:scale-110 transition-all"
-                title="Redimensionar"
-            >
-                <div class="absolute inset-1 border border-white/40 rounded-sm"></div>
-            </div>
-
-            <!-- Lado derecho -->
-            <div
-                @mousedown.stop="(event) => startResizeEdge(event, 'right')"
-                class="absolute top-3 bottom-3 -right-1 w-2 bg-blue-500/80 cursor-e-resize pointer-events-auto rounded-full shadow-sm hover:bg-blue-600 hover:w-3 transition-all"
-                title="Redimensionar ancho"
-            >
-                <div class="absolute top-1/2 left-1/2 w-0.5 h-6 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
-            </div>
-
-            <!-- Lado inferior -->
-            <div
-                @mousedown.stop="(event) => startResizeEdge(event, 'bottom')"
-                class="absolute -bottom-1 left-3 right-3 h-2 bg-blue-500/80 cursor-s-resize pointer-events-auto rounded-full shadow-sm hover:bg-blue-600 hover:h-3 transition-all"
-                title="Redimensionar alto"
-            >
-                <div class="absolute top-1/2 left-1/2 w-6 h-0.5 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
-            </div>
-        </div>
-
-        <!-- Tooltips adaptativos -->
-        <div
-            v-if="isSelected && !element.content && element.type !== 'image' && !isResizing"
-            class="absolute right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-[60]"
-            :style="element.y < 50 ? { top: '100%', marginTop: '8px' } : { bottom: '100%', marginBottom: '8px' }"
-        >
-            {{ element.type === 'text' ? 'Doble clic para editar texto' : 'Doble clic para editar código' }}
-            {{ element.type === 'code' ? ' (Ctrl+Enter para guardar)' : '' }}
-        </div>
-
-        <!-- Tooltip para imagen -->
-        <div
-            v-if="isSelected && !isEditing && element.type === 'image' && !element.content && !isResizing"  
-            class="absolute right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-[60]"
-            :style="element.y < 50 ? { top: '100%', marginTop: '8px' } : { bottom: '100%', marginBottom: '8px' }"
-        >
-            Arrastra las esquinas para redimensionar
-        </div>
-
-        <!-- Resto de elementos sin cambios... -->
-        <!-- Indicador de arrastre -->
-        <div
-            v-if="isDragging"
-            class="absolute inset-0 bg-blue-500 opacity-20 rounded pointer-events-none"
-        ></div>
-
-        <!-- Indicador de redimensionamiento -->
-        <div
-            v-if="isResizing"
-            class="absolute inset-0 bg-green-500 opacity-20 rounded pointer-events-none"
-        ></div>
-
-        <!-- Botón para terminar edición de tabla -->
-        <div
-            v-if="isEditing && element.type === 'table'"
-            class="absolute left-0 flex gap-2 z-[60]"
-            :style="element.y < 100 ? { top: '100%', marginTop: '8px' } : { bottom: '100%', marginBottom: '8px' }"
-        >
-            <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
-            </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
-            </button>
-        </div>
+      <!-- Vista de solo lectura con selección de texto -->
+      <div
+        v-else
+        class="w-full h-full overflow-hidden cursor-text"
+        :class="textContainerClasses"
+        :style="{
+          fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
+          color: element.formatting?.color || '#374151',
+          fontFamily: 'Helvetica, Arial, sans-serif',
+          lineHeight: '1.4',
+          letterSpacing: 'normal',
+          whiteSpace: 'pre-wrap',
+          wordWrap: 'break-word',
+        }"
+        @mouseup="handleTextSelection"
+        @selectstart="() => isSelectingText = true"
+      >
+        {{ element.content || "Nuevo texto" }}
+      </div>
     </div>
+
+    <!-- Elemento de Imagen -->
+    <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"
+      @dblclick.stop="handleImageDoubleClick"
+    >
+      <!-- Si hay imagen cargada -->
+      <img
+        v-if="element.content && element.content.startsWith('data:image')"
+        :src="element.content"
+        :alt="element.fileName || 'Imagen'"
+        class="w-full h-full object-cover pointer-events-none"
+      />
+      <!-- Placeholder para imagen -->
+      <div
+        v-else
+        class="flex flex-col items-center justify-center text-gray-400 dark:text-primary-dt/50 p-4"
+      >
+        <GoogleIcon name="image" class="text-2xl mb-1" />
+        <span class="text-xs text-center"
+          >Haz doble clic para cargar imagen</span
+        >
+      </div>
+    </div>
+
+    <!-- Elemento de Tabla SIMPLE -->
+    <SimpleTable
+      v-if="element.type === 'table'"
+      :element="element"
+      :is-editing="isEditing"
+      @update="(data) => emit('update', data)"
+      @finish-editing="() => { isEditing = false; }"
+    />
+
+    <!-- Controles del elemento -->
+    <div
+      v-if="isSelected && !isEditing"
+      ref="controlsRef"
+      class="absolute right-0 flex gap-1 opacity-100 transition-opacity z-[60]"
+      :style="controlsPosition.styles"
+    >
+      <!-- Flecha indicadora cuando está abajo -->
+      <div
+        v-if="controlsPosition.position === 'bottom'"
+        class="absolute -top-2 right-2 w-0 h-0 border-l-4 border-r-4 border-b-4 border-l-transparent border-r-transparent border-b-gray-800"
+      ></div>
+
+      <!-- Botón para cargar imagen -->
+      <button
+        v-if="element.type === 'image'"
+        @click.stop="() => fileInput.click()"
+        class="w-7 h-7 bg-blue-500 hover:bg-blue-600 text-white rounded-md text-xs flex items-center justify-center transition-colors shadow-md"
+        title="Cargar imagen"
+      >
+        <GoogleIcon name="upload" class="text-sm" />
+      </button>
+
+      <!-- Botón eliminar -->
+      <button
+        @click.stop="handleDelete"
+        class="w-7 h-7 bg-red-500 hover:bg-red-600 text-white rounded-md text-xs flex items-center justify-center transition-colors shadow-md"
+        title="Eliminar elemento"
+      >
+        <GoogleIcon name="close" class="text-sm" />
+      </button>
+
+      <!-- Flecha indicadora cuando está arriba -->
+      <div
+        v-if="controlsPosition.position === 'top'"
+        class="absolute -bottom-2 right-2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-gray-800"
+      ></div>
+    </div>
+
+    <!-- Controles de redimensionamiento  -->
+    <div
+      v-if="isSelected && !isEditing"
+      class="absolute inset-0 pointer-events-none z-[55]"
+    >
+      <!-- Esquina inferior derecha -->
+      <div
+        @mousedown.stop="startResize"
+        class="absolute -bottom-2 -right-2 w-5 h-5 bg-blue-500 border-2 border-white cursor-se-resize pointer-events-auto rounded-md shadow-lg hover:bg-blue-600 hover:scale-110 transition-all"
+        title="Redimensionar"
+      >
+        <div class="absolute inset-1 border border-white/40 rounded-sm"></div>
+      </div>
+
+      <!-- Lado derecho -->
+      <div
+        @mousedown.stop="(event) => startResizeEdge(event, 'right')"
+        class="absolute top-3 bottom-3 -right-1 w-2 bg-blue-500/80 cursor-e-resize pointer-events-auto rounded-full shadow-sm hover:bg-blue-600 hover:w-3 transition-all"
+        title="Redimensionar ancho"
+      >
+        <div
+          class="absolute top-1/2 left-1/2 w-0.5 h-6 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"
+        ></div>
+      </div>
+
+      <!-- Lado inferior -->
+      <div
+        @mousedown.stop="(event) => startResizeEdge(event, 'bottom')"
+        class="absolute -bottom-1 left-3 right-3 h-2 bg-blue-500/80 cursor-s-resize pointer-events-auto rounded-full shadow-sm hover:bg-blue-600 hover:h-3 transition-all"
+        title="Redimensionar alto"
+      >
+        <div
+          class="absolute top-1/2 left-1/2 w-6 h-0.5 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"
+        ></div>
+      </div>
+    </div>
+
+    <!-- Tooltips adaptativos -->
+    <div
+      v-if="
+        isSelected && !element.content && element.type === 'text' && !isResizing
+      "
+      class="absolute right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-[60]"
+      :style="{
+        ...tooltipPosition.styles,
+        [tooltipPosition.position === 'top' ? 'bottom' : 'top']: '100%',
+        [tooltipPosition.position === 'top' ? 'marginBottom' : 'marginTop']:
+          '8px',
+      }"
+    >
+      Doble clic para escribir párrafos
+    </div>
+
+    <!-- Indicador de arrastre -->
+    <div
+      v-if="isDragging"
+      class="absolute inset-0 bg-blue-500 opacity-20 rounded pointer-events-none"
+    ></div>
+
+    <!-- Indicador de redimensionamiento -->
+    <div
+      v-if="isResizing"
+      class="absolute inset-0 bg-green-500 opacity-20 rounded pointer-events-none"
+    ></div>
+  </div>
 </template>
 
 <style scoped>
@@ -730,4 +813,15 @@ const updateSmartAlign = (align) => {
     -moz-user-select: none;
     -ms-user-select: none;
 }
+
+/* Estilos para textarea */
+textarea {
+    overflow: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+textarea::-webkit-scrollbar {
+    display: none;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Holos/PDF/Draggable.vue b/src/components/Holos/PDF/Draggable.vue
index 4bd032c..1b07f89 100644
--- a/src/components/Holos/PDF/Draggable.vue
+++ b/src/components/Holos/PDF/Draggable.vue
@@ -39,24 +39,24 @@ const handleDragEnd = () => {
         draggable="true"
         @dragstart="handleDragStart"
         @dragend="handleDragEnd"
-        class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 bg-white cursor-grab hover:bg-gray-50 hover:border-blue-300 transition-colors dark:bg-primary-d dark:border-primary/20 dark:hover:bg-primary/10"
+        class="flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border border-gray-200 bg-white cursor-grab hover:bg-gray-50 hover:border-blue-300 transition-colors"
         :class="{
             'opacity-50 cursor-grabbing': isDragging,
             'shadow-sm hover:shadow-md': !isDragging
         }"
     >
-        <div class="flex-shrink-0 w-8 h-8 rounded-md bg-blue-100 flex items-center justify-center dark:bg-blue-900/30">
+        <div class="flex-shrink-0 w-6 h-6 sm:w-8 sm:h-8 rounded-md bg-blue-100 flex items-center justify-center">
             <GoogleIcon 
                 :name="icon" 
-                class="text-blue-600 dark:text-blue-400 text-lg"
+                class="text-blue-600 text-sm sm:text-lg"
             />
         </div>
         
         <div class="flex-1 min-w-0">
-            <div class="text-sm font-medium text-gray-900 dark:text-primary-dt">
+            <div class="text-xs sm:text-sm font-medium text-gray-900">
                 {{ title }}
             </div>
-            <div class="text-xs text-gray-500 dark:text-primary-dt/70 truncate">
+            <div class="text-xs text-gray-500 truncate hidden sm:block">
                 {{ description }}
             </div>
         </div>
diff --git a/src/components/Holos/PDF/TableEditor.vue b/src/components/Holos/PDF/TableEditor.vue
new file mode 100644
index 0000000..7e5a280
--- /dev/null
+++ b/src/components/Holos/PDF/TableEditor.vue
@@ -0,0 +1,201 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+const props = defineProps({
+    element: {
+        type: Object,
+        required: true
+    },
+    isEditing: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits(['update', 'finish-editing']);
+
+// Estructura simple: empezar con una celda
+const tableData = ref([]);
+
+// Watcher para sincronizar datos
+watch(() => props.element.content, (newContent) => {
+    if (newContent && newContent.data && Array.isArray(newContent.data)) {
+        tableData.value = JSON.parse(JSON.stringify(newContent.data));
+    } else {
+        // Inicializar con una sola celda
+        tableData.value = [['']];
+    }
+}, { immediate: true });
+
+const rows = computed(() => tableData.value.length);
+const cols = computed(() => tableData.value[0]?.length || 1);
+
+// Agregar fila
+const addRow = () => {
+    const newRow = new Array(cols.value).fill('');
+    tableData.value.push(newRow);
+    updateTable();
+};
+
+// Agregar columna
+const addColumn = () => {
+    tableData.value.forEach(row => {
+        row.push('');
+    });
+    updateTable();
+};
+
+// Eliminar fila (no permitir si solo hay una)
+const removeRow = (rowIndex) => {
+    if (tableData.value.length > 1) {
+        tableData.value.splice(rowIndex, 1);
+        updateTable();
+    }
+};
+
+// Eliminar columna (no permitir si solo hay una)
+const removeColumn = (colIndex) => {
+    if (tableData.value[0]?.length > 1) {
+        tableData.value.forEach(row => {
+            row.splice(colIndex, 1);
+        });
+        updateTable();
+    }
+};
+
+// Actualizar celda
+const updateCell = (rowIndex, colIndex, value) => {
+    if (tableData.value[rowIndex]) {
+        tableData.value[rowIndex][colIndex] = value;
+        updateTable();
+    }
+};
+
+// Actualizar tabla
+const updateTable = () => {
+    const updatedContent = {
+        data: JSON.parse(JSON.stringify(tableData.value)),
+        rows: tableData.value.length,
+        cols: tableData.value[0]?.length || 1
+    };
+    
+    // Calcular dimensiones dinámicas basadas en contenido
+    const cellWidth = 120;
+    const cellHeight = 35;
+    const newWidth = Math.max(120, updatedContent.cols * cellWidth);
+    const newHeight = Math.max(40, updatedContent.rows * cellHeight);
+    
+    emit('update', {
+        id: props.element.id,
+        content: updatedContent,
+        width: newWidth,
+        height: newHeight
+    });
+};
+
+const finishEditing = () => {
+    emit('finish-editing');
+};
+</script>
+
+<template>
+    <div class="w-full h-full bg-white rounded border border-gray-300 overflow-hidden">
+        <!-- Controles de tabla (solo cuando está editando) -->
+        <div 
+            v-if="isEditing" 
+            class="flex items-center gap-2 p-2 bg-gray-50 border-b"
+        >
+            <button
+                @click="addRow"
+                class="px-2 py-1 text-xs bg-green-500 hover:bg-green-600 text-white rounded flex items-center gap-1"
+                title="Agregar fila"
+            >
+                <GoogleIcon name="add" class="text-xs" />
+                +
+            </button>
+            
+            <button
+                @click="addColumn"
+                class="px-2 py-1 text-xs bg-blue-500 hover:bg-blue-600 text-white rounded flex items-center gap-1"
+                title="Agregar columna"
+            >
+                <GoogleIcon name="add" class="text-xs" />
+                +
+            </button>
+            
+            <div class="flex-1"></div>
+            
+            <span class="text-xs text-gray-500">
+                {{ rows }}x{{ cols }}
+            </span>
+            
+            <button
+                @click="finishEditing"
+                class="px-2 py-1 text-xs bg-gray-600 hover:bg-gray-700 text-white rounded"
+            >
+                Cerrar
+            </button>
+        </div>
+
+        <!-- Tabla -->
+        <div class="w-full h-full">
+            <table class="w-full h-full border-collapse text-sm">
+                <tbody>
+                    <tr 
+                        v-for="(row, rowIndex) in tableData" 
+                        :key="`row-${rowIndex}`"
+                        class="group"
+                        :style="{ height: `${100/rows}%` }"
+                    >
+                        <td 
+                            v-for="(cell, colIndex) in row" 
+                            :key="`cell-${rowIndex}-${colIndex}`"
+                            class="border border-gray-300 p-1 relative group/cell"
+                            :style="{ width: `${100/cols}%` }"
+                        >
+                            <!-- Controles de celda (solo cuando está editando) -->
+                            <div 
+                                v-if="isEditing && (rows > 1 || cols > 1)"
+                                class="absolute -top-2 -right-2 opacity-0 group-hover/cell:opacity-100 transition-opacity z-10"
+                            >
+                                <!-- Eliminar fila -->
+                                <button
+                                    v-if="rows > 1 && colIndex === 0"
+                                    @click="removeRow(rowIndex)"
+                                    class="w-4 h-4 bg-red-500 text-white rounded-full text-xs flex items-center justify-center mr-1"
+                                    title="Eliminar fila"
+                                >
+                                    ×
+                                </button>
+                                <!-- Eliminar columna -->
+                                <button
+                                    v-if="cols > 1 && rowIndex === 0"
+                                    @click="removeColumn(colIndex)"
+                                    class="w-4 h-4 bg-red-500 text-white rounded-full text-xs flex items-center justify-center"
+                                    title="Eliminar columna"
+                                >
+                                    ×
+                                </button>
+                            </div>
+                            
+                            <!-- Input de celda -->
+                            <input
+                                v-if="isEditing"
+                                :value="cell"
+                                @input="updateCell(rowIndex, colIndex, $event.target.value)"
+                                class="w-full h-full bg-transparent outline-none text-center text-sm resize-none"
+                                @click.stop
+                                :placeholder="rowIndex === 0 && colIndex === 0 && !cell ? 'Escribe aquí...' : ''"
+                            />
+                            <!-- Vista de solo lectura -->
+                            <div v-else class="w-full h-full flex items-center justify-center text-center text-sm p-1">
+                                {{ cell || (rowIndex === 0 && colIndex === 0 ? 'Tabla' : '') }}
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </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
index 66b98db..ee98acd 100644
--- a/src/components/Holos/PDF/TextFormatter.vue
+++ b/src/components/Holos/PDF/TextFormatter.vue
@@ -2,111 +2,153 @@
 import { ref, computed, watch } from 'vue';
 import GoogleIcon from '@Shared/GoogleIcon.vue';
 
-/** Propiedades */
 const props = defineProps({
-    element: {
+    selectedElement: {
         type: Object,
         default: null
     },
     visible: {
         type: Boolean,
         default: false
+    },
+    activeTextElement: {
+        type: Object,
+        default: null
     }
 });
 
-/** Eventos */
-const emit = defineEmits(['update']);
+const emit = defineEmits(['update', 'smart-align']);
 
-/** Propiedades computadas */
-const formatting = computed(() => props.element?.formatting || {});
-const hasTextElement = computed(() => props.element?.type === 'text');
+// Determinar si hay un elemento de texto activo (puede ser texto directo o celda de tabla)
+const hasActiveText = computed(() => {
+    return props.visible && (
+        props.selectedElement?.type === 'text' || 
+        props.activeTextElement?.type === 'text' ||
+        (props.selectedElement?.type === 'table' && props.activeTextElement)
+    );
+});
 
-/** Métodos */
+// Obtener formato del elemento activo
+const formatting = computed(() => {
+    if (props.activeTextElement) {
+        return props.activeTextElement.formatting || {};
+    }
+    if (props.selectedElement?.type === 'text') {
+        return props.selectedElement.formatting || {};
+    }
+    return {};
+});
+
+// Obtener información del elemento activo
+const activeElementInfo = computed(() => {
+    if (props.activeTextElement) {
+        return {
+            type: 'text',
+            context: props.selectedElement?.type === 'table' ? 'table-cell' : 'text-element'
+        };
+    }
+    if (props.selectedElement?.type === 'text') {
+        return {
+            type: 'text',
+            context: 'text-element'
+        };
+    }
+    return null;
+});
+
+/** Métodos de formato */
 const toggleBold = () => {
-    if (!hasTextElement.value) return;
+    if (!hasActiveText.value) return;
     updateFormatting('bold', !formatting.value.bold);
 };
 
 const toggleItalic = () => {
-    if (!hasTextElement.value) return;
+    if (!hasActiveText.value) return;
     updateFormatting('italic', !formatting.value.italic);
 };
 
 const toggleUnderline = () => {
-    if (!hasTextElement.value) return;
+    if (!hasActiveText.value) return;
     updateFormatting('underline', !formatting.value.underline);
 };
 
 const updateFontSize = (size) => {
-    if (!hasTextElement.value) return;
+    if (!hasActiveText.value) return;
     updateFormatting('fontSize', size);
 };
 
 const updateTextAlign = (align) => {
-    if (!hasTextElement.value) return;
+    if (!hasActiveText.value) return;
     updateFormatting('textAlign', align);
 };
 
 const updateColor = (color) => {
-    if (!hasTextElement.value) return;
+    if (!hasActiveText.value) return;
     updateFormatting('color', color);
 };
 
 const updateFormatting = (key, value) => {
     const newFormatting = { ...formatting.value, [key]: value };
-    emit('update', {
-        id: props.element.id,
-        formatting: newFormatting
-    });
-};
-
-const updateContainerAlign = (align) => {
-    if (!hasTextElement.value) return;
-    updateFormatting('containerAlign', align);
-};
-
-const updateSmartAlign = (align) => {
-    if (!hasTextElement.value) return;
     
-    // Emitir tanto la alineación del texto como la posición del contenedor
-    emit('smart-align', {
-        id: props.element.id,
-        align: align,
-        formatting: {
-            ...formatting.value,
-            textAlign: align,
-            containerAlign: align
-        }
-    });
+    // Determinar qué elemento actualizar
+    let targetId = null;
+    if (props.activeTextElement) {
+        targetId = props.activeTextElement.id;
+    } else if (props.selectedElement?.type === 'text') {
+        targetId = props.selectedElement.id;
+    }
+    
+    if (targetId) {
+        emit('update', {
+            id: targetId,
+            formatting: newFormatting,
+            context: activeElementInfo.value?.context
+        });
+    }
 };
 
-/** Colores predefinidos */
+/** Colores y tamaños 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"
+        class="bg-gray-50 border-b border-gray-200 transition-all duration-300"
+        :class="{
+            'h-12 opacity-100': visible && hasActiveText,
+            'h-0 opacity-0 overflow-hidden': !visible || !hasActiveText
+        }"
     >
-        <!-- 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">
+        <div 
+            v-if="hasActiveText"
+            class="flex items-center gap-4 px-4 py-2 h-full"
+        >
+            <!-- Información del elemento activo -->
+            <div class="flex items-center gap-2 text-xs text-gray-600 border-r border-gray-300 pr-4">
+                <GoogleIcon 
+                    :name="activeElementInfo?.context === 'table-cell' ? 'table_chart' : 'text_fields'" 
+                    class="text-sm" 
+                />
+                <span>
+                    {{ activeElementInfo?.context === 'table-cell' ? 'Celda de tabla' : 'Texto' }}
+                </span>
+            </div>
+
+            <!-- Controles de estilo -->
+            <div class="flex items-center 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'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200'
                     ]"
                     title="Negrita (Ctrl+B)"
                 >
@@ -119,7 +161,7 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
                         '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'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200'
                     ]"
                     title="Cursiva (Ctrl+I)"
                 >
@@ -132,38 +174,32 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
                         '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'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200'
                     ]"
                     title="Subrayado (Ctrl+U)"
                 >
                     U
                 </button>
             </div>
-        </div>
 
-        <!-- Separador -->
-        <div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
+            <!-- Separador -->
+            <div class="w-px h-6 bg-gray-300"></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>
+            <!-- Tamaño de fuente -->
             <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"
+                class="px-2 py-1 text-sm border border-gray-200 rounded bg-white focus:ring-2 focus:ring-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>
+            <!-- Separador -->
+            <div class="w-px h-6 bg-gray-300"></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>
+            <!-- Alineación -->
             <div class="flex gap-1">
                 <button
                     @click="updateTextAlign('left')"
@@ -171,7 +207,7 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
                         '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'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200'
                     ]"
                     title="Alinear izquierda"
                 >
@@ -184,7 +220,7 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
                         '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'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200'
                     ]"
                     title="Centrar"
                 >
@@ -197,27 +233,23 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
                         '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'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200'
                     ]"
                     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>
+            <!-- Separador -->
+            <div class="w-px h-6 bg-gray-300"></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>
+            <!-- Color -->
             <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"
+                    title="Color de texto"
                 >
                     <input
                         type="color"
@@ -227,10 +259,9 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
                     />
                 </div>
                 
-                <!-- Colores rápidos -->
                 <div class="flex gap-1">
                     <button
-                        v-for="color in predefinedColors.slice(0, 6)"
+                        v-for="color in predefinedColors.slice(0, 4)"
                         :key="color"
                         @click="updateColor(color)"
                         class="w-6 h-6 rounded border border-gray-300 hover:scale-110 transition-transform"
@@ -242,12 +273,11 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
                     ></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>
+            <!-- Información de estado -->
+            <div class="ml-auto text-xs text-gray-500">
+                {{ activeElementInfo?.context === 'table-cell' ? 'Formateando celda de tabla' : 'Formateando texto' }}
+            </div>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/src/pages/Maquetador/Index.vue b/src/pages/Maquetador/Index.vue
index a9f2790..6024e36 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,75 @@ 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 para TextFormatter */
+const selectedElement = ref(null);
+const activeTextElement = ref(null);
+const showTextFormatter = ref(false);
+
+const selectElement = (elementId) => {
+    selectedElementId.value = elementId;
+    const selectedEl = allElements.value.find(el => el.id === elementId);
+    selectedElement.value = selectedEl;
+    
+    // Mostrar TextFormatter si es texto o tabla
+    showTextFormatter.value = selectedEl?.type === 'text' || selectedEl?.type === 'table';
+    
+    // Si es texto directo, activar como activeTextElement
+    if (selectedEl?.type === 'text') {
+        activeTextElement.value = selectedEl;
+    } else {
+        activeTextElement.value = null;
+    }
+};
+
+const updateElement = (update) => {
+    const element = allElements.value.find(el => el.id === update.id);
+    if (element) {
+        Object.assign(element, update);
+        
+        // Actualizar referencias si es necesario
+        if (selectedElement.value?.id === update.id) {
+            selectedElement.value = { ...element };
+        }
+        if (activeTextElement.value?.id === update.id) {
+            activeTextElement.value = { ...element };
+        }
+    }
+};
+
+// Manejar selección de texto dentro de celdas de tabla
+const handleTextSelected = (data) => {
+    activeTextElement.value = data.element;
+    showTextFormatter.value = true;
+};
+
 /** Tipos de elementos disponibles */
 const availableElements = [
     {
@@ -109,14 +175,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 +186,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 +254,270 @@ 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;
-        let yOffset = 50; // Margen superior
+        
+        // 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;
 
         // Obtener fuentes
         const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
+        const helveticaBoldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
         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 páginas del maquetador
+        for (let pageIndex = 0; pageIndex < pages.value.length; pageIndex++) {
+            const page = pages.value[pageIndex];
+            
+            // Crear nueva página PDF
+            let currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
+            let currentPageHeight = pageHeightPoints;
 
-        // 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
+            // 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;
+                }
+                return a.y - b.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;
-                yOffset = 50;
-                y = currentPageHeight - yOffset;
-            }
+            // 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;
 
-            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);
-
-                        for (const word of words) {
-                            const testLine = currentLine + (currentLine ? ' ' : '') + word;
-                            const testWidth = helveticaFont.widthOfTextAtSize(testLine, 12);
+                switch (element.type) {
+                    case 'text':
+                        if (element.content && element.content.trim()) {
+                            // Obtener formato del elemento
+                            const formatting = element.formatting || {};
+                            const fontSize = Math.max(8, Math.min(72, formatting.fontSize || 12));
+                            const isBold = formatting.bold || false;
+                            const textAlign = formatting.textAlign || 'left';
                             
-                            if (testWidth <= maxWidth) {
-                                currentLine = testLine;
-                            } else {
-                                if (currentLine) lines.push(currentLine);
-                                currentLine = word;
+                            // Convertir color hexadecimal a RGB
+                            let textColor = rgb(0, 0, 0);
+                            if (formatting.color) {
+                                const hex = formatting.color.replace('#', '');
+                                const r = parseInt(hex.substr(0, 2), 16) / 255;
+                                const g = parseInt(hex.substr(2, 2), 16) / 255;
+                                const b = parseInt(hex.substr(4, 2), 16) / 255;
+                                textColor = rgb(r, g, b);
                             }
-                        }
-                        if (currentLine) lines.push(currentLine);
-
-                        // 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);
-                            }
+                            // Seleccionar fuente
+                            let font = isBold ? helveticaBoldFont : helveticaFont;
 
-                            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);
-                                
-                                const imageAspectRatio = image.width / image.height;
-                                let displayWidth = maxWidth;
-                                let displayHeight = maxWidth / imageAspectRatio;
-                                
-                                if (displayHeight > maxHeight) {
-                                    displayHeight = maxHeight;
-                                    displayWidth = maxHeight * imageAspectRatio;
+                            // NUEVO: Dividir por párrafos (saltos de línea)
+                            const paragraphs = element.content.split('\n');
+                            const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
+                            const lineHeight = fontSize * 1.4;
+                            let currentY = y;
+
+                            paragraphs.forEach((paragraph, paragraphIndex) => {
+                                if (paragraph.trim() === '') {
+                                    // Párrafo vacío - solo agregar espacio
+                                    currentY -= lineHeight;
+                                    return;
                                 }
 
-                                currentPage.drawImage(image, {
-                                    x: x,
-                                    y: y - displayHeight,
-                                    width: displayWidth,
-                                    height: displayHeight,
+                                // Dividir párrafo en líneas que caben en el ancho
+                                const words = paragraph.split(' ');
+                                const lines = [];
+                                let currentLine = '';
+
+                                for (const word of words) {
+                                    const testLine = currentLine + (currentLine ? ' ' : '') + word;
+                                    const testWidth = font.widthOfTextAtSize(testLine, fontSize);
+                                    
+                                    if (testWidth <= maxWidth) {
+                                        currentLine = testLine;
+                                    } else {
+                                        if (currentLine) lines.push(currentLine);
+                                        currentLine = word;
+                                    }
+                                }
+                                if (currentLine) lines.push(currentLine);
+
+                                // Dibujar cada línea del párrafo
+                                lines.forEach((line, lineIndex) => {
+                                    let lineX = x;
+                                    const lineWidth = font.widthOfTextAtSize(line, fontSize);
+                                    
+                                    // Calcular posición X según alineación
+                                    if (textAlign === 'center') {
+                                        lineX = x + (maxWidth - lineWidth) / 2;
+                                    } else if (textAlign === 'right') {
+                                        lineX = x + maxWidth - lineWidth;
+                                    }
+
+                                    currentPDFPage.drawText(line, {
+                                        x: Math.max(50, lineX),
+                                        y: currentY,
+                                        size: fontSize,
+                                        font: font,
+                                        color: textColor,
+                                    });
+
+                                    currentY -= lineHeight;
                                 });
 
-                                yOffset += displayHeight + 20;
-                            }
-                        } catch (imageError) {
-                            console.warn('Error al procesar imagen:', imageError);
-                            // Dibujar placeholder para imagen
-                            currentPage.drawRectangle({
-                                x: x,
-                                y: y - 60,
-                                width: 100,
-                                height: 60,
-                                borderColor: rgb(0.7, 0.7, 0.7),
-                                borderWidth: 1,
+                                // Agregar espacio extra entre párrafos
+                                if (paragraphIndex < paragraphs.length - 1) {
+                                    currentY -= lineHeight * 0.3;
+                                }
                             });
-
-                            currentPage.drawText('[Imagen no disponible]', {
-                                x: x + 5,
-                                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 'image':
+                        if (element.content && element.content.startsWith('data:image')) {
+                            try {
+                                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);
+                                }
 
-                        yOffset += 80;
-                    }
-                    break;
+                                if (image) {
+                                    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;
+                                    }
 
-                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 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 contenido de las celdas
-                        tableData.forEach((row, rowIndex) => {
-                            row.forEach((cell, colIndex) => {
-                                const cellX = x + (colIndex * cellWidth);
-                                const cellY = y - (rowIndex * cellHeight) - 15;
-
-                                // Dibujar borde de celda
-                                currentPage.drawRectangle({
-                                    x: cellX,
-                                    y: y - ((rowIndex + 1) * cellHeight),
-                                    width: cellWidth,
-                                    height: cellHeight,
+                                    currentPDFPage.drawImage(image, {
+                                        x: x,
+                                        y: y - displayHeight,
+                                        width: displayWidth,
+                                        height: displayHeight,
+                                    });
+                                }
+                            } catch (imageError) {
+                                console.warn('Error al procesar imagen:', imageError);
+                                // Placeholder para imagen con error
+                                currentPDFPage.drawRectangle({
+                                    x: x,
+                                    y: y - 60,
+                                    width: 100 * scaleX,
+                                    height: 60 * scaleY,
                                     borderColor: rgb(0.7, 0.7, 0.7),
-                                    borderWidth: 0.5,
+                                    borderWidth: 1,
                                 });
 
-                                // 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,
+                                currentPDFPage.drawText('[Error al cargar imagen]', {
+                                    x: x + 5,
+                                    y: y - 35,
+                                    size: 10,
                                     font: helveticaFont,
-                                    color: rowIndex === 0 ? rgb(0.2, 0.2, 0.8) : rgb(0, 0, 0), // Encabezados en azul
+                                    color: rgb(0.7, 0.7, 0.7),
                                 });
-                            });
-                        });
+                            }
+                        }
+                        break;
 
-                        yOffset += tableHeight + 20;
-                    }
-                    break;
+                    case 'table':
+                        if (element.content && element.content.data && Array.isArray(element.content.data)) {
+                            const tableData = element.content.data;
+                            const totalCols = tableData[0]?.length || 0;
+                            const totalRows = tableData.length;
+                            
+                            if (totalCols > 0 && totalRows > 0) {
+                                const availableWidth = Math.min(pageWidthPoints - 100, (element.width || 300) * scaleX);
+                                const cellWidth = availableWidth / totalCols;
+                                const cellHeight = 25;
+                                const tableWidth = cellWidth * totalCols;
+                                const tableHeight = cellHeight * totalRows;
+
+                                // Dibujar borde exterior de la tabla
+                                currentPDFPage.drawRectangle({
+                                    x: x,
+                                    y: y - tableHeight,
+                                    width: tableWidth,
+                                    height: tableHeight,
+                                    borderColor: rgb(0.2, 0.2, 0.2),
+                                    borderWidth: 1.5,
+                                });
+
+                                // Dibujar cada celda
+                                tableData.forEach((row, rowIndex) => {
+                                    if (Array.isArray(row)) {
+                                        row.forEach((cell, colIndex) => {
+                                            const cellX = x + (colIndex * cellWidth);
+                                            const cellY = y - (rowIndex * cellHeight);
+
+                                            // Dibujar borde de celda
+                                            currentPDFPage.drawRectangle({
+                                                x: cellX,
+                                                y: cellY - cellHeight,
+                                                width: cellWidth,
+                                                height: cellHeight,
+                                                borderColor: rgb(0.7, 0.7, 0.7),
+                                                borderWidth: 0.5,
+                                            });
+
+                                            // Fondo especial para headers
+                                            if (rowIndex === 0) {
+                                                currentPDFPage.drawRectangle({
+                                                    x: cellX,
+                                                    y: cellY - cellHeight,
+                                                    width: cellWidth,
+                                                    height: cellHeight,
+                                                    color: rgb(0.95, 0.95, 1),
+                                                });
+                                            }
+
+                                            // Dibujar texto de la celda
+                                            if (cell && typeof cell === 'string' && cell.trim()) {
+                                                const maxChars = Math.max(1, Math.floor(cellWidth / 6));
+                                                let displayText = cell.trim();
+                                                
+                                                if (displayText.length > maxChars) {
+                                                    displayText = displayText.substring(0, maxChars - 3) + '...';
+                                                }
+
+                                                const fontSize = Math.max(8, Math.min(12, cellWidth / 8));
+                                                const font = rowIndex === 0 ? helveticaBoldFont : helveticaFont;
+                                                const textColor = rowIndex === 0 ? rgb(0.1, 0.1, 0.6) : rgb(0, 0, 0);
+
+                                                const textWidth = font.widthOfTextAtSize(displayText, fontSize);
+                                                const textX = cellX + (cellWidth - textWidth) / 2;
+                                                const textY = cellY - cellHeight/2 - fontSize/2;
+
+                                                currentPDFPage.drawText(displayText, {
+                                                    x: Math.max(cellX + 2, textX),
+                                                    y: Math.max(cellY - cellHeight + 5, textY),
+                                                    size: fontSize,
+                                                    font: font,
+                                                    color: textColor,
+                                                });
+                                            }
+                                        });
+                                    }
+                                });
+                            }
+                        }
+                        break;
+
+                    default:
+                        console.warn(`Tipo de elemento no soportado: ${element.type}`);
+                        break;
+                }
             }
         }
 
@@ -475,7 +539,7 @@ const exportPDF = async () => {
         
     } catch (error) {
         console.error('Error al generar PDF:', error);
-        window.Notify.error('Error al generar el PDF');
+        window.Notify.error('Error al generar el PDF: ' + error.message);
     } finally {
         isExporting.value = false;
     }
@@ -504,6 +568,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;
     }
 };
 
@@ -525,14 +591,14 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="flex h-screen bg-gray-50 dark:bg-primary-d/50">
-        <!-- Panel Izquierdo - Elementos -->
-        <div class="w-64 bg-white dark:bg-primary-d border-r border-gray-200 dark:border-primary/20 flex flex-col">
+    <div class="flex flex-col lg:flex-row h-screen bg-gray-50">
+        <!-- Panel Izquierdo - Responsive -->
+        <div class="w-full lg:w-64 bg-white border-r border-gray-200 flex flex-col">
             <!-- Header del panel -->
-            <div class="p-4 border-b border-gray-200 dark:border-primary/20">
-                <div class="flex items-center gap-2 mb-4">
-                    <GoogleIcon name="text_snippet" class="text-blue-600 dark:text-blue-400 text-xl" />
-                    <h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm">
+            <div class="p-3 lg:p-4 border-b border-gray-200">
+                <div class="flex items-center gap-2 mb-3 lg:mb-4">
+                    <GoogleIcon name="text_snippet" class="text-blue-600 text-lg lg:text-xl" />
+                    <h2 class="font-semibold text-gray-900 text-sm">
                         Diseñador de Documentos
                     </h2>
                 </div>
@@ -540,7 +606,7 @@ onMounted(() => {
                 <!-- Título del documento -->
                 <input
                     v-model="documentTitle"
-                    class="w-full px-2 py-1 text-xs border border-gray-200 rounded mb-3 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+                    class="w-full px-2 py-1 text-xs border border-gray-200 rounded mb-3"
                     placeholder="Título del documento"
                 />
                 
@@ -548,12 +614,8 @@ onMounted(() => {
                 <button
                     @click="exportPDF"
                     :disabled="isExporting"
-                    :class="[
-                        'w-full flex items-center justify-center gap-2 px-3 py-2 text-sm rounded transition-colors',
-                        isExporting
-                            ? 'bg-gray-400 text-white cursor-not-allowed'
-                            : 'bg-red-600 hover:bg-red-700 text-white'
-                    ]"
+                    class="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm rounded transition-colors"
+                    :class="isExporting ? 'bg-gray-400 text-white cursor-not-allowed' : 'bg-red-600 hover:bg-red-700 text-white'"
                 >
                     <GoogleIcon :name="isExporting ? 'hourglass_empty' : 'picture_as_pdf'" class="text-sm" />
                     {{ isExporting ? 'Generando PDF...' : 'Exportar PDF' }}
@@ -561,15 +623,16 @@ onMounted(() => {
             </div>
 
             <!-- Sección Elementos -->
-            <div class="p-4 flex-1 overflow-y-auto">
-                <h3 class="text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider mb-3">
+            <div class="p-3 lg:p-4 flex-1 overflow-y-auto">
+                <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">
                     Elementos
                 </h3>
-                <p class="text-xs text-gray-400 dark:text-primary-dt/70 mb-4">
+                <p class="text-xs text-gray-400 mb-4 hidden lg:block">
                     Arrastra elementos al canvas para crear tu documento
                 </p>
                 
-                <div class="space-y-3">
+                <!-- Grid responsive de elementos -->
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-2 lg:gap-3">
                     <Draggable
                         v-for="element in availableElements"
                         :key="element.type"
@@ -580,58 +643,66 @@ onMounted(() => {
                     />
                 </div>
 
-                <!-- Agregar rápido -->
-                <h3 class="text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider mt-6 mb-3">
-                    Agregar rápido
-                </h3>
-                
-                <div class="space-y-2">
-                    <button
-                        v-for="element in availableElements"
-                        :key="`quick-${element.type}`"
-                        @click="addQuickElement(element.type)"
-                        :disabled="isExporting"
-                        class="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-primary-dt hover:bg-gray-100 dark:hover:bg-primary/10 rounded transition-colors disabled:opacity-50"
-                    >
-                        <GoogleIcon name="add" class="text-gray-400 dark:text-primary-dt/70 text-sm" />
-                        {{ element.title }}
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        <!-- Área Principal con Viewport -->
-        <div class="flex-1 flex flex-col">
-            <!-- Toolbar superior -->
-            <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" />
+                <!-- Agregar rápido - Solo en desktop -->
+                <div class="hidden lg:block">
+                    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6 mb-3">
+                        Agregar rápido
+                    </h3>
+                    
+                    <div class="space-y-2">
+                        <button
+                            v-for="element in availableElements"
+                            :key="`quick-${element.type}`"
+                            @click="addQuickElement(element.type)"
+                            :disabled="isExporting"
+                            class="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded transition-colors disabled:opacity-50"
+                        >
+                            <GoogleIcon name="add" class="text-gray-400 text-sm" />
+                            {{ element.title }}
                         </button>
                     </div>
                 </div>
 
-                <div class="flex items-center gap-4">
-                    <span class="text-xs text-gray-500 dark:text-primary-dt/70">
-                        {{ totalElements }} elemento{{ totalElements !== 1 ? 's' : '' }} • {{ pages.length }} página{{ pages.length !== 1 ? 's' : '' }}
-                    </span>
-                    
+                <!-- Limpiar todo -->
+                <div class="pt-4 mt-4 border-t border-gray-200">
                     <button
                         v-if="totalElements > 0"
                         @click="clearCanvas"
                         :disabled="isExporting"
-                        class="flex items-center gap-1 px-2 py-1 text-xs text-red-600 hover:text-red-700 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20 rounded transition-colors disabled:opacity-50"
+                        class="w-full flex items-center justify-center gap-1 px-2 py-1 text-xs text-red-600 hover:text-red-700 hover:bg-red-50 rounded transition-colors disabled:opacity-50"
                     >
                         <GoogleIcon name="delete" class="text-sm" />
                         Limpiar Todo
                     </button>
                 </div>
             </div>
+        </div>
+
+        <!-- Área Principal con Viewport -->
+        <div class="flex-1 flex flex-col min-h-0">
+            <!-- Toolbar superior básico -->
+            <div class="h-12 lg:h-14 bg-white border-b border-gray-200 flex items-center justify-between px-3 lg:px-4">
+                <div class="flex items-center gap-2 lg:gap-4">
+                    <h2 class="font-semibold text-gray-900 text-sm truncate max-w-32 lg:max-w-none">
+                        {{ documentTitle }}
+                    </h2>
+                </div>
+
+                <div class="flex items-center gap-2 lg:gap-4">
+                    <span class="text-xs text-gray-500 hidden sm:block">
+                        {{ totalElements }} elemento{{ totalElements !== 1 ? 's' : '' }} • {{ pages.length }} página{{ pages.length !== 1 ? 's' : '' }}
+                    </span>
+                </div>
+            </div>
+
+            <!-- TextFormatter estático y universal -->
+            <TextFormatter
+                :selected-element="selectedElement"
+                :active-text-element="activeTextElement"
+                :visible="showTextFormatter"
+                @update="updateElement"
+                @smart-align="handleSmartAlign"
+            />
 
             <!-- PDFViewport -->
             <PDFViewport
@@ -644,6 +715,7 @@ onMounted(() => {
                 @add-page="addPage"
                 @delete-page="deletePage"
                 @page-change="(page) => currentPage = page"
+                @page-size-change="handlePageSizeChange"
             >
                 <template #elements="{ page, pageIndex }">
                     <CanvasElement
@@ -655,6 +727,7 @@ onMounted(() => {
                         @delete="deleteElement"
                         @update="updateElement"
                         @move="moveElement"
+                        @text-selected="handleTextSelected"
                     />
                 </template>
             </PDFViewport>