From 0d10b2f54c16e25196fcf908e8bfab3f1792a442 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sat, 28 Mar 2026 16:19:55 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20traducir=20interfaz=20completa=20al=20e?=
 =?UTF-8?q?spa=C3=B1ol?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DataRow.vue       |   8 +-
 frontend/src/components/SideNavBar.vue    |  12 +--
 frontend/src/components/TopAppBar.vue     |   6 +-
 frontend/src/views/AnalysisCreateView.vue |  86 ++++++++--------
 frontend/src/views/AnalysisDetailView.vue | 115 +++++++++++-----------
 frontend/src/views/DashboardView.vue      |  70 ++++++-------
 6 files changed, 148 insertions(+), 149 deletions(-)

diff --git a/frontend/src/components/DataRow.vue b/frontend/src/components/DataRow.vue
index e2f2210..1811e40 100644
--- a/frontend/src/components/DataRow.vue
+++ b/frontend/src/components/DataRow.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="flex items-center justify-between border-b border-white/5 pb-2 last:border-0 last:pb-0">
     <span class="text-[10px] font-bold text-outline uppercase tracking-wider">{{ label }}</span>
-    
+
     <template v-if="type === 'boolean'">
       <span :class="value ? 'text-primary' : 'text-outline/40'" class="text-xs font-bold uppercase tracking-widest">
-        {{ value ? 'YES' : 'NO' }}
+        {{ value ? 'SÍ' : 'NO' }}
       </span>
     </template>
-    
+
     <template v-else>
       <span v-if="value" class="text-xs font-medium text-right max-w-[150px] truncate" :class="highlight ? 'text-white' : 'text-on-surface-variant'">
         {{ value }}
@@ -23,7 +23,7 @@ defineProps({
   value: [String, Number, Boolean],
   type: {
     type: String,
-    default: 'text' // or 'boolean'
+    default: 'text' // o 'boolean'
   },
   highlight: Boolean
 })
diff --git a/frontend/src/components/SideNavBar.vue b/frontend/src/components/SideNavBar.vue
index af66b41..35fcd69 100644
--- a/frontend/src/components/SideNavBar.vue
+++ b/frontend/src/components/SideNavBar.vue
@@ -11,7 +11,7 @@
       </div>
     </div>
 
-    <!-- Navigation -->
+    <!-- Navegación -->
     <nav class="flex-1 space-y-1">
       <router-link to="/" class="flex items-center gap-3 px-3 py-2.5 text-[#c7c4d7] hover:text-white hover:bg-white/5 transition-all duration-200 group relative" active-class="bg-white/10 !text-white rounded-lg font-semibold">
         <span class="material-symbols-outlined text-[20px]">dashboard</span>
@@ -19,23 +19,23 @@
       </router-link>
       <router-link to="/analysis" class="flex items-center gap-3 px-3 py-2.5 text-[#c7c4d7] hover:text-white hover:bg-white/5 transition-all duration-200 group relative" active-class="bg-white/10 !text-white rounded-lg font-semibold">
         <span class="material-symbols-outlined text-[20px]">analytics</span>
-        <span class="text-sm font-medium">Analysis</span>
+        <span class="text-sm font-medium">Análisis</span>
       </router-link>
       <router-link to="/scripts" class="flex items-center gap-3 px-3 py-2.5 text-[#c7c4d7] hover:text-white hover:bg-white/5 transition-all duration-200 group relative" active-class="bg-white/10 !text-white rounded-lg font-semibold">
         <span class="material-symbols-outlined text-[20px]">description</span>
-        <span class="text-sm font-medium">Scripts</span>
+        <span class="text-sm font-medium">Guiones</span>
       </router-link>
       <router-link to="/settings" class="flex items-center gap-3 px-3 py-2.5 text-[#c7c4d7] hover:text-white hover:bg-white/5 transition-all duration-200 group relative" active-class="bg-white/10 !text-white rounded-lg font-semibold">
         <span class="material-symbols-outlined text-[20px]">settings</span>
-        <span class="text-sm font-medium">Settings</span>
+        <span class="text-sm font-medium">Configuración</span>
       </router-link>
     </nav>
 
-    <!-- Footer Action -->
+    <!-- Acción principal -->
     <div class="mt-auto pt-6 border-t border-white/5">
       <router-link to="/new-analysis" class="w-full flex items-center justify-center gap-2 py-3 px-4 bg-primary-container text-on-primary-container rounded-lg font-bold text-sm shadow-lg shadow-primary/20 scale-95 active:scale-90 transition-transform hover:brightness-110">
         <span class="material-symbols-outlined text-sm">add</span>
-        New Analysis
+        Nuevo Análisis
       </router-link>
     </div>
   </aside>
diff --git a/frontend/src/components/TopAppBar.vue b/frontend/src/components/TopAppBar.vue
index d378c1c..fbec583 100644
--- a/frontend/src/components/TopAppBar.vue
+++ b/frontend/src/components/TopAppBar.vue
@@ -2,7 +2,7 @@
   <header class="fixed top-0 right-0 left-64 h-16 flex items-center justify-between px-8 z-30 bg-[#13131a]/80 backdrop-blur-xl font-['Manrope'] text-sm">
     <div class="relative w-96 group">
       <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-lg group-focus-within:text-primary transition-colors">search</span>
-      <input class="w-full bg-surface-container-lowest border-none rounded-full pl-10 pr-4 py-2 text-sm focus:ring-2 focus:ring-primary/40 text-on-surface placeholder:text-outline/50 transition-all font-medium" placeholder="Search analyzed scripts..." type="text"/>
+      <input class="w-full bg-surface-container-lowest border-none rounded-full pl-10 pr-4 py-2 text-sm focus:ring-2 focus:ring-primary/40 text-on-surface placeholder:text-outline/50 transition-all font-medium" placeholder="Buscar guiones analizados..." type="text"/>
     </div>
     <div class="flex items-center gap-6">
       <button class="relative text-[#c7c4d7] hover:text-white transition-opacity">
@@ -11,8 +11,8 @@
       </button>
       <div class="flex items-center gap-3 pl-6 border-l border-white/5">
         <div class="text-right">
-          <p class="text-xs font-bold text-white leading-none">Alex Rivera</p>
-          <p class="text-[10px] text-outline font-medium">Growth Lead</p>
+          <p class="text-xs font-bold text-white leading-none">Marketing Pro</p>
+          <p class="text-[10px] text-outline font-medium">Administrador</p>
         </div>
         <div class="w-8 h-8 rounded-full overflow-hidden bg-surface-container-highest flex items-center justify-center">
           <span class="material-symbols-outlined text-outline">account_circle</span>
