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/layout/AppHeader.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const queue = usePrintQueue()
+</script>
+
+<template>
+  <header class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
+    <div>
+      <h1 class="text-xl font-bold text-gray-900 dark:text-white">
+        PrinterCentral
+      </h1>
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        Control de impresoras Epson ePOS
+      </p>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <!-- Contador de cola (visible en desktop) -->
+      <UBadge
+        v-if="queue.operations.value.length > 0"
+        color="primary"
+        variant="subtle"
+        class="hidden md:flex"
+      >
+        {{ queue.operations.value.length }} en cola
+      </UBadge>
+
+      <!-- Toggle Dark/Light mode -->
+      <UColorModeButton />
+    </div>
+  </header>
+</template>

app/components/layout/MobileNavigation.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const activeTab = defineModel<string>({ default: 'constructor' })
+
+const queue = usePrintQueue()
+
+const tabs = computed(() => [
+  {
+    label: 'Constructor',
+    value: 'constructor',
+    icon: 'i-heroicons-pencil-square'
+  },
+  {
+    label: `Cola (${queue.operations.value.length})`,
+    value: 'queue',
+    icon: 'i-heroicons-queue-list'
+  },
+  {
+    label: 'Templates',
+    value: 'templates',
+    icon: 'i-heroicons-document-duplicate'
+  }
+])
+</script>
+
+<template>
+  <nav class="fixed bottom-0 left-0 right-0 bg-white/95 dark:bg-gray-950/95 backdrop-blur border-t border-gray-200 dark:border-gray-800 md:hidden z-50 safe-area-bottom">
+    <UTabs
+      v-model="activeTab"
+      :items="tabs"
+      variant="pill"
+      color="neutral"
+      :content="false"
+      class="justify-center py-2"
+      :ui="{
+        list: 'justify-center gap-1',
+        trigger: 'px-3 py-2'
+      }"
+    />
+  </nav>
+</template>