feat: AI Brand Voice Translator integration and Mesh Content fix

src/components/TopHeader.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { LayoutTemplate, Menu, Home, Settings, Download, ZoomIn, ZoomOut, X, CalendarDays, Sparkles, Play, FolderOpen } from 'lucide-react';
+import { AISettingsPanel } from './settings/AISettingsPanel';
 
 interface TopHeaderProps {
   currentStep: 'dashboard' | 'brand' | 'studio' | 'express' | 'content-grid' | 'template-builder' | 'production-form';
@@ -37,6 +38,7 @@ export const TopHeader: React.FC<TopHeaderProps> = ({
   titleOverride,
 }) => {
   const [menuOpen, setMenuOpen] = useState(false);
+  const [showAISettings, setShowAISettings] = useState(false);
   const isStudio = currentStep === 'studio';
 
   return (
@@ -86,11 +88,22 @@ export const TopHeader: React.FC<TopHeaderProps> = ({
                 >
                   <FolderOpen size={14} /> Abrir
                 </button>
+                <div className="h-px bg-neutral-700 my-1" />
+                <button
+                  onClick={() => { setShowAISettings(true); setMenuOpen(false); }}
+                  className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-neutral-300 hover:bg-neutral-700 hover:text-white transition-colors"
+                >
+                  <Sparkles size={14} className="text-violet-400" /> Configuración IA
+                </button>
               </div>
             </>
           )}
         </div>
 
+        {showAISettings && (
+          <AISettingsPanel onClose={() => setShowAISettings(false)} />
+        )}
+
         <div className="flex items-center gap-2">
           <div className="bg-violet-600/20 p-1 rounded text-violet-400">
             <LayoutTemplate size={14} />