diff --git a/frontend/src/views/AnalysisCreateView.vue b/frontend/src/views/AnalysisCreateView.vue
index 82ab862..b763783 100644
--- a/frontend/src/views/AnalysisCreateView.vue
+++ b/frontend/src/views/AnalysisCreateView.vue
@@ -1,86 +1,86 @@
 <template>
   <div class="max-w-7xl mx-auto flex flex-col gap-10">
-    <!-- Header -->
+    <!-- Encabezado -->
     <header class="flex flex-col md:flex-row md:items-end justify-between gap-6 border-b border-white/5 pb-8">
       <div>
-        <h1 class="text-5xl font-extrabold font-headline tracking-tighter text-white mb-2 leading-tight">New Video Analysis</h1>
+        <h1 class="text-5xl font-extrabold font-headline tracking-tighter text-white mb-2 leading-tight">Nuevo Análisis de Video</h1>
         <p class="text-primary text-sm font-bold flex items-center gap-2 tracking-widest uppercase">
           <span class="material-symbols-outlined text-sm">rocket_launch</span>
-          GPT-4o + Whisper Pipeline Engine
+          Motor de Pipeline GPT-4o + Whisper
         </p>
       </div>
       <div class="flex items-center gap-4">
-        <button class="px-6 py-3 bg-surface-container border border-white/5 text-outline font-bold rounded-xl text-sm hover:text-white transition-colors">Save as Draft</button>
+        <button class="px-6 py-3 bg-surface-container border border-white/5 text-outline font-bold rounded-xl text-sm hover:text-white transition-colors">Guardar Borrador</button>
         <button class="px-8 py-3 bg-gradient-to-br from-primary-container to-primary text-on-primary-container font-headline font-bold rounded-xl shadow-lg shadow-primary/20 hover:scale-105 active:scale-95 transition-all text-sm h-12 flex items-center gap-2" :disabled="analizando" @click="iniciarAnalisis">
           <span class="material-symbols-outlined text-sm">{{ analizando ? 'hourglass_top' : 'auto_fix_high' }}</span>
-          {{ analizando ? 'Analyzing...' : 'Start Pipeline' }}
+          {{ analizando ? 'Analizando...' : 'Iniciar Pipeline' }}
         </button>
       </div>
     </header>
 
     <div class="grid grid-cols-1 xl:grid-cols-12 gap-12">
-      <!-- Form Column -->
+      <!-- Columna del Formulario -->
       <div class="xl:col-span-7 flex flex-col gap-10">
-        <!-- Step 1: Source -->
+        <!-- Paso 1: Fuente -->
         <section class="space-y-6">
           <div class="flex items-center gap-3">
             <span class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center font-black text-sm border border-primary/20">01</span>
-            <h2 class="text-xl font-headline font-extrabold text-white tracking-tight">Source Identification</h2>
+            <h2 class="text-xl font-headline font-extrabold text-white tracking-tight">Identificación de Fuente</h2>
           </div>
-          
+
           <div class="glass-panel p-8 rounded-3xl border border-white/5 shadow-2xl space-y-8">
             <div class="space-y-3">
-              <label class="text-[10px] font-black uppercase tracking-widest text-outline ml-1">Video Destination URL</label>
+              <label class="text-[10px] font-black uppercase tracking-widest text-outline ml-1">URL del Video</label>
               <div class="relative group">
                 <span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-primary text-lg group-focus-within:animate-pulse">link</span>
-                <input v-model="form.url" type="url" placeholder="https://www.tiktok.com/@user/video/..." class="w-full bg-surface-container-low border border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm focus:ring-2 focus:ring-primary/40 focus:border-primary/40 text-white placeholder:text-outline/40 transition-all font-medium font-serif" :disabled="analizando"/>
+                <input v-model="form.url" type="url" placeholder="https://www.tiktok.com/@usuario/video/..." class="w-full bg-surface-container-low border border-white/10 rounded-2xl pl-12 pr-4 py-4 text-sm focus:ring-2 focus:ring-primary/40 focus:border-primary/40 text-white placeholder:text-outline/40 transition-all font-medium font-serif" :disabled="analizando"/>
               </div>
-              <p class="text-[10px] text-outline/60 italic px-1">Supports TikTok, Instagram Reels and YouTube Shorts.</p>
+              <p class="text-[10px] text-outline/60 italic px-1">Compatible con TikTok, Instagram Reels y YouTube Shorts.</p>
             </div>
 
             <div class="grid grid-cols-2 gap-6">
               <div class="space-y-3">
-                <label class="text-[10px] font-black uppercase tracking-widest text-outline ml-1">Organization / Client</label>
+                <label class="text-[10px] font-black uppercase tracking-widest text-outline ml-1">Organización / Cliente</label>
                 <select v-model="form.cliente_id" class="w-full bg-surface-container-low border border-white/10 rounded-2xl px-4 py-4 text-sm focus:ring-2 focus:ring-primary/40 text-on-surface font-medium appearance-none transition-all shadow-inner" :disabled="analizando">
-                  <option :value="null">In-house / Internal</option>
+                  <option :value="null">Interno / Sin cliente</option>
                   <option v-for="c in clientes" :key="c.id" :value="c.id">{{ c.nombre }}</option>
                 </select>
               </div>
               <div class="space-y-3">
-                <label class="text-[10px] font-black uppercase tracking-widest text-outline ml-1">Project Name (Optional)</label>
-                <input v-model="form.proyecto_nombre" type="text" placeholder="e.g. Q1 Campaign" class="w-full bg-surface-container-low border border-white/10 rounded-2xl px-4 py-4 text-sm focus:ring-2 focus:ring-primary/40 text-on-surface font-medium transition-all shadow-inner" :disabled="analizando"/>
+                <label class="text-[10px] font-black uppercase tracking-widest text-outline ml-1">Nombre del Proyecto (opcional)</label>
+                <input v-model="form.proyecto_nombre" type="text" placeholder="Ej. Campaña Q1" class="w-full bg-surface-container-low border border-white/10 rounded-2xl px-4 py-4 text-sm focus:ring-2 focus:ring-primary/40 text-on-surface font-medium transition-all shadow-inner" :disabled="analizando"/>
               </div>
             </div>
           </div>
         </section>
 
-        <!-- Step 2: Contextual Metrics -->
+        <!-- Paso 2: Métricas de Mercado -->
         <section class="space-y-6">
           <div class="flex items-center gap-3">
             <span class="w-8 h-8 rounded-lg bg-secondary/10 text-secondary flex items-center justify-center font-black text-sm border border-secondary/20">02</span>
-            <h2 class="text-xl font-headline font-extrabold text-white tracking-tight">Market Intelligence</h2>
+            <h2 class="text-xl font-headline font-extrabold text-white tracking-tight">Inteligencia de Mercado</h2>
           </div>
 
           <div class="glass-panel p-8 rounded-3xl border border-white/5 shadow-2xl space-y-8">
             <div class="grid grid-cols-2 gap-6">
               <div class="space-y-3">
