fix: creatividades — Google siempre con fallback; Meta preview 9:16 y textos reales

OAuth Ads caducado: aviso amable + campañas warehouse. Meta deja de volcar todas las variantes del asset_feed.

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

src/components/AdCreativesGallery.tsx

@@ -1,7 +1,11 @@
 'use client';
 
 import React, { useEffect } from 'react';
-import type { AdCreativeCard, CreativeAsset } from '@/lib/ad-creatives-meta';
+import type {
+  AdCreativeCard,
+  CreativeAspect,
+  CreativeAsset,
+} from '@/lib/ad-creatives-meta';
 import { formatEur, formatNum } from '@/lib/metrics';
 import { ImageIcon, Play, Maximize2, X, ExternalLink } from 'lucide-react';
 
@@ -31,29 +35,57 @@ function adAssets(ad: AdCreativeCard): CreativeAsset[] {
   if (ad.assets?.length) return ad.assets;
   const out: CreativeAsset[] = [];
   const u = ad.imageUrl || ad.thumbnailUrl;
-  if (u) out.push({ kind: 'image', url: u, label: 'preview' });
+  if (u) out.push({ kind: 'image', url: u, label: 'preview', aspect: '9:16' });
   if (ad.youtubeId) {
     out.push({
       kind: 'youtube',
       url: `https://i.ytimg.com/vi/${ad.youtubeId}/hqdefault.jpg`,
       youtubeId: ad.youtubeId,
       label: 'YOUTUBE',
+      aspect: '16:9',
     });
   }
   return out;
 }
 
