.env example modificado

Co-authored-by: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Reviewed-on: #2

.env.example

@@ -1,10 +1,10 @@
-VITE_API_URL=http://backend.holos.test:8080
+VITE_API_URL=http://localhost:8080
 VITE_BASE_URL=http://frontend.holos.test
 
 VITE_REVERB_APP_ID=
 VITE_REVERB_APP_KEY=
 VITE_REVERB_APP_SECRET=
-VITE_REVERB_HOST="backend.holos.test"
+VITE_REVERB_HOST="localhost"
 VITE_REVERB_PORT=8080
 VITE_REVERB_SCHEME=http
 VITE_REVERB_ACTIVE=false

docker-compose.yml

@@ -10,6 +10,7 @@ services:
       - frontend-v1:/var/www/gols-frontend-v1/node_modules
     networks:
       - gols-network
+    mem_limit: 512m
 volumes:
   frontend-v1:
     driver: local

limpiar_docker.sh

@@ -0,0 +1,5 @@
+echo "eliminando imagenes no utilizadas..."
+
+docker image prune -a -f
+
+echo "¡Limpio!"

package-lock.json

@@ -12,6 +12,7 @@
         "@tailwindcss/postcss": "^4.0.9",
         "@tailwindcss/vite": "^4.0.9",
         "@vitejs/plugin-vue": "^5.2.1",
+        "@vuepic/vue-datepicker": "^11.0.2",
         "apexcharts": "^5.3.5",
         "axios": "^1.8.1",
         "laravel-echo": "^2.0.2",
@@ -1507,6 +1508,31 @@
       "integrity": "sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==",
       "license": "MIT"
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-11.0.2.tgz",
+      "integrity": "sha512-uHh78mVBXCEjam1uVfTzZ/HkyDwut/H6b2djSN9YTF+l/EA+XONfdCnOVSi1g+qVGSy65DcQAwyBNidAssnudQ==",
+      "license": "MIT",
+      "dependencies": {
+        "date-fns": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.3.0"
+      }
+    },
+    "node_modules/@vuepic/vue-datepicker/node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/@yr/monotone-cubic-spline": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",

package.json

@@ -14,6 +14,7 @@
     "@tailwindcss/postcss": "^4.0.9",
     "@tailwindcss/vite": "^4.0.9",
     "@vitejs/plugin-vue": "^5.2.1",
+    "@vuepic/vue-datepicker": "^11.0.2",
     "apexcharts": "^5.3.5",
     "axios": "^1.8.1",
     "laravel-echo": "^2.0.2",

src/components/Holos/Calendar.vue

@@ -0,0 +1,191 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { Calendar } from 'v-calendar';
+import 'v-calendar/style.css';
+
+// Props del componente
+const props = defineProps({
+    // Días de conflicto a pintar en rojo
+    conflictDays: {
+        type: Array,
+        default: () => []
+    },
+    // Configuración adicional
+    locale: {
+        type: String,
+        default: 'es'
+    }
+});
+
+// Emits
+const emit = defineEmits(['monthChanged']);
+
+// Variables reactivas
+const currentMonth = ref(new Date());
+const fromPage = ref(null);
+
+// Atributos para el calendario (eventos, vacaciones, etc.)
+const attributes = computed(() => {
+    const attrs = [];
+    
+
+    // Agregar días de conflicto (pintarlos en rojo)
+    if (props.conflictDays && props.conflictDays.length > 0) {
+        props.conflictDays.forEach((day) => {
+            const currentYear = currentMonth.value.getFullYear();
+            const currentMonthNumber = currentMonth.value.getMonth();
+            const conflictDate = new Date(currentYear, currentMonthNumber, day);
+            
+            attrs.push({
+                key: `conflict-${day}`,
+                dates: conflictDate,
+                highlight: {
+                    color: 'red',
+                    fillMode: 'solid'
+                },
+                popover: {
+                    label: `Día con conflictos de vacaciones`,
+                    visibility: 'hover'
+                }
+            });
+        });
+    }
+
+    return attrs;
+});
+
+// Configuración del calendario
+const calendarConfig = computed(() => ({
+    locale: props.locale,
+    firstDayOfWeek: 2, // Lunes
+    masks: {
+        weekdays: 'WWW',
+        navMonths: 'MMMM',
+        title: 'MMMM YYYY'
+    },
+    theme: {
+        isDark: false
+    }
+}));
+
+// Métodos
+const onPageChanged = (page) => {
+    // Actualizar el mes actual cuando se cambia de página
+    currentMonth.value = new Date(page[0].year, page[0].month - 1, 1);
+    emit('monthChanged', page[0].month);
+};
+
+// Watch para re-renderizar cuando cambien los días de conflicto o el mes actual
+watch([() => props.conflictDays, currentMonth], () => {
+    // Los attributes se recalcularán automáticamente al cambiar estas dependencias
+}, { deep: true });
+
+// Exponer métodos para uso externo
+defineExpose({
+    currentMonth
+});
+</script>
+
+<template>
+    <div class="calendar-container bg-white rounded-lg shadow-md p-4">
+        <!-- Header del calendario -->
+        <div class="flex items-center justify-between mb-4">
+            <h3 class="text-lg font-semibold text-gray-900">Calendario</h3>
+        </div>
+
+        <!-- Calendario principal -->
+        <div class="calendar-wrapper">
+            <Calendar
+                v-model="currentMonth"
+                :attributes="attributes"
+                :locale="calendarConfig.locale"
+                :first-day-of-week="calendarConfig.firstDayOfWeek"
+                :masks="calendarConfig.masks"
+                class="custom-calendar"
+                v-model:from-page="fromPage"
+                @update:from-page="onPageChanged"
+                @did-move="onPageChanged"
+                expanded
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* Estilos personalizados para el calendario */
+.calendar-container {
+    min-width: 300px;
+}
+
+.custom-calendar {
+    width: 100%;
+}
+
+/* Personalización de v-calendar */
+:deep(.vc-container) {
+    --vc-border-radius: 0.5rem;
+    --vc-weekday-color: #6B7280;
+    --vc-popover-content-bg: white;
+    --vc-popover-content-border: 1px solid #E5E7EB;
+    border: none;
+    font-family: inherit;
+}
+
+:deep(.vc-header) {
+    padding: 1rem 1rem 0.5rem;
+}
+
+:deep(.vc-title) {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #1F2937;
+}
+
+:deep(.vc-weekday) {
+    color: #6B7280;
+    font-size: 0.75rem;
+    font-weight: 500;
+    padding: 0.5rem 0;
+}
+
+:deep(.vc-day) {
+    min-height: 2rem;
+}
+
+:deep(.vc-day-content) {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.375rem;
+    border: none;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+:deep(.vc-day-content:hover) {
+    background-color: #EFF6FF;
+    color: #2563EB;
+}
+
+:deep(.vc-day-content.vc-day-content-today) {
+    background-color: #DBEAFE;
+    color: #1D4ED8;
+    font-weight: 600;
+}
+
+:deep(.vc-highlights .vc-highlight) {
+    border-radius: 0.375rem;
+}
+
+:deep(.vc-dots) {
+    margin-bottom: 0.125rem;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+    .calendar-container {
+        min-width: auto;
+        margin: 0 -1rem;
+        border-radius: 0;
+    }
+}
+</style>

src/components/Holos/Canvas.vue

@@ -0,0 +1,606 @@
+<script setup>
+import { ref, computed, nextTick, watch } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const props = defineProps({
+    element: {
+        type: Object,
+        required: true
+    },
+    isSelected: {
+        type: Boolean,
+        default: false
+    }
+});
+
+/** Eventos */
+const emit = defineEmits(['select', 'delete', 'update', 'move']);
+
+/** Referencias */
+const isEditing = ref(false);
+const editValue = ref('');
+const editInput = ref(null);
+const editTextarea = ref(null);
+const elementRef = ref(null);
+const isDragging = ref(false);
+const isResizing = ref(false);
+const resizeDirection = ref(null); // 'corner', 'right', 'bottom'
+const dragStart = ref({ x: 0, y: 0 });
+const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 });
+const fileInput = ref(null);
+
+/** Propiedades computadas */
+const elementStyles = computed(() => ({
+    left: `${props.element.x}px`,
+    top: `${props.element.y}px`,
+    width: `${props.element.width || 200}px`,
+    height: `${props.element.height || 40}px`
+}));
+
+/** 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();
+            }
+        });
+    }
+});
+
+/** Métodos */
+const handleSelect = (event) => {
+    event.stopPropagation();
+    emit('select', props.element.id);
+};
+
+const handleDelete = () => {
+    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();
+    });
+};
+
+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
+            });
+        }
+    }
+};
+
+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();
+        }
+    }
+};
+
+// 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 = '';
+};
+
+// 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
+    };
+
+    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;
+
+        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);
+};
+
+// 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
+    };
+
+    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
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+};
+
+const handleResizeMove = (event) => {
+    if (!isResizing.value) return;
+
+    const deltaX = event.clientX - resizeStart.value.x;
+    const deltaY = event.clientY - resizeStart.value.y;
+
+    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));
+    }
+
+    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;
+    }
+};
+
+const getMinHeight = () => {
+    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
+};
+
+const getMaxHeight = () => {
+    return 600; // Máximo general
+};
+</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' || element.type === 'code'),
+            'cursor-se-resize': isResizing && resizeDirection === 'corner',
+            'cursor-e-resize': isResizing && resizeDirection === 'right',
+            'cursor-s-resize': isResizing && resizeDirection === 'bottom'
+        }"
+    >
+        <!-- Input oculto para selección de archivos -->
+        <input
+            ref="fileInput"
+            type="file"
+            accept="image/*"
+            @change="handleFileSelect"
+            class="hidden"
+        />
+
+        <!-- Elemento de Texto -->
+        <div
+            v-if="element.type === 'text'"
+            class="w-full h-full flex items-center px-3 py-2 bg-blue-100 rounded border border-blue-300 text-blue-800 text-sm font-medium dark:bg-blue-900/30 dark:border-blue-600 dark:text-blue-300"
+        >
+            <input
+                v-if="isEditing"
+                ref="editInput"
+                v-model="editValue"
+                @blur="finishEditing"
+                @keydown="handleKeydown"
+                class="w-full bg-transparent outline-none cursor-text"
+                @mousedown.stop
+            />
+            <span v-else class="truncate pointer-events-none">
+                {{ 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 Código -->
+        <div
+            v-else-if="element.type === 'code'"
+            class="w-full h-full bg-gray-900 rounded border overflow-hidden"
+        >
+            <div class="w-full h-6 bg-gray-800 flex items-center px-2 text-xs text-gray-400 border-b border-gray-700">
+                <div class="flex gap-1">
+                    <div class="w-2 h-2 bg-red-500 rounded-full"></div>
+                    <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
+                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
+                </div>
+                <span class="ml-2">{{ element.fileName || 'script.js' }}</span>
+            </div>
+            <div class="p-2 h-[calc(100%-24px)]">
+                <textarea
+                    v-if="isEditing"
+                    ref="editTextarea"
+                    v-model="editValue"
+                    @blur="finishEditing"
+                    @keydown="handleKeydown"
+                    class="w-full h-full bg-transparent text-green-400 text-xs font-mono outline-none resize-none cursor-text"
+                    @mousedown.stop
+                />
+                <pre v-else class="text-green-400 text-xs font-mono overflow-auto h-full pointer-events-none whitespace-pre-wrap">{{ element.content || 'console.log("Hola mundo");' }}</pre>
+            </div>
+        </div>
+
+        <!-- Elemento de Tabla -->
+        <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"
+            class="absolute -top-8 right-0 flex gap-1 opacity-100 transition-opacity z-10"
+        >
+            <!-- Indicador de tamaño -->
+            <div class="px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-sm pointer-events-none">
+                {{ Math.round(element.width || 200) }} × {{ Math.round(element.height || 40) }}
+            </div>
+
+            <!-- Botón para cargar imagen (solo para elementos de imagen) -->
+            <button
+                v-if="element.type === 'image'"
+                @click.stop="() => fileInput.click()"
+                class="w-6 h-6 bg-blue-500 hover:bg-blue-600 text-white rounded text-xs flex items-center justify-center transition-colors shadow-sm"
+                title="Cargar imagen"
+            >
+                <GoogleIcon name="upload" class="text-xs" />
+            </button>
+
+            <!-- Botón eliminar -->
+            <button
+                @click.stop="handleDelete"
+                class="w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded text-xs flex items-center justify-center transition-colors shadow-sm"
+                title="Eliminar"
+            >
+                <GoogleIcon name="close" class="text-xs" />
+            </button>
+        </div>
+
+        <!-- Controles de redimensionamiento mejorados -->
+        <div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none">
+            <!-- Esquina inferior derecha -->
+            <div
+                @mousedown.stop="startResize"
+                class="absolute -bottom-1 -right-1 w-2 h-2 bg-blue-500 border border-white cursor-se-resize pointer-events-auto rounded-sm resize-handle-corner"
+                title="Redimensionar"
+            ></div>
+
+            <!-- Lado derecho -->
+            <div
+                @mousedown.stop="(event) => startResizeEdge(event, 'right')"
+                class="absolute top-1 bottom-1 -right-0.5 w-1 bg-blue-500 opacity-0 cursor-e-resize pointer-events-auto resize-handle-edge"
+                title="Redimensionar ancho"
+            ></div>
+
+            <!-- Lado inferior -->
+            <div
+                @mousedown.stop="(event) => startResizeEdge(event, 'bottom')"
+                class="absolute -bottom-0.5 left-1 right-1 h-1 bg-blue-500 opacity-0 cursor-s-resize pointer-events-auto resize-handle-edge"
+                title="Redimensionar alto"
+            ></div>
+
+            <!-- Puntos de agarre visuales en los bordes (solo visuales) -->
+            <div class="absolute top-1/2 -right-0.5 w-1 h-6 -translate-y-1/2 bg-blue-500 opacity-30 rounded-full pointer-events-none resize-handle-visual"></div>
+            <div class="absolute -bottom-0.5 left-1/2 w-6 h-1 -translate-x-1/2 bg-blue-500 opacity-30 rounded-full pointer-events-none resize-handle-visual"></div>
+        </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>
+
+        <!-- Tooltip con instrucciones -->
+        <div
+            v-if="isSelected && !element.content && element.type !== 'image' && !isResizing"
+            class="absolute -bottom-8 left-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10"
+        >
+            {{ element.type === 'text' ? 'Doble clic para editar texto' : 'Doble clic para editar código' }}
+            {{ element.type === 'code' ? ' (Ctrl+Enter para guardar)' : '' }}
+        </div>
+
+        <!-- Tooltip con instrucciones de redimensionamiento -->
+        <div
+            v-if="isSelected && !isEditing && element.type === 'image' && !element.content && !isResizing"  
+            class="absolute -bottom-8 left-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10"
+        >
+            Arrastra las esquinas para redimensionar
+        </div>
+
+        <!-- Botón para terminar edición de tabla -->
+        <div
+            v-if="isEditing && element.type === 'table'"
+            class="absolute -bottom-10 left-0 flex gap-2 z-20"
+        >
+            <button
+                @click="finishEditing"
+                class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded shadow-sm transition-colors"
+            >
+                Guardar (Ctrl+Enter)
+            </button>
+            <button
+                @click="() => { isEditing = false; editValue = JSON.parse(JSON.stringify(element.content)); }"
+                class="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white text-xs rounded shadow-sm transition-colors"
+            >
+                Cancelar (Esc)
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* Estilos para los controles de redimensionamiento mejorados */
+.resize-handle-corner {
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.resize-handle-corner:hover {
+    background-color: #2563eb;
+    transform: scale(1.1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+.resize-handle-edge {
+    transition: all 0.2s ease;
+}
+
+.resize-handle-edge:hover {
+    opacity: 0.7 !important;
+    background-color: #2563eb;
+}
+
+.resize-handle-visual {
+    transition: all 0.2s ease;
+}
+
+/* Efecto hover para los indicadores visuales */
+.group:hover .resize-handle-visual {
+    opacity: 0.6 !important;
+}
+
+.group:hover .resize-handle-edge {
+    opacity: 0.4 !important;
+}
+
+/* Prevenir selección de texto durante el redimensionamiento */
+.select-none {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+/* Animación suave para los controles */
+@keyframes pulse-resize {
+    0%, 100% {
+        opacity: 0.3;
+    }
+    50% {
+        opacity: 0.7;
+    }
+}
+
+.group:hover .resize-handle-visual {
+    animation: pulse-resize 2s infinite;
+}
+</style>

src/components/Holos/Draggable.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { ref } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const props = defineProps({
+    type: {
+        type: String,
+        required: true, 
+    },
+    icon: String,
+    title: String,
+    description: String,
+});
+
+/** Eventos */
+const emit = defineEmits(['dragstart']);
+
+/** Referencias */
+const isDragging = ref(false);
+
+/** Métodos */
+const handleDragStart = (event) => {
+    isDragging.value = true;
+    event.dataTransfer.setData('text/plain', JSON.stringify({
+        type: props.type,
+        title: props.title
+    }));
+    emit('dragstart', props.type);
+};
+
+const handleDragEnd = () => {
+    isDragging.value = false;
+};
+</script>
+
+<template>
+    <div
+        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="{
+            '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">
+            <GoogleIcon 
+                :name="icon" 
+                class="text-blue-600 dark:text-blue-400 text-lg"
+            />
+        </div>
+        
+        <div class="flex-1 min-w-0">
+            <div class="text-sm font-medium text-gray-900 dark:text-primary-dt">
+                {{ title }}
+            </div>
+            <div class="text-xs text-gray-500 dark:text-primary-dt/70 truncate">
+                {{ description }}
+            </div>
+        </div>
+    </div>
+</template>

src/components/Holos/PDF/Canvas.vue

@@ -30,19 +30,32 @@ const dragStart = ref({ x: 0, y: 0 });
 const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 });
 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`
+        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`;
         }
@@ -50,6 +63,24 @@ const elementStyles = computed(() => {
         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;
@@ -106,6 +137,25 @@ const inputStyles = computed(() => {
     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'
+        }
+    };
+});
+
 /** Watchers */
 watch(() => props.isSelected, (selected) => {
     if (selected && isEditing.value) {
@@ -356,6 +406,44 @@ const getMaxWidth = () => {
 const getMaxHeight = () => {
     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
+        }
+    });
+};
+
+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
+        }
+    });
+};
 </script>
 
 <template>