-                <label class="text-[10px] font-black uppercase tracking-widest text-outline ml-1">Primary Niche</label>
+                <label class="text-[10px] font-black uppercase tracking-widest text-outline ml-1">Nicho Principal</label>
                 <div class="relative">
-                  <input v-model="form.niche" list="nichos-list" placeholder="Select or type..." class="w-full bg-surface-container-low border border-white/10 rounded-2xl px-4 py-4 text-sm focus:ring-2 focus:ring-primary/40 text-on-surface font-black uppercase tracking-widest shadow-inner" :disabled="analizando"/>
+                  <input v-model="form.niche" list="nichos-list" placeholder="Seleccionar o escribir..." class="w-full bg-surface-container-low border border-white/10 rounded-2xl px-4 py-4 text-sm focus:ring-2 focus:ring-primary/40 text-on-surface font-black uppercase tracking-widest shadow-inner" :disabled="analizando"/>
                   <datalist id="nichos-list">
                     <option v-for="n in nichos" :key="n" :value="n">{{ n }}</option>
                   </datalist>
                 </div>
               </div>
               <div class="space-y-3">
-                <label class="text-[10px] font-black uppercase tracking-widest text-outline ml-1">Target Audience</label>
-                <input v-model="form.mercado_objetivo" type="text" placeholder="e.g. Female Entrepreneurs 25-35" class="w-full bg-surface-container-low border border-white/10 rounded-2xl px-4 py-4 text-sm focus:ring-2 focus:ring-primary/40 text-on-surface font-medium shadow-inner" :disabled="analizando"/>
+                <label class="text-[10px] font-black uppercase tracking-widest text-outline ml-1">Audiencia Objetivo</label>
+                <input v-model="form.mercado_objetivo" type="text" placeholder="Ej. Emprendedoras 25-35 años" class="w-full bg-surface-container-low border border-white/10 rounded-2xl px-4 py-4 text-sm focus:ring-2 focus:ring-primary/40 text-on-surface font-medium shadow-inner" :disabled="analizando"/>
               </div>
             </div>
 
             <div class="grid grid-cols-3 gap-6">
               <div class="space-y-3">
-                <label class="text-[10px] font-black uppercase tracking-widest text-outline ml-1">Views</label>
+                <label class="text-[10px] font-black uppercase tracking-widest text-outline ml-1">Vistas</label>
                 <input v-model.number="form.vistas" type="number" placeholder="0" class="w-full bg-surface-container-low border border-white/10 rounded-2xl px-4 py-4 text-sm focus:ring-2 focus:ring-primary/40 text-on-surface font-bold text-center" :disabled="analizando"/>
               </div>
               <div class="space-y-3">
@@ -88,40 +88,40 @@
                 <input v-model.number="form.likes" type="number" placeholder="0" class="w-full bg-surface-container-low border border-white/10 rounded-2xl px-4 py-4 text-sm focus:ring-2 focus:ring-primary/40 text-on-surface font-bold text-center" :disabled="analizando"/>
               </div>
               <div class="space-y-3">
-                <label class="text-[10px] font-black uppercase tracking-widest text-outline ml-1">Shares / Saves</label>
+                <label class="text-[10px] font-black uppercase tracking-widest text-outline ml-1">Compartidos / Guardados</label>
                 <input v-model.number="form.compartidos" type="number" placeholder="0" class="w-full bg-surface-container-low border border-white/10 rounded-2xl px-4 py-4 text-sm focus:ring-2 focus:ring-primary/40 text-on-surface font-bold text-center" :disabled="analizando"/>
               </div>
             </div>
 
             <div class="flex items-center gap-4 p-4 rounded-2xl bg-surface-container-lowest border border-white/5">
               <input v-model="form.competidor_referente" type="checkbox" id="check-comp" class="w-5 h-5 rounded border-white/10 bg-surface text-primary focus:ring-primary focus:ring-offset-surface-container ring-offset-2 transition-all cursor-pointer" :disabled="analizando"/>
-              <label for="check-comp" class="text-xs font-bold text-on-surface cursor-pointer select-none">Mark as Strategic Competitor Reference</label>
+              <label for="check-comp" class="text-xs font-bold text-on-surface cursor-pointer select-none">Marcar como Referencia de Competidor Estratégico</label>
             </div>
           </div>
         </section>
       </div>
 
-      <!-- Status Column -->
+      <!-- Columna de Estado del Pipeline -->
       <div class="xl:col-span-5 flex flex-col gap-6">
         <div class="sticky top-24">
           <div class="bg-surface-container p-8 rounded-[40px] border border-outline-variant/10 shadow-3xl relative overflow-hidden flex flex-col gap-8">
             <div class="absolute -top-12 -right-12 w-32 h-32 bg-secondary/10 blur-3xl rounded-full"></div>
-            
+
             <div class="flex items-center justify-between border-b border-white/5 pb-6">
               <div>
-                <h3 class="text-sm font-headline font-black text-white uppercase tracking-widest mb-1">Pipeline Engine</h3>
-                <p class="text-[10px] text-outline uppercase font-bold tracking-tight">Real-time Analysis Status</p>
+                <h3 class="text-sm font-headline font-black text-white uppercase tracking-widest mb-1">Motor de Pipeline</h3>
+                <p class="text-[10px] text-outline uppercase font-bold tracking-tight">Estado del análisis en tiempo real</p>
               </div>
               <div class="flex items-center gap-2 px-3 py-1 bg-surface-container-low rounded-full border border-white/5">
                 <span class="w-1.5 h-1.5 rounded-full" :class="analizando ? 'bg-secondary animate-pulse' : 'bg-outline/30'"></span>
-                <span class="text-[10px] font-black tracking-widest uppercase" :class="analizando ? 'text-secondary' : 'text-outline'">{{ analizando ? 'Active' : 'Idle' }}</span>
+                <span class="text-[10px] font-black tracking-widest uppercase" :class="analizando ? 'text-secondary' : 'text-outline'">{{ analizando ? 'Activo' : 'En espera' }}</span>
               </div>
             </div>
 
             <div class="space-y-8 relative">
               <div class="absolute left-4 top-2 bottom-2 w-px bg-white/5 z-0"></div>
-              
-              <div v-for="(s, idx) in pasisVisibles" :key="s.id" class="flex gap-4 relative z-10" :class="idx > currentStepIdx ? 'opacity-30' : 'opacity-100'">
+
+              <div v-for="(s, idx) in pasosVisibles" :key="s.id" class="flex gap-4 relative z-10" :class="idx > currentStepIdx ? 'opacity-30' : 'opacity-100'">
                 <div class="w-8 h-8 rounded-full flex items-center justify-center shrink-0 transition-all duration-300" :class="idx === currentStepIdx ? 'bg-secondary text-on-secondary shadow-lg shadow-secondary/40 scale-110' : (idx < currentStepIdx ? 'bg-primary/20 text-primary' : 'bg-surface-container-highest text-outline')">
                   <span class="material-symbols-outlined text-sm font-black">{{ idx < currentStepIdx ? 'check' : s.icon }}</span>
                 </div>
