fix: cohort CAC/ROAS desde deals Clientify y más contraste en dashboards

Los totales de Métricas usaban solo ad_daily (cohort a 0). Ahora suman
deals won; selectores y tipografía ganan contraste sobre fondo blanco.

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

src/components/ui.tsx

@@ -24,7 +24,7 @@ export function PageHeader({
           {title}
         </h1>
         {description ? (
-          <p className="text-sm text-gray-500 max-w-2xl leading-relaxed">
+          <p className="text-sm text-gray-600 max-w-2xl leading-relaxed">
             {description}
           </p>
         ) : null}
@@ -85,10 +85,43 @@ export function EmptyState({
     <div className="rounded-2xl border border-dashed border-gray-300 bg-gray-50 px-6 py-10 text-center">
       <p className="text-sm font-medium text-gray-800">{title}</p>
       {description ? (
-        <p className="text-xs text-gray-500 mt-1.5 max-w-md mx-auto leading-relaxed">
+        <p className="text-xs text-gray-600 mt-1.5 max-w-md mx-auto leading-relaxed">
           {description}
         </p>
       ) : null}
     </div>
   );
 }
+
+/** Selector de periodo / pestañas — contraste alto sobre fondo blanco. */
+export function SegmentedControl<T extends string>({
+  value,
+  options,
+  onChange,
+  size = 'md',
+}: {
+  value: T;
+  options: { id: T; label: string }[];
+  onChange: (id: T) => void;
+  size?: 'sm' | 'md';
+}) {
+  const pad = size === 'sm' ? 'px-2.5 py-1 text-xs' : 'px-3 py-1.5 text-sm';
+  return (
+    <div className="flex gap-1 rounded-lg border border-gray-200 p-0.5 bg-gray-100">
+      {options.map((o) => (
+        <button
+          key={o.id}
+          type="button"
+          onClick={() => onChange(o.id)}
+          className={`${pad} rounded-md font-semibold transition-colors ${
+            value === o.id
+              ? 'bg-brand-500 text-white shadow-sm'
+              : 'text-gray-600 hover:text-gray-900 hover:bg-white'
+          }`}
+        >
+          {o.label}
+        </button>
+      ))}
+    </div>
+  );
+}