From ef084559bbc63bf11d5e9fa0cbb6f46152dedc5e Mon Sep 17 00:00:00 2001
From: Carlos Alberto <stonetech@Carlos-MacBook-Pro.local>
Date: Wed, 30 Sep 2026 21:20:05 +0100
Subject: [PATCH] feat(i18n): complete English Spanish and Portuguese UI

---
 src/front/components/AIReplyPanel.jsx  |  32 +--
 src/front/components/AuthLayout.jsx    |  14 +-
 src/front/components/Sidebar.jsx       |   4 +-
 src/front/components/WebChat.jsx       |  16 +-
 src/front/context/LanguageContext.jsx  |  46 +++-
 src/front/i18n/literalTranslations.mjs | 284 +++++++++++++++++++++++++
 src/front/i18n/messages.mjs            | 278 ++++++++++++++++++++++++
 src/front/i18n/settings.mjs            |  71 +++++++
 src/front/pages/AcceptInvitation.jsx   |  29 +--
 src/front/pages/Agenda.jsx             |  87 ++++----
 src/front/pages/Agents.jsx             |  24 ++-
 src/front/pages/ClientDetail.jsx       |  16 +-
 src/front/pages/Clients.jsx            |  25 ++-
 src/front/pages/ForgotPassword.jsx     |  24 ++-
 src/front/pages/Inbox.jsx              |  35 +--
 src/front/pages/JobDetail.jsx          |  11 +-
 src/front/pages/Jobs.jsx               |  19 +-
 src/front/pages/Knowledge.jsx          |  66 +++---
 src/front/pages/Layout.jsx             |   4 +-
 src/front/pages/Leads.jsx              |  64 +++---
 src/front/pages/Login.jsx              |  28 +--
 src/front/pages/Members.jsx            |  57 ++---
 src/front/pages/PlanSelection.jsx      |  38 ++--
 src/front/pages/Register.jsx           |  32 +--
 src/front/pages/ResetPassword.jsx      |  24 ++-
 src/front/pages/Settings.jsx           |  75 +------
 src/front/pages/WebChatPage.jsx        |  16 +-
 src/front/routes.jsx                   |  23 +-
 tests/frontend/i18n.test.mjs           |  49 +++++
 29 files changed, 1100 insertions(+), 391 deletions(-)
 create mode 100644 src/front/i18n/literalTranslations.mjs
 create mode 100644 src/front/i18n/messages.mjs
 create mode 100644 src/front/i18n/settings.mjs
 create mode 100644 tests/frontend/i18n.test.mjs

diff --git a/src/front/components/AIReplyPanel.jsx b/src/front/components/AIReplyPanel.jsx
index fe92954..c2d751a 100644
--- a/src/front/components/AIReplyPanel.jsx
+++ b/src/front/components/AIReplyPanel.jsx
@@ -1,9 +1,10 @@
 import {useEffect, useState} from 'react';
-import {aiMessages} from '../i18n/ai';
 import {aiRequest} from '../services/aiService';
 import {inboxService} from '../services/inboxService';
