brickwise 0.1.0 → 0.1.5

package/src/app/globals.css

@@ -1,20 +1,64 @@
 @import "tailwindcss";
 
+/* ---- Local font (public/fonts) — titles only ------------------------ */
+
+@font-face {
+  font-family: "Stack Sans Notch";
+  src: url("/fonts/Stack_Sans_Notch/StackSansNotch-VariableFont_wght.ttf") format("truetype");
+  font-weight: 200 700;
+  font-display: swap;
+}
+
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #f5f5f5;
+  --foreground: #202020;
+  --font-title: "Stack Sans Notch", system-ui, sans-serif;
+  --font-button: var(--font-space-mono), ui-monospace, monospace;
+  --accent: #b84f30; /* ladrillo */
+  --accent-ink: #1a1208; /* texto casi negro sobre acento */
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-montserrat);
   --font-mono: var(--font-geist-mono);
 }
 
+@theme {
+  /* Neutral dark grays anchored to the #2c2c2c (44,44,44) background */
+  --color-neutral-950: #242424; /* deep insets / header */
+  --color-neutral-900: #2c2c2c; /* panels & cards == background */
+  --color-neutral-800: #383838; /* borders, dividers, hover (subtle) */
+  --color-neutral-700: #4a4a4a;
+
+  /* Brick accent — remaps every blue-* usage in the app to color ladrillo */
+  --color-blue-50: #faeee8;
+  --color-blue-100: #f5ddd2;
+  --color-blue-200: #eecebf;
+  --color-blue-300: #e0a98e;
+  --color-blue-400: #d97f5a;
+  --color-blue-500: #cd6240;
+  --color-blue-600: #b84f30;
+  --color-blue-700: #9a4126;
+  --color-blue-800: #7c3520;
+  --color-blue-900: #5a2718;
+  --color-blue-950: #38180e;
+
+  /* Minimalist: mostly-sharp corners */
+  --radius-xs: 0px;
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 2px;
+  --radius-xl: 2px;
+  --radius-2xl: 2px;
+  --radius-3xl: 2px;
+  --radius-4xl: 2px;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
+    --background: #2c2c2c; /* gris muy oscuro (44,44,44) */
     --foreground: #ededed;
   }
 }