@@ -135,16 +135,16 @@
             <div v-if="error" class="p-4 rounded-xl bg-red-500/10 border border-red-500/30 text-red-500 text-[11px] font-bold leading-relaxed shadow-lg">
               <div class="flex items-center gap-2 mb-1">
                 <span class="material-symbols-outlined text-sm">report</span>
-                <span class="uppercase tracking-widest">Pipeline Error</span>
+                <span class="uppercase tracking-widest">Error en el Pipeline</span>
               </div>
               {{ error }}
             </div>
-            
+
             <div v-if="analizando" class="mt-4 pt-4 border-t border-white/5 flex flex-col gap-3">
               <div class="w-full bg-surface-container-low h-1 rounded-full overflow-hidden">
                 <div class="bg-secondary h-full transition-all duration-500" :style="{ width: ((currentStepIdx / 4) * 100) + '%' }"></div>
               </div>
-              <p class="text-[10px] text-outline italic text-center animate-pulse">Processing vector embeddings and OpenAI request. Estimated time remaining: 15s</p>
+              <p class="text-[10px] text-outline italic text-center animate-pulse">Procesando embeddings vectoriales y solicitud a OpenAI. Tiempo estimado: 15s</p>
             </div>
           </div>
         </div>
@@ -179,16 +179,16 @@ const form = ref({
   competidor_referente: false
 })
 
