Cambios al maquetador

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>

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>

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', 'smart-align']);
-const emit = defineEmits(['update']);
 
-/** Propiedades computadas */
+// Determinar si hay un elemento de texto activo (puede ser texto directo o celda de tabla)
-const formatting = computed(() => props.element?.formatting || {});
+const hasActiveText = computed(() => {
-const hasTextElement = computed(() => props.element?.type === 'text');
+    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
+    // Determinar qué elemento actualizar
-    emit('smart-align', {
+    let targetId = null;
-        id: props.element.id,
+    if (props.activeTextElement) {
-        align: align,
+        targetId = props.activeTextElement.id;
-        formatting: {
+    } else if (props.selectedElement?.type === 'text') {
-            ...formatting.value,
+        targetId = props.selectedElement.id;
-            textAlign: align,
+    }
-            containerAlign: align
+    
-        }
+    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="bg-gray-50 border-b border-gray-200 transition-all duration-300"
-        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="{
+            'h-12 opacity-100': visible && hasActiveText,
+            'h-0 opacity-0 overflow-hidden': !visible || !hasActiveText
+        }"
     >
-        <!-- Estilo de texto -->
+        <div 
-        <div class="flex items-center gap-2">
+            v-if="hasActiveText"
-            <span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Estilo:</span>
+            class="flex items-center gap-4 px-4 py-2 h-full"
-            <div class="flex gap-1">
+        >
+            <!-- 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 -->
+            <!-- Separador -->
-        <div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
+            <div class="w-px h-6 bg-gray-300"></div>
 
-        <!-- Tamaño de fuente -->
+            <!-- Tamaño de fuente -->
-        <div class="flex items-center gap-2">
-            <span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Tamaño:</span>
             <select
                 :value="formatting.fontSize || 12"
                 @change="updateFontSize(parseInt($event.target.value))"
-                class="px-2 py-1 text-sm border border-gray-200 rounded bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                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 -->
+            <!-- Separador -->
-        <div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
+            <div class="w-px h-6 bg-gray-300"></div>
 
-        <!-- Alineación -->
+            <!-- Alineación -->
-        <div class="flex items-center gap-2">
-            <span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Alinear:</span>
             <div class="flex gap-1">
                 <button
                     @click="updateTextAlign('left')"
@@ -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 -->
+            <!-- Separador -->
-        <div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
+            <div class="w-px h-6 bg-gray-300"></div>
 
-        <!-- Color de texto -->
+            <!-- Color -->
-        <div class="flex items-center gap-2">
-            <span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Color:</span>
             <div class="flex items-center gap-2">
-                <!-- Color actual -->
                 <div 
                     class="w-8 h-8 rounded border-2 border-gray-300 cursor-pointer relative overflow-hidden"
                     :style="{ backgroundColor: formatting.color || '#000000' }"
-                    title="Color actual"
+                    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 -->
+            <!-- Información de estado -->
-        <div class="ml-auto flex items-center gap-2 text-xs text-gray-500 dark:text-primary-dt/70">
+            <div class="ml-auto text-xs text-gray-500">
-            <GoogleIcon name="text_fields" class="text-sm" />
+                {{ activeElementInfo?.context === 'table-cell' ? 'Formateando celda de tabla' : 'Formateando texto' }}
-            <span>Elemento de texto seleccionado</span>
+            </div>
         </div>
     </div>
 </template>

src/pages/Maquetador/Index.vue

@@ -41,15 +41,25 @@ const moveElement = (moveData) => {
 /** Referencias */
 const viewportRef = ref(null);
 
-/** Referencias adicionales */
+/** Referencias adicionales para TextFormatter */
-const textFormatterElement = ref(null);
+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);
-    showTextFormatter.value = selectedEl?.type === 'text';
+    selectedElement.value = selectedEl;
-    textFormatterElement.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) => {
@@ -57,40 +67,20 @@ const updateElement = (update) => {
     if (element) {
         Object.assign(element, update);
         
-        // Si se actualiza el formato, actualizar la referencia
+        // Actualizar referencias si es necesario
-        if (update.formatting && textFormatterElement.value?.id === update.id) {
+        if (selectedElement.value?.id === update.id) {
-            textFormatterElement.value = { ...element };
+            selectedElement.value = { ...element };
+        }
+        if (activeTextElement.value?.id === update.id) {
+            activeTextElement.value = { ...element };
         }
     }
 };
 
-const handleSmartAlign = (alignData) => {
+// Manejar selección de texto dentro de celdas de tabla
-    const element = allElements.value.find(el => el.id === alignData.id);
+const handleTextSelected = (data) => {
-    if (element && element.type === 'text') {
+    activeTextElement.value = data.element;
-        const pageWidth = currentPageSize.value.width;
+    showTextFormatter.value = true;
-        const elementWidth = element.width || 200;
-        
-        let newX = element.x;
-        switch (alignData.align) {
-            case 'center':
-                newX = (pageWidth - elementWidth) / 2;
-                break;
-            case 'right':
-                newX = pageWidth - elementWidth - 50;
-                break;
-            case 'left':
-            default:
-                newX = 50;
-        }
-        
-        // Actualizar posición y formato
-        Object.assign(element, {
-            x: newX,
-            formatting: alignData.formatting
-        });
-        
-        textFormatterElement.value = { ...element };
-    }
 };
 
 /** Tipos de elementos disponibles */
@@ -270,9 +260,6 @@ const exportPDF = async () => {
         // Convertir dimensiones de pixels a puntos (1 px = 0.75 puntos)
         const pageWidthPoints = currentPageSize.value.width * 0.75;
         const pageHeightPoints = currentPageSize.value.height * 0.75;
-        
-        let currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
-        let currentPageHeight = pageHeightPoints;
 
         // Obtener fuentes
         const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
@@ -283,11 +270,9 @@ const exportPDF = async () => {
         for (let pageIndex = 0; pageIndex < pages.value.length; pageIndex++) {
             const page = pages.value[pageIndex];
             
-            // Crear nueva página PDF si no es la primera
+            // Crear nueva página PDF
-            if (pageIndex > 0) {
+            let currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
-                currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
+            let currentPageHeight = pageHeightPoints;
-                currentPageHeight = pageHeightPoints;
-            }
 
             // Ordenar elementos de esta página por posición
             const sortedElements = [...page.elements].sort((a, b) => {
@@ -308,16 +293,15 @@ const exportPDF = async () => {
 
                 switch (element.type) {
                     case 'text':
-                        if (element.content) {
+                        if (element.content && element.content.trim()) {
                             // Obtener formato del elemento
                             const formatting = element.formatting || {};
-                            const fontSize = formatting.fontSize || 12;
+                            const fontSize = Math.max(8, Math.min(72, formatting.fontSize || 12));
                             const isBold = formatting.bold || false;
-                            const isItalic = formatting.italic || false;
                             const textAlign = formatting.textAlign || 'left';
                             
                             // Convertir color hexadecimal a RGB
-                            let textColor = rgb(0, 0, 0); // Negro por defecto
+                            let textColor = rgb(0, 0, 0);
                             if (formatting.color) {
                                 const hex = formatting.color.replace('#', '');
                                 const r = parseInt(hex.substr(0, 2), 16) / 255;
@@ -327,51 +311,66 @@ const exportPDF = async () => {
                             }
                             
                             // Seleccionar fuente
-                            let font = helveticaFont;
+                            let font = isBold ? helveticaBoldFont : helveticaFont;
-                            if (isBold && !isItalic) {
-                                font = helveticaBoldFont;
-                            } else if (isBold && isItalic) {
-                                // Para negrita + cursiva, usar negrita (limitación de PDF-lib)
-                                font = helveticaBoldFont;
-                            }
 
-                            // Dividir texto largo en líneas
+                            // NUEVO: Dividir por párrafos (saltos de línea)
-                            const words = element.content.split(' ');
+                            const paragraphs = element.content.split('\n');
-                            const lines = [];
-                            let currentLine = '';
                             const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
+                            const lineHeight = fontSize * 1.4;
+                            let currentY = y;
 
-                            for (const word of words) {
+                            paragraphs.forEach((paragraph, paragraphIndex) => {
-                                const testLine = currentLine + (currentLine ? ' ' : '') + word;
+                                if (paragraph.trim() === '') {
-                                const testWidth = font.widthOfTextAtSize(testLine, fontSize);
+                                    // Párrafo vacío - solo agregar espacio
-                                
+                                    currentY -= lineHeight;
-                                if (testWidth <= maxWidth) {
+                                    return;
-                                    currentLine = testLine;
-                                } else {
-                                    if (currentLine) lines.push(currentLine);
-                                    currentLine = word;
-                                }
-                            }
-                            if (currentLine) lines.push(currentLine);
-
-                            // Calcular posición X según alineación
-                            lines.forEach((line, index) => {
-                                let lineX = x;
-                                const lineWidth = font.widthOfTextAtSize(line, fontSize);
-                                
-                                if (textAlign === 'center') {
-                                    lineX = x + (maxWidth - lineWidth) / 2;
-                                } else if (textAlign === 'right') {
-                                    lineX = x + maxWidth - lineWidth;
                                 }
 
-                                currentPDFPage.drawText(line, {
+                                // Dividir párrafo en líneas que caben en el ancho
-                                    x: Math.max(50, lineX),
+                                const words = paragraph.split(' ');
-                                    y: y - (index * (fontSize + 3)),
+                                const lines = [];
-                                    size: fontSize,
+                                let currentLine = '';
-                                    font: font,
+
-                                    color: textColor,
+                                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;
                                 });
+
+                                // Agregar espacio extra entre párrafos
+                                if (paragraphIndex < paragraphs.length - 1) {
+                                    currentY -= lineHeight * 0.3;
+                                }
                             });
                         }
                         break;
@@ -380,10 +379,7 @@ const exportPDF = async () => {
                         if (element.content && element.content.startsWith('data:image')) {
                             try {
                                 const base64Data = element.content.split(',')[1];
-                                const imageBytes = Uint8Array.from(
+                                const imageBytes = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0));
-                                    atob(base64Data), 
-                                    c => c.charCodeAt(0)
-                                );
                                 
                                 let image;
                                 if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) {
@@ -424,7 +420,7 @@ const exportPDF = async () => {
                                     borderWidth: 1,
                                 });
 
-                                currentPDFPage.drawText('[Imagen no disponible]', {
+                                currentPDFPage.drawText('[Error al cargar imagen]', {
                                     x: x + 5,
                                     y: y - 35,
                                     size: 10,
@@ -432,74 +428,95 @@ const exportPDF = async () => {
                                     color: rgb(0.7, 0.7, 0.7),
                                 });
                             }
-                        } else {
-                            // Placeholder para imagen vacía
-                            currentPDFPage.drawRectangle({
-                                x: x,
-                                y: y - 60,
-                                width: 100 * scaleX,
-                                height: 60 * scaleY,
-                                borderColor: rgb(0.7, 0.7, 0.7),
-                                borderWidth: 1,
-                                borderDashArray: [3, 3],
-                            });
-
-                            currentPDFPage.drawText('[Imagen]', {
-                                x: x + 25,
-                                y: y - 35,
-                                size: 10,
-                                font: helveticaFont,
-                                color: rgb(0.7, 0.7, 0.7),
-                            });
                         }
                         break;
 
                     case 'table':
-                        if (element.content && element.content.data) {
+                        if (element.content && element.content.data && Array.isArray(element.content.data)) {
                             const tableData = element.content.data;
-                            const cellWidth = 80 * scaleX;
+                            const totalCols = tableData[0]?.length || 0;
-                            const cellHeight = 20 * scaleY;
+                            const totalRows = tableData.length;
-                            const tableWidth = tableData[0].length * cellWidth;
+                            
-                            const tableHeight = tableData.length * cellHeight;
+                            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;
 
-                            currentPDFPage.drawRectangle({
+                                // Dibujar borde exterior de la tabla
-                                x: x,
+                                currentPDFPage.drawRectangle({
-                                y: y - tableHeight,
+                                    x: x,
-                                width: tableWidth,
+                                    y: y - tableHeight,
-                                height: tableHeight,
+                                    width: tableWidth,
-                                borderColor: rgb(0.3, 0.3, 0.3),
+                                    height: tableHeight,
-                                borderWidth: 1,
+                                    borderColor: rgb(0.2, 0.2, 0.2),
-                            });
+                                    borderWidth: 1.5,
-
-                            tableData.forEach((row, rowIndex) => {
-                                row.forEach((cell, colIndex) => {
-                                    const cellX = x + (colIndex * cellWidth);
-                                    const cellY = y - (rowIndex * cellHeight) - 15;
-
-                                    currentPDFPage.drawRectangle({
-                                        x: cellX,
-                                        y: y - ((rowIndex + 1) * cellHeight),
-                                        width: cellWidth,
-                                        height: cellHeight,
-                                        borderColor: rgb(0.7, 0.7, 0.7),
-                                        borderWidth: 0.5,
-                                    });
-
-                                    const maxChars = Math.floor(cellWidth / 8);
-                                    const displayText = cell.length > maxChars ? 
-                                        cell.substring(0, maxChars - 3) + '...' : cell;
-
-                                    currentPDFPage.drawText(displayText, {
-                                        x: cellX + 5,
-                                        y: cellY,
-                                        size: 8,
-                                        font: helveticaFont,
-                                        color: rowIndex === 0 ? rgb(0.2, 0.2, 0.8) : rgb(0, 0, 0),
-                                    });
                                 });
-                            });
+
+                                // 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;
                 }
             }
         }
@@ -522,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;
     }
@@ -574,14 +591,14 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="flex h-screen bg-gray-50 dark:bg-primary-d/50">
+    <div class="flex flex-col lg:flex-row h-screen bg-gray-50">
-        <!-- Panel Izquierdo - Elementos (sin cambios) -->
+        <!-- Panel Izquierdo - Responsive -->
-        <div class="w-64 bg-white dark:bg-primary-d border-r border-gray-200 dark:border-primary/20 flex flex-col">
+        <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="p-3 lg:p-4 border-b border-gray-200">
-                <div class="flex items-center gap-2 mb-4">
+                <div class="flex items-center gap-2 mb-3 lg:mb-4">
-                    <GoogleIcon name="text_snippet" class="text-blue-600 dark:text-blue-400 text-xl" />
+                    <GoogleIcon name="text_snippet" class="text-blue-600 text-lg lg:text-xl" />
-                    <h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm">
+                    <h2 class="font-semibold text-gray-900 text-sm">
                         Diseñador de Documentos
                     </h2>
                 </div>
@@ -589,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"
                 />
                 
@@ -597,12 +614,8 @@ onMounted(() => {
                 <button
                     @click="exportPDF"
                     :disabled="isExporting"
-                    :class="[
+                    class="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm rounded transition-colors"
-                        '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'"
-                        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' }}
@@ -610,15 +623,16 @@ onMounted(() => {
             </div>
 
             <!-- Sección Elementos -->
-            <div class="p-4 flex-1 overflow-y-auto">
+            <div class="p-3 lg: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">
+                <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"
@@ -629,56 +643,62 @@ onMounted(() => {
                     />
                 </div>
 
-                <!-- Agregar rápido -->
+                <!-- Agregar rápido - Solo en desktop -->
-                <h3 class="text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider mt-6 mb-3">
+                <div class="hidden lg:block">
-                    Agregar rápido
+                    <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6 mb-3">
-                </h3>
+                        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 básico -->
-            <div class="h-14 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20 flex items-center justify-between px-4">
-                <div class="flex items-center gap-4">
-                    <h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm">
-                        {{ documentTitle }}
-                    </h2>
-                </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>
                     
+                    <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>
+
+                <!-- 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>
 
-            <!-- TextFormatter como toolbar estático -->
+        <!-- Á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
-                :element="textFormatterElement"
+                :selected-element="selectedElement"
+                :active-text-element="activeTextElement"
                 :visible="showTextFormatter"
                 @update="updateElement"
                 @smart-align="handleSmartAlign"
@@ -707,6 +727,7 @@ onMounted(() => {
                         @delete="deleteElement"
                         @update="updateElement"
                         @move="moveElement"
+                        @text-selected="handleTextSelected"
                     />
                 </template>
             </PDFViewport>