@@ -22,12 +66,59 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: var(--font-geist-sans), system-ui, sans-serif;
+  font-family: var(--font-montserrat), system-ui, sans-serif;
+}
+
+/* ---- Type roles (base layer, so per-element utilities can override) --- */
+
+@layer base {
+  /* Titles (logo, headings) → Stack Sans Notch */
+  h1,
+  h2,
+  h3,
+  .font-brand {
+    font-family: var(--font-title);
+    letter-spacing: 0.01em;
+  }
+
+  /* Logo in uppercase */
+  .font-brand {
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  /* Button text → Space Mono, uppercase, flat */
+  button,
+  .btn-font {
+    font-family: var(--font-button);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+}
+
+/* Accent-background buttons → near-black ink (higher specificity than text-*) */
+button[class*="bg-blue-6"],
+button[class*="bg-blue-5"],
+.btn-font[class*="bg-blue-6"],
+.btn-font[class*="bg-blue-5"] {
+  color: var(--accent-ink);
+}
+
+/* ---- Minimalist: no hard/offset shadows ------------------------------ */
+
+.shadow-sm,
+.shadow-md {
+  box-shadow: none;
+}
+.shadow-lg {
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
+}
+.rounded-full {
+  border-radius: 2px;
 }
 
 /* ---- Map markers ---------------------------------------------------- */
 
-/* Property pin: pill with the yield + a small tail; the tail tip sits on the latlng. */
 .bw-pin {
   display: flex;
   flex-direction: column;
@@ -38,41 +129,47 @@ body {
 .bw-pin-label {
   background: var(--pin-color, #737373);
   color: #fff;
-  font: 700 11px/1 var(--font-geist-sans), system-ui, sans-serif;
-  padding: 5px 9px;
-  border-radius: 999px;
-  border: 2px solid #fff;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+  font: 700 11px/1 var(--font-button);
+  padding: 4px 8px;
+  border-radius: 2px;
+  border: 1px solid rgba(255, 255, 255, 0.85);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
   white-space: nowrap;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
 .bw-pin-tail {
   width: 0;
   height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 7px solid #fff;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid rgba(255, 255, 255, 0.85);
   margin-top: -1px;
-  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
 }
 .bw-pin--hl .bw-pin-label {
-  transform: scale(1.22);
-  box-shadow:
-    0 0 0 4px rgba(59, 130, 246, 0.5),
-    0 3px 10px rgba(0, 0, 0, 0.45);
+  transform: scale(1.2);
+  box-shadow: 0 0 0 3px rgba(184, 79, 48, 0.6);
+}
+
+/* Filtered-out markers: darker + transparent */
+.bw-pin--dim {
+  opacity: 0.4;
+}
+.bw-pin--dim .bw-pin-label {
+  filter: grayscale(0.75) brightness(0.5);
+  border-color: rgba(255, 255, 255, 0.4);
 }
 
-/* Gym marker: blue disc with a white dumbbell. */
+/* Gym marker: brick square with a white dumbbell. */
 .bw-gym {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: #1d4ed8;
-  border: 2px solid #fff;
+  width: 24px;
+  height: 24px;
+  border-radius: 2px;
+  background: var(--accent);
+  border: 1px solid rgba(255, 255, 255, 0.85);
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
   transform: translate(-50%, -50%);
   cursor: pointer;
 }

package/src/app/layout.tsx

@@ -1,10 +1,16 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist_Mono, Montserrat, Space_Mono } from "next/font/google";
 import ChromeHeader from "@/components/ChromeHeader";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const montserrat = Montserrat({
+  variable: "--font-montserrat",
+  subsets: ["latin"],
+});
+
+const spaceMono = Space_Mono({
+  variable: "--font-space-mono",
+  weight: ["400", "700"],
   subsets: ["latin"],
 });
 
@@ -26,7 +32,7 @@ export default function RootLayout({
   return (
     <html
       lang="es"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${montserrat.variable} ${spaceMono.variable} ${geistMono.variable} h-full antialiased`}
     >
       <body className="flex min-h-svh flex-col bg-neutral-50 text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100">
         <ChromeHeader />

package/src/app/listing/[id]/page.tsx

@@ -4,6 +4,7 @@ import { use, useEffect, useState } from "react";
 import YieldBadge from "@/components/YieldBadge";
 import TransactionsTable from "@/components/TransactionsTable";
 import PsqftChart from "@/components/PsqftChart";
+import ReformScenario from "@/components/ReformScenario";
 import { fmtAED, fmtDist, fmtPct, fmtSqft } from "@/lib/format";
 import { AnalysisRow } from "@/lib/types";
 import { TxRow } from "@/lib/pf/transactions";
@@ -96,7 +97,7 @@ export default function ListingPage({ params }: { params: Promise<{ id: string }
             disabled={faved}
             className="rounded-lg border border-neutral-300 px-3 py-1 text-sm font-medium hover:bg-neutral-100 disabled:opacity-60 dark:border-neutral-700 dark:hover:bg-neutral-800"
           >
-            {faved ? "⭐ Guardado" : "☆ Guardar en favoritos"}
+            {faved ? "Guardado" : "Guardar en favoritos"}
           </button>
         </div>
       </div>
@@ -152,12 +153,18 @@ export default function ListingPage({ params }: { params: Promise<{ id: string }
         <Stat
           label="Se alquila por (año, mediana)"
           value={fmtAED(analysis.median_rent)}
-          sub={`${analysis.rent_n} contrato${analysis.rent_n === 1 ? "" : "s"} de alquiler comparables (24 meses)`}
+          sub={`${analysis.rent_n} alquiler${analysis.rent_n === 1 ? "" : "es"} de tamaño similar (±20%, 24 meses)${
+            analysis.rent_p25 != null && analysis.rent_p75 != null
+              ? ` · rango ${fmtAED(analysis.rent_p25)}–${fmtAED(analysis.rent_p75)}`
+              : ""
+          }`}
         />
         <Stat
           label="Se vende por (mediana)"
           value={fmtAED(analysis.median_sale_price)}
-          sub={`${analysis.buy_n} venta${analysis.buy_n === 1 ? "" : "s"} comparables (24 meses)`}
+          sub={`${analysis.buy_n} venta${analysis.buy_n === 1 ? "" : "s"} de tamaño similar (±20%, 24 meses)${
+            analysis.sale_p25 != null ? ` · objetivo compra p/ reformar ≈ ${fmtAED(analysis.sale_p25)} (P25)` : ""
+          }`}
         />
         <Stat
           label="Rentabilidad sobre el precio del anuncio"
@@ -182,11 +189,19 @@ export default function ListingPage({ params }: { params: Promise<{ id: string }
         </div>
       )}
 
+      <ReformScenario
+        listingId={listing.id}
+        price={listing.price}
+        sizeSqft={listing.size_sqft}
+        analysis={analysis}
+      />
+
       {transactions && (transactions.buy.length > 0 || transactions.rent.length > 0) && (
         <PsqftChart
           buy={transactions.buy}
           rent={transactions.rent}
           listingBedrooms={listing.bedrooms}
+          listingSizeSqft={listing.size_sqft}
           listingPsqft={listing.size_sqft ? listing.price / listing.size_sqft : null}
         />
       )}

package/src/app/page.tsx

@@ -70,10 +70,10 @@ export default function Dashboard() {
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">Inmuebles analizados</h1>
         <Link
-          href="/search"
-          className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white hover:bg-blue-500"
+          href="/favorites"
+          className="btn-font rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white hover:bg-blue-500"
         >
-          + Nueva búsqueda
+          + Añadir inmuebles
         </Link>
       </div>
 
@@ -81,9 +81,9 @@ export default function Dashboard() {
         <p className="animate-pulse text-neutral-500">Cargando…</p>
       ) : sorted.length === 0 ? (
         <div className="rounded-xl border border-dashed border-neutral-300 p-10 text-center text-neutral-500 dark:border-neutral-700">
-          Aún no hay inmuebles analizados. Empieza con una{" "}
-          <Link href="/search" className="font-semibold text-blue-600 hover:underline dark:text-blue-400">
-            búsqueda
+          Aún no hay inmuebles analizados. Añade enlaces de Property Finder en{" "}
+          <Link href="/favorites" className="font-semibold text-blue-600 hover:underline dark:text-blue-400">
+            Favoritos + Mapa
           </Link>
           .
         </div>

package/src/app/search/page.tsx

@@ -1,87 +1,5 @@
-"use client";
+import { redirect } from "next/navigation";
 
-import { useState } from "react";
-import FiltersForm from "@/components/FiltersForm";
-import ListingCard, { CardListing } from "@/components/ListingCard";
-import { AnalysisRow, SearchFilters } from "@/lib/types";
-
-export default function SearchPage() {
-  const [results, setResults] = useState<CardListing[]>([]);
-  const [analyses, setAnalyses] = useState<Record<string, AnalysisRow>>({});
-  const [totalCount, setTotalCount] = useState<number | null>(null);
-  const [duplicatesRemoved, setDuplicatesRemoved] = useState(0);
-  const [searching, setSearching] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [maxGymM, setMaxGymM] = useState<number | undefined>(undefined);
-
-  const search = async (f: SearchFilters) => {
-    setSearching(true);
-    setError(null);
-    setResults([]);
-    setAnalyses({});
-    setMaxGymM(f.maxGymDistanceM);
-    try {
-      const res = await fetch("/api/search", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(f),
-      });
-      const j = await res.json();
-      if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
-      setResults(j.results);
-      const cached: Record<string, AnalysisRow> = {};
-      for (const r of j.results) if (r.analysis) cached[r.id] = r.analysis;
-      setAnalyses(cached);
-      setTotalCount(j.totalCount);
-      setDuplicatesRemoved(j.duplicatesRemoved ?? 0);
-    } catch (e) {
-      setError((e as Error).message);
-    } finally {
-      setSearching(false);
-    }
-  };
-
-  const visible = results.filter((r) => {
-    if (maxGymM == null) return true;
-    const a = analyses[r.id];
-    if (!a) return true; // keep while analysis pending
-    return a.gym_distance_m != null && a.gym_distance_m <= maxGymM;
-  });
-
-  return (
-    <div className="mx-auto flex w-full max-w-7xl flex-col gap-5 px-4 py-6">
-      <h1 className="text-2xl font-bold">Buscar inmuebles</h1>
-      <FiltersForm onSearch={search} searching={searching} />
-
-      {error && (
-        <div className="rounded-lg border border-red-300 bg-red-50 p-3 text-sm text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-300">
-          Error: {error}
-        </div>
-      )}
-
-      {totalCount != null && (
-        <p className="text-sm text-neutral-600 dark:text-neutral-400">
-          {visible.length} mostrados de {results.length} únicos ({totalCount.toLocaleString()} en Property Finder)
-          {duplicatesRemoved > 0 && (
-            <span className="ml-1 rounded-full bg-neutral-200 px-2 py-0.5 text-xs font-medium text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300">
-              {duplicatesRemoved} duplicado{duplicatesRemoved === 1 ? "" : "s"} agrupado{duplicatesRemoved === 1 ? "" : "s"}
-            </span>
-          )}
-          . Pulsa <span className="font-semibold">⚡ Analizar</span> en los inmuebles que te interesen (los ya analizados
-          muestran su rentabilidad al instante).
-        </p>
-      )}
-
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-        {visible.map((r) => (
-          <ListingCard
-            key={r.id}
-            listing={r}
-            analysis={analyses[r.id] ?? null}
-            onAnalyzed={(id, a) => setAnalyses((prev) => ({ ...prev, [id]: a }))}
-          />
-        ))}
-      </div>
-    </div>
-  );
+export default function SearchRemoved() {
+  redirect("/favorites");
 }

package/src/components/Nav.tsx

@@ -4,17 +4,16 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 const ITEMS = [
-  { href: "/search", label: "🔍 Buscar" },
-  { href: "/favorites", label: "⭐ Favoritos + Mapa" },
-  { href: "/", label: "📊 Analizados" },
+  { href: "/favorites", label: "Favoritos + Mapa" },
+  { href: "/", label: "Analizados" },
 ];
 
 export default function Nav() {
   const pathname = usePathname();
   return (
     <nav className="mx-auto flex h-14 w-full max-w-[1800px] items-center gap-2 px-4">
-      <Link href="/" className="mr-4 flex items-center gap-2 text-lg font-bold tracking-tight">
-        🧱 Brickwise
+      <Link href="/" className="font-brand mr-4 flex items-center gap-2 text-lg font-bold tracking-tight">
+        Brickwise
       </Link>
       {ITEMS.map((it) => {
         const active = it.href === "/" ? pathname === "/" : pathname.startsWith(it.href);
@@ -22,7 +21,7 @@ export default function Nav() {
           <Link
             key={it.href}
             href={it.href}
-            className={`rounded-full px-3 py-1.5 text-sm font-medium transition ${
+            className={`btn-font rounded-full px-3 py-1.5 text-sm font-medium transition ${
               active
                 ? "bg-neutral-900 text-white dark:bg-white dark:text-neutral-900"
                 : "text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-white"

package/src/components/PsqftChart.tsx

@@ -7,9 +7,12 @@ interface Props {
   buy: TxRow[];
   rent: TxRow[];
   listingBedrooms: number | null;
+  listingSizeSqft: number | null;
   listingPsqft: number | null; // asking price / size
 }
 
+const SIZE_TOLERANCE = 0.2;
+
 interface Pt {
   t: number; // date ms
   y: number; // AED/sqft
@@ -25,9 +28,10 @@ const M = { top: 16, right: 16, bottom: 34, left: 52 };
 const IW = W - M.left - M.right;
 const IH = H - M.top - M.bottom;
 
-const ACCENT = "#2563eb"; // comparable (same bedrooms)
+const ACCENT = "#b84f30"; // comparable (similar size) — brick accent
 const MUTED = "#9ca3af"; // other units
 const REF = "#059669"; // this listing
+const TREND = "#7c3aed"; // tendency line
 
 function niceTicks(min: number, max: number, count: number): number[] {
   if (min === max) return [min];
@@ -47,7 +51,7 @@ const fmtMonth = (ms: number) =>
 const fmtDate = (ms: number) => new Date(ms).toLocaleDateString("es-ES");
 const fmtAED = (n: number) => new Intl.NumberFormat("en-AE", { maximumFractionDigits: 0 }).format(n);
 
-export default function PsqftChart({ buy, rent, listingBedrooms, listingPsqft }: Props) {
+export default function PsqftChart({ buy, rent, listingBedrooms, listingSizeSqft, listingPsqft }: Props) {
   const [mode, setMode] = useState<"buy" | "rent">("buy");
   const [hover, setHover] = useState<{ p: Pt; x: number; y: number } | null>(null);
 
@@ -63,11 +67,15 @@ export default function PsqftChart({ buy, rent, listingBedrooms, listingPsqft }:
           bedrooms: r.bedrooms,
           amount: r.amount,
           size: r.size_sqft,
-          comparable: listingBedrooms != null && r.bedrooms === listingBedrooms,
+          // Same criterion as the yield sample: similar size first, bedrooms fallback.
+          comparable:
+            listingSizeSqft != null
+              ? Math.abs((r.size_sqft as number) - listingSizeSqft) / listingSizeSqft <= SIZE_TOLERANCE
+              : listingBedrooms != null && r.bedrooms === listingBedrooms,
         }))
         .filter((p) => Number.isFinite(p.t) && Number.isFinite(p.y))
         .sort((a, b) => a.t - b.t),
-    [rows, listingBedrooms]
+    [rows, listingBedrooms, listingSizeSqft]
   );
 
   const scales = useMemo(() => {
@@ -77,18 +85,43 @@ export default function PsqftChart({ buy, rent, listingBedrooms, listingPsqft }:
     const refY = mode === "buy" ? listingPsqft ?? null : null;
     const tMin = Math.min(...ts);
     const tMax = Math.max(...ts);
-    let yMin = Math.min(...ys, ...(refY ? [refY] : []));
-    let yMax = Math.max(...ys, ...(refY ? [refY] : []));
+
+    // Least-squares trend over comparable units (fallback to all) — the tendency.
+    const comp = pts.filter((p) => p.comparable);
+    const fitSet = comp.length >= 2 ? comp : pts;
+    let trend: { y0: number; y1: number; annualPct: number | null } | null = null;
+    if (fitSet.length >= 2 && tMax > tMin) {
+      const n = fitSet.length;
+      const mt = fitSet.reduce((s, p) => s + p.t, 0) / n;
+      const my = fitSet.reduce((s, p) => s + p.y, 0) / n;
+      let num = 0;
+      let den = 0;
+      for (const p of fitSet) {
+        num += (p.t - mt) * (p.y - my);
+        den += (p.t - mt) ** 2;
+      }
+      const slope = den ? num / den : 0; // AED/sqft per ms
+      const intercept = my - slope * mt;
+      const YEAR = 365.25 * 24 * 3600 * 1000;
+      trend = {
+        y0: intercept + slope * tMin,
+        y1: intercept + slope * tMax,
+        annualPct: my ? (slope * YEAR) / my : null,
+      };
+    }
+
+    const extra = [...(refY ? [refY] : []), ...(trend ? [trend.y0, trend.y1] : [])];
+    let yMin = Math.min(...ys, ...extra);
+    let yMax = Math.max(...ys, ...extra);
     const pad = (yMax - yMin) * 0.1 || yMax * 0.1 || 1;
     yMin = Math.max(0, yMin - pad);
     yMax = yMax + pad;
     const x = (t: number) => (tMax === tMin ? IW / 2 : ((t - tMin) / (tMax - tMin)) * IW);
     const y = (v: number) => IH - ((v - yMin) / (yMax - yMin)) * IH;
     // median of comparable set (fallback to all)
-    const comp = pts.filter((p) => p.comparable);
     const base = (comp.length ? comp : pts).map((p) => p.y).sort((a, b) => a - b);
     const median = base.length ? base[Math.floor(base.length / 2)] : null;
-    return { x, y, tMin, tMax, yMin, yMax, refY, median };
+    return { x, y, tMin, tMax, yMin, yMax, refY, median, trend };
   }, [pts, mode, listingPsqft]);
 
   const compCount = pts.filter((p) => p.comparable).length;
@@ -181,24 +214,44 @@ export default function PsqftChart({ buy, rent, listingBedrooms, listingPsqft }:
                 </>
               )}
 
-              {/* points: muted first, comparable on top */}
+              {/* trend (least-squares) line */}
+              {scales.trend && (
+                <line
+                  x1={scales.x(scales.tMin)}
+                  x2={scales.x(scales.tMax)}
+                  y1={scales.y(scales.trend.y0)}
+                  y2={scales.y(scales.trend.y1)}
+                  stroke={TREND}
+                  strokeWidth={2.5}
+                  strokeLinecap="round"
+                />
+              )}
+
+              {/* points: muted first, comparable on top; small dot + invisible hit area */}
               {pts
                 .slice()
                 .sort((a, b) => Number(a.comparable) - Number(b.comparable))
                 .map((p, i) => (
-                  <circle
-                    key={i}
-                    cx={scales.x(p.t)}
-                    cy={scales.y(p.y)}
-                    r={p.comparable ? 5 : 3.5}
-                    fill={p.comparable ? ACCENT : "none"}
-                    stroke={p.comparable ? "#fff" : MUTED}
-                    strokeWidth={p.comparable ? 1.5 : 1.5}
-                    opacity={p.comparable ? 1 : 0.7}
-                    onMouseEnter={() => setHover({ p, x: scales.x(p.t), y: scales.y(p.y) })}
-                    onMouseLeave={() => setHover(null)}
-                    style={{ cursor: "pointer" }}
-                  />
+                  <g key={i}>
+                    <circle
+                      cx={scales.x(p.t)}
+                      cy={scales.y(p.y)}
+                      r={p.comparable ? 3 : 2}
+                      fill={p.comparable ? ACCENT : MUTED}
+                      stroke="#fff"
+                      strokeWidth={p.comparable ? 1 : 0.5}
+                      opacity={p.comparable ? 1 : 0.7}
+                    />
+                    <circle
+                      cx={scales.x(p.t)}
+                      cy={scales.y(p.y)}
+                      r={8}
+                      fill="transparent"
+                      onMouseEnter={() => setHover({ p, x: scales.x(p.t), y: scales.y(p.y) })}
+                      onMouseLeave={() => setHover(null)}
+                      style={{ cursor: "pointer" }}
+                    />
+                  </g>
                 ))}
             </g>
           </svg>
@@ -225,7 +278,7 @@ export default function PsqftChart({ buy, rent, listingBedrooms, listingPsqft }:
           <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-neutral-500">
             <span className="flex items-center gap-1.5">
               <span className="inline-block h-2.5 w-2.5 rounded-full" style={{ background: ACCENT }} />
-              Mismo nº de habitaciones ({compCount})
+              {listingSizeSqft != null ? "Tamaño similar (±20%)" : "Mismo nº de habitaciones"} ({compCount})
             </span>
             <span className="flex items-center gap-1.5">
               <span className="inline-block h-2.5 w-2.5 rounded-full border-[1.5px]" style={{ borderColor: MUTED }} />
@@ -235,6 +288,16 @@ export default function PsqftChart({ buy, rent, listingBedrooms, listingPsqft }:
               <span className="inline-block h-0 w-4 border-t-[1.5px] border-dashed" style={{ borderColor: MUTED }} />
               Mediana
             </span>
+            {scales.trend && (
+              <span className="flex items-center gap-1.5">
+                <span className="inline-block h-0 w-4 border-t-[2.5px]" style={{ borderColor: TREND }} />
+                <span style={{ color: TREND }} className="font-semibold">
+                  Tendencia
+                  {scales.trend.annualPct != null &&
+                    ` (${scales.trend.annualPct >= 0 ? "+" : ""}${(scales.trend.annualPct * 100).toFixed(1)} %/año)`}
+                </span>
+              </span>
+            )}
             {mode === "buy" && listingPsqft != null && (
               <span className="flex items-center gap-1.5">
                 <span className="inline-block h-0 w-4 border-t-2" style={{ borderColor: REF }} />