-const pasisVisibles = [
-  { id: 'extraccion', label: 'Audio Extraction', icon: 'downloading', desc: 'Fetching source video and demuxing audio stream.' },
-  { id: 'transcripcion', label: 'Whisper Context', icon: 'mic', desc: 'Generating millisecond-perfect SRD transcription.' },
-  { id: 'analisis', label: 'GPT-4o Reasoning', icon: 'psychology', desc: 'Analyzing semantic hooks and neuro-marketing patterns.' },
-  { id: 'embedding', label: 'Vector Encoding', icon: 'hub', desc: 'Finalizing database injection and embedding generation.' },
+const pasosVisibles = [
+  { id: 'extraccion',   label: 'Extracción de Audio',   icon: 'downloading', desc: 'Descargando el video fuente y extrayendo el audio.' },
+  { id: 'transcripcion', label: 'Transcripción Whisper', icon: 'mic',         desc: 'Generando transcripción con precisión de milisegundos.' },
+  { id: 'analisis',     label: 'Análisis con GPT-4o',   icon: 'psychology',  desc: 'Analizando patrones de neuromarketing y narrativa.' },
+  { id: 'embedding',    label: 'Codificación Vectorial', icon: 'hub',         desc: 'Generando embedding e inyectando en la base de datos.' },
 ]
 
 const currentStepIdx = computed(() => {
   if (!analizando.value) return -1
-  return pasisVisibles.findIndex(p => p.id === paso.value)
+  return pasosVisibles.findIndex(p => p.id === paso.value)
 })
 
 onMounted(async () => {
@@ -201,13 +201,13 @@ onMounted(async () => {
 
 async function iniciarAnalisis() {
   if (!form.value.url || !form.value.niche) {
-    error.value = "Missing URL or Niche. These parameters are mandatory for the pipeline."
+    error.value = "URL y Nicho son obligatorios para iniciar el pipeline."
     return
   }
 
   const URL_SOPORTADAS = /^https?:\/\/(www\.)?(tiktok\.com|vm\.tiktok\.com|instagram\.com|youtube\.com|youtu\.be)/
   if (!URL_SOPORTADAS.test(form.value.url)) {
-    error.value = "URL not supported. Only TikTok, Instagram Reels and YouTube Shorts are accepted."
+    error.value = "URL no soportada. Solo se aceptan TikTok, Instagram Reels y YouTube Shorts."
     return
   }
 
diff --git a/frontend/src/views/AnalysisDetailView.vue b/frontend/src/views/AnalysisDetailView.vue
index 0e3208b..206f3e5 100644
--- a/frontend/src/views/AnalysisDetailView.vue
+++ b/frontend/src/views/AnalysisDetailView.vue
@@ -1,15 +1,15 @@
 <template>
   <div v-if="cargando" class="flex flex-col items-center justify-center py-24 gap-4 min-h-[50vh]">
     <div class="w-10 h-10 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
-    <p class="text-outline text-sm animate-pulse">Loading Neuro-Semantic Data...</p>
+    <p class="text-outline text-sm animate-pulse">Cargando datos neuro-semánticos...</p>
   </div>
 
   <div v-else-if="guion" class="max-w-6xl mx-auto relative flex flex-col gap-8 pb-12">
-    <!-- Header Section -->
+    <!-- Encabezado -->
     <header class="relative z-10 flex flex-col md:flex-row md:items-end justify-between gap-6">
       <div>
         <router-link to="/" class="flex items-center gap-2 text-outline hover:text-white transition-colors text-sm font-bold uppercase tracking-widest mb-6 w-fit">
-          <span class="material-symbols-outlined text-lg">west</span> Back to Hub
+          <span class="material-symbols-outlined text-lg">west</span> Volver al Panel
         </router-link>
         <div class="flex items-center gap-3 mb-3 flex-wrap">
           <span class="px-3 py-1 bg-surface-container-highest text-on-surface-variant text-[11px] font-black rounded uppercase tracking-widest">{{ guion.niche }}</span>
@@ -17,36 +17,36 @@
           <span :class="plataformaBadge(guion.plataforma)" class="px-3 py-1 text-[11px] font-black rounded uppercase tracking-widest">{{ guion.plataforma }}</span>
         </div>
         <h1 class="text-4xl md:text-5xl font-extrabold font-headline tracking-tighter text-white mb-2 leading-tight max-w-3xl">
-          {{ guion.tema_principal || 'Untitled Analysis' }}
+          {{ guion.tema_principal || 'Análisis sin título' }}
         </h1>
         <p class="text-primary text-sm font-bold flex items-center gap-2">
           <span class="material-symbols-outlined text-sm">visibility</span>
-          {{ guion.angulo_unico || 'Unique Angle Not Specified' }}
+          {{ guion.angulo_unico || 'Ángulo único no especificado' }}
         </p>
       </div>
 
       <div class="flex items-center gap-4 shrink-0">
-        <button v-if="guion.url_origen" class="h-12 w-12 rounded-xl bg-surface-container-low border border-outline-variant/20 flex items-center justify-center text-on-surface hover:bg-surface-container transition-colors shadow-lg" title="Watch Original Web" @click="openUrl(guion.url_origen)">
+        <button v-if="guion.url_origen" class="h-12 w-12 rounded-xl bg-surface-container-low border border-outline-variant/20 flex items-center justify-center text-on-surface hover:bg-surface-container transition-colors shadow-lg" title="Ver video original" @click="openUrl(guion.url_origen)">
           <span class="material-symbols-outlined">link</span>
         </button>
         <div class="h-12 w-12 rounded-xl bg-surface-container-low border border-outline-variant/20 flex items-center justify-center text-on-surface hover:bg-surface-container transition-colors shadow-lg cursor-pointer">
           <span class="material-symbols-outlined">bookmark</span>
         </div>
         <button class="px-6 py-3 bg-gradient-to-br from-primary-container to-primary text-on-primary-container font-headline font-bold rounded-xl shadow-lg shadow-primary/20 hover:scale-105 active:scale-95 transition-all text-sm h-12 flex items-center gap-2">
-          <span class="material-symbols-outlined text-sm">download</span> Vector Package
+          <span class="material-symbols-outlined text-sm">download</span> Exportar Vector
         </button>
       </div>
     </header>
 
-    <!-- Main Grid -->
+    <!-- Cuadrícula principal -->
     <div class="grid grid-cols-1 xl:grid-cols-12 gap-8 relative z-10">
-      <!-- Left Column: Core Analytics -->
+      <!-- Columna izquierda: Analíticas -->
       <div class="xl:col-span-4 flex flex-col gap-6">
-        <!-- Score Card -->
+        <!-- Tarjeta de Puntaje -->
         <div class="bg-surface-container p-6 rounded-3xl border border-outline-variant/10 shadow-2xl relative overflow-hidden group">
           <div class="absolute -top-24 -right-24 w-48 h-48 bg-primary/20 blur-3xl rounded-full group-hover:bg-primary/30 transition-colors pointer-events-none"></div>
           <h3 class="text-sm font-headline font-bold text-white mb-8 flex items-center gap-2">
-            <span class="material-symbols-outlined text-primary">analytics</span> Neuro-Engagement Score
+            <span class="material-symbols-outlined text-primary">analytics</span> Puntaje Neuro-Engagement
           </h3>
           <div class="flex justify-center mb-6 relative">
             <svg class="w-48 h-48 transform -rotate-90" viewBox="0 0 100 100">
@@ -60,11 +60,11 @@
           </div>
           <div class="grid grid-cols-2 gap-4 pt-6 border-t border-white/5">
             <div>
-              <p class="text-[10px] text-outline uppercase tracking-widest font-bold mb-1">Cialdini Index</p>
+              <p class="text-[10px] text-outline uppercase tracking-widest font-bold mb-1">Índice Cialdini</p>
               <p class="text-xl font-bold text-white">{{ guion.score_cialdini ?? 0 }}<span class="text-sm text-outline">/7</span></p>
             </div>
             <div>
-              <p class="text-[10px] text-outline uppercase tracking-widest font-bold mb-1">Real Eng.</p>
+              <p class="text-[10px] text-outline uppercase tracking-widest font-bold mb-1">Engagement Real</p>
               <p class="text-xl font-bold text-emerald-400">{{ guion.score_engagement ? (guion.score_engagement*1).toFixed(2) + '%' : 'N/A' }}</p>
             </div>
           </div>
@@ -72,23 +72,23 @@
 
         <div class="bg-surface-container p-6 rounded-3xl border border-outline-variant/10 shadow-xl">
           <h3 class="text-sm font-headline font-bold text-white mb-6 flex items-center gap-2">
-            <span class="material-symbols-outlined text-secondary">psychology_alt</span> Semantic Hooks
+            <span class="material-symbols-outlined text-secondary">psychology_alt</span> Ganchos Semánticos
           </h3>
           <div class="space-y-4">
             <div>
-              <p class="text-[10px] text-outline uppercase tracking-widest font-bold mb-2">Narrative Framework</p>
+              <p class="text-[10px] text-outline uppercase tracking-widest font-bold mb-2">Estructura Narrativa</p>
               <div class="glass-panel p-3 rounded-lg border border-white/5 inline-block w-full">
-                <span class="text-sm font-bold text-on-surface">{{ guion.estructura_narrativa || 'Not Detected' }}</span>
+                <span class="text-sm font-bold text-on-surface">{{ guion.estructura_narrativa || 'No detectada' }}</span>
               </div>
             </div>
             <div>
               <p class="text-[10px] text-outline uppercase tracking-widest font-bold mb-2 flex justify-between">
-                <span>Core Hook</span>
-                <span class="text-secondary">{{ guion.gancho_duracion_seg ? guion.gancho_duracion_seg + 's delay' : '' }}</span>
+                <span>Gancho Principal</span>
+                <span class="text-secondary">{{ guion.gancho_duracion_seg ? guion.gancho_duracion_seg + 's' : '' }}</span>
               </p>
               <div class="glass-panel p-4 rounded-xl border border-secondary/20 relative">
                 <div class="absolute top-0 right-0 p-2"><span class="w-1.5 h-1.5 rounded-full bg-secondary block"></span></div>
-                <p class="text-xs text-secondary font-bold uppercase tracking-wider mb-2">{{ guion.gancho_tipo || 'Standard Hook' }}</p>
+                <p class="text-xs text-secondary font-bold uppercase tracking-wider mb-2">{{ guion.gancho_tipo || 'Gancho Estándar' }}</p>
                 <p class="text-sm text-white font-medium leading-relaxed italic">"{{ guion.gancho_texto || '—' }}"</p>
               </div>
             </div>
@@ -96,48 +96,47 @@
         </div>
       </div>
 
-      <!-- Center & Right Columns -->
+      <!-- Columnas Central y Derecha -->
       <div class="xl:col-span-8 flex flex-col gap-6">
         <div class="bg-surface-container p-8 rounded-3xl border border-primary/20 shadow-2xl relative overflow-hidden">
           <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent pointer-events-none"></div>
-          <p class="text-xs text-primary font-bold uppercase tracking-widest mb-4">Winning Pattern Synthesis</p>
+          <p class="text-xs text-primary font-bold uppercase tracking-widest mb-4">Síntesis del Patrón Ganador</p>
           <p class="text-lg md:text-xl text-white font-medium leading-relaxed max-w-3xl relative z-10">{{ guion.resumen_patron }}</p>
         </div>
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div class="bg-surface-container p-6 rounded-3xl border border-outline-variant/10 shadow-xl">
              <h3 class="text-sm font-headline font-bold text-white mb-6 flex items-center gap-2">
-               <span class="material-symbols-outlined text-orange-400">local_fire_department</span> Emotional Resonance
+               <span class="material-symbols-outlined text-orange-400">local_fire_department</span> Resonancia Emocional
              </h3>
              <div class="mb-6">
                <div class="flex justify-between text-xs font-bold uppercase tracking-widest mb-2">
-                 <span class="text-outline">Intensity</span>
+                 <span class="text-outline">Intensidad</span>
                  <span class="text-orange-400">{{ guion.intensidad_emocional || 0 }}/10</span>
                </div>
                <div class="w-full bg-surface-container-highest h-1.5 rounded-full overflow-hidden">
                  <div class="bg-gradient-to-r from-orange-500/50 to-orange-400 h-full" :style="{ width: ((guion.intensidad_emocional||0)*10) + '%' }"></div>
                </div>
              </div>
-             
              <div class="space-y-4">
-               <DataRow label="Primary Trigger" :value="guion.trigger_emocional" highlight />
-               <DataRow label="Cognitive Bias" :value="guion.sesgo_cognitivo" />
-               <DataRow label="Pain / Pleasure" :value="guion.dolor_placer" highlight />
+               <DataRow label="Trigger Principal"  :value="guion.trigger_emocional" highlight />
+               <DataRow label="Sesgo Cognitivo"    :value="guion.sesgo_cognitivo" />
+               <DataRow label="Dolor / Placer"     :value="guion.dolor_placer" highlight />
              </div>
           </div>
 
           <div class="bg-surface-container p-6 rounded-3xl border border-outline-variant/10 shadow-xl flex flex-col">
             <h3 class="text-sm font-headline font-bold text-white mb-6 flex items-center gap-2">
-              <span class="material-symbols-outlined text-indigo-400">group_work</span> Cialdini Framework
+              <span class="material-symbols-outlined text-indigo-400">group_work</span> Principios de Cialdini
             </h3>
             <div class="grid grid-cols-2 gap-3 flex-1">
-              <CialdiniItem label="Reciprocity"  :active="!!guion.cialdini_reciprocidad" />
-              <CialdiniItem label="Scarcity"     :active="!!guion.cialdini_escasez" />
-              <CialdiniItem label="Authority"    :active="!!guion.cialdini_autoridad" />
-              <CialdiniItem label="Consistency"  :active="!!guion.cialdini_consistencia" />
-              <CialdiniItem label="Social Proof" :active="!!guion.cialdini_prueba_social" />
-              <CialdiniItem label="Liking"       :active="!!guion.cialdini_simpatia" />
-              <CialdiniItem label="Unity"        :active="!!guion.cialdini_unidad" />
+              <CialdiniItem label="Reciprocidad"   :active="!!guion.cialdini_reciprocidad" />
+              <CialdiniItem label="Escasez"        :active="!!guion.cialdini_escasez" />
+              <CialdiniItem label="Autoridad"      :active="!!guion.cialdini_autoridad" />
+              <CialdiniItem label="Consistencia"   :active="!!guion.cialdini_consistencia" />
+              <CialdiniItem label="Prueba Social"  :active="!!guion.cialdini_prueba_social" />
+              <CialdiniItem label="Simpatía"       :active="!!guion.cialdini_simpatia" />
+              <CialdiniItem label="Unidad"         :active="!!guion.cialdini_unidad" />
             </div>
           </div>
         </div>
@@ -148,25 +147,25 @@
               <span class="material-symbols-outlined text-fuchsia-400">biotech</span> Neuromarketing
             </h3>
             <div class="space-y-3">
-              <DataRow label="Visual Attention"    :value="guion.atencion_visual" highlight />
-              <DataRow label="Cognitive Load"      :value="guion.carga_cognitiva" highlight />
-              <DataRow label="Pacing"              :value="guion.pacing_ritmo" highlight />
-              <DataRow label="Sensory Language"    :value="guion.lenguaje_sensorial" type="boolean" />
-              <DataRow label="Contrast"            :value="guion.contraste_narrativo" type="boolean" />
-              <DataRow label="Novelty Effect"      :value="guion.efecto_novedad" type="boolean" />
+              <DataRow label="Atención Visual"     :value="guion.atencion_visual"      highlight />
+              <DataRow label="Carga Cognitiva"     :value="guion.carga_cognitiva"      highlight />
+              <DataRow label="Ritmo / Pacing"      :value="guion.pacing_ritmo"         highlight />
+              <DataRow label="Lenguaje Sensorial"  :value="guion.lenguaje_sensorial"   type="boolean" />
+              <DataRow label="Contraste Narrativo" :value="guion.contraste_narrativo"  type="boolean" />
+              <DataRow label="Efecto Novedad"      :value="guion.efecto_novedad"       type="boolean" />
             </div>
           </div>
 
           <div class="bg-surface-container p-6 rounded-3xl border border-outline-variant/10 shadow-xl flex flex-col">
             <h3 class="text-sm font-headline font-bold text-white mb-6 flex items-center gap-2">
-              <span class="material-symbols-outlined text-cyan-400">record_voice_over</span> Delivery & Reach
+              <span class="material-symbols-outlined text-cyan-400">record_voice_over</span> Entrega y Alcance
             </h3>
             <div class="space-y-4 mb-6">
-              <DataRow label="Tone"             :value="guion.tono" highlight/>
-              <DataRow label="Perspective"      :value="guion.persona_narradora" highlight/>
-              <DataRow label="Specificity"      :value="guion.nivel_especificidad" highlight/>
+              <DataRow label="Tono"              :value="guion.tono"                highlight/>
+              <DataRow label="Perspectiva"       :value="guion.persona_narradora"   highlight/>
+              <DataRow label="Especificidad"     :value="guion.nivel_especificidad" highlight/>
               <div>
-                <p class="text-[10px] text-outline uppercase tracking-widest font-bold mb-2">Keywords Extracted</p>
+                <p class="text-[10px] text-outline uppercase tracking-widest font-bold mb-2">Palabras Clave Extraídas</p>
                 <div class="flex flex-wrap gap-2">
                   <span v-for="kw in guion.palabras_clave" :key="kw" class="px-2 py-1 bg-surface-container-lowest border border-white/5 rounded text-[10px] font-bold text-on-surface-variant">{{ kw }}</span>
                 </div>
@@ -175,20 +174,20 @@
           </div>
         </div>
 
-        <!-- Transcript Viewer -->
+        <!-- Visor de Transcripción -->
         <div class="bg-surface-container p-6 rounded-3xl border border-outline-variant/10 shadow-xl">
           <div class="flex items-center justify-between mb-2">
              <h3 class="text-sm font-headline font-bold text-white flex items-center gap-2">
-               <span class="material-symbols-outlined text-outline">notes</span> Full Transcription
+               <span class="material-symbols-outlined text-outline">notes</span> Transcripción Completa
              </h3>
              <button @click="showTranscript = !showTranscript" class="text-xs font-bold uppercase tracking-widest text-primary hover:text-white transition-colors">
-               {{ showTranscript ? 'Collapse' : 'Expand' }}
+               {{ showTranscript ? 'Colapsar' : 'Expandir' }}
              </button>
           </div>
           <div :class="showTranscript ? 'max-h-[800px]' : 'max-h-24'" class="overflow-hidden relative transition-all duration-500 ease-in-out">
             <div v-if="!showTranscript" class="absolute inset-0 bg-gradient-to-t from-surface-container to-transparent z-10"></div>
             <p class="text-sm text-on-surface-variant leading-relaxed whitespace-pre-wrap font-serif pt-4">
-              {{ guion.transcript || 'Video without available transcription.' }}
+              {{ guion.transcript || 'Video sin transcripción disponible.' }}
             </p>
           </div>
         </div>
@@ -214,18 +213,18 @@ function openUrl(url) {
 }
 
 function plataformaBadge(p) {
-  return { 
-    tiktok: 'bg-red-500/20 text-red-400', 
-    reels: 'bg-fuchsia-500/20 text-fuchsia-400', 
-    shorts: 'bg-red-600/20 text-red-500' 
+  return {
+    tiktok: 'bg-red-500/20 text-red-400',
+    reels: 'bg-fuchsia-500/20 text-fuchsia-400',
+    shorts: 'bg-red-600/20 text-red-500'
   }[p] ?? 'bg-white/5 text-on-surface-variant'
 }
 
 onMounted(async () => {
-  try { 
-    guion.value = await api.guiones.obtener(route.params.id) 
-  } finally { 
-    cargando.value = false 
+  try {
+    guion.value = await api.guiones.obtener(route.params.id)
+  } finally {
+    cargando.value = false
   }
 })
 </script>
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index 6915fcc..8f420ae 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="max-w-7xl mx-auto flex flex-col gap-10">
-    <!-- Header -->
+    <!-- Encabezado -->
     <header class="flex flex-col md:flex-row md:items-end justify-between gap-6 border-b border-white/5 pb-8">
       <div>
-        <h1 class="text-5xl font-extrabold font-headline tracking-tighter text-white mb-2 leading-tight">Engineering Hub</h1>
+        <h1 class="text-5xl font-extrabold font-headline tracking-tighter text-white mb-2 leading-tight">Panel Principal</h1>
         <p class="text-primary text-sm font-bold flex items-center gap-2 tracking-widest uppercase">
           <span class="material-symbols-outlined text-sm">terminal</span>
-          System Overview & Performance Analytics
+          Resumen del sistema y métricas de rendimiento
         </p>
       </div>
       <div class="flex items-center gap-4">
-        <button class="px-6 py-3 bg-surface-container border border-white/5 text-outline font-bold rounded-xl text-sm hover:text-white transition-colors" @click="cargarDatos">Refresh Hub</button>
+        <button class="px-6 py-3 bg-surface-container border border-white/5 text-outline font-bold rounded-xl text-sm hover:text-white transition-colors" @click="cargarDatos">Actualizar</button>
         <router-link to="/new-analysis" class="px-8 py-3 bg-gradient-to-br from-primary-container to-primary text-on-primary-container font-headline font-bold rounded-xl shadow-lg shadow-primary/20 hover:scale-105 active:scale-95 transition-all text-sm h-12 flex items-center gap-2">
-          <span class="material-symbols-outlined text-sm">add</span> New Analysis
+          <span class="material-symbols-outlined text-sm">add</span> Nuevo Análisis
         </router-link>
       </div>
     </header>
 
-    <!-- KPI Bento Grid -->
+    <!-- KPI por Niche -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
       <div v-for="stat in stats" :key="stat.niche" class="bg-surface-container p-6 rounded-3xl border border-outline-variant/10 shadow-xl relative overflow-hidden group">
         <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-primary/5 blur-2xl rounded-full group-hover:bg-primary/10 transition-colors"></div>
@@ -25,7 +25,7 @@
         <div class="flex items-end justify-between">
           <h2 class="text-3xl font-black font-headline text-white tracking-tighter">{{ stat.total_guiones }}</h2>
           <div class="text-right">
-            <p class="text-[10px] text-primary font-bold uppercase tracking-tighter">Avg Score</p>
+            <p class="text-[10px] text-primary font-bold uppercase tracking-tighter">Puntaje Prom.</p>
             <p class="text-lg font-black text-primary leading-none">{{ (stat.avg_score || 0).toFixed(1) }}</p>
           </div>
         </div>
@@ -33,35 +33,35 @@
           <div class="bg-primary h-full transition-all duration-1000" :style="{ width: (stat.avg_score || 0) + '%' }"></div>
         </div>
       </div>
-      
-      <!-- Placeholder if no stats -->
+
+      <!-- Placeholder sin datos -->
       <div v-if="stats.length === 0" class="lg:col-span-4 bg-surface-container/50 border border-dashed border-white/5 p-8 rounded-3xl flex items-center justify-center italic text-outline text-sm">
-        Connect database to view niche performance.
+        Conecta la base de datos para ver el rendimiento por niche.
       </div>
     </div>
 
-    <!-- Main Content Grid -->
+    <!-- Contenido Principal -->
     <div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
-      <!-- Detailed Table -->
+      <!-- Tabla de Guiones -->
       <div class="lg:col-span-12 xl:col-span-8 bg-surface-container rounded-3xl border border-outline-variant/10 shadow-2xl overflow-hidden flex flex-col">
         <div class="px-8 py-6 border-b border-white/5 bg-surface-container-high/50 flex items-center justify-between">
           <h3 class="text-sm font-headline font-black text-white uppercase tracking-widest flex items-center gap-2">
-            <span class="material-symbols-outlined text-outline text-lg">database</span> Analyzed Scripts
+            <span class="material-symbols-outlined text-outline text-lg">database</span> Guiones Analizados
           </h3>
           <div class="flex gap-2">
-             <button class="px-4 py-2 bg-surface-container-low text-[10px] font-black uppercase text-outline rounded hover:text-white transition-colors" @click="cambiarPagina(filtros.page - 1)" :disabled="filtros.page <= 1">Prev</button>
-             <button class="px-4 py-2 bg-surface-container-low text-[10px] font-black uppercase text-outline rounded hover:text-white transition-colors" @click="cambiarPagina(filtros.page + 1)" :disabled="guiones.length < filtros.limit">Next</button>
+             <button class="px-4 py-2 bg-surface-container-low text-[10px] font-black uppercase text-outline rounded hover:text-white transition-colors" @click="cambiarPagina(filtros.page - 1)" :disabled="filtros.page <= 1">Anterior</button>
+             <button class="px-4 py-2 bg-surface-container-low text-[10px] font-black uppercase text-outline rounded hover:text-white transition-colors" @click="cambiarPagina(filtros.page + 1)" :disabled="guiones.length < filtros.limit">Siguiente</button>
           </div>
         </div>
-        
+
         <div class="overflow-x-auto flex-1 max-h-[600px] scrollbar-custom">
           <table class="w-full text-left border-collapse">
             <thead class="sticky top-0 bg-surface-container z-10 border-b border-white/5">
               <tr class="text-[10px] font-black text-outline uppercase tracking-widest bg-surface-container-high/30">
-                <th class="px-8 py-4">Context</th>
-                <th class="px-6 py-4">Viral Score</th>
-                <th class="px-6 py-4">Neurometric Pattern</th>
-                <th class="px-8 py-4 text-right">Actions</th>
+                <th class="px-8 py-4">Contexto</th>
+                <th class="px-6 py-4">Puntaje Viral</th>
+                <th class="px-6 py-4">Patrón Neurométrico</th>
+                <th class="px-8 py-4 text-right">Acciones</th>
               </tr>
             </thead>
             <tbody class="divide-y divide-white/5">
@@ -72,7 +72,7 @@
                       <span :class="plataformaBadge(g.plataforma)" class="text-[8px] font-black px-1.5 py-0.5 rounded uppercase tracking-widest">{{ g.plataforma }}</span>
                       <span class="text-[10px] text-outline font-bold uppercase tracking-wider">{{ g.niche }}</span>
                     </div>
-                    <p class="text-sm font-bold text-white leading-tight group-hover:text-primary transition-colors line-clamp-2 max-w-sm">{{ g.tema_principal || 'No semantic title detected' }}</p>
+                    <p class="text-sm font-bold text-white leading-tight group-hover:text-primary transition-colors line-clamp-2 max-w-sm">{{ g.tema_principal || 'Sin título detectado' }}</p>
                     <p class="text-[10px] text-outline/60 italic font-medium truncate max-w-xs">{{ g.url_origen }}</p>
                   </div>
                 </td>
@@ -89,7 +89,7 @@
                 </td>
                 <td class="px-6 py-6">
                   <div class="max-w-xs">
-                    <p class="text-[11px] text-outline font-bold uppercase tracking-widest mb-1">{{ g.gancho_tipo || 'Hook' }}</p>
+                    <p class="text-[11px] text-outline font-bold uppercase tracking-widest mb-1">{{ g.gancho_tipo || 'Gancho' }}</p>
                     <p class="text-xs text-on-surface-variant line-clamp-2 leading-relaxed italic">"{{ g.gancho_texto }}"</p>
                   </div>
                 </td>
@@ -99,12 +99,12 @@
                   </button>
                 </td>
               </tr>
-              
+
               <tr v-if="guiones.length === 0 && !cargando">
                 <td colspan="4" class="py-24 text-center">
                   <div class="flex flex-col items-center gap-2 opacity-30">
                     <span class="material-symbols-outlined text-5xl">inventory_2</span>
-                    <p class="text-sm font-bold uppercase tracking-widest">Repository Empty</p>
+                    <p class="text-sm font-bold uppercase tracking-widest">Repositorio vacío</p>
                   </div>
                 </td>
               </tr>
@@ -113,17 +113,17 @@
         </div>
       </div>
 
-      <!-- Right Column: Algorithm Pick -->
+      <!-- Columna derecha: Mejor Guión -->
       <div class="lg:col-span-12 xl:col-span-4 flex flex-col gap-8">
         <div class="bg-surface-container p-8 rounded-[40px] border border-secondary/20 shadow-3xl relative overflow-hidden flex-1 flex flex-col gap-8 group">
           <div class="absolute -top-12 -right-12 w-48 h-48 bg-secondary/5 blur-3xl rounded-full group-hover:bg-secondary/10 transition-colors"></div>
-          
+
           <div>
             <div class="flex items-center gap-2 text-secondary font-black text-[10px] uppercase tracking-[0.2em] mb-3">
-              <span class="material-symbols-outlined text-sm animate-pulse">new_releases</span> Editors Pick
+              <span class="material-symbols-outlined text-sm animate-pulse">new_releases</span> Selección del Editor
             </div>
-            <h3 class="text-3xl font-headline font-black text-white tracking-widest leading-none mb-2">MASTER SCRIPT</h3>
-            <p class="text-xs text-outline font-bold">Top Performing Neuromarketing Pattern</p>
+            <h3 class="text-3xl font-headline font-black text-white tracking-widest leading-none mb-2">GUIÓN MAESTRO</h3>
+            <p class="text-xs text-outline font-bold">Patrón de neuromarketing con mayor rendimiento</p>
           </div>
 
           <div v-if="guionTop" class="space-y-6 flex-1 flex flex-col">
@@ -131,10 +131,10 @@
                <p class="text-[10px] text-secondary font-bold uppercase tracking-widest">{{ guionTop.niche }} • {{ guionTop.sub_niche }}</p>
                <p class="text-lg font-black text-white leading-tight font-headline">{{ guionTop.tema_principal }}</p>
             </div>
-            
+
             <div class="flex-1 space-y-4">
                <div>
-                 <p class="text-[10px] text-outline font-black uppercase tracking-widest mb-2">Narrative Core</p>
+                 <p class="text-[10px] text-outline font-black uppercase tracking-widest mb-2">Núcleo Narrativo</p>
                  <p class="text-sm text-on-surface-variant leading-relaxed line-clamp-4">{{ guionTop.resumen_patron }}</p>
                </div>
                <div class="grid grid-cols-2 gap-4">
@@ -143,17 +143,17 @@
                     <p class="text-xl font-black text-white">{{ guionTop.score_cialdini }}/7</p>
                  </div>
                  <div class="p-3 rounded-xl bg-surface-container-low border border-white/5">
-                    <p class="text-[10px] text-outline font-bold uppercase mb-1">Intensity</p>
+                    <p class="text-[10px] text-outline font-bold uppercase mb-1">Viralidad</p>
                     <p class="text-xl font-black text-white">{{ guionTop.score_virabilidad }}%</p>
                  </div>
                </div>
             </div>
 
-            <button @click="verDetalle(guionTop.id)" class="w-full py-4 bg-white text-surface rounded-2xl font-black text-sm uppercase tracking-widest hover:bg-secondary hover:text-white transition-all transform active:scale-95 shadow-xl shadow-white/5">Analyze Vector</button>
+            <button @click="verDetalle(guionTop.id)" class="w-full py-4 bg-white text-surface rounded-2xl font-black text-sm uppercase tracking-widest hover:bg-secondary hover:text-white transition-all transform active:scale-95 shadow-xl shadow-white/5">Ver Análisis Completo</button>
           </div>
-          
+
           <div v-else class="flex flex-col items-center justify-center flex-1 italic text-outline text-xs opacity-50">
-            No top patterns analyzed yet.
+            Aún no hay patrones analizados.
           </div>
         </div>
       </div>