fix: Corregir errores de crypto.randomUUID, hydration y UI de impresoras

- Agregar fallback para crypto.randomUUID en useTemplates.ts (compatibilidad con navegadores antiguos)
- Envolver sidebar con ClientOnly para evitar hydration mismatch
- Agregar botón de configuración de impresoras en sidebar
- Agregar drawer lateral para gestión de impresoras en desktop

app/composables/useTemplates.ts

@@ -11,6 +11,19 @@ export interface PrintTemplate {
 
 const STORAGE_KEY = 'printercentral-templates'
 
+// Función para generar UUID compatible con todos los navegadores
+function generateId(): string {
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+    return crypto.randomUUID()
+  }
+  // Fallback para navegadores sin crypto.randomUUID
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0
+    const v = c === 'x' ? r : (r & 0x3 | 0x8)
+    return v.toString(16)
+  })
+}
+
 export function useTemplates() {
   const templates = useState<PrintTemplate[]>('templates', () => [])
   const initialized = useState('templatesInitialized', () => false)
@@ -37,7 +50,7 @@ export function useTemplates() {
 
   function saveTemplate(name: string, description: string, operations: Operation[]): PrintTemplate {
     const template: PrintTemplate = {
-      id: crypto.randomUUID(),
+      id: generateId(),
       name,
       description,
       operations: JSON.parse(JSON.stringify(operations)),

app/pages/index.vue

@@ -3,6 +3,7 @@ const activeTab = ref('constructor')
 const isDesktop = useMediaQuery('(min-width: 768px)')
 const queue = usePrintQueue()
 const printers = usePrinters()
+const showPrintersDrawer = ref(false)
 
 // Cargar impresoras al iniciar
 onMounted(() => {
@@ -18,6 +19,7 @@ onMounted(() => {
     <!-- Layout principal -->
     <div class="flex h-[calc(100vh-73px)]">
       <!-- Sidebar solo en desktop -->
+      <ClientOnly>
         <aside
           v-if="isDesktop"
           class="w-80 border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 flex flex-col"
@@ -31,7 +33,17 @@ onMounted(() => {
 
           <!-- Selector de impresora -->
           <div class="p-4 border-b border-gray-200 dark:border-gray-800">
-          <PrintersSelector />
+            <div class="flex items-center gap-2">
+              <PrintersSelector class="flex-1" />
+              <UButton
+                icon="i-heroicons-cog-6-tooth"
+                color="neutral"
+                variant="ghost"
+                size="sm"
+                title="Configurar impresoras"
+                @click="showPrintersDrawer = true"
+              />
+            </div>
           </div>
 
           <div class="flex-1 overflow-y-auto p-4">
@@ -42,6 +54,7 @@ onMounted(() => {
             <QueueActions />
           </div>
         </aside>
+      </ClientOnly>
 
       <!-- Panel principal -->
       <main class="flex-1 overflow-y-auto pb-mobile-nav md:pb-0">
@@ -71,5 +84,15 @@ onMounted(() => {
 
     <!-- Navegación mobile -->
     <LayoutMobileNavigation v-model="activeTab" />
+
+    <!-- Drawer para gestionar impresoras (desktop) -->
+    <UDrawer v-model:open="showPrintersDrawer" direction="right">
+      <template #header>
+        <h3 class="text-lg font-semibold">Gestión de Impresoras</h3>
+      </template>
+      <div class="p-4">
+        <PrintersList />
+      </div>
+    </UDrawer>
   </div>
 </template>