feat(F-113): completed feature

project/apps/admin/src/app/(dashboard)/settings/page.tsx

@@ -10,6 +10,7 @@ const TABS = [
   { id: 'footer', label: 'Footer', icon: '📄' },
   { id: 'ai', label: 'IA para SEO', icon: '✨' },
   { id: 'smtp', label: 'SMTP / Email', icon: '✉️' },
+  { id: 'couriers', label: 'Transportistas', icon: '🚚' },
 ] as const;
 type TabId = (typeof TABS)[number]['id'];
 
@@ -21,13 +22,21 @@ export default function SettingsPage() {
   const [msg, setMsg] = useState('');
   const [err, setErr] = useState('');
   const [tab, setTab] = useState<TabId>('general');
+  const [couriersText, setCouriersText] = useState('');
 
   useEffect(() => {
     settingsApi.get().then(d => {
       setData(d); setForm(d);
+      setCouriersText((d.couriers ?? []).join('\n'));
     }).catch(() => setErr('Error al cargar ajustes')).finally(() => setLoading(false));
   }, []);
 
+  const handleCouriersChange = (text: string) => {
+    setCouriersText(text);
+    const list = text.split('\n').map(c => c.trim()).filter(Boolean).slice(0, 30);
+    setForm(f => f ? { ...f, couriers: list } : f);
+  };
+
   const handleSave = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!form) return;
@@ -181,6 +190,25 @@ export default function SettingsPage() {
               </>
             )}
 
+            {tab === 'couriers' && (
+              <>
+                <div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
+                  <h2 className="text-base font-semibold text-gray-800">Transportistas</h2>
+                  <p className="text-xs text-gray-400 mt-0.5">Lista editable de transportistas. Se usa al marcar un pedido como enviado y aparece en el email al cliente. Uno por línea.</p>
+                </div>
+                <div className="p-6 space-y-5">
+                  <textarea
+                    value={couriersText}
+                    onChange={e => handleCouriersChange(e.target.value)}
+                    rows={8}
+                    placeholder={'Correos\nSEUR\nMRW'}
+                    className="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-[#2D6A4F] outline-none resize-none font-mono"
+                  />
+                  <p className="text-xs text-gray-400">Máximo 30 transportistas, cada nombre de hasta 60 caracteres.</p>
+                </div>
+              </>
+            )}
+
             {tab === 'footer' && (
               <>
                 <div className="px-6 py-4 bg-gray-50 border-b border-gray-200">