refactor(ui): Rediseño completo de UI con Nuxt UI 4

- Nuevo layout responsivo mobile-first con tabs inferiores
- Sidebar colapsable en desktop con cola de impresión
- Sistema de templates reutilizables con localStorage
- Soporte Dark/Light mode con UColorModeButton
- Composables usePrintQueue y useTemplates para estado global
- Componentes modulares: CommandBuilder, QuickActions, PrintQueue, QueueItem
- Navegación por tabs: Constructor | Cola | Templates

app/components/queue/QueueActions.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+const queue = usePrintQueue()
+const templates = useTemplates()
+
+const saveDrawerOpen = ref(false)
+const templateName = ref('')
+const templateDescription = ref('')
+
+function saveAsTemplate() {
+  if (!templateName.value.trim()) return
+  templates.saveTemplate(
+    templateName.value.trim(),
+    templateDescription.value.trim(),
+    queue.operations.value as any
+  )
+  templateName.value = ''
+  templateDescription.value = ''
+  saveDrawerOpen.value = false
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <!-- Resultado de la última impresión -->
+    <UCard v-if="queue.result.value" variant="soft" :class="queue.result.value.ok ? '' : 'border-red-500'">
+      <div class="flex items-center gap-2">
+        <UIcon
+          :name="queue.result.value.ok ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-circle'"
+          :class="queue.result.value.ok ? 'text-green-500' : 'text-red-500'"
+          class="w-5 h-5"
+        />
+        <span class="text-sm">
+          {{ queue.result.value.ok ? (queue.result.value.msg || 'Listo') : (queue.result.value.error || 'Error') }}
+        </span>
+      </div>
+      <pre v-if="queue.result.value.code" class="text-xs text-gray-500 mt-2 overflow-auto">{{ queue.result.value.code }}</pre>
+    </UCard>
+
+    <!-- Botones de acción -->
+    <div class="flex flex-wrap gap-2">
+      <UButton
+        color="primary"
+        :loading="queue.loading.value"
+        :disabled="queue.operations.value.length === 0"
+        @click="queue.sendToPrinter"
+      >
+        <template #leading>
+          <UIcon name="i-heroicons-printer" class="w-4 h-4" />
+        </template>
+        Imprimir ({{ queue.operations.value.length }})
+      </UButton>
+
+      <UButton
+        variant="outline"
+        :disabled="queue.operations.value.length === 0"
+        @click="saveDrawerOpen = true"
+      >
+        <template #leading>
+          <UIcon name="i-heroicons-bookmark" class="w-4 h-4" />
+        </template>
+        Guardar template
+      </UButton>
+
+      <UButton
+        variant="ghost"
+        color="error"
+        :disabled="queue.operations.value.length === 0"
+        @click="queue.clearQueue"
+      >
+        <template #leading>
+          <UIcon name="i-heroicons-trash" class="w-4 h-4" />
+        </template>
+        Limpiar
+      </UButton>
+    </div>
+
+    <!-- Drawer para guardar template -->
+    <UDrawer v-model:open="saveDrawerOpen" direction="bottom" title="Guardar como Template">
+      <template #body>
+        <div class="space-y-4 p-4">
+          <UFormField label="Nombre del template" required>
+            <UInput v-model="templateName" placeholder="Ej: Ticket de venta" />
+          </UFormField>
+
+          <UFormField label="Descripción (opcional)">
+            <UTextarea
+              v-model="templateDescription"
+              :rows="2"
+              placeholder="Breve descripción del template..."
+            />
+          </UFormField>
+
+          <p class="text-sm text-gray-500 dark:text-gray-400">
+            Se guardarán {{ queue.operations.value.length }} comandos de la cola actual.
+          </p>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="flex gap-2 justify-end p-4">
+          <UButton variant="ghost" @click="saveDrawerOpen = false">
+            Cancelar
+          </UButton>
+          <UButton color="primary" :disabled="!templateName.trim()" @click="saveAsTemplate">
+            Guardar
+          </UButton>
+        </div>
+      </template>
+    </UDrawer>
+  </div>
+</template>