+function resolveAspect(asset: CreativeAsset): CreativeAspect {
+  if (asset.aspect && asset.aspect !== 'unknown') return asset.aspect;
+  const L = (asset.label || '').toLowerCase();
+  if (/9\s*:?\s*16|story|reels|vertical|tall/.test(L)) return '9:16';
+  if (/4\s*:?\s*5|portrait/.test(L)) return '4:5';
+  if (/16\s*:?\s*9|1\.91|landscape|horizontal|youtube|video/.test(L)) {
+    return '16:9';
+  }
+  if (/1\s*:?\s*1|square|logo/.test(L)) return '1:1';
+  return 'unknown';
+}
+
+function aspectClass(aspect: CreativeAspect): string {
+  switch (aspect) {
+    case '9:16':
+      return 'aspect-[9/16]';
+    case '4:5':
+      return 'aspect-[4/5]';
+    case '16:9':
+      return 'aspect-video';
+    case '1:1':
+      return 'aspect-square';
+    default:
+      return 'aspect-[4/5]';
+  }
+}
+
 function previewUrlFor(ad: AdCreativeCard): string {
   const assets = adAssets(ad);
-  const portrait = assets.find(
-    (a) =>
-      a.kind === 'image' &&
-      /portrait|vertical|tall|TALL|PORTRAIT|story|4.?5|9.?16/i.test(
-        a.label || ''
-      )
+  const nine = assets.find(
+    (a) => a.kind === 'image' && resolveAspect(a) === '9:16'
+  );
+  const fourFive = assets.find(
+    (a) => a.kind === 'image' && resolveAspect(a) === '4:5'
   );
   const raw =
-    portrait?.url ||
+    nine?.url ||
+    fourFive?.url ||
     ad.imageUrl ||
     ad.thumbnailUrl ||
     assets.find((a) => a.kind === 'image')?.url ||
@@ -96,14 +128,13 @@ export function CreativesGallery({
       .find((w) =>
         platform === 'meta'
           ? /meta|token meta|sin ads meta/i.test(w)
-          : /google|pmax|rsa|sin ads google|sin assets/i.test(w)
-      ) || null;
-  const shownWarning =
-    filtered.length === 0 && warning
-      ? platformWarning || (ads.length === 0 ? warning : null)
-      : platformWarning && filtered.length === 0
-        ? platformWarning
-        : null;
+          : /google|pmax|rsa|sin ads google|sin assets|oauth|warehouse|reconecta/i.test(
+              w
+            )
+      ) ||
+    (platform === 'google' && warning && /google|oauth|token/i.test(warning)
+      ? warning
+      : null);
 
   return (
     <section className="space-y-3">
@@ -115,12 +146,12 @@ export function CreativesGallery({
           {platform === 'meta' ? 'Meta Ads' : 'Google Ads'} · creatividades
         </h3>
         <p className="text-xs text-gray-500 mt-1">
-          Preview vertical + textos. Pulsa Zoom para ver todas las piezas.
+          Preview 9:16. Pulsa Zoom para ver el resto de piezas en su formato.
         </p>
       </div>
-      {shownWarning ? (
-        <p className="text-xs text-amber-400/90 border border-amber-500/20 rounded-lg px-3 py-2">
-          {shownWarning}
+      {platformWarning ? (
+        <p className="text-xs text-amber-800 border border-amber-200 bg-amber-50 rounded-lg px-3 py-2">
+          {platformWarning}
         </p>
       ) : null}
       {loading ? (
@@ -155,17 +186,17 @@ function CreativeCard({
 }) {
   const preview = previewUrlFor(ad);
   const isVideo = ad.mediaType === 'video' || Boolean(ad.youtubeId);
-  const headlines = adHeadlines(ad);
-  const bodies = adDescriptions(ad);
+  const headline = adHeadlines(ad)[0] || '';
+  const body = adDescriptions(ad)[0] || '';
   const assets = adAssets(ad);
   const extraCount = Math.max(0, assets.length - 1);
 
   return (
-    <article className="grid gap-4 rounded-2xl border border-gray-200 bg-white p-4 md:grid-cols-[minmax(160px,220px)_1fr]">
+    <article className="grid gap-4 rounded-2xl border border-gray-200 bg-white p-4 md:grid-cols-[minmax(140px,180px)_1fr]">
       <button
         type="button"
         onClick={onZoom}
-        className="relative mx-auto w-full max-w-[220px] overflow-hidden rounded-xl bg-gray-100 border border-gray-200 aspect-[4/5] flex items-center justify-center group"
+        className="relative mx-auto w-full max-w-[180px] overflow-hidden rounded-xl bg-gray-100 border border-gray-200 aspect-[9/16] flex items-center justify-center group"
       >
         {preview ? (
           // eslint-disable-next-line @next/next/no-img-element
@@ -175,19 +206,14 @@ function CreativeCard({
             className="w-full h-full object-cover"
             loading="lazy"
           />
-        ) : ad.platform === 'google' && headlines.length ? (
+        ) : ad.platform === 'google' && headline ? (
           <div className="w-full h-full p-4 space-y-2 text-left bg-gradient-to-b from-[#1a2332] to-[#0d121f] flex flex-col justify-center">
             <p className="text-[10px] uppercase tracking-wider text-sky-400">
               Google · {ad.mediaType || 'rsa'}
             </p>
-            {headlines.slice(0, 3).map((h) => (
-              <p
-                key={h}
-                className="text-sm font-semibold text-blue-300 leading-snug"
-              >
-                {h}
-              </p>
-            ))}
+            <p className="text-sm font-semibold text-blue-300 leading-snug line-clamp-4">
+              {headline}
+            </p>
           </div>
         ) : (
           <div className="text-center text-gray-500 text-xs px-4">
@@ -202,7 +228,7 @@ function CreativeCard({
         ) : null}
         {extraCount > 0 ? (
           <span className="absolute top-2 right-2 rounded-full bg-black/70 px-2 py-1 text-[10px] text-white">
-            +{extraCount} assets
+            +{extraCount}
           </span>
         ) : null}
         <span className="absolute inset-x-0 bottom-0 translate-y-full group-hover:translate-y-0 transition-transform bg-black/75 text-white text-[11px] py-2 flex items-center justify-center gap-1">
@@ -232,72 +258,19 @@ function CreativeCard({
           {ad.adsetName ? (
             <p className="text-xs text-gray-400">Conjunto: {ad.adsetName}</p>
           ) : null}
-          <div className="flex flex-wrap gap-1.5 mt-2">
-            <span
-              className={`rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wide ${
-                ad.platform === 'meta'
-                  ? 'border border-violet-500/40 text-violet-300'
-                  : 'border border-sky-500/40 text-sky-300'
-              }`}
-            >
-              {ad.platform === 'meta' ? 'Meta' : 'Google'}
-            </span>
-            {ad.mediaType && ad.mediaType !== 'unknown' ? (
-              <span className="rounded-full border border-gray-200 px-2 py-0.5 text-[10px] uppercase text-gray-400">
-                {ad.mediaType}
-              </span>
-            ) : null}
-            {assets.length > 0 ? (
-              <span className="rounded-full border border-gray-200 px-2 py-0.5 text-[10px] text-gray-400">
-                {assets.length} piezas
-              </span>
-            ) : null}
-          </div>
         </div>
-        {(headlines.length > 0 || bodies.length > 0) && (
-          <div className="space-y-2 text-xs border border-gray-200 rounded-xl p-3 bg-gray-50">
-            {headlines.length > 0 ? (
-              <div>
-                <p className="text-[9px] uppercase tracking-wider text-gray-500 mb-1">
-                  Titulares
-                </p>
-                <ul className="space-y-1">
-                  {headlines.slice(0, 4).map((h) => (
-                    <li
-                      key={h}
-                      className="text-gray-800 font-medium leading-snug"
-                    >
-                      {h}
-                    </li>
-                  ))}
-                  {headlines.length > 4 ? (
-                    <li className="text-gray-500">+{headlines.length - 4} más</li>
-                  ) : null}
-                </ul>
-              </div>
+        {(headline || body) && (
+          <div className="space-y-1.5 text-xs border border-gray-200 rounded-xl p-3 bg-gray-50">
+            {headline ? (
+              <p className="text-gray-900 font-medium leading-snug line-clamp-2">
+                {headline}
+              </p>
             ) : null}
-            {bodies.length > 0 ? (
-              <div>
-                <p className="text-[9px] uppercase tracking-wider text-gray-500 mb-1">
-                  Textos / descripciones
-                </p>
-                <ul className="space-y-1.5">
-                  {bodies.slice(0, 3).map((b) => (
-                    <li
-                      key={b}
-                      className="text-gray-400 leading-relaxed line-clamp-3"
-                    >
-                      {b}
-                    </li>
-                  ))}
-                  {bodies.length > 3 ? (
-                    <li className="text-gray-500">+{bodies.length - 3} más</li>
-                  ) : null}
-                </ul>
-              </div>
+            {body ? (
+              <p className="text-gray-500 leading-relaxed line-clamp-3">{body}</p>
             ) : null}
             {ad.cta ? (
-              <p className="text-[10px] text-brand-700 uppercase tracking-wide">
+              <p className="text-[10px] text-brand-700 uppercase tracking-wide pt-1">
                 CTA · {ad.cta}
               </p>
             ) : null}
@@ -331,6 +304,9 @@ export function CreativeZoomModal({
   const images = assets.filter((a) => a.kind === 'image' || a.kind === 'logo');
   const videos = assets.filter((a) => a.kind === 'youtube' || a.kind === 'video');
   const main = previewUrlFor(ad);
+  const previewAsset =
+    images.find((a) => resolveAspect(a) === '9:16') || images[0];
+  const otherImages = images.filter((a) => a.url !== previewAsset?.url);
 
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -381,9 +357,9 @@ export function CreativeZoomModal({
         </header>
 
         <div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-6">
-          <div className="grid gap-6 lg:grid-cols-[minmax(220px,320px)_1fr]">
+          <div className="grid gap-6 lg:grid-cols-[minmax(200px,280px)_1fr]">
             <div className="space-y-3">
-              <div className="relative mx-auto w-full max-w-[320px] overflow-hidden rounded-2xl border border-gray-200 bg-black aspect-[4/5]">
+              <div className="relative mx-auto w-full max-w-[280px] overflow-hidden rounded-2xl border border-gray-200 bg-black aspect-[9/16]">
                 {main ? (
                   // eslint-disable-next-line @next/next/no-img-element
                   <img
@@ -397,6 +373,9 @@ export function CreativeZoomModal({
                   </div>
                 )}
               </div>
+              <p className="text-center text-[10px] uppercase tracking-wider text-gray-500">
+                Preview 9:16
+              </p>
               <div className="grid grid-cols-2 gap-2">
                 <MiniKpi label="Gasto" value={formatEur(ad.spend)} />
                 <MiniKpi label="Clics" value={formatNum(ad.clicks)} />
@@ -417,21 +396,11 @@ export function CreativeZoomModal({
                   Formato:{' '}
                   <span className="text-gray-600">{ad.mediaType || '—'}</span>
                 </p>
-                <p>
-                  Estado:{' '}
-                  <span className="text-gray-600">{ad.status || '—'}</span>
-                </p>
                 {ad.cta ? (
                   <p>
                     CTA: <span className="text-brand-700">{ad.cta}</span>
                   </p>
                 ) : null}
-                {ad.businessName ? (
-                  <p>
-                    Negocio:{' '}
-                    <span className="text-gray-600">{ad.businessName}</span>
-                  </p>
-                ) : null}
                 {ad.linkUrl ? (
                   <a
                     href={ad.linkUrl}
@@ -447,44 +416,37 @@ export function CreativeZoomModal({
             </div>
 
             <div className="space-y-5">
-              {images.length > 0 ? (
+              {otherImages.length > 0 ? (
                 <section>
                   <h3 className="text-sm font-semibold text-gray-900 mb-2">
-                    Imágenes y logos ({images.length})
+                    Otras piezas ({otherImages.length})
                   </h3>
-                  <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
-                    {images.map((asset, i) => (
-                      <figure
-                        key={`${asset.url}-${i}`}
-                        className="overflow-hidden rounded-xl border border-gray-200 bg-gray-100"
-                      >
-                        <div
-                          className={
-                            /PORTRAIT|TALL|vertical|story/i.test(
-                              asset.label || ''
-                            )
-                              ? 'aspect-[4/5]'
-                              : /SQUARE/i.test(asset.label || '')
-                                ? 'aspect-square'
-                                : 'aspect-video'
-                          }
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    {otherImages.map((asset, i) => {
+                      const aspect = resolveAspect(asset);
+                      return (
+                        <figure
+                          key={`${asset.url}-${i}`}
+                          className="overflow-hidden rounded-xl border border-gray-200 bg-gray-100"
                         >
-                          {/* eslint-disable-next-line @next/next/no-img-element */}
-                          <img
-                            src={proxiedMediaUrl(asset.url)}
-                            alt={asset.label || `asset-${i}`}
-                            className="w-full h-full object-cover"
-                            loading="lazy"
-                          />
-                        </div>
-                        {asset.label ? (
-                          <figcaption className="px-2 py-1 text-[9px] uppercase tracking-wider text-gray-500 truncate">
-                            {asset.label}
+                          <div
+                            className={`${aspectClass(aspect)} max-h-[420px] mx-auto w-full bg-black/5`}
+                          >
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <img
+                              src={proxiedMediaUrl(asset.url)}
+                              alt={asset.label || `asset-${i}`}
+                              className="w-full h-full object-contain"
+                              loading="lazy"
+                            />
+                          </div>
+                          <figcaption className="px-2 py-1.5 text-[10px] uppercase tracking-wider text-gray-500 truncate">
+                            {aspect !== 'unknown' ? aspect : asset.label || 'imagen'}
                             {asset.kind === 'logo' ? ' · logo' : ''}
                           </figcaption>
-                        ) : null}
-                      </figure>
-                    ))}
+                        </figure>
+                      );
+                    })}
                   </div>
                 </section>
               ) : null}
@@ -511,7 +473,7 @@ export function CreativeZoomModal({
                             />
                           </div>
                         ) : v.url ? (
-                          <div className="aspect-video relative">
+                          <div className="aspect-[9/16] relative max-h-[420px] mx-auto">
                             {/* eslint-disable-next-line @next/next/no-img-element */}
                             <img
                               src={proxiedMediaUrl(v.url)}
@@ -523,9 +485,6 @@ export function CreativeZoomModal({
                             </span>
                           </div>
                         ) : null}
-                        <p className="px-2 py-1.5 text-[10px] text-gray-400 truncate">
-                          {v.title || v.youtubeId || v.label || 'Vídeo'}
-                        </p>
                       </div>
                     ))}
                   </div>
@@ -535,10 +494,10 @@ export function CreativeZoomModal({
               {headlines.length > 0 ? (
                 <section>
                   <h3 className="text-sm font-semibold text-gray-900 mb-2">
-                    Titulares ({headlines.length})
+                    Titular
                   </h3>
                   <ul className="space-y-1.5 text-sm text-gray-800">
-                    {headlines.map((h) => (
+                    {headlines.slice(0, 2).map((h) => (
                       <li
                         key={h}
                         className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2"
@@ -553,10 +512,10 @@ export function CreativeZoomModal({
               {longH.length > 0 ? (
                 <section>
                   <h3 className="text-sm font-semibold text-gray-900 mb-2">
-                    Titulares largos ({longH.length})
+                    Titulares largos
                   </h3>
                   <ul className="space-y-1.5 text-sm text-gray-800">
-                    {longH.map((h) => (
+                    {longH.slice(0, 2).map((h) => (
                       <li
                         key={h}
                         className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2"
@@ -571,10 +530,10 @@ export function CreativeZoomModal({
               {bodies.length > 0 ? (
                 <section>
                   <h3 className="text-sm font-semibold text-gray-900 mb-2">
-                    Textos / descripciones ({bodies.length})
+                    Texto
                   </h3>
                   <ul className="space-y-2 text-sm text-gray-600">
-                    {bodies.map((b) => (
+                    {bodies.slice(0, 2).map((b) => (
                       <li
                         key={b}
                         className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 leading-relaxed whitespace-pre-wrap"

src/components/DriveConnectPanel.tsx

@@ -103,9 +103,10 @@ export default function DriveConnectPanel() {
             <p className="text-xs text-gray-600 mt-0.5 max-w-xl">
               Una sola conexión con{' '}
               <strong className="text-gray-800">marketing@4ventures.es</strong>.
-              En el consentimiento acepta Drive, Analytics y Search Console.
-              Sirve para carpetas Drive, GA4, GSC y (con MCC) Google Ads.
-              Tras el consentimiento se emparejan solos a las fichas.
+              En el consentimiento acepta Drive, Analytics, Search Console y{' '}
+              <strong className="text-gray-800">Google Ads</strong>.
+              Sirve para carpetas Drive, GA4, GSC y creatividades Google Ads.
+              Si ves error de token caducado en Ads, pulsa Reconectar Google.
             </p>
           </div>
         </div>