+import {useLanguage} from '../context/LanguageContext';
 
 export function AIReplyPanel({conversationId, token, companyId, onChanged, latestInbound}) {
+    const {ui} = useLanguage();
     const [agents, setAgents] = useState([]);
     const [agentId, setAgentId] = useState('');
     const [question, setQuestion] = useState('');
@@ -28,28 +29,29 @@ export function AIReplyPanel({conversationId, token, companyId, onChanged, lates
         catch(e) {setError(e.message);}
         finally {setBusy(false);}
     }
-    return <section className="p-3 border-top" aria-label="Asistente IA">
-        <strong>Asistente IA · revisión humana obligatoria</strong>
+    const statuses={pending_review:ui.pendingReview,approved:ui.approvedDraft,rejected:ui.rejectedDraft,handoff:ui.humanAttention};
+    return <section className="p-3 border-top" aria-label={ui.aiAssistant}>
+        <strong>{ui.humanReview}</strong>
         {error && <p role="alert" className="text-danger">{error}</p>}
         <div className="d-flex gap-2 my-2">
-            <select aria-label="Agente" className="form-select" value={agentId} onChange={e=>setAgentId(e.target.value)} disabled={busy}>
-                <option value="">Seleccionar agente</option>{agents.map(a=><option key={a.id} value={a.id}>{a.name}</option>)}
+            <select aria-label={ui.agent} className="form-select" value={agentId} onChange={e=>setAgentId(e.target.value)} disabled={busy}>
+                <option value="">{ui.selectAgent}</option>{agents.map(a=><option key={a.id} value={a.id}>{a.name}</option>)}
             </select>
-            <button className="btn btn-outline-primary" disabled={busy || !agentId} onClick={()=>run(()=>inboxService.updateControl(conversationId,'ai',Number(agentId),options))}>Asignar</button>
+            <button className="btn btn-outline-primary" disabled={busy || !agentId} onClick={()=>run(()=>inboxService.updateControl(conversationId,'ai',Number(agentId),options))}>{ui.assign}</button>
         </div>
-        {!agents.length && <p>Configura un agente en Agentes IA y vincula documentos procesados.</p>}
+        {!agents.length && <p>{ui.configureAgentHint}</p>}
         {latestInbound && <button type="button" className="btn btn-link px-0" disabled={busy}
-            onClick={() => setQuestion(latestInbound.content)}>{aiMessages.es.latestMessage}</button>}
-        <textarea className="form-control" aria-label="Pregunta para el agente" placeholder="Pregunta del cliente que quieres responder" maxLength={4000} value={question} onChange={e=>setQuestion(e.target.value)} disabled={busy}/>
-        <button className="btn btn-primary my-2" disabled={busy || !question.trim()} onClick={()=>run(()=>aiRequest(`/conversations/${conversationId}/ai-drafts`,options,{question}))}>{busy?'Procesando…':'Generar borrador'}</button>
+            onClick={() => setQuestion(latestInbound.content)}>{ui.useLatestMessage}</button>}
+        <textarea className="form-control" aria-label={ui.customerQuestion} placeholder={ui.customerQuestion} maxLength={4000} value={question} onChange={e=>setQuestion(e.target.value)} disabled={busy}/>
+        <button className="btn btn-primary my-2" disabled={busy || !question.trim()} onClick={()=>run(()=>aiRequest(`/conversations/${conversationId}/ai-drafts`,options,{question}))}>{busy?ui.processing:ui.generateDraft}</button>
         {drafts.map(d=><article className="border rounded p-2 my-2" key={d.id}>
-            <strong>{{pending_review:'Pendiente de revisión',approved:'Aprobado · guardado en la conversación',rejected:'Rechazado',handoff:'Requiere atención humana'}[d.status]}</strong>
+            <strong>{statuses[d.status]}</strong>
             {d.reply && <p style={{whiteSpace:'pre-wrap'}}>{d.reply}</p>}
-            {d.status==='handoff' && <p>{aiMessages.es.reasons[d.reason] || aiMessages.es.fallback}</p>}
-            {d.sources.map(s=><details key={s.chunk_id}><summary>Documento {s.document_id} · fragmento {s.chunk_index+1}</summary><p>{s.content}</p></details>)}
+            {d.status==='handoff' && <p>{ui.aiHandoffFallback}</p>}
+            {d.sources.map(s=><details key={s.chunk_id}><summary>{ui.document} {s.document_id} · {ui.chunk.toLowerCase()} {s.chunk_index+1}</summary><p>{s.content}</p></details>)}
             {d.status==='pending_review' && <div className="d-flex gap-2 mt-2">
-                <button className="btn btn-success" disabled={busy} onClick={()=>run(()=>aiRequest(`/ai/drafts/${d.id}/decision`,options,{action:'approve'}))}>Aprobar respuesta</button>
-                <button className="btn btn-outline-danger" disabled={busy} onClick={()=>run(()=>aiRequest(`/ai/drafts/${d.id}/decision`,options,{action:'reject'}))}>Rechazar y atender</button>
+                <button className="btn btn-success" disabled={busy} onClick={()=>run(()=>aiRequest(`/ai/drafts/${d.id}/decision`,options,{action:'approve'}))}>{ui.approveResponse}</button>
+                <button className="btn btn-outline-danger" disabled={busy} onClick={()=>run(()=>aiRequest(`/ai/drafts/${d.id}/decision`,options,{action:'reject'}))}>{ui.rejectAndHandle}</button>
             </div>}
         </article>)}
     </section>;
diff --git a/src/front/components/AuthLayout.jsx b/src/front/components/AuthLayout.jsx
index 3640880..520481f 100644
--- a/src/front/components/AuthLayout.jsx
+++ b/src/front/components/AuthLayout.jsx
@@ -1,6 +1,9 @@
 import React from "react";
+import { useLanguage } from "../context/LanguageContext";
+import { WorkspacePreferences } from "./WorkspacePreferences";
 
 export const AuthLayout = ({ children }) => {
+    const { ui } = useLanguage();
     return (
         <div className="container-fluid min-vh-100 p-0 m-0">
             <div className="row g-0 min-vh-100">
@@ -17,13 +20,13 @@ export const AuthLayout = ({ children }) => {
 
                     <div className="z-1 max-w-md my-auto">
                         <span className="badge text-purple bg-purple-subtle px-3 py-1 rounded-pill border border-purple-subtle mb-3" style={{ color: "#c084fc", backgroundColor: "rgba(59, 7, 100, 0.6)", borderColor: "rgba(88, 28, 135, 0.4)" }}>
-                            Sistema Operativo Inteligente
+                            {ui.intelligentOperatingSystem}
                         </span>
                         <h1 className="display-5 fw-bold tracking-tight lh-sm mb-3">
-                            Todo tu negocio.<br />Un solo flujo.
+                            {ui.allBusinessOneFlow}
                         </h1>
                         <p className="text-secondary small lh-base" style={{ color: "#9c3aaf" }}>
-                            Desde la primera consulta hasta el trabajo terminado: clientes, equipo, operaciones, conocimiento y agentes de IA en una sola plataforma.
+                            {ui.platformDescription}
                         </p>
                     </div>
 
@@ -33,7 +36,10 @@ export const AuthLayout = ({ children }) => {
                 </div>
 
                 {/* Panel Derecho (Contenido / Formularios adaptativo al navegador) */}
-                <div className="col-12 col-lg-6 d-flex flex-column justify-content-center align-items-center p-4 p-sm-5 overflow-y-auto bg-body text-body">
+                <div className="col-12 col-lg-6 d-flex flex-column justify-content-center align-items-center p-4 p-sm-5 overflow-y-auto bg-body text-body position-relative">
+                    <div className="position-absolute top-0 end-0 p-3">
+                        <WorkspacePreferences />
+                    </div>
                     <div className="w-100 mx-auto bg-body p-4 p-sm-5 rounded-4 shadow-lg border border-opacity-10 my-auto" style={{ maxWidth: "28rem" }}>
                         {children}
                     </div>
diff --git a/src/front/components/Sidebar.jsx b/src/front/components/Sidebar.jsx
index e444414..e3fc947 100644
--- a/src/front/components/Sidebar.jsx
+++ b/src/front/components/Sidebar.jsx
@@ -5,7 +5,7 @@ import { useLanguage } from "../context/LanguageContext";
 export const Sidebar = ({ isOpen, onClose }) => {
     const location = useLocation();
     const navigate = useNavigate();
-    const { t } = useLanguage();
+    const { t, ui } = useLanguage();
     const [account, setAccount] = useState({ user: null, company: null });
 
     useEffect(() => {
@@ -126,7 +126,7 @@ export const Sidebar = ({ isOpen, onClose }) => {
                     <button
                         className="btn btn-link text-white-50 d-md-none text-decoration-none p-1"
                         onClick={onClose}
-                        aria-label="Cerrar menú"
+                        aria-label={ui.closeMenu}
                     >
                         <i className="fa-solid fa-xmark fs-5"></i>
                     </button>
diff --git a/src/front/components/WebChat.jsx b/src/front/components/WebChat.jsx
index bde7bf8..e952d80 100644
--- a/src/front/components/WebChat.jsx
+++ b/src/front/components/WebChat.jsx
@@ -1,11 +1,13 @@
 import { useEffect, useRef, useState } from "react";
 import { webChatService } from "../services/webChatService";
+import { useLanguage } from "../context/LanguageContext";
 
 export function WebChat({ token }) {
     return <ChatSession key={token} token={token} />;
 }
 
 function ChatSession({ token }) {
+    const { ui } = useLanguage();
     const [messages, setMessages] = useState([]);
     const [content, setContent] = useState("");
     const [historyError, setHistoryError] = useState("");
@@ -134,28 +136,28 @@ function ChatSession({ token }) {
     }
 
     if (!token) {
-        return <p role="alert">A valid chat session is required.</p>;
+        return <p role="alert">{ui.chatSessionRequired}</p>;
     }
 
     return (
         <section className="card p-3">
-            <h2 className="h5">Customer support</h2>
+            <h2 className="h5">{ui.webChatTitle}</h2>
 
             {historyError && <p role="alert">{historyError}</p>}
 
             <div
                 role="log"
-                aria-label="Conversation messages"
+                aria-label={ui.conversationMessages}
                 aria-live="polite"
                 className="my-3"
                 style={{ maxHeight: "50vh", overflowY: "auto" }}
             >
-                {messages.length === 0 && <p>No messages yet.</p>}
+                {messages.length === 0 && <p>{ui.noMessages}</p>}
 
                 {messages.map((message) => (
                     <div key={message.id} className="border rounded p-2 mb-2">
                         <strong>
-                            {message.direction === "inbound" ? "You" : "Support"}
+                            {message.direction === "inbound" ? ui.you : ui.support}
                         </strong>
                         <p className="mb-0" style={{ whiteSpace: "pre-wrap" }}>
                             {message.content}
@@ -166,7 +168,7 @@ function ChatSession({ token }) {
 
             <form onSubmit={handleSubmit}>
                 <label className="form-label" htmlFor="web-chat-message">
-                    Message
+                    {ui.messageLabel}
                 </label>
                 <textarea
                     id="web-chat-message"
@@ -187,7 +189,7 @@ function ChatSession({ token }) {
                     className="btn btn-primary mt-2"
                     disabled={sending || expired || !content.trim()}
                 >
-                    {sending ? "Sending..." : pendingMessage.current ? "Retry send" : "Send"}                </button>
+                    {sending ? ui.sending : pendingMessage.current ? ui.retrySend : ui.send}                </button>
             </form>
         </section>
     );
diff --git a/src/front/context/LanguageContext.jsx b/src/front/context/LanguageContext.jsx
index 1bcfb48..890e341 100644
--- a/src/front/context/LanguageContext.jsx
+++ b/src/front/context/LanguageContext.jsx
@@ -1,8 +1,11 @@
 import React, { createContext, useContext, useState, useEffect } from "react";
 import { translations } from "../i18n/translations";
+import { interfaceText, validateInterfaceMessages } from "../i18n/messages.mjs";
+import { literalMessage, translateLiteral, validateLiteralTranslations } from "../i18n/literalTranslations.mjs";
 
 const LanguageContext = createContext();
 const supportedLocales = ["es", "en", "pt"];
+const literalOrigins = new WeakMap();
 
 export const LanguageProvider = ({ children }) => {
     // Recupera el idioma guardado o por defecto usa español ('es')
@@ -16,6 +19,47 @@ export const LanguageProvider = ({ children }) => {
         document.documentElement.lang = locale;
     }, [locale]);
 
+    useEffect(() => {
+        if (!import.meta.env.DEV) return;
+        const missing = [...validateInterfaceMessages(), ...validateLiteralTranslations()];
+        if (missing.length) console.warn(`Missing translations: ${missing.join(", ")}`);
+    }, []);
+
+    useEffect(() => {
+        if (typeof document === "undefined" || typeof MutationObserver === "undefined") return undefined;
+        const attributes = ["placeholder", "aria-label", "title"];
+        const translateNode = (root) => {
+            if (root.nodeType === Node.TEXT_NODE) {
+                const match = root.nodeValue.match(/^(\s*)(.*?)(\s*)$/s);
+                if (!match?.[2]) return;
+                let translations = literalOrigins.get(root);
+                if (!translations || !Object.values(translations).includes(match[2])) {
+                    translations = literalMessage(match[2]);
+                    if (translations) literalOrigins.set(root, translations);
+                }
+                const translated = translations?.[locale] || match[2];
+                if (translated !== match[2]) root.nodeValue = `${match[1]}${translated}${match[3]}`;
+                return;
+            }
+            if (root.nodeType !== Node.ELEMENT_NODE) return;
+            for (const attribute of attributes) {
+                if (root.hasAttribute(attribute)) {
+                    const value = root.getAttribute(attribute);
+                    const translated = translateLiteral(value, locale);
+                    if (translated !== value) root.setAttribute(attribute, translated);
+                }
+            }
+            root.childNodes.forEach(translateNode);
+        };
+        translateNode(document.body);
+        const observer = new MutationObserver((records) => records.forEach((record) => {
+            if (record.type === "characterData") translateNode(record.target);
+            record.addedNodes.forEach(translateNode);
+        }));
+        observer.observe(document.body, { childList: true, subtree: true, characterData: true });
+        return () => observer.disconnect();
+    }, [locale]);
+
     // Función traductora recursiva (ej: t('agenda.title'))
     const t = (path) => {
         const keys = path.split(".");
@@ -38,7 +82,7 @@ export const LanguageProvider = ({ children }) => {
     };
 
     return (
-        <LanguageContext.Provider value={{ locale, setLocale, supportedLocales, t }}>
+        <LanguageContext.Provider value={{ locale, setLocale, supportedLocales, t, ui: interfaceText(locale) }}>
             {children}
         </LanguageContext.Provider>
     );
diff --git a/src/front/i18n/literalTranslations.mjs b/src/front/i18n/literalTranslations.mjs
new file mode 100644
index 0000000..b2ae140
--- /dev/null
+++ b/src/front/i18n/literalTranslations.mjs
@@ -0,0 +1,284 @@
+const phrase = (en, es, pt) => ({ en, es, pt });
+
+// Compatibility catalogue for the older operational screens. New UI should use
+// `ui.<key>` directly; this catalogue keeps all remaining legacy labels in one
+// place while those screens are progressively split into smaller components.
+export const literalTranslations = [
+    phrase("Filters", "Filtros", "Filtros"),
+    phrase("Source", "Origen", "Origem"),
+    phrase("All sources", "Todos los orígenes", "Todas as origens"),
+    phrase("Call", "Llamada", "Ligação"),
+    phrase("Referral", "Referido", "Indicação"),
+    phrase("All statuses", "Todos los estados", "Todos os status"),
+    phrase("New", "Nuevo", "Novo"),
+    phrase("Contacted", "Contactado", "Contatado"),
+    phrase("Qualified", "Calificado", "Qualificado"),
+    phrase("Won", "Ganado", "Ganho"),
+    phrase("Lost", "Perdido", "Perdido"),
+    phrase("Not specified", "No especificado", "Não especificado"),
+    phrase("No priority", "Sin prioridad", "Sem prioridade"),
+    phrase("No date", "Sin fecha", "Sem data"),
+    phrase("Company", "Empresa", "Empresa"),
+    phrase("Client", "Cliente", "Cliente"),
+    phrase("Member", "Miembro", "Membro"),
+    phrase("Save", "Guardar", "Salvar"),
+    phrase("Enter at least a name and service.", "Introduce al menos el nombre y el servicio.", "Informe pelo menos o nome e o serviço."),
+    phrase("You must sign in.", "Debes iniciar sesión.", "Você precisa entrar."),
+    phrase("Unable to verify your account.", "No se pudo verificar tu cuenta.", "Não foi possível verificar sua conta."),
+    phrase("Unable to load leads.", "No se pudieron cargar los leads.", "Não foi possível carregar os leads."),
+    phrase("Unable to load lead details.", "No se pudieron cargar los detalles del lead.", "Não foi possível carregar os detalhes do lead."),
+    phrase("Unable to save the lead.", "No se pudo guardar el lead.", "Não foi possível salvar o lead."),
+    phrase("This lead has no phone or email.", "Este lead no tiene teléfono ni email.", "Este lead não tem telefone nem email."),
+    phrase("Unable to update the lead.", "No se pudo actualizar el lead.", "Não foi possível atualizar o lead."),
+    phrase("Unable to convert the lead.", "No se pudo convertir el lead.", "Não foi possível converter o lead."),
+    phrase("Unable to identify the current responsible person.", "No se pudo identificar al responsable actual.", "Não foi possível identificar o responsável atual."),
+    phrase("Unable to create the next action.", "No se pudo crear la próxima acción.", "Não foi possível criar a próxima ação."),
+    phrase("Unable to complete the action.", "No se pudo completar la acción.", "Não foi possível concluir a ação."),
+    phrase("Edit lead", "Editar lead", "Editar lead"),
+    phrase("Register new lead", "Registrar nuevo lead", "Cadastrar novo lead"),
+    phrase("Save lead", "Guardar lead", "Salvar lead"),
+    phrase("Converted", "Convertido", "Convertido"),
+    phrase("Converting...", "Convirtiendo...", "Convertendo..."),
+    phrase("Convert", "Convertir", "Converter"),
+    phrase("Not registered", "No registrado", "Não registrado"),
+    phrase("Not specified", "No especificada", "Não especificada"),
+    phrase("Active", "Activos", "Ativos"),
+    phrase("Inactive", "Inactivos", "Inativos"),
+    phrase("Loading leads...", "Cargando leads...", "Carregando leads..."),
+    phrase("Loading clients...", "Cargando clientes…", "Carregando clientes..."),
+    phrase("Name", "Nombre", "Nome"),
+    phrase("Service", "Servicio", "Serviço"),
+    phrase("Actions", "Acciones", "Ações"),
+    phrase("Real sales opportunity information.", "Datos reales de la oportunidad comercial.", "Informações reais da oportunidade comercial."),
+    phrase("Name *", "Nombre *", "Nome *"),
+    phrase("Phone", "Teléfono", "Telefone"),
+    phrase("No source", "Sin origen", "Sem origem"),
+    phrase("Requested service *", "Servicio solicitado *", "Serviço solicitado *"),
+    phrase("Service area", "Zona de servicio", "Área de serviço"),
+    phrase("Priority", "Prioridad", "Prioridade"),
+    phrase("Low", "Baja", "Baixa"),
+    phrase("Medium", "Media", "Média"),
+    phrase("High", "Alta", "Alta"),
+    phrase("Responsible", "Responsable", "Responsável"),
+    phrase("Unassigned", "Sin asignar", "Não atribuído"),
+    phrase("Assign to me", "Asignarme a mí", "Atribuir a mim"),
+    phrase("Description", "Descripción", "Descrição"),
+    phrase("Internal notes", "Notas internas", "Notas internas"),
+    phrase("Cancel", "Cancelar", "Cancelar"),
+    phrase("Contact", "Contactar", "Contatar"),
+    phrase("Edit", "Editar", "Editar"),
+    phrase("Contact", "Contacto", "Contato"),
+    phrase("Consent", "Consentimiento", "Consentimento"),
+    phrase("Opportunity", "Oportunidad", "Oportunidade"),
+    phrase("Area", "Zona", "Área"),
+    phrase("Internal note:", "Nota interna:", "Nota interna:"),
+    phrase("Next actions", "Próximas acciones", "Próximas ações"),
+    phrase("Add", "Añadir", "Adicionar"),
+    phrase("Title *", "Título *", "Título *"),
+    phrase("Date and time *", "Fecha y hora *", "Data e hora *"),
+    phrase("Mark as completed", "Marcar como completada", "Marcar como concluída"),
+    phrase("No next actions recorded.", "No hay próximas acciones registradas.", "Não há próximas ações registradas."),
+    phrase("No leads found.", "No se encontraron leads.", "Nenhum lead encontrado."),
+    phrase("Authorized", "Autorizado", "Autorizado"),
+    phrase("Activity history", "Historial de actividad", "Histórico de atividades"),
+    phrase("No activity recorded.", "No hay actividad registrada.", "Nenhuma atividade registrada."),
+    phrase("Search by name, email or phone...", "Buscar por nombre, email o teléfono...", "Pesquisar por nome, email ou telefone..."),
+    phrase("Close", "Cerrar", "Fechar"),
+    phrase("Client information", "Datos del cliente", "Dados do cliente"),
+    phrase("deactivate", "desactivar", "desativar"),
+    phrase("activate", "activar", "ativar"),
+    phrase("Do you want to {action} this client?", "¿Quieres {action} este cliente?", "Deseja {action} este cliente?"),
+    phrase("No clients found.", "No se encontraron clientes.", "Nenhum cliente encontrado."),
+    phrase("Client management", "Gestión de Clientes", "Gestão de clientes"),
+    phrase("New client", "Nuevo cliente", "Novo cliente"),
+    phrase("View details", "Ver detalles", "Ver detalhes"),
+    phrase("Deactivate", "Desactivar", "Desativar"),
+    phrase("Activate", "Activar", "Ativar"),
+    phrase("Edit client", "Editar cliente", "Editar cliente"),
+    phrase("Create client", "Crear cliente", "Criar cliente"),
+    phrase("Save changes", "Guardar cambios", "Salvar alterações"),
+    phrase("No email", "Sin email", "Sem email"),
+    phrase("No phone", "Sin teléfono", "Sem telefone"),
+    phrase("Unable to load clients.", "No se pudieron cargar los clientes.", "Não foi possível carregar os clientes."),
+    phrase("Unable to load the client address.", "No se pudo cargar la dirección del cliente.", "Não foi possível carregar o endereço do cliente."),
+    phrase("Complete the address, city and postcode.", "Completa la dirección, la ciudad y el código postal.", "Preencha o endereço, a cidade e o código postal."),
+    phrase("Unable to save the client.", "No se pudo guardar el cliente.", "Não foi possível salvar o cliente."),
+    phrase("Unable to update the client status.", "No se pudo actualizar el estado del cliente.", "Não foi possível atualizar o status do cliente."),
+    phrase("Main address", "Dirección principal", "Endereço principal"),
+    phrase("Preferences, context or useful client information", "Preferencias, contexto o información útil del cliente", "Preferências, contexto ou informações úteis do cliente"),
+    phrase("Loading address", "Cargando dirección", "Carregando endereço"),
+    phrase("Pagination", "Paginación", "Paginação"),
+    phrase("Home, office...", "Casa, oficina...", "Casa, escritório..."),
+    phrase("Street, number and building", "Calle, número y portal", "Rua, número e complemento"),
+    phrase("Optional", "Opcional", "Opcional"),
+    phrase("Loading client...", "Cargando cliente...", "Carregando cliente..."),
+    phrase("Client not found.", "Cliente no encontrado.", "Cliente não encontrado."),
+    phrase("Back to list", "Volver al listado", "Voltar à lista"),
+    phrase("Contact address:", "Dirección de contacto:", "Endereço de contato:"),
+    phrase("Scheduled next action", "Próxima Acción Programada", "Próxima ação agendada"),
+    phrase("Owner:", "Propietario:", "Responsável:"),
+    phrase("Related:", "Relacionado:", "Relacionado:"),
+    phrase("Status:", "Estado:", "Status:"),
+    phrase("Related jobs", "Trabajos Relacionados", "Trabalhos relacionados"),
+    phrase("Scheduled appointments", "Citas Programadas", "Compromissos agendados"),
+    phrase("Go to Calendar →", "Ir a la Agenda →", "Ir para a Agenda →"),
+    phrase("Recent activity", "Actividad Reciente", "Atividade recente"),
+    phrase("Verified client", "Cliente Verificado", "Cliente verificado"),
+    phrase("No address recorded", "Sin dirección registrada", "Sem endereço cadastrado"),
+    phrase("No next action scheduled", "No hay próxima acción programada", "Nenhuma próxima ação agendada"),
+    phrase("No description", "Sin descripción", "Sem descrição"),
+    phrase("No scheduled action", "Sin acción programada", "Sem ação agendada"),
+    phrase("No budget", "Sin presupuesto", "Sem orçamento"),
+    phrase("No status", "Sin estado", "Sem status"),
+    phrase("No jobs are associated with this client.", "No hay trabajos asociados a este cliente.", "Não há trabalhos associados a este cliente."),
+    phrase("Expected delivery:", "Entrega prevista:", "Entrega prevista:"),
+    phrase("Budget:", "Presupuesto:", "Orçamento:"),
+    phrase("View job", "Ver Trabajo", "Ver trabalho"),
+    phrase("View workspace", "Ver Espacio de Trabajo", "Ver espaço de trabalho"),
+    phrase("No appointments are recorded for this client.", "No hay citas registradas en la agenda para este cliente.", "Não há compromissos registrados para este cliente."),
+    phrase("View in Calendar", "Ver en Agenda", "Ver na Agenda"),
+    phrase("No activity is recorded for this client.", "No hay actividad registrada para este cliente.", "Não há atividades registradas para este cliente."),
+    phrase("Unable to load the client.", "No se pudo cargar el cliente.", "Não foi possível carregar o cliente."),
+    phrase("Due:", "Vence:", "Prazo:"),
+    phrase("Job management", "Gestión de Trabajos", "Gestão de trabalhos"),
+    phrase("Operational control of jobs, stages, materials and deliverables.", "Control operativo de encargos, etapas, materiales y entregables.", "Controle operacional de trabalhos, etapas, materiais e entregas."),
+    phrase("New job", "Nuevo Trabajo", "Novo trabalho"),
+    phrase("Pending", "Pendientes", "Pendentes"),
+    phrase("In progress", "En curso", "Em andamento"),
+    phrase("Completed", "Completados", "Concluídos"),
+    phrase("No jobs found", "No se encontraron trabajos", "Nenhum trabalho encontrado"),
+    phrase("Adjust the search filters or create a new job.", "Intenta ajustar los filtros de búsqueda o crea un nuevo trabajo.", "Ajuste os filtros de pesquisa ou crie um novo trabalho."),
+    phrase("Stage progress", "Progreso de etapas", "Progresso das etapas"),
+    phrase("Delete", "Eliminar", "Excluir"),
+    phrase("Register new job", "Registrar Nuevo Trabajo", "Cadastrar novo trabalho"),
+    phrase("Job title", "Título del Encargo / Trabajo", "Título do trabalho"),
+    phrase("Select client...", "Seleccionar cliente...", "Selecionar cliente..."),
+    phrase("Budget (€)", "Presupuesto (€)", "Orçamento (€)"),
+    phrase("Job address", "Dirección de la Obra", "Endereço da obra"),
+    phrase("Start date", "Fecha de Inicio", "Data de início"),
+    phrase("Delivery date", "Fecha de Entrega", "Data de entrega"),
+    phrase("Save job", "Guardar Trabajo", "Salvar trabalho"),
+    phrase("Delete this job?", "¿Estás seguro de que deseas eliminar este trabajo?", "Tem certeza de que deseja excluir este trabalho?"),
+    phrase("Unable to load the account.", "No se pudo cargar la cuenta.", "Não foi possível carregar a conta."),
+    phrase("No active company was found.", "No se encontró una empresa activa.", "Nenhuma empresa ativa foi encontrada."),
+    phrase("The delivery date cannot be before the start date.", "La fecha de entrega no puede ser anterior a la fecha de inicio.", "A data de entrega não pode ser anterior à data de início."),
+    phrase("Network error while deleting the job.", "Error de red al intentar eliminar el trabajo.", "Erro de rede ao excluir o trabalho."),
+    phrase("General client", "Cliente general", "Cliente geral"),
+    phrase("Address not specified", "Dirección no especificada", "Endereço não especificado"),
+    phrase("E.g. Built-in wardrobe", "Ej. Fabricación de Armario Empotrado", "Ex.: Fabricação de armário embutido"),
+    phrase("Error loading data:", "Error cargando datos:", "Erro ao carregar dados:"),
+    phrase("Error creating the job:", "Error al crear el trabajo:", "Erro ao criar o trabalho:"),
+    phrase("Network error while creating the job:", "Error de red al crear el trabajo:", "Erro de rede ao criar o trabalho:"),
+    phrase("Network error while deleting the job:", "Error de red al eliminar el trabajo:", "Erro de rede ao excluir o trabalho:"),
+    phrase("Unable to create the job:", "No se pudo crear el trabajo:", "Não foi possível criar o trabalho:"),
+    phrase("Unknown error", "Error desconocido", "Erro desconhecido"),
+    phrase("Search by title or client...", "Buscar por título o cliente...", "Pesquisar por título ou cliente..."),
+    phrase("Loading...", "Cargando...", "Carregando..."),
+    phrase("Location:", "Ubicación:", "Localização:"),
+    phrase("Assigned budget:", "Presupuesto asignado:", "Orçamento atribuído:"),
+    phrase("Start date:", "Fecha de inicio:", "Data de início:"),
+    phrase("Delivery date:", "Fecha de entrega:", "Data de entrega:"),
+    phrase("Assigned team:", "Equipo asignado:", "Equipe atribuída:"),
+    phrase("Overall operational progress", "Progreso Operativo General", "Progresso operacional geral"),
+    phrase("Project stages", "Etapas del Proyecto", "Etapas do projeto"),
+    phrase("Stage name", "Nombre de la Etapa", "Nome da etapa"),
+    phrase("Current status", "Estado Actual", "Status atual"),
+    phrase("Actions / Mark", "Acciones / Marcar", "Ações / Marcar"),
+    phrase("No stages recorded for this job.", "No hay etapas registradas para este trabajo.", "Não há etapas registradas para este trabalho."),
+    phrase("Related appointments", "Citas Relacionadas", "Compromissos relacionados"),
+    phrase("View Calendar", "Ver Agenda", "Ver Agenda"),
+    phrase("No appointments recorded for this job.", "No hay citas registradas para este trabajo.", "Não há compromissos registrados para este trabalho."),
+    phrase("Open", "Abrir", "Abrir"),
+    phrase("No recent activity recorded.", "No hay actividad reciente registrada.", "Nenhuma atividade recente registrada."),
+    phrase("Completed and delivered", "Trabajo Completado y Entregado", "Trabalho concluído e entregue"),
+    phrase("Job in progress", "Trabajo en Curso", "Trabalho em andamento"),
+    phrase("General team", "Equipo general", "Equipe geral"),
+    phrase("Unable to update the stage.", "No se pudo actualizar la etapa.", "Não foi possível atualizar a etapa."),
+    phrase("Unable to load the job.", "No se pudo cargar el trabajo.", "Não foi possível carregar o trabalho."),
+    phrase("Unable to load the active company.", "No se pudo cargar la empresa activa.", "Não foi possível carregar a empresa ativa."),
+    phrase("Job not found.", "Trabajo no encontrado.", "Trabalho não encontrado."),
+    phrase("CLIENTFLOW · WORKSPACE", "CLIENTFLOW · ESPACIO DE TRABAJO", "CLIENTFLOW · ESPAÇO DE TRABALHO"),
+    phrase("Conversations", "Conversaciones", "Conversas"),
+    phrase("One inbox for all your channels.", "Una sola bandeja para todos tus canales.", "Uma caixa de entrada para todos os seus canais."),
+    phrase("New conversation", "Nueva conversación", "Nova conversa"),
+    phrase("Inbox", "Bandeja de entrada", "Caixa de entrada"),
+    phrase("Loading conversations...", "Cargando conversaciones…", "Carregando conversas..."),
+    phrase("No conversations yet", "Todavía no hay conversaciones", "Ainda não há conversas"),
+    phrase("Your conversations will appear here when they arrive.", "Tus conversaciones aparecerán aquí cuando se reciban.", "Suas conversas aparecerão aqui quando forem recebidas."),
+    phrase("Your conversations", "Tus conversaciones", "Suas conversas"),
+    phrase("A place for every conversation", "Un espacio para cada conversación", "Um espaço para cada conversa"),
+    phrase("Select a conversation on the left to view its history.", "Selecciona una conversación a la izquierda para ver su historial.", "Selecione uma conversa à esquerda para ver o histórico."),
+    phrase("Loading messages...", "Cargando mensajes…", "Carregando mensagens..."),
+    phrase("No messages yet.", "Todavía no hay mensajes.", "Ainda não há mensagens."),
+    phrase("The AI is handling this conversation.", "La IA está atendiendo esta conversación.", "A IA está atendendo esta conversa."),
+    phrase("Take control", "Asumir el control", "Assumir o controle"),
+    phrase("Message", "Mensaje", "Mensagem"),
+    phrase("No client", "Sin cliente", "Sem cliente"),
+    phrase("Channel", "Canal", "Canal"),
+    phrase("Control", "Control", "Controle"),
+    phrase("Last message", "Último mensaje", "Última mensagem"),
+    phrase("NEW CONTACT", "NUEVO CONTACTO", "NOVO CONTATO"),
+    phrase("Subject", "Asunto", "Assunto"),
+    phrase("Email", "Correo electrónico", "Email"),
+    phrase("First message", "Primer mensaje", "Primeira mensagem"),
+    phrase("Create conversation", "Crear conversación", "Criar conversa"),
+    phrase("Creating...", "Creando…", "Criando..."),
+    phrase("optional", "opcional", "opcional"),
+    phrase("Write a message...", "Escribe un mensaje…", "Escreva uma mensagem..."),
+    phrase("Write the first message to the client...", "Escribe el primer mensaje para el cliente…", "Escreva a primeira mensagem para o cliente..."),
+    phrase("Conversation details", "Detalles de la conversación", "Detalhes da conversa"),
+    phrase("Linked client", "Cliente vinculado", "Cliente vinculado"),
+    phrase("Untitled conversation", "Conversación sin título", "Conversa sem título"),
+    phrase("E.g. Wardrobe quote", "Ej. Presupuesto para armario", "Ex.: Orçamento para armário"),
+    phrase("Send message", "Enviar mensaje", "Enviar mensagem"),
+    phrase("Sign in to view conversations.", "Inicia sesión para ver las conversaciones.", "Entre para ver as conversas."),
+    phrase("No company is available for this account.", "No hay ninguna empresa disponible para esta cuenta.", "Nenhuma empresa está disponível para esta conta."),
+    phrase("Unable to update the list.", "No se pudo actualizar la lista.", "Não foi possível atualizar a lista."),
+    phrase("Unable to load your account.", "No se pudo cargar tu cuenta.", "Não foi possível carregar sua conta."),
+    phrase("Conversation pages", "Páginas de conversaciones", "Páginas de conversas"),
+    phrase("Message pages", "Páginas de mensajes", "Páginas de mensagens"),
+    phrase("Previous conversations", "Conversaciones anteriores", "Conversas anteriores"),
+    phrase("Next conversations", "Conversaciones siguientes", "Próximas conversas"),
+    phrase("Message history", "Historial de mensajes", "Histórico de mensagens"),
+    phrase("Select a conversation to begin", "Selecciona una conversación para empezar", "Selecione uma conversa para começar"),
+    phrase("Select a conversation to view its details.", "Selecciona una conversación para ver sus detalles.", "Selecione uma conversa para ver os detalhes."),
+    phrase("No messages yet", "Todavía no hay mensajes", "Ainda não há mensagens"),
+    phrase("Open", "Abierta", "Aberta"),
+    phrase("Waiting", "En espera", "Em espera"),
+    phrase("Resolved", "Resuelta", "Resolvida"),
+    phrase("Human", "Humano", "Humano"),
+    phrase("Saved", "Guardado", "Salvo"),
+    phrase("Received", "Recibido", "Recebido"),
+    phrase("Sent", "Enviado", "Enviado"),
+    phrase("Delivered", "Entregado", "Entregue"),
+    phrase("Failed", "Fallido", "Falhou"),
+    phrase("Take control before sending a message.", "Asume el control antes de enviar un mensaje.", "Assuma o controle antes de enviar uma mensagem."),
+    phrase("Conversation not found.", "No se encontró la conversación.", "Conversa não encontrada."),
+    phrase("Your subscription is inactive or expired.", "Tu suscripción está inactiva o ha caducado.", "Sua assinatura está inativa ou expirou."),
+    phrase("Client not found.", "No se encontró el cliente.", "Cliente não encontrado."),
+    phrase("The initial message cannot be empty.", "El mensaje inicial no puede estar vacío.", "A mensagem inicial não pode estar vazia."),
+    phrase("Unable to connect to the server.", "No se pudo conectar con el servidor.", "Não foi possível conectar ao servidor."),
+    phrase("Unable to complete the operation. Try again.", "No se pudo completar la operación. Inténtalo de nuevo.", "Não foi possível concluir a operação. Tente novamente."),
+];
+
+const reverseCatalogue = new Map();
+for (const translations of literalTranslations) {
+    Object.values(translations).forEach((value) => {
+        if (!reverseCatalogue.has(value)) reverseCatalogue.set(value, translations);
+    });
+}
+
+export const literalMessage = (value) => reverseCatalogue.get(value);
+
+export function translateLiteral(value, locale) {
+    const translations = literalMessage(value);
+    return translations?.[locale] || value;
+}
+
+export function validateLiteralTranslations() {
+    return literalTranslations.flatMap((translations, index) =>
+        ["en", "es", "pt"]
+            .filter((locale) => !translations[locale]?.trim())
+            .map((locale) => `literal.${index}.${locale}`)
+    );
+}
diff --git a/src/front/i18n/messages.mjs b/src/front/i18n/messages.mjs
new file mode 100644
index 0000000..13ef4bc
--- /dev/null
+++ b/src/front/i18n/messages.mjs
@@ -0,0 +1,278 @@
+const message = (en, es, pt) => ({ en, es, pt });
+
+export const interfaceMessages = {
+    closeMenu: message("Close menu", "Cerrar menú", "Fechar menu"),
+    retry: message("Try again", "Reintentar", "Tentar novamente"),
+    loading: message("Loading...", "Cargando...", "Carregando..."),
+    processing: message("Processing...", "Procesando...", "Processando..."),
+    saving: message("Saving...", "Guardando...", "Salvando..."),
+    cancel: message("Cancel", "Cancelar", "Cancelar"),
+    close: message("Close", "Cerrar", "Fechar"),
+    previous: message("Previous", "Anterior", "Anterior"),
+    next: message("Next", "Siguiente", "Próximo"),
+    page: message("Page", "Página", "Página"),
+    of: message("of", "de", "de"),
+    results: message("results", "resultados", "resultados"),
+    actions: message("Actions", "Acciones", "Ações"),
+    status: message("Status", "Estado", "Status"),
+    active: message("Active", "Activo", "Ativo"),
+    inactive: message("Inactive", "Inactivo", "Inativo"),
+    edit: message("Edit", "Editar", "Editar"),
+    delete: message("Delete", "Eliminar", "Excluir"),
+    email: message("Email", "Email", "Email"),
+    password: message("Password", "Contraseña", "Senha"),
+    firstName: message("First name", "Nombre", "Nome"),
+    lastName: message("Last name", "Apellidos", "Sobrenome"),
+    company: message("Company", "Empresa", "Empresa"),
+    role: message("Role", "Rol", "Função"),
+    noCompany: message("No company is available.", "No hay una empresa disponible.", "Nenhuma empresa está disponível."),
+    accountLoadError: message("Unable to verify your account.", "No se pudo verificar tu cuenta.", "Não foi possível verificar sua conta."),
+    connectionError: message("Unable to connect to the server.", "No se pudo conectar con el servidor.", "Não foi possível conectar ao servidor."),
+    intelligentOperatingSystem: message("Intelligent operating system", "Sistema operativo inteligente", "Sistema operacional inteligente"),
+    allBusinessOneFlow: message("Your whole business. One single flow.", "Todo tu negocio. Un solo flujo.", "Todo o seu negócio. Um só fluxo."),
+    platformDescription: message("From the first enquiry to completed work: customers, team, operations, knowledge and AI agents on one platform.", "Desde la primera consulta hasta el trabajo terminado: clientes, equipo, operaciones, conocimiento y agentes de IA en una sola plataforma.", "Do primeiro contato ao trabalho concluído: clientes, equipe, operações, conhecimento e agentes de IA em uma única plataforma."),
+
+    loginTitle: message("Sign in", "Iniciar sesión", "Entrar"),
+    loginSubtitle: message("Sign in to your account to continue", "Ingresa a tu cuenta para continuar", "Entre na sua conta para continuar"),
+    loginRequired: message("Enter your email and password.", "Introduce email y contraseña.", "Informe seu email e senha."),
+    loginInvalid: message("Invalid credentials (simulation)", "Credenciales inválidas (simulado)", "Credenciais inválidas (simulação)"),
+    loginError: message("Unable to sign in.", "Error al iniciar sesión.", "Não foi possível entrar."),
+    loginResetDone: message("Password updated. You can now sign in.", "Contraseña actualizada. Ya puedes iniciar sesión.", "Senha atualizada. Agora você pode entrar."),
+    forgotPassword: message("Forgot your password?", "¿Olvidaste tu contraseña?", "Esqueceu sua senha?"),
+    signIn: message("Sign in", "Entrar", "Entrar"),
+    noAccount: message("Don't have an account?", "¿Aún no tienes cuenta?", "Ainda não tem uma conta?"),
+    registerLink: message("Register", "Regístrate", "Cadastre-se"),
+    emailPlaceholder: message("you@company.com", "tu@empresa.com", "voce@empresa.com"),
+
+    registerTitle: message("Create your account", "Regístrate", "Crie sua conta"),
+    registerSubtitle: message("Start improving your workflow", "Comienza a optimizar tu flujo de trabajo", "Comece a otimizar seu fluxo de trabalho"),
+    selectPlanFirst: message("Select a plan before registering.", "Selecciona un plan antes de registrarte.", "Selecione um plano antes de se cadastrar."),
+    requiredFields: message("Complete all required fields.", "Completa todos los campos obligatorios.", "Preencha todos os campos obrigatórios."),
+    accountCreated: message("Account created successfully. Please sign in.", "Cuenta creada correctamente. Inicia sesión.", "Conta criada com sucesso. Entre para continuar."),
+    registerError: message("Unable to create the account.", "No se pudo crear la cuenta.", "Não foi possível criar a conta."),
+    professionalEmail: message("Work email", "Email profesional", "Email profissional"),
+    companyName: message("Company name", "Nombre de la empresa", "Nome da empresa"),
+    createAccount: message("Create account", "Crear cuenta", "Criar conta"),
+    haveAccount: message("Already have an account?", "¿Ya tienes cuenta?", "Já tem uma conta?"),
+
+    forgotTitle: message("Reset password", "Recuperar contraseña", "Recuperar senha"),
+    forgotSubtitle: message("We'll email you the instructions", "Te enviaremos las instrucciones a tu correo", "Enviaremos as instruções para seu email"),
+    emailRequired: message("Enter your email address.", "Ingresa tu correo electrónico.", "Informe seu endereço de email."),
+    recoverySent: message("Recovery email sent.", "Correo de recuperación enviado.", "Email de recuperação enviado."),
+    recoveryError: message("Unable to process the request.", "Error al procesar la solicitud.", "Não foi possível processar a solicitação."),
+    sendInstructions: message("Send instructions", "Enviar instrucciones", "Enviar instruções"),
+    backToLogin: message("Back to sign in", "Volver al login", "Voltar ao login"),
+
+    resetTitle: message("New password", "Nueva contraseña", "Nova senha"),
+    resetSubtitle: message("Enter and confirm your new password", "Introduce y confirma tu nueva contraseña", "Informe e confirme sua nova senha"),
+    resetInvalid: message("Enter a matching password of 12 to 128 characters using a valid link.", "Introduce una contraseña de 12 a 128 caracteres y una confirmación idéntica con un enlace válido.", "Informe uma senha de 12 a 128 caracteres, com confirmação idêntica e um link válido."),
+    resetSuccess: message("Password updated successfully.", "Contraseña actualizada con éxito.", "Senha atualizada com sucesso."),
+    resetError: message("Unable to update the password.", "Error al actualizar la contraseña.", "Não foi possível atualizar a senha."),
+    invalidLink: message("Invalid link.", "Enlace inválido.", "Link inválido."),
+    requestAnotherLink: message("Request another link", "Solicita otro enlace", "Solicitar outro link"),
+    confirmPassword: message("Confirm password", "Confirmar contraseña", "Confirmar senha"),
+    updating: message("Updating...", "Actualizando...", "Atualizando..."),
+    resetPasswordAction: message("Reset password", "Restablecer contraseña", "Redefinir senha"),
+
+    plansTitle: message("Choose your plan", "Elige tu plan", "Escolha seu plano"),
+    plansSubtitle: message("Select the option that best fits your business", "Selecciona la opción que mejor se adapte a tu negocio", "Selecione a opção que melhor se adapta ao seu negócio"),
+    plansLoading: message("Loading plans...", "Cargando planes...", "Carregando planos..."),
+    plansError: message("Unable to load plans. Please try again.", "No se pudieron cargar los planes. Inténtalo de nuevo.", "Não foi possível carregar os planos. Tente novamente."),
+    invalidPlans: message("Invalid plans response.", "La respuesta de planes no es válida.", "A resposta dos planos não é válida."),
+    unlimitedLeads: message("Unlimited leads", "Leads ilimitados", "Leads ilimitados"),
+    unspecifiedLeadLimit: message("Lead limit not specified", "Límite de leads no especificado", "Limite de leads não especificado"),
+    upToLeads: message("Up to {count} leads", "Hasta {count} leads", "Até {count} leads"),
+    trialDays: message("{count}-day trial", "Prueba de {count} días", "Teste de {count} dias"),
+    noPlans: message("No plans are currently available.", "No hay planes disponibles actualmente.", "Não há planos disponíveis no momento."),
+    perMonth: message("/month", "/mes", "/mês"),
+    chooseStart: message("Choose how to start", "Elige cómo empezar", "Escolha como começar"),
+    freeTrial: message("Start a 3-day free trial", "Iniciar prueba gratuita de 3 días", "Iniciar teste grátis de 3 dias"),
+    mockPayment: message("Simulate immediate subscription", "Simular suscripción inmediata", "Simular assinatura imediata"),
+    noRealCharge: message("Simulate payment — no real charge", "Simular pago — sin cargo real", "Simular pagamento — sem cobrança real"),
+    continueRegistration: message("Continue to registration", "Continuar al registro", "Continuar para o cadastro"),
+    continue: message("Continue", "Continuar", "Continuar"),
+
+    invitationTitle: message("Join your team", "Únete a tu equipo", "Entre para sua equipe"),
+    invitationAccepted: message("Invitation accepted. You can now sign in.", "Invitación aceptada. Ya puedes iniciar sesión.", "Convite aceito. Agora você pode entrar."),
+    invitationInvalid: message("This link is invalid. Ask your administrator for another invitation.", "El enlace no es válido. Solicita una invitación a tu administrador.", "Este link é inválido. Solicite outro convite ao administrador."),
+    invitationExisting: message("Sign in with the invited email account.", "Accede con la cuenta del correo invitado.", "Entre com a conta do email convidado."),
+    invitationNew: message("Create your account to accept the invitation.", "Crea tu cuenta para aceptar la invitación.", "Crie sua conta para aceitar o convite."),
+    invitationAcceptError: message("Unable to accept the invitation.", "No se pudo aceptar la invitación.", "Não foi possível aceitar o convite."),
+    passwordMismatch: message("Passwords do not match.", "Las contraseñas no coinciden.", "As senhas não coincidem."),
+    acceptInvitation: message("Accept invitation", "Aceptar invitación", "Aceitar convite"),
+    needAccount: message("I need to create an account", "Necesito crear una cuenta", "Preciso criar uma conta"),
+    existingAccount: message("I already have an account", "Ya tengo una cuenta", "Já tenho uma conta"),
+    repeatPassword: message("Repeat password", "Repite la contraseña", "Repita a senha"),
+    invitationExpires: message("The invitation expires in 48 hours.", "La invitación caduca en 48 horas.", "O convite expira em 48 horas."),
+
+    agentsTitle: message("AI agents", "Agentes IA", "Agentes de IA"),
+    agentsSubtitle: message("Configure company instructions and knowledge. Every response requires human review.", "Configura las instrucciones y el conocimiento de tu empresa. Todas las respuestas requieren revisión humana.", "Configure as instruções e o conhecimento da empresa. Todas as respostas exigem revisão humana."),
+    availableAgents: message("Available agents", "Agentes disponibles", "Agentes disponíveis"),
+    editConfiguration: message("Edit configuration", "Editar configuración", "Editar configuração"),
+    editAgent: message("Edit agent", "Editar agente", "Editar agente"),
+    createAgent: message("Create agent", "Crear agente", "Criar agente"),
+    name: message("Name", "Nombre", "Nome"),
+    purpose: message("Purpose", "Función", "Função"),
+    instructions: message("Instructions", "Instrucciones", "Instruções"),
+    authorizedDocuments: message("Authorized documents", "Documentos autorizados", "Documentos autorizados"),
+    uploadKnowledgeFirst: message("Upload and process documents in Knowledge first.", "Sube y procesa documentos en Conocimiento primero.", "Envie e processe documentos em Conhecimento primeiro."),
+    saveAgent: message("Save agent", "Guardar agente", "Salvar agente"),
+    defaultAgentPurpose: message("Customer support", "Atención al cliente", "Atendimento ao cliente"),
+    defaultAgentInstruction: message("Answer clearly using only company sources.", "Responde con claridad usando únicamente las fuentes de la empresa.", "Responda com clareza usando somente as fontes da empresa."),
+
+    knowledgeTitle: message("Knowledge", "Conocimiento", "Conhecimento"),
+    knowledgeSubtitle: message("Company documents that help your agents.", "Documentos de tu empresa para ayudar a tus agentes.", "Documentos da empresa que ajudam seus agentes."),
+    uploadDocument: message("Upload document", "Subir documento", "Enviar documento"),
+    update: message("Refresh", "Actualizar", "Atualizar"),
+    operationProcessing: message("Processing. Large documents may take several minutes.", "Procesando la operación. Los documentos grandes pueden tardar varios minutos.", "Processando. Documentos grandes podem levar alguns minutos."),
+    documentsLoading: message("Loading documents...", "Cargando documentos...", "Carregando documentos..."),
+    document: message("Document", "Documento", "Documento"),
+    format: message("Format", "Formato", "Formato"),
+    chunks: message("Chunks", "Fragmentos", "Fragmentos"),
+    process: message("Process", "Procesar", "Processar"),
+    reprocess: message("Reprocess", "Reprocesar", "Reprocessar"),
+    viewText: message("View text", "Ver texto", "Ver texto"),
+    noDocuments: message("No documents yet", "Aún no hay documentos", "Ainda não há documentos"),
+    noDocumentsHint: message("Upload a PDF, DOCX or TXT with company information.", "Sube PDF, DOCX o TXT con información de tu empresa.", "Envie PDF, DOCX ou TXT com informações da empresa."),
+    closeText: message("Close text", "Cerrar texto", "Fechar texto"),
+    textLoading: message("Loading text...", "Cargando texto...", "Carregando texto..."),
+    chunk: message("Chunk", "Fragmento", "Fragmento"),
+    optionalTitle: message("Title (optional)", "Título (opcional)", "Título (opcional)"),
+    file: message("File", "Archivo", "Arquivo"),
+    uploadAndProcess: message("Upload and process", "Subir y procesar", "Enviar e processar"),
+    invalidKnowledgeFile: message("Select a PDF, DOCX or TXT file up to 10 MB.", "Selecciona un archivo PDF, DOCX o TXT de hasta 10 MB.", "Selecione um arquivo PDF, DOCX ou TXT de até 10 MB."),
+    documentProcessed: message("Document processed and available.", "Documento procesado y disponible.", "Documento processado e disponível."),
+    documentDeleted: message("Document deleted.", "Documento eliminado.", "Documento excluído."),
+    documentProcessing: message("File saved. Processing...", "Archivo guardado. Procesando...", "Arquivo salvo. Processando..."),
+    knowledgeFailure: message("Processing failed. Check that the file contains text and the AI service is available, then try again.", "No se pudo procesar. Comprueba que el archivo contiene texto y que el servicio de IA está disponible. Puedes reintentarlo.", "Não foi possível processar. Verifique se o arquivo contém texto e se o serviço de IA está disponível. Tente novamente."),
+    deleteDocumentConfirm: message("Delete “{title}” and its chunks?", "¿Eliminar «{title}» y sus fragmentos?", "Excluir “{title}” e seus fragmentos?"),
+    documentCount: message("{count} documents", "{count} documentos", "{count} documentos"),
+    fileHelp: message("Text PDF, DOCX or TXT · Maximum 10 MB", "PDF con texto, DOCX o TXT · Máximo 10 MB", "PDF com texto, DOCX ou TXT · Máximo de 10 MB"),
+    pending: message("Pending", "Pendiente", "Pendente"),
+    ready: message("Available", "Disponible", "Disponível"),
+    failed: message("Error", "Error", "Erro"),
+
+    teamTitle: message("Users", "Usuarios", "Usuários"),
+    teamSubtitle: message("Team, roles and access permissions.", "Equipo, funciones y permisos de acceso.", "Equipe, funções e permissões de acesso."),
+    createNew: message("Create new", "Crear nuevo", "Criar novo"),
+    searchUsers: message("Search users...", "Buscar en usuarios...", "Pesquisar usuários..."),
+    filterStatus: message("Filter by status", "Filtrar por estado", "Filtrar por status"),
+    allStatuses: message("All statuses", "Todos los estados", "Todos os status"),
+    teamLoading: message("Loading team...", "Cargando equipo...", "Carregando equipe..."),
+    user: message("User", "Usuario", "Usuário"),
+    owner: message("Owner", "Propietario", "Proprietário"),
+    administrator: message("Administrator", "Administrador", "Administrador"),
+    manager: message("Manager", "Responsable", "Gerente"),
+    agent: message("Agent", "Agente", "Agente"),
+    technician: message("Technician", "Técnico", "Técnico"),
+    inviteUser: message("Invite user", "Invitar usuario", "Convidar usuário"),
+    editUser: message("Edit user", "Editar usuario", "Editar usuário"),
+    sendInvitation: message("Send invitation", "Enviar invitación", "Enviar convite"),
+    updateMember: message("Update member", "Actualizar miembro", "Atualizar membro"),
+    memberUpdated: message("Member updated.", "Miembro actualizado.", "Membro atualizado."),
+    invitationCreated: message("Invitation created. In local mode, the link is saved to the test outbox; no real email is sent.", "Invitación creada. En modo local, el enlace se guarda en la bandeja de pruebas; no se envía un correo real.", "Convite criado. No modo local, o link é salvo na caixa de testes; nenhum email real é enviado."),
+    teamPermissionError: message("You do not have permission to manage this team.", "No tienes permisos para gestionar este equipo.", "Você não tem permissão para gerenciar esta equipe."),
+    noMatchingUsers: message("No matching users.", "No hay usuarios que coincidan.", "Nenhum usuário correspondente."),
+    results: message("{count} results", "{count} resultados", "{count} resultados"),
+    editMember: message("Edit member", "Editar miembro", "Editar membro"),
+    inviteMember: message("Invite member", "Invitar miembro", "Convidar membro"),
+    saveChanges: message("Save changes", "Guardar cambios", "Salvar alterações"),
+
+    aiAssistant: message("AI assistant", "Asistente IA", "Assistente de IA"),
+    humanReview: message("AI assistant · human review required", "Asistente IA · revisión humana obligatoria", "Assistente de IA · revisão humana obrigatória"),
+    selectAgent: message("Select agent", "Seleccionar agente", "Selecionar agente"),
+    assign: message("Assign", "Asignar", "Atribuir"),
+    configureAgentHint: message("Configure an AI Agent and link processed documents.", "Configura un agente en Agentes IA y vincula documentos procesados.", "Configure um Agente de IA e vincule documentos processados."),
+    useLatestMessage: message("Use the latest message on this page", "Usar el mensaje más reciente de esta página", "Usar a mensagem mais recente desta página"),
+    customerQuestion: message("Customer question you want to answer", "Pregunta del cliente que quieres responder", "Pergunta do cliente que você deseja responder"),
+    generateDraft: message("Generate draft", "Generar borrador", "Gerar rascunho"),
+    pendingReview: message("Pending review", "Pendiente de revisión", "Pendente de revisão"),
+    approvedDraft: message("Approved · saved in conversation", "Aprobado · guardado en la conversación", "Aprovado · salvo na conversa"),
+    rejectedDraft: message("Rejected", "Rechazado", "Rejeitado"),
+    humanAttention: message("Requires human attention", "Requiere atención humana", "Requer atendimento humano"),
+    approveResponse: message("Approve response", "Aprobar respuesta", "Aprovar resposta"),
+    rejectAndHandle: message("Reject and handle", "Rechazar y atender", "Rejeitar e atender"),
+    aiHandoffFallback: message("No response was sent. Review the sources or connection and continue manually.", "No se envió ninguna respuesta. Revisa las fuentes o la conexión y continúa manualmente.", "Nenhuma resposta foi enviada. Revise as fontes ou a conexão e continue manualmente."),
+
+    webChatTitle: message("Customer support", "Atención al cliente", "Atendimento ao cliente"),
+    chatSessionRequired: message("A valid chat session is required.", "Se requiere una sesión de chat válida.", "É necessária uma sessão de chat válida."),
+    conversationMessages: message("Conversation messages", "Mensajes de la conversación", "Mensagens da conversa"),
+    noMessages: message("No messages yet.", "Aún no hay mensajes.", "Ainda não há mensagens."),
+    you: message("You", "Tú", "Você"),
+    support: message("Support", "Soporte", "Suporte"),
+    messageLabel: message("Message", "Mensaje", "Mensagem"),
+    sending: message("Sending...", "Enviando...", "Enviando..."),
+    retrySend: message("Retry send", "Reintentar envío", "Tentar envio novamente"),
+    send: message("Send", "Enviar", "Enviar"),
+    webChat: message("Web chat", "Chat web", "Chat web"),
+    conversationNumber: message("Conversation #{id}", "Conversación #{id}", "Conversa nº {id}"),
+    visitorName: message("Visitor name", "Nombre del visitante", "Nome do visitante"),
+    createChatSession: message("Sign in before creating a chat session.", "Inicia sesión antes de crear una sesión de chat.", "Entre antes de criar uma sessão de chat."),
+    creating: message("Creating...", "Creando...", "Criando..."),
+    startChat: message("Start chat", "Iniciar chat", "Iniciar chat"),
+
+    calendarTitle: message("Calendar and schedule", "Agenda y calendario", "Agenda e calendário"),
+    calendarSubtitle: message("Appointments, visits and operational planning.", "Gestión de citas, visitas y planificación operativa.", "Gestão de compromissos, visitas e planejamento operacional."),
+    newAppointment: message("New appointment", "Nueva cita", "Novo compromisso"),
+    appointmentsLoading: message("Loading appointments...", "Cargando citas...", "Carregando compromissos..."),
+    month: message("Month", "Mes", "Mês"),
+    week: message("Week", "Semana", "Semana"),
+    weeklyView: message("Weekly view", "Vista semanal", "Visão semanal"),
+    today: message("Today", "Hoy", "Hoje"),
+    dayAppointments: message("Appointments for the day", "Citas del día", "Compromissos do dia"),
+    noDayAppointments: message("No appointments scheduled for this day.", "No hay citas programadas para este día.", "Não há compromissos agendados para este dia."),
+    selected: message("Selected", "Seleccionada", "Selecionado"),
+    cancelAppointment: message("Cancel appointment", "Cancelar cita", "Cancelar compromisso"),
+    confirmCancelAppointment: message("Cancel this appointment?", "¿Cancelar esta cita?", "Cancelar este compromisso?"),
+    appointmentSaveError: message("Unable to save the appointment.", "No se pudo guardar la cita.", "Não foi possível salvar o compromisso."),
+    appointmentCancelError: message("Unable to cancel the appointment.", "No se pudo cancelar la cita.", "Não foi possível cancelar o compromisso."),
+    notes: message("Notes", "Notas", "Notas"),
+    noNotes: message("No notes", "Sin notas", "Sem notas"),
+    editAppointment: message("Edit appointment", "Editar cita", "Editar compromisso"),
+    scheduleAppointment: message("Schedule new appointment", "Programar nueva cita", "Agendar novo compromisso"),
+    appointmentTitle: message("Appointment title", "Título de la cita", "Título do compromisso"),
+    appointmentTitleExample: message("E.g. Living room measurements", "Ej. Toma de medidas salón", "Ex. Medição da sala"),
+    date: message("Date", "Fecha", "Data"),
+    time: message("Time", "Hora", "Hora"),
+    durationMinutes: message("Duration (minutes)", "Duración (minutos)", "Duração (minutos)"),
+    client: message("Client", "Cliente", "Cliente"),
+    responsible: message("Responsible", "Responsable", "Responsável"),
+    selectClient: message("Select client", "Seleccionar cliente", "Selecionar cliente"),
+    selectResponsible: message("Select responsible person", "Seleccionar responsable", "Selecionar responsável"),
+    optionalJob: message("Job (optional)", "Trabajo (opcional)", "Trabalho (opcional)"),
+    noJob: message("No job", "Sin trabajo", "Sem trabalho"),
+    optionalService: message("Service (optional)", "Servicio (opcional)", "Serviço (opcional)"),
+    noService: message("No service", "Sin servicio", "Sem serviço"),
+    saveAppointment: message("Save appointment", "Guardar cita", "Salvar compromisso"),
+    scheduled: message("Scheduled", "Programada", "Agendado"),
+    confirmed: message("Confirmed", "Confirmada", "Confirmado"),
+    completed: message("Completed", "Completada", "Concluído"),
+    cancelled: message("Cancelled", "Cancelada", "Cancelado"),
+    noShow: message("No-show", "No asistió", "Não compareceu"),
+    openMenu: message("Open menu", "Abrir menú", "Abrir menu"),
+    checkingSubscription: message("Checking your subscription...", "Comprobando tu suscripción...", "Verificando sua assinatura..."),
+    subscriptionVerifyError: message("Unable to verify your subscription.", "No se pudo verificar tu suscripción.", "Não foi possível verificar sua assinatura."),
+    accessVerifyError: message("Unable to verify access.", "No se pudo verificar el acceso.", "Não foi possível verificar o acesso."),
+    notFound: message("Not found!", "No encontrado", "Não encontrado"),
+};
+
+export const supportedInterfaceLocales = ["en", "es", "pt"];
+
+export function validateInterfaceMessages(messages = interfaceMessages) {
+    const missing = [];
+    Object.entries(messages).forEach(([key, translations]) => {
+        supportedInterfaceLocales.forEach((locale) => {
+            if (typeof translations[locale] !== "string" || !translations[locale].trim()) {
+                missing.push(`${key}.${locale}`);
+            }
+        });
+    });
+    return missing;
+}
+
+export function interfaceText(locale) {
+    const selected = supportedInterfaceLocales.includes(locale) ? locale : "en";
+    return Object.fromEntries(
+        Object.entries(interfaceMessages).map(([key, translations]) => [key, translations[selected]])
+    );
+}
diff --git a/src/front/i18n/settings.mjs b/src/front/i18n/settings.mjs
new file mode 100644
index 0000000..dccdafe
--- /dev/null
+++ b/src/front/i18n/settings.mjs
@@ -0,0 +1,71 @@
+export const settingsMessages = {
+    en: {
+        title: "Settings", subtitle: "Manage your company, workspace and connected services.",
+        company: "Company", appearance: "Appearance", users: "Users and permissions",
+        integrations: "Integrations", ai: "AI and knowledge", security: "Security",
+        companyIntro: "The information shown to your team and customers.", name: "Company name",
+        email: "Company email", phone: "Phone", timezone: "Timezone", colour: "Brand colour",
+        saveCompany: "Save company", appearanceIntro: "Choose the default experience for this workspace.",
+        theme: "Theme", system: "Use system", light: "Light", dark: "Dark", language: "Language",
+        density: "Interface density", comfortable: "Comfortable", compact: "Compact",
+        savePreferences: "Save preferences", usersIntro: "Manage who can access this company and what they can do.",
+        activeMembers: "active members", openTeam: "Manage team", integrationsIntro: "Configure channels without exposing private credentials in the browser.",
+        enabled: "Enabled", saveIntegration: "Save integration", emailChannel: "Email",
+        webChat: "Web chat", whatsapp: "WhatsApp", connected: "Configured", disconnected: "Disconnected",
+        smtpHost: "SMTP host", smtpPort: "SMTP port", encryption: "Encryption", sender: "Sender address",
+        displayName: "Display name", welcome: "Welcome message", accent: "Accent colour", whatsappNumber: "International number",
+        aiIntro: "Keep agents connected only to approved company knowledge.", activeAgents: "Active agents",
+        documents: "Documents", ready: "ready", manageAgents: "Manage agents", manageKnowledge: "Manage knowledge",
+        serviceReady: "AI service configured", serviceMissing: "AI service needs server configuration",
+        securityIntro: "Review account activity and close sessions you no longer use.", activeSessions: "Active sessions",
+        lastLogin: "Last login", never: "Not available", resetPassword: "Change password", closeSessions: "Close other sessions",
+        readOnly: "Your role can view these settings. An administrator must save workspace changes.",
+        loading: "Loading settings...", retry: "Try again", saved: "Changes saved.",
+    },
+    es: {
+        title: "Configuración", subtitle: "Gestiona tu empresa, el espacio de trabajo y los servicios conectados.",
+        company: "Empresa", appearance: "Apariencia", users: "Usuarios y permisos",
+        integrations: "Integraciones", ai: "IA y conocimiento", security: "Seguridad",
+        companyIntro: "La información que verá tu equipo y tus clientes.", name: "Nombre de la empresa",
+        email: "Email de la empresa", phone: "Teléfono", timezone: "Zona horaria", colour: "Color de marca",
+        saveCompany: "Guardar empresa", appearanceIntro: "Elige la experiencia predeterminada del espacio de trabajo.",
+        theme: "Tema", system: "Usar el sistema", light: "Claro", dark: "Oscuro", language: "Idioma",
+        density: "Densidad de la interfaz", comfortable: "Cómoda", compact: "Compacta",
+        savePreferences: "Guardar preferencias", usersIntro: "Gestiona quién accede a la empresa y qué puede hacer.",
+        activeMembers: "miembros activos", openTeam: "Gestionar equipo", integrationsIntro: "Configura canales sin exponer credenciales privadas en el navegador.",
+        enabled: "Activada", saveIntegration: "Guardar integración", emailChannel: "Email",
+        webChat: "Chat web", whatsapp: "WhatsApp", connected: "Configurada", disconnected: "Desconectada",
+        smtpHost: "Servidor SMTP", smtpPort: "Puerto SMTP", encryption: "Cifrado", sender: "Dirección remitente",
+        displayName: "Nombre visible", welcome: "Mensaje de bienvenida", accent: "Color de acento", whatsappNumber: "Número internacional",
+        aiIntro: "Mantén los agentes conectados solamente al conocimiento autorizado de la empresa.", activeAgents: "Agentes activos",
+        documents: "Documentos", ready: "listos", manageAgents: "Gestionar agentes", manageKnowledge: "Gestionar conocimiento",
+        serviceReady: "Servicio de IA configurado", serviceMissing: "El servicio de IA necesita configuración en el servidor",
+        securityIntro: "Revisa la actividad de la cuenta y cierra sesiones que ya no utilizas.", activeSessions: "Sesiones activas",
+        lastLogin: "Último acceso", never: "No disponible", resetPassword: "Cambiar contraseña", closeSessions: "Cerrar otras sesiones",
+        readOnly: "Tu rol puede consultar estos ajustes. Un administrador debe guardar los cambios del espacio.",
+        loading: "Cargando configuración...", retry: "Reintentar", saved: "Cambios guardados.",
+    },
+    pt: {
+        title: "Configurações", subtitle: "Gerencie sua empresa, o espaço de trabalho e os serviços conectados.",
+        company: "Empresa", appearance: "Aparência", users: "Usuários e permissões",
+        integrations: "Integrações", ai: "IA e conhecimento", security: "Segurança",
+        companyIntro: "As informações exibidas para sua equipe e seus clientes.", name: "Nome da empresa",
+        email: "Email da empresa", phone: "Telefone", timezone: "Fuso horário", colour: "Cor da marca",
+        saveCompany: "Salvar empresa", appearanceIntro: "Escolha a experiência padrão deste espaço de trabalho.",
+        theme: "Tema", system: "Usar o sistema", light: "Claro", dark: "Escuro", language: "Idioma",
+        density: "Densidade da interface", comfortable: "Confortável", compact: "Compacta",
+        savePreferences: "Salvar preferências", usersIntro: "Gerencie quem acessa esta empresa e o que pode fazer.",
+        activeMembers: "membros ativos", openTeam: "Gerenciar equipe", integrationsIntro: "Configure canais sem expor credenciais privadas no navegador.",
+        enabled: "Ativada", saveIntegration: "Salvar integração", emailChannel: "Email",
+        webChat: "Chat web", whatsapp: "WhatsApp", connected: "Configurada", disconnected: "Desconectada",
+        smtpHost: "Servidor SMTP", smtpPort: "Porta SMTP", encryption: "Criptografia", sender: "Endereço remetente",
+        displayName: "Nome visível", welcome: "Mensagem de boas-vindas", accent: "Cor de destaque", whatsappNumber: "Número internacional",
+        aiIntro: "Mantenha os agentes conectados apenas ao conhecimento autorizado da empresa.", activeAgents: "Agentes ativos",
+        documents: "Documentos", ready: "prontos", manageAgents: "Gerenciar agentes", manageKnowledge: "Gerenciar conhecimento",
+        serviceReady: "Serviço de IA configurado", serviceMissing: "O serviço de IA precisa de configuração no servidor",
+        securityIntro: "Revise a atividade da conta e encerre sessões que não usa mais.", activeSessions: "Sessões ativas",
+        lastLogin: "Último acesso", never: "Não disponível", resetPassword: "Alterar senha", closeSessions: "Encerrar outras sessões",
+        readOnly: "Sua função pode consultar estas configurações. Um administrador deve salvar alterações do espaço.",
+        loading: "Carregando configurações...", retry: "Tentar novamente", saved: "Alterações salvas.",
+    },
+};
diff --git a/src/front/pages/AcceptInvitation.jsx b/src/front/pages/AcceptInvitation.jsx
index 9294e51..458c0ba 100644
--- a/src/front/pages/AcceptInvitation.jsx
+++ b/src/front/pages/AcceptInvitation.jsx
@@ -1,8 +1,11 @@
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import "../styles/members.css";
+import { useLanguage } from "../context/LanguageContext";
+import { WorkspacePreferences } from "../components/WorkspacePreferences";
 
 export const AcceptInvitation = () => {
+    const { ui } = useLanguage();
     const [invitationToken] = useState(() => new URLSearchParams(window.location.hash.slice(1)).get("token") || "");
     const [existing, setExisting] = useState(false);
     const [busy, setBusy] = useState(false);
@@ -20,7 +23,7 @@ export const AcceptInvitation = () => {
                 body: JSON.stringify(body),
             });
             const data = await response.json();
-            if (!response.ok) throw new Error(data.message || "No se pudo aceptar la invitación.");
+            if (!response.ok) throw new Error(data.message || ui.invitationAcceptError);
             return data;
         };
         try {
@@ -32,7 +35,7 @@ export const AcceptInvitation = () => {
                     await post("/logout", {}, session.token).catch(() => {});
                 }
             } else {
-                if (fields.password !== fields.password_confirmation) throw new Error("Las contraseñas no coinciden.");
+                if (fields.password !== fields.password_confirmation) throw new Error(ui.passwordMismatch);
                 await post("/members/invitations/register", { ...fields, token: invitationToken });
             }
             window.history.replaceState(null, "", window.location.pathname);
@@ -40,21 +43,21 @@ export const AcceptInvitation = () => {
         } catch (failure) { setError(failure.message); }
         finally { setBusy(false); }
     };
-    return <main className="invite-page"><section className="invite-panel">
-        <p className="text-muted">CLIENTFLOW</p><h1>Únete a tu equipo</h1>
-        {done ? <><p role="status">Invitación aceptada. Ya puedes iniciar sesión.</p><Link to="/login">Iniciar sesión</Link></> : !invitationToken ? <p role="alert">El enlace no es válido. Solicita una invitación a tu administrador.</p> : <>
-            <p>{existing ? "Accede con la cuenta del correo invitado." : "Crea tu cuenta para aceptar la invitación."}</p>
+    return <main className="invite-page"><div className="position-fixed top-0 end-0 p-3"><WorkspacePreferences /></div><section className="invite-panel">
+        <p className="text-muted">CLIENTFLOW</p><h1>{ui.invitationTitle}</h1>
+        {done ? <><p role="status">{ui.invitationAccepted}</p><Link to="/login">{ui.signIn}</Link></> : !invitationToken ? <p role="alert">{ui.invitationInvalid}</p> : <>
+            <p>{existing ? ui.invitationExisting : ui.invitationNew}</p>
             <form key={String(existing)} onSubmit={submit}>
-                {existing ? <label>Correo electrónico<input name="email" type="email" autoComplete="username" required disabled={busy} /></label> : <>
-                    <label>Nombre<input name="first_name" autoComplete="given-name" maxLength={100} required disabled={busy} /></label>
-                    <label>Apellidos<input name="last_name" autoComplete="family-name" maxLength={100} required disabled={busy} /></label>
+                {existing ? <label>{ui.email}<input name="email" type="email" autoComplete="username" required disabled={busy} /></label> : <>
+                    <label>{ui.firstName}<input name="first_name" autoComplete="given-name" maxLength={100} required disabled={busy} /></label>
+                    <label>{ui.lastName}<input name="last_name" autoComplete="family-name" maxLength={100} required disabled={busy} /></label>
                 </>}
-                <label>Contraseña<input name="password" type="password" autoComplete={existing ? "current-password" : "new-password"} minLength={12} maxLength={128} required disabled={busy} /></label>
-                {!existing && <label>Repite la contraseña<input name="password_confirmation" type="password" autoComplete="new-password" minLength={12} maxLength={128} required disabled={busy} /></label>}
+                <label>{ui.password}<input name="password" type="password" autoComplete={existing ? "current-password" : "new-password"} minLength={12} maxLength={128} required disabled={busy} /></label>
+                {!existing && <label>{ui.repeatPassword}<input name="password_confirmation" type="password" autoComplete="new-password" minLength={12} maxLength={128} required disabled={busy} /></label>}
                 {error && <p className="text-danger" role="alert">{error}</p>}
-                <button className="team-primary" disabled={busy}>{busy ? "Procesando..." : "Aceptar invitación"}</button>
+                <button className="team-primary" disabled={busy}>{busy ? ui.processing : ui.acceptInvitation}</button>
             </form>
-            <button className="invite-toggle" disabled={busy} onClick={() => { setExisting(!existing); setError(""); }}>{existing ? "Necesito crear una cuenta" : "Ya tengo una cuenta"}</button>
+            <button className="invite-toggle" disabled={busy} onClick={() => { setExisting(!existing); setError(""); }}>{existing ? ui.needAccount : ui.existingAccount}</button>
         </>}
     </section></main>;
 };
diff --git a/src/front/pages/Agenda.jsx b/src/front/pages/Agenda.jsx
index 5474f20..7f1fa45 100644
--- a/src/front/pages/Agenda.jsx
+++ b/src/front/pages/Agenda.jsx
@@ -3,13 +3,15 @@ import { useLocation } from "react-router-dom";
 import { dateKey, parseDate } from "../utils/calendar.mjs";
 import { getAppointmentContext, getAppointmentOptions, getAppointments,
     createAppointment, updateAppointment, cancelAppointment } from "../services/appointmentService";
+import { useLanguage } from "../context/LanguageContext";
 
 const localTime = (date) => `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
 const localStamp = (value) => { const date = new Date(value); return `${dateKey(date)}T${localTime(date)}`; };
-const statusLabels = { scheduled: "Programada", confirmed: "Confirmada", completed: "Completada", cancelled: "Cancelada", no_show: "No asistió" };
 const statusColors = { scheduled: "#635bff", confirmed: "#198754", completed: "#495057", cancelled: "#6c757d", no_show: "#a64b00" };
 
 export const Agenda = () => {
+    const { locale, ui } = useLanguage();
+    const statusLabels = { scheduled: ui.scheduled, confirmed: ui.confirmed, completed: ui.completed, cancelled: ui.cancelled, no_show: ui.noShow };
     const token = localStorage.getItem("access_token");
     const [company, setCompany] = useState(null);
     const [choices, setChoices] = useState({ clients: [], members: [], jobs: [], services: [] });
@@ -37,7 +39,7 @@ export const Agenda = () => {
             try {
                 const account = await getAppointmentContext(token, controller.signal);
                 const current = account.companies?.[0];
-                if (!current) throw new Error("No hay una empresa disponible.");
+                if (!current) throw new Error(ui.noCompany);
                 const opts = { token, companyId: current.id, signal: controller.signal };
                 const [data, lists] = await Promise.all([getAppointments(opts), getAppointmentOptions(opts)]);
                 if (controller.signal.aborted) return;
@@ -46,12 +48,12 @@ export const Agenda = () => {
                     duration: Math.round((new Date(item.ends_at) - new Date(item.starts_at)) / 60000),
                     starts_at: localStamp(item.starts_at), ends_at: localStamp(item.ends_at) })));
             } catch (error) {
-                if (!controller.signal.aborted) setErrorMsg(error instanceof TypeError ? "No se pudo conectar con la API. Comprueba la configuración del servidor." : error.message);
+                if (!controller.signal.aborted) setErrorMsg(error instanceof TypeError ? ui.connectionError : error.message);
             } finally { if (!controller.signal.aborted) setLoading(false); }
         };
         load();
         return () => controller.abort();
-    }, [token, revision]);
+    }, [token, revision, ui.connectionError, ui.noCompany]);
 
     useEffect(() => {
         const id = new URLSearchParams(location.search).get("appointmentId");
@@ -76,7 +78,8 @@ export const Agenda = () => {
     };
     const year = currentDate.getFullYear();
     const month = currentDate.getMonth();
-    const monthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
+    const monthName = new Intl.DateTimeFormat(locale, { month: "long" }).format(new Date(year, month, 1));
+    const weekdayNames = Array.from({ length: 7 }, (_, index) => new Intl.DateTimeFormat(locale, { weekday: "short" }).format(new Date(2024, 0, index + 1)));
     const move = (amount) => {
         if (currentView === "month") setCurrentDate(new Date(year, month + amount, 1));
         else { const date = new Date(currentDate); date.setDate(date.getDate() + amount * 7); setCurrentDate(date); }
@@ -99,14 +102,14 @@ export const Agenda = () => {
             if (editingId) await updateAppointment(options, editingId, body);
             else await createAppointment(options, body);
             setShowModal(false); setRevision(value => value + 1);
-        } catch (error) { setFormError(error.message || "No se pudo guardar la cita."); }
+        } catch (error) { setFormError(error.message || ui.appointmentSaveError); }
         finally { setBusy(false); }
     };
     const handleDeleteAppointment = async (id) => {
-        if (busy || !window.confirm("¿Cancelar esta cita?")) return;
+        if (busy || !window.confirm(ui.confirmCancelAppointment)) return;
         setBusy(true);
         try { await cancelAppointment(options, id); setRevision(value => value + 1); }
-        catch (error) { setErrorMsg(error.message || "No se pudo cancelar la cita."); }
+        catch (error) { setErrorMsg(error.message || ui.appointmentCancelError); }
         finally { setBusy(false); }
     };
     const firstDayIndex = new Date(year, month, 1).getDay();
@@ -123,8 +126,8 @@ export const Agenda = () => {
             {/* Cabecera general */}
             <div className="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
                 <div>
-                    <h2 className="fw-bold mb-1" style={{ color: "#212529" }}>Agenda y Calendario</h2>
-                    <p className="text-secondary small mb-0">Gestión de citas, visitas y planificación operativa.</p>
+                    <h2 className="fw-bold mb-1" style={{ color: "#212529" }}>{ui.calendarTitle}</h2>
+                    <p className="text-secondary small mb-0">{ui.calendarSubtitle}</p>
                 </div>
                 <div className="d-flex align-items-center gap-2">
                     <button
@@ -133,13 +136,13 @@ export const Agenda = () => {
                         disabled={loading || busy || !company}
                         onClick={openCreate}
                     >
-                        <i className="fa-solid fa-plus"></i> Nueva Cita
+                        <i className="fa-solid fa-plus"></i> {ui.newAppointment}
                     </button>
                 </div>
             </div>
 
-            {errorMsg && <div className="alert alert-danger">{errorMsg} <button className="btn btn-sm btn-outline-danger" onClick={() => setRevision(value => value + 1)}>Reintentar</button></div>}
-            {loading && <p className="text-muted">Cargando citas...</p>}
+            {errorMsg && <div className="alert alert-danger">{errorMsg} <button className="btn btn-sm btn-outline-danger" onClick={() => setRevision(value => value + 1)}>{ui.retry}</button></div>}
+            {loading && <p className="text-muted">{ui.appointmentsLoading}</p>}
 
             <div className="row g-4">
                 {/* Columna Izquierda: Calendario */}
@@ -150,12 +153,12 @@ export const Agenda = () => {
                             <div className="d-flex align-items-center gap-2">
                                 <div className="btn-group btn-group-sm">
                                     <button className="btn btn-outline-secondary border px-2 shadow-sm" onClick={handlePrev}><i className="fa-solid fa-chevron-left"></i></button>
-                                    <button className="btn btn-outline-secondary border px-2 fw-semibold shadow-sm" onClick={handleToday}>Hoy</button>
+                                    <button className="btn btn-outline-secondary border px-2 fw-semibold shadow-sm" onClick={handleToday}>{ui.today}</button>
                                     <button className="btn btn-outline-secondary border px-2 shadow-sm" onClick={handleNext}><i className="fa-solid fa-chevron-right"></i></button>
                                 </div>
                                 <h5 className="fw-bold m-0 ms-2 text-dark">
-                                    {currentView === 'month' && `${monthNames[month]} ${year}`}
-                                    {currentView === 'week' && `Vista Semanal`}
+                                    {currentView === 'month' && `${monthName} ${year}`}
+                                    {currentView === 'week' && ui.weeklyView}
                                 </h5>
                             </div>
 
@@ -165,14 +168,14 @@ export const Agenda = () => {
                                     onClick={() => setCurrentView('month')}
                                     style={currentView === 'month' ? { backgroundColor: "#635bff", border: "none" } : {}}
                                 >
-                                    Mes
+                                    {ui.month}
                                 </button>
                                 <button
                                     className={`btn ${currentView === 'week' ? 'btn-primary' : 'btn-outline-secondary border shadow-sm'}`}
                                     onClick={() => setCurrentView('week')}
                                     style={currentView === 'week' ? { backgroundColor: "#635bff", border: "none" } : {}}
                                 >
-                                    Semana
+                                    {ui.week}
                                 </button>
                             </div>
                         </div>
@@ -182,13 +185,7 @@ export const Agenda = () => {
                                 <div>
                                     {/* Días de la semana */}
                                     <div className="row text-center fw-bold mb-2 py-2 rounded-3 mx-0 bg-light text-dark" style={{ fontSize: "0.8rem" }}>
-                                        <div className="col">Lun</div>
-                                        <div className="col">Mar</div>
-                                        <div className="col">Mié</div>
-                                        <div className="col">Jue</div>
-                                        <div className="col">Vie</div>
-                                        <div className="col">Sáb</div>
-                                        <div className="col">Dom</div>
+                                        {weekdayNames.map((name) => <div className="col" key={name}>{name}</div>)}
                                     </div>
                                     <div className="d-flex flex-column gap-1">
                                         {(() => {
@@ -316,7 +313,7 @@ export const Agenda = () => {
                     <div className="card border-0 shadow-sm h-100 rounded-4 overflow-hidden bg-white">
                         <div className="card-header py-3 border-0 d-flex justify-content-between align-items-center bg-white">
                             <h5 className="fw-bold m-0 text-dark">
-                                <i className="fa-solid fa-calendar-day me-2" style={{ color: "#635bff" }}></i> Citas del Día
+                                <i className="fa-solid fa-calendar-day me-2" style={{ color: "#635bff" }}></i> {ui.dayAppointments}
                             </h5>
                             <span className="badge text-white px-2.5 py-1.5 rounded-pill shadow-xs" style={{ backgroundColor: "#635bff" }}>{selectedDateStr}</span>
                         </div>
@@ -324,7 +321,7 @@ export const Agenda = () => {
                             {selectedDayAppointments.length === 0 ? (
                                 <div className="text-center py-5">
                                     <i className="fa-solid fa-calendar-xmark fa-2x text-muted mb-3 opacity-50"></i>
-                                    <p className="text-secondary small mb-0">No hay citas programadas para este día.</p>
+                                    <p className="text-secondary small mb-0">{ui.noDayAppointments}</p>
                                 </div>
                             ) : (
                                 <div className="d-flex flex-column gap-3">
@@ -345,15 +342,15 @@ export const Agenda = () => {
                                                     <div>
                                                         <span className="badge text-white mb-1" style={{ fontSize: "0.7rem", backgroundColor: statusColors[app.status] || "#495057" }}>{statusLabels[app.status] || app.status}</span>
                                                         <h6 className="fw-bold mb-0 text-dark">
-                                                            {app.title} {isHighlighted && <span className="text-success small ms-1">(Seleccionada)</span>}
+                                                            {app.title} {isHighlighted && <span className="text-success small ms-1">({ui.selected})</span>}
                                                         </h6>
                                                     </div>
                                                     <div className="d-flex align-items-center gap-2">
                                                         <span className="fw-bold small" style={{ color: "#635bff" }}><i className="fa-solid fa-clock me-1"></i>{timeStr}</span>
-                                                        <button className="btn btn-sm btn-outline-primary" disabled={busy} onClick={() => openEdit(app)}>Editar</button>
+                                                        <button className="btn btn-sm btn-outline-primary" disabled={busy} onClick={() => openEdit(app)}>{ui.edit}</button>
                                                         <button
                                                             className="btn btn-outline-danger btn-sm border-0 p-1"
-                                                            title="Cancelar cita"
+                                                            title={ui.cancelAppointment}
                                                             disabled={busy || app.status === "cancelled"}
                                                             onClick={() => handleDeleteAppointment(app.id)}
                                                         >
@@ -365,7 +362,7 @@ export const Agenda = () => {
                                                 <div className="small text-secondary mb-0">
                                                     <p className="mb-1">
                                                         <i className="fa-solid fa-note-sticky me-2 text-dark opacity-75"></i>
-                                                        <strong>Notas:</strong> {app.notes || "Sin notas"}
+                                                        <strong>{ui.notes}:</strong> {app.notes || ui.noNotes}
                                                     </p>
                                                 </div>
                                             </div>
@@ -384,25 +381,25 @@ export const Agenda = () => {
                     <div className="modal-dialog modal-dialog-centered">
                         <div className="modal-content border-0 shadow-lg rounded-4 bg-white text-dark">
                             <div className="modal-header border-0 pb-0">
-                                <h5 className="fw-bold text-dark">{editingId ? "Editar cita" : "Programar Nueva Cita"}</h5>
+                                <h5 className="fw-bold text-dark">{editingId ? ui.editAppointment : ui.scheduleAppointment}</h5>
                                 <button type="button" className="btn-close shadow-none" onClick={() => setShowModal(false)}></button>
                             </div>
                             <form onSubmit={handleCreateAppointment}>
                                 <div className="modal-body">
                                     <div className="mb-3">
-                                        <label className="form-label small fw-semibold text-dark">Título de la Cita</label>
+                                        <label className="form-label small fw-semibold text-dark">{ui.appointmentTitle}</label>
                                         <input
                                             type="text"
                                             className="form-control shadow-none rounded-3 border bg-light text-dark"
                                             required
                                             value={newApp.title}
                                             onChange={e => setNewApp({ ...newApp, title: e.target.value })}
-                                            placeholder="Ej. Toma de medidas salón"
+                                            placeholder={ui.appointmentTitleExample}
                                         />
                                     </div>
                                     <div className="row g-2 mb-3">
                                         <div className="col">
-                                            <label className="form-label small fw-semibold text-dark">Fecha</label>
+                                            <label className="form-label small fw-semibold text-dark">{ui.date}</label>
                                             <input
                                                 type="date"
                                                 className="form-control border shadow-none rounded-3 bg-white text-dark"
@@ -413,7 +410,7 @@ export const Agenda = () => {
                                             />
                                         </div>
                                         <div className="col">
-                                            <label className="form-label small fw-semibold text-dark">Hora</label>
+                                            <label className="form-label small fw-semibold text-dark">{ui.time}</label>
                                             <input
                                                 type="time"
                                                 className="form-control border shadow-none rounded-3 bg-white text-dark"
@@ -424,18 +421,18 @@ export const Agenda = () => {
                                             />
                                         </div>
                                     </div>
-                                    <label className="form-label d-block">Duración (minutos)<input className="form-control" type="number" min="1" max="10080" required value={newApp.duration} onChange={event => setNewApp({ ...newApp, duration: event.target.value })} /></label>
-                                    <label className="form-label d-block">Cliente<select className="form-select" required value={newApp.clientId} onChange={event => setNewApp({ ...newApp, clientId: event.target.value, jobId: "" })}><option value="">Seleccionar cliente</option>{choices.clients.map(item => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>
-                                    <label className="form-label d-block">Responsable<select className="form-select" required value={newApp.assignedId} onChange={event => setNewApp({ ...newApp, assignedId: event.target.value })}><option value="">Seleccionar responsable</option>{choices.members.map(item => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>
-                                    <label className="form-label d-block">Trabajo (opcional)<select className="form-select" value={newApp.jobId} onChange={event => setNewApp({ ...newApp, jobId: event.target.value })}><option value="">Sin trabajo</option>{choices.jobs.filter(item => item.client_id === Number(newApp.clientId)).map(item => <option key={item.id} value={item.id}>{item.title}</option>)}</select></label>
-                                    <label className="form-label d-block">Servicio (opcional)<select className="form-select" value={newApp.serviceId} onChange={event => setNewApp({ ...newApp, serviceId: event.target.value })}><option value="">Sin servicio</option>{choices.services.map(item => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>
-                                    <label className="form-label d-block">Estado<select className="form-select" value={newApp.status} onChange={event => setNewApp({ ...newApp, status: event.target.value })}>{Object.entries(statusLabels).map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select></label>
-                                    <label className="form-label d-block">Notas<textarea className="form-control" maxLength={10000} value={newApp.notes} onChange={event => setNewApp({ ...newApp, notes: event.target.value })} /></label>
+                                    <label className="form-label d-block">{ui.durationMinutes}<input className="form-control" type="number" min="1" max="10080" required value={newApp.duration} onChange={event => setNewApp({ ...newApp, duration: event.target.value })} /></label>
+                                    <label className="form-label d-block">{ui.client}<select className="form-select" required value={newApp.clientId} onChange={event => setNewApp({ ...newApp, clientId: event.target.value, jobId: "" })}><option value="">{ui.selectClient}</option>{choices.clients.map(item => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>
+                                    <label className="form-label d-block">{ui.responsible}<select className="form-select" required value={newApp.assignedId} onChange={event => setNewApp({ ...newApp, assignedId: event.target.value })}><option value="">{ui.selectResponsible}</option>{choices.members.map(item => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>
+                                    <label className="form-label d-block">{ui.optionalJob}<select className="form-select" value={newApp.jobId} onChange={event => setNewApp({ ...newApp, jobId: event.target.value })}><option value="">{ui.noJob}</option>{choices.jobs.filter(item => item.client_id === Number(newApp.clientId)).map(item => <option key={item.id} value={item.id}>{item.title}</option>)}</select></label>
+                                    <label className="form-label d-block">{ui.optionalService}<select className="form-select" value={newApp.serviceId} onChange={event => setNewApp({ ...newApp, serviceId: event.target.value })}><option value="">{ui.noService}</option>{choices.services.map(item => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>
+                                    <label className="form-label d-block">{ui.status}<select className="form-select" value={newApp.status} onChange={event => setNewApp({ ...newApp, status: event.target.value })}>{Object.entries(statusLabels).map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select></label>
+                                    <label className="form-label d-block">{ui.notes}<textarea className="form-control" maxLength={10000} value={newApp.notes} onChange={event => setNewApp({ ...newApp, notes: event.target.value })} /></label>
                                     {formError && <p className="text-danger" role="alert">{formError}</p>}
                                 </div>
                                 <div className="modal-footer border-0 pt-0">
-                                    <button type="button" className="btn btn-outline-secondary btn-sm rounded-3 px-3" onClick={() => setShowModal(false)}>Cancelar</button>
-                                    <button type="submit" disabled={busy} className="btn btn-primary btn-sm px-4 rounded-3" style={{ backgroundColor: "#635bff", border: "none" }}>Guardar Cita</button>
+                                    <button type="button" className="btn btn-outline-secondary btn-sm rounded-3 px-3" onClick={() => setShowModal(false)}>{ui.cancel}</button>
+                                    <button type="submit" disabled={busy} className="btn btn-primary btn-sm px-4 rounded-3" style={{ backgroundColor: "#635bff", border: "none" }}>{ui.saveAppointment}</button>
                                 </div>
                             </form>
                         </div>
diff --git a/src/front/pages/Agents.jsx b/src/front/pages/Agents.jsx
index 695efb0..7249927 100644
--- a/src/front/pages/Agents.jsx
+++ b/src/front/pages/Agents.jsx
@@ -1,13 +1,15 @@
 import {useEffect, useState} from 'react';
 import {aiRequest} from '../services/aiService';
 import './Agents.css';
+import {useLanguage} from '../context/LanguageContext';
 
 export function Agents() {
+    const {ui} = useLanguage();
     const token = localStorage.getItem('access_token');
     const [company, setCompany] = useState(null);
     const [agents, setAgents] = useState([]);
     const [documents, setDocuments] = useState([]);
-    const empty = {name:'', purpose:'Atención al cliente', main_instruction:'Responde con claridad usando únicamente las fuentes de la empresa.', document_ids:[]};
+    const empty = {name:'', purpose:ui.defaultAgentPurpose, main_instruction:ui.defaultAgentInstruction, document_ids:[]};
     const [form, setForm] = useState(empty);
     const [error, setError] = useState('');
     const [busy, setBusy] = useState(false);
@@ -17,7 +19,7 @@ export function Agents() {
         (async()=>{
             const me=await aiRequest('/me',{token,signal:controller.signal});
             const c=me.companies?.[0];
-            if(!c) throw new Error('No hay una empresa disponible.');
+            if(!c) throw new Error(ui.noCompany);
             const options={token,companyId:c.id,signal:controller.signal};
             const a=await aiRequest('/ai/agents',options);
             const docs=[];
@@ -31,7 +33,7 @@ export function Agents() {
             if(!controller.signal.aborted) {setCompany(c);setAgents(a.agents);setDocuments(docs.filter(d=>d.ingestion_status==='ready'));}
         })().catch(e=>{if(!controller.signal.aborted)setError(e.message);});
         return ()=>controller.abort();
-    },[token,revision]);
+    },[token,revision,ui.noCompany]);
     async function save(e) {
         e.preventDefault();setBusy(true);setError('');
         try {await aiRequest('/ai/agents',{token,companyId:company.id},form);setForm(empty);setRevision(v=>v+1);}
@@ -39,14 +41,14 @@ export function Agents() {
         finally {setBusy(false);}
     }
     const canManage=company && ['owner','admin','manager'].includes(company.role);
-    return <div className="agents-page container-fluid"><h1>Agentes IA</h1><p>Configura las instrucciones y el conocimiento de tu empresa. Todas las respuestas requieren revisión humana.</p>
+    return <div className="agents-page container-fluid"><h1>{ui.agentsTitle}</h1><p>{ui.agentsSubtitle}</p>
         {error && <p role="alert" className="alert alert-danger">{error}</p>}
-        <div className="row g-4"><div className="col-md-5"><h2>Agentes disponibles</h2>{agents.map(a=><div className="card p-3 mb-2" key={a.id}><strong>{a.name}</strong><p>{a.purpose}</p>{canManage && <button className="btn btn-outline-primary" onClick={()=>setForm({id:a.id,name:a.name,purpose:a.purpose,main_instruction:a.main_instruction,document_ids:a.document_ids})}>Editar configuración</button>}</div>)}</div>
-        {canManage && <form className="col-md-7" onSubmit={save}><h2>{form.id?'Editar agente':'Crear agente'}</h2>
-            <label className="d-block mb-2">Nombre<input className="form-control" required maxLength={120} value={form.name} onChange={e=>setForm({...form,name:e.target.value})}/></label>
-            <label className="d-block mb-2">Función<input className="form-control" required maxLength={120} value={form.purpose} onChange={e=>setForm({...form,purpose:e.target.value})}/></label>
-            <label className="d-block mb-2">Instrucciones<textarea className="form-control" required maxLength={1500} rows={5} value={form.main_instruction} onChange={e=>setForm({...form,main_instruction:e.target.value})}/></label>
-            <fieldset><legend>Documentos autorizados</legend>{!documents.length && <p>Sube y procesa documentos en Conocimiento primero.</p>}{documents.map(d=><label className="d-block" key={d.id}><input type="checkbox" checked={form.document_ids.includes(d.id)} onChange={e=>setForm({...form,document_ids:e.target.checked?[...form.document_ids,d.id]:form.document_ids.filter(id=>id!==d.id)})}/> {d.title}</label>)}</fieldset>
-            <button className="btn btn-primary mt-3" disabled={busy}>{busy?'Guardando…':'Guardar agente'}</button>
+        <div className="row g-4"><div className="col-md-5"><h2>{ui.availableAgents}</h2>{agents.map(a=><div className="card p-3 mb-2" key={a.id}><strong>{a.name}</strong><p>{a.purpose}</p>{canManage && <button className="btn btn-outline-primary" onClick={()=>setForm({id:a.id,name:a.name,purpose:a.purpose,main_instruction:a.main_instruction,document_ids:a.document_ids})}>{ui.editConfiguration}</button>}</div>)}</div>
+        {canManage && <form className="col-md-7" onSubmit={save}><h2>{form.id?ui.editAgent:ui.createAgent}</h2>
+            <label className="d-block mb-2">{ui.name}<input className="form-control" required maxLength={120} value={form.name} onChange={e=>setForm({...form,name:e.target.value})}/></label>
+            <label className="d-block mb-2">{ui.purpose}<input className="form-control" required maxLength={120} value={form.purpose} onChange={e=>setForm({...form,purpose:e.target.value})}/></label>
+            <label className="d-block mb-2">{ui.instructions}<textarea className="form-control" required maxLength={1500} rows={5} value={form.main_instruction} onChange={e=>setForm({...form,main_instruction:e.target.value})}/></label>
+            <fieldset><legend>{ui.authorizedDocuments}</legend>{!documents.length && <p>{ui.uploadKnowledgeFirst}</p>}{documents.map(d=><label className="d-block" key={d.id}><input type="checkbox" checked={form.document_ids.includes(d.id)} onChange={e=>setForm({...form,document_ids:e.target.checked?[...form.document_ids,d.id]:form.document_ids.filter(id=>id!==d.id)})}/> {d.title}</label>)}</fieldset>
+            <button className="btn btn-primary mt-3" disabled={busy}>{busy?ui.saving:ui.saveAgent}</button>
         </form>}</div></div>;
 }
diff --git a/src/front/pages/ClientDetail.jsx b/src/front/pages/ClientDetail.jsx
index 5f79396..29d170a 100644
--- a/src/front/pages/ClientDetail.jsx
+++ b/src/front/pages/ClientDetail.jsx
@@ -1,9 +1,11 @@
 import { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import { clientService } from "../services/clientService";
+import { useLanguage } from "../context/LanguageContext";
 
 
 export const ClientDetail = () => {
+    const { locale, ui } = useLanguage();
     const { id } = useParams();
 
     const [client, setClient] = useState(null);
@@ -29,12 +31,12 @@ export const ClientDetail = () => {
                     },
                 });
 
-                if (!response.ok) throw new Error("Unable to load your account.");
+                if (!response.ok) throw new Error(ui.accountLoadError);
                 const account = await response.json();
                 const current = account.companies?.[0];
 
                 if (!current) {
-                    throw new Error("No se encontró una empresa activa.");
+                    throw new Error(ui.noCompany);
                 }
 
                 const options = {
@@ -76,7 +78,7 @@ export const ClientDetail = () => {
         };
 
         loadClient();
-    }, [id]);
+    }, [id, ui.accountLoadError, ui.noCompany]);
 
     if (loading) {
         return <div className="p-4">Cargando cliente...</div>;
@@ -162,7 +164,7 @@ export const ClientDetail = () => {
                             </h5>
                             <span className="badge bg-primary text-white px-2 py-1">
                                 Due: {nextAction?.due_at
-                                    ? new Date(nextAction.due_at).toLocaleDateString()
+                                    ? new Date(nextAction.due_at).toLocaleDateString(locale)
                                     : "Sin fecha"}
                             </span>
                         </div>
@@ -221,7 +223,7 @@ export const ClientDetail = () => {
                                             <span className="text-secondary small">
                                                 Entrega prevista:{" "}
                                                 {job.scheduled_end
-                                                    ? new Date(job.scheduled_end).toLocaleDateString()
+                                                    ? new Date(job.scheduled_end).toLocaleDateString(locale)
                                                     : "Sin fecha"}{" "}
                                                 &bull; Presupuesto:{" "}
                                                 <strong>
@@ -279,7 +281,7 @@ export const ClientDetail = () => {
                                             >
                                                 <i className="fa-solid fa-clock me-1"></i>{" "}
                                                 {app.starts_at
-                                                    ? new Date(app.starts_at).toLocaleString()
+                                                    ? new Date(app.starts_at).toLocaleString(locale)
                                                     : "Sin fecha"}{" "}
                                                 &bull; Responsable:{" "}
                                                 {app.assigned_membership_id || "Sin asignar"}
@@ -324,7 +326,7 @@ export const ClientDetail = () => {
                                                 style={{ fontSize: "0.7rem" }}
                                             >
                                                 {act.created_at
-                                                    ? new Date(act.created_at).toLocaleString()
+                                                    ? new Date(act.created_at).toLocaleString(locale)
                                                     : "Sin fecha"}
                                             </span>
 
diff --git a/src/front/pages/Clients.jsx b/src/front/pages/Clients.jsx
index 560778e..0a62380 100644
--- a/src/front/pages/Clients.jsx
+++ b/src/front/pages/Clients.jsx
@@ -1,6 +1,8 @@
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { clientService } from "../services/clientService";
+import { useLanguage } from "../context/LanguageContext";
+import { translateLiteral } from "../i18n/literalTranslations.mjs";
 
 const EMPTY_ADDRESS = {
     label: "Principal",
@@ -13,6 +15,7 @@ const EMPTY_ADDRESS = {
 const nullable = (value) => value.trim() || null;
 
 export const Clients = () => {
+    const { locale, ui } = useLanguage();
     const [clients, setClients] = useState([]);
     const [page, setPage] = useState(1);
     const [pages, setPages] = useState(0);
@@ -51,14 +54,14 @@ export const Clients = () => {
                 });
 
                 if (!response.ok) {
-                    throw new Error("Unable to load your account.");
+                    throw new Error(ui.accountLoadError);
                 }
 
                 const account = await response.json();
                 const current = account.companies?.[0];
 
                 if (!current) {
-                    throw new Error("No se encontró una empresa activa.");
+                    throw new Error(ui.noCompany);
                 }
 
                 const requestOptions = {
@@ -99,7 +102,7 @@ export const Clients = () => {
 
         loadClients();
         return () => controller.abort();
-    }, [page, searchTerm, statusFilter, reload]);
+    }, [page, searchTerm, statusFilter, reload, ui.accountLoadError, ui.noCompany]);
 
     const closeForm = () => {
         setCreating(false);
@@ -241,9 +244,11 @@ export const Clients = () => {
     };
 
     const toggleClientStatus = async (client) => {
-        const action = client.is_active ? "desactivar" : "activar";
+        const action = client.is_active
+            ? translateLiteral("deactivate", locale)
+            : translateLiteral("activate", locale);
 
-        if (!window.confirm(`¿Quieres ${action} este cliente?`)) {
+        if (!window.confirm(translateLiteral("Do you want to {action} this client?", locale).replace("{action}", action))) {
             return;
         }
 
@@ -268,7 +273,7 @@ export const Clients = () => {
                 color: "#ffffff",
             }}
         >
-            {isActive ? "Activo" : "Inactivo"}
+            {isActive ? ui.active : ui.inactive}
         </span>
     );
 
@@ -364,10 +369,10 @@ export const Clients = () => {
                         disabled={page <= 1}
                         onClick={() => setPage((value) => value - 1)}
                     >
-                        Anterior
+                        {ui.previous}
                     </button>
                     <span className="small text-secondary">
-                        Página {page} de {Math.max(1, pages)}
+                        {ui.page} {page} {ui.of} {Math.max(1, pages)}
                     </span>
                     <button
                         type="button"
@@ -375,7 +380,7 @@ export const Clients = () => {
                         disabled={page >= pages}
                         onClick={() => setPage((value) => value + 1)}
                     >
-                        Siguiente
+                        {ui.next}
                     </button>
                 </nav>
             )}
@@ -413,7 +418,7 @@ export const Clients = () => {
                                                         {fullName}
                                                     </h5>
                                                     <span className="text-secondary small">
-                                                        Cliente #{client.id}
+                                                        {translateLiteral("Cliente", locale)} #{client.id}
                                                     </span>
                                                 </div>
                                             </div>
diff --git a/src/front/pages/ForgotPassword.jsx b/src/front/pages/ForgotPassword.jsx
index 8e7eaa3..1e3e71a 100644
--- a/src/front/pages/ForgotPassword.jsx
+++ b/src/front/pages/ForgotPassword.jsx
@@ -3,9 +3,11 @@ import { Link } from "react-router-dom";
 import { AuthLayout } from "../components/AuthLayout";
 import { authService } from "../services/authService";
 import { useApp } from "../context/AppContext";
+import { useLanguage } from "../context/LanguageContext";
 
 export const ForgotPassword = () => {
     const { showToast } = useApp();
+    const { ui } = useLanguage();
     const [email, setEmail] = useState("");
     const [error, setError] = useState("");
     const [loading, setLoading] = useState(false);
@@ -14,7 +16,7 @@ export const ForgotPassword = () => {
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (!email) {
-            setError("Por favor ingresa tu correo electrónico.");
+            setError(ui.emailRequired);
             return;
         }
         setError("");
@@ -24,10 +26,10 @@ export const ForgotPassword = () => {
             await authService.forgotPassword(email);
             setLoading(false);
             setSubmitted(true);
-            showToast("Correo de recuperación enviado.", "success");
+            showToast(ui.recoverySent, "success");
         } catch (err) {
             setLoading(false);
-            setError(err.message || "Error al procesar la solicitud.");
+            setError(err.message || ui.recoveryError);
         }
     };
 
@@ -38,8 +40,8 @@ export const ForgotPassword = () => {
                     🔄
                 </div>
 
-                <h2 className="fw-bold text-body fs-3 mb-1">Recuperar Contraseña</h2>
-                <p className="text-muted small mb-4">Te enviaremos las instrucciones a tu correo</p>
+                <h2 className="fw-bold text-body fs-3 mb-1">{ui.forgotTitle}</h2>
+                <p className="text-muted small mb-4">{ui.forgotSubtitle}</p>
 
                 {error && (
                     <div className="alert alert-danger py-2 small mb-3">
@@ -49,17 +51,17 @@ export const ForgotPassword = () => {
 
                 {submitted ? (
                     <div className="alert alert-success py-3 small text-center">
-                        Hemos enviado un enlace de recuperación a <strong>{email}</strong>. Revisa tu bandeja de entrada.
+                        {ui.recoverySent} <strong>{email}</strong>
                     </div>
                 ) : (
                     <form onSubmit={handleSubmit} className="vstack gap-3">
                         <div>
-                            <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>Email</label>
+                            <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>{ui.email}</label>
                             <input
                                 type="email"
                                 value={email}
                                 onChange={(e) => setEmail(e.target.value)}
-                                placeholder="tu@empresa.com"
+                                placeholder={ui.emailPlaceholder}
                                 className="form-control bg-body text-body shadow-none py-2"
                             />
                         </div>
@@ -70,15 +72,15 @@ export const ForgotPassword = () => {
                             className="w-100 py-2 btn text-white fw-semibold shadow-sm mt-2"
                             style={{ backgroundColor: "#9333ea", borderColor: "#9333ea" }}
                         >
-                            {loading ? "..." : "Enviar Instrucciones"}
+                            {loading ? ui.loading : ui.sendInstructions}
                         </button>
                     </form>
                 )}
 
                 <p className="text-center text-muted small mt-4 mb-0">
-                    <Link to="/login" className="fw-semibold text-decoration-none" style={{ color: "#9333ea" }}>← Volver al login</Link>
+                    <Link to="/login" className="fw-semibold text-decoration-none" style={{ color: "#9333ea" }}>← {ui.backToLogin}</Link>
                 </p>
             </div>
         </AuthLayout>
     );
-};
\ No newline at end of file
+};
diff --git a/src/front/pages/Inbox.jsx b/src/front/pages/Inbox.jsx
index f3f857c..c3f434f 100644
--- a/src/front/pages/Inbox.jsx
+++ b/src/front/pages/Inbox.jsx
@@ -2,28 +2,31 @@ import { useEffect, useRef, useState } from "react";
 import { inboxService } from "../services/inboxService";
 import "./Inbox.css";
 import { AIReplyPanel } from "../components/AIReplyPanel";
+import { useLanguage } from "../context/LanguageContext";
+import { translateLiteral } from "../i18n/literalTranslations.mjs";
 
 const labels = {
     web: "Web", email: "Correo electrónico", whatsapp: "WhatsApp", instagram: "Instagram",
     open: "Abierta", waiting: "En espera", resolved: "Resuelta", human: "Humano", ai: "IA",
     stored: "Guardado", received: "Recibido", sent: "Enviado", delivered: "Entregado", failed: "Fallido",
 };
-const displayLabel = (value) => labels[value] || value;
-const displayError = (error) => ({
-    "Take human control before sending a message.": "Asume el control antes de enviar un mensaje.",
-    "Conversation not found.": "No se encontró la conversación.",
-    "Your subscription is inactive or expired.": "Tu suscripción está inactiva o ha caducado.",
-    "Client not found.": "No se encontró el cliente.",
-    "Initial message must not be empty.": "El mensaje inicial no puede estar vacío.",
-    "Failed to fetch": "No se pudo conectar con el servidor.",
-}[error.message] || "No se pudo completar la operación. Inténtalo de nuevo.");
-const clientLabel = (client) => (
+const clientLabel = (client, locale) => (
     [client.first_name, client.last_name].filter(Boolean).join(" ")
     || client.email
-    || `Cliente #${client.id}`
+    || `${translateLiteral("Cliente", locale)} #${client.id}`
 );
 
 export const Inbox = () => {
+    const { locale, ui } = useLanguage();
+    const displayLabel = (value) => translateLiteral(labels[value] || value, locale);
+    const displayError = (error) => translateLiteral({
+        "Take human control before sending a message.": "Asume el control antes de enviar un mensaje.",
+        "Conversation not found.": "No se encontró la conversación.",
+        "Your subscription is inactive or expired.": "Tu suscripción está inactiva o ha caducado.",
+        "Client not found.": "No se encontró el cliente.",
+        "Initial message must not be empty.": "El mensaje inicial no puede estar vacío.",
+        "Failed to fetch": "No se pudo conectar con el servidor.",
+    }[error.message] || "No se pudo completar la operación. Inténtalo de nuevo.", locale);
     const [draft, setDraft] = useState("");
     const [sending, setSending] = useState(false);
     const [actionError, setActionError] = useState("");
@@ -382,7 +385,7 @@ export const Inbox = () => {
                     </div>
                     <nav className="inbox-pagination" aria-label="Páginas de conversaciones">
                         <button type="button" aria-label="Conversaciones anteriores" disabled={loadingConversations || conversationPage === 1} onClick={() => { selectConversation(null); setConversationPage((page) => page - 1); }}>‹</button>
-                        <span>Página {conversationPage}</span>
+                        <span>{ui.page} {conversationPage}</span>
                         <button type="button" aria-label="Conversaciones siguientes" disabled={loadingConversations || Boolean(conversationsError) || conversationPage * conversationPerPage >= conversationTotal} onClick={() => { selectConversation(null); setConversationPage((page) => page + 1); }}>›</button>
                     </nav>
                 </aside>
@@ -395,12 +398,12 @@ export const Inbox = () => {
                         {!selected ? <div className="inbox-empty-chat"><span className="inbox-empty-icon">✉</span><h2>Un espacio para cada conversación</h2><p>Selecciona una conversación a la izquierda para ver su historial.</p></div> : !currentHistory ? <p role="status" className="inbox-note">Cargando mensajes…</p> : currentHistory.error ? <p role="alert" className="inbox-error">{currentHistory.error}</p> : currentHistory.messages.length === 0 ? <p className="inbox-note">Todavía no hay mensajes.</p> : currentHistory.messages.map((message) => (
                             <article key={message.id} className={`inbox-message ${message.direction === "outbound" ? "is-outbound" : ""}`}>
                                 <p>{message.content}</p>
-                                <small>{message.created_at ? new Date(message.created_at).toLocaleTimeString("es-ES", { hour: "2-digit", minute: "2-digit" }) : ""}{message.sent_by_ai ? " · IA" : ""}{message.direction === "outbound" ? ` · ${displayLabel(message.delivery_status || "stored")}` : ""}</small>
+                                <small>{message.created_at ? new Date(message.created_at).toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" }) : ""}{message.sent_by_ai ? " · IA" : ""}{message.direction === "outbound" ? ` · ${displayLabel(message.delivery_status || "stored")}` : ""}</small>
                             </article>
                         ))}
                     </div>
                     {selected && currentHistory && !currentHistory.error && currentHistory.total > currentHistory.perPage && <nav className="inbox-pagination" aria-label="Páginas de mensajes">
-                        <button type="button" disabled={messagePage === 1} onClick={() => setMessagePage((page) => page - 1)}>Anterior</button><span>Página {messagePage}</span><button type="button" disabled={messagePage * currentHistory.perPage >= currentHistory.total} onClick={() => setMessagePage((page) => page + 1)}>Siguiente</button>
+                        <button type="button" disabled={messagePage === 1} onClick={() => setMessagePage((page) => page - 1)}>{ui.previous}</button><span>{ui.page} {messagePage}</span><button type="button" disabled={messagePage * currentHistory.perPage >= currentHistory.total} onClick={() => setMessagePage((page) => page + 1)}>{ui.next}</button>
                     </nav>}
                     {actionError && <p role="alert" className="inbox-error">{actionError}</p>}
                     {selected?.control_mode === "ai" && <div className="inbox-control"><span>La IA está atendiendo esta conversación.</span><button type="button" disabled={sending} onClick={takeControl}>Asumir el control</button></div>}
@@ -415,7 +418,7 @@ export const Inbox = () => {
                     <span className="inbox-avatar inbox-avatar-large">{selected ? (selected.subject || "C").slice(0, 1).toUpperCase() : "—"}</span>
                     <h2>{selected?.subject || "Detalles de la conversación"}</h2>
                     <p>{selected ? displayLabel(selected.status) : "Selecciona una conversación para ver sus detalles."}</p>
-                    {selected && <dl><dt>Cliente</dt><dd><select aria-label="Cliente vinculado" className="inbox-client-select" value={selected.client_id ?? ""} disabled={clientsLoading || assigningClient} onChange={assignClient}><option value="">Sin cliente</option>{clients.map((client) => <option key={client.id} value={client.id}>{clientLabel(client)}</option>)}</select></dd><dt>Canal</dt><dd>{displayLabel(selected.channel)}</dd><dt>Control</dt><dd>{displayLabel(selected.control_mode)}</dd><dt>Responsable</dt><dd>{selected.assigned_membership_id ?? "Sin asignar"}</dd><dt>Último mensaje</dt><dd>{selected.last_message_at ? new Date(selected.last_message_at).toLocaleString("es-ES") : "Todavía no hay mensajes"}</dd></dl>}
+                    {selected && <dl><dt>Cliente</dt><dd><select aria-label="Cliente vinculado" className="inbox-client-select" value={selected.client_id ?? ""} disabled={clientsLoading || assigningClient} onChange={assignClient}><option value="">Sin cliente</option>{clients.map((client) => <option key={client.id} value={client.id}>{clientLabel(client, locale)}</option>)}</select></dd><dt>Canal</dt><dd>{displayLabel(selected.channel)}</dd><dt>Control</dt><dd>{displayLabel(selected.control_mode)}</dd><dt>Responsable</dt><dd>{selected.assigned_membership_id ?? "Sin asignar"}</dd><dt>Último mensaje</dt><dd>{selected.last_message_at ? new Date(selected.last_message_at).toLocaleString(locale) : "Todavía no hay mensajes"}</dd></dl>}
                 </aside>
             </div>
             {createOpen && <div className="inbox-modal-backdrop" role="presentation" onMouseDown={(event) => { if (event.target === event.currentTarget && !creating) setCreateOpen(false); }}>
@@ -429,7 +432,7 @@ export const Inbox = () => {
                         <input id="conversation-subject" autoFocus required maxLength={255} placeholder="Ej. Presupuesto para armario" value={newConversation.subject} onChange={(event) => setNewConversation((value) => ({ ...value, subject: event.target.value }))} />
                         <div className="inbox-form-row">
                             <div><label htmlFor="conversation-channel">Canal</label><select id="conversation-channel" value={newConversation.channel} onChange={(event) => setNewConversation((value) => ({ ...value, channel: event.target.value }))}><option value="web">Web</option><option value="email">Correo electrónico</option><option value="whatsapp">WhatsApp</option><option value="instagram">Instagram</option></select></div>
-                            <div><label htmlFor="conversation-client">Cliente</label><select id="conversation-client" value={newConversation.clientId} disabled={clientsLoading} onChange={(event) => setNewConversation((value) => ({ ...value, clientId: event.target.value }))}><option value="">Sin cliente</option>{clients.map((client) => <option key={client.id} value={client.id}>{clientLabel(client)}</option>)}</select></div>
+                            <div><label htmlFor="conversation-client">Cliente</label><select id="conversation-client" value={newConversation.clientId} disabled={clientsLoading} onChange={(event) => setNewConversation((value) => ({ ...value, clientId: event.target.value }))}><option value="">Sin cliente</option>{clients.map((client) => <option key={client.id} value={client.id}>{clientLabel(client, locale)}</option>)}</select></div>
                         </div>
                         <label htmlFor="conversation-message">Primer mensaje <span>(opcional)</span></label>
                         <textarea id="conversation-message" rows="4" maxLength={10000} placeholder="Escribe el primer mensaje para el cliente…" value={newConversation.initialMessage} onChange={(event) => setNewConversation((value) => ({ ...value, initialMessage: event.target.value }))} />
diff --git a/src/front/pages/JobDetail.jsx b/src/front/pages/JobDetail.jsx
index 7e4d6d6..220a6c9 100644
--- a/src/front/pages/JobDetail.jsx
+++ b/src/front/pages/JobDetail.jsx
@@ -1,8 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { useParams, useLocation, Link } from "react-router-dom";
 import { sharedAppointments } from "../../data/sharedAppointments";
+import { useLanguage } from "../context/LanguageContext";
+import { translateLiteral } from "../i18n/literalTranslations.mjs";
 
 export const JobDetail = () => {
+    const { locale } = useLanguage();
     const { id } = useParams();
     const location = useLocation();
 
@@ -59,7 +62,7 @@ export const JobDetail = () => {
         };
 
         fetchJobDetail();
-    }, [id]);
+    }, [id, locale]);
 
     // Filtramos de forma segura las citas de la agenda global que coincidan con este trabajo
     const jobAppointments = sharedAppointments.filter(
@@ -135,9 +138,9 @@ export const JobDetail = () => {
 
     const getStageText = (status) => {
         switch (status) {
-            case "completed": return "Completado";
-            case "in_progress": return "En curso";
-            default: return "Pendiente";
+            case "completed": return translateLiteral("Completado", locale);
+            case "in_progress": return translateLiteral("En curso", locale);
+            default: return translateLiteral("Pendiente", locale);
         }
     };
 
diff --git a/src/front/pages/Jobs.jsx b/src/front/pages/Jobs.jsx
index bc04d4b..74c1b66 100644
--- a/src/front/pages/Jobs.jsx
+++ b/src/front/pages/Jobs.jsx
@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { addDays, defaultJobSchedule } from "../utils/jobSchedule.mjs";
+import { useLanguage } from "../context/LanguageContext";
+import { translateLiteral } from "../i18n/literalTranslations.mjs";
 
 const emptyJob = () => ({
     title: "",
@@ -11,6 +13,7 @@ const emptyJob = () => ({
 });
 
 export const Jobs = () => {
+    const { locale } = useLanguage();
     const [jobs, setJobs] = useState([]);
     const [clients, setClients] = useState([]);
     const [searchTerm, setSearchTerm] = useState("");
@@ -45,12 +48,12 @@ export const Jobs = () => {
                     signal: controller.signal
                 });
 
-                if (!meResponse.ok) throw new Error("No se pudo cargar la cuenta.");
+                if (!meResponse.ok) throw new Error(translateLiteral("No se pudo cargar la cuenta.", locale));
                 const account = await meResponse.json();
                 const current = account.companies?.[0];
 
                 if (!current) {
-                    throw new Error("No se encontró una empresa activa.");
+                    throw new Error(translateLiteral("No se encontró una empresa activa.", locale));
                 }
 
                 const companyId = current.id;
@@ -95,11 +98,11 @@ export const Jobs = () => {
 
         loadJobsAndClients();
         return () => controller.abort();
-    }, [reload]);
+    }, [reload, locale]);
 
     // Función para eliminar un trabajo
     const handleDeleteJob = async (jobId) => {
-        if (!window.confirm("¿Estás seguro de que deseas eliminar este trabajo?")) return;
+        if (!window.confirm(translateLiteral("¿Estás seguro de que deseas eliminar este trabajo?", locale))) return;
 
         try {
             const token = localStorage.getItem("access_token") || localStorage.getItem("jwt_token") || localStorage.getItem("token");
@@ -123,11 +126,11 @@ export const Jobs = () => {
                 setReload(value => value + 1);
             } else {
                 const errData = await response.json();
-                alert(`No se pudo eliminar el trabajo: ${errData.error || "Error desconocido"}`);
+                alert(`${translateLiteral("No se pudo eliminar el trabajo:", locale)} ${errData.error || translateLiteral("Error desconocido", locale)}`);
             }
         } catch (error) {
             console.error("Error de red al eliminar el trabajo:", error);
-            alert("Error de red al intentar eliminar el trabajo.");
+            alert(translateLiteral("Error de red al intentar eliminar el trabajo.", locale));
         }
     };
 
@@ -145,7 +148,7 @@ export const Jobs = () => {
     const handleCreateJob = async (e) => {
         e.preventDefault();
         if (newJob.dueDate < newJob.startDate) {
-            setFormError("La fecha de entrega no puede ser anterior a la fecha de inicio.");
+            setFormError(translateLiteral("La fecha de entrega no puede ser anterior a la fecha de inicio.", locale));
             return;
         }
         setFormError("");
@@ -184,7 +187,7 @@ export const Jobs = () => {
             } else {
                 const errData = await response.json();
                 console.error("Error al crear el trabajo:", errData);
-                alert(`No se pudo crear el trabajo: ${errData.error || JSON.stringify(errData)}`);
+                alert(`${translateLiteral("No se pudo crear el trabajo:", locale)} ${errData.error || JSON.stringify(errData)}`);
             }
         } catch (error) {
             console.error("Error de red al crear el trabajo:", error);
diff --git a/src/front/pages/Knowledge.jsx b/src/front/pages/Knowledge.jsx
index 784ade0..a485b2a 100644
--- a/src/front/pages/Knowledge.jsx
+++ b/src/front/pages/Knowledge.jsx
@@ -1,12 +1,12 @@
 import { useEffect, useRef, useState } from "react";
 import { knowledgeService } from "../services/knowledgeService";
 import "../styles/knowledge.css";
-
-const errorMessage = (failure) => failure instanceof TypeError ? "No se pudo conectar con el servidor." : failure.message;
-
-const labels = { pending: "Pendiente", processing: "Procesando", ready: "Disponible", failed: "Error" };
+import { useLanguage } from "../context/LanguageContext";
 
 export const Knowledge = () => {
+    const { locale, ui } = useLanguage();
+    const errorMessage = (failure) => failure instanceof TypeError ? ui.connectionError : failure.message;
+    const labels = { pending: ui.pending, processing: ui.processing, ready: ui.ready, failed: ui.failed };
     const token = localStorage.getItem("access_token");
     const [company, setCompany] = useState(null);
     const [documents, setDocuments] = useState([]);
@@ -32,10 +32,10 @@ export const Knowledge = () => {
                 const response = await fetch(`${base}/api/me`, {
                     headers: { Authorization: `Bearer ${token}` }, signal: controller.signal,
                 });
-                if (!response.ok) throw new Error("No se pudo verificar tu cuenta.");
+                if (!response.ok) throw new Error(ui.accountLoadError);
                 const account = await response.json();
                 const current = account.companies?.[0];
-                if (!current) throw new Error("No hay una empresa disponible.");
+                if (!current) throw new Error(ui.noCompany);
                 const result = await knowledgeService.list({ token, companyId: current.id, signal: controller.signal }, page);
                 if (controller.signal.aborted) return;
                 setCompany(current); setDocuments(result.documents); setTotal(result.total);
@@ -47,7 +47,7 @@ export const Knowledge = () => {
         load();
         const timer = window.setInterval(load, 5000);
         return () => { controller.abort(); window.clearInterval(timer); };
-    }, [token, page, revision]);
+    }, [token, page, revision, ui.accountLoadError, ui.noCompany]);
 
     useEffect(() => {
         if (!preview || !company) return;
@@ -69,7 +69,7 @@ export const Knowledge = () => {
             await action();
             if (active.current) setNotice(message);
         } catch (failure) {
-            if (active.current) setError(errorMessage(failure) || "No se pudo conectar con el servidor.");
+            if (active.current) setError(errorMessage(failure) || ui.connectionError);
         } finally {
             if (active.current) { setBusy(false); refresh(); }
         }
@@ -80,54 +80,54 @@ export const Knowledge = () => {
         const data = new FormData(form);
         const file = data.get("file");
         if (!file?.size || file.size > 10 * 1024 * 1024 || !/\.(pdf|docx|txt)$/i.test(file.name)) {
-            setError("Selecciona un archivo PDF, DOCX o TXT de hasta 10 MB."); return;
+            setError(ui.invalidKnowledgeFile); return;
         }
         perform(async () => {
             const result = await knowledgeService.upload(options, data);
-            if (active.current) { form.reset(); dialog.current.close(); setNotice("Archivo guardado. Procesando..."); refresh(); }
+            if (active.current) { form.reset(); dialog.current.close(); setNotice(ui.documentProcessing); refresh(); }
             await knowledgeService.process(options, result.document.id);
-        }, "Documento procesado y disponible.");
+        }, ui.documentProcessed);
     }
 
     return <section className="knowledge-page">
         <header className="knowledge-heading"><div>
             <p className="knowledge-eyebrow">CLIENTFLOW{company ? ` · ${company.name}` : ""}</p>
-            <h1>Conocimiento</h1><p>Documentos de tu empresa para ayudar a tus agentes.</p>
-        </div>{canManage && <button className="knowledge-primary" disabled={busy} onClick={() => dialog.current.showModal()}>+ Subir documento</button>}</header>
-        {error && <div className="knowledge-error" role="alert">{error} <button onClick={refresh}>Actualizar</button></div>}
+            <h1>{ui.knowledgeTitle}</h1><p>{ui.knowledgeSubtitle}</p>
+        </div>{canManage && <button className="knowledge-primary" disabled={busy} onClick={() => dialog.current.showModal()}>+ {ui.uploadDocument}</button>}</header>
+        {error && <div className="knowledge-error" role="alert">{error} <button onClick={refresh}>{ui.update}</button></div>}
         {notice && <p className="knowledge-notice" role="status">{notice}</p>}
-        {busy && <p role="status">Procesando la operación. Los documentos grandes pueden tardar varios minutos.</p>}
+        {busy && <p role="status">{ui.operationProcessing}</p>}
         <div className="knowledge-card" aria-busy={loading}>
-            {loading ? <p className="knowledge-empty">Cargando documentos...</p> : <>
-                <div className="knowledge-scroll"><table><thead><tr><th>Documento</th><th>Formato</th><th>Estado</th><th>Fragmentos</th><th>Acciones</th></tr></thead>
+            {loading ? <p className="knowledge-empty">{ui.documentsLoading}</p> : <>
+                <div className="knowledge-scroll"><table><thead><tr><th>{ui.document}</th><th>{ui.format}</th><th>{ui.status}</th><th>{ui.chunks}</th><th>{ui.actions}</th></tr></thead>
                     <tbody>{documents.map((document) => <tr key={document.id}>
-                        <td><strong>{document.title}</strong><small>{new Date(document.created_at).toLocaleDateString("es-ES")}</small>
-                            {document.ingestion_error && <p className="knowledge-failure">No se pudo procesar. Comprueba que el archivo contiene texto y que el servicio de IA está disponible. Puedes reintentarlo.</p>}</td>
+                        <td><strong>{document.title}</strong><small>{new Date(document.created_at).toLocaleDateString(locale)}</small>
+                            {document.ingestion_error && <p className="knowledge-failure">{ui.knowledgeFailure}</p>}</td>
                         <td>{document.source_type.toUpperCase()}</td><td><span className={`knowledge-status ${document.ingestion_status}`}>{labels[document.ingestion_status] || document.ingestion_status}</span></td>
                         <td>{document.chunk_count}</td><td><div className="knowledge-actions">
-                            <button disabled={!document.chunk_count} onClick={() => { setPreview(document); setChunkPage(1); }}>Ver texto</button>
-                            {canManage && <><button disabled={busy || !document.can_reprocess} onClick={() => perform(() => knowledgeService.process(options, document.id), "Documento procesado.")}>{document.ingestion_status === "pending" ? "Procesar" : "Reprocesar"}</button>
+                            <button disabled={!document.chunk_count} onClick={() => { setPreview(document); setChunkPage(1); }}>{ui.viewText}</button>
+                            {canManage && <><button disabled={busy || !document.can_reprocess} onClick={() => perform(() => knowledgeService.process(options, document.id), ui.documentProcessed)}>{document.ingestion_status === "pending" ? ui.process : ui.reprocess}</button>
                                 <button disabled={busy || !document.can_reprocess} onClick={() => {
-                                    if (window.confirm(`¿Eliminar «${document.title}» y sus fragmentos?`)) perform(() => knowledgeService.remove(options, document.id), "Documento eliminado.");
-                                }}>Eliminar</button></>}
+                                    if (window.confirm(ui.deleteDocumentConfirm.replace("{title}", document.title))) perform(() => knowledgeService.remove(options, document.id), ui.documentDeleted);
+                                }}>{ui.delete}</button></>}
                         </div></td>
                     </tr>)}</tbody></table></div>
-                {!documents.length && <div className="knowledge-empty"><h2>Aún no hay documentos</h2><p>Sube PDF, DOCX o TXT con información de tu empresa.</p></div>}
-                <footer><span>{total} documentos</span><div><button disabled={page === 1 || busy} onClick={() => { setLoading(true); setPage(page - 1); }}>Anterior</button><span>Página {page}</span><button disabled={page * 20 >= total || busy} onClick={() => { setLoading(true); setPage(page + 1); }}>Siguiente</button></div></footer>
+                {!documents.length && <div className="knowledge-empty"><h2>{ui.noDocuments}</h2><p>{ui.noDocumentsHint}</p></div>}
+                <footer><span>{ui.documentCount.replace("{count}", total)}</span><div><button disabled={page === 1 || busy} onClick={() => { setLoading(true); setPage(page - 1); }}>{ui.previous}</button><span>{ui.page} {page}</span><button disabled={page * 20 >= total || busy} onClick={() => { setLoading(true); setPage(page + 1); }}>{ui.next}</button></div></footer>
             </>}
         </div>
-        {preview && <section className="knowledge-preview"><header><h2>{preview.title}</h2><button onClick={() => setPreview(null)}>Cerrar texto</button></header>
-            {!history ? <p>Cargando texto...</p> : history.error ? <p role="alert">{history.error}</p> : <>
-                {history.chunks.map((chunk) => <article key={chunk.id}><small>Fragmento {chunk.chunk_index + 1}</small><p>{chunk.content}</p></article>)}
-                <footer><button disabled={chunkPage === 1} onClick={() => setChunkPage(chunkPage - 1)}>Anterior</button><span>Página {chunkPage}</span><button disabled={chunkPage * 20 >= history.total} onClick={() => setChunkPage(chunkPage + 1)}>Siguiente</button></footer>
+        {preview && <section className="knowledge-preview"><header><h2>{preview.title}</h2><button onClick={() => setPreview(null)}>{ui.closeText}</button></header>
+            {!history ? <p>{ui.textLoading}</p> : history.error ? <p role="alert">{history.error}</p> : <>
+                {history.chunks.map((chunk) => <article key={chunk.id}><small>{ui.chunk} {chunk.chunk_index + 1}</small><p>{chunk.content}</p></article>)}
+                <footer><button disabled={chunkPage === 1} onClick={() => setChunkPage(chunkPage - 1)}>{ui.previous}</button><span>{ui.page} {chunkPage}</span><button disabled={chunkPage * 20 >= history.total} onClick={() => setChunkPage(chunkPage + 1)}>{ui.next}</button></footer>
             </>}
         </section>}
         <dialog ref={dialog} className="knowledge-dialog" aria-labelledby="knowledge-upload-title" onCancel={(event) => { if (busy) event.preventDefault(); }}>
-            <form onSubmit={upload}><h2 id="knowledge-upload-title">Subir documento</h2><p>PDF con texto, DOCX o TXT · Máximo 10 MB</p>
-                <label>Título (opcional)<input name="title" maxLength={200} disabled={busy} /></label>
-                <label>Archivo<input name="file" type="file" accept=".pdf,.docx,.txt" required disabled={busy} /></label>
+            <form onSubmit={upload}><h2 id="knowledge-upload-title">{ui.uploadDocument}</h2><p>{ui.fileHelp}</p>
+                <label>{ui.optionalTitle}<input name="title" maxLength={200} disabled={busy} /></label>
+                <label>{ui.file}<input name="file" type="file" accept=".pdf,.docx,.txt" required disabled={busy} /></label>
                 {error && <p role="alert" className="knowledge-failure">{error}</p>}
-                <div className="knowledge-actions"><button type="button" disabled={busy} onClick={() => dialog.current.close()}>Cancelar</button><button className="knowledge-primary" disabled={busy}>Subir y procesar</button></div>
+                <div className="knowledge-actions"><button type="button" disabled={busy} onClick={() => dialog.current.close()}>{ui.cancel}</button><button className="knowledge-primary" disabled={busy}>{ui.uploadAndProcess}</button></div>
             </form>
         </dialog>
     </section>;
diff --git a/src/front/pages/Layout.jsx b/src/front/pages/Layout.jsx
index d2a0c3a..5fda4f0 100644
--- a/src/front/pages/Layout.jsx
+++ b/src/front/pages/Layout.jsx
@@ -3,8 +3,10 @@ import { Outlet, useLocation } from "react-router-dom";
 import ScrollToTop from "../components/ScrollToTop";
 import { Sidebar } from "../components/Sidebar";
 import { WorkspacePreferences } from "../components/WorkspacePreferences";
+import { useLanguage } from "../context/LanguageContext";
 
 export const Layout = () => {
+    const { ui } = useLanguage();
     const location = useLocation();
 
     // Estado para saber si el sidebar móvil está abierto o cerrado
@@ -45,7 +47,7 @@ export const Layout = () => {
                             <button
                                 className="btn btn-dark text-white border-0 p-1 me-2"
                                 onClick={() => setSidebarOpen(true)}
-                                aria-label="Abrir menú"
+                                aria-label={ui.openMenu}
                             >
                                 <i className="fa-solid fa-bars fa-lg"></i>
                             </button>
diff --git a/src/front/pages/Leads.jsx b/src/front/pages/Leads.jsx
index bae2aaa..d162ca9 100644
--- a/src/front/pages/Leads.jsx
+++ b/src/front/pages/Leads.jsx
@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from "react";
 import { leadService } from "../services/leadService";
 import "../styles/leads.css";
+import { useLanguage } from "../context/LanguageContext";
+import { translateLiteral } from "../i18n/literalTranslations.mjs";
 
 const STATUS_LABELS = {
     new: "Nuevo",
@@ -80,48 +82,48 @@ const buildNotes = (form) => [
         : "",
 ].filter(Boolean).join("\n");
 
-const mapLead = (lead) => {
+const mapLead = (lead, locale) => {
     const notes = parseNotes(lead.notes || "");
 
     return {
         ...lead,
         name: [lead.first_name, lead.last_name].filter(Boolean).join(" "),
-        origin: lead.source || "Sin origen",
+        origin: lead.source || translateLiteral("Sin origen", locale),
         service: notes.service || (
             lead.service_type_id
-                ? `Servicio #${lead.service_type_id}`
-                : "No especificado"
+                ? `${translateLiteral("Servicio", locale)} #${lead.service_type_id}`
+                : translateLiteral("No especificado", locale)
         ),
         serviceZone: notes.serviceZone,
-        priority: notes.priority || "Sin prioridad",
+        priority: notes.priority || translateLiteral("Sin prioridad", locale),
         description: notes.description,
         internalNotes: notes.internalNotes,
         assignedUser: lead.assigned_membership_id
-            ? `Miembro #${lead.assigned_membership_id}`
-            : "Sin asignar",
+            ? `${translateLiteral("Miembro", locale)} #${lead.assigned_membership_id}`
+            : translateLiteral("Sin asignar", locale),
         statusCode: lead.status,
-        status: STATUS_LABELS[lead.status] || lead.status,
+        status: translateLiteral(STATUS_LABELS[lead.status] || lead.status, locale),
     };
 };
 
-const formatDate = (value) => value
-    ? new Intl.DateTimeFormat("es-ES", {
+const formatDate = (value, locale) => value
+    ? new Intl.DateTimeFormat(locale, {
         dateStyle: "medium",
         timeStyle: "short",
     }).format(new Date(value))
-    : "Sin fecha";
+    : translateLiteral("Sin fecha", locale);
 
 const statusClass = (status) => {
     switch (status) {
-        case "Nuevo":
+        case "new":
             return "bg-info bg-opacity-10 text-info border border-info border-opacity-25";
-        case "Calificado":
+        case "qualified":
             return "bg-success bg-opacity-10 text-success border border-success border-opacity-25";
-        case "Contactado":
+        case "contacted":
             return "bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25";
-        case "Ganado":
+        case "won":
             return "bg-success text-white";
-        case "Perdido":
+        case "lost":
             return "bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25";
         default:
             return "bg-secondary bg-opacity-10 text-secondary";
@@ -129,6 +131,8 @@ const statusClass = (status) => {
 };
 
 export const Leads = () => {
+    const { locale, ui } = useLanguage();
+    const statusLabels = Object.fromEntries(Object.entries(STATUS_LABELS).map(([key, value]) => [key, translateLiteral(value, locale)]));
     const [leads, setLeads] = useState([]);
     const [options, setOptions] = useState(null);
     const [companyName, setCompanyName] = useState("");
@@ -211,7 +215,7 @@ export const Leads = () => {
 
                 if (controller.signal.aborted) return;
 
-                setLeads((data.items || []).map(mapLead));
+                setLeads((data.items || []).map((lead) => mapLead(lead, locale)));
                 setPages(data.pagination?.pages || 0);
                 setTotal(data.pagination?.total || 0);
             } catch (loadError) {
@@ -227,7 +231,7 @@ export const Leads = () => {
             window.clearTimeout(timer);
             controller.abort();
         };
-    }, [page, searchTerm, filterOrigin, filterStatus, reload]);
+    }, [page, searchTerm, filterOrigin, filterStatus, reload, locale]);
 
     const closeDetails = () => {
         detailRequest.current += 1;
@@ -261,7 +265,7 @@ export const Leads = () => {
 
             if (detailRequest.current !== requestId) return;
 
-            setSelectedLead(mapLead(freshLead));
+            setSelectedLead(mapLead(freshLead, locale));
             setActivities(leadActivities || []);
             setNextActions(leadActions || []);
         } catch (loadError) {
@@ -386,7 +390,7 @@ export const Leads = () => {
                 const updated = await leadService.update(options, selectedLead.id, {
                     status: "contacted",
                 });
-                setSelectedLead(mapLead(updated));
+                setSelectedLead(mapLead(updated, locale));
                 setReload((value) => value + 1);
             }
 
@@ -569,7 +573,7 @@ export const Leads = () => {
                                     }}
                                 >
                                     <option value="">Todos los estados</option>
-                                    {Object.entries(STATUS_LABELS).map(([value, label]) => (
+                                    {Object.entries(statusLabels).map(([value, label]) => (
                                         <option value={value} key={value}>{label}</option>
                                     ))}
                                 </select>
@@ -628,7 +632,7 @@ export const Leads = () => {
                                         <td><span className="text-secondary small">{lead.origin}</span></td>
                                         <td><span className="text-secondary small">{lead.service}</span></td>
                                         <td>
-                                            <span className={`badge rounded-pill px-3 py-1 fw-normal ${statusClass(lead.status)}`}>
+                                            <span className={`badge rounded-pill px-3 py-1 fw-normal ${statusClass(lead.statusCode)}`}>
                                                 {lead.status}
                                             </span>
                                         </td>
@@ -657,7 +661,7 @@ export const Leads = () => {
                         </table>
                     </div>
                     <div className="card-footer bg-white py-3 px-4 text-muted small d-flex justify-content-between align-items-center">
-                        <span>{total} resultados</span>
+                        <span>{total} {ui.results}</span>
                         <div className="d-flex align-items-center gap-2">
                             <button
                                 type="button"
@@ -665,16 +669,16 @@ export const Leads = () => {
                                 disabled={page <= 1 || loading}
                                 onClick={() => setPage((value) => value - 1)}
                             >
-                                Anterior
+                                {ui.previous}
                             </button>
-                            <span>Página {page} de {Math.max(1, pages)}</span>
+                            <span>{ui.page} {page} {ui.of} {Math.max(1, pages)}</span>
                             <button
                                 type="button"
                                 className="btn btn-sm btn-outline-secondary"
                                 disabled={page >= pages || loading}
                                 onClick={() => setPage((value) => value + 1)}
                             >
-                                Siguiente
+                                {ui.next}
                             </button>
                         </div>
                     </div>
@@ -747,7 +751,7 @@ export const Leads = () => {
                                             <div className="col-md-4">
                                                 <label className="form-label small fw-semibold">Estado</label>
                                                 <select className="form-select" name="status" value={leadForm.status} onChange={updateLeadForm}>
-                                                    {Object.entries(STATUS_LABELS).map(([value, label]) => (
+                                                    {Object.entries(statusLabels).map(([value, label]) => (
                                                         <option value={value} key={value}>{label}</option>
                                                     ))}
                                                 </select>
@@ -757,7 +761,7 @@ export const Leads = () => {
                                                 <select className="form-select" name="assignedMembershipId" value={leadForm.assignedMembershipId} onChange={updateLeadForm}>
                                                     <option value="">Sin asignar</option>
                                                     {leadForm.assignedMembershipId && Number(leadForm.assignedMembershipId) !== options?.membershipId && (
-                                                        <option value={leadForm.assignedMembershipId}>Miembro #{leadForm.assignedMembershipId}</option>
+                                                        <option value={leadForm.assignedMembershipId}>{translateLiteral("Miembro", locale)} #{leadForm.assignedMembershipId}</option>
                                                     )}
                                                     {options?.membershipId && (
                                                         <option value={options.membershipId}>Asignarme a mí</option>
@@ -888,7 +892,7 @@ export const Leads = () => {
                                                     <div className="d-flex justify-content-between gap-2">
                                                         <div>
                                                             <div className="fw-bold text-dark">{action.title}</div>
-                                                            <div className="text-muted">{formatDate(action.due_at)}</div>
+                                                            <div className="text-muted">{formatDate(action.due_at, locale)}</div>
                                                         </div>
                                                         <span className={`badge align-self-start ${action.status === "completed" ? "bg-success" : "bg-primary"}`}>
                                                             {action.status === "completed" ? "Completada" : "Pendiente"}
@@ -912,7 +916,7 @@ export const Leads = () => {
                                                 <div className="p-2 border-bottom small" key={activity.id}>
                                                     <div className="d-flex justify-content-between text-muted" style={{ fontSize: "0.75rem" }}>
                                                         <span>{activity.event_type.replaceAll("_", " ")}</span>
-                                                        <span>{formatDate(activity.created_at)}</span>
+                                                        <span>{formatDate(activity.created_at, locale)}</span>
                                                     </div>
                                                     <div className="text-dark mt-1">{activity.description}</div>
                                                 </div>
diff --git a/src/front/pages/Login.jsx b/src/front/pages/Login.jsx
index 2a23266..17fa66c 100644
--- a/src/front/pages/Login.jsx
+++ b/src/front/pages/Login.jsx
@@ -3,9 +3,11 @@ import { Link, useNavigate, useLocation } from "react-router-dom";
 import { AuthLayout } from "../components/AuthLayout";
 import { authService } from "../services/authService";
 import { useApp } from "../context/AppContext";
+import { useLanguage } from "../context/LanguageContext";
 
 export const Login = () => {
     const { showToast } = useApp();
+    const { ui } = useLanguage();
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
     const [error, setError] = useState("");
@@ -18,7 +20,7 @@ export const Login = () => {
 const handleSubmit = async (e) => {
     e.preventDefault();
     if (!email.trim() || !password) {
-        setError("Introduce email y contraseña.");
+        setError(ui.loginRequired);
         return;
     }
     setLoading(true);
@@ -29,7 +31,7 @@ const handleSubmit = async (e) => {
         setTimeout(() => {
             if (email === "error@clientflow.com") {
                 setLoading(false);
-                setError("Credenciales inválidas (Simulado)");
+                setError(ui.loginInvalid);
                 return;
             }
             localStorage.setItem("access_token", "mock-access-token-xyz");
@@ -45,7 +47,7 @@ const handleSubmit = async (e) => {
             navigate("/dashboard");
         } catch (err) {
             setLoading(false);
-            setError(err.message || "Error al iniciar sesión");
+            setError(err.message || ui.loginError);
         }
     }
 };
@@ -57,10 +59,10 @@ const handleSubmit = async (e) => {
                     🔐
                 </div>
 
-                <h2 className="fw-bold text-body fs-3 mb-1">Iniciar Sesión</h2>
-                <p className="text-muted small mb-4">Ingresa a tu cuenta para continuar</p>
+                <h2 className="fw-bold text-body fs-3 mb-1">{ui.loginTitle}</h2>
+                <p className="text-muted small mb-4">{ui.loginSubtitle}</p>
 
-                {location.state?.passwordReset && <div className="alert alert-success" role="status">Contraseña actualizada. Ya puedes iniciar sesión.</div>}
+                {location.state?.passwordReset && <div className="alert alert-success" role="status">{ui.loginResetDone}</div>}
                 {error && (
                     <div className="alert alert-danger py-2 small mb-3">
                         {error}
@@ -69,21 +71,21 @@ const handleSubmit = async (e) => {
 
                 <form onSubmit={handleSubmit} className="vstack gap-3">
                     <div>
-                        <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>Email</label>
+                        <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>{ui.email}</label>
                         <input
                             type="email"
                             value={email}
                             onChange={(e) => setEmail(e.target.value)}
-                            placeholder="tu@empresa.com"
+                            placeholder={ui.emailPlaceholder}
                             className="form-control bg-body text-body shadow-none py-2"
                         />
                     </div>
 
                     <div>
                         <div className="d-flex justify-content-between align-items-center">
-                            <label className="form-label text-uppercase fw-bold text-secondary mb-0" style={{ fontSize: "0.7rem" }}>Contraseña</label>
+                            <label className="form-label text-uppercase fw-bold text-secondary mb-0" style={{ fontSize: "0.7rem" }}>{ui.password}</label>
                             <Link to="/forgot-password" style={{ fontSize: "0.75rem", color: "#9333ea" }} className="text-decoration-none fw-semibold">
-                                ¿Olvidaste tu contraseña?
+                                {ui.forgotPassword}
                             </Link>
                         </div>
                         <input
@@ -101,14 +103,14 @@ const handleSubmit = async (e) => {
                         className="w-100 py-2 btn text-white fw-semibold shadow-sm mt-2"
                         style={{ backgroundColor: "#9333ea", borderColor: "#9333ea" }}
                     >
-                        {loading ? "..." : "Entrar"}
+                        {loading ? ui.loading : ui.signIn}
                     </button>
                 </form>
 
                 <p className="text-center text-muted small mt-4 mb-0">
-                    ¿Aún no tienes cuenta? <Link to="/select-plan" className="fw-semibold text-decoration-none" style={{ color: "#9333ea" }}>Regístrate</Link>
+                    {ui.noAccount} <Link to="/select-plan" className="fw-semibold text-decoration-none" style={{ color: "#9333ea" }}>{ui.registerLink}</Link>
                 </p>
             </div>
         </AuthLayout>
     );
-};
\ No newline at end of file
+};
diff --git a/src/front/pages/Members.jsx b/src/front/pages/Members.jsx
index a92fb23..bdb3a66 100644
--- a/src/front/pages/Members.jsx
+++ b/src/front/pages/Members.jsx
@@ -1,10 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 import { memberService } from "../services/memberService";
 import "../styles/members.css";
-
-const roles = { owner: "Propietario", admin: "Administrador", manager: "Responsable", agent: "Agente", technician: "Técnico" };
+import { useLanguage } from "../context/LanguageContext";
 
 export const Members = () => {
+    const { ui } = useLanguage();
+    const roles = { owner: ui.owner, admin: ui.administrator, manager: ui.manager, agent: ui.agent, technician: ui.technician };
     const [members, setMembers] = useState([]);
     const [company, setCompany] = useState(null);
     const [page, setPage] = useState(1);
@@ -31,11 +32,11 @@ export const Members = () => {
                 const response = await fetch(`${base}/api/me`, {
                     headers: { Authorization: `Bearer ${token}` }, signal: controller.signal,
                 });
-                if (!response.ok) throw new Error("No se pudo verificar tu cuenta. Vuelve a iniciar sesión.");
+                if (!response.ok) throw new Error(ui.accountLoadError);
                 const account = await response.json();
                 const current = account.companies?.[0];
                 if (!current || !["owner", "admin"].includes(current.role)) {
-                    throw new Error("No tienes permisos para gestionar este equipo.");
+                    throw new Error(ui.teamPermissionError);
                 }
                 const data = await memberService.list({ token, companyId: current.id, signal: controller.signal }, page, search, status);
                 if (controller.signal.aborted) return;
@@ -50,7 +51,7 @@ export const Members = () => {
             }
         }, 200);
         return () => { window.clearTimeout(timer); controller.abort(); };
-    }, [token, page, search, status, revision]);
+    }, [token, page, search, status, revision, ui.accountLoadError, ui.teamPermissionError]);
 
     const openForm = (member = null) => {
         setEditing(member);
@@ -70,10 +71,10 @@ export const Members = () => {
                 await memberService.update(options, editing.id, {
                     role: form.get("role"), is_active: form.get("active") === "true",
                 });
-                setNotice("Miembro actualizado.");
+                setNotice(ui.memberUpdated);
             } else {
                 await memberService.invite(options, form.get("email").trim(), form.get("role"));
-                setNotice("Invitación creada. En modo local, el enlace se guarda en la bandeja de pruebas; no se envía un correo real.");
+                setNotice(ui.invitationCreated);
             }
             dialog.current.close();
             setRevision((value) => value + 1);
@@ -87,53 +88,53 @@ export const Members = () => {
             <header className="team-heading">
                 <div>
                     <p className="team-eyebrow">CLIENTFLOW{company ? ` · ${company.name}` : ""}</p>
-                    <h1>Usuarios</h1>
-                    <p>Equipo, funciones y permisos de acceso.</p>
+                    <h1>{ui.teamTitle}</h1>
+                    <p>{ui.teamSubtitle}</p>
                 </div>
-                <button className="team-primary" disabled={loading || !!error} onClick={() => openForm()}>+ Crear nuevo</button>
+                <button className="team-primary" disabled={loading || !!error} onClick={() => openForm()}>+ {ui.createNew}</button>
             </header>
             {notice && <p className="team-notice" role="status">{notice}</p>}
             <div className="team-filters">
-                <input aria-label="Buscar en usuarios" placeholder="Buscar en usuarios..." value={search} maxLength={100}
+                <input aria-label={ui.searchUsers} placeholder={ui.searchUsers} value={search} maxLength={100}
                     onChange={(event) => { setSearch(event.target.value); setPage(1); }} />
-                <select aria-label="Filtrar por estado" value={status} onChange={(event) => { setStatus(event.target.value); setPage(1); }}>
-                    <option value="all">Todos los estados</option><option value="active">Activos</option><option value="inactive">Inactivos</option>
+                <select aria-label={ui.filterStatus} value={status} onChange={(event) => { setStatus(event.target.value); setPage(1); }}>
+                    <option value="all">{ui.allStatuses}</option><option value="active">{ui.active}</option><option value="inactive">{ui.inactive}</option>
                 </select>
             </div>
             <div className="team-card" aria-busy={loading}>
-                {loading ? <p className="team-empty" role="status">Cargando equipo...</p> : error ? (
-                    <div className="team-empty" role="alert"><p>{error}</p><button onClick={() => setRevision((value) => value + 1)}>Reintentar</button></div>
+                {loading ? <p className="team-empty" role="status">{ui.teamLoading}</p> : error ? (
+                    <div className="team-empty" role="alert"><p>{error}</p><button onClick={() => setRevision((value) => value + 1)}>{ui.retry}</button></div>
                 ) : <>
                     <div className="team-table-scroll"><table className="team-table">
-                        <thead><tr><th>Usuario</th><th>Email</th><th>Rol</th><th>Estado</th><th><span className="visually-hidden">Acciones</span></th></tr></thead>
+                        <thead><tr><th>{ui.user}</th><th>{ui.email}</th><th>{ui.role}</th><th>{ui.status}</th><th><span className="visually-hidden">{ui.actions}</span></th></tr></thead>
                         <tbody>{members.map((member) => {
                             const canEdit = member.id !== company.membership_id && member.role !== "owner" && (company.role === "owner" || member.role !== "admin");
                             return <tr key={member.id}>
                                 <td><div className="team-person"><span className="team-avatar">{member.first_name?.[0]?.toUpperCase() || "U"}</span><strong>{member.first_name} {member.last_name}</strong></div></td>
                                 <td>{member.email}</td><td>{roles[member.role]}</td>
-                                <td><span className={`team-badge ${member.is_active ? "active" : "inactive"}`}>{member.is_active ? "Activo" : "Inactivo"}</span></td>
-                                <td>{canEdit && <button className="team-more" aria-label={`Editar a ${member.first_name} ${member.last_name}`} onClick={() => openForm(member)}>•••</button>}</td>
+                                <td><span className={`team-badge ${member.is_active ? "active" : "inactive"}`}>{member.is_active ? ui.active : ui.inactive}</span></td>
+                                <td>{canEdit && <button className="team-more" aria-label={`${ui.edit} ${member.first_name} ${member.last_name}`} onClick={() => openForm(member)}>•••</button>}</td>
                             </tr>;
                         })}</tbody>
                     </table></div>
-                    {members.length === 0 && <p className="team-empty">No hay usuarios que coincidan.</p>}
-                    <footer className="team-pagination"><span>{total} resultados</span><div>
-                        <button disabled={page === 1} onClick={() => setPage((value) => value - 1)} aria-label="Página anterior">‹</button>
-                        <span>Página {page}</span><button disabled={page * 20 >= total} onClick={() => setPage((value) => value + 1)} aria-label="Página siguiente">›</button>
+                    {members.length === 0 && <p className="team-empty">{ui.noMatchingUsers}</p>}
+                    <footer className="team-pagination"><span>{ui.results.replace("{count}", total)}</span><div>
+                        <button disabled={page === 1} onClick={() => setPage((value) => value - 1)} aria-label={`${ui.page} ${ui.previous}`}>‹</button>
+                        <span>{ui.page} {page}</span><button disabled={page * 20 >= total} onClick={() => setPage((value) => value + 1)} aria-label={`${ui.page} ${ui.next}`}>›</button>
                     </div></footer>
                 </>}
             </div>
             <dialog ref={dialog} className="team-dialog" aria-labelledby="member-form-title" onCancel={(event) => { if (busy) event.preventDefault(); }}>
                 <form key={editing?.id || "invite"} onSubmit={submit}>
-                    <h2 id="member-form-title">{editing ? "Editar miembro" : "Invitar miembro"}</h2>
-                    <p>{editing ? `${editing.first_name} ${editing.last_name}` : "La invitación caduca en 48 horas."}</p>
-                    {!editing && <label>Correo electrónico<input autoFocus name="email" type="email" required maxLength={255} disabled={busy} /></label>}
-                    <label>Rol<select name="role" defaultValue={editing?.role || "agent"} disabled={busy}>
+                    <h2 id="member-form-title">{editing ? ui.editMember : ui.inviteMember}</h2>
+                    <p>{editing ? `${editing.first_name} ${editing.last_name}` : ui.invitationExpires}</p>
+                    {!editing && <label>{ui.email}<input autoFocus name="email" type="email" required maxLength={255} disabled={busy} /></label>}
+                    <label>{ui.role}<select name="role" defaultValue={editing?.role || "agent"} disabled={busy}>
                         {Object.entries(roles).filter(([role]) => role !== "owner" && (role !== "admin" || company?.role === "owner")).map(([role, label]) => <option key={role} value={role}>{label}</option>)}
                     </select></label>
-                    {editing && <label>Estado<select name="active" defaultValue={String(editing.is_active)} disabled={busy}><option value="true">Activo</option><option value="false">Inactivo</option></select></label>}
+                    {editing && <label>{ui.status}<select name="active" defaultValue={String(editing.is_active)} disabled={busy}><option value="true">{ui.active}</option><option value="false">{ui.inactive}</option></select></label>}
                     {formError && <p role="alert" className="text-danger">{formError}</p>}
-                    <div className="team-dialog-actions"><button type="button" disabled={busy} onClick={() => dialog.current.close()}>Cancelar</button><button className="team-primary" disabled={busy}>{busy ? "Guardando..." : editing ? "Guardar cambios" : "Crear invitación"}</button></div>
+                    <div className="team-dialog-actions"><button type="button" disabled={busy} onClick={() => dialog.current.close()}>{ui.cancel}</button><button className="team-primary" disabled={busy}>{busy ? ui.saving : editing ? ui.saveChanges : ui.sendInvitation}</button></div>
                 </form>
             </dialog>
         </section>
diff --git a/src/front/pages/PlanSelection.jsx b/src/front/pages/PlanSelection.jsx
index 55f5aa1..bd2e86e 100644
--- a/src/front/pages/PlanSelection.jsx
+++ b/src/front/pages/PlanSelection.jsx
@@ -1,9 +1,11 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { AuthLayout } from "../components/AuthLayout";
+import { useLanguage } from "../context/LanguageContext";
 
 
 export const PlanSelection = () => {
+    const { ui } = useLanguage();
     const [plans, setPlans] = useState([]);
     const [selectedPlanId, setSelectedPlanId] = useState(null);
     const [registrationMode, setRegistrationMode] = useState("trial");
@@ -26,13 +28,13 @@ export const PlanSelection = () => {
                 );
 
                 if (!response.ok) {
-                    throw new Error("Unable to load plans.");
+                    throw new Error(ui.plansError);
                 }
 
                 const data = await response.json();
 
                 if (!Array.isArray(data)) {
-                    throw new Error("Invalid plans response.");
+                    throw new Error(ui.invalidPlans);
                 }
 
                 setPlans(data);
@@ -42,7 +44,7 @@ export const PlanSelection = () => {
 
                 setPlans([]);
                 setSelectedPlanId(null);
-                setPlansError("Unable to load plans. Please try again.");
+                setPlansError(ui.plansError);
             } finally {
                 if (!controller.signal.aborted) {
                     setPlansLoading(false);
@@ -53,7 +55,7 @@ export const PlanSelection = () => {
         fetchPlans();
 
         return () => controller.abort();
-    }, []);
+    }, [ui.invalidPlans, ui.plansError]);
 
     const handleSelectPlan = (e) => {
         e.preventDefault();
@@ -74,10 +76,10 @@ export const PlanSelection = () => {
                     ⭐
                 </div>
 
-                <h2 className="fw-bold text-body fs-3 mb-1">Elige tu plan</h2>
-                <p className="text-muted small mb-4">Selecciona la opción que mejor se adapte a tu negocio</p>
+                <h2 className="fw-bold text-body fs-3 mb-1">{ui.plansTitle}</h2>
+                <p className="text-muted small mb-4">{ui.plansSubtitle}</p>
                 {plansLoading && (
-                    <p role="status">Loading plans...</p>
+                    <p role="status">{ui.plansLoading}</p>
                 )}
 
                 {plansError && (
@@ -88,14 +90,14 @@ export const PlanSelection = () => {
                             className="btn btn-sm btn-outline-danger ms-3"
                             onClick={() => window.location.reload()}
                         >
-                            Try again
+                            {ui.retry}
                         </button>
                     </div>
                 )}
 
                 {!plansLoading && !plansError && plans.length === 0 && (
                     <div className="alert alert-info" role="status">
-                        No plans are currently available.
+                        {ui.noPlans}
                     </div>
                 )}
                 <form onSubmit={handleSelectPlan} className="vstack gap-3">
@@ -106,10 +108,10 @@ export const PlanSelection = () => {
 
                             const maxLeadsText =
                                 leadLimit === null
-                                    ? "Unlimited leads"
+                                    ? ui.unlimitedLeads
                                     : leadLimit === undefined
-                                        ? "Lead limit not specified"
-                                        : `Up to ${leadLimit} leads`;
+                                        ? ui.unspecifiedLeadLimit
+                                        : ui.upToLeads.replace("{count}", leadLimit);
                             return (
                                 <div
                                     key={plan.id}
@@ -128,12 +130,12 @@ export const PlanSelection = () => {
                                 >
                                     <div className="d-flex justify-content-between align-items-center">
                                         <span className="fw-bold text-body">{plan.name}</span>
-                                        <span className="fw-semibold" style={{ color: "#9333ea" }}>€{plan.price_eur}/month</span>                                   </div>
+                                        <span className="fw-semibold" style={{ color: "#9333ea" }}>€{plan.price_eur}{ui.perMonth}</span>                                   </div>
                                     <div className="d-flex justify-content-between align-items-center mt-1">
                                         <small className="text-muted">{plan.description}</small>
                                         <small className="text-secondary fw-medium">
                                             {plan.trial_days
-                                                ? `3-day trial · ${maxLeadsText}`
+                                                ? `${ui.trialDays.replace("{count}", plan.trial_days)} · ${maxLeadsText}`
                                                 : maxLeadsText}                                        </small>
                                     </div>
                                 </div>
@@ -141,7 +143,7 @@ export const PlanSelection = () => {
                         })}
                     </div>
                     <fieldset>
-                        <legend className="fs-6">Choose how to start</legend>
+                        <legend className="fs-6">{ui.chooseStart}</legend>
 
                         <label className="d-block">
                             <input
@@ -152,7 +154,7 @@ export const PlanSelection = () => {
                                 onChange={(e) => setRegistrationMode(e.target.value)}
                                 className="me-2"
                             />
-                            Start a 3-day free trial
+                            {ui.freeTrial}
                         </label>
 
                         <label className="d-block mt-2">
@@ -164,7 +166,7 @@ export const PlanSelection = () => {
                                 onChange={(e) => setRegistrationMode(e.target.value)}
                                 className="me-2"
                             />
-                            Simulate payment — no real charge
+                            {ui.noRealCharge}
                         </label>
                     </fieldset>
                     <button
@@ -177,7 +179,7 @@ export const PlanSelection = () => {
                         className="w-100 py-2 btn text-white fw-semibold shadow-sm mt-3"
                         style={{ backgroundColor: "#9333ea", borderColor: "#9333ea" }}
                     >
-                        Continue to registration
+                        {ui.continueRegistration}
                     </button>
                 </form>
             </div>
diff --git a/src/front/pages/Register.jsx b/src/front/pages/Register.jsx
index 63a8319..e11ae56 100644
--- a/src/front/pages/Register.jsx
+++ b/src/front/pages/Register.jsx
@@ -3,9 +3,11 @@ import { Link, useNavigate, useSearchParams, Navigate } from "react-router-dom";
 import { AuthLayout } from "../components/AuthLayout";
 import { useApp } from "../context/AppContext";
 import { authService } from "../services/authService";
+import { useLanguage } from "../context/LanguageContext";
 
 export const Register = () => {
     const { showToast } = useApp();
+    const { ui } = useLanguage();
     const [formData, setFormData] = useState({
         firstName: "",
         lastName: "",
@@ -28,11 +30,11 @@ export const Register = () => {
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (!Number.isSafeInteger(planId) || planId <= 0) {
-            setError("Please select a plan before registering.");
+            setError(ui.selectPlanFirst);
             return;
         }
         if (!formData.firstName || !formData.email || !formData.password || !formData.company) {
-            setError("Por favor completa todos los campos obligatorios.");
+            setError(ui.requiredFields);
             return;
         }
         setError("");
@@ -45,11 +47,11 @@ export const Register = () => {
                 registration_mode: registrationMode,
             });
             setLoading(false);
-            showToast("Account created successfully. Please sign in.", "success");
+            showToast(ui.accountCreated, "success");
             navigate("/login");
         } catch (err) {
             setLoading(false);
-            setError(err.message || "No se pudo conectar con el servidor.");
+            setError(err.message || ui.registerError);
         }
     };
 
@@ -64,8 +66,8 @@ export const Register = () => {
                     👤
                 </div>
 
-                <h2 className="fw-bold text-body fs-3 mb-1">Regístrate</h2>
-                <p className="text-muted small mb-4">Comienza a optimizar tu flujo de trabajo</p>
+                <h2 className="fw-bold text-body fs-3 mb-1">{ui.registerTitle}</h2>
+                <p className="text-muted small mb-4">{ui.registerSubtitle}</p>
 
                 {error && (
                     <div className="alert alert-danger py-2 small mb-3">
@@ -76,7 +78,7 @@ export const Register = () => {
                 <form onSubmit={handleSubmit} className="vstack gap-3">
                     <div className="row g-2">
                         <div className="col-6">
-                            <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>Nombre</label>
+                            <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>{ui.firstName}</label>
                             <input
                                 type="text"
                                 name="firstName"
@@ -87,7 +89,7 @@ export const Register = () => {
                             />
                         </div>
                         <div className="col-6">
-                            <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>Apellidos</label>
+                            <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>{ui.lastName}</label>
                             <input
                                 type="text"
                                 name="lastName"
@@ -100,31 +102,31 @@ export const Register = () => {
                     </div>
 
                     <div>
-                        <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>Email profesional</label>
+                        <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>{ui.professionalEmail}</label>
                         <input
                             type="email"
                             name="email"
                             value={formData.email}
                             onChange={handleChange}
-                            placeholder="tu@empresa.com"
+                            placeholder={ui.emailPlaceholder}
                             className="form-control bg-body text-body shadow-none py-2"
                         />
                     </div>
 
                     <div>
-                        <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>Empresa</label>
+                        <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>{ui.company}</label>
                         <input
                             type="text"
                             name="company"
                             value={formData.company}
                             onChange={handleChange}
-                            placeholder="Nombre de la empresa"
+                            placeholder={ui.companyName}
                             className="form-control bg-body text-body shadow-none py-2"
                         />
                     </div>
 
                     <div>
-                        <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>Contraseña</label>
+                        <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>{ui.password}</label>
                         <input
                             type="password"
                             name="password"
@@ -141,12 +143,12 @@ export const Register = () => {
                         className="w-100 py-2 btn text-white fw-semibold shadow-sm mt-2"
                         style={{ backgroundColor: "#9333ea", borderColor: "#9333ea" }}
                     >
-                        {loading ? "Procesando..." : "Create account"}
+                        {loading ? ui.processing : ui.createAccount}
                     </button>
                 </form>
 
                 <p className="text-center text-muted small mt-4 mb-0">
-                    ¿Ya tienes cuenta? <Link to="/login" className="fw-semibold text-decoration-none" style={{ color: "#9333ea" }}>Iniciar sesión</Link>
+                    {ui.haveAccount} <Link to="/login" className="fw-semibold text-decoration-none" style={{ color: "#9333ea" }}>{ui.signIn}</Link>
                 </p>
             </div>
         </AuthLayout>
diff --git a/src/front/pages/ResetPassword.jsx b/src/front/pages/ResetPassword.jsx
index acfb756..901c60b 100644
--- a/src/front/pages/ResetPassword.jsx
+++ b/src/front/pages/ResetPassword.jsx
@@ -3,9 +3,11 @@ import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { AuthLayout } from "../components/AuthLayout";
 import { authService } from "../services/authService";
 import { useApp } from "../context/AppContext";
+import { useLanguage } from "../context/LanguageContext";
 
 export const ResetPassword = () => {
     const { showToast } = useApp();
+    const { ui } = useLanguage();
     const [searchParams] = useSearchParams();
     const tokenFromUrl = searchParams.get("token");
 
@@ -18,7 +20,7 @@ export const ResetPassword = () => {
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (!tokenFromUrl || password.length < 12 || password.length > 128 || password !== confirmation) {
-            setError("Introduce una contraseña de 12 a 128 caracteres y una confirmación idéntica con un enlace válido.");
+            setError(ui.resetInvalid);
             return;
         }
         setError("");
@@ -27,11 +29,11 @@ export const ResetPassword = () => {
         try {
             await authService.resetPassword({ token: tokenFromUrl, password, password_confirmation: confirmation });
             setLoading(false);
-            showToast("Contraseña actualizada con éxito.", "success");
+            showToast(ui.resetSuccess, "success");
             navigate("/login", { state: { passwordReset: true }, replace: true });
         } catch (err) {
             setLoading(false);
-            setError(err.message || "Error al actualizar la contraseña.");
+            setError(err.message || ui.resetError);
         }
     };
 
@@ -42,8 +44,8 @@ export const ResetPassword = () => {
                     🔒
                 </div>
 
-                <h2 className="fw-bold text-body fs-3 mb-1">Nueva Contraseña</h2>
-                <p className="text-muted small mb-4">Introduce y confirma tu nueva contraseña</p>
+                <h2 className="fw-bold text-body fs-3 mb-1">{ui.resetTitle}</h2>
+                <p className="text-muted small mb-4">{ui.resetSubtitle}</p>
 
                 {error && (
                     <div className="alert alert-danger py-2 small mb-3">
@@ -51,10 +53,10 @@ export const ResetPassword = () => {
                     </div>
                 )}
 
-                {!tokenFromUrl && <div className="alert alert-danger">Enlace inválido. <Link to="/forgot-password">Solicita otro enlace</Link>.</div>}
+                {!tokenFromUrl && <div className="alert alert-danger">{ui.invalidLink} <Link to="/forgot-password">{ui.requestAnotherLink}</Link>.</div>}
                 <form onSubmit={handleSubmit} className="vstack gap-3">
                     <div>
-                        <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>Nueva Contraseña</label>
+                        <label className="form-label text-uppercase fw-bold text-secondary" style={{ fontSize: "0.7rem" }}>{ui.resetTitle}</label>
                         <input
                             type="password"
                             value={password}
@@ -68,7 +70,7 @@ export const ResetPassword = () => {
                         />
                     </div>
 
-                    <label className="form-label">Confirmar contraseña
+                    <label className="form-label">{ui.confirmPassword}
                         <input type="password" className="form-control" value={confirmation} onChange={e => setConfirmation(e.target.value)} required minLength={12} maxLength={128} autoComplete="new-password" />
                     </label>
                     <button
@@ -77,14 +79,14 @@ export const ResetPassword = () => {
                         className="w-100 py-2 btn text-white fw-semibold shadow-sm mt-2"
                         style={{ backgroundColor: "#9333ea", borderColor: "#9333ea" }}
                     >
-                        {loading ? "Actualizando..." : "Restablecer Contraseña"}
+                        {loading ? ui.updating : ui.resetPasswordAction}
                     </button>
                 </form>
 
                 <p className="text-center text-muted small mt-4 mb-0">
-                    <Link to="/login" className="fw-semibold text-decoration-none" style={{ color: "#9333ea" }}>← Volver al login</Link>
+                    <Link to="/login" className="fw-semibold text-decoration-none" style={{ color: "#9333ea" }}>← {ui.backToLogin}</Link>
                 </p>
             </div>
         </AuthLayout>
     );
-};
\ No newline at end of file
+};
diff --git a/src/front/pages/Settings.jsx b/src/front/pages/Settings.jsx
index 20d231d..ea274f6 100644
--- a/src/front/pages/Settings.jsx
+++ b/src/front/pages/Settings.jsx
@@ -2,81 +2,10 @@ import { useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import { useApp } from "../context/AppContext";
 import { useLanguage } from "../context/LanguageContext";
+import { settingsMessages } from "../i18n/settings.mjs";
 import { settingsService } from "../services/settingsService";
 import "./Settings.css";
 
-const copy = {
-    en: {
-        title: "Settings", subtitle: "Manage your company, workspace and connected services.",
-        company: "Company", appearance: "Appearance", users: "Users and permissions",
-        integrations: "Integrations", ai: "AI and knowledge", security: "Security",
-        companyIntro: "The information shown to your team and customers.", name: "Company name",
-        email: "Company email", phone: "Phone", timezone: "Timezone", colour: "Brand colour",
-        saveCompany: "Save company", appearanceIntro: "Choose the default experience for this workspace.",
-        theme: "Theme", system: "Use system", light: "Light", dark: "Dark", language: "Language",
-        density: "Interface density", comfortable: "Comfortable", compact: "Compact",
-        savePreferences: "Save preferences", usersIntro: "Manage who can access this company and what they can do.",
-        activeMembers: "active members", openTeam: "Manage team", integrationsIntro: "Configure channels without exposing private credentials in the browser.",
-        enabled: "Enabled", saveIntegration: "Save integration", emailChannel: "Email",
-        webChat: "Web chat", whatsapp: "WhatsApp", connected: "Configured", disconnected: "Disconnected",
-        smtpHost: "SMTP host", smtpPort: "SMTP port", encryption: "Encryption", sender: "Sender address",
-        displayName: "Display name", welcome: "Welcome message", accent: "Accent colour", whatsappNumber: "International number",
-        aiIntro: "Keep agents connected only to approved company knowledge.", activeAgents: "Active agents",
-        documents: "Documents", ready: "ready", manageAgents: "Manage agents", manageKnowledge: "Manage knowledge",
-        serviceReady: "AI service configured", serviceMissing: "AI service needs server configuration",
-        securityIntro: "Review account activity and close sessions you no longer use.", activeSessions: "Active sessions",
-        lastLogin: "Last login", never: "Not available", resetPassword: "Change password", closeSessions: "Close other sessions",
-        readOnly: "Your role can view these settings. An administrator must save workspace changes.",
-        loading: "Loading settings...", retry: "Try again", saved: "Changes saved.",
-    },
-    es: {
-        title: "Configuración", subtitle: "Gestiona tu empresa, el espacio de trabajo y los servicios conectados.",
-        company: "Empresa", appearance: "Apariencia", users: "Usuarios y permisos",
-        integrations: "Integraciones", ai: "IA y conocimiento", security: "Seguridad",
-        companyIntro: "La información que verá tu equipo y tus clientes.", name: "Nombre de la empresa",
-        email: "Email de la empresa", phone: "Teléfono", timezone: "Zona horaria", colour: "Color de marca",
-        saveCompany: "Guardar empresa", appearanceIntro: "Elige la experiencia predeterminada del espacio de trabajo.",
-        theme: "Tema", system: "Usar el sistema", light: "Claro", dark: "Oscuro", language: "Idioma",
-        density: "Densidad de la interfaz", comfortable: "Cómoda", compact: "Compacta",
-        savePreferences: "Guardar preferencias", usersIntro: "Gestiona quién accede a la empresa y qué puede hacer.",
-        activeMembers: "miembros activos", openTeam: "Gestionar equipo", integrationsIntro: "Configura canales sin exponer credenciales privadas en el navegador.",
-        enabled: "Activada", saveIntegration: "Guardar integración", emailChannel: "Email",
-        webChat: "Chat web", whatsapp: "WhatsApp", connected: "Configurada", disconnected: "Desconectada",
-        smtpHost: "Servidor SMTP", smtpPort: "Puerto SMTP", encryption: "Cifrado", sender: "Dirección remitente",
-        displayName: "Nombre visible", welcome: "Mensaje de bienvenida", accent: "Color de acento", whatsappNumber: "Número internacional",
-        aiIntro: "Mantén los agentes conectados solamente al conocimiento autorizado de la empresa.", activeAgents: "Agentes activos",
-        documents: "Documentos", ready: "listos", manageAgents: "Gestionar agentes", manageKnowledge: "Gestionar conocimiento",
-        serviceReady: "Servicio de IA configurado", serviceMissing: "El servicio de IA necesita configuración en el servidor",
-        securityIntro: "Revisa la actividad de la cuenta y cierra sesiones que ya no utilizas.", activeSessions: "Sesiones activas",
-        lastLogin: "Último acceso", never: "No disponible", resetPassword: "Cambiar contraseña", closeSessions: "Cerrar otras sesiones",
-        readOnly: "Tu rol puede consultar estos ajustes. Un administrador debe guardar los cambios del espacio.",
-        loading: "Cargando configuración...", retry: "Reintentar", saved: "Cambios guardados.",
-    },
-    pt: {
-        title: "Configurações", subtitle: "Gerencie sua empresa, o espaço de trabalho e os serviços conectados.",
-        company: "Empresa", appearance: "Aparência", users: "Usuários e permissões",
-        integrations: "Integrações", ai: "IA e conhecimento", security: "Segurança",
-        companyIntro: "As informações exibidas para sua equipe e seus clientes.", name: "Nome da empresa",
-        email: "Email da empresa", phone: "Telefone", timezone: "Fuso horário", colour: "Cor da marca",
-        saveCompany: "Salvar empresa", appearanceIntro: "Escolha a experiência padrão deste espaço de trabalho.",
-        theme: "Tema", system: "Usar o sistema", light: "Claro", dark: "Escuro", language: "Idioma",
-        density: "Densidade da interface", comfortable: "Confortável", compact: "Compacta",
-        savePreferences: "Salvar preferências", usersIntro: "Gerencie quem acessa esta empresa e o que pode fazer.",
-        activeMembers: "membros ativos", openTeam: "Gerenciar equipe", integrationsIntro: "Configure canais sem expor credenciais privadas no navegador.",
-        enabled: "Ativada", saveIntegration: "Salvar integração", emailChannel: "Email",
-        webChat: "Chat web", whatsapp: "WhatsApp", connected: "Configurada", disconnected: "Desconectada",
-        smtpHost: "Servidor SMTP", smtpPort: "Porta SMTP", encryption: "Criptografia", sender: "Endereço remetente",
-        displayName: "Nome visível", welcome: "Mensagem de boas-vindas", accent: "Cor de destaque", whatsappNumber: "Número internacional",
-        aiIntro: "Mantenha os agentes conectados apenas ao conhecimento autorizado da empresa.", activeAgents: "Agentes ativos",
-        documents: "Documentos", ready: "prontos", manageAgents: "Gerenciar agentes", manageKnowledge: "Gerenciar conhecimento",
-        serviceReady: "Serviço de IA configurado", serviceMissing: "O serviço de IA precisa de configuração no servidor",
-        securityIntro: "Revise a atividade da conta e encerre sessões que não usa mais.", activeSessions: "Sessões ativas",
-        lastLogin: "Último acesso", never: "Não disponível", resetPassword: "Alterar senha", closeSessions: "Encerrar outras sessões",
-        readOnly: "Sua função pode consultar estas configurações. Um administrador deve salvar alterações do espaço.",
-        loading: "Carregando configurações...", retry: "Tentar novamente", saved: "Alterações salvas.",
-    },
-};
-
 const integrationDefaults = {
     email: { smtp_host: "", smtp_port: 587, security: "starttls", from_address: "" },
     web_chat: { display_name: "ClientFlow", welcome_message: "Hola, ¿en qué podemos ayudarte?", accent_colour: "#635BFF" },
@@ -87,7 +16,7 @@ export const Settings = () => {
     const token = localStorage.getItem("access_token");
     const { theme, setTheme, density, setDensity } = useApp();
     const { locale, setLocale } = useLanguage();
-    const text = copy[locale] || copy.en;
+    const text = settingsMessages[locale] || settingsMessages.en;
     const [tab, setTab] = useState("company");
     const [data, setData] = useState(null);
     const [company, setCompany] = useState({});
diff --git a/src/front/pages/WebChatPage.jsx b/src/front/pages/WebChatPage.jsx
index fb368a3..8d0f349 100644
--- a/src/front/pages/WebChatPage.jsx
+++ b/src/front/pages/WebChatPage.jsx
@@ -1,8 +1,10 @@
 import { useRef, useState } from "react";
 import { WebChat } from "../components/WebChat";
 import { webChatService } from "../services/webChatService";
+import { useLanguage } from "../context/LanguageContext";
 
 export function WebChatPage() {
+    const { ui } = useLanguage();
     const [displayName, setDisplayName] = useState("");
     const [session, setSession] = useState(null);
     const [loading, setLoading] = useState(false);
@@ -20,7 +22,7 @@ export function WebChatPage() {
         try {
             const token = localStorage.getItem("access_token");
             if (!token) {
-                throw new Error("Sign in before creating a chat session.");
+                throw new Error(ui.createChatSession);
             }
 
             const apiUrl = (
@@ -33,14 +35,14 @@ export function WebChatPage() {
             });
 
             if (!response.ok) {
-                throw new Error("Unable to load your account.");
+                throw new Error(ui.accountLoadError);
             }
 
             const account = await response.json();
             const company = account.companies?.[0];
 
             if (!company) {
-                throw new Error("No company is available for this account.");
+                throw new Error(ui.noCompany);
             }
 
             const result = await webChatService.createSession(
@@ -59,17 +61,17 @@ export function WebChatPage() {
 
     return (
         <main className="container py-3">
-            <h1 className="h3">Web chat</h1>
+            <h1 className="h3">{ui.webChat}</h1>
 
             {session ? (
                 <>
-                    <p>Conversation #{session.conversation_id}</p>
+                    <p>{ui.conversationNumber.replace("{id}", session.conversation_id)}</p>
                     <WebChat token={session.token} />
                 </>
             ) : (
                 <form onSubmit={handleCreate} className="card p-3">
                     <label htmlFor="visitor-name" className="form-label">
-                        Visitor name
+                        {ui.visitorName}
                     </label>
                     <input
                         id="visitor-name"
@@ -88,7 +90,7 @@ export function WebChatPage() {
                         className="btn btn-primary mt-3"
                         disabled={loading || !displayName.trim()}
                     >
-                        {loading ? "Creating..." : "Start chat"}
+                        {loading ? ui.creating : ui.startChat}
                     </button>
                 </form>
             )}
diff --git a/src/front/routes.jsx b/src/front/routes.jsx
index 719bb62..6e0db5d 100644
--- a/src/front/routes.jsx
+++ b/src/front/routes.jsx
@@ -20,8 +20,15 @@ import { Register } from "./pages/Register";
 import { ResetPassword } from "./pages/ResetPassword";
 import { Settings } from "./pages/Settings";
 import { WebChatPage } from "./pages/WebChatPage";
+import { useLanguage } from "./context/LanguageContext";
+
+const LocalizedNotFound = () => {
+    const { ui } = useLanguage();
+    return <h1>{ui.notFound}</h1>;
+};
 
 const ProtectedRoute = ({ children }) => {
+    const { ui } = useLanguage();
     const token = localStorage.getItem("access_token");
     const [status, setStatus] = useState("loading");
     const [message, setMessage] = useState("");
@@ -49,14 +56,14 @@ const ProtectedRoute = ({ children }) => {
                 }
 
                 if (!meResponse.ok) {
-                    throw new Error("Unable to verify your account.");
+                    throw new Error(ui.accountLoadError);
                 }
 
                 const account = await meResponse.json();
                 const company = account.companies?.[0];
 
                 if (!company) {
-                    throw new Error("No company is available for this account.");
+                    throw new Error(ui.noCompany);
                 }
 
                 const response = await fetch(`${apiUrl}/api/auth/context`, {
@@ -75,13 +82,13 @@ const ProtectedRoute = ({ children }) => {
                 const data = await response.json();
 
                 if (!response.ok) {
-                    throw new Error(data.message || "Unable to verify your subscription.");
+                    throw new Error(data.message || ui.subscriptionVerifyError);
                 }
 
                 setStatus("allowed");
             } catch (error) {
                 if (controller.signal.aborted) return;
-                setMessage(error.message || "Unable to verify access.");
+                setMessage(error.message || ui.accessVerifyError);
                 setStatus("blocked");
             }
         };
@@ -95,14 +102,14 @@ const ProtectedRoute = ({ children }) => {
             window.clearInterval(interval);
             window.removeEventListener("focus", checkAccess);
         };
-    }, [token]);
+    }, [token, ui.accountLoadError, ui.accessVerifyError, ui.noCompany, ui.subscriptionVerifyError]);
 
     if (!token || status === "unauthorized") {
         return <Navigate to="/login" replace />;
     }
 
     if (status === "loading") {
-        return <p role="status">Checking your subscription...</p>;
+        return <p role="status">{ui.checkingSubscription}</p>;
     }
 
     if (status === "blocked") {
@@ -114,7 +121,7 @@ const ProtectedRoute = ({ children }) => {
                     className="btn btn-secondary"
                     onClick={() => window.location.reload()}
                 >
-                    Try again
+                    {ui.retry}
                 </button>
             </div>
         );
@@ -125,7 +132,7 @@ const ProtectedRoute = ({ children }) => {
 
 export const router = createBrowserRouter(
     createRoutesFromElements(
-        <Route path="/" element={<Layout />} errorElement={<h1>Not found!</h1>}>
+        <Route path="/" element={<Layout />} errorElement={<LocalizedNotFound />}>
             <Route path="accept-invitation" element={<AcceptInvitation />} />
             <Route index element={<Navigate to="/dashboard" replace />} />
 
diff --git a/tests/frontend/i18n.test.mjs b/tests/frontend/i18n.test.mjs
new file mode 100644
index 0000000..fcfb579
--- /dev/null
+++ b/tests/frontend/i18n.test.mjs
@@ -0,0 +1,49 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import test from "node:test";
+
+import {
+    interfaceText,
+    supportedInterfaceLocales,
+    validateInterfaceMessages,
+} from "../../src/front/i18n/messages.mjs";
+import {
+    literalTranslations,
+    translateLiteral,
+    validateLiteralTranslations,
+} from "../../src/front/i18n/literalTranslations.mjs";
+
+test("every interface message has English, Spanish and Portuguese text", () => {
+    assert.deepEqual(validateInterfaceMessages(), []);
+    assert.deepEqual(validateLiteralTranslations(), []);
+    assert.deepEqual(supportedInterfaceLocales, ["en", "es", "pt"]);
+
+    const expectedKeys = Object.keys(interfaceText("en"));
+    for (const locale of supportedInterfaceLocales) {
+        assert.deepEqual(Object.keys(interfaceText(locale)), expectedKeys);
+        assert.ok(Object.values(interfaceText(locale)).every((value) => value.trim()));
+    }
+});
+
+test("legacy operational phrases switch in either direction without a reload", () => {
+    for (const translations of literalTranslations) {
+        for (const targetLocale of supportedInterfaceLocales) {
+            assert.equal(
+                translateLiteral(translations.es, targetLocale),
+                translations[targetLocale]
+            );
+        }
+    }
+});
+
+test("language preference is persisted and the document language is updated", () => {
+    const source = readFileSync(
+        new URL("../../src/front/context/LanguageContext.jsx", import.meta.url),
+        "utf8"
+    );
+
+    assert.match(source, /localStorage\.getItem\("app_locale"\)/);
+    assert.match(source, /localStorage\.setItem\("app_locale", locale\)/);
+    assert.match(source, /document\.documentElement\.lang = locale/);
+    assert.match(source, /MutationObserver/);
+});