@@ -386,14 +474,21 @@ const getMaxHeight = () => {
             class="hidden"
         />
 
-        <!-- Elemento de Texto con formato aplicado -->
+        <!-- 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'
+                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
@@ -404,7 +499,12 @@ const getMaxHeight = () => {
                 @keydown="handleKeydown"
                 class="w-full bg-transparent outline-none cursor-text"
                 :class="inputClasses"
-                :style="inputStyles"
+                :style="{
+                    ...inputStyles,
+                    fontFamily: 'Helvetica, Arial, sans-serif',
+                    lineHeight: '1.2',
+                    letterSpacing: 'normal'
+                }"
                 @mousedown.stop
             />
             <span 
@@ -413,14 +513,17 @@ const getMaxHeight = () => {
                 :class="textContainerClasses"
                 :style="{
                     fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
-                    color: element.formatting?.color || '#374151'
+                    color: element.formatting?.color || '#374151',
+                    fontFamily: 'Helvetica, Arial, sans-serif',
+                    lineHeight: '1.2',
+                    letterSpacing: 'normal'
                 }"
             >
                 {{ element.content || 'Nuevo texto' }}
             </span>
         </div>
 
-        <!-- Elemento de Imagen (sin cambios) -->
+        <!-- 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"
@@ -439,7 +542,7 @@ const getMaxHeight = () => {
             </div>
         </div>
 
-        <!-- Elemento de Tabla (sin cambios en esta parte) -->
+        <!-- Elemento de Tabla -->
         <div
             v-else-if="element.type === 'table'"
             class="w-full h-full bg-white rounded border overflow-hidden"
@@ -497,93 +600,95 @@ const getMaxHeight = () => {
             </div>
         </div>
 
-        <!-- Controles del elemento con z-index más alto -->
+        <!-- Controles del elemento -->
         <div
             v-if="isSelected && !isEditing"
-            class="absolute -top-8 right-0 flex gap-1 opacity-100 transition-opacity z-[60]"
+            ref="controlsRef"
+            class="absolute right-0 flex gap-1 opacity-100 transition-opacity z-[60]"
+            :style="controlsPosition.styles"
         >
-            <!-- Indicador de tamaño -->
-            <div class="px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-sm pointer-events-none">
-                {{ Math.round(element.width || 200) }} × {{ Math.round(element.height || 40) }}
-            </div>
+            <!-- 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-6 h-6 bg-blue-500 hover:bg-blue-600 text-white rounded text-xs flex items-center justify-center transition-colors shadow-sm"
+                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-xs" />
+                <GoogleIcon name="upload" class="text-sm" />
             </button>
 
             <!-- Botón eliminar -->
             <button
                 @click.stop="handleDelete"
-                class="w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded text-xs flex items-center justify-center transition-colors shadow-sm"
-                title="Eliminar"
+                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-xs" />
+                <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 mejorados -->
+        <!-- Controles de redimensionamiento  -->
         <div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none z-[55]">
-            <!-- Esquina inferior derecha - MÁS GRANDE Y VISIBLE -->
+            <!-- Esquina inferior derecha -->
             <div
                 @mousedown.stop="startResize"
-                class="absolute -bottom-2 -right-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-se-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
+                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-0.5 bg-white/30 rounded-sm"></div>
+                <div class="absolute inset-1 border border-white/40 rounded-sm"></div>
             </div>
 
-            <!-- Lado derecho - MÁS VISIBLE -->
+            <!-- Lado derecho -->
             <div
                 @mousedown.stop="(event) => startResizeEdge(event, 'right')"
-                class="absolute top-2 bottom-2 -right-1 w-2 bg-blue-500 cursor-e-resize pointer-events-auto rounded-sm shadow-sm hover:bg-blue-600 transition-all"
+                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"
             >
-                <!-- Indicador visual en el centro -->
-                <div class="absolute top-1/2 left-1/2 w-0.5 h-4 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
+                <div 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 - MÁS VISIBLE -->
+            <!-- Lado inferior -->
             <div
                 @mousedown.stop="(event) => startResizeEdge(event, 'bottom')"
-                class="absolute -bottom-1 left-2 right-2 h-2 bg-blue-500 cursor-s-resize pointer-events-auto rounded-sm shadow-sm hover:bg-blue-600 transition-all"
+                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"
             >
-                <!-- Indicador visual en el centro -->
-                <div class="absolute top-1/2 left-1/2 w-4 h-0.5 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
-            </div>
-
-            <!-- Esquinas adicionales para mejor UX -->
-            <div
-                @mousedown.stop="startResize"
-                class="absolute -top-2 -left-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-nw-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
-                title="Redimensionar"
-            >
-                <div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
-            </div>
-            
-            <div
-                @mousedown.stop="startResize"
-                class="absolute -top-2 -right-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-ne-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
-                title="Redimensionar"
-            >
-                <div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
-            </div>
-            
-            <div
-                @mousedown.stop="startResize"
-                class="absolute -bottom-2 -left-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-sw-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
-                title="Redimensionar"
-            >
-                <div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
+                <div 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"
@@ -599,7 +704,8 @@ const getMaxHeight = () => {
         <!-- Botón para terminar edición de tabla -->
         <div
             v-if="isEditing && element.type === 'table'"
-            class="absolute -bottom-10 left-0 flex gap-2 z-[60]"
+            class="absolute left-0 flex gap-2 z-[60]"
+            :style="element.y < 100 ? { top: '100%', marginTop: '8px' } : { bottom: '100%', marginBottom: '8px' }"
         >
             <button
                 @click="finishEditing"
@@ -618,29 +724,6 @@ const getMaxHeight = () => {
 </template>
 
 <style scoped>
-/* Estilos existentes sin cambios... */
-.resize-handle-corner {
-    transition: all 0.2s ease;
-}
-
-.resize-handle-corner:hover {
-    transform: scale(1.1);
-}
-
-.resize-handle-edge {
-    transition: all 0.2s ease;
-    opacity: 0.7;
-}
-
-.resize-handle-edge:hover {
-    opacity: 1;
-    transform: scale(1.05);
-}
-
-.group:hover .resize-handle-edge {
-    opacity: 0.8;
-}
-
 .select-none {
     user-select: none;
     -webkit-user-select: none;

src/components/Holos/PDF/PDFViewport.vue

@@ -148,25 +148,26 @@ defineExpose({
                     <button
                         @click="setCurrentPage(Math.max(1, currentPage - 1))"
                         :disabled="currentPage <= 1"
-                        class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded hover:bg-gray-100 dark:hover:bg-primary/10"
+                        class="p-2 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded-md hover:bg-gray-100 dark:hover:bg-primary/10 transition-colors"
                         title="Página anterior"
                     >
-                        <GoogleIcon name="keyboard_arrow_left" class="text-lg" />
+                        <GoogleIcon name="keyboard_arrow_left" class="text-xl" />
                     </button>
                     
                     <button
                         @click="handleNextPage"
                         :disabled="isExporting"
-                        class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded hover:bg-gray-100 dark:hover:bg-primary/10 relative"
+                        class="p-2 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded-md hover:bg-gray-100 dark:hover:bg-primary/10 relative transition-colors"
                         :title="currentPage >= totalPages ? 'Crear nueva página' : 'Página siguiente'"
                     >
-                        <GoogleIcon name="keyboard_arrow_right" class="text-lg" />
-                        <!-- Indicador solo cuando estamos en la última página -->
-                        <GoogleIcon 
+                        <GoogleIcon name="keyboard_arrow_right" class="text-xl" />
+                        <!-- Indicador mejorado -->
+                        <div 
                             v-if="currentPage >= totalPages"
-                            name="add" 
-                            class="absolute -top-1 -right-1 text-xs text-green-500 bg-white rounded-full"
-                        />
+                            class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full flex items-center justify-center"
+                        >
+                            <GoogleIcon name="add" class="text-white text-xs" />
+                        </div>
                     </button>
                 </div>
             </div>
@@ -175,14 +176,15 @@ defineExpose({
                 <!-- Selector de tamaño de página -->
                 <PageSizeSelector v-model="pageSize" />
                 
-                <span class="text-xs text-gray-500 dark:text-primary-dt/70 bg-gray-50 dark:bg-primary/10 px-2 py-1 rounded">
-                    {{ Math.round(ZOOM_LEVEL * 100) }}% • {{ currentPageSize.label }}
+                <!-- Info de página -->
+                <span class="text-xs text-gray-500 dark:text-primary-dt/70 bg-gray-50 dark:bg-primary/10 px-3 py-1.5 rounded-md border border-gray-200 dark:border-primary/20">
+                    {{ currentPageSize.label }}
                 </span>
                 
                 <button
                     @click="addPage"
                     :disabled="isExporting"
-                    class="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors disabled:opacity-50 font-medium"
+                    class="flex items-center gap-2 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors disabled:opacity-50 font-medium shadow-sm"
                 >
                     <GoogleIcon name="add" class="text-sm" />
                     Nueva Página
@@ -190,16 +192,16 @@ defineExpose({
             </div>
         </div>
 
-        <!-- Viewport de páginas horizontal -->
+        <!-- Resto del viewport -->
         <div
             ref="viewportRef"
             class="flex-1 overflow-auto"
-            style="background-color: #f8fafc; background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px); background-size: 24px 24px;"
+            style="background-color: #f8fafc; background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px); background-size: 20px 20px;"
         >
             <!-- Contenedor horizontal centrado -->
-            <div class="flex items-center justify-center min-h-full p-6">
-                <div class="flex items-center gap-8">
-                    <!-- Páginas -->
+            <div class="flex items-center justify-center min-h-full p-8">
+                <div class="flex items-center gap-10">
+                    <!-- Páginas MEJORADAS -->
                     <div
                         v-for="(page, pageIndex) in pages"
                         :key="page.id"
@@ -207,38 +209,38 @@ defineExpose({
                         class="relative group flex-shrink-0"
                     >
                         <!-- Header de página -->
-                        <div class="flex flex-col items-center mb-3">
-                            <div class="flex items-center gap-3">
-                                <span class="text-sm font-medium text-gray-600 dark:text-primary-dt/80">
+                        <div class="flex flex-col items-center mb-4">
+                            <div class="flex items-center gap-3 mb-1">
+                                <span class="text-sm font-semibold text-gray-700 dark:text-primary-dt/90 bg-white dark:bg-primary-d px-3 py-1 rounded-full shadow-sm border border-gray-200 dark:border-primary/20">
                                     Página {{ pageIndex + 1 }}
                                 </span>
                                 <button
                                     v-if="totalPages > 1"
                                     @click="deletePage(pageIndex)"
                                     :disabled="isExporting"
-                                    class="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-700 disabled:opacity-50 p-1 rounded hover:bg-red-50 transition-all"
+                                    class="opacity-0 group-hover:opacity-100 w-7 h-7 text-red-500 hover:text-white hover:bg-red-500 disabled:opacity-50 rounded-full flex items-center justify-center transition-all duration-200"
                                     title="Eliminar página"
                                 >
                                     <GoogleIcon name="delete" class="text-sm" />
                                 </button>
                             </div>
-                            <span class="text-xs text-gray-400 dark:text-primary-dt/50">
+                            <span class="text-xs text-gray-500 dark:text-primary-dt/60">
                                 {{ currentPageSize.label }}
                             </span>
                         </div>
                         
-                        <!-- Contenedor de página con sombra -->
+                        <!-- Contenedor de página -->
                         <div class="relative">
-                            <!-- Sombra de página -->
-                            <div class="absolute top-2 left-2 w-full h-full bg-gray-400/30 rounded-lg"></div>
+                            <!-- Sombra mejorada -->
+                            <div class="absolute top-3 left-3 w-full h-full bg-gray-400/20 rounded-xl blur-sm"></div>
                             
                             <!-- Página PDF -->
                             <div
-                                class="pdf-page relative bg-white rounded-lg border border-gray-300 dark:border-primary/20 overflow-hidden"
+                                class="pdf-page relative bg-white rounded-xl border border-gray-300 dark:border-primary/30 overflow-hidden transition-all duration-300"
                                 :class="{
-                                    'ring-2 ring-blue-500 ring-opacity-50 shadow-lg': currentPage === pageIndex + 1,
-                                    'shadow-md hover:shadow-lg': currentPage !== pageIndex + 1,
-                                    'opacity-50': isExporting
+                                    'ring-3 ring-blue-500/50 shadow-2xl scale-105': currentPage === pageIndex + 1,
+                                    'shadow-lg hover:shadow-xl hover:scale-102': currentPage !== pageIndex + 1,
+                                    'opacity-60': isExporting
                                 }"
                                 :style="{
                                     width: `${scaledPageWidth}px`,
@@ -248,11 +250,11 @@ defineExpose({
                                 @dragover="handleDragOver"
                                 @click="(e) => handleClick(e, pageIndex)"
                             >
-                                <!-- Área de contenido con márgenes visuales -->
+                                <!-- Área de contenido -->
                                 <div class="relative w-full h-full">
-                                    <!-- Guías de margen -->
+                                    <!-- Guías de margen SUTILES -->
                                     <div
-                                        class="absolute border border-dashed border-blue-300/40 pointer-events-none"
+                                        class="absolute border border-dashed border-blue-300/30 pointer-events-none rounded-lg"
                                         :style="{
                                             top: `${PAGE_MARGIN * ZOOM_LEVEL}px`,
                                             left: `${PAGE_MARGIN * ZOOM_LEVEL}px`,
@@ -261,7 +263,7 @@ defineExpose({
                                         }"
                                     ></div>
                                     
-                                    <!-- Elementos de la página con transformación -->
+                                    <!-- Elementos de la página -->
                                     <div 
                                         class="absolute inset-0"
                                         :style="{
@@ -288,10 +290,10 @@ defineExpose({
                                     class="absolute inset-0 flex items-center justify-center pointer-events-none z-10"
                                     :style="{ transform: `scale(${1/ZOOM_LEVEL})` }"
                                 >
-                                    <div class="text-center text-gray-400 dark:text-primary-dt/50">
-                                        <GoogleIcon name="description" class="text-4xl mb-2" />
-                                        <p class="text-sm font-medium">Página {{ pageIndex + 1 }}</p>
-                                        <p class="text-xs">Arrastra elementos aquí</p>
+                                    <div class="text-center text-gray-400 dark:text-primary-dt/50 p-6 bg-gray-50/80 dark:bg-primary/5 rounded-xl border-2 border-dashed border-gray-300/50 dark:border-primary/20">
+                                        <GoogleIcon name="description" class="text-5xl mb-3 opacity-60" />
+                                        <p class="text-base font-medium mb-1">Página {{ pageIndex + 1 }}</p>
+                                        <p class="text-sm opacity-75">Arrastra elementos aquí</p>
                                     </div>
                                 </div>
                             </div>
@@ -304,12 +306,18 @@ defineExpose({
         <!-- Overlay durante exportación -->
         <div
             v-if="isExporting"
-            class="absolute inset-0 bg-white/90 dark:bg-primary-d/90 flex items-center justify-center z-50 backdrop-blur-sm"
+            class="absolute inset-0 bg-white/95 dark:bg-primary-d/95 flex items-center justify-center z-50 backdrop-blur-sm"
         >
-            <div class="text-center bg-white dark:bg-primary-d rounded-lg p-6 shadow-lg border border-gray-200 dark:border-primary/20">
-                <GoogleIcon name="picture_as_pdf" class="text-5xl text-red-600 dark:text-red-400 animate-pulse mb-3" />
-                <p class="text-lg font-semibold text-gray-900 dark:text-primary-dt mb-1">Generando PDF...</p>
-                <p class="text-sm text-gray-500 dark:text-primary-dt/70">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
+            <div class="text-center bg-white dark:bg-primary-d rounded-2xl p-8 shadow-2xl border border-gray-200 dark:border-primary/20 max-w-sm w-full mx-4">
+                <div class="relative mb-4">
+                    <GoogleIcon name="picture_as_pdf" class="text-6xl text-red-600 dark:text-red-400 animate-pulse" />
+                    <div class="absolute inset-0 bg-red-100 dark:bg-red-900/20 rounded-full animate-ping opacity-20"></div>
+                </div>
+                <p class="text-xl font-semibold text-gray-900 dark:text-primary-dt mb-2">Generando PDF</p>
+                <p class="text-sm text-gray-600 dark:text-primary-dt/70 mb-4">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
+                <div class="w-full bg-gray-200 dark:bg-primary/20 rounded-full h-1">
+                    <div class="bg-red-600 dark:bg-red-400 h-1 rounded-full animate-pulse" style="width: 100%"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -317,20 +325,16 @@ defineExpose({
 
 <style scoped>
 .pdf-page {
-    transition: all 0.3s ease;
-    position: relative;
+    transform-origin: center;
 }
 
-.pdf-page:hover {
-    transform: translateY(-2px);
+.scale-102 {
+    transform: scale(1.02);
 }
 
-.pdf-page.ring-2 {
-    transform: translateY(-4px);
-}
-
-.overflow-auto {
-    scroll-behavior: smooth;
+.overflow-auto::-webkit-scrollbar {
+    height: 6px;
+    width: 6px;
 }
 
 .overflow-auto::-webkit-scrollbar-track {
@@ -339,15 +343,10 @@ defineExpose({
 
 .overflow-auto::-webkit-scrollbar-thumb {
     background: #cbd5e1;
-    border-radius: 4px;
+    border-radius: 3px;
 }
 
 .overflow-auto::-webkit-scrollbar-thumb:hover {
     background: #94a3b8;
 }
-
-.overflow-auto::-webkit-scrollbar {
-    height: 8px;
-    width: 8px;
-}
 </style>

src/components/Holos/PDF/PageSizeSelector.vue

@@ -69,13 +69,13 @@ const selectSize = (size) => {
 
 <template>
     <div class="relative">
-        <!-- Selector principal -->
+        <!-- Selector principal MEJORADO -->
         <button
             @click="isOpen = !isOpen"
-            class="flex items-center gap-2 px-3 py-2 text-sm bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-md hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
+            class="flex items-center gap-2 px-3 py-2 text-sm bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-lg hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors shadow-sm"
         >
             <GoogleIcon name="aspect_ratio" class="text-gray-500 dark:text-primary-dt/70" />
-            <span class="text-gray-700 dark:text-primary-dt">{{ selectedSize.name }}</span>
+            <span class="text-gray-700 dark:text-primary-dt font-medium">{{ selectedSize.name }}</span>
             <GoogleIcon 
                 name="expand_more" 
                 class="text-gray-400 dark:text-primary-dt/50 transition-transform"
@@ -87,34 +87,34 @@ const selectSize = (size) => {
         <div
             v-if="isOpen"
             @click.away="isOpen = false"
-            class="absolute top-full left-0 mt-1 w-72 bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-lg shadow-lg z-50 py-2"
+            class="absolute top-full left-0 mt-2 w-80 bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-xl shadow-xl z-50 py-3"
         >
-            <div class="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider border-b border-gray-100 dark:border-primary/20">
+            <div class="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider border-b border-gray-100 dark:border-primary/20 mb-2">
                 Tamaños de página
             </div>
             
-            <div class="max-h-64 overflow-y-auto">
+            <div class="max-h-72 overflow-y-auto">
                 <button
                     v-for="size in pageSizes"
                     :key="size.name"
                     @click="selectSize(size)"
-                    class="w-full flex items-center gap-3 px-3 py-3 hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors text-left"
+                    class="w-full flex items-center gap-4 px-4 py-3 hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors text-left"
                     :class="{
-                        'bg-blue-50 dark:bg-blue-900/20': selectedSize.name === size.name
+                        'bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500': selectedSize.name === size.name
                     }"
                 >
                     <div class="flex-shrink-0">
                         <div 
-                            class="w-8 h-10 border border-gray-300 dark:border-primary/30 rounded-sm bg-white dark:bg-primary-d flex items-center justify-center"
+                            class="w-10 h-12 border-2 border-gray-300 dark:border-primary/30 rounded-md bg-white dark:bg-primary-d flex items-center justify-center shadow-sm"
                             :class="{
-                                'border-blue-500 dark:border-blue-400': selectedSize.name === size.name
+                                'border-blue-500 dark:border-blue-400 shadow-blue-200': selectedSize.name === size.name
                             }"
                         >
                             <div 
                                 class="bg-gray-200 dark:bg-primary/20 rounded-sm"
                                 :style="{
-                                    width: `${Math.min(20, (size.width / size.height) * 32)}px`,
-                                    height: `${Math.min(32, (size.height / size.width) * 20)}px`
+                                    width: `${Math.min(24, (size.width / size.height) * 36)}px`,
+                                    height: `${Math.min(36, (size.height / size.width) * 24)}px`
                                 }"
                                 :class="{
                                     'bg-blue-200 dark:bg-blue-800': selectedSize.name === size.name
@@ -124,15 +124,17 @@ const selectSize = (size) => {
                     </div>
                     
                     <div class="flex-1 min-w-0">
-                        <div class="font-medium text-gray-900 dark:text-primary-dt">{{ size.label }}</div>
-                        <div class="text-xs text-gray-500 dark:text-primary-dt/70">{{ size.description }}</div>
-                        <div class="text-xs text-gray-400 dark:text-primary-dt/50 mt-1">
-                            {{ size.width }} x {{ size.height }} px
+                        <div class="font-semibold text-gray-900 dark:text-primary-dt text-base">{{ size.name }}</div>
+                        <div class="text-sm text-gray-600 dark:text-primary-dt/80">{{ size.label.split('(')[1]?.replace(')', '') || size.label }}</div>
+                        <div class="text-xs text-gray-500 dark:text-primary-dt/60 mt-1">
+                            {{ size.description }}
                         </div>
                     </div>
                     
                     <div v-if="selectedSize.name === size.name" class="flex-shrink-0">
-                        <GoogleIcon name="check" class="text-blue-500 dark:text-blue-400" />
+                        <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
+                            <GoogleIcon name="check" class="text-white text-sm" />
+                        </div>
                     </div>
                 </button>
             </div>

src/components/Holos/PDF/TextFormatter.vue

@@ -60,6 +60,26 @@ const updateFormatting = (key, value) => {
     });
 };
 
+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
+        }
+    });
+};
+
 /** Colores predefinidos */
 const predefinedColors = [
     '#000000', '#333333', '#666666', '#999999',

src/components/Holos/PDFViewport.vue

@@ -0,0 +1,261 @@
+<script setup>
+import { ref, computed, nextTick } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const props = defineProps({
+    pages: {
+        type: Array,
+        default: () => [{ id: 1, elements: [] }]
+    },
+    selectedElementId: String,
+    isExporting: Boolean
+});
+
+/** Eventos */
+const emit = defineEmits(['drop', 'dragover', 'click', 'add-page', 'delete-page', 'page-change']);
+
+/** Referencias */
+const viewportRef = ref(null);
+const currentPage = ref(1);
+
+/** Constantes de diseño */
+const PAGE_WIDTH = 794; // A4 width in pixels (210mm @ 96dpi * 3.78)
+const PAGE_HEIGHT = 1123; // A4 height in pixels (297mm @ 96dpi * 3.78)
+const PAGE_MARGIN = 40;
+const ZOOM_LEVEL = 0.8; // Factor de escala para visualización
+
+/** Propiedades computadas */
+const scaledPageWidth = computed(() => PAGE_WIDTH * ZOOM_LEVEL);
+const scaledPageHeight = computed(() => PAGE_HEIGHT * ZOOM_LEVEL);
+const totalPages = computed(() => props.pages.length);
+
+/** Métodos */
+const handleDrop = (event, pageIndex) => {
+    event.preventDefault();
+    
+    const pageElement = event.currentTarget;
+    const rect = pageElement.getBoundingClientRect();
+    
+    // Calcular posición relativa a la página específica
+    const relativeX = (event.clientX - rect.left) / ZOOM_LEVEL;
+    const relativeY = (event.clientY - rect.top) / ZOOM_LEVEL;
+    
+    emit('drop', {
+        originalEvent: event,
+        pageIndex,
+        x: Math.max(PAGE_MARGIN, Math.min(PAGE_WIDTH - PAGE_MARGIN, relativeX)),
+        y: Math.max(PAGE_MARGIN, Math.min(PAGE_HEIGHT - PAGE_MARGIN, relativeY))
+    });
+};
+
+const handleDragOver = (event) => {
+    event.preventDefault();
+    emit('dragover', event);
+};
+
+const handleClick = (event, pageIndex) => {
+    if (event.target.classList.contains('pdf-page')) {
+        emit('click', { originalEvent: event, pageIndex });
+    }
+};
+
+const addPage = () => {
+    emit('add-page');
+    nextTick(() => {
+        scrollToPage(totalPages.value);
+    });
+};
+
+const deletePage = (pageIndex) => {
+    if (totalPages.value > 1) {
+        emit('delete-page', pageIndex);
+    }
+};
+
+const scrollToPage = (pageNumber) => {
+    if (viewportRef.value) {
+        const pageElement = viewportRef.value.querySelector(`[data-page="${pageNumber}"]`);
+        if (pageElement) {
+            pageElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }
+};
+
+const setCurrentPage = (pageNumber) => {
+    currentPage.value = pageNumber;
+    emit('page-change', pageNumber);
+};
+
+/** Métodos expuestos */
+defineExpose({
+    scrollToPage,
+    setCurrentPage,
+    PAGE_WIDTH,
+    PAGE_HEIGHT,
+    ZOOM_LEVEL
+});
+</script>
+
+<template>
+    <div class="flex-1 flex flex-col bg-gray-100 dark:bg-primary-d/20">
+        <!-- Toolbar de páginas -->
+        <div class="flex items-center justify-between px-4 py-2 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20">
+            <div class="flex items-center gap-3">
+                <span class="text-sm text-gray-600 dark:text-primary-dt">
+                    Página {{ currentPage }} de {{ totalPages }}
+                </span>
+                
+                <div class="flex items-center gap-1">
+                    <button
+                        @click="setCurrentPage(Math.max(1, currentPage - 1))"
+                        :disabled="currentPage <= 1"
+                        class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt"
+                    >
+                        <GoogleIcon name="keyboard_arrow_left" class="text-lg" />
+                    </button>
+                    
+                    <button
+                        @click="setCurrentPage(Math.min(totalPages, currentPage + 1))"
+                        :disabled="currentPage >= totalPages"
+                        class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt"
+                    >
+                        <GoogleIcon name="keyboard_arrow_right" class="text-lg" />
+                    </button>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-2">
+                
+                <button
+                    @click="addPage"
+                    :disabled="isExporting"
+                    class="flex items-center gap-1 px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors disabled:opacity-50"
+                >
+                    <GoogleIcon name="add" class="text-sm" />
+                    Nueva Página
+                </button>
+            </div>
+        </div>
+
+        <!-- Viewport de páginas -->
+        <div
+            ref="viewportRef"
+            class="flex-1 overflow-auto p-8"
+            style="background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"
+        >
+            <div class="flex flex-col items-center gap-8">
+                <!-- Páginas -->
+                <div
+                    v-for="(page, pageIndex) in pages"
+                    :key="page.id"
+                    :data-page="pageIndex + 1"
+                    class="relative"
+                    @mouseenter="setCurrentPage(pageIndex + 1)"
+                >
+                    <!-- Número de página -->
+                    <div class="absolute -top-6 left-0 flex items-center gap-2 text-xs text-gray-500 dark:text-primary-dt/70">
+                        <span>Página {{ pageIndex + 1 }}</span>
+                        
+                        <button
+                            v-if="totalPages > 1"
+                            @click="deletePage(pageIndex)"
+                            :disabled="isExporting"
+                            class="text-red-500 hover:text-red-700 disabled:opacity-50"
+                            title="Eliminar página"
+                        >
+                            <GoogleIcon name="delete" class="text-sm" />
+                        </button>
+                    </div>
+                    
+                    <!-- Página PDF -->
+                    <div
+                        class="pdf-page relative bg-white rounded-lg shadow-lg border border-gray-300 dark:border-primary/20"
+                        :class="{
+                            'ring-2 ring-blue-500': currentPage === pageIndex + 1,
+                            'opacity-50': isExporting
+                        }"
+                        :style="{
+                            width: `${scaledPageWidth}px`,
+                            height: `${scaledPageHeight}px`,
+                            transform: `scale(${ZOOM_LEVEL})`,
+                            transformOrigin: 'top left'
+                        }"
+                        @drop="(e) => handleDrop(e, pageIndex)"
+                        @dragover="handleDragOver"
+                        @click="(e) => handleClick(e, pageIndex)"
+                    >
+                        <!-- Márgenes visuales -->
+                        <div
+                            class="absolute border border-dashed border-gray-300 dark:border-primary/30 pointer-events-none"
+                            :style="{
+                                top: `${PAGE_MARGIN}px`,
+                                left: `${PAGE_MARGIN}px`,
+                                width: `${PAGE_WIDTH - (PAGE_MARGIN * 2)}px`,
+                                height: `${PAGE_HEIGHT - (PAGE_MARGIN * 2)}px`
+                            }"
+                        ></div>
+                        
+                        <!-- Elementos de la página -->
+                        <slot
+                            name="elements"
+                            :page="page"
+                            :pageIndex="pageIndex"
+                            :pageWidth="PAGE_WIDTH"
+                            :pageHeight="PAGE_HEIGHT"
+                        />
+                        
+                        <!-- Indicador de página vacía -->
+                        <div
+                            v-if="page.elements.length === 0"
+                            class="absolute inset-0 flex items-center justify-center pointer-events-none"
+                        >
+                            <div class="text-center text-gray-400 dark:text-primary-dt/50">
+                                <GoogleIcon name="description" class="text-4xl mb-2" />
+                                <p class="text-sm">Página {{ pageIndex + 1 }}</p>
+                                <p class="text-xs">Arrastra elementos aquí</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Regla inferior (tamaño de referencia) -->
+                    <div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/50 text-center">
+                        210 × 297 mm (A4)
+                    </div>
+                </div>
+                
+                <!-- Botón para agregar página al final -->
+                <button
+                    @click="addPage"
+                    :disabled="isExporting"
+                    class="flex flex-col items-center justify-center w-40 h-20 border-2 border-dashed border-gray-300 dark:border-primary/30 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors disabled:opacity-50"
+                >
+                    <GoogleIcon name="add" class="text-2xl text-gray-400 dark:text-primary-dt/50" />
+                    <span class="text-xs text-gray-500 dark:text-primary-dt/70 mt-1">Nueva Página</span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Overlay durante exportación -->
+        <div
+            v-if="isExporting"
+            class="absolute inset-0 bg-white/80 dark:bg-primary-d/80 flex items-center justify-center z-50"
+        >
+            <div class="text-center">
+                <GoogleIcon name="picture_as_pdf" class="text-4xl text-red-600 dark:text-red-400 animate-pulse mb-2" />
+                <p class="text-sm font-medium text-gray-900 dark:text-primary-dt">Generando PDF...</p>
+                <p class="text-xs text-gray-500 dark:text-primary-dt/70">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.pdf-page {
+    transition: all 0.2s ease;
+}
+
+.pdf-page:hover {
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+</style>

src/layouts/AdminLayout.vue

@@ -1,7 +1,11 @@
 <script setup>
 import { onMounted } from 'vue';
-import useLoader    from '@Stores/Loader';
 import { hasPermission } from '@Plugins/RolePermission';
+import { hasToken } from '@Services/Api';
+import { reloadApp } from '@Services/Page';
+import { useRouter } from 'vue-router';
+
+import useLoader    from '@Stores/Loader';
 
 import Layout  from '@Holos/Layout/App.vue';
 import Link    from '@Holos/Skeleton/Sidebar/Link.vue';
@@ -10,6 +14,7 @@ import DropDown from '@Holos/Skeleton/Sidebar/Drop.vue'
 
 /** Definidores */
 const loader = useLoader()
+const router = useRouter();
 
 /** Propiedades */
 defineProps({
@@ -19,6 +24,12 @@ defineProps({
 /** Ciclos */
 onMounted(() => {
     loader.boot()
+
+    if(!hasToken()) {
+        return router.push({ name: 'auth.index' })
+    } else {
+        reloadApp();
+    }
 })
 
 </script>
@@ -63,6 +74,13 @@ onMounted(() => {
                         />
                 </DropDown>
             </Section>
+            <Section name="Vacaciones">
+                <Link
+                    icon="grid_view"
+                    name="Vacaciones" 
+                    to="admin.vacations.index"
+                />
+            </Section>
             <Section name="Capacitaciones">
                 <DropDown
                     icon="grid_view"

src/layouts/AppLayout.vue

@@ -1,5 +1,9 @@
 <script setup>
 import { onMounted } from 'vue';
+import { hasToken } from '@Services/Api';
+import { reloadApp } from '@Services/Page';
+import { useRouter } from 'vue-router';
+
 import useLoader    from '@Stores/Loader';
 
 import Layout  from '@Holos/Layout/App.vue';
@@ -8,6 +12,7 @@ import Section from '@Holos/Skeleton/Sidebar/Section.vue';
 
 /** Definidores */
 const loader = useLoader()
+const router = useRouter();
 
 /** Propiedades */
 defineProps({
@@ -17,6 +22,12 @@ defineProps({
 /** Ciclos */
 onMounted(() => {
     loader.boot()
+
+    if(!hasToken()) {
+        return router.push({ name: 'auth.index' })
+    } else {
+        reloadApp();
+    }
 })
 
 </script>
@@ -32,6 +43,11 @@ onMounted(() => {
                     name="Dashboard" 
                     to="dashboard.index"
                 />
+                <Link
+                    icon="calendar_month"
+                    name="Vacaciones" 
+                    to="vacations.index"
+                />
                 <Link
                     icon="person"
                     name="Perfil" 

src/layouts/CoordinatorLayout.vue

@@ -1,5 +1,9 @@
 <script setup>
 import { onMounted } from 'vue';
+import { hasToken } from '@Services/Api';
+import { reloadApp } from '@Services/Page';
+import { useRouter } from 'vue-router';
+
 import useLoader    from '@Stores/Loader';
 
 import Layout  from '@Holos/Layout/App.vue';
@@ -8,6 +12,7 @@ import Section from '@Holos/Skeleton/Sidebar/Section.vue';
 
 /** Definidores */
 const loader = useLoader()
+const router = useRouter();
 
 /** Propiedades */
 defineProps({
@@ -17,6 +22,12 @@ defineProps({
 /** Ciclos */
 onMounted(() => {
     loader.boot()
+
+    if(!hasToken()) {
+        return router.push({ name: 'auth.index' })
+    } else {
+        reloadApp();
+    }
 })
 
 </script>
@@ -32,6 +43,11 @@ onMounted(() => {
                     name="Dashboard" 
                     to="coordinator.dashboard.index"
                 />
+                <Link
+                    icon="calendar_month"
+                    name="Vacaciones" 
+                    to="vacations.coordinator.index"
+                />
             </Section>
             <Section
                 :name="$t('admin.title')"

src/pages/Auth/Login.vue

@@ -30,11 +30,39 @@ const login = () => {
           defineUser(res.user)
           defineCsrfToken(res.csrf)
 
-          location.replace('/')
+          // Redirección basada en roles
+          redirectBasedOnRole(res.userRoles)
         }
     });
 };
 
+const redirectBasedOnRole = (userRoles) => {
+    // Si no tiene roles o el array está vacío, redirigir a "/"
+    if (!userRoles || userRoles.length === 0) {
+        router.push('/')
+        return
+    }
+
+    // Verificar si tiene el rol coordinador
+    const hasCoordinatorRole = userRoles.some(role => role.name === 'coordinator')
+    if (hasCoordinatorRole) {
+        router.push('/coordinator')
+        return
+    }
+
+    // Verificar si tiene rol admin o developer
+    const hasAdminOrDeveloperRole = userRoles.some(role => 
+        role.name === 'admin' || role.name === 'developer'
+    )
+    if (hasAdminOrDeveloperRole) {
+        router.push('/admin')
+        return
+    }
+
+    // Si no cumple ninguna condición, redirigir a "/"
+    router.push('/')
+};
+
 /** Ciclos */
 onMounted(() => {
   if (hasToken()) {

src/pages/Dashboard/Module.js

@@ -0,0 +1,16 @@
+import { lang } from '@Lang/i18n';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`dashboard.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `dashboard.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`dashboard.${str}`)
+
+export {
+    viewTo,
+    apiTo,
+    transl
+}

src/pages/Maquetador/Index.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { ref, onMounted, computed } from 'vue';
+import { ref, nextTick, onMounted, computed } from 'vue';
 import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
 import GoogleIcon from '@Shared/GoogleIcon.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';
+import Draggable from '@Holos/Draggable.vue';
+import CanvasElement from '@Holos/Canvas.vue';
+import PDFViewport from '@Holos/PDFViewport.vue';
 
 /** Estado reactivo */
 const pages = ref([{ id: 1, elements: [] }]);
@@ -14,61 +13,10 @@ const elementCounter = ref(0);
 const documentTitle = ref('Documento sin título');
 const isExporting = ref(false);
 const currentPage = ref(1);
-const pageIdCounter = ref(1); // <-- Agregar contador separado para páginas
-
-/** Estado para tamaño de página */
-const currentPageSize = ref({
-    width: 794,  // A4 por defecto
-    height: 1123
-});
-
-/** Manejar cambio de tamaño de página */
-const handlePageSizeChange = (sizeData) => {
-    currentPageSize.value = sizeData.dimensions;
-    // Aquí podrías ajustar elementos existentes si es necesario
-    window.Notify.info(`Tamaño de página cambiado a ${sizeData.size}`);
-};
-
-// Actualizar el método moveElement para usar el tamaño dinámico
-const moveElement = (moveData) => {
-    const element = allElements.value.find(el => el.id === moveData.id);
-    if (element) {
-        element.x = Math.max(0, Math.min(currentPageSize.value.width - (element.width || 200), moveData.x));
-        element.y = Math.max(0, Math.min(currentPageSize.value.height - (element.height || 40), moveData.y));
-    }
-};
 
 /** Referencias */
 const viewportRef = ref(null);
 
-/** Referencias adicionales */
-const textFormatterElement = ref(null);
-const showTextFormatter = ref(false);
-
-const selectElement = (elementId) => {
-    selectedElementId.value = elementId;
-    const selectedEl = allElements.value.find(el => el.id === elementId);
-    showTextFormatter.value = selectedEl?.type === 'text';
-    textFormatterElement.value = selectedEl;
-};
-
-const updateElement = (update) => {
-    const element = allElements.value.find(el => el.id === update.id);
-    if (element) {
-        Object.assign(element, update);
-        // Si se actualiza el formato, actualizar la referencia
-        if (update.formatting && textFormatterElement.value?.id === update.id) {
-            textFormatterElement.value = { ...element };
-        }
-    }
-};
-
-const handleCanvasClick = (clickData) => {
-    selectedElementId.value = null;
-    showTextFormatter.value = false;
-    textFormatterElement.value = null;
-};
-
 /** Tipos de elementos disponibles */
 const availableElements = [
     {
@@ -161,6 +109,14 @@ 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) {
@@ -172,11 +128,26 @@ 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 = () => {
-    pageIdCounter.value++; // <-- Incrementar contador independiente
+    const newPageId = Math.max(...pages.value.map(p => p.id)) + 1;
     pages.value.push({
-        id: pageIdCounter.value,
+        id: newPageId,
         elements: []
     });
 };
@@ -240,215 +211,249 @@ const exportPDF = async () => {
         isExporting.value = true;
         window.Notify.info('Generando PDF...');
 
-        // Crear un nuevo documento PDF con el tamaño de página seleccionado
+        // Crear un nuevo documento PDF
         const pdfDoc = await PDFDocument.create();
-        
-        // Convertir dimensiones de pixels a puntos (1 px = 0.75 puntos)
-        const pageWidthPoints = currentPageSize.value.width * 0.75;
-        const pageHeightPoints = currentPageSize.value.height * 0.75;
-        
-        let currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
-        let currentPageHeight = pageHeightPoints;
+        let currentPage = pdfDoc.addPage([595.28, 841.89]); // A4 size in points
+        let currentPageHeight = 841.89;
         let yOffset = 50; // Margen superior
 
         // Obtener fuentes
         const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
         const courierFont = await pdfDoc.embedFont(StandardFonts.Courier);
 
-        // Procesar páginas del maquetador
-        for (let pageIndex = 0; pageIndex < pages.value.length; pageIndex++) {
-            const page = pages.value[pageIndex];
+        // 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
+        });
 
-            // Crear nueva página PDF si no es la primera
-            if (pageIndex > 0) {
-                currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
-                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
+
+            // 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;
             }
 
-            // Ordenar elementos de esta página por posición
-            const sortedElements = [...page.elements].sort((a, b) => {
-                if (Math.abs(a.y - b.y) < 20) {
-                    return a.x - b.x; // Si están en la misma línea, ordenar por X
-                }
-                return a.y - b.y; // Ordenar por Y
-            });
+            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);
 
-            // 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;
+                        for (const word of words) {
+                            const testLine = currentLine + (currentLine ? ' ' : '') + word;
+                            const testWidth = helveticaFont.widthOfTextAtSize(testLine, 12);
                             
-                const x = Math.max(50, element.x * scaleX);
-                const y = currentPageHeight - (element.y * scaleY) - 50; // Margen superior
-
-                switch (element.type) {
-                    case 'text':
-                        if (element.content) {
-                            // Dividir texto largo en líneas
-                            const words = element.content.split(' ');
-                            const lines = [];
-                            let currentLine = '';
-                            const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
-
-                            for (const word of words) {
-                                const testLine = currentLine + (currentLine ? ' ' : '') + word;
-                                const testWidth = helveticaFont.widthOfTextAtSize(testLine, 12);
-                                
-                                if (testWidth <= maxWidth) {
-                                    currentLine = testLine;
-                                } else {
-                                    if (currentLine) lines.push(currentLine);
-                                    currentLine = word;
-                                }
+                            if (testWidth <= maxWidth) {
+                                currentLine = testLine;
+                            } else {
+                                if (currentLine) lines.push(currentLine);
+                                currentLine = word;
                             }
-                            if (currentLine) lines.push(currentLine);
-
-                            // Dibujar cada línea
-                            lines.forEach((line, index) => {
-                                currentPDFPage.drawText(line, {
-                                    x: x,
-                                    y: y - (index * 15),
-                                    size: 12,
-                                    font: helveticaFont,
-                                    color: rgb(0, 0, 0),
-                                });
-                            });
                         }
-                        break;
+                        if (currentLine) lines.push(currentLine);
 
-                    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)
-                                );
+                        // 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),
+                            });
+                        });
 
-                                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 += lines.length * 15 + 10;
+                    }
+                    break;
 
-                                if (image) {
-                                    // Calcular dimensiones manteniendo proporción y escala
-                                    const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
-                                    const maxHeight = Math.min(300, (element.height || 150) * scaleY);
+                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;
 
-                                    const imageAspectRatio = image.width / image.height;
-                                    let displayWidth = maxWidth;
-                                    let displayHeight = maxWidth / imageAspectRatio;
+                        currentPage.drawRectangle({
+                            x: x - 10,
+                            y: y - codeHeight,
+                            width: codeWidth,
+                            height: codeHeight,
+                            color: rgb(0.95, 0.95, 0.95),
+                        });
 
-                                    if (displayHeight > maxHeight) {
-                                        displayHeight = maxHeight;
-                                        displayWidth = maxHeight * imageAspectRatio;
-                                    }
+                        // 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;
 
-                                    currentPDFPage.drawImage(image, {
-                                        x: x,
-                                        y: y - displayHeight,
-                                        width: displayWidth,
-                                        height: displayHeight,
-                                    });
-                                }
-                            } catch (imageError) {
-                                console.warn('Error al procesar imagen:', imageError);
-                                // Dibujar placeholder para imagen
-                                currentPDFPage.drawRectangle({
-                                    x: x,
-                                    y: y - 60,
-                                    width: 100 * scaleX,
-                                    height: 60 * scaleY,
-                                    borderColor: rgb(0.7, 0.7, 0.7),
-                                    borderWidth: 1,
-                                });
+                            currentPage.drawText(displayLine, {
+                                x: x - 5,
+                                y: y - 15 - (index * 12),
+                                size: 9,
+                                font: courierFont,
+                                color: rgb(0, 0, 0),
+                            });
+                        });
 
-                                currentPDFPage.drawText('[Imagen no disponible]', {
-                                    x: x + 5,
-                                    y: y - 35,
-                                    size: 10,
-                                    font: helveticaFont,
-                                    color: rgb(0.7, 0.7, 0.7),
-                                });
+                        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);
                             }
-                        } else {
-                            // Placeholder para imagen vacía
-                            currentPDFPage.drawRectangle({
+
+                            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;
+                                }
+
+                                currentPage.drawImage(image, {
+                                    x: x,
+                                    y: y - displayHeight,
+                                    width: displayWidth,
+                                    height: displayHeight,
+                                });
+
+                                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 * scaleX,
-                                height: 60 * scaleY,
+                                width: 100,
+                                height: 60,
                                 borderColor: rgb(0.7, 0.7, 0.7),
                                 borderWidth: 1,
-                                borderDashArray: [3, 3],
                             });
 
-                            currentPDFPage.drawText('[Imagen]', {
-                                x: x + 25,
+                            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;
                         }
-                        break;
+                    } 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],
+                        });
 
-                    case 'table':
-                        if (element.content && element.content.data) {
-                            const tableData = element.content.data;
-                            const cellWidth = 80 * scaleX;
-                            const cellHeight = 20 * scaleY;
-                            const tableWidth = tableData[0].length * cellWidth;
-                            const tableHeight = tableData.length * cellHeight;
+                        currentPage.drawText('[Imagen]', {
+                            x: x + 25,
+                            y: y - 35,
+                            size: 10,
+                            font: helveticaFont,
+                            color: rgb(0.7, 0.7, 0.7),
+                        });
 
-                            // Dibujar bordes de la tabla
-                            currentPDFPage.drawRectangle({
-                                x: x,
-                                y: y - tableHeight,
-                                width: tableWidth,
-                                height: tableHeight,
-                                borderColor: rgb(0.3, 0.3, 0.3),
-                                borderWidth: 1,
-                            });
+                        yOffset += 80;
+                    }
+                    break;
 
-                            // Dibujar contenido de las celdas
-                            tableData.forEach((row, rowIndex) => {
-                                row.forEach((cell, colIndex) => {
-                                    const cellX = x + (colIndex * cellWidth);
-                                    const cellY = y - (rowIndex * cellHeight) - 15;
+                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 borde de celda
-                                    currentPDFPage.drawRectangle({
-                                        x: cellX,
-                                        y: y - ((rowIndex + 1) * cellHeight),
-                                        width: cellWidth,
-                                        height: cellHeight,
-                                        borderColor: rgb(0.7, 0.7, 0.7),
-                                        borderWidth: 0.5,
-                                    });
+                        // Dibujar 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 texto de la celda (truncar si es muy largo)
-                                    const maxChars = Math.floor(cellWidth / 8);
-                                    const displayText = cell.length > maxChars ? 
-                                        cell.substring(0, maxChars - 3) + '...' : cell;
+                        // Dibujar contenido de las celdas
+                        tableData.forEach((row, rowIndex) => {
+                            row.forEach((cell, colIndex) => {
+                                const cellX = x + (colIndex * cellWidth);
+                                const cellY = y - (rowIndex * cellHeight) - 15;
 
-                                    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 borde de celda
+                                currentPage.drawRectangle({
+                                    x: cellX,
+                                    y: y - ((rowIndex + 1) * cellHeight),
+                                    width: cellWidth,
+                                    height: cellHeight,
+                                    borderColor: rgb(0.7, 0.7, 0.7),
+                                    borderWidth: 0.5,
+                                });
+
+                                // Dibujar texto de la celda (truncar si es muy largo)
+                                const maxChars = 10;
+                                const displayText = cell.length > maxChars ? 
+                                    cell.substring(0, maxChars - 3) + '...' : cell;
+
+                                currentPage.drawText(displayText, {
+                                    x: cellX + 5,
+                                    y: cellY,
+                                    size: 8,
+                                    font: helveticaFont,
+                                    color: rowIndex === 0 ? rgb(0.2, 0.2, 0.8) : rgb(0, 0, 0), // Encabezados en azul
                                 });
                             });
-                        }
-                        break;
-                }
+                        });
+
+                        yOffset += tableHeight + 20;
+                    }
+                    break;
             }
         }
 
@@ -499,8 +504,6 @@ 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;
     }
 };
 
@@ -523,7 +526,7 @@ onMounted(() => {
 
 <template>
     <div class="flex h-screen bg-gray-50 dark:bg-primary-d/50">
-        <!-- Panel Izquierdo - Elementos (sin cambios) -->
+        <!-- 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">
             <!-- Header del panel -->
             <div class="p-4 border-b border-gray-200 dark:border-primary/20">
@@ -599,12 +602,18 @@ onMounted(() => {
 
         <!-- Área Principal con Viewport -->
         <div class="flex-1 flex flex-col">
-            <!-- Toolbar superior básico -->
+            <!-- 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">
-                    <h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm">
-                        {{ documentTitle }}
-                    </h2>
+                    <!-- Herramientas de formato (simuladas) -->
+                    <div class="flex items-center gap-1 text-sm">
+                        <button class="p-1 hover:bg-gray-100 dark:hover:bg-primary/10 rounded" :disabled="isExporting">
+                            <GoogleIcon name="format_bold" class="text-gray-600 dark:text-primary-dt" />
+                        </button>
+                        <button class="p-1 hover:bg-gray-100 dark:hover:bg-primary/10 rounded" :disabled="isExporting">
+                            <GoogleIcon name="format_italic" class="text-gray-600 dark:text-primary-dt" />
+                        </button>
+                    </div>
                 </div>
 
                 <div class="flex items-center gap-4">
@@ -624,13 +633,6 @@ onMounted(() => {
                 </div>
             </div>
 
-            <!-- TextFormatter como toolbar estático -->
-            <TextFormatter
-                :element="textFormatterElement"
-                :visible="showTextFormatter"
-                @update="updateElement"
-            />
-
             <!-- PDFViewport -->
             <PDFViewport
                 ref="viewportRef"
@@ -642,7 +644,6 @@ onMounted(() => {
                 @add-page="addPage"
                 @delete-page="deletePage"
                 @page-change="(page) => currentPage = page"
-                @page-size-change="handlePageSizeChange"
             >
                 <template #elements="{ page, pageIndex }">
                     <CanvasElement

src/pages/Vacations/Admin/Create.vue

@@ -0,0 +1,181 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, viewTo } from './Module'
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Form from './Form.vue';
+
+/** Definidores */
+const router = useRouter();
+
+const form = useForm({
+    periods: [
+        {
+            start_date: '',
+            end_date: '',
+            number_of_days: 0,
+        }
+    ],
+    comments: ''
+});
+
+const availableDays = ref(0);
+const formRef = ref(null);
+
+// Calcular días restantes
+const remainingDays = computed(() => {
+    if (!formRef.value) return availableDays.value;
+    return availableDays.value - formRef.value.totalSelectedDays;
+});
+
+// Calcular total de días seleccionados
+const totalSelectedDays = computed(() => {
+    if (!formRef.value) return 0;
+    return formRef.value.totalSelectedDays;
+});
+
+// Obtener períodos con datos
+const periodsWithData = computed(() => {
+    return form.periods.filter(period => period.start_date && period.end_date && period.number_of_days > 0);
+});
+
+/** Métodos */
+function submit() {
+    form.post(apiTo('store'), {
+        onSuccess: (res) => {
+            Notify.success(Lang('created'));
+            router.push(viewTo({ name: 'index' }));
+        }
+    });
+}
+
+/** Ciclos */
+onMounted(() => {
+    api.get(route('resources.available-days'), {
+        onSuccess: (res) => {
+            availableDays.value = res.available_days;
+        }
+    });
+});
+</script>
+
+<template>
+    <div>
+        <!-- Header -->
+        <div class="mb-8">
+            <div class="flex items-center gap-4 mb-4">
+            <RouterLink :to="viewTo({ name: 'index' })">
+                    <button class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 hover:bg-slate-200 with-transition dark:bg-slate-800 dark:hover:bg-slate-700">
+                        <GoogleIcon name="arrow_back" class="text-slate-600 dark:text-slate-300" />
+                    </button>
+            </RouterLink>
+                <div>
+                    <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Solicitar Vacaciones</h1>
+                    <p class="text-slate-600 dark:text-slate-400">Completa el formulario para solicitar tus días de vacaciones.</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Layout de dos columnas -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Formulario - Columna izquierda (2/3) -->
+            <div class="lg:col-span-2">
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
+                    <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Detalles de la Solicitud</h2>
+                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Selecciona las fechas y proporciona información adicional.</p>
+
+                    <Form 
+                        ref="formRef"
+                        :form="form"
+                        @submit="submit"
+                    />
+                </div>
+            </div>
+
+            <!-- Resumen - Columna derecha (1/3) -->
+            <div class="lg:col-span-1">
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
+                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Resumen de Solicitud</h3>
+                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Revisa los detalles antes de enviar.</p>
+
+                    <!-- Días disponibles -->
+                    <div class="text-center mb-6 p-4 bg-slate-50 rounded-lg dark:bg-slate-700/50">
+                        <div class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ availableDays }}</div>
+                        <div class="text-sm text-slate-600 dark:text-slate-400">Días Disponibles</div>
+                    </div>
+
+                    <!-- Detalles de períodos -->
+                    <div v-if="periodsWithData.length > 0" class="space-y-4 mb-6">
+                        <div v-for="(period, index) in periodsWithData" :key="index" class="space-y-2">
+                            <h4 class="font-medium text-slate-900 dark:text-slate-100">
+                                Período {{ index + 1 }}:
+                            </h4>
+                            <div class="space-y-1 text-sm text-slate-600 dark:text-slate-400">
+                                <div>Inicio: {{ period.start_date }}</div>
+                                <div>Fin: {{ period.end_date }}</div>
+                                <div class="flex items-center gap-2">
+                                    <span>Días en período {{ index + 1 }}:</span>
+                                    <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
+                                        {{ period.number_of_days }} día{{ period.number_of_days > 1 ? 's' : '' }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Resumen de días -->
+                    <div v-if="totalSelectedDays > 0" class="space-y-3 mb-6">
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-slate-600 dark:text-slate-400">Total de días:</span>
+                            <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
+                                {{ totalSelectedDays }} día{{ totalSelectedDays > 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-slate-600 dark:text-slate-400">Días restantes:</span>
+                            <span class="px-2 py-1 rounded-full text-xs font-medium"
+                                  :class="remainingDays < 0 ? 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'">
+                                {{ remainingDays }} día{{ remainingDays !== 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Advertencia si se excede el límite -->
+                    <div v-if="remainingDays < 0" class="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
+                        <div class="flex items-center gap-2">
+                            <GoogleIcon name="warning" class="w-4 h-4 text-red-600 dark:text-red-400" />
+                            <span class="text-sm text-red-600 dark:text-red-400 font-medium">
+                                Excedes tus días disponibles por {{ Math.abs(remainingDays) }} día{{ Math.abs(remainingDays) > 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Recordatorios -->
+                    <div class="space-y-3">
+                        <h4 class="font-medium text-slate-900 dark:text-slate-100">Recordatorios:</h4>
+                        <div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Las solicitudes deben hacerse con 15 días de anticipación</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Tu coordinador revisará y aprobará la solicitud</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Recibirás una notificación con la decisión</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Los días se descontarán una vez aprobados</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

src/pages/Vacations/Admin/Form.vue

@@ -0,0 +1,236 @@
+<script setup>
+import { ref, watch, computed } from 'vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+
+import PrimaryButton from '@Holos/Button/Primary.vue';
+import Input         from '@Holos/Form/Input.vue';
+import Textarea         from '@Holos/Form/Textarea.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Eventos */
+const emit = defineEmits([
+    'submit'
+])
+
+/** Propiedades */
+const props = defineProps({
+    form: Object
+})
+
+/** Métodos */
+function submit() {
+    emit('submit')
+}
+
+function addPeriod() {
+    props.form.periods.push({
+        start_date: '',
+        end_date: '',
+        number_of_days: 0,
+    });
+}
+
+function removePeriod(index) {
+    if (props.form.periods.length > 1) {
+        props.form.periods.splice(index, 1);
+    }
+}
+
+function calculateDays(startDate, endDate) {
+    if (!startDate || !endDate) return 0;
+    
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    
+    // Validar que la fecha de inicio no sea posterior a la de fin
+    if (start > end) return 0;
+    
+    // Calcular la diferencia en días (incluyendo ambos días)
+    const timeDiff = end.getTime() - start.getTime();
+    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
+    
+    return daysDiff;
+}
+
+function updatePeriodDays(index) {
+    const period = props.form.periods[index];
+    if (period.start_date && period.end_date) {
+        period.number_of_days = calculateDays(period.start_date, period.end_date);
+    } else {
+        period.number_of_days = 0;
+    }
+}
+
+function getMinDate() {
+    const today = new Date();
+    let daysToAdd = 15;
+    let currentDate = new Date(today);
+    
+    while (daysToAdd > 0) {
+        currentDate.setDate(currentDate.getDate() + 1);
+        // Si no es domingo (0), contar el día
+        if (currentDate.getDay() !== 0) {
+            daysToAdd--;
+        }
+    }
+    
+    return currentDate.toISOString().split('T')[0];
+}
+
+// Función para desactivar domingos
+function isDisabled(date) {
+    return date.getDay() === 0; // 0 = domingo
+}
+
+// Función para formatear fecha a Y-m-d
+function formatDate(date) {
+    if (!date) return '';
+    
+    // Si la fecha ya es un string en formato correcto, devolverla
+    if (typeof date === 'string' && date.match(/^\d{4}-\d{2}-\d{2}$/)) {
+        return date;
+    }
+    
+    let d;
+    if (date instanceof Date) {
+        d = date;
+    } else {
+        d = new Date(date);
+    }
+    
+    // Verificar que la fecha es válida
+    if (isNaN(d.getTime())) {
+        console.warn('Fecha inválida recibida:', date);
+        return '';
+    }
+    
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
+// Watcher para detectar cambios en las fechas
+watch(() => props.form.periods, (newPeriods) => {
+    newPeriods.forEach((period, index) => {
+        if (period.start_date && period.end_date) {
+            updatePeriodDays(index);
+        }
+    });
+}, { deep: true });
+
+// Calcular total de días seleccionados
+const totalSelectedDays = computed(() => {
+    return props.form.periods.reduce((total, period) => {
+        return total + (period.number_of_days || 0);
+    }, 0);
+});
+
+// Exponer el total para el componente padre
+defineExpose({
+    totalSelectedDays
+});
+</script>
+
+<template>
+    <form @submit.prevent="submit" class="space-y-6">
+        <!-- Períodos de vacaciones -->
+        <div class="space-y-4">
+            <div v-for="(period, index) in form.periods" :key="index" class="space-y-4">
+                <div class="flex items-center justify-between">
+                    <h4 class="text-sm font-medium text-slate-700 dark:text-slate-300">
+                        Período {{ index + 1 }}
+                    </h4>
+                    <button
+                        v-if="form.periods.length > 1"
+                        type="button"
+                        @click="removePeriod(index)"
+                        class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-md with-transition dark:text-red-400 dark:hover:bg-red-500/10"
+                    >
+                        <GoogleIcon name="delete" class="w-4 h-4" />
+                        Eliminar
+                    </button>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <div class="relative">
+                            <VueDatePicker
+                                v-model="period.start_date"
+                                class="w-full"
+                                placeholder="Fecha de inicio"
+                                format="dd/MM/yyyy"
+                                locale="es"
+                                :min-date="getMinDate()"
+                                :disabled-dates="isDisabled"
+                                :enable-time-picker="false"
+                                :auto-apply="true"
+                                :close-on-auto-apply="true"
+                                @update:model-value="(date) => { 
+                                    console.log('Fecha seleccionada (inicio):', date);
+                                    period.start_date = formatDate(date); 
+                                    console.log('Fecha formateada (inicio):', period.start_date);
+                                    updatePeriodDays(index); 
+                                }"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <div class="relative">
+                            <VueDatePicker
+                                v-model="period.end_date"
+                                class="w-full"
+                                placeholder="Fecha de fin"
+                                format="dd/MM/yyyy"
+                                locale="es"
+                                :min-date="getMinDate()"
+                                :disabled-dates="isDisabled"
+                                :enable-time-picker="false"
+                                :auto-apply="true"
+                                :close-on-auto-apply="true"
+                                @update:model-value="(date) => { 
+                                    console.log('Fecha seleccionada (fin):', date);
+                                    period.end_date = formatDate(date); 
+                                    console.log('Fecha formateada (fin):', period.end_date);
+                                    updatePeriodDays(index); 
+                                }"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Botón añadir período -->
+            <button
+                type="button"
+                @click="addPeriod"
+                class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg with-transition dark:text-blue-400 dark:hover:bg-blue-500/10"
+            >
+                <GoogleIcon name="add" />
+                Añadir período
+            </button>
+        </div>
+
+        <!-- Comentarios -->
+        <div>
+            <Textarea
+                v-model="form.comments"
+                id="comments"
+                rows="4"
+                class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
+                placeholder="Agrega cualquier información adicional sobre tu solicitud..."
+                :onError="form.errors.comments"
+            />
+        </div>
+
+        <!-- Botón de envío -->
+        <div class="col-span-1 md:col-span-2 flex justify-center">
+            <PrimaryButton
+                v-text="$t('request')"
+                :class="{ 'opacity-25': form.processing }"
+                :disabled="form.processing"
+            />
+        </div>
+    </form>
+</template>

src/pages/Vacations/Admin/Index.vue

@@ -0,0 +1,129 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { api } from '@Services/Api';
+import { getDate } from '@Controllers/DateController';
+import { apiTo } from './Module'
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const vacationRequests = ref([]);
+
+/** Metodos */
+const generateConstance = (vacationId) => {
+    api.get(route('vacation-requests-public.generate-route', { vacation: vacationId }), {
+        onSuccess: (res) => {
+            Notify.success('Constancia generada correctamente');
+            openNewTab(res.route);
+        }
+    });
+};
+
+const getStatusClasses = (status) => {
+    const statusMap = {
+        'Pendiente': 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+        'Aprobado': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+        'Rechazado': 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+        'Agendado': 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
+        'Cancelado': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+        'Concluido': 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300'
+    };
+    
+    return statusMap[status] || 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300';
+};
+
+const getStatusIcon = (status) => {
+    const iconMap = {
+        'Pendiente': { name: 'schedule', classes: 'text-amber-600 dark:text-amber-400' },
+        'Aprobado': { name: 'check_circle', classes: 'text-blue-600 dark:text-blue-400' },
+        'Rechazado': { name: 'cancel', classes: 'text-orange-600 dark:text-orange-400' },
+        'Agendado': { name: 'event', classes: 'text-green-600 dark:text-green-400' },
+        'Cancelado': { name: 'block', classes: 'text-red-600 dark:text-red-400' },
+        'Concluido': { name: 'task_alt', classes: 'text-cyan-600 dark:text-cyan-400' }
+    };
+    
+    return iconMap[status] || { name: 'help', classes: 'text-gray-600 dark:text-gray-400' };
+};
+
+const getStatusIconContainer = (status) => {
+    const containerMap = {
+        'Pendiente': 'bg-amber-100 dark:bg-amber-900/30',
+        'Aprobado': 'bg-blue-100 dark:bg-blue-900/30',
+        'Rechazado': 'bg-orange-100 dark:bg-orange-900/30',
+        'Agendado': 'bg-green-100 dark:bg-green-900/30',
+        'Cancelado': 'bg-red-100 dark:bg-red-900/30',
+        'Concluido': 'bg-cyan-100 dark:bg-cyan-900/30'
+    };
+    
+    return containerMap[status] || 'bg-gray-100 dark:bg-gray-900/30';
+};
+
+const openNewTab = (url) => {
+    window.open(url, '_blank');
+}
+
+/** Ciclos */
+onMounted(() => {
+    api.get(apiTo('index'), {
+        onSuccess: (r) => {
+            vacationRequests.value = r.vacation_requests.data;
+        }
+    });
+});
+</script>
+
+<template>
+    <div>
+        <!-- Header -->
+        <div class="flex items-center justify-between mb-8">
+            <div>
+                <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
+                    Solicitudes
+                </h1>
+                <p class="text-slate-600 dark:text-slate-400">Gestión completa de todas las solicitudes de vacaciones del sistema.</p>
+            </div>
+        </div>
+
+        <!-- Lista de solicitudes -->
+        <div class="space-y-4">
+            <div v-for="vacation in vacationRequests" class="bg-white rounded-xl border border-slate-200 p-6 shadow-sm dark:bg-slate-800 dark:border-slate-700">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center gap-3">
+                        <div :class="`flex items-center justify-center w-10 h-10 rounded-lg ${getStatusIconContainer(vacation.status)}`">
+                            <GoogleIcon :name="getStatusIcon(vacation.status).name" :class="getStatusIcon(vacation.status).classes" />
+                        </div>
+                        <div>
+                            <h3 v-if="vacation.vacation_periods.length > 1" class="font-semibold text-slate-900 dark:text-slate-100">{{ vacation.vacation_periods.length }} periodos</h3>
+                            <h3 v-else class="font-semibold text-slate-900 dark:text-slate-100">{{ getDate(vacation.vacation_periods[0].start_date) }} - {{ getDate(vacation.vacation_periods[0].end_date) }}</h3>
+                            <p class="text-sm text-slate-600 dark:text-slate-400">{{ vacation.total_days }} días</p>
+                        </div>
+                    </div>
+                    <span :class="`px-3 py-1 rounded-full text-sm font-medium ${getStatusClasses(vacation.status)}`">
+                        {{ vacation.status }}
+                    </span>
+                </div>
+
+                <div v-for="(period, index) in vacation.vacation_periods" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                    <div>
+                        <p class="text-sm font-medium text-slate-700 dark:text-slate-300">Período {{ index + 1 }}:</p>
+                        <p class="text-sm text-slate-600 dark:text-slate-400">{{ getDate(period.start_date) }} - {{ getDate(period.end_date) }} ({{ period.number_of_days }} días)</p>
+                    </div>
+                </div>
+
+                <div class="flex justify-end gap-3">
+                    <button @click="generateConstance(vacation.id)" type="button" class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-lg with-transition dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-700">
+                        <GoogleIcon name="clinical_notes" />
+                        Generar Constancia de disfrute de vacaciones
+                    </button>
+                </div>
+            </div>
+
+            <!-- Estado vacío cuando no hay solicitudes -->
+            <div v-if="vacationRequests.length == 0" class="text-center py-12">
+                <GoogleIcon name="event_busy" class="text-slate-300 text-6xl mb-4 dark:text-slate-600" />
+                <h3 class="text-lg font-medium text-slate-900 dark:text-slate-100 mb-2">No hay solicitudes</h3>
+                <p class="text-slate-600 dark:text-slate-400 mb-6">No se han encontrado solicitudes de vacaciones en el sistema.</p>
+            </div>
+        </div>
+    </div>
+</template>

src/pages/Vacations/Admin/Module.js

@@ -0,0 +1,16 @@
+import { lang } from '@Lang/i18n';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`vacation-requests.admin.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `vacations.admin.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`vacations.${str}`)
+
+export {
+    viewTo,
+    apiTo,
+    transl
+}

src/pages/Vacations/Coordinator/Create.vue

@@ -0,0 +1,181 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, viewTo } from './Module'
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Form from './Form.vue';
+
+/** Definidores */
+const router = useRouter();
+
+const form = useForm({
+    periods: [
+        {
+            start_date: '',
+            end_date: '',
+            number_of_days: 0,
+        }
+    ],
+    comments: ''
+});
+
+const availableDays = ref(0);
+const formRef = ref(null);
+
+// Calcular días restantes
+const remainingDays = computed(() => {
+    if (!formRef.value) return availableDays.value;
+    return availableDays.value - formRef.value.totalSelectedDays;
+});
+
+// Calcular total de días seleccionados
+const totalSelectedDays = computed(() => {
+    if (!formRef.value) return 0;
+    return formRef.value.totalSelectedDays;
+});
+
+// Obtener períodos con datos
+const periodsWithData = computed(() => {
+    return form.periods.filter(period => period.start_date && period.end_date && period.number_of_days > 0);
+});
+
+/** Métodos */
+function submit() {
+    form.post(apiTo('store'), {
+        onSuccess: (res) => {
+            Notify.success(Lang('created'));
+            router.push(viewTo({ name: 'index' }));
+        }
+    });
+}
+
+/** Ciclos */
+onMounted(() => {
+    api.get(route('resources.available-days'), {
+        onSuccess: (res) => {
+            availableDays.value = res.available_days;
+        }
+    });
+});
+</script>
+
+<template>
+    <div>
+        <!-- Header -->
+        <div class="mb-8">
+            <div class="flex items-center gap-4 mb-4">
+            <RouterLink :to="viewTo({ name: 'index' })">
+                    <button class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 hover:bg-slate-200 with-transition dark:bg-slate-800 dark:hover:bg-slate-700">
+                        <GoogleIcon name="arrow_back" class="text-slate-600 dark:text-slate-300" />
+                    </button>
+            </RouterLink>
+                <div>
+                    <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Solicitar Vacaciones</h1>
+                    <p class="text-slate-600 dark:text-slate-400">Completa el formulario para solicitar tus días de vacaciones.</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Layout de dos columnas -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Formulario - Columna izquierda (2/3) -->
+            <div class="lg:col-span-2">
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
+                    <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Detalles de la Solicitud</h2>
+                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Selecciona las fechas y proporciona información adicional.</p>
+
+                    <Form 
+                        ref="formRef"
+                        :form="form"
+                        @submit="submit"
+                    />
+                </div>
+            </div>
+
+            <!-- Resumen - Columna derecha (1/3) -->
+            <div class="lg:col-span-1">
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
+                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Resumen de Solicitud</h3>
+                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Revisa los detalles antes de enviar.</p>
+
+                    <!-- Días disponibles -->
+                    <div class="text-center mb-6 p-4 bg-slate-50 rounded-lg dark:bg-slate-700/50">
+                        <div class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ availableDays }}</div>
+                        <div class="text-sm text-slate-600 dark:text-slate-400">Días Disponibles</div>
+                    </div>
+
+                    <!-- Detalles de períodos -->
+                    <div v-if="periodsWithData.length > 0" class="space-y-4 mb-6">
+                        <div v-for="(period, index) in periodsWithData" :key="index" class="space-y-2">
+                            <h4 class="font-medium text-slate-900 dark:text-slate-100">
+                                Período {{ index + 1 }}:
+                            </h4>
+                            <div class="space-y-1 text-sm text-slate-600 dark:text-slate-400">
+                                <div>Inicio: {{ period.start_date }}</div>
+                                <div>Fin: {{ period.end_date }}</div>
+                                <div class="flex items-center gap-2">
+                                    <span>Días en período {{ index + 1 }}:</span>
+                                    <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
+                                        {{ period.number_of_days }} día{{ period.number_of_days > 1 ? 's' : '' }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Resumen de días -->
+                    <div v-if="totalSelectedDays > 0" class="space-y-3 mb-6">
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-slate-600 dark:text-slate-400">Total de días:</span>
+                            <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
+                                {{ totalSelectedDays }} día{{ totalSelectedDays > 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-slate-600 dark:text-slate-400">Días restantes:</span>
+                            <span class="px-2 py-1 rounded-full text-xs font-medium"
+                                  :class="remainingDays < 0 ? 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'">
+                                {{ remainingDays }} día{{ remainingDays !== 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Advertencia si se excede el límite -->
+                    <div v-if="remainingDays < 0" class="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
+                        <div class="flex items-center gap-2">
+                            <GoogleIcon name="warning" class="w-4 h-4 text-red-600 dark:text-red-400" />
+                            <span class="text-sm text-red-600 dark:text-red-400 font-medium">
+                                Excedes tus días disponibles por {{ Math.abs(remainingDays) }} día{{ Math.abs(remainingDays) > 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Recordatorios -->
+                    <div class="space-y-3">
+                        <h4 class="font-medium text-slate-900 dark:text-slate-100">Recordatorios:</h4>
+                        <div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Las solicitudes deben hacerse con 15 días de anticipación</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Tu coordinador revisará y aprobará la solicitud</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Recibirás una notificación con la decisión</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Los días se descontarán una vez aprobados</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

src/pages/Vacations/Coordinator/Form.vue

@@ -0,0 +1,236 @@
+<script setup>
+import { ref, watch, computed } from 'vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+
+import PrimaryButton from '@Holos/Button/Primary.vue';
+import Input         from '@Holos/Form/Input.vue';
+import Textarea         from '@Holos/Form/Textarea.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Eventos */
+const emit = defineEmits([
+    'submit'
+])
+
+/** Propiedades */
+const props = defineProps({
+    form: Object
+})
+
+/** Métodos */
+function submit() {
+    emit('submit')
+}
+
+function addPeriod() {
+    props.form.periods.push({
+        start_date: '',
+        end_date: '',
+        number_of_days: 0,
+    });
+}
+
+function removePeriod(index) {
+    if (props.form.periods.length > 1) {
+        props.form.periods.splice(index, 1);
+    }
+}
+
+function calculateDays(startDate, endDate) {
+    if (!startDate || !endDate) return 0;
+    
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    
+    // Validar que la fecha de inicio no sea posterior a la de fin
+    if (start > end) return 0;
+    
+    // Calcular la diferencia en días (incluyendo ambos días)
+    const timeDiff = end.getTime() - start.getTime();
+    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
+    
+    return daysDiff;
+}
+
+function updatePeriodDays(index) {
+    const period = props.form.periods[index];
+    if (period.start_date && period.end_date) {
+        period.number_of_days = calculateDays(period.start_date, period.end_date);
+    } else {
+        period.number_of_days = 0;
+    }
+}
+
+function getMinDate() {
+    const today = new Date();
+    let daysToAdd = 15;
+    let currentDate = new Date(today);
+    
+    while (daysToAdd > 0) {
+        currentDate.setDate(currentDate.getDate() + 1);
+        // Si no es domingo (0), contar el día
+        if (currentDate.getDay() !== 0) {
+            daysToAdd--;
+        }
+    }
+    
+    return currentDate.toISOString().split('T')[0];
+}
+
+// Función para desactivar domingos
+function isDisabled(date) {
+    return date.getDay() === 0; // 0 = domingo
+}
+
+// Función para formatear fecha a Y-m-d
+function formatDate(date) {
+    if (!date) return '';
+    
+    // Si la fecha ya es un string en formato correcto, devolverla
+    if (typeof date === 'string' && date.match(/^\d{4}-\d{2}-\d{2}$/)) {
+        return date;
+    }
+    
+    let d;
+    if (date instanceof Date) {
+        d = date;
+    } else {
+        d = new Date(date);
+    }
+    
+    // Verificar que la fecha es válida
+    if (isNaN(d.getTime())) {
+        console.warn('Fecha inválida recibida:', date);
+        return '';
+    }
+    
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
+// Watcher para detectar cambios en las fechas
+watch(() => props.form.periods, (newPeriods) => {
+    newPeriods.forEach((period, index) => {
+        if (period.start_date && period.end_date) {
+            updatePeriodDays(index);
+        }
+    });
+}, { deep: true });
+
+// Calcular total de días seleccionados
+const totalSelectedDays = computed(() => {
+    return props.form.periods.reduce((total, period) => {
+        return total + (period.number_of_days || 0);
+    }, 0);
+});
+
+// Exponer el total para el componente padre
+defineExpose({
+    totalSelectedDays
+});
+</script>
+
+<template>
+    <form @submit.prevent="submit" class="space-y-6">
+        <!-- Períodos de vacaciones -->
+        <div class="space-y-4">
+            <div v-for="(period, index) in form.periods" :key="index" class="space-y-4">
+                <div class="flex items-center justify-between">
+                    <h4 class="text-sm font-medium text-slate-700 dark:text-slate-300">
+                        Período {{ index + 1 }}
+                    </h4>
+                    <button
+                        v-if="form.periods.length > 1"
+                        type="button"
+                        @click="removePeriod(index)"
+                        class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-md with-transition dark:text-red-400 dark:hover:bg-red-500/10"
+                    >
+                        <GoogleIcon name="delete" class="w-4 h-4" />
+                        Eliminar
+                    </button>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <div class="relative">
+                            <VueDatePicker
+                                v-model="period.start_date"
+                                class="w-full"
+                                placeholder="Fecha de inicio"
+                                format="dd/MM/yyyy"
+                                locale="es"
+                                :min-date="getMinDate()"
+                                :disabled-dates="isDisabled"
+                                :enable-time-picker="false"
+                                :auto-apply="true"
+                                :close-on-auto-apply="true"
+                                @update:model-value="(date) => { 
+                                    console.log('Fecha seleccionada (inicio):', date);
+                                    period.start_date = formatDate(date); 
+                                    console.log('Fecha formateada (inicio):', period.start_date);
+                                    updatePeriodDays(index); 
+                                }"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <div class="relative">
+                            <VueDatePicker
+                                v-model="period.end_date"
+                                class="w-full"
+                                placeholder="Fecha de fin"
+                                format="dd/MM/yyyy"
+                                locale="es"
+                                :min-date="getMinDate()"
+                                :disabled-dates="isDisabled"
+                                :enable-time-picker="false"
+                                :auto-apply="true"
+                                :close-on-auto-apply="true"
+                                @update:model-value="(date) => { 
+                                    console.log('Fecha seleccionada (fin):', date);
+                                    period.end_date = formatDate(date); 
+                                    console.log('Fecha formateada (fin):', period.end_date);
+                                    updatePeriodDays(index); 
+                                }"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Botón añadir período -->
+            <button
+                type="button"
+                @click="addPeriod"
+                class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg with-transition dark:text-blue-400 dark:hover:bg-blue-500/10"
+            >
+                <GoogleIcon name="add" />
+                Añadir período
+            </button>
+        </div>
+
+        <!-- Comentarios -->
+        <div>
+            <Textarea
+                v-model="form.comments"
+                id="comments"
+                rows="4"
+                class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
+                placeholder="Agrega cualquier información adicional sobre tu solicitud..."
+                :onError="form.errors.comments"
+            />
+        </div>
+
+        <!-- Botón de envío -->
+        <div class="col-span-1 md:col-span-2 flex justify-center">
+            <PrimaryButton
+                v-text="$t('request')"
+                :class="{ 'opacity-25': form.processing }"
+                :disabled="form.processing"
+            />
+        </div>
+    </form>
+</template>

src/pages/Vacations/Coordinator/Index.vue

@@ -0,0 +1,295 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { api } from '@Services/Api';
+import { apiTo } from './Module';
+
+import Calendar from '@Components/Holos/Calendar.vue';
+
+/** Propiedades */
+const applicationsForCoordinator = ref([]);
+const conflictDays = ref([]);
+const calendarRef = ref(null);
+
+/** Metodos */
+const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('es-ES', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+    });
+};
+
+// Función para calcular el total de días
+const calculateTotalDays = (vacationPeriods) => {
+    return vacationPeriods.reduce((total, period) => total + period.number_of_days, 0);
+};
+
+// Función para obtener el color del estado
+const getStatusColor = (status) => {
+    switch (status) {
+        case 'Pendiente':
+            return 'bg-yellow-100 text-yellow-800';
+        case 'Aprobada':
+            return 'bg-green-100 text-green-800';
+        case 'Rechazada':
+            return 'bg-red-100 text-red-800';
+        default:
+            return 'bg-gray-100 text-gray-800';
+    }
+};
+
+// Método para obtener los días de conflicto del mes
+const fetchConflictDays = (month) => {
+    // Limpiar inmediatamente los días de conflicto para evitar el parpadeo visual
+    conflictDays.value = [];
+    
+    api.get(apiTo('calendar-month', { month: month }), {
+        onSuccess: (r) => {
+            // El backend puede retornar un array vacío o un array con los días de conflicto
+            conflictDays.value = r.conflict_days || [];
+        },
+    });
+};
+
+const approvePeriod = (periodId) => {
+    api.put(apiTo('approve-period', { period: periodId }), {
+        onSuccess: (r) => {
+            Notify.success('Periodo aprobado correctamente');
+            // recargar la página
+            
+        },
+    });
+};
+
+const approveAll = (applicationId) => {
+    api.put(apiTo('approve-request', { vacationRequest: applicationId }), {
+        onSuccess: (r) => {
+            Notify.success('Solicitud aprobada correctamente');
+            // recargar la página
+            
+        },
+    });
+};
+
+/** Ciclos */
+onMounted(() => {
+    // Cargar los días de conflicto del mes actual al montar el componente
+    const initialMonth = new Date().getMonth() + 1;
+    fetchConflictDays(initialMonth);
+
+    // Cargar las solicitudes para coordinador
+    api.get(apiTo('index'), {
+        onSuccess: (r) => {
+            applicationsForCoordinator.value = r.applications_for_coordinator;
+        }
+    });
+});
+</script>
+
+<template>
+    <div>
+        <!-- Header -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between my-4 sm:my-8 gap-3 sm:gap-0">
+            <div>
+                <h1 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-slate-100">Gestión de Solicitudes</h1>
+                <p class="text-sm sm:text-base text-slate-600 dark:text-slate-400">Revisa y gestiona las solicitudes de vacaciones de tu equipo</p>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6">
+            <div class="order-2 lg:order-1 lg:col-span-8">
+                <!-- Lista de solicitudes -->
+                <div v-for="application in applicationsForCoordinator" :key="application.id" class="bg-white rounded-lg shadow-md p-4 sm:p-6 mb-4 sm:mb-6">
+                    <!-- Información del empleado -->
+                    <div class="flex flex-col sm:flex-row sm:items-center mb-4 sm:mb-6 gap-3 sm:gap-0">
+                        <div class="flex items-center flex-1">
+                            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-200 rounded-full flex items-center justify-center mr-3 sm:mr-4 overflow-hidden flex-shrink-0">
+                                <img v-if="application.user.profile_photo_url" 
+                                     :src="application.user.profile_photo_url" 
+                                     :alt="application.user.full_name"
+                                     class="w-full h-full object-cover">
+                                <svg v-else class="w-5 h-5 sm:w-6 sm:h-6 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-1">
+                                    <h2 class="text-base sm:text-lg font-semibold text-gray-900 truncate">{{ application.user.full_name }}</h2>
+                                    <span :class="`px-2 py-1 text-xs rounded-full font-medium ${getStatusColor(application.status)} flex-shrink-0`">
+                                        {{ application.status }}
+                                    </span>
+                                </div>
+                                <p class="text-gray-500 text-sm">{{ application.user.department.name }}</p>
+                                <p class="text-gray-400 text-xs">Días disponibles: {{ application.user.vacation_days_available }}</p>
+                            </div>
+                        </div>
+                        <div class="text-left sm:text-right text-sm text-gray-500 flex-shrink-0">
+                            <p>Solicitado: {{ formatDate(application.created_at) }}</p>
+                        </div>
+                    </div>
+
+                    <!-- Conflicto -->
+                    <div v-if="application.have_conflict && application.status == 'Pendiente'" class="mb-4 sm:mb-6">
+                        <div class="bg-red-50 border border-red-200 rounded-lg p-3 sm:p-4">
+                            <div class="flex items-start">
+                                <div class="flex-shrink-0">
+                                    <svg class="w-4 h-4 sm:w-5 sm:h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                                    </svg>
+                                </div>
+                                <div class="ml-2 sm:ml-3 flex-1">
+                                    <h3 class="text-sm font-medium text-red-800">
+                                        Conflicto detectado
+                                    </h3>
+                                    <div class="mt-2 text-sm text-red-700">
+                                        <p class="mb-3">Las siguientes fechas presentan conflictos con otras solicitudes:</p>
+                                        <div class="space-y-2 sm:space-y-3">
+                                            <div v-for="conflict in application.have_conflict" :key="conflict.request_id" 
+                                                 class="bg-white border border-red-200 rounded-md p-2 sm:p-3">
+                                                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-2 gap-1 sm:gap-0">
+                                                    <span class="font-medium text-red-800">{{ conflict.user.name }}</span>
+                                                </div>
+                                                <div class="text-xs text-red-600 space-y-2">
+                                                    <div class="flex flex-col sm:flex-row sm:justify-between gap-1 sm:gap-2">
+                                                        <span class="font-medium">Período aprobado:</span>
+                                                        <span class="break-all sm:break-normal">{{ formatDate(conflict.conflicting_period.start_date) }} - {{ formatDate(conflict.conflicting_period.end_date) }} ({{ conflict.conflicting_period.number_of_days }} días)</span>
+                                                    </div>
+                                                    <div class="flex flex-col sm:flex-row sm:justify-between gap-1 sm:gap-2">
+                                                        <span class="font-medium">Período solicitado:</span>
+                                                        <span class="break-all sm:break-normal">{{ formatDate(conflict.target_period.start_date) }} - {{ formatDate(conflict.target_period.end_date) }} ({{ conflict.target_period.number_of_days }} días)</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+            
+                    <!-- Períodos solicitados -->
+                    <div class="mb-4 sm:mb-6">
+                        <h3 class="text-sm font-medium text-gray-700 mb-3">Períodos solicitados:</h3>
+            
+                        <div class="space-y-2">
+                            <div v-for="period in application.vacation_periods" :key="period.id" 
+                                 class="flex flex-col sm:flex-row sm:items-center p-3 bg-gray-50 rounded-lg gap-3 sm:gap-0">
+                                <div class="flex items-center flex-1">
+                                    <div class="w-6 h-6 sm:w-8 sm:h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2 sm:mr-3 flex-shrink-0">
+                                        <svg class="w-3 h-3 sm:w-4 sm:h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd"
+                                                d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+                                                clip-rule="evenodd" />
+                                        </svg>
+                                    </div>
+                                    <div class="flex flex-col sm:flex-row sm:items-center sm:flex-1 gap-2">
+                                        <span class="text-gray-700 text-sm">
+                                            {{ formatDate(period.start_date) }} - {{ formatDate(period.end_date) }}
+                                        </span>
+                                        <span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full font-medium self-start sm:self-auto">
+                                            {{ period.number_of_days }} {{ period.number_of_days === 1 ? 'día' : 'días' }}
+                                        </span>
+                                    </div>
+                                </div>
+                                
+                                <!-- Botones de acción para períodos individuales -->
+                                <div v-if="application.status === 'Pendiente'" class="flex gap-2 justify-start sm:justify-end">
+                                    <button
+                                        class="flex items-center justify-center gap-1 bg-green-500 hover:bg-green-600 text-white font-medium py-1.5 px-3 rounded text-xs transition-colors"
+                                        @click="application.vacation_periods.length > 1 ? approvePeriod(period.id) : approveAll(application.id)"
+                                    >
+                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd"
+                                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                                clip-rule="evenodd" />
+                                        </svg>
+                                        Aprobar
+                                    </button>
+                    
+                                    <button
+                                        class="flex items-center justify-center gap-1 bg-red-500 hover:bg-red-600 text-white font-medium py-1.5 px-3 rounded text-xs transition-colors">
+                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd"
+                                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                                                clip-rule="evenodd" />
+                                        </svg>
+                                        Rechazar
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+            
+                        <!-- Total -->
+                        <div class="mt-3 text-right">
+                            <span class="text-sm font-medium text-gray-700">
+                                Total: {{ calculateTotalDays(application.vacation_periods) }} días
+                            </span>
+                        </div>
+                    </div>
+            
+                    <!-- Comentarios -->
+                    <div v-if="application.comments" class="mb-4 sm:mb-6">
+                        <h3 class="text-sm font-medium text-gray-700 mb-2">Comentarios:</h3>
+                        <div class="p-3 bg-gray-50 rounded-lg">
+                            <span class="text-gray-700 text-sm">{{ application.comments }}</span>
+                        </div>
+                    </div>
+            
+                    <!-- Motivo de rechazo -->
+                    <div v-if="application.rejection_reason" class="mb-4 sm:mb-6">
+                        <h3 class="text-sm font-medium text-red-700 mb-2">Motivo de rechazo:</h3>
+                        <div class="p-3 bg-red-50 rounded-lg border border-red-200">
+                            <span class="text-red-700 text-sm">{{ application.rejection_reason }}</span>
+                        </div>
+                    </div>
+            
+                    <!-- Botones de acción -->
+                    <div v-if="application.status === 'Pendiente' && application.vacation_periods.length > 1" class="flex flex-col sm:flex-row gap-2 sm:gap-3">
+                        <button
+                            class="flex items-center justify-center gap-2 bg-green-500 hover:bg-green-600 text-white font-medium py-2.5 sm:py-2 px-4 rounded-lg transition-colors"
+                            @click="approveAll(application.id)"
+                        >
+                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd"
+                                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                            Aprobar todo
+                        </button>
+            
+                        <button
+                            class="flex items-center justify-center gap-2 bg-red-500 hover:bg-red-600 text-white font-medium py-2.5 sm:py-2 px-4 rounded-lg transition-colors">
+                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd"
+                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                            Rechazar todo
+                        </button>
+                    </div>
+                </div>
+            
+                <!-- Mensaje cuando no hay solicitudes -->
+                <div v-if="!applicationsForCoordinator || applicationsForCoordinator.length === 0" 
+                     class="text-center py-8 sm:py-12 px-4">
+                    <div class="w-12 h-12 sm:w-16 sm:h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <svg class="w-6 h-6 sm:w-8 sm:h-8 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                    <h3 class="text-base sm:text-lg font-medium text-gray-900 mb-2">No hay solicitudes pendientes</h3>
+                    <p class="text-sm sm:text-base text-gray-500">Tu equipo no tiene solicitudes de vacaciones que requieran revisión.</p>
+                </div>
+            </div>
+            <div class="order-1 lg:order-2 lg:col-span-4">
+                <Calendar 
+                    ref="calendarRef"
+                    :conflictDays="conflictDays"
+                    @monthChanged="fetchConflictDays"
+                />
+            </div>
+        </div>
+    </div>
+</template>

src/pages/Vacations/Coordinator/Module.js

@@ -0,0 +1,16 @@
+import { lang } from '@Lang/i18n';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`vacation-requests.coordinator.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `vacations.coordinator.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`vacations.${str}`)
+
+export {
+    viewTo,
+    apiTo,
+    transl
+}

src/pages/Vacations/Employee/Create.vue

@@ -0,0 +1,181 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, viewTo } from './Module'
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Form from './Form.vue';
+
+/** Definidores */
+const router = useRouter();
+
+const form = useForm({
+    periods: [
+        {
+            start_date: '',
+            end_date: '',
+            number_of_days: 0,
+        }
+    ],
+    comments: ''
+});
+
+const availableDays = ref(0);
+const formRef = ref(null);
+
+// Calcular días restantes
+const remainingDays = computed(() => {
+    if (!formRef.value) return availableDays.value;
+    return availableDays.value - formRef.value.totalSelectedDays;
+});
+
+// Calcular total de días seleccionados
+const totalSelectedDays = computed(() => {
+    if (!formRef.value) return 0;
+    return formRef.value.totalSelectedDays;
+});
+
+// Obtener períodos con datos
+const periodsWithData = computed(() => {
+    return form.periods.filter(period => period.start_date && period.end_date && period.number_of_days > 0);
+});
+
+/** Métodos */
+function submit() {
+    form.post(apiTo('store'), {
+        onSuccess: (res) => {
+            Notify.success(Lang('created'));
+            router.push(viewTo({ name: 'index' }));
+        }
+    });
+}
+
+/** Ciclos */
+onMounted(() => {
+    api.get(route('resources.available-days'), {
+        onSuccess: (res) => {
+            availableDays.value = res.available_days;
+        }
+    });
+});
+</script>
+
+<template>
+    <div>
+        <!-- Header -->
+        <div class="mb-8">
+            <div class="flex items-center gap-4 mb-4">
+            <RouterLink :to="viewTo({ name: 'index' })">
+                    <button class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 hover:bg-slate-200 with-transition dark:bg-slate-800 dark:hover:bg-slate-700">
+                        <GoogleIcon name="arrow_back" class="text-slate-600 dark:text-slate-300" />
+                    </button>
+            </RouterLink>
+                <div>
+                    <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Solicitar Vacaciones</h1>
+                    <p class="text-slate-600 dark:text-slate-400">Completa el formulario para solicitar tus días de vacaciones.</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Layout de dos columnas -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Formulario - Columna izquierda (2/3) -->
+            <div class="lg:col-span-2">
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
+                    <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Detalles de la Solicitud</h2>
+                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Selecciona las fechas y proporciona información adicional.</p>
+
+                    <Form 
+                        ref="formRef"
+                        :form="form"
+                        @submit="submit"
+                    />
+                </div>
+            </div>
+
+            <!-- Resumen - Columna derecha (1/3) -->
+            <div class="lg:col-span-1">
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
+                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Resumen de Solicitud</h3>
+                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Revisa los detalles antes de enviar.</p>
+
+                    <!-- Días disponibles -->
+                    <div class="text-center mb-6 p-4 bg-slate-50 rounded-lg dark:bg-slate-700/50">
+                        <div class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ availableDays }}</div>
+                        <div class="text-sm text-slate-600 dark:text-slate-400">Días Disponibles</div>
+                    </div>
+
+                    <!-- Detalles de períodos -->
+                    <div v-if="periodsWithData.length > 0" class="space-y-4 mb-6">
+                        <div v-for="(period, index) in periodsWithData" :key="index" class="space-y-2">
+                            <h4 class="font-medium text-slate-900 dark:text-slate-100">
+                                Período {{ index + 1 }}:
+                            </h4>
+                            <div class="space-y-1 text-sm text-slate-600 dark:text-slate-400">
+                                <div>Inicio: {{ period.start_date }}</div>
+                                <div>Fin: {{ period.end_date }}</div>
+                                <div class="flex items-center gap-2">
+                                    <span>Días en período {{ index + 1 }}:</span>
+                                    <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
+                                        {{ period.number_of_days }} día{{ period.number_of_days > 1 ? 's' : '' }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Resumen de días -->
+                    <div v-if="totalSelectedDays > 0" class="space-y-3 mb-6">
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-slate-600 dark:text-slate-400">Total de días:</span>
+                            <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
+                                {{ totalSelectedDays }} día{{ totalSelectedDays > 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-slate-600 dark:text-slate-400">Días restantes:</span>
+                            <span class="px-2 py-1 rounded-full text-xs font-medium"
+                                  :class="remainingDays < 0 ? 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'">
+                                {{ remainingDays }} día{{ remainingDays !== 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Advertencia si se excede el límite -->
+                    <div v-if="remainingDays < 0" class="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
+                        <div class="flex items-center gap-2">
+                            <GoogleIcon name="warning" class="w-4 h-4 text-red-600 dark:text-red-400" />
+                            <span class="text-sm text-red-600 dark:text-red-400 font-medium">
+                                Excedes tus días disponibles por {{ Math.abs(remainingDays) }} día{{ Math.abs(remainingDays) > 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Recordatorios -->
+                    <div class="space-y-3">
+                        <h4 class="font-medium text-slate-900 dark:text-slate-100">Recordatorios:</h4>
+                        <div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Las solicitudes deben hacerse con 15 días de anticipación</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Tu coordinador revisará y aprobará la solicitud</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Recibirás una notificación con la decisión</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Los días se descontarán una vez aprobados</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

src/pages/Vacations/Employee/Form.vue

@@ -0,0 +1,236 @@
+<script setup>
+import { ref, watch, computed } from 'vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+
+import PrimaryButton from '@Holos/Button/Primary.vue';
+import Input         from '@Holos/Form/Input.vue';
+import Textarea         from '@Holos/Form/Textarea.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Eventos */
+const emit = defineEmits([
+    'submit'
+])
+
+/** Propiedades */
+const props = defineProps({
+    form: Object
+})
+
+/** Métodos */
+function submit() {
+    emit('submit')
+}
+
+function addPeriod() {
+    props.form.periods.push({
+        start_date: '',
+        end_date: '',
+        number_of_days: 0,
+    });
+}
+
+function removePeriod(index) {
+    if (props.form.periods.length > 1) {
+        props.form.periods.splice(index, 1);
+    }
+}
+
+function calculateDays(startDate, endDate) {
+    if (!startDate || !endDate) return 0;
+    
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    
+    // Validar que la fecha de inicio no sea posterior a la de fin
+    if (start > end) return 0;
+    
+    // Calcular la diferencia en días (incluyendo ambos días)
+    const timeDiff = end.getTime() - start.getTime();
+    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
+    
+    return daysDiff;
+}
+
+function updatePeriodDays(index) {
+    const period = props.form.periods[index];
+    if (period.start_date && period.end_date) {
+        period.number_of_days = calculateDays(period.start_date, period.end_date);
+    } else {
+        period.number_of_days = 0;
+    }
+}
+
+function getMinDate() {
+    const today = new Date();
+    let daysToAdd = 15;
+    let currentDate = new Date(today);
+    
+    while (daysToAdd > 0) {
+        currentDate.setDate(currentDate.getDate() + 1);
+        // Si no es domingo (0), contar el día
+        if (currentDate.getDay() !== 0) {
+            daysToAdd--;
+        }
+    }
+    
+    return currentDate.toISOString().split('T')[0];
+}
+
+// Función para desactivar domingos
+function isDisabled(date) {
+    return date.getDay() === 0; // 0 = domingo
+}
+
+// Función para formatear fecha a Y-m-d
+function formatDate(date) {
+    if (!date) return '';
+    
+    // Si la fecha ya es un string en formato correcto, devolverla
+    if (typeof date === 'string' && date.match(/^\d{4}-\d{2}-\d{2}$/)) {
+        return date;
+    }
+    
+    let d;
+    if (date instanceof Date) {
+        d = date;
+    } else {
+        d = new Date(date);
+    }
+    
+    // Verificar que la fecha es válida
+    if (isNaN(d.getTime())) {
+        console.warn('Fecha inválida recibida:', date);
+        return '';
+    }
+    
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
+// Watcher para detectar cambios en las fechas
+watch(() => props.form.periods, (newPeriods) => {
+    newPeriods.forEach((period, index) => {
+        if (period.start_date && period.end_date) {
+            updatePeriodDays(index);
+        }
+    });
+}, { deep: true });
+
+// Calcular total de días seleccionados
+const totalSelectedDays = computed(() => {
+    return props.form.periods.reduce((total, period) => {
+        return total + (period.number_of_days || 0);
+    }, 0);
+});
+
+// Exponer el total para el componente padre
+defineExpose({
+    totalSelectedDays
+});
+</script>
+
+<template>
+    <form @submit.prevent="submit" class="space-y-6">
+        <!-- Períodos de vacaciones -->
+        <div class="space-y-4">
+            <div v-for="(period, index) in form.periods" :key="index" class="space-y-4">
+                <div class="flex items-center justify-between">
+                    <h4 class="text-sm font-medium text-slate-700 dark:text-slate-300">
+                        Período {{ index + 1 }}
+                    </h4>
+                    <button
+                        v-if="form.periods.length > 1"
+                        type="button"
+                        @click="removePeriod(index)"
+                        class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-md with-transition dark:text-red-400 dark:hover:bg-red-500/10"
+                    >
+                        <GoogleIcon name="delete" class="w-4 h-4" />
+                        Eliminar
+                    </button>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <div class="relative">
+                            <VueDatePicker
+                                v-model="period.start_date"
+                                class="w-full"
+                                placeholder="Fecha de inicio"
+                                format="dd/MM/yyyy"
+                                locale="es"
+                                :min-date="getMinDate()"
+                                :disabled-dates="isDisabled"
+                                :enable-time-picker="false"
+                                :auto-apply="true"
+                                :close-on-auto-apply="true"
+                                @update:model-value="(date) => { 
+                                    console.log('Fecha seleccionada (inicio):', date);
+                                    period.start_date = formatDate(date); 
+                                    console.log('Fecha formateada (inicio):', period.start_date);
+                                    updatePeriodDays(index); 
+                                }"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <div class="relative">
+                            <VueDatePicker
+                                v-model="period.end_date"
+                                class="w-full"
+                                placeholder="Fecha de fin"
+                                format="dd/MM/yyyy"
+                                locale="es"
+                                :min-date="getMinDate()"
+                                :disabled-dates="isDisabled"
+                                :enable-time-picker="false"
+                                :auto-apply="true"
+                                :close-on-auto-apply="true"
+                                @update:model-value="(date) => { 
+                                    console.log('Fecha seleccionada (fin):', date);
+                                    period.end_date = formatDate(date); 
+                                    console.log('Fecha formateada (fin):', period.end_date);
+                                    updatePeriodDays(index); 
+                                }"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Botón añadir período -->
+            <button
+                type="button"
+                @click="addPeriod"
+                class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg with-transition dark:text-blue-400 dark:hover:bg-blue-500/10"
+            >
+                <GoogleIcon name="add" />
+                Añadir período
+            </button>
+        </div>
+
+        <!-- Comentarios -->
+        <div>
+            <Textarea
+                v-model="form.comments"
+                id="comments"
+                rows="4"
+                class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
+                placeholder="Agrega cualquier información adicional sobre tu solicitud..."
+                :onError="form.errors.comments"
+            />
+        </div>
+
+        <!-- Botón de envío -->
+        <div class="col-span-1 md:col-span-2 flex justify-center">
+            <PrimaryButton
+                v-text="$t('request')"
+                :class="{ 'opacity-25': form.processing }"
+                :disabled="form.processing"
+            />
+        </div>
+    </form>
+</template>

src/pages/Vacations/Employee/Index.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { api } from '@Services/Api';
+import { getDate } from '@Controllers/DateController';
+import { apiTo, viewTo } from './Module'
+
+import GoogleIcon          from '@Shared/GoogleIcon.vue';
+import PrimaryButton       from '@Holos/Button/Primary.vue';
+
+/** Propiedades */
+const vacationRequests = ref([]);
+
+/** Metodos */
+const getStatusClasses = (status) => {
+    const statusMap = {
+        'Pendiente': 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+        'Aprobado': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+        'Rechazado': 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+        'Agendado': 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
+        'Cancelado': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+        'Concluido': 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300'
+    };
+    
+    return statusMap[status] || 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300';
+};
+
+const getStatusIcon = (status) => {
+    const iconMap = {
+        'Pendiente': { name: 'schedule', classes: 'text-amber-600 dark:text-amber-400' },
+        'Aprobado': { name: 'check_circle', classes: 'text-blue-600 dark:text-blue-400' },
+        'Rechazado': { name: 'cancel', classes: 'text-orange-600 dark:text-orange-400' },
+        'Agendado': { name: 'event', classes: 'text-green-600 dark:text-green-400' },
+        'Cancelado': { name: 'block', classes: 'text-red-600 dark:text-red-400' },
+        'Concluido': { name: 'task_alt', classes: 'text-cyan-600 dark:text-cyan-400' }
+    };
+    
+    return iconMap[status] || { name: 'help', classes: 'text-gray-600 dark:text-gray-400' };
+};
+
+const getStatusIconContainer = (status) => {
+    const containerMap = {
+        'Pendiente': 'bg-amber-100 dark:bg-amber-900/30',
+        'Aprobado': 'bg-blue-100 dark:bg-blue-900/30',
+        'Rechazado': 'bg-orange-100 dark:bg-orange-900/30',
+        'Agendado': 'bg-green-100 dark:bg-green-900/30',
+        'Cancelado': 'bg-red-100 dark:bg-red-900/30',
+        'Concluido': 'bg-cyan-100 dark:bg-cyan-900/30'
+    };
+    
+    return containerMap[status] || 'bg-gray-100 dark:bg-gray-900/30';
+};
+
+/** Ciclos */
+onMounted(() => {
+    api.get(apiTo('index'), {
+        onSuccess: (r) => {
+            vacationRequests.value = r.vacation_requests.data;
+        }
+    });
+});
+</script>
+
+<template>
+    <div>
+        <!-- Header -->
+        <div class="flex items-center justify-between mb-8">
+            <div>
+                <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
+                    Mis Solicitudes
+                </h1>
+                <p class="text-slate-600 dark:text-slate-400">Historial completo de todas tus solicitudes de vacaciones.</p>
+            </div>
+            <RouterLink :to="viewTo({ name: 'create' })">
+                <PrimaryButton
+                    type="button"
+                    class="flex items-center gap-2"
+                >
+                    <GoogleIcon name="calendar_month" />
+                    Nueva Solicitud
+                </PrimaryButton>
+            </RouterLink>
+        </div>
+
+        <!-- Lista de solicitudes -->
+        <div class="space-y-4">
+            <div v-for="vacation in vacationRequests" class="bg-white rounded-xl border border-slate-200 p-6 shadow-sm dark:bg-slate-800 dark:border-slate-700">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center gap-3">
+                        <div :class="`flex items-center justify-center w-10 h-10 rounded-lg ${getStatusIconContainer(vacation.status)}`">
+                            <GoogleIcon :name="getStatusIcon(vacation.status).name" :class="getStatusIcon(vacation.status).classes" />
+                        </div>
+                        <div>
+                            <h3 v-if="vacation.vacation_periods.length > 1" class="font-semibold text-slate-900 dark:text-slate-100">{{ vacation.vacation_periods.length }} periodos</h3>
+                            <h3 v-else class="font-semibold text-slate-900 dark:text-slate-100">{{ getDate(vacation.vacation_periods[0].start_date) }} - {{ getDate(vacation.vacation_periods[0].end_date) }}</h3>
+                            <p class="text-sm text-slate-600 dark:text-slate-400">{{ vacation.total_days }} días</p>
+                        </div>
+                    </div>
+                    <span :class="`px-3 py-1 rounded-full text-sm font-medium ${getStatusClasses(vacation.status)}`">
+                        {{ vacation.status }}
+                    </span>
+                </div>
+
+                <div v-for="(period, index) in vacation.vacation_periods" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                    <div>
+                        <p class="text-sm font-medium text-slate-700 dark:text-slate-300">Período {{ index + 1 }}:</p>
+                        <p class="text-sm text-slate-600 dark:text-slate-400">{{ getDate(period.start_date) }} - {{ getDate(period.end_date) }} ({{ period.number_of_days }} días)</p>
+                    </div>
+                </div>
+
+                <div class="flex justify-end gap-3">
+                    <button class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-lg with-transition dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-700">
+                        <GoogleIcon name="visibility" />
+                        Ver detalles
+                    </button>
+                    <button class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg with-transition dark:text-red-400 dark:hover:bg-red-900/20">
+                        <GoogleIcon name="cancel" />
+                        Cancelar
+                    </button>
+                </div>
+            </div>
+
+            <!-- Estado vacío cuando no hay solicitudes -->
+            <div v-if="vacationRequests.length == 0" class="text-center py-12">
+                <GoogleIcon name="event_busy" class="text-slate-300 text-6xl mb-4 dark:text-slate-600" />
+                <h3 class="text-lg font-medium text-slate-900 dark:text-slate-100 mb-2">No tienes más solicitudes</h3>
+                <p class="text-slate-600 dark:text-slate-400 mb-6">Cuando realices nuevas solicitudes de vacaciones aparecerán aquí.</p>
+                <RouterLink :to="viewTo({ name: 'create' })">
+                    <PrimaryButton>
+                        <GoogleIcon name="add" class="mr-2" />
+                        Nueva Solicitud
+                    </PrimaryButton>
+                </RouterLink>
+            </div>
+        </div>
+    </div>
+</template>

src/pages/Vacations/Employee/Module.js

@@ -0,0 +1,16 @@
+import { lang } from '@Lang/i18n';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`vacation-requests.employee.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `vacations.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`vacations.${str}`)
+
+export {
+    viewTo,
+    apiTo,
+    transl
+}

src/router/Index.js

@@ -38,6 +38,26 @@ const router = createRouter({
                         icon: 'grid_view',
                     }
                 },
+                {
+                    path: 'vacations',
+                    name: 'vacations',
+                    meta: {
+                        title: 'Vacaciones',
+                        icon: 'calendar_month',
+                    },
+                    children: [
+                        {
+                            path: '',
+                            name: 'vacations.index',
+                            component: () => import('@Pages/Vacations/Employee/Index.vue'),
+                        },
+                        {
+                            path: 'create',
+                            name: 'vacations.create',
+                            component: () => import('@Pages/Vacations/Employee/Create.vue'),
+                        }
+                    ]
+                },
                 {
                     path: 'profile',
                     name: 'profile.show',
@@ -85,6 +105,21 @@ const router = createRouter({
                         }
                     ]
                 },
+                {
+                    path: 'vacations',
+                    name: 'vacations.coordinator',
+                    meta: {
+                        title: 'Vacaciones',
+                        icon: 'calendar_month',
+                    },
+                    children: [
+                        {
+                            path: '',
+                            name: 'vacations.coordinator.index',
+                            component: () => import('@Pages/Vacations/Coordinator/Index.vue'),
+                        }
+                    ]
+                },
             ]
         },
         {
@@ -142,6 +177,22 @@ const router = createRouter({
                         },
                     ]
                 },
+                {
+                    path: 'vacations',
+                    name: 'admin.vacations',
+                    meta: {
+                        title: 'Vacaciones',
+                        icon: 'calendar_month',
+                    },
+                    redirect: '/admin/vacations',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.vacations.index',
+                            component: () => import('@Pages/Vacations/Admin/Index.vue'),
+                        }
+                    ]
+                },
                 {
                     path: 'courses',
                     name: 'admin.courses',