brickwise 0.1.1 → 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,7 +28,7 @@ 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
@@ -48,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);
 
@@ -64,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(() => {
@@ -271,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 }} />

package/src/components/ReformScenario.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useState } from "react";
+import { fmtAED, fmtPct } from "@/lib/format";
+import { AnalysisRow } from "@/lib/types";
+
+const DEFAULT_AED_PER_SQFT = 300;
+const SIZE_TOLERANCE = 0.2;
+
+interface Props {
+  listingId: string;
+  price: number;
+  sizeSqft: number | null;
+  analysis: AnalysisRow;
+}
+
+/**
+ * Buy → light reform → rent higher. Within one building + size band the location
+ * is fixed, so the comparable-rent spread (P25→P75) approximates what the market
+ * pays for interior condition; renting at ~P75 is the realistic post-reform rent.
+ */
+export default function ReformScenario({ listingId, price, sizeSqft, analysis }: Props) {
+  const [cost, setCost] = useState(() => {
+    const fallback = sizeSqft ? Math.round(sizeSqft * DEFAULT_AED_PER_SQFT) : 100000;
+    if (typeof window === "undefined") return fallback;
+    const saved = Number(localStorage.getItem(`bw-reform-${listingId}`));
+    return Number.isFinite(saved) && saved > 0 ? saved : fallback;
+  });
+
+  const { rent_p25, rent_p75, median_rent, rent_n, asking_yield } = analysis;
+  if (rent_p25 == null || rent_p75 == null || median_rent == null || rent_n < 3) return null;
+
+  const setAndSave = (v: number) => {
+    setCost(v);
+    if (Number.isFinite(v) && v >= 0) localStorage.setItem(`bw-reform-${listingId}`, String(v));
+  };
+
+  const postReformYield = rent_p75 / (price + cost);
+  const uplift = rent_p75 - median_rent;
+  const paybackYears = uplift > 0 ? cost / uplift : null;
+  const spread = (rent_p75 - rent_p25) / median_rent;
+
+  const spreadReading =
+    spread >= 0.15
+      ? { txt: "El interior mueve mucho la renta en este edificio: hay margen real para la reforma.", cls: "text-emerald-700 dark:text-emerald-400" }
+      : spread >= 0.08
+        ? { txt: "Margen moderado: la reforma ayuda, pero no esperes milagros en este edificio.", cls: "text-amber-700 dark:text-amber-400" }
+        : { txt: "El edificio capa la renta: los comparables se alquilan casi igual estén como estén. La reforma difícilmente se paga aquí.", cls: "text-red-700 dark:text-red-400" };
+
+  const band = sizeSqft
+    ? `${Math.round(sizeSqft * (1 - SIZE_TOLERANCE))}–${Math.round(sizeSqft * (1 + SIZE_TOLERANCE))} sqft`
+    : null;
+
+  return (
+    <div className="rounded-xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
+      <h3 className="text-sm font-bold">
+        Escenario de reforma{" "}
+        <span className="font-normal text-neutral-500">
+          ({rent_n} alquileres comparables{band ? ` · ${band}` : ""})
+        </span>
+      </h3>
+
+      <div className="mt-3 grid gap-4 lg:grid-cols-[1fr_auto_1fr]">
+        {/* Rent range of comparables */}
+        <div>
+          <div className="mb-1 flex justify-between text-[11px] text-neutral-500">
+            <span>P25 (sin reformar)</span>
+            <span>mediana</span>
+            <span>P75 (reformado)</span>
+          </div>
+          <div className="relative h-2 rounded-full bg-gradient-to-r from-red-300 via-amber-300 to-emerald-400 dark:from-red-900 dark:via-amber-700 dark:to-emerald-600">
+            {rent_p75 > rent_p25 && (
+              <span
+                className="absolute -top-1 h-4 w-1 rounded bg-neutral-900 dark:bg-white"
+                style={{ left: `${Math.min(99, Math.max(1, ((median_rent - rent_p25) / (rent_p75 - rent_p25)) * 100))}%` }}
+                title={`mediana ${fmtAED(median_rent)}`}
+              />
+            )}
+          </div>
+          <div className="mt-1 flex justify-between text-xs font-semibold">
+            <span>{fmtAED(rent_p25)}</span>
+            <span className="text-neutral-500">{fmtAED(median_rent)}</span>
+            <span>{fmtAED(rent_p75)}</span>
+          </div>
+          <p className={`mt-2 text-xs ${spreadReading.cls}`}>
+            Dispersión {fmtPct(spread, 0)} de la mediana — {spreadReading.txt}
+          </p>
+        </div>
+
+        <div className="hidden w-px bg-neutral-200 lg:block dark:bg-neutral-800" />
+
+        {/* Calculator */}
+        <div className="text-sm">
+          <label className="text-xs font-semibold text-neutral-600 dark:text-neutral-400">
+            Coste de la reforma (AED)
+            {sizeSqft ? <span className="ml-1 font-normal text-neutral-400">(defecto {DEFAULT_AED_PER_SQFT}/sqft)</span> : null}
+          </label>
+          <input
+            type="number"
+            min={0}
+            step={5000}
+            suppressHydrationWarning
+            value={cost}
+            onChange={(e) => setAndSave(Number(e.target.value))}
+            className="mt-1 w-40 rounded-lg border border-neutral-300 bg-white px-2.5 py-1.5 text-sm outline-none focus:border-blue-500 dark:border-neutral-700 dark:bg-neutral-950"
+          />
+          <div className="mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs">
+            <span className="text-neutral-500">Yield actual (mediana / precio)</span>
+            <b>{fmtPct(asking_yield)}</b>
+            <span className="text-neutral-500">Yield post-reforma (P75 / precio+reforma)</span>
+            <b className={postReformYield > (asking_yield ?? 0) ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400"}>
+              {fmtPct(postReformYield)}
+            </b>
+            <span className="text-neutral-500">Renta extra al año (P75 − mediana)</span>
+            <b>{fmtAED(uplift)}</b>
+            <span className="text-neutral-500">Payback de la reforma</span>
+            <b>{paybackYears != null ? `${paybackYears.toFixed(1)} años` : "—"}</b>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/lib/db.ts

@@ -134,8 +134,15 @@ export function getDb(): Database.Database {
 
 function migrate(db: Database.Database) {
   const cols = (db.prepare(`PRAGMA table_info(analyses)`).all() as { name: string }[]).map((c) => c.name);
-  if (!cols.includes("median_sale_price")) db.exec(`ALTER TABLE analyses ADD COLUMN median_sale_price REAL`);
-  if (!cols.includes("asking_yield")) db.exec(`ALTER TABLE analyses ADD COLUMN asking_yield REAL`);
+  const add = (name: string) => {
+    if (!cols.includes(name)) db.exec(`ALTER TABLE analyses ADD COLUMN ${name} REAL`);
+  };
+  add("median_sale_price");
+  add("asking_yield");
+  add("rent_p25");
+  add("rent_p75");
+  add("sale_p25");
+  add("sale_p75");
 }
 
 export function now(): string {

package/src/lib/store.ts

@@ -112,8 +112,9 @@ export function saveAnalysis(listingId: string, y: YieldResult, gym: { gym_name:
     .prepare(
       `INSERT OR REPLACE INTO analyses
        (listing_id, gross_yield, asking_yield, median_rent, median_sale_price,
+        rent_p25, rent_p75, sale_p25, sale_p75,
         rent_n, buy_n, gym_distance_m, gym_name, computed_at)
-       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
+       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
     )
     .run(
       listingId,
@@ -121,6 +122,10 @@ export function saveAnalysis(listingId: string, y: YieldResult, gym: { gym_name:
       y.asking_yield,
       y.median_rent,
       y.median_sale_price,
+      y.rent_p25,
+      y.rent_p75,
+      y.sale_p25,
+      y.sale_p75,
       y.rent_n,
       y.buy_n,
       gym.distance_m,
@@ -160,6 +165,7 @@ export function listFavorites(): FavoriteListing[] {
   return getDb()
     .prepare(
       `SELECT l.*, a.gross_yield, a.asking_yield, a.median_rent, a.median_sale_price,
+              a.rent_p25, a.rent_p75, a.sale_p25, a.sale_p75,
               a.rent_n, a.buy_n, a.gym_distance_m, a.gym_name, a.computed_at,
               f.notes, f.added_at
        FROM favorites f
@@ -174,6 +180,7 @@ export function listAnalyzed(): AnalyzedListing[] {
   return getDb()
     .prepare(
       `SELECT l.*, a.gross_yield, a.asking_yield, a.median_rent, a.median_sale_price,
+              a.rent_p25, a.rent_p75, a.sale_p25, a.sale_p75,
               a.rent_n, a.buy_n, a.gym_distance_m, a.gym_name, a.computed_at
        FROM listings l JOIN analyses a ON a.listing_id = l.id
        ORDER BY a.gross_yield DESC NULLS LAST`