fix(brandkit): permitir frases en léxico y formato con botones

El trim en cada tecla impedía escribir espacios en listas (léxico).
El formato de pieza usa los mismos botones que el filtro, sin dropdown.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/BrandZone.tsx

@@ -35,6 +35,7 @@ import type { B2BAnalysisResult } from '@/lib/b2b-analyzer';
 import {
   ASSET_KIND_LABELS,
   emptyBrandbook,
+  finalizeLinesList,
   linesToList,
   listToLines,
   newId,
@@ -278,11 +279,23 @@ export default function BrandZone({
     setErr(null);
     setOkMsg(null);
     try {
+      // Trim list fields only on save — mid-edit we keep spaces so phrases work.
+      const cleaned = { ...book } as Brandbook & Record<string, unknown>;
+      for (const key of Object.keys(cleaned)) {
+        const v = cleaned[key];
+        if (
+          Array.isArray(v) &&
+          v.length >= 0 &&
+          v.every((x) => typeof x === 'string')
+        ) {
+          cleaned[key] = finalizeLinesList(v as string[]);
+        }
+      }
       const query = tenantId ? `?tenant_id=${encodeURIComponent(tenantId)}` : '';
       const r = await fetch(`/api/brandbook${query}`, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ brandbook: book, tenant_id: tenantId }),
+        body: JSON.stringify({ brandbook: cleaned, tenant_id: tenantId }),
       });
       const j = await r.json();
       if (!r.ok) throw new Error(j.error || 'No se pudo guardar');
@@ -1061,6 +1074,7 @@ export default function BrandZone({
               <Field label="Léxico preferido">
                 <textarea
                   className={areaCls}
+                  placeholder="Una frase o palabra por línea&#10;Ej: agua remineralizada&#10;bienestar sin postureo"
                   value={listToLines(book.vocabulary_prefer)}
                   onChange={(e) =>
                     patch({ vocabulary_prefer: linesToList(e.target.value) })
@@ -1070,6 +1084,7 @@ export default function BrandZone({
               <Field label="Léxico a evitar">
                 <textarea
                   className={areaCls}
+                  placeholder="Una frase o palabra por línea"
                   value={listToLines(book.vocabulary_avoid)}
                   onChange={(e) =>
                     patch({ vocabulary_avoid: linesToList(e.target.value) })

src/components/CreativePipelineBoard.tsx

@@ -959,9 +959,9 @@ export default function CreativePipelineBoard() {
           })}
         </div>
 
-        {/* Formatos pills */}
+        {/* Formatos pills — filtro del listado */}
         <div className="flex flex-wrap items-center gap-1.5 pt-1">
-          <span className="text-xs text-gray-400 mr-1">Formato:</span>
+          <span className="text-xs text-gray-400 mr-1">Filtrar:</span>
           {['all', 'carrusel', 'reel', 'post', 'story'].map((f) => {
             const active = selectedFormat === f;
             const label =
@@ -1033,20 +1033,38 @@ export default function CreativePipelineBoard() {
               </div>
               <div>
                 <label className="block text-xs font-medium text-gray-600">
-                  Formato
+                  Formato de la pieza
                 </label>
-                <select
+                <div className="mt-1 flex flex-wrap gap-1.5">
-                  value={newFormat}
+                  {(
-                  onChange={(e) =>
+                    [
-                    setNewFormat(e.target.value as PipelineItem['format'])
+                      ['post', 'Post'],
-                  }
+                      ['story', 'Story'],
-                  className="mt-1 w-full rounded-lg border border-gray-200 px-3 py-2 text-sm"
+                      ['reel', 'Reel'],
+                      ['carrusel', 'Carrusel'],
+                    ] as const
+                  ).map(([value, label]) => {
+                    const active = newFormat === value;
+                    return (
+                      <button
+                        key={value}
+                        type="button"
+                        onClick={() => setNewFormat(value)}
+                        className={`rounded-full border px-3 py-1 text-xs font-semibold transition-colors ${
+                          active
+                            ? 'border-brand-600 bg-brand-600 text-white'
+                            : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'
+                        }`}
                       >
-                  <option value="post">Post</option>
+                        {label}
-                  <option value="story">Story</option>
+                      </button>
-                  <option value="reel">Reel</option>
+                    );
-                  <option value="carrusel">Carrusel</option>
+                  })}
-                </select>
+                </div>
+                <p className="mt-1 text-[10px] text-gray-400">
+                  Los botones de arriba filtran el listado; estos eligen el
+                  formato al crear.
+                </p>
               </div>
               <div>
                 <label className="block text-xs font-medium text-gray-600">
@@ -2018,23 +2036,35 @@ function DetailModal({
                       className="mt-1 w-full rounded-lg border border-gray-200 px-2 py-1.5 text-sm font-semibold text-gray-900"
                     />
                   </label>
-                  <label className="block text-xs font-semibold text-gray-600">
+                  <div>
-                    Formato
+                    <p className="text-xs font-semibold text-gray-600">Formato</p>
-                    <select
+                    <div className="mt-1 flex flex-wrap gap-1.5">
-                      value={editFormat}
+                      {(
-                      onChange={(e) =>
+                        [
-                        setEditFormat(
+                          ['post', 'Post'],
-                          e.target.value as PipelineItem['format']
+                          ['story', 'Story'],
-                        )
+                          ['reel', 'Reel'],
-                      }
+                          ['carrusel', 'Carrusel'],
-                      className="mt-1 w-full rounded-lg border border-gray-200 px-2 py-1.5 text-sm text-gray-900"
+                        ] as const
+                      ).map(([value, label]) => {
+                        const active = editFormat === value;
+                        return (
+                          <button
+                            key={value}
+                            type="button"
+                            onClick={() => setEditFormat(value)}
+                            className={`rounded-full border px-2.5 py-1 text-[11px] font-semibold transition-colors ${
+                              active
+                                ? 'border-brand-600 bg-brand-600 text-white'
+                                : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'
+                            }`}
                           >
-                      <option value="post">Post</option>
+                            {label}
-                      <option value="story">Story</option>
+                          </button>
-                      <option value="reel">Reel</option>
+                        );
-                      <option value="carrusel">Carrusel</option>
+                      })}
-                    </select>
+                    </div>
-                  </label>
+                  </div>
                   <p className="text-xs text-gray-500">
                     {monthLabel(item.month)}{' '}
                     {item.external_ref ? `· Ref: ${item.external_ref}` : ''}

src/lib/brandbook.ts

@@ -1901,11 +1901,23 @@ function arr(v: unknown): string[] {
   return v.map((x) => String(x || '').trim()).filter(Boolean);
 }
 
+/**
+ * Textarea ↔ string[] for brandbook list fields.
+ * - One entry per line (Enter = nueva entrada).
+ * - Spaces and commas stay inside the phrase (no split on ",").
+ * - Do NOT trim the last line on every keystroke — that blocked typing
+ *   a space after the first word ("solo una palabra").
+ */
 export function linesToList(text: string): string[] {
-  return text
+  const parts = String(text ?? '').split('\n');
-    .split(/\n|,/)
+  return parts
-    .map((s) => s.trim())
+    .map((s, i) => (i === parts.length - 1 ? s : s.trim()))
-    .filter(Boolean);
+    .filter((s, i, arr) => s.trim().length > 0 || i === arr.length - 1);
+}
+
+/** Finalize list for persistence (trim, drop empties). */
+export function finalizeLinesList(list: string[]): string[] {
+  return (list || []).map((s) => String(s || '').trim()).filter(Boolean);
 }
 
 export function listToLines(list: string[]): string {