Upload 150 files

.gitattributes

@@ -172,3 +172,6 @@ backend/uploads/generated/5b6f11b554f74c5486ce33e390f8c75d.png filter=lfs diff=l
 backend/uploads/generated/836b20819d49430a9fc94c02e8e07885.png filter=lfs diff=lfs merge=lfs -text
 backend/uploads/generated/d664c83e3b614760834cdaad28769340.png filter=lfs diff=lfs merge=lfs -text
 backend/uploads/generated/dbd083972cf5430998885a9f7c36ac0a.png filter=lfs diff=lfs merge=lfs -text
+backend/texturas/Texture_wpc_deck/DECK_gris.png filter=lfs diff=lfs merge=lfs -text
+backend/texturas/Texture_wpc_deck/DECK_madera_oscuro.png filter=lfs diff=lfs merge=lfs -text
+backend/texturas/Texture_wpc_deck/DECK_madera.png filter=lfs diff=lfs merge=lfs -text

backend/.dockerignore

@@ -1,6 +1,6 @@
-.venv/
-__pycache__/
-*.pyc
-uploads/
-frontend/node_modules/
-frontend/dist/
+.venv/
+__pycache__/
+*.pyc
+uploads/
+frontend/node_modules/
+frontend/dist/

backend/.gitignore

@@ -1,33 +1,33 @@
-# Python
-__pycache__/
-*.py[cod]
-*.pyo
-*.pyd
-*.cover
-*.egg-info/
-.eggs/
-*.egg
-pip-log.txt
-pip-delete-this-directory.txt
-htmlcov/
-.tox/
-.coverage
-.coverage.*
-.cache
-.pytest_cache/
-.pytest_cache
-.env
-venv/
-ENV/
-env/
-*.env
-
-# VS Code
-.vscode/
-
-# Python virtual environment
-.venv/
-
-# OS files
-.DS_Store
-Thumbs.db
+# Python
+__pycache__/
+*.py[cod]
+*.pyo
+*.pyd
+*.cover
+*.egg-info/
+.eggs/
+*.egg
+pip-log.txt
+pip-delete-this-directory.txt
+htmlcov/
+.tox/
+.coverage
+.coverage.*
+.cache
+.pytest_cache/
+.pytest_cache
+.env
+venv/
+ENV/
+env/
+*.env
+
+# VS Code
+.vscode/
+
+# Python virtual environment
+.venv/
+
+# OS files
+.DS_Store
+Thumbs.db

backend/Dockerfile

@@ -1,29 +1,29 @@
-FROM python:3.12-slim
-
-ENV PYTHONDONTWRITEBYTECODE=1 \
-    PYTHONUNBUFFERED=1 \
-    PIP_NO_CACHE_DIR=1 \
-    PORT=8000 \
-    HF_HUB_DISABLE_PROGRESS_BARS=0
-
-WORKDIR /app
-
-RUN apt-get update \
-    && apt-get install -y --no-install-recommends \
-        git libglib2.0-0 libsm6 libxrender1 libxext6 libx11-6 libxcb1 libgl1 libgl1-mesa-dri \
-    && rm -rf /var/lib/apt/lists/*
-
-COPY requirements.txt ./
-RUN python -m pip install --upgrade pip \
-    && python -m pip install -r requirements.txt
-
-COPY . ./
-
-RUN chmod +x entrypoint.sh
-
-# /app/models is mounted as a volume so the SAM2 checkpoint persists across restarts
-VOLUME ["/app/models"]
-
-EXPOSE 8000
-
-ENTRYPOINT ["./entrypoint.sh"]
+FROM python:3.12-slim
+
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    PIP_NO_CACHE_DIR=1 \
+    PORT=8000 \
+    HF_HUB_DISABLE_PROGRESS_BARS=0
+
+WORKDIR /app
+
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends \
+        git libglib2.0-0 libsm6 libxrender1 libxext6 libx11-6 libxcb1 libgl1 libgl1-mesa-dri \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt ./
+RUN python -m pip install --upgrade pip \
+    && python -m pip install -r requirements.txt
+
+COPY . ./
+
+RUN chmod +x entrypoint.sh
+
+# /app/models is mounted as a volume so the SAM2 checkpoint persists across restarts
+VOLUME ["/app/models"]
+
+EXPOSE 8000
+
+ENTRYPOINT ["./entrypoint.sh"]

backend/README.md

@@ -1,192 +1,192 @@
-# Backend - PoC SaaS Iframe
-
-Este documento explica cómo funciona el backend del proyecto, qué endpoints ofrece y cómo se integra con el frontend React.
-
-## Propósito
-
-El backend sirve como:
-
-- API para autenticación con token, configuración y gestión de sesiones.
-- servidor de archivos estáticos para el build de React en producción (`frontend/dist`).
-- punto de entrada de administración, preview y experiencia embebida.
-- watcher opcional que reconstruye el frontend cuando cambian los archivos fuente.
-
-## Estructura principal
-
-- `main.py` - servidor FastAPI principal.
-- `requirements.txt` - dependencias Python.
-- `run_server.bat` - helper para arrancar el backend con el virtual environment local.
-- `.venv/` - entorno virtual Python del backend.
-- `home.html`, `admin.html`, `preview.html` - páginas de apoyo.
-
-## Cómo ejecutar
-
-### Activar entorno virtual
-
-En Windows CMD:
-
-```cmd
-cd /d C:\Users\alane\OneDrive\Escritorio\Prueba-PoC\backend
-.venv\Scripts\activate
-```
-
-En PowerShell:
-
-```powershell
-cd C:\Users\alane\OneDrive\Escritorio\Prueba-PoC\backend
-.\.venv\Scripts\Activate.ps1
-```
-
-### Instalar dependencias
-
-```cmd
-pip install -r requirements.txt
-```
-
-### Ejecutar servidor
-
-```cmd
-python -m uvicorn main:app --reload --host 0.0.0.0 --port 8000
-```
-
-O usar el helper:
-
-```cmd
-run_server.bat
-```
-
-## Comportamiento de producción
-
-En producción, el backend sirve el build de React desde `frontend/dist` en la ruta `/app`.
-
-- El HTML principal se carga en `/app`
-- Los assets de Vite se sirven en `/app/assets/...`
-- Si `frontend/dist/index.html` no existe, se devuelve un mensaje de error claro.
-
-## Endpoints principales
-
-### Páginas y visualización
-
-- `GET /` - `home.html`
-- `GET /preview` - `preview.html`
-- `GET /admin` - `admin.html`
-- `GET /app` - React app estática servida desde `frontend/dist`
-- `GET /widget.js` - script JS que inyecta un iframe con el visualizador
-- `GET /health` - estado del backend y si el frontend build está listo
-
-### API de integración
-
-- `POST /api/token` - genera un token temporal para `client_id`
-- `GET /config` - devuelve datos del cliente según `client_id` o `token`
-- `POST /session/start` - marca la sesión como activa
-- `GET /api/keys` - lista clientes registrados
-- `POST /api/generate-key` - genera una nueva API key de cliente
-- `GET /api/active-sessions` - muestra sesiones activas actuales
-
-## Lógica de token y cliente
-
-### Validación de token
-
-- Los tokens se guardan en memoria en `TOKENS`
-- Cada token vence después de `TOKEN_TTL` segundos
-- Si el token ha expirado, se devuelve `401`
-
-### Configuración del cliente
-
-- El diccionario `CLIENTS` contiene los clientes registrados por defecto
-- Cada cliente tiene `nombre`, `color_primario` y `created_at`
-- `POST /api/generate-key` agrega un nuevo cliente a `CLIENTS`
-
-## Seguridad y headers importantes
-
-El backend habilita:
-
-- CORS abierto (`allow_origins=["*"]`) para facilitar el desarrollo
-- Eliminación de `x-frame-options` en todas las respuestas
-- Agrega `Content-Security-Policy: frame-ancestors *` para permitir iframes
-
-## Watcher automático de frontend
-
-El backend también incluye un watcher que observa cambios en el frontend y ejecuta `npm run build` automáticamente.
-
-### Qué archivos vigila
-
-- `frontend/src/**/*.{ts,tsx,js,jsx,css,json,html}`
-- `frontend/vite.config.ts`
-- `frontend/package.json`
-- `frontend/tsconfig.json`
-
-### Cómo funciona
-
-- Si el backend está ejecutándose, el watcher corre en un hilo daemon.
-- Cuando detecta cambios, ejecuta `npm run build` en `frontend/`.
-- El resultado actualiza `frontend/dist` para que `/app` sirva la versión nueva.
-
-### Requisitos del watcher
-
-- Necesitas tener `npm` instalado y accesible desde el PATH.
-- El backend debe arrancarse desde el directorio raíz del proyecto.
-
-## Desarrollo y producción
-
-### Desarrollo
-
-- Para trabajar en el frontend con hot reload, usa el dev server de Vite:
-
-```cmd
-cd /d C:\Users\alane\OneDrive\Escritorio\Prueba-PoC\frontend
-npm run dev
-```
-
-- Abre `http://localhost:5173/app?token=...`
-
-### Producción / backend
-
-- Para servir el frontend estático desde el backend:
-
-```cmd
-cd /d C:\Users\alane\OneDrive\Escritorio\Prueba-PoC\frontend
-npm run build
-```
-
-- Luego carga `http://localhost:8000/app?token=...`
-
-## Integración con hyper-ferreteria
-
-Este backend puede montar la lógica de `hyper-ferreteria` en un prefijo alterno para evitar conflictos de rutas.
-
-- Se carga si la carpeta `../hyper-ferreteria` existe junto al directorio `Prueba-PoC`.
-- La integración queda disponible en `http://localhost:8000/hf`.
-- Las rutas internas de `hyper-ferreteria` se exponen como:
-  - `http://localhost:8000/hf/upload_async`
-  - `http://localhost:8000/hf/segment_guided`
-  - `http://localhost:8000/hf/analyze_scene`
-  - `http://localhost:8000/hf/apply_texture`
-  - `http://localhost:8000/hf/textures`
-  - `http://localhost:8000/hf/image/{filename}`
-  - `http://localhost:8000/hf/masks/{filename}`
-  - `http://localhost:8000/hf/ai/{filename}`
-  - y otras rutas de `hyper-ferreteria` con el prefijo `/hf`
-
-## Docker
-
-Se añadió soporte Docker al backend con un `Dockerfile` y `.dockerignore`.
-
-- El contenedor expone el puerto `8000`.
-- El servicio arranca con `uvicorn main:app --host 0.0.0.0 --port 8000`.
-- El `requirements.txt` del backend fue ampliado para incluir las dependencias de `hyper-ferreteria`.
-
-Para construir y correr:
-
-```cmd
-cd /d C:\Users\alane\OneDrive\Escritorio\Trabajo\Prueba-PoC\backend
-docker build -t prueba-poc-backend .
-docker run -p 8000:8000 prueba-poc-backend
-```
-
-## Notas para nuevos desarrolladores
-
-- El backend es el origen de verdad para la lógica de seguridad y sesiones.
-- El frontend puede correr en modo dev para desarrollo rápido.
-- En producción, el backend usa el build estático de React.
-- Si un cambio en `frontend/src` no se refleja, revisa si estás usando `5173` (dev) o `8000` (backend+build).
+# Backend - PoC SaaS Iframe
+
+Este documento explica cómo funciona el backend del proyecto, qué endpoints ofrece y cómo se integra con el frontend React.
+
+## Propósito
+
+El backend sirve como:
+
+- API para autenticación con token, configuración y gestión de sesiones.
+- servidor de archivos estáticos para el build de React en producción (`frontend/dist`).
+- punto de entrada de administración, preview y experiencia embebida.
+- watcher opcional que reconstruye el frontend cuando cambian los archivos fuente.
+
+## Estructura principal
+
+- `main.py` - servidor FastAPI principal.
+- `requirements.txt` - dependencias Python.
+- `run_server.bat` - helper para arrancar el backend con el virtual environment local.
+- `.venv/` - entorno virtual Python del backend.
+- `home.html`, `admin.html`, `preview.html` - páginas de apoyo.
+
+## Cómo ejecutar
+
+### Activar entorno virtual
+
+En Windows CMD:
+
+```cmd
+cd /d C:\Users\alane\OneDrive\Escritorio\Prueba-PoC\backend
+.venv\Scripts\activate
+```
+
+En PowerShell:
+
+```powershell
+cd C:\Users\alane\OneDrive\Escritorio\Prueba-PoC\backend
+.\.venv\Scripts\Activate.ps1
+```
+
+### Instalar dependencias
+
+```cmd
+pip install -r requirements.txt
+```
+
+### Ejecutar servidor
+
+```cmd
+python -m uvicorn main:app --reload --host 0.0.0.0 --port 8000
+```
+
+O usar el helper:
+
+```cmd
+run_server.bat
+```
+
+## Comportamiento de producción
+
+En producción, el backend sirve el build de React desde `frontend/dist` en la ruta `/app`.
+
+- El HTML principal se carga en `/app`
+- Los assets de Vite se sirven en `/app/assets/...`
+- Si `frontend/dist/index.html` no existe, se devuelve un mensaje de error claro.
+
+## Endpoints principales
+
+### Páginas y visualización
+
+- `GET /` - `home.html`
+- `GET /preview` - `preview.html`
+- `GET /admin` - `admin.html`
+- `GET /app` - React app estática servida desde `frontend/dist`
+- `GET /widget.js` - script JS que inyecta un iframe con el visualizador
+- `GET /health` - estado del backend y si el frontend build está listo
+
+### API de integración
+
+- `POST /api/token` - genera un token temporal para `client_id`
+- `GET /config` - devuelve datos del cliente según `client_id` o `token`
+- `POST /session/start` - marca la sesión como activa
+- `GET /api/keys` - lista clientes registrados
+- `POST /api/generate-key` - genera una nueva API key de cliente
+- `GET /api/active-sessions` - muestra sesiones activas actuales
+
+## Lógica de token y cliente
+
+### Validación de token
+
+- Los tokens se guardan en memoria en `TOKENS`
+- Cada token vence después de `TOKEN_TTL` segundos
+- Si el token ha expirado, se devuelve `401`
+
+### Configuración del cliente
+
+- El diccionario `CLIENTS` contiene los clientes registrados por defecto
+- Cada cliente tiene `nombre`, `color_primario` y `created_at`
+- `POST /api/generate-key` agrega un nuevo cliente a `CLIENTS`
+
+## Seguridad y headers importantes
+
+El backend habilita:
+
+- CORS abierto (`allow_origins=["*"]`) para facilitar el desarrollo
+- Eliminación de `x-frame-options` en todas las respuestas
+- Agrega `Content-Security-Policy: frame-ancestors *` para permitir iframes
+
+## Watcher automático de frontend
+
+El backend también incluye un watcher que observa cambios en el frontend y ejecuta `npm run build` automáticamente.
+
+### Qué archivos vigila
+
+- `frontend/src/**/*.{ts,tsx,js,jsx,css,json,html}`
+- `frontend/vite.config.ts`
+- `frontend/package.json`
+- `frontend/tsconfig.json`
+
+### Cómo funciona
+
+- Si el backend está ejecutándose, el watcher corre en un hilo daemon.
+- Cuando detecta cambios, ejecuta `npm run build` en `frontend/`.
+- El resultado actualiza `frontend/dist` para que `/app` sirva la versión nueva.
+
+### Requisitos del watcher
+
+- Necesitas tener `npm` instalado y accesible desde el PATH.
+- El backend debe arrancarse desde el directorio raíz del proyecto.
+
+## Desarrollo y producción
+
+### Desarrollo
+
+- Para trabajar en el frontend con hot reload, usa el dev server de Vite:
+
+```cmd
+cd /d C:\Users\alane\OneDrive\Escritorio\Prueba-PoC\frontend
+npm run dev
+```
+
+- Abre `http://localhost:5173/app?token=...`
+
+### Producción / backend
+
+- Para servir el frontend estático desde el backend:
+
+```cmd
+cd /d C:\Users\alane\OneDrive\Escritorio\Prueba-PoC\frontend
+npm run build
+```
+
+- Luego carga `http://localhost:8000/app?token=...`
+
+## Integración con hyper-ferreteria
+
+Este backend puede montar la lógica de `hyper-ferreteria` en un prefijo alterno para evitar conflictos de rutas.
+
+- Se carga si la carpeta `../hyper-ferreteria` existe junto al directorio `Prueba-PoC`.
+- La integración queda disponible en `http://localhost:8000/hf`.
+- Las rutas internas de `hyper-ferreteria` se exponen como:
+  - `http://localhost:8000/hf/upload_async`
+  - `http://localhost:8000/hf/segment_guided`
+  - `http://localhost:8000/hf/analyze_scene`
+  - `http://localhost:8000/hf/apply_texture`
+  - `http://localhost:8000/hf/textures`
+  - `http://localhost:8000/hf/image/{filename}`
+  - `http://localhost:8000/hf/masks/{filename}`
+  - `http://localhost:8000/hf/ai/{filename}`
+  - y otras rutas de `hyper-ferreteria` con el prefijo `/hf`
+
+## Docker
+
+Se añadió soporte Docker al backend con un `Dockerfile` y `.dockerignore`.
+
+- El contenedor expone el puerto `8000`.
+- El servicio arranca con `uvicorn main:app --host 0.0.0.0 --port 8000`.
+- El `requirements.txt` del backend fue ampliado para incluir las dependencias de `hyper-ferreteria`.
+
+Para construir y correr:
+
+```cmd
+cd /d C:\Users\alane\OneDrive\Escritorio\Trabajo\Prueba-PoC\backend
+docker build -t prueba-poc-backend .
+docker run -p 8000:8000 prueba-poc-backend
+```
+
+## Notas para nuevos desarrolladores
+
+- El backend es el origen de verdad para la lógica de seguridad y sesiones.
+- El frontend puede correr en modo dev para desarrollo rápido.
+- En producción, el backend usa el build estático de React.
+- Si un cambio en `frontend/src` no se refleja, revisa si estás usando `5173` (dev) o `8000` (backend+build).

backend/admin.html

@@ -1,202 +1,202 @@
-<!doctype html>
-<html lang="es">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Panel de Control SaaS</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="bg-slate-100 text-slate-900">
-    <div class="max-w-6xl mx-auto p-6 space-y-6">
-      <header
-        class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"
-      >
-        <div>
-          <h1 class="text-3xl font-bold">Panel de Control SaaS</h1>
-          <p class="text-slate-600">
-            Desde aquí puedes ver usuarios activos, generar nuevas API keys y
-            obtener el script de integración.
-          </p>
-        </div>
-        <div class="space-x-2">
-          <a
-            href="/preview"
-            class="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
-            >Vista previa</a
-          >
-          <button
-            id="open-app-button"
-            class="inline-block px-4 py-2 bg-slate-200 text-slate-900 rounded-lg hover:bg-slate-300"
-          >
-            Abrir app
-          </button>
-        </div>
-      </header>
-
-      <section class="grid gap-6 lg:grid-cols-2">
-        <div class="bg-white rounded-3xl p-6 shadow-lg">
-          <h2 class="text-xl font-semibold mb-4">Generar nueva API key</h2>
-          <div class="space-y-4">
-            <label class="block">
-              <span class="text-sm font-medium text-slate-700"
-                >Nombre del cliente</span
-              >
-              <input
-                id="client-name"
-                type="text"
-                placeholder="Ej. Tienda Sur"
-                class="mt-2 w-full rounded-2xl border border-slate-300 px-4 py-3 focus:border-blue-500 focus:outline-none"
-              />
-            </label>
-            <button
-              id="generate-key"
-              class="w-full px-5 py-3 bg-green-600 text-white rounded-2xl hover:bg-green-700"
-            >
-              Generar API key
-            </button>
-            <div
-              id="generate-result"
-              class="hidden rounded-2xl border border-slate-200 bg-slate-50 p-4 text-slate-900"
-            ></div>
-          </div>
-        </div>
-
-        <div class="bg-white rounded-3xl p-6 shadow-lg">
-          <h2 class="text-xl font-semibold mb-4">
-            Instrucciones de integración
-          </h2>
-          <p class="text-slate-600 mb-4">
-            El desarrollador debe insertar un contenedor y el script del widget
-            en su HTML:
-          </p>
-          <pre
-            class="rounded-2xl bg-slate-950 p-4 text-slate-100 overflow-x-auto"
-          ><code id="static-snippet"></code></pre>
-          <script>
-            document.getElementById("static-snippet").textContent =
-              '<div id="contenedor-saas" data-client-id="ID_UNICO_DEL_CLIENTE_001"></div>\n' +
-              '<script src="' + window.location.origin + '/widget.js"><\/script>';
-          </script>
-          <p class="text-sm text-slate-500 mt-4">
-            Reemplaza <strong>ID_UNICO_DEL_CLIENTE_001</strong> por la API key
-            generada.
-          </p>
-        </div>
-      </section>
-
-      <section class="grid gap-6 lg:grid-cols-2">
-        <div class="bg-white rounded-3xl p-6 shadow-lg">
-          <h2 class="text-xl font-semibold mb-4">Clientes registrados</h2>
-          <div id="clients-list" class="space-y-3 text-slate-700"></div>
-        </div>
-        <div class="bg-white rounded-3xl p-6 shadow-lg">
-          <h2 class="text-xl font-semibold mb-4">Usuarios activos</h2>
-          <div id="active-list" class="space-y-3 text-slate-700"></div>
-        </div>
-      </section>
-    </div>
-
-    <script>
-      async function loadData() {
-        const [keysRes, activeRes] = await Promise.all([
-          fetch("/api/keys"),
-          fetch("/api/active-sessions"),
-        ]);
-        const keysData = await keysRes.json();
-        const activeData = await activeRes.json();
-
-        const clientsList = document.getElementById("clients-list");
-        clientsList.innerHTML = keysData.keys
-          .map(
-            (key) => `
-          <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
-            <div class="font-semibold">${key.nombre}</div>
-            <div class="text-sm text-slate-500">API key: <code>${key.client_id}</code></div>
-            <div class="text-sm text-slate-500">Color primario: ${key.color_primario}</div>
-            <div class="text-sm text-slate-500">Creado: ${key.created_at}</div>
-          </div>
-        `,
-          )
-          .join("");
-
-        const activeList = document.getElementById("active-list");
-        if (activeData.active_sessions.length === 0) {
-          activeList.innerHTML =
-            '<p class="text-sm text-slate-500">No hay sesiones activas aún.</p>';
-        } else {
-          activeList.innerHTML = activeData.active_sessions
-            .map(
-              (item) => `
-            <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
-              <div class="font-semibold">${item.client_id}</div>
-              <div class="text-sm text-slate-500">Último acceso: ${item.last_seen}</div>
-            </div>
-          `,
-            )
-            .join("");
-        }
-      }
-
-      document
-        .getElementById("generate-key")
-        .addEventListener("click", async () => {
-          const nameInput = document.getElementById("client-name");
-          const name = nameInput.value.trim();
-          if (!name) {
-            alert("Ingresa el nombre del cliente antes de generar la API key.");
-            return;
-          }
-
-          const formData = new URLSearchParams();
-          formData.append("nombre", name);
-
-          const response = await fetch("/api/generate-key", {
-            method: "POST",
-            body: formData,
-          });
-          const result = await response.json();
-
-          const resultBox = document.getElementById("generate-result");
-          resultBox.classList.remove("hidden");
-          const escapedSnippet = result.snippet
-            .replace(/&/g, "&amp;")
-            .replace(/</g, "&lt;")
-            .replace(/>/g, "&gt;");
-          resultBox.innerHTML = `
-          <p class="font-semibold text-slate-900">API key generada:</p>
-          <p class="mt-2"><code>${result.client_id}</code></p>
-          <p class="mt-3 font-semibold text-slate-900">Snippet para el cliente:</p>
-          <pre class="mt-2 rounded-2xl bg-slate-950 p-4 text-slate-100 overflow-x-auto"><code>${escapedSnippet}</code></pre>
-        `;
-
-          nameInput.value = "";
-          await loadData();
-        });
-
-      loadData();
-
-      document
-        .getElementById("open-app-button")
-        .addEventListener("click", async () => {
-          const clientId = "ID_UNICO_DEL_CLIENTE_001";
-          try {
-            const res = await fetch("/api/token", {
-              method: "POST",
-              headers: { "Content-Type": "application/x-www-form-urlencoded" },
-              body: `client_id=${encodeURIComponent(clientId)}`,
-            });
-            const data = await res.json();
-            if (!res.ok) {
-              throw new Error(data.error || "No se pudo generar token.");
-            }
-            window.open(
-              `/app?token=${encodeURIComponent(data.token)}`,
-              "_blank",
-            );
-          } catch (error) {
-            alert("No se pudo abrir el app: " + error.message);
-          }
-        });
-    </script>
-  </body>
-</html>
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Panel de Control SaaS</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-slate-100 text-slate-900">
+    <div class="max-w-6xl mx-auto p-6 space-y-6">
+      <header
+        class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"
+      >
+        <div>
+          <h1 class="text-3xl font-bold">Panel de Control SaaS</h1>
+          <p class="text-slate-600">
+            Desde aquí puedes ver usuarios activos, generar nuevas API keys y
+            obtener el script de integración.
+          </p>
+        </div>
+        <div class="space-x-2">
+          <a
+            href="/preview"
+            class="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+            >Vista previa</a
+          >
+          <button
+            id="open-app-button"
+            class="inline-block px-4 py-2 bg-slate-200 text-slate-900 rounded-lg hover:bg-slate-300"
+          >
+            Abrir app
+          </button>
+        </div>
+      </header>
+
+      <section class="grid gap-6 lg:grid-cols-2">
+        <div class="bg-white rounded-3xl p-6 shadow-lg">
+          <h2 class="text-xl font-semibold mb-4">Generar nueva API key</h2>
+          <div class="space-y-4">
+            <label class="block">
+              <span class="text-sm font-medium text-slate-700"
+                >Nombre del cliente</span
+              >
+              <input
+                id="client-name"
+                type="text"
+                placeholder="Ej. Tienda Sur"
+                class="mt-2 w-full rounded-2xl border border-slate-300 px-4 py-3 focus:border-blue-500 focus:outline-none"
+              />
+            </label>
+            <button
+              id="generate-key"
+              class="w-full px-5 py-3 bg-green-600 text-white rounded-2xl hover:bg-green-700"
+            >
+              Generar API key
+            </button>
+            <div
+              id="generate-result"
+              class="hidden rounded-2xl border border-slate-200 bg-slate-50 p-4 text-slate-900"
+            ></div>
+          </div>
+        </div>
+
+        <div class="bg-white rounded-3xl p-6 shadow-lg">
+          <h2 class="text-xl font-semibold mb-4">
+            Instrucciones de integración
+          </h2>
+          <p class="text-slate-600 mb-4">
+            El desarrollador debe insertar un contenedor y el script del widget
+            en su HTML:
+          </p>
+          <pre
+            class="rounded-2xl bg-slate-950 p-4 text-slate-100 overflow-x-auto"
+          ><code id="static-snippet"></code></pre>
+          <script>
+            document.getElementById("static-snippet").textContent =
+              '<div id="contenedor-saas" data-client-id="ID_UNICO_DEL_CLIENTE_001"></div>\n' +
+              '<script src="' + window.location.origin + '/widget.js"><\/script>';
+          </script>
+          <p class="text-sm text-slate-500 mt-4">
+            Reemplaza <strong>ID_UNICO_DEL_CLIENTE_001</strong> por la API key
+            generada.
+          </p>
+        </div>
+      </section>
+
+      <section class="grid gap-6 lg:grid-cols-2">
+        <div class="bg-white rounded-3xl p-6 shadow-lg">
+          <h2 class="text-xl font-semibold mb-4">Clientes registrados</h2>
+          <div id="clients-list" class="space-y-3 text-slate-700"></div>
+        </div>
+        <div class="bg-white rounded-3xl p-6 shadow-lg">
+          <h2 class="text-xl font-semibold mb-4">Usuarios activos</h2>
+          <div id="active-list" class="space-y-3 text-slate-700"></div>
+        </div>
+      </section>
+    </div>
+
+    <script>
+      async function loadData() {
+        const [keysRes, activeRes] = await Promise.all([
+          fetch("/api/keys"),
+          fetch("/api/active-sessions"),
+        ]);
+        const keysData = await keysRes.json();
+        const activeData = await activeRes.json();
+
+        const clientsList = document.getElementById("clients-list");
+        clientsList.innerHTML = keysData.keys
+          .map(
+            (key) => `
+          <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
+            <div class="font-semibold">${key.nombre}</div>
+            <div class="text-sm text-slate-500">API key: <code>${key.client_id}</code></div>
+            <div class="text-sm text-slate-500">Color primario: ${key.color_primario}</div>
+            <div class="text-sm text-slate-500">Creado: ${key.created_at}</div>
+          </div>
+        `,
+          )
+          .join("");
+
+        const activeList = document.getElementById("active-list");
+        if (activeData.active_sessions.length === 0) {
+          activeList.innerHTML =
+            '<p class="text-sm text-slate-500">No hay sesiones activas aún.</p>';
+        } else {
+          activeList.innerHTML = activeData.active_sessions
+            .map(
+              (item) => `
+            <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
+              <div class="font-semibold">${item.client_id}</div>
+              <div class="text-sm text-slate-500">Último acceso: ${item.last_seen}</div>
+            </div>
+          `,
+            )
+            .join("");
+        }
+      }
+
+      document
+        .getElementById("generate-key")
+        .addEventListener("click", async () => {
+          const nameInput = document.getElementById("client-name");
+          const name = nameInput.value.trim();
+          if (!name) {
+            alert("Ingresa el nombre del cliente antes de generar la API key.");
+            return;
+          }
+
+          const formData = new URLSearchParams();
+          formData.append("nombre", name);
+
+          const response = await fetch("/api/generate-key", {
+            method: "POST",
+            body: formData,
+          });
+          const result = await response.json();
+
+          const resultBox = document.getElementById("generate-result");
+          resultBox.classList.remove("hidden");
+          const escapedSnippet = result.snippet
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;");
+          resultBox.innerHTML = `
+          <p class="font-semibold text-slate-900">API key generada:</p>
+          <p class="mt-2"><code>${result.client_id}</code></p>
+          <p class="mt-3 font-semibold text-slate-900">Snippet para el cliente:</p>
+          <pre class="mt-2 rounded-2xl bg-slate-950 p-4 text-slate-100 overflow-x-auto"><code>${escapedSnippet}</code></pre>
+        `;
+
+          nameInput.value = "";
+          await loadData();
+        });
+
+      loadData();
+
+      document
+        .getElementById("open-app-button")
+        .addEventListener("click", async () => {
+          const clientId = "ID_UNICO_DEL_CLIENTE_001";
+          try {
+            const res = await fetch("/api/token", {
+              method: "POST",
+              headers: { "Content-Type": "application/x-www-form-urlencoded" },
+              body: `client_id=${encodeURIComponent(clientId)}`,
+            });
+            const data = await res.json();
+            if (!res.ok) {
+              throw new Error(data.error || "No se pudo generar token.");
+            }
+            window.open(
+              `/app?token=${encodeURIComponent(data.token)}`,
+              "_blank",
+            );
+          } catch (error) {
+            alert("No se pudo abrir el app: " + error.message);
+          }
+        });
+    </script>
+  </body>
+</html>

backend/core/config.py

@@ -1,92 +1,92 @@
-import logging
-import os
-import time
-from datetime import datetime, timezone
-from pathlib import Path
-
-BASE_DIR = Path(__file__).resolve().parent.parent
-
-UPLOAD_DIR = BASE_DIR / "uploads"
-UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
-
-VIDEO_UPLOAD_DIR = UPLOAD_DIR / "videos"
-VIDEO_UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
-
-OUTPUT_DIR = BASE_DIR / "outputs"
-OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
-
-VIDEO_OUTPUT_DIR = OUTPUT_DIR / "videos"
-VIDEO_OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
-
-TEXTURE_DIR = BASE_DIR / "texturas"
-TEXTURE_DIR.mkdir(parents=True, exist_ok=True)
-
-LOG_DIR = BASE_DIR / "logs"
-LOG_DIR.mkdir(exist_ok=True)
-
-TEMPLATES_DIR = BASE_DIR / "templates"
-TEMPLATES_DIR.mkdir(parents=True, exist_ok=True)
-
-CLASSIC_DASHBOARD_HTML_PATH = TEMPLATES_DIR / "classic_dashboard.html"
-
-logging.basicConfig(
-    level=logging.INFO,
-    format="%(asctime)s %(levelname)s %(name)s: %(message)s",
-    handlers=[
-        logging.FileHandler(LOG_DIR / "app.log", encoding="utf-8"),
-        logging.StreamHandler(),
-    ],
-)
-logger = logging.getLogger("backend.segmentation")
-
-SAM2_CONFIG_PATH = os.getenv("SAM2_CONFIG_PATH", "configs/sam2.1/sam2.1_hiera_l.yaml")
-SAM2_MODEL_PATH = os.getenv("SAM2_MODEL_PATH")
-SAM2_DEFAULT_MODEL_NAMES = (
-    "sam2.1_hiera_large_fresh.pt",
-    "sam2.1_hiera_large.pt",
-    "sam2.1_hiera_large.pth",
-    "sam2_hiera_large.pt",
-)
-SAM2_MODEL_DIR_CANDIDATES = ("models", "modelo")
-SAM2_UNLOAD_AFTER_USE = str(os.getenv("SAM2_UNLOAD_AFTER_USE", "0")).strip().lower() in {"1", "true", "yes"}
-FRONTEND_DEBUG = str(os.getenv("FRONTEND_DEBUG", "0")).strip().lower() in {"1", "true", "yes", "on"}
-
-# URL del Space de Gradio GPU (principal). Si falla, se usa el CPU fallback.
-# Local:      http://localhost:7860
-# Producción: https://<tu-space>.hf.space
-GRADIO_SPACE_URL: str = os.getenv("GRADIO_SPACE_URL", "").rstrip("/")
-
-# URL del Space de Gradio CPU (respaldo automático si el GPU falla o agota quota).
-GRADIO_CPU_FALLBACK_URL: str = os.getenv("GRADIO_CPU_FALLBACK_URL", "").rstrip("/")
-
-MAX_UPLOAD_WIDTH = 1024
-UPLOAD_JPEG_QUALITY = 82
-SD_JOB_STALE_SECONDS = 120
-UPLOAD_JOB_STALE_SECONDS = 900
-UPLOAD_BASE_SECONDS = 8.0
-UPLOAD_SECONDS_PER_MEGAPIXEL = 70.0
-SD_QUICK_TIMEOUT_SECONDS = 15.0
-
-SEMANTIC_MODEL_ID = "nvidia/segformer-b5-finetuned-ade-640-640"
-DEPTH_MODEL_ID = "Intel/dpt-hybrid-midas"
-
-
-def utc_now_iso() -> str:
-    return datetime.now(timezone.utc).isoformat()
-
-
-def log_timing_start(step_name: str) -> float:
-    started = time.perf_counter()
-    logger.info(f"[{step_name}] START at {utc_now_iso()}")
-    return started
-
-
-def log_timing_end(step_name: str, started: float) -> None:
-    elapsed = time.perf_counter() - started
-    logger.info(f"[{step_name}] DONE {elapsed:.3f}s at {utc_now_iso()}")
-
-
-def load_classic_dashboard_html() -> str:
-    if not CLASSIC_DASHBOARD_HTML_PATH.exists() or not CLASSIC_DASHBOARD_HTML_PATH.is_file():
-        raise RuntimeError(f"Dashboard HTML template not found: {CLASSIC_DASHBOARD_HTML_PATH}")
-    return CLASSIC_DASHBOARD_HTML_PATH.read_text(encoding="utf-8")
+import logging
+import os
+import time
+from datetime import datetime, timezone
+from pathlib import Path
+
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+UPLOAD_DIR = BASE_DIR / "uploads"
+UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+
+VIDEO_UPLOAD_DIR = UPLOAD_DIR / "videos"
+VIDEO_UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+
+OUTPUT_DIR = BASE_DIR / "outputs"
+OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
+
+VIDEO_OUTPUT_DIR = OUTPUT_DIR / "videos"
+VIDEO_OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
+
+TEXTURE_DIR = BASE_DIR / "texturas"
+TEXTURE_DIR.mkdir(parents=True, exist_ok=True)
+
+LOG_DIR = BASE_DIR / "logs"
+LOG_DIR.mkdir(exist_ok=True)
+
+TEMPLATES_DIR = BASE_DIR / "templates"
+TEMPLATES_DIR.mkdir(parents=True, exist_ok=True)
+
+CLASSIC_DASHBOARD_HTML_PATH = TEMPLATES_DIR / "classic_dashboard.html"
+
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s %(levelname)s %(name)s: %(message)s",
+    handlers=[
+        logging.FileHandler(LOG_DIR / "app.log", encoding="utf-8"),
+        logging.StreamHandler(),
+    ],
+)
+logger = logging.getLogger("backend.segmentation")
+
+SAM2_CONFIG_PATH = os.getenv("SAM2_CONFIG_PATH", "configs/sam2.1/sam2.1_hiera_l.yaml")
+SAM2_MODEL_PATH = os.getenv("SAM2_MODEL_PATH")
+SAM2_DEFAULT_MODEL_NAMES = (
+    "sam2.1_hiera_large_fresh.pt",
+    "sam2.1_hiera_large.pt",
+    "sam2.1_hiera_large.pth",
+    "sam2_hiera_large.pt",
+)
+SAM2_MODEL_DIR_CANDIDATES = ("models", "modelo")
+SAM2_UNLOAD_AFTER_USE = str(os.getenv("SAM2_UNLOAD_AFTER_USE", "0")).strip().lower() in {"1", "true", "yes"}
+FRONTEND_DEBUG = str(os.getenv("FRONTEND_DEBUG", "0")).strip().lower() in {"1", "true", "yes", "on"}
+
+# URL del Space de Gradio GPU (principal). Si falla, se usa el CPU fallback.
+# Local:      http://localhost:7860
+# Producción: https://<tu-space>.hf.space
+GRADIO_SPACE_URL: str = os.getenv("GRADIO_SPACE_URL", "").rstrip("/")
+
+# URL del Space de Gradio CPU (respaldo automático si el GPU falla o agota quota).
+GRADIO_CPU_FALLBACK_URL: str = os.getenv("GRADIO_CPU_FALLBACK_URL", "").rstrip("/")
+
+MAX_UPLOAD_WIDTH = 1024
+UPLOAD_JPEG_QUALITY = 82
+SD_JOB_STALE_SECONDS = 120
+UPLOAD_JOB_STALE_SECONDS = 900
+UPLOAD_BASE_SECONDS = 8.0
+UPLOAD_SECONDS_PER_MEGAPIXEL = 70.0
+SD_QUICK_TIMEOUT_SECONDS = 15.0
+
+SEMANTIC_MODEL_ID = "nvidia/segformer-b5-finetuned-ade-640-640"
+DEPTH_MODEL_ID = "Intel/dpt-hybrid-midas"
+
+
+def utc_now_iso() -> str:
+    return datetime.now(timezone.utc).isoformat()
+
+
+def log_timing_start(step_name: str) -> float:
+    started = time.perf_counter()
+    logger.info(f"[{step_name}] START at {utc_now_iso()}")
+    return started
+
+
+def log_timing_end(step_name: str, started: float) -> None:
+    elapsed = time.perf_counter() - started
+    logger.info(f"[{step_name}] DONE {elapsed:.3f}s at {utc_now_iso()}")
+
+
+def load_classic_dashboard_html() -> str:
+    if not CLASSIC_DASHBOARD_HTML_PATH.exists() or not CLASSIC_DASHBOARD_HTML_PATH.is_file():
+        raise RuntimeError(f"Dashboard HTML template not found: {CLASSIC_DASHBOARD_HTML_PATH}")
+    return CLASSIC_DASHBOARD_HTML_PATH.read_text(encoding="utf-8")

backend/home.html

@@ -1,61 +1,61 @@
-<!doctype html>
-<html lang="es">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Home - SaaS Dev</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="bg-slate-100 text-slate-900">
-    <div class="max-w-5xl mx-auto p-6 space-y-6">
-      <header class="rounded-3xl bg-white p-6 shadow-lg">
-        <h1 class="text-3xl font-bold">Home de desarrollo</h1>
-        <p class="mt-2 text-slate-600">
-          Esta página es la landing principal para el equipo de desarrollo.
-          Desde aquí puedes acceder al panel administrador, la vista previa y al
-          app embebido.
-        </p>
-      </header>
-
-      <div class="grid gap-6 md:grid-cols-3">
-        <a
-          href="/admin"
-          class="block rounded-3xl bg-white p-6 shadow-lg hover:shadow-xl transition"
-        >
-          <h2 class="text-xl font-semibold">Panel de Control</h2>
-          <p class="mt-2 text-slate-600">
-            Generar API keys, ver clientes y sesiones activas.
-          </p>
-        </a>
-        <a
-          href="/preview"
-          class="block rounded-3xl bg-white p-6 shadow-lg hover:shadow-xl transition"
-        >
-          <h2 class="text-xl font-semibold">Vista Previa</h2>
-          <p class="mt-2 text-slate-600">
-            Ver cómo se carga el visualizador dentro de un iframe.
-          </p>
-        </a>
-        <a
-          href="/app?key=ID_UNICO_DEL_CLIENTE_001"
-          class="block rounded-3xl bg-white p-6 shadow-lg hover:shadow-xl transition"
-        >
-          <h2 class="text-xl font-semibold">App en producción</h2>
-          <p class="mt-2 text-slate-600">
-            Abrir el visualizador directamente en la ruta del app.
-          </p>
-        </a>
-      </div>
-
-      <div class="rounded-3xl bg-white p-6 shadow-lg">
-        <h2 class="text-xl font-semibold">Sugerencia</h2>
-        <p class="mt-2 text-slate-600">
-          Mover el app a <code>/app</code> y mantener <code>/</code> como
-          landing de desarrollo es una buena práctica. Así el servidor puede
-          servir contenido para el equipo sin confundirlo con la ruta del
-          producto embebido.
-        </p>
-      </div>
-    </div>
-  </body>
-</html>
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Home - SaaS Dev</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-slate-100 text-slate-900">
+    <div class="max-w-5xl mx-auto p-6 space-y-6">
+      <header class="rounded-3xl bg-white p-6 shadow-lg">
+        <h1 class="text-3xl font-bold">Home de desarrollo</h1>
+        <p class="mt-2 text-slate-600">
+          Esta página es la landing principal para el equipo de desarrollo.
+          Desde aquí puedes acceder al panel administrador, la vista previa y al
+          app embebido.
+        </p>
+      </header>
+
+      <div class="grid gap-6 md:grid-cols-3">
+        <a
+          href="/admin"
+          class="block rounded-3xl bg-white p-6 shadow-lg hover:shadow-xl transition"
+        >
+          <h2 class="text-xl font-semibold">Panel de Control</h2>
+          <p class="mt-2 text-slate-600">
+            Generar API keys, ver clientes y sesiones activas.
+          </p>
+        </a>
+        <a
+          href="/preview"
+          class="block rounded-3xl bg-white p-6 shadow-lg hover:shadow-xl transition"
+        >
+          <h2 class="text-xl font-semibold">Vista Previa</h2>
+          <p class="mt-2 text-slate-600">
+            Ver cómo se carga el visualizador dentro de un iframe.
+          </p>
+        </a>
+        <a
+          href="/app?key=ID_UNICO_DEL_CLIENTE_001"
+          class="block rounded-3xl bg-white p-6 shadow-lg hover:shadow-xl transition"
+        >
+          <h2 class="text-xl font-semibold">App en producción</h2>
+          <p class="mt-2 text-slate-600">
+            Abrir el visualizador directamente en la ruta del app.
+          </p>
+        </a>
+      </div>
+
+      <div class="rounded-3xl bg-white p-6 shadow-lg">
+        <h2 class="text-xl font-semibold">Sugerencia</h2>
+        <p class="mt-2 text-slate-600">
+          Mover el app a <code>/app</code> y mantener <code>/</code> como
+          landing de desarrollo es una buena práctica. Así el servidor puede
+          servir contenido para el equipo sin confundirlo con la ruta del
+          producto embebido.
+        </p>
+      </div>
+    </div>
+  </body>
+</html>

backend/main.py

@@ -1,176 +1,128 @@
-import mimetypes
-import os
-import subprocess
-import shutil
-import threading
-import time
-from pathlib import Path
-
-from dotenv import load_dotenv
-load_dotenv(Path(__file__).resolve().parent / ".env")
-
-from fastapi import FastAPI, Request
-from fastapi.responses import RedirectResponse, FileResponse
-from fastapi.middleware.cors import CORSMiddleware
-from fastapi.staticfiles import StaticFiles
-
-from core.config import logger
-from routers import auth, catalog, media, pages, segmentation, sessions, share, openai_image, active_sessions
-from routers.catalog import seed_catalog
-
-mimetypes.add_type("application/javascript", ".js", strict=True)
-mimetypes.add_type("text/css", ".css", strict=True)
-mimetypes.add_type("image/svg+xml", ".svg", strict=True)
-
-app = FastAPI(title="Hyper Reality Backend")
-
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],
-    allow_credentials=True,
-    allow_methods=["GET", "POST", "PUT", "DELETE", "OPTIONS"],
-    allow_headers=["*"],
-)
-
-
-@app.middleware("http")
-async def remove_x_frame_options(request: Request, call_next):
-    response = await call_next(request)
-    if "x-frame-options" in response.headers:
-        del response.headers["x-frame-options"]
-    response.headers["Content-Security-Policy"] = "frame-ancestors *"
-    return response
-
-
-# Routers
-# Mantener sólo la ruta de subida de imágenes (/api/upload-image).
-# Comentamos las demás inclusiones para deshabilitar funcionalidades
-# posteriores (segmentación, inpainting, sesiones, catálogo, etc.).
-# Re-activar routers necesarios para el frontend
-app.include_router(auth.router)
-app.include_router(media.router)
-app.include_router(pages.router)
-app.include_router(sessions.router)
-app.include_router(segmentation.router)
-app.include_router(openai_image.router)
-app.include_router(active_sessions.router)
-app.include_router(catalog.router)
-
-# Static files
-BASE_DIR = Path(__file__).resolve().parent
-UPLOADS_DIR = BASE_DIR / "uploads"
-FRONTEND_DIST = BASE_DIR.parent / "frontend" / "dist"
-
-UPLOADS_DIR.mkdir(parents=True, exist_ok=True)
-app.mount("/uploads", StaticFiles(directory=UPLOADS_DIR), name="uploads")
-
-if (FRONTEND_DIST / "index.html").exists():
-    # Montar la SPA únicamente en /app (el servidor tiene su propia landing en /)
-    app.mount("/app", StaticFiles(directory=FRONTEND_DIST, html=True), name="frontend_app")
-    # También exponer los assets estáticos en la raíz /assets para que los
-    # archivos generados por Vite (con rutas absolutas `/assets/...`) sean
-    # resueltos correctamente cuando la SPA se carga desde /app.
-    assets_dir = FRONTEND_DIST / "assets"
-    if assets_dir.exists():
-        app.mount("/assets", StaticFiles(directory=assets_dir), name="frontend_assets")
-    # Servir manifest y favicon desde el dist para PWA/links absolutos
-    manifest = FRONTEND_DIST / "manifest.json"
-    favicon = FRONTEND_DIST / "favicon.svg"
-    if manifest.exists():
-        @app.get("/manifest.json")
-        async def _manifest():
-            return FileResponse(str(manifest), media_type="application/manifest+json")
-    if favicon.exists():
-        @app.get("/favicon.svg")
-        async def _favicon():
-            return FileResponse(str(favicon), media_type="image/svg+xml")
-
-# Ruta raíz: servir `backend/home.html` cuando exista (landing del servidor)
-HOME_HTML = BASE_DIR / "home.html"
-if HOME_HTML.exists():
-    @app.get("/")
-    async def _root_home():
-        return FileResponse(str(HOME_HTML), media_type="text/html")
-else:
-    # Si no existe `home.html`, redirigimos a la SPA en /app
-    @app.get("/")
-    async def _root_redirect():
-        return RedirectResponse(url="/app")
-
-
-# Frontend watcher (development helper)
-FRONTEND_DIR = BASE_DIR.parent / "frontend"
-FRONTEND_SRC = FRONTEND_DIR / "src"
-
-
-def scan_frontend_sources() -> dict:
-    if not FRONTEND_SRC.exists():
-        return {}
-    files = {}
-    for path in FRONTEND_SRC.rglob("*"):
-        if path.is_file() and path.suffix in {".ts", ".tsx", ".js", ".jsx", ".css", ".json", ".html"}:
-            files[path] = path.stat().st_mtime
-    for extra in [FRONTEND_DIR / "vite.config.ts", FRONTEND_DIR / "package.json", FRONTEND_DIR / "tsconfig.json"]:
-        if extra.exists():
-            files[extra] = extra.stat().st_mtime
-    return files
-
-
-def run_frontend_build() -> None:
-    if not FRONTEND_DIR.exists():
-        return
-    # Allow disabling automatic frontend builds (useful in production or CI without Node installed)
-    if os.getenv("SKIP_FRONTEND_BUILD", "").lower() in {"1", "true", "yes"}:
-        print("[backend] SKIP_FRONTEND_BUILD is set — skipping frontend build.")
-        return
-
-    npm_path = shutil.which("npm")
-    if not npm_path:
-        print("[backend] npm not found in PATH — skipping frontend build. Install Node.js/npm to enable auto-build or set SKIP_FRONTEND_BUILD=1 to disable this message.")
-        return
-
-    print("[backend] Ejecutando build del frontend...")
-    try:
-        result = subprocess.run([npm_path, "run", "build"], cwd=str(FRONTEND_DIR), capture_output=True, text=True)
-    except FileNotFoundError:
-        print("[backend] Error: npm executable not found when attempting to run build. Skipping frontend build.")
-        return
-
-    if result.returncode != 0:
-        print("[backend] Build falló:")
-        print(result.stdout)
-        print(result.stderr)
-    else:
-        print("[backend] Build completado correctamente.")
-
-
-def watch_frontend_changes(interval: float = 2.0) -> None:
-    last_state = scan_frontend_sources()
-    while True:
-        time.sleep(interval)
-        current_state = scan_frontend_sources()
-        if current_state != last_state:
-            if last_state:
-                print("[backend] Cambio detectado en frontend. Reconstruyendo...")
-                run_frontend_build()
-            last_state = current_state
-
-
-@app.on_event("startup")
-async def startup_seed_catalog():
-    if MONGODB_URI := os.getenv("MONGODB_URI", ""):
-        try:
-            await seed_catalog()
-        except Exception as exc:
-            logger.warning("[STARTUP] seed_catalog falló: %s", exc)
-
-
-@app.on_event("startup")
-async def startup_watch_frontend():
-    thread = threading.Thread(target=watch_frontend_changes, daemon=True)
-    thread.start()
-
-
-if __name__ == "__main__":
-    import uvicorn
-    uvicorn.run(app, host="0.0.0.0", port=8000, log_level="info")
+import mimetypes
+import os
+import subprocess
+import threading
+import time
+from pathlib import Path
+
+from dotenv import load_dotenv
+load_dotenv(Path(__file__).resolve().parent / ".env")
+
+from fastapi import FastAPI, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+
+from core.config import GRADIO_SPACE_URL, logger
+from routers import auth, catalog, media, pages, segmentation, sessions, share
+from routers.catalog import seed_catalog
+from services.sam2_service import lifespan
+
+mimetypes.add_type("application/javascript", ".js", strict=True)
+mimetypes.add_type("text/css", ".css", strict=True)
+mimetypes.add_type("image/svg+xml", ".svg", strict=True)
+
+logger.info("[STARTUP] GRADIO_SPACE_URL=%s", GRADIO_SPACE_URL or "(not set — using local SAM2)")
+
+app = FastAPI(title="Hyper Reality Backend", lifespan=lifespan)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["GET", "POST", "PUT", "DELETE", "OPTIONS"],
+    allow_headers=["*"],
+)
+
+
+@app.middleware("http")
+async def remove_x_frame_options(request: Request, call_next):
+    response = await call_next(request)
+    if "x-frame-options" in response.headers:
+        del response.headers["x-frame-options"]
+    response.headers["Content-Security-Policy"] = "frame-ancestors *"
+    return response
+
+
+# Routers
+app.include_router(pages.router)
+app.include_router(auth.router)
+app.include_router(share.router)
+app.include_router(media.router)
+app.include_router(catalog.router)
+app.include_router(sessions.router)
+app.include_router(segmentation.router)
+
+# Static files
+BASE_DIR = Path(__file__).resolve().parent
+UPLOADS_DIR = BASE_DIR / "uploads"
+FRONTEND_DIST = BASE_DIR.parent / "frontend" / "dist"
+
+UPLOADS_DIR.mkdir(parents=True, exist_ok=True)
+app.mount("/uploads", StaticFiles(directory=UPLOADS_DIR), name="uploads")
+
+if (FRONTEND_DIST / "index.html").exists():
+    # Montado en "/" como catch-all para SPA — los routers de API tienen prioridad
+    app.mount("/", StaticFiles(directory=FRONTEND_DIST, html=True), name="frontend")
+
+
+# Frontend watcher (development helper)
+FRONTEND_DIR = BASE_DIR.parent / "frontend"
+FRONTEND_SRC = FRONTEND_DIR / "src"
+
+
+def scan_frontend_sources() -> dict:
+    if not FRONTEND_SRC.exists():
+        return {}
+    files = {}
+    for path in FRONTEND_SRC.rglob("*"):
+        if path.is_file() and path.suffix in {".ts", ".tsx", ".js", ".jsx", ".css", ".json", ".html"}:
+            files[path] = path.stat().st_mtime
+    for extra in [FRONTEND_DIR / "vite.config.ts", FRONTEND_DIR / "package.json", FRONTEND_DIR / "tsconfig.json"]:
+        if extra.exists():
+            files[extra] = extra.stat().st_mtime
+    return files
+
+
+def run_frontend_build() -> None:
+    if not FRONTEND_DIR.exists():
+        return
+    print("[backend] Ejecutando build del frontend...")
+    result = subprocess.run(["npm", "run", "build"], cwd=str(FRONTEND_DIR), capture_output=True, text=True)
+    if result.returncode != 0:
+        print("[backend] Build falló:")
+        print(result.stdout)
+        print(result.stderr)
+    else:
+        print("[backend] Build completado correctamente.")
+
+
+def watch_frontend_changes(interval: float = 2.0) -> None:
+    last_state = scan_frontend_sources()
+    while True:
+        time.sleep(interval)
+        current_state = scan_frontend_sources()
+        if current_state != last_state:
+            if last_state:
+                print("[backend] Cambio detectado en frontend. Reconstruyendo...")
+                run_frontend_build()
+            last_state = current_state
+
+
+@app.on_event("startup")
+async def startup_seed_catalog():
+    if MONGODB_URI := os.getenv("MONGODB_URI", ""):
+        try:
+            await seed_catalog()
+        except Exception as exc:
+            logger.warning("[STARTUP] seed_catalog falló: %s", exc)
+
+
+@app.on_event("startup")
+async def startup_watch_frontend():
+    thread = threading.Thread(target=watch_frontend_changes, daemon=True)
+    thread.start()
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000, log_level="info")

backend/models/schemas.py

@@ -112,7 +112,5 @@ class ApplyColorRequest(BaseModel):
 class ApplyTextureAIRequest(BaseModel):
     filename: str
     original_filename: str = ""
-    mask_filename: str = ""
+    mask_filename: str
     prompt: str = ""
-    texture_name: str = ""
-

backend/preview.html

@@ -1,242 +1,242 @@
-<!doctype html>
-<html lang="es">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vista previa del app</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="bg-slate-100 text-slate-900">
-    <div class="max-w-5xl mx-auto p-6 space-y-6">
-      <header class="flex items-center justify-between gap-4">
-        <div>
-          <h1 class="text-3xl font-bold">Vista previa del app</h1>
-          <p class="text-slate-600">
-            Aquí puedes ver cómo se despliega el visualizador con una API key de
-            ejemplo.
-          </p>
-        </div>
-        <a
-          href="/admin"
-          class="px-4 py-2 bg-slate-800 text-white rounded-xl hover:bg-slate-900"
-          >Ir al panel</a
-        >
-      </header>
-
-      <div
-        class="rounded-3xl overflow-hidden border border-slate-200 shadow-lg"
-      >
-        <iframe
-          id="preview-iframe"
-          src=""
-          class="w-full min-h-[600px] border-0"
-        ></iframe>
-      </div>
-      <div class="rounded-3xl bg-white p-6 shadow-lg">
-        <h2 class="text-xl font-semibold mb-3">Puente de desarrollo</h2>
-        <p class="text-slate-700 mb-4">
-          Esta vista previa se conecta con el app React embebido. Puedes enviar
-          comandos y ver las respuestas del iframe.
-        </p>
-        <div class="grid gap-4 md:grid-cols-2 mb-4">
-          <div>
-            <label class="block text-sm font-medium text-slate-700 mb-2">
-              Cliente de prueba
-            </label>
-            <select
-              id="client-select"
-              class="w-full rounded-2xl border border-slate-300 px-4 py-3"
-            >
-              <option value="ID_UNICO_DEL_CLIENTE_001">
-                ID_UNICO_DEL_CLIENTE_001
-              </option>
-            </select>
-          </div>
-          <div>
-            <label class="block text-sm font-medium text-slate-700 mb-2">
-              Comando personalizado
-            </label>
-            <input
-              id="custom-command"
-              type="text"
-              placeholder="Ej. set-color:#f97316"
-              class="w-full rounded-2xl border border-slate-300 px-4 py-3"
-            />
-          </div>
-        </div>
-        <div class="flex flex-wrap gap-3 mb-4">
-          <button
-            id="load-client"
-            class="px-4 py-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700"
-          >
-            Cargar cliente seleccionado
-          </button>
-          <button
-            id="send-ping"
-            class="px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700"
-          >
-            Enviar ping
-          </button>
-          <button
-            id="request-status"
-            class="px-4 py-2 bg-slate-200 text-slate-900 rounded-xl hover:bg-slate-300"
-          >
-            Pedir estado al app
-          </button>
-          <button
-            id="send-custom"
-            class="px-4 py-2 bg-green-600 text-white rounded-xl hover:bg-green-700"
-          >
-            Enviar comando
-          </button>
-        </div>
-        <div
-          id="bridge-log"
-          class="rounded-2xl border border-slate-200 bg-slate-50 p-4 text-slate-700 h-52 overflow-y-auto"
-        ></div>
-      </div>
-      <script>
-        const iframe = document.getElementById("preview-iframe");
-        const bridgeLog = document.getElementById("bridge-log");
-        const clientSelect = document.getElementById("client-select");
-        const customCommand = document.getElementById("custom-command");
-
-        function addLog(message) {
-          const item = document.createElement("div");
-          item.className = "text-sm mb-2";
-          item.textContent = message;
-          bridgeLog.appendChild(item);
-          bridgeLog.scrollTop = bridgeLog.scrollHeight;
-        }
-
-        async function loadClients() {
-          try {
-            const res = await fetch("/api/keys");
-            const data = await res.json();
-            if (!res.ok) {
-              throw new Error(data.error || "No se pudo cargar los clientes.");
-            }
-            clientSelect.innerHTML = data.keys
-              .map(
-                (key) =>
-                  `<option value="${key.client_id}">${key.client_id} - ${key.nombre}</option>`,
-              )
-              .join("");
-            addLog(`Clientes cargados: ${data.keys.length}`);
-          } catch (error) {
-            addLog(`Error al cargar clientes: ${error.message || error}`);
-          }
-        }
-
-        async function checkEnvironment() {
-          try {
-            const res = await fetch("/health");
-            const data = await res.json();
-            if (!res.ok || !data.frontend_ready) {
-              addLog(
-                "Ambiente no listo: asegúrate de tener backend y frontend levantados.",
-              );
-              return false;
-            }
-            addLog("Ambiente OK: backend y frontend están levantados.");
-            return true;
-          } catch (error) {
-            addLog(
-              "No se pudo verificar el ambiente. El backend debe estar corriendo.",
-            );
-            return false;
-          }
-        }
-
-        async function loadPreviewToken() {
-          const backendOk = await checkEnvironment();
-          if (!backendOk) return;
-          const clientId = clientSelect.value || "ID_UNICO_DEL_CLIENTE_001";
-          try {
-            const res = await fetch("/api/token", {
-              method: "POST",
-              headers: { "Content-Type": "application/x-www-form-urlencoded" },
-              body: `client_id=${encodeURIComponent(clientId)}`,
-            });
-            const data = await res.json();
-            if (!res.ok) {
-              throw new Error(data.error || "No se pudo generar token.");
-            }
-            iframe.src = `/app?token=${encodeURIComponent(data.token)}`;
-            addLog(`Token generado para ${clientId}`);
-          } catch (error) {
-            addLog(`Error generando token: ${error.message || error}`);
-          }
-        }
-
-        function sendBridgeCommand(command, payload) {
-          if (!iframe.contentWindow) {
-            addLog("El iframe aún no está listo.");
-            return;
-          }
-          iframe.contentWindow.postMessage(
-            { type: "preview-command", command, payload },
-            "*",
-          );
-          addLog(
-            `Enviado comando al app: ${command}${payload ? ` ${JSON.stringify(payload)}` : ""}`,
-          );
-        }
-
-        window.addEventListener("message", (event) => {
-          if (event.source !== iframe.contentWindow) return;
-          const data = event.data;
-          if (!data || typeof data !== "object") return;
-
-          if (data.type === "saas-session-active") {
-            addLog(`React indicó sesión activa: ${data.nombreCliente}`);
-          }
-          if (data.type === "app-loaded") {
-            addLog(`React cargado con cliente: ${data.clientId}`);
-          }
-          if (data.type === "preview-response") {
-            addLog(`React responde: ${JSON.stringify(data)}`);
-          }
-        });
-
-        document.getElementById("load-client").addEventListener("click", () => {
-          loadPreviewToken();
-        });
-
-        document.getElementById("send-ping").addEventListener("click", () => {
-          sendBridgeCommand("ping");
-        });
-
-        document
-          .getElementById("request-status")
-          .addEventListener("click", () => {
-            sendBridgeCommand("status");
-          });
-
-        document.getElementById("send-custom").addEventListener("click", () => {
-          const commandText = customCommand.value.trim();
-          if (!commandText) {
-            addLog("Ingresa un comando personalizado.");
-            return;
-          }
-          const [command, payloadString] = commandText.split(":", 2);
-          let payload;
-          if (payloadString) {
-            payload = { value: payloadString };
-          }
-          sendBridgeCommand(command, payload);
-        });
-
-        loadClients().then(loadPreviewToken);
-      </script>
-
-      <div class="rounded-3xl bg-white p-6 shadow-lg">
-        <h2 class="text-xl font-semibold mb-3">Nota</h2>
-        <p class="text-slate-700">
-          Esta vista previa genera un token de acceso para el cliente
-          <strong>ID_UNICO_DEL_CLIENTE_001</strong> y carga el app con él.
-        </p>
-      </div>
-    </div>
-  </body>
-</html>
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vista previa del app</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-slate-100 text-slate-900">
+    <div class="max-w-5xl mx-auto p-6 space-y-6">
+      <header class="flex items-center justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold">Vista previa del app</h1>
+          <p class="text-slate-600">
+            Aquí puedes ver cómo se despliega el visualizador con una API key de
+            ejemplo.
+          </p>
+        </div>
+        <a
+          href="/admin"
+          class="px-4 py-2 bg-slate-800 text-white rounded-xl hover:bg-slate-900"
+          >Ir al panel</a
+        >
+      </header>
+
+      <div
+        class="rounded-3xl overflow-hidden border border-slate-200 shadow-lg"
+      >
+        <iframe
+          id="preview-iframe"
+          src=""
+          class="w-full min-h-[600px] border-0"
+        ></iframe>
+      </div>
+      <div class="rounded-3xl bg-white p-6 shadow-lg">
+        <h2 class="text-xl font-semibold mb-3">Puente de desarrollo</h2>
+        <p class="text-slate-700 mb-4">
+          Esta vista previa se conecta con el app React embebido. Puedes enviar
+          comandos y ver las respuestas del iframe.
+        </p>
+        <div class="grid gap-4 md:grid-cols-2 mb-4">
+          <div>
+            <label class="block text-sm font-medium text-slate-700 mb-2">
+              Cliente de prueba
+            </label>
+            <select
+              id="client-select"
+              class="w-full rounded-2xl border border-slate-300 px-4 py-3"
+            >
+              <option value="ID_UNICO_DEL_CLIENTE_001">
+                ID_UNICO_DEL_CLIENTE_001
+              </option>
+            </select>
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-slate-700 mb-2">
+              Comando personalizado
+            </label>
+            <input
+              id="custom-command"
+              type="text"
+              placeholder="Ej. set-color:#f97316"
+              class="w-full rounded-2xl border border-slate-300 px-4 py-3"
+            />
+          </div>
+        </div>
+        <div class="flex flex-wrap gap-3 mb-4">
+          <button
+            id="load-client"
+            class="px-4 py-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700"
+          >
+            Cargar cliente seleccionado
+          </button>
+          <button
+            id="send-ping"
+            class="px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700"
+          >
+            Enviar ping
+          </button>
+          <button
+            id="request-status"
+            class="px-4 py-2 bg-slate-200 text-slate-900 rounded-xl hover:bg-slate-300"
+          >
+            Pedir estado al app
+          </button>
+          <button
+            id="send-custom"
+            class="px-4 py-2 bg-green-600 text-white rounded-xl hover:bg-green-700"
+          >
+            Enviar comando
+          </button>
+        </div>
+        <div
+          id="bridge-log"
+          class="rounded-2xl border border-slate-200 bg-slate-50 p-4 text-slate-700 h-52 overflow-y-auto"
+        ></div>
+      </div>
+      <script>
+        const iframe = document.getElementById("preview-iframe");
+        const bridgeLog = document.getElementById("bridge-log");
+        const clientSelect = document.getElementById("client-select");
+        const customCommand = document.getElementById("custom-command");
+
+        function addLog(message) {
+          const item = document.createElement("div");
+          item.className = "text-sm mb-2";
+          item.textContent = message;
+          bridgeLog.appendChild(item);
+          bridgeLog.scrollTop = bridgeLog.scrollHeight;
+        }
+
+        async function loadClients() {
+          try {
+            const res = await fetch("/api/keys");
+            const data = await res.json();
+            if (!res.ok) {
+              throw new Error(data.error || "No se pudo cargar los clientes.");
+            }
+            clientSelect.innerHTML = data.keys
+              .map(
+                (key) =>
+                  `<option value="${key.client_id}">${key.client_id} - ${key.nombre}</option>`,
+              )
+              .join("");
+            addLog(`Clientes cargados: ${data.keys.length}`);
+          } catch (error) {
+            addLog(`Error al cargar clientes: ${error.message || error}`);
+          }
+        }
+
+        async function checkEnvironment() {
+          try {
+            const res = await fetch("/health");
+            const data = await res.json();
+            if (!res.ok || !data.frontend_ready) {
+              addLog(
+                "Ambiente no listo: asegúrate de tener backend y frontend levantados.",
+              );
+              return false;
+            }
+            addLog("Ambiente OK: backend y frontend están levantados.");
+            return true;
+          } catch (error) {
+            addLog(
+              "No se pudo verificar el ambiente. El backend debe estar corriendo.",
+            );
+            return false;
+          }
+        }
+
+        async function loadPreviewToken() {
+          const backendOk = await checkEnvironment();
+          if (!backendOk) return;
+          const clientId = clientSelect.value || "ID_UNICO_DEL_CLIENTE_001";
+          try {
+            const res = await fetch("/api/token", {
+              method: "POST",
+              headers: { "Content-Type": "application/x-www-form-urlencoded" },
+              body: `client_id=${encodeURIComponent(clientId)}`,
+            });
+            const data = await res.json();
+            if (!res.ok) {
+              throw new Error(data.error || "No se pudo generar token.");
+            }
+            iframe.src = `/app?token=${encodeURIComponent(data.token)}`;
+            addLog(`Token generado para ${clientId}`);
+          } catch (error) {
+            addLog(`Error generando token: ${error.message || error}`);
+          }
+        }
+
+        function sendBridgeCommand(command, payload) {
+          if (!iframe.contentWindow) {
+            addLog("El iframe aún no está listo.");
+            return;
+          }
+          iframe.contentWindow.postMessage(
+            { type: "preview-command", command, payload },
+            "*",
+          );
+          addLog(
+            `Enviado comando al app: ${command}${payload ? ` ${JSON.stringify(payload)}` : ""}`,
+          );
+        }
+
+        window.addEventListener("message", (event) => {
+          if (event.source !== iframe.contentWindow) return;
+          const data = event.data;
+          if (!data || typeof data !== "object") return;
+
+          if (data.type === "saas-session-active") {
+            addLog(`React indicó sesión activa: ${data.nombreCliente}`);
+          }
+          if (data.type === "app-loaded") {
+            addLog(`React cargado con cliente: ${data.clientId}`);
+          }
+          if (data.type === "preview-response") {
+            addLog(`React responde: ${JSON.stringify(data)}`);
+          }
+        });
+
+        document.getElementById("load-client").addEventListener("click", () => {
+          loadPreviewToken();
+        });
+
+        document.getElementById("send-ping").addEventListener("click", () => {
+          sendBridgeCommand("ping");
+        });
+
+        document
+          .getElementById("request-status")
+          .addEventListener("click", () => {
+            sendBridgeCommand("status");
+          });
+
+        document.getElementById("send-custom").addEventListener("click", () => {
+          const commandText = customCommand.value.trim();
+          if (!commandText) {
+            addLog("Ingresa un comando personalizado.");
+            return;
+          }
+          const [command, payloadString] = commandText.split(":", 2);
+          let payload;
+          if (payloadString) {
+            payload = { value: payloadString };
+          }
+          sendBridgeCommand(command, payload);
+        });
+
+        loadClients().then(loadPreviewToken);
+      </script>
+
+      <div class="rounded-3xl bg-white p-6 shadow-lg">
+        <h2 class="text-xl font-semibold mb-3">Nota</h2>
+        <p class="text-slate-700">
+          Esta vista previa genera un token de acceso para el cliente
+          <strong>ID_UNICO_DEL_CLIENTE_001</strong> y carga el app con él.
+        </p>
+      </div>
+    </div>
+  </body>
+</html>

backend/requirements.txt

@@ -9,4 +9,3 @@ pydantic
 python-multipart
 gradio_client
 opencv-python-headless
-openai

backend/routers/auth.py

@@ -21,7 +21,7 @@ def _get_col():
     global _client, _db, _col
     if _col is None:
         if not MONGODB_URI:
-            return None
+            raise RuntimeError("MONGODB_URI no configurado")
         _client = AsyncIOMotorClient(MONGODB_URI)
         _db = _client["hyper_reality"]
         _col = _db["clients"]
@@ -87,14 +87,6 @@ async def startup():
 
 @router.post("/api/token")
 async def token(client_id: str = Form(...)):
-    if not MONGODB_URI:
-        # fallback in-memory lookup
-        doc = next((c for c in _DEFAULT_CLIENTS if c["_id"] == client_id), None)
-        if not doc:
-            return JSONResponse(content={"error": "client_id inválido"}, status_code=400)
-        tok = generate_token_for_client(client_id)
-        return JSONResponse(content={"token": tok, "expires_in": TOKEN_TTL})
-
     col = _get_col()
     doc = await col.find_one({"_id": client_id})
     if not doc:
@@ -111,13 +103,10 @@ async def config(client_id: str = Query(None), token: str = Query(None)):
             return JSONResponse(content={"error": "token inválido o expirado"}, status_code=401)
     if not client_id:
         return JSONResponse(content={"error": "client_id o token requerido"}, status_code=400)
-    if not MONGODB_URI:
-        doc = next((c for c in _DEFAULT_CLIENTS if c["_id"] == client_id), None)
-        datos = doc or {"nombre": "Cliente Desconocido", "color_primario": "#f97316", "created_at": _now_iso()}
-    else:
-        col = _get_col()
-        doc = await col.find_one({"_id": client_id})
-        datos = doc or {"nombre": "Cliente Desconocido", "color_primario": "#f97316", "created_at": _now_iso()}
+
+    col = _get_col()
+    doc = await col.find_one({"_id": client_id})
+    datos = doc or {"nombre": "Cliente Desconocido", "color_primario": "#f97316", "created_at": _now_iso()}
     datos.pop("_id", None)
     ACTIVE_SESSIONS[client_id] = _now_iso()
     return JSONResponse(content={"client_id": client_id, **datos})
@@ -137,18 +126,6 @@ async def session_start(client_id: str = Form(None), token: str = Form(None)):
 
 @router.get("/api/keys")
 async def api_keys():
-    if not MONGODB_URI:
-        keys = [
-            {
-                "client_id": d["_id"],
-                "nombre": d.get("nombre", ""),
-                "color_primario": d.get("color_primario", ""),
-                "created_at": d.get("created_at", ""),
-            }
-            for d in _DEFAULT_CLIENTS
-        ]
-        return JSONResponse(content={"keys": keys, "count": len(keys)})
-
     col = _get_col()
     docs = await col.find({}).to_list(length=500)
     keys = [
@@ -167,11 +144,8 @@ async def api_keys():
 async def generate_key(request: Request, nombre: str = Form(...), color_primario: str = Form("#8b5cf6")):
     new_key = f"CLIENTE_{uuid4().hex[:8].upper()}"
     doc = {"_id": new_key, "nombre": nombre, "color_primario": color_primario, "created_at": _now_iso()}
-    if not MONGODB_URI:
-        _DEFAULT_CLIENTS.append(doc)
-    else:
-        col = _get_col()
-        await col.insert_one(doc)
+    col = _get_col()
+    await col.insert_one(doc)
     base_url = str(request.base_url).rstrip("/")
     if request.headers.get("x-forwarded-proto") == "https" and base_url.startswith("http://"):
         base_url = "https://" + base_url[7:]
@@ -190,13 +164,6 @@ async def generate_key(request: Request, nombre: str = Form(...), color_primario
 
 @router.delete("/api/keys/{client_id}")
 async def delete_key(client_id: str):
-    if not MONGODB_URI:
-        before = len(_DEFAULT_CLIENTS)
-        _DEFAULT_CLIENTS[:] = [c for c in _DEFAULT_CLIENTS if c["_id"] != client_id]
-        if len(_DEFAULT_CLIENTS) == before:
-            return JSONResponse(content={"error": "client_id no encontrado"}, status_code=404)
-        return JSONResponse(content={"status": "eliminado", "client_id": client_id})
-
     col = _get_col()
     result = await col.delete_one({"_id": client_id})
     if result.deleted_count == 0:

backend/routers/catalog.py

@@ -1,240 +1,240 @@
-import os
-from datetime import datetime
-
-from fastapi import APIRouter
-from fastapi.responses import JSONResponse
-from motor.motor_asyncio import AsyncIOMotorClient
-from pydantic import BaseModel
-
-router = APIRouter(prefix="/api/catalog")
-
-MONGODB_URI = os.getenv("MONGODB_URI", "")
-_client: AsyncIOMotorClient | None = None
-_db = None
-_col = None
-
-
-def _get_col():
-    global _client, _db, _col
-    if _col is None:
-        if not MONGODB_URI:
-            raise RuntimeError("MONGODB_URI no configurado")
-        _client = AsyncIOMotorClient(MONGODB_URI)
-        _db = _client["hyper_reality"]
-        _col = _db["catalog"]
-    return _col
-
-
-# ── Datos iniciales (se insertan solo si la colección está vacía) ─────────────
-_SEED = [
-    {
-        "_id": "acm",
-        "nombre": "ACM (Aluminio Compuesto)",
-        "tipo": "paredes",
-        "descripcion": "Paneles de aluminio compuesto para fachadas y exteriores",
-        "especificaciones": [
-            "Espesor de ACM 4mm.",
-            "Medida 1.22m x 2.44m",
-            "Facil Mantenimiento.",
-            "Espesor de Aluminio 0.40mm.",
-            "Se puede doblar o biselar",
-        ],
-        "url_detalle": "https://heyzine.com/flip-book/447fe3eb8e.html#page/16",
-        "productos": [
-            {"id": "acm_white",       "nombre": "Glossy White",     "textura": "Texture_ACM/ACM_White.png",          "url_preview": "/seg/texture-preview/Texture_ACM/ACM_White.png",          "dimensiones": ["1.22x2.44", "1.50x4.98"]},
-            {"id": "acm_amarillo",    "nombre": "Amarillo",          "textura": "Texture_ACM/ACM_Amarillo.png",       "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Amarillo.png",       "dimensiones": ["1.22x2.44", "1.50x4.98"]},
-            {"id": "acm_orange",      "nombre": "Glossy Orange",     "textura": "Texture_ACM/ACM_Orange.png",         "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Orange.png",         "dimensiones": ["1.22x2.44", "1.50x4.98"]},
-            {"id": "acm_red",         "nombre": "Glossy Red",        "textura": "Texture_ACM/ACM_Glossy_Red.png",    "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Glossy_Red.png",    "dimensiones": ["1.22x2.44", "1.50x4.98"]},
-            {"id": "acm_light_blue",  "nombre": "Light Blue",        "textura": "Texture_ACM/ACM_Light_Blue.png",     "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Light_Blue.png",     "dimensiones": ["1.22x2.44"]},
-            {"id": "acm_azul",        "nombre": "Azul",              "textura": "Texture_ACM/ACM_Azul.png",           "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Azul.png",           "dimensiones": ["1.22x2.44", "1.50x4.98"]},
-            {"id": "acm_verde_hn",    "nombre": "Verde HN",          "textura": "Texture_ACM/ACM_Verde_HN.png",       "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Verde_HN.png",       "dimensiones": ["1.22x2.44"]},
-            {"id": "acm_verde_lima",  "nombre": "Verde Lima",        "textura": "Texture_ACM/ACM_Verde_Lima.png",     "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Verde_Lima.png",     "dimensiones": ["1.22x2.44", "1.50x4.98"]},
-            {"id": "acm_verde",       "nombre": "Verde",             "textura": "Texture_ACM/ACM_Verde.png",          "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Verde.png",          "dimensiones": ["1.22x2.44", "1.50x4.98"]},
-            {"id": "acm_madera_clara","nombre": "Madera Clara",      "textura": "Texture_ACM/ACM_Madera_Clara.png",   "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Madera_Clara.png",   "dimensiones": ["1.22x2.44"]},
-            {"id": "acm_roble",       "nombre": "Roble (Oak)",       "textura": "Texture_ACM/ACM_ROBLE(OAK).png",    "url_preview": "/seg/texture-preview/Texture_ACM/ACM_ROBLE(OAK).png",    "dimensiones": ["1.22x2.44"]},
-            {"id": "acm_grafito",     "nombre": "Grafito",           "textura": "Texture_ACM/ACM_Grafito.png",        "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Grafito.png",        "dimensiones": ["1.22x2.44", "1.50x4.98"]},
-            {"id": "acm_metalic",     "nombre": "Silver Metallic",   "textura": "Texture_ACM/ACM_Metalic.png",        "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Metalic.png",        "dimensiones": ["1.22x2.44", "1.50x4.98"]},
-            {"id": "acm_mouse_grey",  "nombre": "Mouse Grey",        "textura": "Texture_ACM/ACM_MouseGrey.png",      "url_preview": "/seg/texture-preview/Texture_ACM/ACM_MouseGrey.png",      "dimensiones": ["1.22x2.44", "1.50x4.98"]},
-            {"id": "acm_matte_black", "nombre": "Matte Black",       "textura": "Texture_ACM/ACM_Matteblack.png",    "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Matteblack.png",    "dimensiones": ["1.22x2.44", "1.50x4.98"]},
-            {"id": "acm_glossy_black","nombre": "Glossy Black",      "textura": "Texture_ACM/ACM_Glossy_Black.png",  "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Glossy_Black.png",  "dimensiones": ["1.22x2.44", "1.50x4.98"]},
-        ],
-        "created_at": "2026-04-20T00:00:00Z",
-    },
-    {
-        "_id": "wpc",
-        "nombre": "WPC (Exterior e Interior)",
-        "tipo": "paredes",
-        "descripcion": "Los paneles de WPC se utilizan como revestimiento decorativo para paredes. No se deforma, no requiere mantenimiento constante y tiene mayor durabilidad. Crea mayor estetica e instalacion rapida.",
-        "especificaciones": [
-            "Revestimiento decorativo para paredes.",
-            "No se deforma ni requiere mantenimiento constante.",
-            "Mayor durabilidad y estetica.",
-            "Instalacion rapida.",
-            "Ideal para: sala principal (pared protagonista), comedor, interior de oficina, pasillo o entradas.",
-        ],
-        "url_detalle": "https://heyzine.com/flip-book/447fe3eb8e.html#page/39",
-        "productos": [
-            {"id": "WPC_madera_oscuro", "nombre": "WPC Madera Oscuro", "textura": "Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_oscuro.png", "url_preview": "/seg/texture-preview/Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_oscuro.png", "dimensiones": ["2.90x0.25"]},
-            {"id": "WPC_madera_claro",  "nombre": "WPC Madera Claro",  "textura": "Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_claro.png",  "url_preview": "/seg/texture-preview/Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_claro.png",  "dimensiones": ["2.90x0.25"]},
-            {"id": "WPC_madera_gris",   "nombre": "WPC Madera Gris",   "textura": "Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_gris.png",   "url_preview": "/seg/texture-preview/Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_gris.png",   "dimensiones": ["2.90x0.25"]},
-            {"id": "WPC_negro",         "nombre": "WPC Negro",          "textura": "Texture_WPC_EXTERIOR_INTERIOR/WPC_negro.png",          "url_preview": "/seg/texture-preview/Texture_WPC_EXTERIOR_INTERIOR/WPC_negro.png",          "dimensiones": ["2.90x0.25"]},
-        ],
-        "created_at": "2026-05-07T00:00:00Z",
-    },
-    {
-        "_id": "wpc_deck",
-        "nombre": "WPC Deck",
-        "tipo": "suelos",
-        "descripcion": "Deck de WPC para exteriores e interiores. Ideal para terrazas, jardines, bordes de piscina y espacios al aire libre.",
-        "especificaciones": [
-            "Resistencia a la intemperie.",
-            "Bajo mantenimiento.",
-            "Respetuosa con el medio ambiente.",
-            "Esteticamente agradable.",
-        ],
-        "url_detalle": "https://heyzine.com/flip-book/447fe3eb8e.html#page/38",
-        "productos": [
-            {"id": "DECK_madera",        "nombre": "Deck Madera",        "textura": "Texture_WPC_DECK/DECK_madera.png",        "url_preview": "/seg/texture-preview/Texture_WPC_DECK/DECK_madera.png",        "dimensiones": ["2.90x0.14"]},
-            {"id": "DECK_madera_oscuro", "nombre": "Deck Madera Oscuro", "textura": "Texture_WPC_DECK/DECK_madera_oscuro.png", "url_preview": "/seg/texture-preview/Texture_WPC_DECK/DECK_madera_oscuro.png", "dimensiones": ["2.90x0.14"]},
-            {"id": "DECK_gris",          "nombre": "Deck Gris",           "textura": "Texture_WPC_DECK/DECK_gris.png",          "url_preview": "/seg/texture-preview/Texture_WPC_DECK/DECK_gris.png",          "dimensiones": ["2.90x0.14"]},
-        ],
-        "created_at": "2026-05-08T00:00:00Z",
-    },
-]
-
-
-async def seed_catalog() -> None:
-    col = _get_col()
-    count = await col.count_documents({})
-    if count == 0:
-        await col.insert_many(_SEED)
-        return
-
-    # Migrar documentos existentes: añadir campos que falten según _SEED
-    for seed_item in _SEED:
-        doc = await col.find_one({"_id": seed_item["_id"]})
-        if not doc:
-            continue
-        patch = {k: v for k, v in seed_item.items() if k not in doc and k != "_id"}
-        if patch:
-            await col.update_one({"_id": seed_item["_id"]}, {"$set": patch})
-
-
-def _serialize(doc: dict) -> dict:
-    out = dict(doc)
-    out["id"] = str(out.pop("_id"))
-    return out
-
-
-def _seed_as_response() -> list[dict]:
-    return [{**{k: v for k, v in item.items() if k != "_id"}, "id": item["_id"]} for item in _SEED]
-
-
-# ── Endpoints de lectura ──────────────────────────────────────────────────────
-
-@router.get("/textures")
-async def get_texture_catalog() -> JSONResponse:
-    try:
-        col = _get_col()
-        docs = await col.find({}).to_list(length=200)
-        if docs:
-            return JSONResponse(content={"categories": [_serialize(d) for d in docs]})
-    except Exception:
-        pass
-    # Fallback a datos estáticos si MongoDB no está disponible o la colección está vacía
-    return JSONResponse(content={"categories": _seed_as_response()})
-
-
-@router.get("/textures/{category_id}")
-async def get_texture_category(category_id: str) -> JSONResponse:
-    try:
-        col = _get_col()
-        doc = await col.find_one({"_id": category_id})
-        if doc:
-            return JSONResponse(content=_serialize(doc))
-    except Exception:
-        pass
-    fallback = next((item for item in _SEED if item["_id"] == category_id), None)
-    if fallback:
-        return JSONResponse(content=_seed_as_response()[_SEED.index(fallback)])
-    return JSONResponse(content={"detail": f"Categoria '{category_id}' no encontrada"}, status_code=404)
-
-
-# ── Modelos ───────────────────────────────────────────────────────────────────
-
-class ProductoItem(BaseModel):
-    id: str
-    nombre: str
-    textura: str
-    url_preview: str
-    dimensiones: list[str] = []
-
-
-class CategoriaBody(BaseModel):
-    id: str
-    nombre: str
-    tipo: str = "paredes"
-    descripcion: str = ""
-    especificaciones: list[str] = []
-    url_detalle: str = ""
-    productos: list[ProductoItem] = []
-
-
-# ── Endpoints de escritura ────────────────────────────────────────────────────
-
-@router.post("/category")
-async def add_category(body: CategoriaBody) -> JSONResponse:
-    col = _get_col()
-    existing = await col.find_one({"_id": body.id})
-    if existing:
-        return JSONResponse(content={"error": f"Categoria '{body.id}' ya existe"}, status_code=409)
-    doc = body.model_dump()
-    doc["_id"] = doc.pop("id")
-    doc["created_at"] = datetime.utcnow().isoformat() + "Z"
-    await col.insert_one(doc)
-    return JSONResponse(content={"ok": True, "id": body.id}, status_code=201)
-
-
-@router.put("/category/{category_id}")
-async def update_category(category_id: str, body: CategoriaBody) -> JSONResponse:
-    col = _get_col()
-    doc = body.model_dump()
-    doc.pop("id", None)
-    doc["updated_at"] = datetime.utcnow().isoformat() + "Z"
-    result = await col.update_one({"_id": category_id}, {"$set": doc})
-    if result.matched_count == 0:
-        return JSONResponse(content={"error": "Categoria no encontrada"}, status_code=404)
-    return JSONResponse(content={"ok": True})
-
-
-@router.delete("/category/{category_id}")
-async def delete_category(category_id: str) -> JSONResponse:
-    col = _get_col()
-    result = await col.delete_one({"_id": category_id})
-    if result.deleted_count == 0:
-        return JSONResponse(content={"error": "Categoria no encontrada"}, status_code=404)
-    return JSONResponse(content={"ok": True, "deleted": category_id})
-
-
-@router.post("/category/{category_id}/product")
-async def add_product(category_id: str, product: ProductoItem) -> JSONResponse:
-    col = _get_col()
-    result = await col.update_one(
-        {"_id": category_id, "productos.id": {"$ne": product.id}},
-        {"$push": {"productos": product.model_dump()}, "$set": {"updated_at": datetime.utcnow().isoformat() + "Z"}},
-    )
-    if result.matched_count == 0:
-        return JSONResponse(content={"error": "Categoria no encontrada o producto duplicado"}, status_code=409)
-    return JSONResponse(content={"ok": True}, status_code=201)
-
-
-@router.delete("/category/{category_id}/product/{product_id}")
-async def delete_product(category_id: str, product_id: str) -> JSONResponse:
-    col = _get_col()
-    result = await col.update_one(
-        {"_id": category_id},
-        {"$pull": {"productos": {"id": product_id}}, "$set": {"updated_at": datetime.utcnow().isoformat() + "Z"}},
-    )
-    if result.matched_count == 0:
-        return JSONResponse(content={"error": "Categoria no encontrada"}, status_code=404)
-    return JSONResponse(content={"ok": True})
+import os
+from datetime import datetime
+
+from fastapi import APIRouter
+from fastapi.responses import JSONResponse
+from motor.motor_asyncio import AsyncIOMotorClient
+from pydantic import BaseModel
+
+router = APIRouter(prefix="/api/catalog")
+
+MONGODB_URI = os.getenv("MONGODB_URI", "")
+_client: AsyncIOMotorClient | None = None
+_db = None
+_col = None
+
+
+def _get_col():
+    global _client, _db, _col
+    if _col is None:
+        if not MONGODB_URI:
+            raise RuntimeError("MONGODB_URI no configurado")
+        _client = AsyncIOMotorClient(MONGODB_URI)
+        _db = _client["hyper_reality"]
+        _col = _db["catalog"]
+    return _col
+
+
+# ── Datos iniciales (se insertan solo si la colección está vacía) ─────────────
+_SEED = [
+    {
+        "_id": "acm",
+        "nombre": "ACM (Aluminio Compuesto)",
+        "tipo": "paredes",
+        "descripcion": "Paneles de aluminio compuesto para fachadas y exteriores",
+        "especificaciones": [
+            "Espesor de ACM 4mm.",
+            "Medida 1.22m x 2.44m",
+            "Facil Mantenimiento.",
+            "Espesor de Aluminio 0.40mm.",
+            "Se puede doblar o biselar",
+        ],
+        "url_detalle": "https://heyzine.com/flip-book/447fe3eb8e.html#page/16",
+        "productos": [
+            {"id": "acm_white",       "nombre": "Glossy White",     "textura": "Texture_ACM/ACM_White.png",          "url_preview": "/seg/texture-preview/Texture_ACM/ACM_White.png",          "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_amarillo",    "nombre": "Amarillo",          "textura": "Texture_ACM/ACM_Amarillo.png",       "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Amarillo.png",       "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_orange",      "nombre": "Glossy Orange",     "textura": "Texture_ACM/ACM_Orange.png",         "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Orange.png",         "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_red",         "nombre": "Glossy Red",        "textura": "Texture_ACM/ACM_Glossy_Red.png",    "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Glossy_Red.png",    "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_light_blue",  "nombre": "Light Blue",        "textura": "Texture_ACM/ACM_Light_Blue.png",     "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Light_Blue.png",     "dimensiones": ["1.22x2.44"]},
+            {"id": "acm_azul",        "nombre": "Azul",              "textura": "Texture_ACM/ACM_Azul.png",           "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Azul.png",           "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_verde_hn",    "nombre": "Verde HN",          "textura": "Texture_ACM/ACM_Verde_HN.png",       "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Verde_HN.png",       "dimensiones": ["1.22x2.44"]},
+            {"id": "acm_verde_lima",  "nombre": "Verde Lima",        "textura": "Texture_ACM/ACM_Verde_Lima.png",     "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Verde_Lima.png",     "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_verde",       "nombre": "Verde",             "textura": "Texture_ACM/ACM_Verde.png",          "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Verde.png",          "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_madera_clara","nombre": "Madera Clara",      "textura": "Texture_ACM/ACM_Madera_Clara.png",   "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Madera_Clara.png",   "dimensiones": ["1.22x2.44"]},
+            {"id": "acm_roble",       "nombre": "Roble (Oak)",       "textura": "Texture_ACM/ACM_ROBLE(OAK).png",    "url_preview": "/seg/texture-preview/Texture_ACM/ACM_ROBLE(OAK).png",    "dimensiones": ["1.22x2.44"]},
+            {"id": "acm_grafito",     "nombre": "Grafito",           "textura": "Texture_ACM/ACM_Grafito.png",        "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Grafito.png",        "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_metalic",     "nombre": "Silver Metallic",   "textura": "Texture_ACM/ACM_Metalic.png",        "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Metalic.png",        "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_mouse_grey",  "nombre": "Mouse Grey",        "textura": "Texture_ACM/ACM_MouseGrey.png",      "url_preview": "/seg/texture-preview/Texture_ACM/ACM_MouseGrey.png",      "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_matte_black", "nombre": "Matte Black",       "textura": "Texture_ACM/ACM_Matteblack.png",    "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Matteblack.png",    "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+            {"id": "acm_glossy_black","nombre": "Glossy Black",      "textura": "Texture_ACM/ACM_Glossy_Black.png",  "url_preview": "/seg/texture-preview/Texture_ACM/ACM_Glossy_Black.png",  "dimensiones": ["1.22x2.44", "1.50x4.98"]},
+        ],
+        "created_at": "2026-04-20T00:00:00Z",
+    },
+    {
+        "_id": "wpc",
+        "nombre": "WPC (Exterior e Interior)",
+        "tipo": "paredes",
+        "descripcion": "Los paneles de WPC se utilizan como revestimiento decorativo para paredes. No se deforma, no requiere mantenimiento constante y tiene mayor durabilidad. Crea mayor estetica e instalacion rapida.",
+        "especificaciones": [
+            "Revestimiento decorativo para paredes.",
+            "No se deforma ni requiere mantenimiento constante.",
+            "Mayor durabilidad y estetica.",
+            "Instalacion rapida.",
+            "Ideal para: sala principal (pared protagonista), comedor, interior de oficina, pasillo o entradas.",
+        ],
+        "url_detalle": "https://heyzine.com/flip-book/447fe3eb8e.html#page/39",
+        "productos": [
+            {"id": "WPC_madera_oscuro", "nombre": "WPC Madera Oscuro", "textura": "Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_oscuro.png", "url_preview": "/seg/texture-preview/Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_oscuro.png", "dimensiones": ["2.90x0.25"]},
+            {"id": "WPC_madera_claro",  "nombre": "WPC Madera Claro",  "textura": "Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_claro.png",  "url_preview": "/seg/texture-preview/Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_claro.png",  "dimensiones": ["2.90x0.25"]},
+            {"id": "WPC_madera_gris",   "nombre": "WPC Madera Gris",   "textura": "Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_gris.png",   "url_preview": "/seg/texture-preview/Texture_WPC_EXTERIOR_INTERIOR/WPC_madera_gris.png",   "dimensiones": ["2.90x0.25"]},
+            {"id": "WPC_negro",         "nombre": "WPC Negro",          "textura": "Texture_WPC_EXTERIOR_INTERIOR/WPC_negro.png",          "url_preview": "/seg/texture-preview/Texture_WPC_EXTERIOR_INTERIOR/WPC_negro.png",          "dimensiones": ["2.90x0.25"]},
+        ],
+        "created_at": "2026-05-07T00:00:00Z",
+    },
+    {
+        "_id": "wpc_deck",
+        "nombre": "WPC Deck",
+        "tipo": "suelos",
+        "descripcion": "Deck de WPC para exteriores e interiores. Ideal para terrazas, jardines, bordes de piscina y espacios al aire libre.",
+        "especificaciones": [
+            "Resistencia a la intemperie.",
+            "Bajo mantenimiento.",
+            "Respetuosa con el medio ambiente.",
+            "Esteticamente agradable.",
+        ],
+        "url_detalle": "https://heyzine.com/flip-book/447fe3eb8e.html#page/38",
+        "productos": [
+            {"id": "DECK_madera",        "nombre": "Deck Madera",        "textura": "Texture_wpc_deck/DECK_madera.png",        "url_preview": "/seg/texture-preview/Texture_wpc_deck/DECK_madera.png",        "dimensiones": ["2.90x0.14"]},
+            {"id": "DECK_madera_oscuro", "nombre": "Deck Madera Oscuro", "textura": "Texture_wpc_deck/DECK_madera_oscuro.png", "url_preview": "/seg/texture-preview/Texture_wpc_deck/DECK_madera_oscuro.png", "dimensiones": ["2.90x0.14"]},
+            {"id": "DECK_gris",          "nombre": "Deck Gris",           "textura": "Texture_wpc_deck/DECK_gris.png",          "url_preview": "/seg/texture-preview/Texture_wpc_deck/DECK_gris.png",          "dimensiones": ["2.90x0.14"]},
+        ],
+        "created_at": "2026-05-08T00:00:00Z",
+    },
+]
+
+
+async def seed_catalog() -> None:
+    col = _get_col()
+    count = await col.count_documents({})
+    if count == 0:
+        await col.insert_many(_SEED)
+        return
+
+    # Migrar documentos existentes: añadir campos que falten según _SEED
+    for seed_item in _SEED:
+        doc = await col.find_one({"_id": seed_item["_id"]})
+        if not doc:
+            continue
+        patch = {k: v for k, v in seed_item.items() if k not in doc and k != "_id"}
+        if patch:
+            await col.update_one({"_id": seed_item["_id"]}, {"$set": patch})
+
+
+def _serialize(doc: dict) -> dict:
+    out = dict(doc)
+    out["id"] = str(out.pop("_id"))
+    return out
+
+
+def _seed_as_response() -> list[dict]:
+    return [{**{k: v for k, v in item.items() if k != "_id"}, "id": item["_id"]} for item in _SEED]
+
+
+# ── Endpoints de lectura ──────────────────────────────────────────────────────
+
+@router.get("/textures")
+async def get_texture_catalog() -> JSONResponse:
+    try:
+        col = _get_col()
+        docs = await col.find({}).to_list(length=200)
+        if docs:
+            return JSONResponse(content={"categories": [_serialize(d) for d in docs]})
+    except Exception:
+        pass
+    # Fallback a datos estáticos si MongoDB no está disponible o la colección está vacía
+    return JSONResponse(content={"categories": _seed_as_response()})
+
+
+@router.get("/textures/{category_id}")
+async def get_texture_category(category_id: str) -> JSONResponse:
+    try:
+        col = _get_col()
+        doc = await col.find_one({"_id": category_id})
+        if doc:
+            return JSONResponse(content=_serialize(doc))
+    except Exception:
+        pass
+    fallback = next((item for item in _SEED if item["_id"] == category_id), None)
+    if fallback:
+        return JSONResponse(content=_seed_as_response()[_SEED.index(fallback)])
+    return JSONResponse(content={"detail": f"Categoria '{category_id}' no encontrada"}, status_code=404)
+
+
+# ── Modelos ───────────────────────────────────────────────────────────────────
+
+class ProductoItem(BaseModel):
+    id: str
+    nombre: str
+    textura: str
+    url_preview: str
+    dimensiones: list[str] = []
+
+
+class CategoriaBody(BaseModel):
+    id: str
+    nombre: str
+    tipo: str = "paredes"
+    descripcion: str = ""
+    especificaciones: list[str] = []
+    url_detalle: str = ""
+    productos: list[ProductoItem] = []
+
+
+# ── Endpoints de escritura ────────────────────────────────────────────────────
+
+@router.post("/category")
+async def add_category(body: CategoriaBody) -> JSONResponse:
+    col = _get_col()
+    existing = await col.find_one({"_id": body.id})
+    if existing:
+        return JSONResponse(content={"error": f"Categoria '{body.id}' ya existe"}, status_code=409)
+    doc = body.model_dump()
+    doc["_id"] = doc.pop("id")
+    doc["created_at"] = datetime.utcnow().isoformat() + "Z"
+    await col.insert_one(doc)
+    return JSONResponse(content={"ok": True, "id": body.id}, status_code=201)
+
+
+@router.put("/category/{category_id}")
+async def update_category(category_id: str, body: CategoriaBody) -> JSONResponse:
+    col = _get_col()
+    doc = body.model_dump()
+    doc.pop("id", None)
+    doc["updated_at"] = datetime.utcnow().isoformat() + "Z"
+    result = await col.update_one({"_id": category_id}, {"$set": doc})
+    if result.matched_count == 0:
+        return JSONResponse(content={"error": "Categoria no encontrada"}, status_code=404)
+    return JSONResponse(content={"ok": True})
+
+
+@router.delete("/category/{category_id}")
+async def delete_category(category_id: str) -> JSONResponse:
+    col = _get_col()
+    result = await col.delete_one({"_id": category_id})
+    if result.deleted_count == 0:
+        return JSONResponse(content={"error": "Categoria no encontrada"}, status_code=404)
+    return JSONResponse(content={"ok": True, "deleted": category_id})
+
+
+@router.post("/category/{category_id}/product")
+async def add_product(category_id: str, product: ProductoItem) -> JSONResponse:
+    col = _get_col()
+    result = await col.update_one(
+        {"_id": category_id, "productos.id": {"$ne": product.id}},
+        {"$push": {"productos": product.model_dump()}, "$set": {"updated_at": datetime.utcnow().isoformat() + "Z"}},
+    )
+    if result.matched_count == 0:
+        return JSONResponse(content={"error": "Categoria no encontrada o producto duplicado"}, status_code=409)
+    return JSONResponse(content={"ok": True}, status_code=201)
+
+
+@router.delete("/category/{category_id}/product/{product_id}")
+async def delete_product(category_id: str, product_id: str) -> JSONResponse:
+    col = _get_col()
+    result = await col.update_one(
+        {"_id": category_id},
+        {"$pull": {"productos": {"id": product_id}}, "$set": {"updated_at": datetime.utcnow().isoformat() + "Z"}},
+    )
+    if result.matched_count == 0:
+        return JSONResponse(content={"error": "Categoria no encontrada"}, status_code=404)
+    return JSONResponse(content={"ok": True})

backend/routers/segmentation.py

@@ -1,760 +1,723 @@
-"""
-Segmentation router - todos los endpoints del editor de texturas con SAM2.
-Prefijo: /seg
-"""
-import asyncio
-import uuid
-from datetime import datetime, timezone
-from pathlib import Path
-from typing import Any, cast
-
-from fastapi import APIRouter, BackgroundTasks, File, HTTPException, UploadFile
-from fastapi.responses import FileResponse, HTMLResponse, Response
-
-from core.config import (
-    FRONTEND_DEBUG,
-    OUTPUT_DIR,
-    SD_JOB_STALE_SECONDS,
-    SD_QUICK_TIMEOUT_SECONDS,
-    UPLOAD_DIR,
-    UPLOAD_JOB_STALE_SECONDS,
-    VIDEO_OUTPUT_DIR,
-    VIDEO_UPLOAD_DIR,
-    load_classic_dashboard_html,
-    log_timing_end,
-    log_timing_start,
-    logger,
-    utc_now_iso,
-)
-from pydantic import BaseModel
-
-from models.schemas import (
-    ApplyColorRequest,
-    ApplyTextureAIRequest,
-    ApplyTextureRequest,
-    ExteriorBrickRequest,
-    ExteriorDepthRequest,
-    ExteriorGrabCutRequest,
-    ExteriorHybridRequest,
-    ExteriorSuggestRequest,
-    GuidedSegmentRequest,
-    SceneAnalyzeRequest,
-    SegmentAdaptiveRequest,
-    SegmentVideoRequest,
-)
-from services.image_service import (
-    prepare_and_store_upload,
-    run_upload_job,
-    save_label_map_for_owner,
-)
-from services.inpainting_service import run_inpainting_job, run_inpainting_sync
-from services.sam2_service import jobs, jobs_lock, release_resources
-from services.openai_service import generate_image_with_openai
-from PIL import Image
-from services.scene_service import (
-    build_adaptive_plan,
-    generate_label_map,
-    infer_scene_type,
-    normalize_priority,
-    normalize_scene_hint,
-    rank_exterior_candidates,
-    rank_interior_candidates,
-)
-from services.segmentation_service import (
-    generate_guided_label_map,
-    parse_mask_index,
-    parse_rgb_color,
-    segment_exterior_brick_sync,
-    segment_exterior_depth_sync,
-    segment_exterior_grabcut_sync,
-    segment_exterior_hybrid_sync,
-    segment_video_sync,
-)
-from services.texture_service import (
-    apply_local_texture_sync,
-    build_texture_preview_jpeg,
-    generate_texture_variations,
-    list_available_textures,
-    resolve_texture_path,
-)
-
-import cv2
-
-router = APIRouter(prefix="/seg")
-
-
-@router.get("/", response_class=HTMLResponse)
-async def home() -> HTMLResponse:
-    dashboard_html = load_classic_dashboard_html().replace(
-        "__FRONTEND_DEBUG_ENABLED__",
-        "true" if FRONTEND_DEBUG else "false",
-    )
-    return HTMLResponse(content=dashboard_html)
-
-
-@router.post("/upload_video")
-async def upload_video(file: UploadFile = File(...)) -> dict[str, Any]:
-    if not file.content_type or not file.content_type.startswith("video/"):
-        raise HTTPException(status_code=400, detail="Only video files are allowed")
-
-    safe_name = Path(file.filename or "uploaded_video").name
-    if not safe_name:
-        raise HTTPException(status_code=400, detail="Invalid filename")
-
-    destination = VIDEO_UPLOAD_DIR / safe_name
-    content = await file.read()
-    if not content:
-        raise HTTPException(status_code=400, detail="Uploaded video is empty")
-
-    destination.write_bytes(content)
-    return {
-        "message": "Video uploaded successfully",
-        "filename": safe_name,
-        "url": f"/seg/video/{safe_name}",
-    }
-
-
-@router.post("/upload_async")
-async def upload_image_async(
-    background_tasks: BackgroundTasks,
-    file: UploadFile = File(...),
-) -> dict[str, Any]:
-    if not file.content_type or not file.content_type.startswith("image/"):
-        raise HTTPException(status_code=400, detail="Only image files are allowed")
-
-    content = await file.read()
-    job_id = uuid.uuid4().hex
-    with jobs_lock:
-        jobs[job_id] = {
-            "kind": "upload",
-            "status": "processing",
-            "stage": "queued",
-            "progress": 2,
-            "message": "Queued for segmentation",
-            "created_at": utc_now_iso(),
-            "updated_at": utc_now_iso(),
-        }
-
-    background_tasks.add_task(run_upload_job, job_id, content, file.filename or "uploaded_image")
-    return {
-        "processing": True,
-        "job_id": job_id,
-        "status": "processing",
-        "stage": "queued",
-        "progress": 2,
-        "message": "Upload accepted. Segmentation started in background.",
-        "status_url": f"/seg/jobs/{job_id}",
-    }
-
-
-@router.post("/segment_guided")
-async def segment_guided(payload: GuidedSegmentRequest) -> dict[str, Any]:
-    started = log_timing_start("SEGMENT_GUIDED")
-    try:
-        from services.image_service import load_image_rgb_for_edit
-        safe_name, image_rgb = await asyncio.to_thread(load_image_rgb_for_edit, payload.filename)
-        label_map, ranked_scores = await asyncio.to_thread(
-            generate_guided_label_map,
-            image_rgb,
-            [list(point) for point in payload.point_coords],
-            list(payload.point_labels),
-            list(payload.box_xyxy) if payload.box_xyxy is not None else [],
-            payload.multimask_output,
-        )
-
-        guided_owner = f"{Path(safe_name).stem}_guided.jpg"
-        label_owner = await asyncio.to_thread(save_label_map_for_owner, guided_owner, label_map)
-        available_indices = list(range(1, len(ranked_scores) + 1))
-
-        return {
-            "message": "Guided segmentation completed",
-            "filename": safe_name,
-            "original_filename_for_apply": label_owner,
-            "mask_count": len(ranked_scores),
-            "available_mask_indices": available_indices,
-            "recommended_mask_index": 1,
-            "scores": [round(score, 6) for score in ranked_scores],
-        }
-    finally:
-        log_timing_end("SEGMENT_GUIDED", started)
-        try:
-            release_resources()
-        except Exception:
-            logger.exception("Error releasing resources after SEGMENT_GUIDED")
-
-
-@router.post("/suggest_exterior_masks")
-async def suggest_exterior_masks(payload: ExteriorSuggestRequest) -> dict[str, Any]:
-    started = log_timing_start("EXTERIOR_SUGGEST")
-    try:
-        from services.image_service import load_image_rgb_for_edit
-        safe_name, image_rgb = await asyncio.to_thread(load_image_rgb_for_edit, payload.filename)
-
-        label_owner_name = Path(payload.original_filename).name if payload.original_filename else safe_name
-
-        masks_dir = UPLOAD_DIR / "masks"
-        label_path = masks_dir / f"{label_owner_name}_labels.png"
-        if not label_path.exists():
-            label_map, _ = await asyncio.to_thread(generate_label_map, image_rgb)
-            label_owner_name = await asyncio.to_thread(save_label_map_for_owner, label_owner_name, label_map)
-            label_path = masks_dir / f"{label_owner_name}_labels.png"
-
-        label_map_arr = cv2.imread(str(label_path), cv2.IMREAD_GRAYSCALE)
-        if label_map_arr is None:
-            raise HTTPException(status_code=404, detail="Label map not found")
-
-        candidates = rank_exterior_candidates(
-            label_map_arr,
-            payload.top_k,
-            target=payload.target,
-            min_area_ratio=payload.min_area_ratio,
-            max_area_ratio=payload.max_area_ratio,
-        )
-
-        return {
-            "message": "Exterior mask suggestions generated",
-            "filename": safe_name,
-            "original_filename_for_apply": label_owner_name,
-            "suggestions": candidates,
-            "target": payload.target,
-        }
-    finally:
-        log_timing_end("EXTERIOR_SUGGEST", started)
-        try:
-            release_resources()
-        except Exception:
-            logger.exception("Error releasing resources after EXTERIOR_SUGGEST")
-
-
-@router.post("/analyze_scene")
-async def analyze_scene(payload: SceneAnalyzeRequest) -> dict[str, Any]:
-    started = log_timing_start("ANALYZE_SCENE")
-    try:
-        from services.image_service import load_image_rgb_for_edit
-        safe_name, image_rgb = await asyncio.to_thread(load_image_rgb_for_edit, payload.filename)
-
-        label_owner_name = Path(payload.original_filename).name if payload.original_filename else safe_name
-        masks_dir = UPLOAD_DIR / "masks"
-        label_path = masks_dir / f"{label_owner_name}_labels.png"
-
-        if not label_path.exists():
-            label_map, _ = await asyncio.to_thread(generate_label_map, image_rgb)
-            label_owner_name = await asyncio.to_thread(save_label_map_for_owner, label_owner_name, label_map)
-
-        scene_info = await asyncio.to_thread(
-            infer_scene_type,
-            image_rgb,
-            payload.semantic_keywords,
-            payload.exterior_target,
-            payload.min_area_ratio,
-            payload.max_area_ratio,
-        )
-        scene_type = scene_info["scene_type"]
-        scene_hint = normalize_scene_hint(payload.scene_hint)
-        effective_scene = scene_hint if scene_hint != "auto" else scene_type
-
-        adaptive_plan = build_adaptive_plan(effective_scene, payload.priority, payload.exterior_target)
-
-        label_map_arr = cv2.imread(str(masks_dir / f"{label_owner_name}_labels.png"), cv2.IMREAD_GRAYSCALE)
-        suggestions: list[dict[str, Any]] = []
-        if label_map_arr is not None:
-            if effective_scene == "exterior":
-                suggestions = rank_exterior_candidates(
-                    label_map_arr, payload.top_k,
-                    target=payload.exterior_target,
-                    min_area_ratio=payload.min_area_ratio,
-                    max_area_ratio=payload.max_area_ratio,
-                )
-            else:
-                suggestions = rank_interior_candidates(label_map_arr, payload.top_k)
-
-        return {
-            "message": "Scene analysis completed",
-            "filename": safe_name,
-            "original_filename_for_apply": label_owner_name,
-            "scene_type": scene_type,
-            "effective_scene": effective_scene,
-            "confidence": scene_info["confidence"],
-            "signals": scene_info["signals"],
-            "adaptive_plan": adaptive_plan,
-            "suggestions": suggestions,
-            "priority": normalize_priority(payload.priority),
-        }
-    finally:
-        log_timing_end("ANALYZE_SCENE", started)
-        try:
-            release_resources()
-        except Exception:
-            logger.exception("Error releasing resources after ANALYZE_SCENE")
-
-
-@router.post("/segment_adaptive")
-async def segment_adaptive(payload: SegmentAdaptiveRequest) -> dict[str, Any]:
-    started = log_timing_start("SEGMENT_ADAPTIVE")
-    try:
-        from services.image_service import load_image_rgb_for_edit
-        safe_name, image_rgb = await asyncio.to_thread(load_image_rgb_for_edit, payload.filename)
-
-        scene_info = await asyncio.to_thread(
-            infer_scene_type,
-            image_rgb,
-            payload.semantic_keywords,
-            payload.exterior_target,
-        )
-        scene_hint = normalize_scene_hint(payload.scene_hint)
-        effective_scene = scene_hint if scene_hint != "auto" else scene_info["scene_type"]
-        priority = normalize_priority(payload.priority)
-        adaptive_plan = build_adaptive_plan(effective_scene, priority, payload.exterior_target)
-
-        label_owner_name = Path(payload.original_filename).name if payload.original_filename else safe_name
-
-        if effective_scene == "exterior":
-            from services.segmentation_service import segment_exterior_depth_sync as seg_depth
-            from models.schemas import ExteriorDepthRequest as DepthReq
-
-            depth_payload = DepthReq(
-                filename=payload.filename,
-                exterior_target=payload.exterior_target,
-                rect_xywh=payload.rect_xywh,
-                smooth_strength=1,
-                sam2_merge_top_k=12,
-                iterations=6,
-                use_semantic_hint=True,
-                use_depth_hint=True,
-                semantic_keywords=payload.semantic_keywords,
-            )
-            result = await asyncio.to_thread(seg_depth, depth_payload)
-        else:
-            label_map, _ = await asyncio.to_thread(generate_label_map, image_rgb)
-            label_owner_name = await asyncio.to_thread(save_label_map_for_owner, label_owner_name, label_map)
-            top_k = 4 if priority == "speed" else (10 if priority == "quality" else 6)
-            candidates = rank_interior_candidates(label_map, top_k)
-            result = {
-                "message": "Interior adaptive segmentation completed",
-                "filename": safe_name,
-                "original_filename_for_apply": label_owner_name,
-                "scene_type": effective_scene,
-                "suggestions": candidates,
-            }
-
-        result["adaptive_plan"] = adaptive_plan
-        result["detected_scene_type"] = scene_info["scene_type"]
-        result["effective_scene"] = effective_scene
-        result["scene_confidence"] = scene_info["confidence"]
-        return result
-    finally:
-        log_timing_end("SEGMENT_ADAPTIVE", started)
-        try:
-            release_resources()
-        except Exception:
-            logger.exception("Error releasing resources after SEGMENT_ADAPTIVE")
-
-
-@router.post("/segment_video")
-async def segment_video(payload: SegmentVideoRequest) -> dict[str, Any]:
-    try:
-        return await asyncio.to_thread(segment_video_sync, payload)
-    except HTTPException:
-        raise
-    except Exception as exc:
-        raise HTTPException(status_code=500, detail=f"Video segmentation failed: {exc}") from exc
-
-
-@router.post("/segment_exterior_grabcut")
-async def segment_exterior_grabcut(payload: ExteriorGrabCutRequest) -> dict[str, Any]:
-    try:
-        return await asyncio.to_thread(segment_exterior_grabcut_sync, payload)
-    except HTTPException:
-        raise
-    except Exception as exc:
-        raise HTTPException(status_code=500, detail=f"GrabCut segmentation failed: {exc}") from exc
-
-
-@router.post("/segment_exterior_hybrid")
-async def segment_exterior_hybrid(payload: ExteriorHybridRequest) -> dict[str, Any]:
-    try:
-        return await asyncio.to_thread(segment_exterior_hybrid_sync, payload)
-    except HTTPException:
-        raise
-    except Exception as exc:
-        raise HTTPException(status_code=500, detail=f"Hybrid exterior segmentation failed: {exc}") from exc
-
-
-@router.post("/segment_exterior_brick")
-async def segment_exterior_brick(payload: ExteriorBrickRequest) -> dict[str, Any]:
-    try:
-        return await asyncio.to_thread(segment_exterior_brick_sync, payload)
-    except HTTPException:
-        raise
-    except Exception as exc:
-        raise HTTPException(status_code=500, detail=f"Brick segmentation failed: {exc}") from exc
-
-
-@router.post("/segment_exterior_depth")
-async def segment_exterior_depth(payload: ExteriorDepthRequest) -> dict[str, Any]:
-    try:
-        return await asyncio.to_thread(segment_exterior_depth_sync, payload)
-    except HTTPException:
-        raise
-    except Exception as exc:
-        raise HTTPException(status_code=500, detail=f"Depth exterior segmentation failed: {exc}") from exc
-
-
-@router.post("/apply_texture_ai")
-async def apply_texture_ai(
-    payload: ApplyTextureAIRequest,
-    background_tasks: BackgroundTasks,
-) -> dict[str, Any]:
-    started = log_timing_start("APPLY_TEXTURE_AI")
-    try:
-        # Try to run OpenAI generation synchronously within the quick timeout
-        def _run_openai():
-            safe_name = Path(payload.filename).name
-            image_path = UPLOAD_DIR / safe_name
-            if not image_path.exists():
-                image_path = OUTPUT_DIR / safe_name
-
-            if not image_path.exists():
-                return {"error": f"Image not found: {payload.filename}"}
-
-            try:
-                pil = Image.open(str(image_path)).convert("RGBA")
-            except Exception as e:
-                return {"error": f"Cannot open image: {e}"}
-
-            texture = payload.texture_name or payload.prompt or ""
-            png_bytes, msg = generate_image_with_openai(None, pil, texture)
-            if png_bytes is None:
-                return {"error": msg}
-
-            out_name = f"{Path(safe_name).stem}_ai_{uuid.uuid4().hex}.png"
-            out_path = OUTPUT_DIR / out_name
-            out_path.write_bytes(png_bytes)
-            return {"message": msg, "filename": out_name, "url": f"/seg/ai/{out_name}", "processing": False}
-
-        result = await asyncio.wait_for(asyncio.to_thread(_run_openai), timeout=SD_QUICK_TIMEOUT_SECONDS)
-        log_timing_end("APPLY_TEXTURE_AI", started)
-        try:
-            release_resources()
-        except Exception:
-            logger.exception("Error releasing resources after APPLY_TEXTURE_AI")
-        result["processing"] = False
-        return result
-    except asyncio.TimeoutError:
-        job_id = uuid.uuid4().hex
-        with jobs_lock:
-            jobs[job_id] = {"status": "processing", "created_at": utc_now_iso(), "updated_at": utc_now_iso()}
-        # enqueue background job that runs the OpenAI generation
-        def _run_openai_job(job_id_inner: str, payload_inner: ApplyTextureAIRequest) -> None:
-            try:
-                res = _run_openai()
-                with jobs_lock:
-                    if "error" in res:
-                        jobs[job_id_inner] = {"status": "failed", "error": res.get("error"), "updated_at": utc_now_iso()}
-                    else:
-                        jobs[job_id_inner] = {"status": "done", "result": res, "updated_at": utc_now_iso()}
-            except Exception as exc:
-                with jobs_lock:
-                    jobs[job_id_inner] = {"status": "failed", "error": str(exc), "updated_at": utc_now_iso()}
-
-        background_tasks.add_task(_run_openai_job, job_id, payload)
-        log_timing_end("APPLY_TEXTURE_AI", started)
-        try:
-            release_resources()
-        except Exception:
-            pass
-        return {
-            "processing": True,
-            "job_id": job_id,
-            "message": "Inpainting is taking longer than expected and continues in background.",
-            "status_url": f"/seg/jobs/{job_id}",
-        }
-    except HTTPException:
-        log_timing_end("APPLY_TEXTURE_AI", started)
-        try:
-            release_resources()
-        except Exception:
-            pass
-        raise
-    except Exception as exc:
-        log_timing_end("APPLY_TEXTURE_AI", started)
-        try:
-            release_resources()
-        except Exception:
-            pass
-        raise HTTPException(status_code=500, detail=f"Inpainting failed: {exc}") from exc
-
-
-@router.get("/jobs/{job_id}")
-async def get_job_status(job_id: str) -> dict[str, Any]:
-    with jobs_lock:
-        job = jobs.get(job_id)
-
-    if job is None:
-        raise HTTPException(status_code=404, detail="Job not found")
-
-    if job.get("status") == "processing":
-        kind = str(job.get("kind", "generic"))
-        stage = str(job.get("stage", "processing"))
-        progress = int(job.get("progress", 0) or 0)
-        eta_seconds: int | None = None
-
-        if kind == "upload" and stage == "segmenting_with_sam2":
-            stage_started_at_text = job.get("stage_started_at")
-            estimated_seconds = float(job.get("estimated_seconds", 0.0) or 0.0)
-            if stage_started_at_text and estimated_seconds > 0:
-                try:
-                    stage_started_at = datetime.fromisoformat(str(stage_started_at_text))
-                    elapsed = (datetime.now(timezone.utc) - stage_started_at).total_seconds()
-                    eta_seconds = max(0, int(estimated_seconds - elapsed))
-                    estimated_progress = int(min(95, 30 + (max(0.0, elapsed) / estimated_seconds) * 60))
-                    progress = max(progress, estimated_progress)
-                except ValueError:
-                    pass
-
-        stale_limit_seconds = UPLOAD_JOB_STALE_SECONDS if kind == "upload" else SD_JOB_STALE_SECONDS
-        created_at_text = job.get("created_at")
-        if created_at_text:
-            try:
-                created_at = datetime.fromisoformat(str(created_at_text))
-                age_seconds = (datetime.now(timezone.utc) - created_at).total_seconds()
-                if age_seconds > stale_limit_seconds:
-                    return {
-                        "processing": False,
-                        "status": "timeout",
-                        "message": "The process is taking too long. Please retry.",
-                        "job_id": job_id,
-                    }
-            except ValueError:
-                pass
-
-        response: dict[str, Any] = {
-            "processing": True,
-            "status": "processing",
-            "job_id": job_id,
-            "kind": kind,
-            "stage": stage,
-            "progress": progress,
-            "message": str(job.get("message", "Still processing.")),
-        }
-        if eta_seconds is not None:
-            response["eta_seconds"] = eta_seconds
-        return response
-
-    if job.get("status") == "done":
-        result = cast(dict[str, Any], job.get("result", {}))
-        result["processing"] = False
-        result["job_id"] = job_id
-        result["status"] = "done"
-        return result
-
-    if job.get("status") == "failed":
-        return {
-            "processing": False,
-            "status": "failed",
-            "job_id": job_id,
-            "message": job.get("error", "Background task failed"),
-        }
-
-    return {"processing": True, "status": "processing", "job_id": job_id, "message": "Still processing."}
-
-
-@router.post("/apply_color")
-async def apply_color(payload: ApplyColorRequest) -> dict[str, Any]:
-    started = log_timing_start("APPLY_COLOR")
-    try:
-        safe_name = Path(payload.filename).name
-        if not safe_name:
-            raise HTTPException(status_code=400, detail="Invalid filename")
-
-        label_safe_name = Path(payload.original_filename).name if payload.original_filename else safe_name
-
-        image_path = UPLOAD_DIR / safe_name
-        if not image_path.exists():
-            image_path = OUTPUT_DIR / safe_name
-        if not image_path.exists() or not image_path.is_file():
-            raise HTTPException(status_code=404, detail=f"Image not found: {safe_name}")
-
-        image_bgr = cv2.imread(str(image_path))
-        if image_bgr is None:
-            raise HTTPException(status_code=400, detail="Image could not be read")
-
-        mask_index = parse_mask_index(payload.mask_filename)
-        red, green, blue = parse_rgb_color(payload.color)
-
-        label_path = UPLOAD_DIR / "masks" / f"{label_safe_name}_labels.png"
-        label_map = cv2.imread(str(label_path), cv2.IMREAD_GRAYSCALE)
-        if label_map is None:
-            raise HTTPException(
-                status_code=404,
-                detail="Label map not found. Upload the image first to generate segments.",
-            )
-
-        segmentation = label_map == mask_index
-        if not segmentation.any():
-            raise HTTPException(status_code=400, detail=f"Segment index {mask_index} not found in label map.")
-
-        edited_image = image_bgr.copy()
-        edited_image[segmentation] = (blue, green, red)
-
-        original_stem = Path(label_safe_name).stem
-        out_filename = f"{original_stem}_edit.jpg"
-        out_path = UPLOAD_DIR / out_filename
-        if not cv2.imwrite(str(out_path), edited_image):
-            raise HTTPException(status_code=500, detail="Failed to save edited image")
-
-        return {
-            "message": "Color applied successfully",
-            "output_filename": out_filename,
-            "output_url": f"/seg/image/{out_filename}",
-        }
-    finally:
-        log_timing_end("APPLY_COLOR", started)
-        try:
-            release_resources()
-        except Exception:
-            logger.exception("Error releasing resources after APPLY_COLOR")
-
-
-@router.post("/apply_texture")
-async def apply_texture(payload: ApplyTextureRequest) -> dict[str, Any]:
-    try:
-        result = await asyncio.to_thread(apply_local_texture_sync, payload)
-        result["processing"] = False
-        return result
-    except HTTPException:
-        raise
-    except Exception as exc:
-        raise HTTPException(status_code=500, detail=f"Texture apply failed: {exc}") from exc
-
-
-@router.get("/textures")
-async def get_textures() -> dict[str, Any]:
-    return {"textures": list_available_textures()}
-
-
-class _GenerateVariationsRequest(BaseModel):
-    texture_name: str
-
-    class Config:
-        extra = "ignore"
-
-
-@router.post("/textures/generate")
-async def generate_variations(payload: _GenerateVariationsRequest) -> dict[str, Any]:
-    if not payload.texture_name:
-        raise HTTPException(status_code=400, detail="texture_name is required")
-    try:
-        variations = await asyncio.to_thread(generate_texture_variations, payload.texture_name)
-        return {"variations": variations}
-    except HTTPException:
-        raise
-    except Exception as exc:
-        raise HTTPException(status_code=500, detail=f"Variation generation failed: {exc}") from exc
-
-
-@router.get("/texture-preview/{filename:path}")
-async def get_texture_preview(filename: str) -> Response:
-    texture_path = resolve_texture_path(filename)
-    jpeg = await asyncio.to_thread(build_texture_preview_jpeg, texture_path)
-    return Response(content=jpeg, media_type="image/jpeg", headers={"Cache-Control": "public, max-age=3600"})
-
-
-@router.get("/video/{filename}")
-async def get_video(filename: str) -> FileResponse:
-    if Path(filename).name != filename:
-        raise HTTPException(status_code=400, detail="Invalid file name")
-    video_path = VIDEO_UPLOAD_DIR / filename
-    if not video_path.exists() or not video_path.is_file():
-        raise HTTPException(status_code=404, detail="Video not found")
-    return FileResponse(video_path)
-
-
-@router.get("/output-video/{filename}")
-async def get_output_video(filename: str) -> FileResponse:
-    if Path(filename).name != filename:
-        raise HTTPException(status_code=400, detail="Invalid file name")
-    video_path = VIDEO_OUTPUT_DIR / filename
-    if not video_path.exists() or not video_path.is_file():
-        raise HTTPException(status_code=404, detail="Output video not found")
-    return FileResponse(video_path)
-
-
-@router.get("/image/{filename}")
-async def get_image(filename: str) -> FileResponse:
-    if Path(filename).name != filename:
-        raise HTTPException(status_code=400, detail="Invalid file name")
-    image_path = UPLOAD_DIR / filename
-    if not image_path.exists() or not image_path.is_file():
-        raise HTTPException(status_code=404, detail="Image not found")
-    return FileResponse(image_path)
-
-
-@router.post("/masks/reclassify/{filename}")
-async def reclassify_mask_metadata(filename: str) -> dict[str, Any]:
-    """Re-run semantic classification on an already-segmented image and overwrite its metadata JSON."""
-    import json as _json
-    safe = Path(filename).name
-    if not safe:
-        raise HTTPException(status_code=400, detail="Invalid filename")
-
-    masks_dir = UPLOAD_DIR / "masks"
-    label_path = masks_dir / f"{safe}_labels.png"
-    if not label_path.exists():
-        raise HTTPException(status_code=404, detail="Label map not found — upload the image first")
-
-    label_map = cv2.imread(str(label_path), cv2.IMREAD_GRAYSCALE)
-    if label_map is None:
-        raise HTTPException(status_code=500, detail="Could not read label map")
-
-    image_path = UPLOAD_DIR / safe
-    image_rgb: Any = None
-    if image_path.exists():
-        img_bgr = cv2.imread(str(image_path))
-        if img_bgr is not None:
-            image_rgb = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2RGB)
-
-    from services.scene_service import classify_all_label_map_segments
-    h, w = label_map.shape[:2]
-    segments_meta = await asyncio.to_thread(
-        classify_all_label_map_segments, label_map, w, h, image_rgb
-    )
-    meta_path = masks_dir / f"{safe}_labels_meta.json"
-    meta_path.write_text(_json.dumps({"segments": segments_meta}, ensure_ascii=False), encoding="utf-8")
-
-    return {"segments": segments_meta, "count": len(segments_meta)}
-
-
-@router.get("/masks/meta/{filename}")
-async def get_mask_metadata(filename: str) -> dict:
-    import json as _json
-    safe = Path(filename).name
-    if not safe:
-        raise HTTPException(status_code=400, detail="Invalid filename")
-    meta_path = UPLOAD_DIR / "masks" / f"{safe}_labels_meta.json"
-    if not meta_path.exists() or not meta_path.is_file():
-        raise HTTPException(status_code=404, detail="Segment metadata not found")
-    try:
-        return _json.loads(meta_path.read_text(encoding="utf-8"))
-    except Exception as exc:
-        raise HTTPException(status_code=500, detail=f"Failed to read metadata: {exc}") from exc
-
-
-@router.get("/masks/{filename}")
-async def get_mask_labels(filename: str) -> FileResponse:
-    if Path(filename).name != filename:
-        raise HTTPException(status_code=400, detail="Invalid file name")
-    label_path = UPLOAD_DIR / "masks" / f"{filename}_labels.png"
-    if not label_path.exists() or not label_path.is_file():
-        raise HTTPException(status_code=404, detail="Label map not found")
-    return FileResponse(label_path)
-
-
-@router.get("/ai/{filename}")
-async def get_ai_image(filename: str) -> FileResponse:
-    if Path(filename).name != filename:
-        raise HTTPException(status_code=400, detail="Invalid file name")
-    out_path = OUTPUT_DIR / filename
-    if not out_path.exists() or not out_path.is_file():
-        raise HTTPException(status_code=404, detail="AI output image not found")
-    return FileResponse(out_path)
+"""
+Segmentation router - todos los endpoints del editor de texturas con SAM2.
+Prefijo: /seg
+"""
+import asyncio
+import uuid
+from datetime import datetime, timezone
+from pathlib import Path
+from typing import Any, cast
+
+from fastapi import APIRouter, BackgroundTasks, File, HTTPException, UploadFile
+from fastapi.responses import FileResponse, HTMLResponse, Response
+
+from core.config import (
+    FRONTEND_DEBUG,
+    OUTPUT_DIR,
+    SD_JOB_STALE_SECONDS,
+    SD_QUICK_TIMEOUT_SECONDS,
+    UPLOAD_DIR,
+    UPLOAD_JOB_STALE_SECONDS,
+    VIDEO_OUTPUT_DIR,
+    VIDEO_UPLOAD_DIR,
+    load_classic_dashboard_html,
+    log_timing_end,
+    log_timing_start,
+    logger,
+    utc_now_iso,
+)
+from pydantic import BaseModel
+
+from models.schemas import (
+    ApplyColorRequest,
+    ApplyTextureAIRequest,
+    ApplyTextureRequest,
+    ExteriorBrickRequest,
+    ExteriorDepthRequest,
+    ExteriorGrabCutRequest,
+    ExteriorHybridRequest,
+    ExteriorSuggestRequest,
+    GuidedSegmentRequest,
+    SceneAnalyzeRequest,
+    SegmentAdaptiveRequest,
+    SegmentVideoRequest,
+)
+from services.image_service import (
+    prepare_and_store_upload,
+    run_upload_job,
+    save_label_map_for_owner,
+)
+from services.inpainting_service import run_inpainting_job, run_inpainting_sync
+from services.sam2_service import jobs, jobs_lock, release_resources
+from services.scene_service import (
+    build_adaptive_plan,
+    generate_label_map,
+    infer_scene_type,
+    normalize_priority,
+    normalize_scene_hint,
+    rank_exterior_candidates,
+    rank_interior_candidates,
+)
+from services.segmentation_service import (
+    generate_guided_label_map,
+    parse_mask_index,
+    parse_rgb_color,
+    segment_exterior_brick_sync,
+    segment_exterior_depth_sync,
+    segment_exterior_grabcut_sync,
+    segment_exterior_hybrid_sync,
+    segment_video_sync,
+)
+from services.texture_service import (
+    apply_local_texture_sync,
+    build_texture_preview_jpeg,
+    generate_texture_variations,
+    list_available_textures,
+    resolve_texture_path,
+)
+
+import cv2
+
+router = APIRouter(prefix="/seg")
+
+
+@router.get("/", response_class=HTMLResponse)
+async def home() -> HTMLResponse:
+    dashboard_html = load_classic_dashboard_html().replace(
+        "__FRONTEND_DEBUG_ENABLED__",
+        "true" if FRONTEND_DEBUG else "false",
+    )
+    return HTMLResponse(content=dashboard_html)
+
+
+@router.post("/upload_video")
+async def upload_video(file: UploadFile = File(...)) -> dict[str, Any]:
+    if not file.content_type or not file.content_type.startswith("video/"):
+        raise HTTPException(status_code=400, detail="Only video files are allowed")
+
+    safe_name = Path(file.filename or "uploaded_video").name
+    if not safe_name:
+        raise HTTPException(status_code=400, detail="Invalid filename")
+
+    destination = VIDEO_UPLOAD_DIR / safe_name
+    content = await file.read()
+    if not content:
+        raise HTTPException(status_code=400, detail="Uploaded video is empty")
+
+    destination.write_bytes(content)
+    return {
+        "message": "Video uploaded successfully",
+        "filename": safe_name,
+        "url": f"/seg/video/{safe_name}",
+    }
+
+
+@router.post("/upload_async")
+async def upload_image_async(
+    background_tasks: BackgroundTasks,
+    file: UploadFile = File(...),
+) -> dict[str, Any]:
+    if not file.content_type or not file.content_type.startswith("image/"):
+        raise HTTPException(status_code=400, detail="Only image files are allowed")
+
+    content = await file.read()
+    job_id = uuid.uuid4().hex
+    with jobs_lock:
+        jobs[job_id] = {
+            "kind": "upload",
+            "status": "processing",
+            "stage": "queued",
+            "progress": 2,
+            "message": "Queued for segmentation",
+            "created_at": utc_now_iso(),
+            "updated_at": utc_now_iso(),
+        }
+
+    background_tasks.add_task(run_upload_job, job_id, content, file.filename or "uploaded_image")
+    return {
+        "processing": True,
+        "job_id": job_id,
+        "status": "processing",
+        "stage": "queued",
+        "progress": 2,
+        "message": "Upload accepted. Segmentation started in background.",
+        "status_url": f"/seg/jobs/{job_id}",
+    }
+
+
+@router.post("/segment_guided")
+async def segment_guided(payload: GuidedSegmentRequest) -> dict[str, Any]:
+    started = log_timing_start("SEGMENT_GUIDED")
+    try:
+        from services.image_service import load_image_rgb_for_edit
+        safe_name, image_rgb = await asyncio.to_thread(load_image_rgb_for_edit, payload.filename)
+        label_map, ranked_scores = await asyncio.to_thread(
+            generate_guided_label_map,
+            image_rgb,
+            [list(point) for point in payload.point_coords],
+            list(payload.point_labels),
+            list(payload.box_xyxy) if payload.box_xyxy is not None else [],
+            payload.multimask_output,
+        )
+
+        guided_owner = f"{Path(safe_name).stem}_guided.jpg"
+        label_owner = await asyncio.to_thread(save_label_map_for_owner, guided_owner, label_map)
+        available_indices = list(range(1, len(ranked_scores) + 1))
+
+        return {
+            "message": "Guided segmentation completed",
+            "filename": safe_name,
+            "original_filename_for_apply": label_owner,
+            "mask_count": len(ranked_scores),
+            "available_mask_indices": available_indices,
+            "recommended_mask_index": 1,
+            "scores": [round(score, 6) for score in ranked_scores],
+        }
+    finally:
+        log_timing_end("SEGMENT_GUIDED", started)
+        try:
+            release_resources()
+        except Exception:
+            logger.exception("Error releasing resources after SEGMENT_GUIDED")
+
+
+@router.post("/suggest_exterior_masks")
+async def suggest_exterior_masks(payload: ExteriorSuggestRequest) -> dict[str, Any]:
+    started = log_timing_start("EXTERIOR_SUGGEST")
+    try:
+        from services.image_service import load_image_rgb_for_edit
+        safe_name, image_rgb = await asyncio.to_thread(load_image_rgb_for_edit, payload.filename)
+
+        label_owner_name = Path(payload.original_filename).name if payload.original_filename else safe_name
+
+        masks_dir = UPLOAD_DIR / "masks"
+        label_path = masks_dir / f"{label_owner_name}_labels.png"
+        if not label_path.exists():
+            label_map, _ = await asyncio.to_thread(generate_label_map, image_rgb)
+            label_owner_name = await asyncio.to_thread(save_label_map_for_owner, label_owner_name, label_map)
+            label_path = masks_dir / f"{label_owner_name}_labels.png"
+
+        label_map_arr = cv2.imread(str(label_path), cv2.IMREAD_GRAYSCALE)
+        if label_map_arr is None:
+            raise HTTPException(status_code=404, detail="Label map not found")
+
+        candidates = rank_exterior_candidates(
+            label_map_arr,
+            payload.top_k,
+            target=payload.target,
+            min_area_ratio=payload.min_area_ratio,
+            max_area_ratio=payload.max_area_ratio,
+        )
+
+        return {
+            "message": "Exterior mask suggestions generated",
+            "filename": safe_name,
+            "original_filename_for_apply": label_owner_name,
+            "suggestions": candidates,
+            "target": payload.target,
+        }
+    finally:
+        log_timing_end("EXTERIOR_SUGGEST", started)
+        try:
+            release_resources()
+        except Exception:
+            logger.exception("Error releasing resources after EXTERIOR_SUGGEST")
+
+
+@router.post("/analyze_scene")
+async def analyze_scene(payload: SceneAnalyzeRequest) -> dict[str, Any]:
+    started = log_timing_start("ANALYZE_SCENE")
+    try:
+        from services.image_service import load_image_rgb_for_edit
+        safe_name, image_rgb = await asyncio.to_thread(load_image_rgb_for_edit, payload.filename)
+
+        label_owner_name = Path(payload.original_filename).name if payload.original_filename else safe_name
+        masks_dir = UPLOAD_DIR / "masks"
+        label_path = masks_dir / f"{label_owner_name}_labels.png"
+
+        if not label_path.exists():
+            label_map, _ = await asyncio.to_thread(generate_label_map, image_rgb)
+            label_owner_name = await asyncio.to_thread(save_label_map_for_owner, label_owner_name, label_map)
+
+        scene_info = await asyncio.to_thread(
+            infer_scene_type,
+            image_rgb,
+            payload.semantic_keywords,
+            payload.exterior_target,
+            payload.min_area_ratio,
+            payload.max_area_ratio,
+        )
+        scene_type = scene_info["scene_type"]
+        scene_hint = normalize_scene_hint(payload.scene_hint)
+        effective_scene = scene_hint if scene_hint != "auto" else scene_type
+
+        adaptive_plan = build_adaptive_plan(effective_scene, payload.priority, payload.exterior_target)
+
+        label_map_arr = cv2.imread(str(masks_dir / f"{label_owner_name}_labels.png"), cv2.IMREAD_GRAYSCALE)
+        suggestions: list[dict[str, Any]] = []
+        if label_map_arr is not None:
+            if effective_scene == "exterior":
+                suggestions = rank_exterior_candidates(
+                    label_map_arr, payload.top_k,
+                    target=payload.exterior_target,
+                    min_area_ratio=payload.min_area_ratio,
+                    max_area_ratio=payload.max_area_ratio,
+                )
+            else:
+                suggestions = rank_interior_candidates(label_map_arr, payload.top_k)
+
+        return {
+            "message": "Scene analysis completed",
+            "filename": safe_name,
+            "original_filename_for_apply": label_owner_name,
+            "scene_type": scene_type,
+            "effective_scene": effective_scene,
+            "confidence": scene_info["confidence"],
+            "signals": scene_info["signals"],
+            "adaptive_plan": adaptive_plan,
+            "suggestions": suggestions,
+            "priority": normalize_priority(payload.priority),
+        }
+    finally:
+        log_timing_end("ANALYZE_SCENE", started)
+        try:
+            release_resources()
+        except Exception:
+            logger.exception("Error releasing resources after ANALYZE_SCENE")
+
+
+@router.post("/segment_adaptive")
+async def segment_adaptive(payload: SegmentAdaptiveRequest) -> dict[str, Any]:
+    started = log_timing_start("SEGMENT_ADAPTIVE")
+    try:
+        from services.image_service import load_image_rgb_for_edit
+        safe_name, image_rgb = await asyncio.to_thread(load_image_rgb_for_edit, payload.filename)
+
+        scene_info = await asyncio.to_thread(
+            infer_scene_type,
+            image_rgb,
+            payload.semantic_keywords,
+            payload.exterior_target,
+        )
+        scene_hint = normalize_scene_hint(payload.scene_hint)
+        effective_scene = scene_hint if scene_hint != "auto" else scene_info["scene_type"]
+        priority = normalize_priority(payload.priority)
+        adaptive_plan = build_adaptive_plan(effective_scene, priority, payload.exterior_target)
+
+        label_owner_name = Path(payload.original_filename).name if payload.original_filename else safe_name
+
+        if effective_scene == "exterior":
+            from services.segmentation_service import segment_exterior_depth_sync as seg_depth
+            from models.schemas import ExteriorDepthRequest as DepthReq
+
+            depth_payload = DepthReq(
+                filename=payload.filename,
+                exterior_target=payload.exterior_target,
+                rect_xywh=payload.rect_xywh,
+                smooth_strength=1,
+                sam2_merge_top_k=12,
+                iterations=6,
+                use_semantic_hint=True,
+                use_depth_hint=True,
+                semantic_keywords=payload.semantic_keywords,
+            )
+            result = await asyncio.to_thread(seg_depth, depth_payload)
+        else:
+            label_map, _ = await asyncio.to_thread(generate_label_map, image_rgb)
+            label_owner_name = await asyncio.to_thread(save_label_map_for_owner, label_owner_name, label_map)
+            top_k = 4 if priority == "speed" else (10 if priority == "quality" else 6)
+            candidates = rank_interior_candidates(label_map, top_k)
+            result = {
+                "message": "Interior adaptive segmentation completed",
+                "filename": safe_name,
+                "original_filename_for_apply": label_owner_name,
+                "scene_type": effective_scene,
+                "suggestions": candidates,
+            }
+
+        result["adaptive_plan"] = adaptive_plan
+        result["detected_scene_type"] = scene_info["scene_type"]
+        result["effective_scene"] = effective_scene
+        result["scene_confidence"] = scene_info["confidence"]
+        return result
+    finally:
+        log_timing_end("SEGMENT_ADAPTIVE", started)
+        try:
+            release_resources()
+        except Exception:
+            logger.exception("Error releasing resources after SEGMENT_ADAPTIVE")
+
+
+@router.post("/segment_video")
+async def segment_video(payload: SegmentVideoRequest) -> dict[str, Any]:
+    try:
+        return await asyncio.to_thread(segment_video_sync, payload)
+    except HTTPException:
+        raise
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=f"Video segmentation failed: {exc}") from exc
+
+
+@router.post("/segment_exterior_grabcut")
+async def segment_exterior_grabcut(payload: ExteriorGrabCutRequest) -> dict[str, Any]:
+    try:
+        return await asyncio.to_thread(segment_exterior_grabcut_sync, payload)
+    except HTTPException:
+        raise
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=f"GrabCut segmentation failed: {exc}") from exc
+
+
+@router.post("/segment_exterior_hybrid")
+async def segment_exterior_hybrid(payload: ExteriorHybridRequest) -> dict[str, Any]:
+    try:
+        return await asyncio.to_thread(segment_exterior_hybrid_sync, payload)
+    except HTTPException:
+        raise
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=f"Hybrid exterior segmentation failed: {exc}") from exc
+
+
+@router.post("/segment_exterior_brick")
+async def segment_exterior_brick(payload: ExteriorBrickRequest) -> dict[str, Any]:
+    try:
+        return await asyncio.to_thread(segment_exterior_brick_sync, payload)
+    except HTTPException:
+        raise
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=f"Brick segmentation failed: {exc}") from exc
+
+
+@router.post("/segment_exterior_depth")
+async def segment_exterior_depth(payload: ExteriorDepthRequest) -> dict[str, Any]:
+    try:
+        return await asyncio.to_thread(segment_exterior_depth_sync, payload)
+    except HTTPException:
+        raise
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=f"Depth exterior segmentation failed: {exc}") from exc
+
+
+@router.post("/apply_texture_ai")
+async def apply_texture_ai(
+    payload: ApplyTextureAIRequest,
+    background_tasks: BackgroundTasks,
+) -> dict[str, Any]:
+    started = log_timing_start("APPLY_TEXTURE_AI")
+    try:
+        result = await asyncio.wait_for(
+            asyncio.to_thread(run_inpainting_sync, payload),
+            timeout=SD_QUICK_TIMEOUT_SECONDS,
+        )
+        log_timing_end("APPLY_TEXTURE_AI", started)
+        try:
+            release_resources()
+        except Exception:
+            logger.exception("Error releasing resources after APPLY_TEXTURE_AI")
+        result["processing"] = False
+        return result
+    except asyncio.TimeoutError:
+        job_id = uuid.uuid4().hex
+        with jobs_lock:
+            jobs[job_id] = {"status": "processing", "created_at": utc_now_iso(), "updated_at": utc_now_iso()}
+        background_tasks.add_task(run_inpainting_job, job_id, payload)
+        log_timing_end("APPLY_TEXTURE_AI", started)
+        try:
+            release_resources()
+        except Exception:
+            pass
+        return {
+            "processing": True,
+            "job_id": job_id,
+            "message": "Inpainting is taking longer than expected and continues in background.",
+            "status_url": f"/seg/jobs/{job_id}",
+        }
+    except HTTPException:
+        log_timing_end("APPLY_TEXTURE_AI", started)
+        try:
+            release_resources()
+        except Exception:
+            pass
+        raise
+    except Exception as exc:
+        log_timing_end("APPLY_TEXTURE_AI", started)
+        try:
+            release_resources()
+        except Exception:
+            pass
+        raise HTTPException(status_code=500, detail=f"Inpainting failed: {exc}") from exc
+
+
+@router.get("/jobs/{job_id}")
+async def get_job_status(job_id: str) -> dict[str, Any]:
+    with jobs_lock:
+        job = jobs.get(job_id)
+
+    if job is None:
+        raise HTTPException(status_code=404, detail="Job not found")
+
+    if job.get("status") == "processing":
+        kind = str(job.get("kind", "generic"))
+        stage = str(job.get("stage", "processing"))
+        progress = int(job.get("progress", 0) or 0)
+        eta_seconds: int | None = None
+
+        if kind == "upload" and stage == "segmenting_with_sam2":
+            stage_started_at_text = job.get("stage_started_at")
+            estimated_seconds = float(job.get("estimated_seconds", 0.0) or 0.0)
+            if stage_started_at_text and estimated_seconds > 0:
+                try:
+                    stage_started_at = datetime.fromisoformat(str(stage_started_at_text))
+                    elapsed = (datetime.now(timezone.utc) - stage_started_at).total_seconds()
+                    eta_seconds = max(0, int(estimated_seconds - elapsed))
+                    estimated_progress = int(min(95, 30 + (max(0.0, elapsed) / estimated_seconds) * 60))
+                    progress = max(progress, estimated_progress)
+                except ValueError:
+                    pass
+
+        stale_limit_seconds = UPLOAD_JOB_STALE_SECONDS if kind == "upload" else SD_JOB_STALE_SECONDS
+        created_at_text = job.get("created_at")
+        if created_at_text:
+            try:
+                created_at = datetime.fromisoformat(str(created_at_text))
+                age_seconds = (datetime.now(timezone.utc) - created_at).total_seconds()
+                if age_seconds > stale_limit_seconds:
+                    return {
+                        "processing": False,
+                        "status": "timeout",
+                        "message": "The process is taking too long. Please retry.",
+                        "job_id": job_id,
+                    }
+            except ValueError:
+                pass
+
+        response: dict[str, Any] = {
+            "processing": True,
+            "status": "processing",
+            "job_id": job_id,
+            "kind": kind,
+            "stage": stage,
+            "progress": progress,
+            "message": str(job.get("message", "Still processing.")),
+        }
+        if eta_seconds is not None:
+            response["eta_seconds"] = eta_seconds
+        return response
+
+    if job.get("status") == "done":
+        result = cast(dict[str, Any], job.get("result", {}))
+        result["processing"] = False
+        result["job_id"] = job_id
+        result["status"] = "done"
+        return result
+
+    if job.get("status") == "failed":
+        return {
+            "processing": False,
+            "status": "failed",
+            "job_id": job_id,
+            "message": job.get("error", "Background task failed"),
+        }
+
+    return {"processing": True, "status": "processing", "job_id": job_id, "message": "Still processing."}
+
+
+@router.post("/apply_color")
+async def apply_color(payload: ApplyColorRequest) -> dict[str, Any]:
+    started = log_timing_start("APPLY_COLOR")
+    try:
+        safe_name = Path(payload.filename).name
+        if not safe_name:
+            raise HTTPException(status_code=400, detail="Invalid filename")
+
+        label_safe_name = Path(payload.original_filename).name if payload.original_filename else safe_name
+
+        image_path = UPLOAD_DIR / safe_name
+        if not image_path.exists():
+            image_path = OUTPUT_DIR / safe_name
+        if not image_path.exists() or not image_path.is_file():
+            raise HTTPException(status_code=404, detail=f"Image not found: {safe_name}")
+
+        image_bgr = cv2.imread(str(image_path))
+        if image_bgr is None:
+            raise HTTPException(status_code=400, detail="Image could not be read")
+
+        mask_index = parse_mask_index(payload.mask_filename)
+        red, green, blue = parse_rgb_color(payload.color)
+
+        label_path = UPLOAD_DIR / "masks" / f"{label_safe_name}_labels.png"
+        label_map = cv2.imread(str(label_path), cv2.IMREAD_GRAYSCALE)
+        if label_map is None:
+            raise HTTPException(
+                status_code=404,
+                detail="Label map not found. Upload the image first to generate segments.",
+            )
+
+        segmentation = label_map == mask_index
+        if not segmentation.any():
+            raise HTTPException(status_code=400, detail=f"Segment index {mask_index} not found in label map.")
+
+        edited_image = image_bgr.copy()
+        edited_image[segmentation] = (blue, green, red)
+
+        original_stem = Path(label_safe_name).stem
+        out_filename = f"{original_stem}_edit.jpg"
+        out_path = UPLOAD_DIR / out_filename
+        if not cv2.imwrite(str(out_path), edited_image):
+            raise HTTPException(status_code=500, detail="Failed to save edited image")
+
+        return {
+            "message": "Color applied successfully",
+            "output_filename": out_filename,
+            "output_url": f"/seg/image/{out_filename}",
+        }
+    finally:
+        log_timing_end("APPLY_COLOR", started)
+        try:
+            release_resources()
+        except Exception:
+            logger.exception("Error releasing resources after APPLY_COLOR")
+
+
+@router.post("/apply_texture")
+async def apply_texture(payload: ApplyTextureRequest) -> dict[str, Any]:
+    try:
+        result = await asyncio.to_thread(apply_local_texture_sync, payload)
+        result["processing"] = False
+        return result
+    except HTTPException:
+        raise
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=f"Texture apply failed: {exc}") from exc
+
+
+@router.get("/textures")
+async def get_textures() -> dict[str, Any]:
+    return {"textures": list_available_textures()}
+
+
+class _GenerateVariationsRequest(BaseModel):
+    texture_name: str
+
+    class Config:
+        extra = "ignore"
+
+
+@router.post("/textures/generate")
+async def generate_variations(payload: _GenerateVariationsRequest) -> dict[str, Any]:
+    if not payload.texture_name:
+        raise HTTPException(status_code=400, detail="texture_name is required")
+    try:
+        variations = await asyncio.to_thread(generate_texture_variations, payload.texture_name)
+        return {"variations": variations}
+    except HTTPException:
+        raise
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=f"Variation generation failed: {exc}") from exc
+
+
+@router.get("/texture-preview/{filename:path}")
+async def get_texture_preview(filename: str) -> Response:
+    texture_path = resolve_texture_path(filename)
+    jpeg = await asyncio.to_thread(build_texture_preview_jpeg, texture_path)
+    return Response(content=jpeg, media_type="image/jpeg", headers={"Cache-Control": "public, max-age=3600"})
+
+
+@router.get("/video/{filename}")
+async def get_video(filename: str) -> FileResponse:
+    if Path(filename).name != filename:
+        raise HTTPException(status_code=400, detail="Invalid file name")
+    video_path = VIDEO_UPLOAD_DIR / filename
+    if not video_path.exists() or not video_path.is_file():
+        raise HTTPException(status_code=404, detail="Video not found")
+    return FileResponse(video_path)
+
+
+@router.get("/output-video/{filename}")
+async def get_output_video(filename: str) -> FileResponse:
+    if Path(filename).name != filename:
+        raise HTTPException(status_code=400, detail="Invalid file name")
+    video_path = VIDEO_OUTPUT_DIR / filename
+    if not video_path.exists() or not video_path.is_file():
+        raise HTTPException(status_code=404, detail="Output video not found")
+    return FileResponse(video_path)
+
+
+@router.get("/image/{filename}")
+async def get_image(filename: str) -> FileResponse:
+    if Path(filename).name != filename:
+        raise HTTPException(status_code=400, detail="Invalid file name")
+    image_path = UPLOAD_DIR / filename
+    if not image_path.exists() or not image_path.is_file():
+        raise HTTPException(status_code=404, detail="Image not found")
+    return FileResponse(image_path)
+
+
+@router.post("/masks/reclassify/{filename}")
+async def reclassify_mask_metadata(filename: str) -> dict[str, Any]:
+    """Re-run semantic classification on an already-segmented image and overwrite its metadata JSON."""
+    import json as _json
+    safe = Path(filename).name
+    if not safe:
+        raise HTTPException(status_code=400, detail="Invalid filename")
+
+    masks_dir = UPLOAD_DIR / "masks"
+    label_path = masks_dir / f"{safe}_labels.png"
+    if not label_path.exists():
+        raise HTTPException(status_code=404, detail="Label map not found — upload the image first")
+
+    label_map = cv2.imread(str(label_path), cv2.IMREAD_GRAYSCALE)
+    if label_map is None:
+        raise HTTPException(status_code=500, detail="Could not read label map")
+
+    image_path = UPLOAD_DIR / safe
+    image_rgb: Any = None
+    if image_path.exists():
+        img_bgr = cv2.imread(str(image_path))
+        if img_bgr is not None:
+            image_rgb = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2RGB)
+
+    from services.scene_service import classify_all_label_map_segments
+    h, w = label_map.shape[:2]
+    segments_meta = await asyncio.to_thread(
+        classify_all_label_map_segments, label_map, w, h, image_rgb
+    )
+    meta_path = masks_dir / f"{safe}_labels_meta.json"
+    meta_path.write_text(_json.dumps({"segments": segments_meta}, ensure_ascii=False), encoding="utf-8")
+
+    return {"segments": segments_meta, "count": len(segments_meta)}
+
+
+@router.get("/masks/meta/{filename}")
+async def get_mask_metadata(filename: str) -> dict:
+    import json as _json
+    safe = Path(filename).name
+    if not safe:
+        raise HTTPException(status_code=400, detail="Invalid filename")
+    meta_path = UPLOAD_DIR / "masks" / f"{safe}_labels_meta.json"
+    if not meta_path.exists() or not meta_path.is_file():
+        raise HTTPException(status_code=404, detail="Segment metadata not found")
+    try:
+        return _json.loads(meta_path.read_text(encoding="utf-8"))
+    except Exception as exc:
+        raise HTTPException(status_code=500, detail=f"Failed to read metadata: {exc}") from exc
+
+
+@router.get("/masks/{filename}")
+async def get_mask_labels(filename: str) -> FileResponse:
+    if Path(filename).name != filename:
+        raise HTTPException(status_code=400, detail="Invalid file name")
+    label_path = UPLOAD_DIR / "masks" / f"{filename}_labels.png"
+    if not label_path.exists() or not label_path.is_file():
+        raise HTTPException(status_code=404, detail="Label map not found")
+    return FileResponse(label_path)
+
+
+@router.get("/ai/{filename}")
+async def get_ai_image(filename: str) -> FileResponse:
+    if Path(filename).name != filename:
+        raise HTTPException(status_code=400, detail="Invalid file name")
+    out_path = OUTPUT_DIR / filename
+    if not out_path.exists() or not out_path.is_file():
+        raise HTTPException(status_code=404, detail="AI output image not found")
+    return FileResponse(out_path)

backend/run_server.bat

@@ -1,12 +1,12 @@
-@echo off
-REM Usa el Python del entorno virtual local dentro de backend y arranca uvicorn con recarga en caliente.
-if exist .venv\Scripts\python.exe (
-  set "PYTHON_EXE=.venv\Scripts\python.exe"
-) else if exist .venv\bin\python.exe (
-  set "PYTHON_EXE=.venv\bin\python.exe"
-) else (
-  echo No se encontró Python en .venv. Crea el entorno virtual primero.
-  pause
-  exit /b 1
-)
-%PYTHON_EXE% -m uvicorn main:app --reload --host 0.0.0.0 --port 8000
+@echo off
+REM Usa el Python del entorno virtual local dentro de backend y arranca uvicorn con recarga en caliente.
+if exist .venv\Scripts\python.exe (
+  set "PYTHON_EXE=.venv\Scripts\python.exe"
+) else if exist .venv\bin\python.exe (
+  set "PYTHON_EXE=.venv\bin\python.exe"
+) else (
+  echo No se encontró Python en .venv. Crea el entorno virtual primero.
+  pause
+  exit /b 1
+)
+%PYTHON_EXE% -m uvicorn main:app --reload --host 0.0.0.0 --port 8000

backend/services/gradio_client_service.py

@@ -1,108 +1,104 @@
-"""
-Cliente para llamar al Gradio Space de ZeroGPU (SAM2 + SegFormer + DINO).
-Se activa solo si GRADIO_SPACE_URL está definido en el entorno.
-"""
-import asyncio
-import base64
-import io
-import json
-import logging
-from pathlib import Path
-
-import numpy as np
-from PIL import Image
-
-from core.config import GRADIO_CPU_FALLBACK_URL, GRADIO_SPACE_URL
-
-logger = logging.getLogger(__name__)
-
-
-def is_gradio_enabled() -> bool:
-    # Desactivado por petición del usuario para usar el nuevo flujo simplificado con OpenAI
-    return False
-
-
-
-def _call_gradio_sync(image_path: Path, space_url: str) -> tuple[np.ndarray, int]:
-    """
-    Synchronous Gradio call — safe to invoke from a background thread.
-    Returns (label_map, mask_count).
-    Raises on any error so the caller can handle fallback.
-    """
-    from gradio_client import Client, file  # type: ignore
-
-    # 300s timeout: ZeroGPU cold start + SAM2+DINO inference can take 60-120s
-    # client = Client(space_url, httpx_kwargs={"timeout": 300.0})
-    client = Client(space_url) # httpx_kwargs no es compatible con todas las versiones
-
-
-    # segment_for_backend returns (overlay_image, combined_json_str)
-    _overlay_file, combined_json_str = client.predict(
-        file(str(image_path)),
-        api_name="/segment",
-    )
-
-    if not isinstance(combined_json_str, str):
-        raise ValueError(f"Unexpected response type from Gradio Space: {type(combined_json_str)}")
-
-    combined: dict = json.loads(combined_json_str)
-
-    if "error" in combined:
-        raise RuntimeError(f"Gradio Space error: {combined['error'][:500]}")
-
-    label_map_b64: str = combined.get("label_map_b64", "")
-    if not label_map_b64:
-        return np.zeros((1, 1), dtype=np.uint8), 0
-
-    # Decode PNG-encoded label map (lossless uint8 grayscale)
-    label_map_bytes = base64.b64decode(label_map_b64)
-    pil_label = Image.open(io.BytesIO(label_map_bytes))
-    label_map = np.array(pil_label, dtype=np.uint8)
-    mask_count = int(label_map.max())
-
-    entorno = combined.get("entorno", "?")
-    motor = combined.get("motor", "?")
-    logger.info(
-        "Gradio Space segmentation: entorno=%s motor=%s mask_count=%d",
-        entorno, motor, mask_count,
-    )
-
-    return label_map, mask_count
-
-
-def segment_via_gradio_sync(image_path: Path) -> tuple[np.ndarray, int]:
-    """
-    Blocking call to the Gradio Space from a sync context (background task thread).
-    Tries the GPU Space first; if it fails, falls back to the CPU Space.
-    Raises RuntimeError if both fail or neither is configured.
-    """
-    if not is_gradio_enabled():
-        raise RuntimeError("GRADIO_SPACE_URL is not configured")
-
-    gpu_error: Exception | None = None
-    try:
-        logger.info("Calling GPU Gradio Space: %s", GRADIO_SPACE_URL)
-        return _call_gradio_sync(image_path, GRADIO_SPACE_URL)
-    except Exception as e:
-        gpu_error = e
-        logger.warning("GPU Space failed (%s), trying CPU fallback...", gpu_error)
-
-    if not GRADIO_CPU_FALLBACK_URL:
-        raise RuntimeError(f"GPU Gradio Space failed and no CPU fallback configured. Error: {gpu_error}")
-
-    try:
-        logger.info("Calling CPU fallback Space: %s", GRADIO_CPU_FALLBACK_URL)
-        return _call_gradio_sync(image_path, GRADIO_CPU_FALLBACK_URL)
-    except Exception as exc_cpu:
-        raise RuntimeError(
-            f"Both Gradio Spaces failed.\n"
-            f"  GPU ({GRADIO_SPACE_URL}): {gpu_error}\n"
-            f"  CPU ({GRADIO_CPU_FALLBACK_URL}): {exc_cpu}"
-        ) from exc_cpu
-
-
-async def segment_via_gradio(image_path: Path) -> tuple[np.ndarray, int]:
-    """
-    Async wrapper — offloads the blocking call (with GPU→CPU fallback) to a thread.
-    """
-    return await asyncio.to_thread(segment_via_gradio_sync, image_path)
+"""
+Cliente para llamar al Gradio Space de ZeroGPU (SAM2 + SegFormer + DINO).
+Se activa solo si GRADIO_SPACE_URL está definido en el entorno.
+"""
+import asyncio
+import base64
+import io
+import json
+import logging
+from pathlib import Path
+
+import numpy as np
+from PIL import Image
+
+from core.config import GRADIO_CPU_FALLBACK_URL, GRADIO_SPACE_URL
+
+logger = logging.getLogger(__name__)
+
+
+def is_gradio_enabled() -> bool:
+    return bool(GRADIO_SPACE_URL)
+
+
+def _call_gradio_sync(image_path: Path, space_url: str) -> tuple[np.ndarray, int]:
+    """
+    Synchronous Gradio call — safe to invoke from a background thread.
+    Returns (label_map, mask_count).
+    Raises on any error so the caller can handle fallback.
+    """
+    from gradio_client import Client, file  # type: ignore
+
+    # 300s timeout: ZeroGPU cold start + SAM2+DINO inference can take 60-120s
+    client = Client(space_url, httpx_kwargs={"timeout": 300.0})
+
+    # segment_for_backend returns (overlay_image, combined_json_str)
+    _overlay_file, combined_json_str = client.predict(
+        file(str(image_path)),
+        api_name="/segment",
+    )
+
+    if not isinstance(combined_json_str, str):
+        raise ValueError(f"Unexpected response type from Gradio Space: {type(combined_json_str)}")
+
+    combined: dict = json.loads(combined_json_str)
+
+    if "error" in combined:
+        raise RuntimeError(f"Gradio Space error: {combined['error'][:500]}")
+
+    label_map_b64: str = combined.get("label_map_b64", "")
+    if not label_map_b64:
+        return np.zeros((1, 1), dtype=np.uint8), 0
+
+    # Decode PNG-encoded label map (lossless uint8 grayscale)
+    label_map_bytes = base64.b64decode(label_map_b64)
+    pil_label = Image.open(io.BytesIO(label_map_bytes))
+    label_map = np.array(pil_label, dtype=np.uint8)
+    mask_count = int(label_map.max())
+
+    entorno = combined.get("entorno", "?")
+    motor = combined.get("motor", "?")
+    logger.info(
+        "Gradio Space segmentation: entorno=%s motor=%s mask_count=%d",
+        entorno, motor, mask_count,
+    )
+
+    return label_map, mask_count
+
+
+def segment_via_gradio_sync(image_path: Path) -> tuple[np.ndarray, int]:
+    """
+    Blocking call to the Gradio Space from a sync context (background task thread).
+    Tries the GPU Space first; if it fails, falls back to the CPU Space.
+    Raises RuntimeError if both fail or neither is configured.
+    """
+    if not is_gradio_enabled():
+        raise RuntimeError("GRADIO_SPACE_URL is not configured")
+
+    gpu_error: Exception | None = None
+    try:
+        logger.info("Calling GPU Gradio Space: %s", GRADIO_SPACE_URL)
+        return _call_gradio_sync(image_path, GRADIO_SPACE_URL)
+    except Exception as e:
+        gpu_error = e
+        logger.warning("GPU Space failed (%s), trying CPU fallback...", gpu_error)
+
+    if not GRADIO_CPU_FALLBACK_URL:
+        raise RuntimeError(f"GPU Gradio Space failed and no CPU fallback configured. Error: {gpu_error}")
+
+    try:
+        logger.info("Calling CPU fallback Space: %s", GRADIO_CPU_FALLBACK_URL)
+        return _call_gradio_sync(image_path, GRADIO_CPU_FALLBACK_URL)
+    except Exception as exc_cpu:
+        raise RuntimeError(
+            f"Both Gradio Spaces failed.\n"
+            f"  GPU ({GRADIO_SPACE_URL}): {gpu_error}\n"
+            f"  CPU ({GRADIO_CPU_FALLBACK_URL}): {exc_cpu}"
+        ) from exc_cpu
+
+
+async def segment_via_gradio(image_path: Path) -> tuple[np.ndarray, int]:
+    """
+    Async wrapper — offloads the blocking call (with GPU→CPU fallback) to a thread.
+    """
+    return await asyncio.to_thread(segment_via_gradio_sync, image_path)

backend/services/image_service.py

@@ -18,13 +18,13 @@ from core.config import (
     logger,
     utc_now_iso,
 )
+from services.gradio_client_service import is_gradio_enabled, segment_via_gradio_sync
 from services.sam2_service import (
     jobs,
     jobs_lock,
     release_resources,
 )
 
-
 # Imported lazily to avoid circular imports
 def _get_generate_label_map():
     from services.scene_service import generate_label_map
@@ -134,15 +134,47 @@ def run_upload_job(job_id: str, content: bytes, original_name: str) -> None:
         logger.info(f"[JOB {job_id}] segmenting_with_sam2 progress=30 estimated_seconds={estimated_seconds}")
 
         image_path = UPLOAD_DIR / safe_name
-        
-        # We are simplifying the flow: skipping SAM 2 segmentation.
-        # The result will have 0 masks.
-        
+        if is_gradio_enabled():
+            label_map, mask_count = segment_via_gradio_sync(image_path)
+        else:
+            generate_label_map = _get_generate_label_map()
+            label_map, mask_count = generate_label_map(image_rgb)
+
+        with jobs_lock:
+            job = jobs.setdefault(job_id, {})
+            job.update({
+                "stage": "saving_masks",
+                "progress": 92,
+                "message": "Saving mask map",
+                "updated_at": utc_now_iso(),
+            })
+        logger.info(f"[JOB {job_id}] saving_masks progress=92")
+
+        masks_dir = UPLOAD_DIR / "masks"
+        masks_dir.mkdir(exist_ok=True)
+        label_path = masks_dir / f"{safe_name}_labels.png"
+        if not cv2.imwrite(str(label_path), label_map):
+            raise HTTPException(status_code=500, detail="Failed to save label map")
+
+        # Classify each segment and save metadata
+        try:
+            from services.scene_service import classify_all_label_map_segments
+            h, w = image_rgb.shape[:2]
+            segments_meta = classify_all_label_map_segments(label_map, w, h, image_rgb)
+            meta_path = masks_dir / f"{safe_name}_labels_meta.json"
+            meta_path.write_text(
+                json.dumps({"segments": segments_meta}, ensure_ascii=False),
+                encoding="utf-8",
+            )
+            logger.info(f"[JOB {job_id}] segments_meta saved ({len(segments_meta)} segments)")
+        except Exception:
+            logger.exception(f"[JOB {job_id}] Failed to save segment metadata")
+
         result: dict[str, Any] = {
             "message": "Image uploaded successfully",
             "filename": safe_name,
             "url": f"/seg/image/{safe_name}",
-            "mask_count": 0,
+            "mask_count": mask_count,
         }
 
         with jobs_lock:
@@ -151,15 +183,11 @@ def run_upload_job(job_id: str, content: bytes, original_name: str) -> None:
                 "status": "done",
                 "stage": "done",
                 "progress": 100,
-                "message": "Upload complete (Simplified flow)",
+                "message": "Segmentation complete",
                 "result": result,
                 "updated_at": utc_now_iso(),
             }
-        logger.info(f"[JOB {job_id}] done (simplified, 0 masks)")
-
-        # Segmentation-related files (masks, metadata) are skipped in the simplified flow.
-        pass
-
+        logger.info(f"[JOB {job_id}] done mask_count={mask_count}")
 
     except Exception as exc:
         logger.exception(f"[JOB {job_id}] failed: {exc}")

backend/services/inpainting_service.py

@@ -1,220 +1,28 @@
-import io
-import os
-import base64
-import openai
-from pathlib import Path
-from PIL import Image, ImageOps
 from typing import Any
-import numpy as np
 
-from core.config import UPLOAD_DIR, OUTPUT_DIR, logger, utc_now_iso
-from services.openai_service import _get_texture_hex
+from core.config import utc_now_iso
 from models.schemas import ApplyTextureAIRequest
 from services.sam2_service import jobs, jobs_lock
 
-# ─── Descripciones en inglés para el prompt de DALL-E ─────────────────────────
-TEXTURE_DESCRIPTIONS = {
-    "ACM_Amarillo":          "bright yellow smooth aluminum composite panel exterior cladding",
-    "ACM_Azul":              "blue aluminum composite panel exterior cladding",
-    "ACM_Glossy_Black":      "glossy black aluminum composite panel exterior cladding",
-    "ACM_Glossy_Red":        "glossy red aluminum composite panel exterior cladding",
-    "ACM_Grafito":           "graphite dark grey aluminum composite panel exterior cladding",
-    "ACM_Light_Blue":        "light sky blue aluminum composite panel exterior cladding",
-    "ACM_Madera_Clara":      "light wood grain aluminum composite panel exterior cladding",
-    "ACM_Matteblack":        "matte black aluminum composite panel exterior cladding",
-    "ACM_Metalic":           "metallic silver brushed aluminum composite panel exterior cladding",
-    "ACM_MouseGrey":         "mouse grey aluminum composite panel exterior cladding",
-    "ACM_Orange":            "orange aluminum composite panel exterior cladding",
-    "ACM_ROBLE(OAK)":        "oak wood grain aluminum composite panel exterior cladding",
-    "ACM_Verde":             "green aluminum composite panel exterior cladding",
-    "ACM_Verde_HN":          "dark forest green aluminum composite panel exterior cladding",
-    "ACM_Verde_Lima":        "lime yellow-green aluminum composite panel exterior cladding",
-    "ACM_White":             "white aluminum composite panel exterior cladding",
-    "DECK_gris":             "grey WPC wood-plastic composite deck boards",
-    "DECK_madera":           "natural wood-look WPC composite deck boards",
-    "DECK_madera_oscuro":    "dark brown WPC composite deck boards",
-    "WPC_madera_claro":      "light beige wood-grain WPC exterior wall cladding",
-    "WPC_madera_gris":       "grey weathered wood-look WPC exterior wall cladding",
-    "WPC_madera_oscuro":     "dark espresso wood-grain WPC exterior wall cladding",
-    "WPC_negro":             "black WPC exterior wall cladding",
-}
-
-def prepare_image_square(pil_img, size=1024):
-    """
-    Ajusta la imagen a un cuadrado de 1024x1024 añadiendo padding 
-    para no deformar la imagen original.
-    """
-    orig_w, orig_h = pil_img.size
-    ratio = orig_w / orig_h
-    
-    if ratio > 1: # Es más ancha que alta (Horizontal)
-        new_w = size
-        new_h = int(size / ratio)
-        padding = (0, (size - new_h) // 2)
-    else: # Es más alta que ancha (Vertical)
-        new_h = size
-        new_w = int(size * ratio)
-        padding = ((size - new_w) // 2, 0)
-        
-    # Redimensionar manteniendo proporción
-    resized_img = pil_img.resize((new_w, new_h), Image.LANCZOS)
-    
-    # Crear fondo cuadrado con transparencia
-    new_img = Image.new("RGBA", (size, size), (255, 255, 255, 0))
-    new_img.paste(resized_img, padding)
-    
-    return new_img, padding, (new_w, new_h)
 
 def run_inpainting_sync(payload: ApplyTextureAIRequest) -> dict[str, Any]:
-    """
-    Usa DALL-E 2 para editar la imagen de la casa reemplazando las texturas.
-    Inspirado en la lógica de 'imagneConaI/app.py'.
-    """
-    api_key = os.getenv("OPENAI_API_KEY")
-    if not api_key:
-        return {"error": "OpenAI API Key not found in environment"}
-
-    safe_name = Path(payload.filename).name
-    image_path = UPLOAD_DIR / safe_name
-    if not image_path.exists():
-        image_path = OUTPUT_DIR / safe_name
-    
-    if not image_path.exists():
-        return {"error": f"Image not found: {payload.filename}"}
-
-    # Determinar descripción de textura
-    texture_name = payload.texture_name or "ACM_White"
-    texture_stem = Path(texture_name).stem
-    texture_desc = TEXTURE_DESCRIPTIONS.get(texture_stem, texture_name)
-
-    # Specs técnicas para el prompt
-    acm_specs = ""
-    if texture_stem.startswith("ACM"):
-        acm_specs = (
-            "ACM aluminum composite panel 4mm thick, 0.40mm aluminum layers, "
-            "panels sized 1.22m x 2.44m, clean precision-cut joints between panels, "
-        )
-    elif "WPC" in texture_stem or "DECK" in texture_stem:
-        acm_specs = "WPC wood-plastic composite profile boards, "
-
-    try:
-        client = openai.OpenAI(api_key=api_key)
-
-        pil_img_orig = Image.open(str(image_path)).convert("RGBA")
-        orig_size = pil_img_orig.size
-        
-        square_img, padding, resized_dims = prepare_image_square(pil_img_orig)
-        
-        buf = io.BytesIO()
-        square_img.save(buf, format="PNG")
-        buf.seek(0)
-
-        # Usar el prompt enviado o generar uno por defecto
-        prompt = payload.prompt or (
-            f"Edit ONLY the exterior wall cladding material of this house. "
-            f"Replace all facade wall surfaces with {acm_specs}{texture_desc}. "
-            f"Keep EVERYTHING ELSE exactly the same: the house structure, shape, proportions, "
-            f"roof, windows, doors, garage, balcony railings, garden, plants, sky and lighting. "
-            f"Only change the wall surface material. "
-            f"Result must look like a photorealistic architectural photo. "
-            f"CRITICAL: Do NOT stylize, do NOT apply artistic filters, do NOT add painterly or CGI effects. "
-            f"Preserve photographic grain, camera exposure, highlights and shadows, and match original lighting and perspective. "
-            f"Avoid oversmoothing — keep realistic texture detail and crisp panel edges."
-        )
-
-        # If texture file exists, compute representative hex and request exact color match
-        tex_hex = _get_texture_hex(texture_name or "") if texture_name else None
-        if tex_hex:
-            prompt += f" Use the exact color sample {tex_hex} from the reference texture and match its hue, saturation and brightness precisely. Do not alter the color tone."
+    return {
+        "message": "Inpainting not configured",
+        "filename": payload.filename,
+        "prompt": payload.prompt,
+        "processing": False,
+    }
 
-        # gpt-image-1 solo acepta 1024x1024
-        # If a texture file exists, attach it as a reference image when possible
-        tex_path = None
-        if texture_name:
-            try:
-                from services.texture_service import resolve_texture_path as _resolve
-                tex_path = _resolve(texture_name)
-            except Exception:
-                tex_path = None
-
-        if tex_path:
-            try:
-                with open(tex_path, "rb") as tf:
-                    tex_buf = io.BytesIO(tf.read())
-                    tex_buf.seek(0)
-                    response = client.images.edit(
-                        model="gpt-image-1",
-                        image=("house.png", buf, "image/png"),
-                        reference_image=(Path(tex_path).name, tex_buf, "image/png"),
-                        prompt=prompt,
-                        n=1,
-                        size="1024x1024",
-                        response_format="b64_json",
-                    )
-            except Exception:
-                response = client.images.edit(
-                    model="gpt-image-1",
-                    image=("house.png", buf, "image/png"),
-                    prompt=prompt,
-                    n=1,
-                    size="1024x1024",
-                    response_format="b64_json",
-                )
-        else:
-            response = client.images.edit(
-                model="gpt-image-1",
-                image=("house.png", buf, "image/png"),
-                prompt=prompt,
-                n=1,
-                size="1024x1024",
-                response_format="b64_json",
-            )
-
-        img_data = base64.b64decode(response.data[0].b64_json)
-        result_square = Image.open(io.BytesIO(img_data)).convert("RGBA")
-        
-        # 2. Recortar el resultado para volver al aspecto original (quitar padding)
-        left, top = padding
-        right, bottom = left + resized_dims[0], top + resized_dims[1]
-        result_cropped = result_square.crop((left, top, right, bottom))
-        
-        # 3. Redimensionar al tamaño original exacto
-        result = result_cropped.resize(orig_size, Image.LANCZOS).convert("RGB")
-
-        # Return generated result without blending with original image
-        final = result
-
-        out_filename = f"{Path(safe_name).stem}_ai_{texture_stem}.jpg"
-        out_path = OUTPUT_DIR / out_filename
-        final.save(str(out_path), "JPEG", quality=90)
-
-        return {
-            "message": f"AI Texture applied: {texture_name}",
-            "filename": out_filename,
-            "url": f"/seg/ai/{out_filename}",
-            "processing": False
-        }
-
-    except Exception as e:
-        logger.error(f"DALL-E Error: {e}")
-        return {"error": str(e)}
 
 def run_inpainting_job(job_id: str, payload: ApplyTextureAIRequest) -> None:
     try:
         result = run_inpainting_sync(payload)
         with jobs_lock:
-            if "error" in result:
-                jobs[job_id] = {
-                    "status": "failed",
-                    "error": result["error"],
-                    "updated_at": utc_now_iso(),
-                }
-            else:
-                jobs[job_id] = {
-                    "status": "done",
-                    "result": result,
-                    "updated_at": utc_now_iso(),
-                }
+            jobs[job_id] = {
+                "status": "done",
+                "result": result,
+                "updated_at": utc_now_iso(),
+            }
     except Exception as exc:
         with jobs_lock:
             jobs[job_id] = {

backend/services/sam2_service.py

@@ -112,9 +112,6 @@ def find_sam2_model_path() -> Path:
 
 def load_sam2_model() -> None:
     global sam2_mask_generator, sam2_image_predictor, sam2_load_error
-    sam2_load_error = "SAM2 disabled (using Simplified OpenAI flow)"
-    logger.info(f"[SAM2] {sam2_load_error}")
-    return
 
     if not _TORCH_AVAILABLE:
         sam2_load_error = "torch not installed — SAM2 unavailable (using Gradio Space)"

backend/services/texture_service.py

@@ -1,851 +1,851 @@
-import io
-import shutil
-import uuid
-from pathlib import Path
-from typing import Any
-
-import cv2
-import numpy as np
-from fastapi import HTTPException
-from PIL import Image
-
-from core.config import (
-    OUTPUT_DIR,
-    TEXTURE_DIR,
-    UPLOAD_DIR,
-    UPLOAD_JPEG_QUALITY,
-    log_timing_end,
-    log_timing_start,
-    logger,
-)
-from models.schemas import ApplyTextureRequest
-
-
-def generate_texture_variations(texture_name: str) -> list[dict[str, str]]:
-    """
-    Genera variaciones de color/brillo/saturación de una textura de referencia usando HSV.
-    Los archivos se cachean en TEXTURE_DIR/generated/ — si ya existen no se regeneran.
-    Devuelve lista de {ref, label, preview_url}.
-    """
-    texture_path = resolve_texture_path(texture_name)
-    generated_dir = TEXTURE_DIR / "generated"
-    generated_dir.mkdir(parents=True, exist_ok=True)
-
-    tex_pil = load_texture_pil_rgb(texture_path)
-    tex_bgr = cv2.cvtColor(np.array(tex_pil, dtype=np.uint8), cv2.COLOR_RGB2BGR)
-    tex_hsv = cv2.cvtColor(tex_bgr, cv2.COLOR_BGR2HSV).astype(np.int32)
-
-    base_stem = Path(texture_name).stem
-    results: list[dict[str, str]] = []
-
-    def _save(hsv: np.ndarray, suffix: str, label: str) -> None:
-        fname = f"{base_stem}__{suffix}.jpg"
-        out_path = generated_dir / fname
-        if not out_path.exists():
-            bgr = cv2.cvtColor(np.clip(hsv, 0, 255).astype(np.uint8), cv2.COLOR_HSV2BGR)
-            rgb = cv2.cvtColor(bgr, cv2.COLOR_BGR2RGB)
-            Image.fromarray(rgb).save(str(out_path), format="JPEG", quality=92, optimize=True)
-        ref = f"generated/{fname}"
-        results.append({"ref": ref, "label": label, "preview_url": f"/seg/texture-preview/{ref}"})
-
-    # Rotaciones de tono: 12 pasos de 30° recorriendo el círculo cromático
-    # En OpenCV HSV, H ∈ [0,179] → shift en grados / 2
-    for deg, label in [
-        (30,  "Naranja"),
-        (60,  "Amarillo"),
-        (90,  "Verde lima"),
-        (120, "Verde"),
-        (150, "Verde agua"),
-        (165, "Cyan"),
-        (180, "Azul cielo"),
-        (210, "Azul"),
-        (240, "Índigo"),
-        (270, "Violeta"),
-        (300, "Magenta"),
-        (330, "Rosa"),
-    ]:
-        v = tex_hsv.copy()
-        v[:, :, 0] = (v[:, :, 0] + deg // 2) % 180
-        _save(v, f"hue{deg}", label)
-
-    # Variaciones de brillo
-    for factor, label, suffix in [
-        (0.45, "Oscuro",  "dark"),
-        (1.55, "Claro",   "light"),
-    ]:
-        v = tex_hsv.copy()
-        v[:, :, 2] = np.clip(v[:, :, 2] * factor, 0, 255)
-        _save(v, suffix, label)
-
-    # Variaciones de saturación
-    for factor, label, suffix in [
-        (0.0,  "Gris",    "gray"),
-        (0.45, "Apagado", "muted"),
-        (1.75, "Vívido",  "vivid"),
-    ]:
-        v = tex_hsv.copy()
-        v[:, :, 1] = np.clip(v[:, :, 1] * factor, 0, 255)
-        _save(v, suffix, label)
-
-    return results
-
-
-def list_available_textures() -> list[str]:
-    allowed = {".jpg", ".jpeg", ".png", ".webp", ".bmp", ".tif", ".tiff", ".exr"}
-    return [
-        str(path.relative_to(TEXTURE_DIR)).replace("\\", "/")
-        for path in sorted(TEXTURE_DIR.rglob("*"))
-        if path.is_file() and path.suffix.lower() in allowed
-    ]
-
-
-def resolve_texture_path(texture_name: str) -> Path:
-    if not texture_name:
-        raise HTTPException(status_code=400, detail="Invalid texture_name")
-
-    normalized = texture_name.replace("\\", "/").strip("/")
-    candidate = (TEXTURE_DIR / normalized).resolve()
-    base = TEXTURE_DIR.resolve()
-
-    try:
-        candidate.relative_to(base)
-    except ValueError as exc:
-        raise HTTPException(status_code=400, detail="Invalid texture_name") from exc
-
-    if not candidate.exists() or not candidate.is_file():
-        raise HTTPException(status_code=404, detail=f"Texture not found: {normalized}")
-
-    return candidate
-
-
-def build_texture_preview_jpeg(texture_path: Path, max_size: int = 320) -> bytes:
-    pil_img = load_texture_pil_rgb(texture_path)
-    pil_img.thumbnail((max_size, max_size), Image.Resampling.LANCZOS)
-    out = io.BytesIO()
-    pil_img.save(out, format="JPEG", quality=88, optimize=True)
-    return out.getvalue()
-
-
-def load_texture_pil_rgb(texture_path: Path) -> Image.Image:
-    suffix = texture_path.suffix.lower()
-
-    if suffix != ".exr":
-        try:
-            return Image.open(str(texture_path)).convert("RGB")
-        except Exception as exc:
-            raise HTTPException(status_code=500, detail=f"Could not read texture file: {exc}") from exc
-
-    exr = cv2.imread(str(texture_path), cv2.IMREAD_UNCHANGED)
-    if exr is None:
-        raise HTTPException(status_code=500, detail="Could not decode EXR texture")
-
-    if exr.ndim == 2:
-        exr = np.stack([exr, exr, exr], axis=-1)
-    if exr.ndim != 3:
-        raise HTTPException(status_code=500, detail="EXR texture has unsupported shape")
-    if exr.shape[2] > 3:
-        exr = exr[:, :, :3]
-
-    exr = np.nan_to_num(exr, nan=0.0, posinf=0.0, neginf=0.0)
-    exr = np.maximum(exr, 0)
-
-    if np.issubdtype(exr.dtype, np.floating):
-        scale = float(np.percentile(exr, 99.0))
-        if scale <= 1e-8:
-            scale = float(np.max(exr))
-        if scale <= 1e-8:
-            scale = 1.0
-        img = np.clip(exr / scale, 0.0, 1.0)
-        img = np.power(img, 1.0 / 2.2)
-        img_u8 = (img * 255.0).astype(np.uint8)
-    elif exr.dtype == np.uint16:
-        img_u8 = (exr / 257.0).astype(np.uint8)
-    else:
-        img_u8 = np.clip(exr, 0, 255).astype(np.uint8)
-
-    img_rgb = cv2.cvtColor(img_u8, cv2.COLOR_BGR2RGB)
-    return Image.fromarray(img_rgb).convert("RGB")
-
-
-def estimate_mask_orientation_degrees(binary_mask: np.ndarray) -> float:
-    mask_u8 = (binary_mask > 0).astype(np.uint8)
-    contours, _ = cv2.findContours(mask_u8, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
-    if not contours:
-        return 0.0
-
-    largest = max(contours, key=cv2.contourArea)
-    if cv2.contourArea(largest) < 25.0:
-        return 0.0
-
-    rect = cv2.minAreaRect(largest)
-    (_, _), (width, height), angle = rect
-
-    dominant_angle = float(angle)
-    if width < height:
-        dominant_angle += 90.0
-
-    dominant_angle %= 180.0
-    return dominant_angle
-
-
-def _compute_trapezoid_score_from_mask(
-    binary_mask: np.ndarray,
-    ys: np.ndarray,
-    xs: np.ndarray,
-    min_y: int,
-    max_y: int,
-    bbox_h: int,
-) -> float:
-    """Return 0..1 indicating how floor-like (wider at bottom) the mask shape is."""
-    quarter = max(1, bbox_h // 4)
-    top_xs = xs[ys <= (min_y + quarter)]
-    bot_xs = xs[ys >= (max_y - quarter)]
-    if len(top_xs) < 3 or len(bot_xs) < 3:
-        return 0.0
-    top_w = float(top_xs.max() - top_xs.min())
-    bot_w = float(bot_xs.max() - bot_xs.min())
-    if top_w < 5.0:
-        return 1.0 if bot_w > 20.0 else 0.0
-    ratio = bot_w / top_w
-    return float(np.clip((ratio - 1.0) / 1.8, 0.0, 1.0))
-
-
-def _sort_quad_corners(pts: np.ndarray) -> np.ndarray:
-    """Sort 4 points into [TL, TR, BR, BL] order."""
-    result = np.zeros((4, 2), dtype=np.float32)
-    s = pts[:, 0] + pts[:, 1]
-    d = pts[:, 0] - pts[:, 1]
-    result[0] = pts[np.argmin(s)]
-    result[1] = pts[np.argmax(d)]
-    result[2] = pts[np.argmax(s)]
-    result[3] = pts[np.argmin(d)]
-    return result
-
-
-def _extract_mask_quad(binary_mask: np.ndarray) -> np.ndarray | None:
-    """Approximate mask as 4-corner polygon sorted [TL, TR, BR, BL], or None."""
-    mask_u8 = (binary_mask > 0).astype(np.uint8)
-    contours, _ = cv2.findContours(mask_u8, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
-    if not contours:
-        return None
-    largest = max(contours, key=cv2.contourArea)
-    if cv2.contourArea(largest) < 400.0:
-        return None
-    hull = cv2.convexHull(largest)
-    peri = cv2.arcLength(hull, True)
-    for eps_frac in (0.03, 0.05, 0.08, 0.10, 0.13):
-        approx = cv2.approxPolyDP(hull, eps_frac * peri, True)
-        if len(approx) == 4:
-            return _sort_quad_corners(approx.reshape(4, 2).astype(np.float32))
-    return None
-
-
-def _tile_texture_perspective(
-    tex_pil: Image.Image,
-    quad: np.ndarray,
-    image_width: int,
-    image_height: int,
-) -> Image.Image | None:
-    """
-    Tile texture with perspective correction for a floor surface.
-    quad: [TL, TR, BR, BL] in image coordinates.
-    Returns full-image-size PIL image with warped tiled texture, or None on failure.
-    Pixels outside the perspective quad are filled with regular tiling to avoid black gaps.
-    """
-    tl, tr, br, bl = quad
-    bot_w = float(np.linalg.norm(br.astype(float) - bl.astype(float)))
-    top_w = float(np.linalg.norm(tr.astype(float) - tl.astype(float)))
-    left_h = float(np.linalg.norm(bl.astype(float) - tl.astype(float)))
-    right_h = float(np.linalg.norm(br.astype(float) - tr.astype(float)))
-    rect_w = min(int(max(bot_w, top_w)) + 1, image_width * 2)
-    rect_h = min(int(max(left_h, right_h)) + 1, image_height * 2)
-    if rect_w < 8 or rect_h < 8:
-        return None
-    tex_arr = np.array(tex_pil.convert("RGB"), dtype=np.uint8)
-    th, tw = tex_arr.shape[:2]
-    if tw < 1 or th < 1:
-        return None
-    rect_tiled = np.zeros((rect_h, rect_w, 3), dtype=np.uint8)
-    for ry in range(0, rect_h, th):
-        for rx in range(0, rect_w, tw):
-            py = min(th, rect_h - ry)
-            px = min(tw, rect_w - rx)
-            rect_tiled[ry : ry + py, rx : rx + px] = tex_arr[:py, :px]
-    src_pts = np.array(
-        [[0.0, 0.0], [float(rect_w - 1), 0.0], [float(rect_w - 1), float(rect_h - 1)], [0.0, float(rect_h - 1)]],
-        dtype=np.float32,
-    )
-    dst_pts = quad.astype(np.float32)
-    try:
-        H = cv2.getPerspectiveTransform(src_pts, dst_pts)
-        warped = cv2.warpPerspective(rect_tiled, H, (image_width, image_height))
-        # Mapa de cobertura: píxeles realmente cubiertos por el warp
-        cov_src = np.ones((rect_h, rect_w), dtype=np.uint8) * 255
-        coverage = cv2.warpPerspective(cov_src, H, (image_width, image_height))
-    except cv2.error:
-        return None
-
-    # Rellenar píxeles sin cobertura (fuera del quad) con tiling regular
-    # para evitar espacios negros donde la máscara supera el quad aproximado
-    regular = np.zeros((image_height, image_width, 3), dtype=np.uint8)
-    for ry in range(0, image_height, th):
-        for rx in range(0, image_width, tw):
-            py = min(th, image_height - ry)
-            px = min(tw, image_width - rx)
-            regular[ry : ry + py, rx : rx + px] = tex_arr[:py, :px]
-
-    uncovered = coverage < 128
-    warped[uncovered] = regular[uncovered]
-
-    return Image.fromarray(warped)
-
-
-def classify_texture_material(texture_name: str) -> str:
-    texture_key = texture_name.lower()
-    if "acm" in texture_key or "wpc" in texture_key:
-        return "acm"
-    if any(hint in texture_key for hint in ("deck", "wood", "plank", "laminate", "floor")):
-        return "wood"
-    if any(hint in texture_key for hint in ("marble", "granite", "tile", "brick", "cobblestone", "stone", "cartago", "riverbed")):
-        return "stone"
-    if any(hint in texture_key for hint in ("metal", "rust", "iron", "steel")):
-        return "metal"
-    return "generic"
-
-
-def infer_surface_type_and_direction(
-    binary_mask: np.ndarray,
-    image_width: int,
-    image_height: int,
-    texture_name: str,
-) -> tuple[str, float, float, int]:
-    mask_u8 = (binary_mask > 0).astype(np.uint8)
-    ys, xs = np.where(mask_u8 > 0)
-    if ys.size == 0 or xs.size == 0:
-        return ("wall", 0.0, 0.78, max(180, image_width // 4))
-
-    min_x, max_x = int(xs.min()), int(xs.max())
-    min_y, max_y = int(ys.min()), int(ys.max())
-    bbox_w = max(1, max_x - min_x + 1)
-    bbox_h = max(1, max_y - min_y + 1)
-    aspect = bbox_w / max(1.0, float(bbox_h))
-    center_y = float(ys.mean()) / max(1.0, float(image_height))
-    dominant_angle = estimate_mask_orientation_degrees(binary_mask)
-    material = classify_texture_material(texture_name)
-
-    # Trapezoid score: floor in perspective is wider at the bottom than the top
-    trapezoid_score = _compute_trapezoid_score_from_mask(binary_mask, ys, xs, min_y, max_y, bbox_h)
-
-    is_ceiling = center_y < 0.26 and aspect > 1.35
-    # Floor: low center + trapezoidal shape, OR clearly low + wide
-    is_floor = (
-        (center_y > 0.55 and aspect >= 0.9 and trapezoid_score > 0.30)
-        or (center_y > 0.68 and aspect > 1.15)
-    )
-
-    if is_ceiling:
-        surface_type = "ceiling"
-        angle = 0.0
-        blend_alpha = 0.58
-        tile_width = max(128, image_width // 5)
-    elif is_floor:
-        if material == "wood":
-            surface_type = "deck"
-            angle = dominant_angle if 8.0 <= dominant_angle <= 172.0 else 0.0
-            blend_alpha = 0.82
-            tile_width = max(320, int(bbox_w * 0.95), image_width // 2)
-        else:
-            surface_type = "floor"
-            angle = 0.0
-            blend_alpha = 0.80
-            # ACM floor: ~3 large-format panels visible on the near edge
-            tile_width = max(200, int(bbox_w * 0.35)) if material == "acm" else max(144, image_width // 3)
-    else:
-        surface_type = "wall"
-        angle = 0.0
-        if material == "acm":
-            blend_alpha = 0.78
-            # ACM wall panels: ~3 panels across the surface width
-            tile_width = max(180, int(bbox_w * 0.33))
-        elif material == "wood":
-            blend_alpha = 0.70
-            tile_width = max(220, int(bbox_w * 0.55), image_width // 4)
-        elif material == "stone":
-            blend_alpha = 0.84
-            tile_width = max(128, image_width // 4)
-        else:
-            blend_alpha = 0.66
-            tile_width = max(128, image_width // 4)
-
-    return (surface_type, float(angle % 180.0), float(blend_alpha), int(tile_width))
-
-
-def choose_auto_texture_settings(material: str, surface_type: str) -> tuple[float, float, float]:
-    strength_map = {"acm": 0.98, "stone": 0.96, "wood": 0.88, "metal": 0.91, "generic": 0.9}
-    intensity_map = {"acm": 0.08, "stone": 0.36, "wood": 0.3, "metal": 0.34, "generic": 0.32}
-
-    strength = float(strength_map.get(material, 0.9))
-    intensity = float(intensity_map.get(material, 0.32))
-
-    if surface_type in {"wall", "facade"}:
-        strength += 0.02
-        angle = 28.0
-    elif surface_type in {"roof"}:
-        angle = 42.0
-        intensity += 0.03
-    elif surface_type in {"floor", "deck"}:
-        angle = 24.0
-        intensity += 0.02
-    else:
-        angle = 35.0
-
-    return (
-        float(np.clip(strength, 0.55, 0.99)),
-        float(angle % 360.0),
-        float(np.clip(intensity, 0.0, 1.0)),
-    )
-
-
-def build_feather_mask(binary_mask: np.ndarray, sigma: float = 2.2) -> np.ndarray:
-    mask = (binary_mask > 0).astype(np.float32)
-    if mask.max() <= 0:
-        return mask
-    feather = cv2.GaussianBlur(mask, (0, 0), sigmaX=sigma, sigmaY=sigma)
-    return np.clip(feather, 0.0, 1.0)
-
-
-def build_scene_luminance_map(orig_rgb: np.ndarray) -> np.ndarray:
-    orig_u8 = orig_rgb.astype(np.uint8)
-    orig_lab = cv2.cvtColor(orig_u8, cv2.COLOR_RGB2LAB).astype(np.float32)
-    l_channel = orig_lab[:, :, 0] / 255.0
-    broad_light = cv2.GaussianBlur(l_channel, (0, 0), sigmaX=18.0, sigmaY=18.0)
-    local_detail = l_channel - cv2.GaussianBlur(l_channel, (0, 0), sigmaX=4.0, sigmaY=4.0)
-    light_map = 0.82 + (broad_light * 0.36) + (local_detail * 0.18)
-    return np.clip(light_map, 0.72, 1.22)
-
-
-def build_texture_relief_map(tex_rgb: np.ndarray, material: str = "generic") -> np.ndarray:
-    tex_u8 = tex_rgb.astype(np.uint8)
-    tex_gray = cv2.cvtColor(tex_u8, cv2.COLOR_RGB2GRAY).astype(np.float32) / 255.0
-    micro_relief = tex_gray - cv2.GaussianBlur(tex_gray, (0, 0), sigmaX=3.0, sigmaY=3.0)
-
-    relief_scale = {"acm": 0.35, "stone": 2.8, "wood": 2.2, "metal": 1.8}.get(material, 2.0)
-    return np.clip(micro_relief * relief_scale, -1.0, 1.0)
-
-
-def build_directional_light_map(
-    tex_rgb: np.ndarray,
-    material: str,
-    light_angle_degrees: float,
-    light_intensity: float,
-) -> np.ndarray:
-    tex_u8 = tex_rgb.astype(np.uint8)
-    tex_gray = cv2.cvtColor(tex_u8, cv2.COLOR_RGB2GRAY).astype(np.float32) / 255.0
-    height_map = cv2.GaussianBlur(tex_gray, (0, 0), sigmaX=1.4, sigmaY=1.4)
-    grad_x = cv2.Sobel(height_map, cv2.CV_32F, 1, 0, ksize=3)
-    grad_y = cv2.Sobel(height_map, cv2.CV_32F, 0, 1, ksize=3)
-
-    relief_scale = {"acm": 0.45, "stone": 3.0, "wood": 2.4, "metal": 1.6}.get(material, 2.0)
-
-    nx = -grad_x * relief_scale
-    ny = -grad_y * relief_scale
-    nz = np.ones_like(nx, dtype=np.float32)
-    norm = np.sqrt((nx * nx) + (ny * ny) + (nz * nz)) + 1e-6
-    nx = nx / norm
-    ny = ny / norm
-    nz = nz / norm
-
-    theta = np.deg2rad(float(light_angle_degrees))
-    lx = float(np.cos(theta))
-    ly = float(-np.sin(theta))
-    lz = 0.82
-    light_norm = max(1e-6, float(np.sqrt((lx * lx) + (ly * ly) + (lz * lz))))
-    lx /= light_norm
-    ly /= light_norm
-    lz /= light_norm
-
-    diffuse = np.clip((nx * lx) + (ny * ly) + (nz * lz), 0.0, 1.0)
-    strength = float(np.clip(light_intensity, 0.0, 1.0))
-    if material == "acm":
-        return np.clip(0.97 + (diffuse * (0.03 + (0.12 * strength))), 0.95, 1.12)
-    return np.clip(0.86 + (diffuse * (0.14 + (0.60 * strength))), 0.72, 1.35)
-
-
-def build_mask_edge_occlusion(binary_mask: np.ndarray, light_intensity: float) -> np.ndarray:
-    mask_u8 = (binary_mask > 0).astype(np.uint8)
-    if mask_u8.max() == 0:
-        return np.ones(mask_u8.shape, dtype=np.float32)
-
-    distance = cv2.distanceTransform(mask_u8, cv2.DIST_L2, 5).astype(np.float32)
-    inner_values = distance[mask_u8 > 0]
-    if inner_values.size == 0:
-        return np.ones(mask_u8.shape, dtype=np.float32)
-
-    max_distance = max(1.0, float(np.percentile(inner_values, 95)))
-    normalized = np.clip(distance / (max_distance * 0.16), 0.0, 1.0)
-    edge_strength = 1.0 - normalized
-    occlusion = 1.0 - (edge_strength * (0.04 + (0.08 * float(np.clip(light_intensity, 0.0, 1.0)))))
-    occlusion[mask_u8 == 0] = 1.0
-    return np.clip(occlusion, 0.88, 1.0)
-
-
-def apply_surface_lighting(
-    tex_rgb: np.ndarray,
-    orig_rgb: np.ndarray,
-    binary_mask: np.ndarray,
-    material: str,
-    lighting_mode: str,
-    light_angle_degrees: float,
-    light_intensity: float,
-) -> np.ndarray:
-    scene_light = build_scene_luminance_map(orig_rgb)
-    directional_light = build_directional_light_map(tex_rgb, material, light_angle_degrees, light_intensity)
-    relief_map = build_texture_relief_map(tex_rgb, material)
-    edge_occlusion = build_mask_edge_occlusion(binary_mask, light_intensity)
-
-    if material == "acm":
-        if lighting_mode == "directional":
-            light_map = directional_light
-        elif lighting_mode == "flat":
-            light_map = np.ones(scene_light.shape, dtype=np.float32)
-        else:
-            # 45 % scene luminance so ACM panels inherit shadows/gradients from photo
-            light_map = (scene_light * 0.45) + (directional_light * 0.55)
-    elif lighting_mode == "directional":
-        light_map = directional_light
-    elif lighting_mode == "flat":
-        light_map = np.ones(scene_light.shape, dtype=np.float32)
-    else:
-        light_map = (scene_light * 0.78) + (directional_light * 0.22)
-
-    detail_scale = 0.02 + (0.05 * float(np.clip(light_intensity, 0.0, 1.0))) if material == "acm" else 0.08 + (0.18 * float(np.clip(light_intensity, 0.0, 1.0)))
-    detail_boost = 1.0 + (relief_map * detail_scale)
-    enhanced = tex_rgb.astype(np.float32)
-    enhanced *= light_map[:, :, None]
-    enhanced *= detail_boost[:, :, None]
-    enhanced *= edge_occlusion[:, :, None]
-    return np.clip(enhanced, 0, 255).astype(np.uint8)
-
-
-def blend_texture_preserve_shading(
-    orig_rgb: np.ndarray,
-    tex_rgb: np.ndarray,
-    alpha_mask: np.ndarray,
-    blend_alpha: float,
-    material: str = "generic",
-) -> np.ndarray:
-    orig_u8 = orig_rgb.astype(np.uint8)
-    tex_u8 = tex_rgb.astype(np.uint8)
-
-    orig_lab = cv2.cvtColor(orig_u8, cv2.COLOR_RGB2LAB).astype(np.float32)
-    tex_lab = cv2.cvtColor(tex_u8, cv2.COLOR_RGB2LAB).astype(np.float32)
-
-    mixed_lab = tex_lab.copy()
-    if material == "acm":
-        # 30 % original luminance → panels inherit scene shadows while keeping panel colour
-        mixed_lab[:, :, 0] = (0.30 * orig_lab[:, :, 0]) + (0.70 * tex_lab[:, :, 0])
-        mixed_lab[:, :, 1] = (0.97 * tex_lab[:, :, 1]) + (0.03 * orig_lab[:, :, 1])
-        mixed_lab[:, :, 2] = (0.97 * tex_lab[:, :, 2]) + (0.03 * orig_lab[:, :, 2])
-    elif material == "wood":
-        mixed_lab[:, :, 0] = (0.78 * orig_lab[:, :, 0]) + (0.22 * tex_lab[:, :, 0])
-        mixed_lab[:, :, 1] = (0.9 * tex_lab[:, :, 1]) + (0.1 * orig_lab[:, :, 1])
-        mixed_lab[:, :, 2] = (0.9 * tex_lab[:, :, 2]) + (0.1 * orig_lab[:, :, 2])
-    elif material == "stone":
-        orig_l_base = cv2.GaussianBlur(orig_lab[:, :, 0], (0, 0), sigmaX=11.0, sigmaY=11.0)
-        mixed_lab[:, :, 0] = (0.18 * orig_l_base) + (0.82 * tex_lab[:, :, 0])
-        mixed_lab[:, :, 1] = (0.95 * tex_lab[:, :, 1]) + (0.05 * orig_lab[:, :, 1])
-        mixed_lab[:, :, 2] = (0.95 * tex_lab[:, :, 2]) + (0.05 * orig_lab[:, :, 2])
-    else:
-        mixed_lab[:, :, 0] = orig_lab[:, :, 0]
-        mixed_lab[:, :, 1] = (0.8 * tex_lab[:, :, 1]) + (0.2 * orig_lab[:, :, 1])
-        mixed_lab[:, :, 2] = (0.8 * tex_lab[:, :, 2]) + (0.2 * orig_lab[:, :, 2])
-
-    shaded_tex = cv2.cvtColor(np.clip(mixed_lab, 0, 255).astype(np.uint8), cv2.COLOR_LAB2RGB).astype(np.float32)
-    if material == "wood":
-        tex_gray = cv2.cvtColor(tex_u8, cv2.COLOR_RGB2GRAY).astype(np.float32)
-        tex_base = cv2.GaussianBlur(tex_gray, (0, 0), sigmaX=9.0, sigmaY=9.0)
-        tex_detail = np.clip((tex_gray - tex_base) / 255.0, -0.35, 0.35)
-        shaded_tex *= (1.0 + (tex_detail[:, :, None] * 0.28))
-
-    alpha = np.clip(alpha_mask[:, :, None] * float(blend_alpha), 0.0, 1.0)
-    composite = (orig_rgb * (1.0 - alpha)) + (shaded_tex * alpha)
-    return np.clip(composite, 0, 255).astype(np.uint8)
-
-
-def blend_texture_direct(
-    orig_rgb: np.ndarray,
-    tex_rgb: np.ndarray,
-    alpha_mask: np.ndarray,
-    blend_alpha: float,
-) -> np.ndarray:
-    alpha = np.clip(alpha_mask[:, :, None] * float(blend_alpha), 0.0, 1.0)
-    composite = (orig_rgb * (1.0 - alpha)) + (tex_rgb * alpha)
-    return np.clip(composite, 0, 255).astype(np.uint8)
-
-
-def apply_local_texture_sync(payload: ApplyTextureRequest) -> dict[str, Any]:
-    step = "APPLY_TEXTURE"
-    started = log_timing_start(step)
-    try:
-        safe_name = Path(payload.filename).name
-        if not safe_name:
-            raise HTTPException(status_code=400, detail="Invalid filename")
-
-        label_safe_name = Path(payload.original_filename).name if payload.original_filename else safe_name
-
-        image_path = UPLOAD_DIR / safe_name
-        if not image_path.exists() or not image_path.is_file():
-            image_path = OUTPUT_DIR / safe_name
-
-        if (not image_path.exists() or not image_path.is_file()) and payload.original_filename:
-            orig_name = Path(payload.original_filename).name
-            image_path = UPLOAD_DIR / orig_name
-            if not image_path.exists() or not image_path.is_file():
-                image_path = OUTPUT_DIR / orig_name
-
-        if not image_path.exists() or not image_path.is_file():
-            raise HTTPException(
-                status_code=404,
-                detail=f"Image not found: {safe_name} (also tried original: {payload.original_filename or 'n/a'})",
-            )
-
-        masks_dir = UPLOAD_DIR / "masks"
-        masks_dir.mkdir(exist_ok=True)
-        label_owner = Path(image_path).stem
-        label_path = masks_dir / f"{label_owner}_labels.png"
-        if not label_path.exists() and payload.original_filename:
-            alt_owner = Path(payload.original_filename).name
-            alt_label = masks_dir / f"{alt_owner}_labels.png"
-            if alt_label.exists():
-                label_path = alt_label
-
-        if not label_path.exists():
-            raise HTTPException(
-                status_code=404,
-                detail=f"Label map not found for {label_owner}. Upload/segment the image first.",
-            )
-
-        if not payload.mask_indices:
-            raise HTTPException(status_code=400, detail="No mask indices provided")
-
-        texture_path = resolve_texture_path(payload.texture_name)
-        orig_pil = Image.open(str(image_path)).convert("RGB")
-        width, height = orig_pil.size
-
-        label_map = cv2.imread(str(label_path), cv2.IMREAD_GRAYSCALE)
-        if label_map is None:
-            raise HTTPException(status_code=500, detail="Could not read label map")
-
-        binary_mask = np.zeros((label_map.shape[0], label_map.shape[1]), dtype=np.uint8)
-        for idx in payload.mask_indices:
-            binary_mask |= (label_map == idx).astype(np.uint8)
-
-        if binary_mask.max() == 0:
-            raise HTTPException(status_code=400, detail="None of the selected segments were found in the label map.")
-
-        direction_mode = str(payload.direction_mode or "auto").strip().lower()
-        if direction_mode not in {"auto", "manual", "none"}:
-            raise HTTPException(status_code=400, detail="Invalid direction_mode. Use auto, manual, or none.")
-
-        replace_mode = str(getattr(payload, "replace_mode", "realistic") or "realistic").strip().lower()
-        lighting_mode = str(getattr(payload, "lighting_mode", "scene") or "scene").strip().lower()
-
-        material = classify_texture_material(payload.texture_name)
-        surface_type, inferred_angle, blend_alpha, target_w = infer_surface_type_and_direction(
-            binary_mask, width, height, payload.texture_name,
-        )
-        replace_strength, light_angle_degrees, light_intensity = choose_auto_texture_settings(material, surface_type)
-        effective_alpha = float(np.clip(blend_alpha * (0.55 + (0.75 * replace_strength)), 0.0, 0.98))
-        if material == "acm":
-            effective_alpha = float(max(effective_alpha, 0.92))
-
-        applied_angle = 0.0
-        if direction_mode == "auto":
-            applied_angle = inferred_angle
-        elif direction_mode == "manual":
-            applied_angle = float(payload.angle_degrees)
-
-        tex_pil = load_texture_pil_rgb(texture_path)
-
-        # Escalar al tamaño de tile deseado ANTES de rotar
-        tex_w, tex_h = tex_pil.size
-        scale = target_w / max(1, tex_w)
-        if abs(scale - 1.0) > 0.05:
-            tex_pil = tex_pil.resize(
-                (max(1, int(tex_w * scale)), max(1, int(tex_h * scale))),
-                Image.Resampling.LANCZOS,
-            )
-            tex_w, tex_h = tex_pil.size
-
-        tiled: Image.Image | None = None
-
-        # Floor surfaces: perspective tiling solo cuando la perspectiva es fuerte.
-        # Para pisos de dormitorio/habitación (perspectiva suave) el quad aproximado
-        # no cubre bien el mask irregular → produce negro. Se usa tiling regular en esos casos.
-        if surface_type == "floor" and direction_mode in {"auto", "none"}:
-            ys_m, xs_m = np.where(binary_mask > 0)
-            if ys_m.size > 0:
-                min_y_m, max_y_m = int(ys_m.min()), int(ys_m.max())
-                bbox_h_m = max(1, max_y_m - min_y_m + 1)
-                trap_score = _compute_trapezoid_score_from_mask(
-                    binary_mask, ys_m, xs_m, min_y_m, max_y_m, bbox_h_m
-                )
-                if trap_score > 0.35:
-                    quad = _extract_mask_quad(binary_mask)
-                    if quad is not None:
-                        tiled = _tile_texture_perspective(tex_pil, quad, width, height)
-                        if tiled is not None:
-                            logger.info(f"[APPLY_TEXTURE] perspective floor tiling applied (trap={trap_score:.2f})")
-                else:
-                    logger.info(f"[APPLY_TEXTURE] flat floor tiling (trap={trap_score:.2f} < 0.35, skip perspective)")
-
-        # Wall / ceiling surfaces: perspective tiling cuando el quad es significativamente
-        # no-rectangular (pared fotografiada en ángulo). Un ratio > 1.20 entre lado mayor
-        # y lado menor indica distorsión perspectiva visible.
-        if surface_type in {"wall", "ceiling"} and tiled is None and direction_mode in {"auto", "none"}:
-            quad = _extract_mask_quad(binary_mask)
-            if quad is not None:
-                tl, tr, br, bl = quad
-                top_w   = float(np.linalg.norm(tr.astype(float) - tl.astype(float)))
-                bot_w   = float(np.linalg.norm(br.astype(float) - bl.astype(float)))
-                left_h  = float(np.linalg.norm(bl.astype(float) - tl.astype(float)))
-                right_h = float(np.linalg.norm(br.astype(float) - tr.astype(float)))
-                w_ratio = max(top_w, bot_w) / max(1.0, min(top_w, bot_w))
-                h_ratio = max(left_h, right_h) / max(1.0, min(left_h, right_h))
-                if w_ratio > 1.20 or h_ratio > 1.20:
-                    tiled = _tile_texture_perspective(tex_pil, quad, width, height)
-                    if tiled is not None:
-                        logger.info(
-                            f"[APPLY_TEXTURE] perspective wall tiling applied "
-                            f"(w_ratio={w_ratio:.2f}, h_ratio={h_ratio:.2f})"
-                        )
-
-        if tiled is None:
-            if abs(applied_angle) > 0.01:
-                # Tile on a large canvas first, then rotate the full canvas to avoid black corners
-                diag = int(np.ceil(np.sqrt(width ** 2 + height ** 2))) + max(tex_w, tex_h)
-                large_w = width + diag
-                large_h = height + diag
-                large = Image.new("RGB", (large_w, large_h))
-                for y in range(0, large_h, tex_h):
-                    for x in range(0, large_w, tex_w):
-                        large.paste(tex_pil, (x, y))
-                large = large.rotate(-applied_angle, resample=Image.Resampling.BICUBIC, expand=False)
-                cx = (large_w - width) // 2
-                cy = (large_h - height) // 2
-                tiled = large.crop((cx, cy, cx + width, cy + height))
-            else:
-                tiled = Image.new("RGB", (width, height))
-                for y in range(0, height, tex_h):
-                    for x in range(0, width, tex_w):
-                        tiled.paste(tex_pil, (x, y))
-
-        orig_u8 = np.array(orig_pil, dtype=np.uint8)
-
-        try:
-            if bool(getattr(payload, "clear_mask_before_apply", False)):
-                orig_candidate = None
-                if payload.original_filename:
-                    cand = UPLOAD_DIR / Path(payload.original_filename).name
-                    if cand.exists() and cand.is_file():
-                        orig_candidate = cand
-                    else:
-                        cand2 = OUTPUT_DIR / Path(payload.original_filename).name
-                        if cand2.exists() and cand2.is_file():
-                            orig_candidate = cand2
-                if orig_candidate is None:
-                    stem = Path(image_path).stem
-                    if "_edit_" in stem:
-                        base_name = stem.split("_edit_")[0] + ".jpg"
-                        cand = UPLOAD_DIR / base_name
-                        if cand.exists() and cand.is_file():
-                            orig_candidate = cand
-                        else:
-                            cand2 = OUTPUT_DIR / base_name
-                            if cand2.exists() and cand2.is_file():
-                                orig_candidate = cand2
-
-                if orig_candidate is not None:
-                    try:
-                        base_pil = Image.open(str(orig_candidate)).convert("RGB")
-                        if base_pil.size != (width, height):
-                            base_pil = base_pil.resize((width, height), Image.Resampling.LANCZOS)
-                        base_arr = np.array(base_pil, dtype=np.uint8)
-                        mask_bool = (binary_mask > 0)
-                        orig_u8[mask_bool] = base_arr[mask_bool]
-                        logger.info(f"[APPLY_TEXTURE] cleared mask from original source: {orig_candidate}")
-                    except Exception:
-                        logger.exception("Failed to restore original pixels for clear_mask_before_apply")
-        except Exception:
-            logger.exception("Error handling clear_mask_before_apply")
-
-        tiled_arr = np.array(tiled, dtype=np.uint8)
-
-        # Parchar píxeles muy oscuros (suma R+G+B < 20) dentro de la máscara.
-        # Cubren tanto negro exacto (0,0,0) como píxeles casi negros que el warp
-        # de perspectiva puede generar en bordes del quad o zonas sin cobertura.
-        mask_bool = binary_mask > 0
-        dark_in_mask = mask_bool & (tiled_arr.sum(axis=2) < 20)
-        if dark_in_mask.any():
-            th_f, tw_f = tex_pil.size[1], tex_pil.size[0]
-            tex_np = np.array(tex_pil, dtype=np.uint8)
-            ys_b, xs_b = np.where(dark_in_mask)
-            tiled_arr[ys_b, xs_b] = tex_np[ys_b % th_f, xs_b % tw_f]
-
-        lit_tex = apply_surface_lighting(
-            tiled_arr,
-            orig_u8,
-            binary_mask,
-            material,
-            lighting_mode,
-            light_angle_degrees,
-            light_intensity,
-        )
-
-        orig_arr = orig_u8.astype(np.float32)
-        tex_arr = lit_tex.astype(np.float32)
-
-        if replace_mode in {"hard", "absolute", "force", "replace"}:
-            mask_bool = (binary_mask > 0).astype(bool)
-            composite_arr = orig_arr.copy()
-            composite_arr[mask_bool] = tex_arr[mask_bool]
-            composite = np.clip(composite_arr, 0, 255).astype(np.uint8)
-        else:
-            feather_mask = build_feather_mask(binary_mask)
-            # All materials use shading-preservation so scene luminance (shadows/highlights)
-            # from the original photo is transferred onto the texture.
-            composite = blend_texture_preserve_shading(orig_arr, tex_arr, feather_mask, effective_alpha, material)
-
-        input_stem = Path(image_path).stem
-        edit_suffix = uuid.uuid4().hex[:8]
-        out_filename = f"{input_stem}_edit_{edit_suffix}.jpg"
-        out_path = UPLOAD_DIR / out_filename
-        Image.fromarray(composite).save(str(out_path), format="JPEG", quality=UPLOAD_JPEG_QUALITY, optimize=True)
-
-        try:
-            out_label_path = masks_dir / f"{Path(out_filename).stem}_labels.png"
-            if label_path.exists():
-                shutil.copyfile(str(label_path), str(out_label_path))
-        except Exception:
-            logger.exception("Failed to copy label map for output image")
-
-        return {
-            "message": "Texture applied successfully",
-            "original": safe_name,
-            "mask_indices": payload.mask_indices,
-            "texture_name": payload.texture_name,
-            "material": material,
-            "direction_mode": direction_mode,
-            "surface_type": surface_type,
-            "replace_mode": replace_mode,
-            "replace_strength": round(replace_strength, 3),
-            "lighting_mode": lighting_mode,
-            "light_angle_degrees": round(light_angle_degrees, 2),
-            "light_intensity": round(light_intensity, 3),
-            "blend_alpha": round(effective_alpha, 3),
-            "applied_angle_degrees": round(applied_angle, 2),
-            "output_filename": out_filename,
-            "output_url": f"/seg/image/{out_filename}",
-        }
-    finally:
-        log_timing_end(step, started)
+import io
+import shutil
+import uuid
+from pathlib import Path
+from typing import Any
+
+import cv2
+import numpy as np
+from fastapi import HTTPException
+from PIL import Image
+
+from core.config import (
+    OUTPUT_DIR,
+    TEXTURE_DIR,
+    UPLOAD_DIR,
+    UPLOAD_JPEG_QUALITY,
+    log_timing_end,
+    log_timing_start,
+    logger,
+)
+from models.schemas import ApplyTextureRequest
+
+
+def generate_texture_variations(texture_name: str) -> list[dict[str, str]]:
+    """
+    Genera variaciones de color/brillo/saturación de una textura de referencia usando HSV.
+    Los archivos se cachean en TEXTURE_DIR/generated/ — si ya existen no se regeneran.
+    Devuelve lista de {ref, label, preview_url}.
+    """
+    texture_path = resolve_texture_path(texture_name)
+    generated_dir = TEXTURE_DIR / "generated"
+    generated_dir.mkdir(parents=True, exist_ok=True)
+
+    tex_pil = load_texture_pil_rgb(texture_path)
+    tex_bgr = cv2.cvtColor(np.array(tex_pil, dtype=np.uint8), cv2.COLOR_RGB2BGR)
+    tex_hsv = cv2.cvtColor(tex_bgr, cv2.COLOR_BGR2HSV).astype(np.int32)
+
+    base_stem = Path(texture_name).stem
+    results: list[dict[str, str]] = []
+
+    def _save(hsv: np.ndarray, suffix: str, label: str) -> None:
+        fname = f"{base_stem}__{suffix}.jpg"
+        out_path = generated_dir / fname
+        if not out_path.exists():
+            bgr = cv2.cvtColor(np.clip(hsv, 0, 255).astype(np.uint8), cv2.COLOR_HSV2BGR)
+            rgb = cv2.cvtColor(bgr, cv2.COLOR_BGR2RGB)
+            Image.fromarray(rgb).save(str(out_path), format="JPEG", quality=92, optimize=True)
+        ref = f"generated/{fname}"
+        results.append({"ref": ref, "label": label, "preview_url": f"/seg/texture-preview/{ref}"})
+
+    # Rotaciones de tono: 12 pasos de 30° recorriendo el círculo cromático
+    # En OpenCV HSV, H ∈ [0,179] → shift en grados / 2
+    for deg, label in [
+        (30,  "Naranja"),
+        (60,  "Amarillo"),
+        (90,  "Verde lima"),
+        (120, "Verde"),
+        (150, "Verde agua"),
+        (165, "Cyan"),
+        (180, "Azul cielo"),
+        (210, "Azul"),
+        (240, "Índigo"),
+        (270, "Violeta"),
+        (300, "Magenta"),
+        (330, "Rosa"),
+    ]:
+        v = tex_hsv.copy()
+        v[:, :, 0] = (v[:, :, 0] + deg // 2) % 180
+        _save(v, f"hue{deg}", label)
+
+    # Variaciones de brillo
+    for factor, label, suffix in [
+        (0.45, "Oscuro",  "dark"),
+        (1.55, "Claro",   "light"),
+    ]:
+        v = tex_hsv.copy()
+        v[:, :, 2] = np.clip(v[:, :, 2] * factor, 0, 255)
+        _save(v, suffix, label)
+
+    # Variaciones de saturación
+    for factor, label, suffix in [
+        (0.0,  "Gris",    "gray"),
+        (0.45, "Apagado", "muted"),
+        (1.75, "Vívido",  "vivid"),
+    ]:
+        v = tex_hsv.copy()
+        v[:, :, 1] = np.clip(v[:, :, 1] * factor, 0, 255)
+        _save(v, suffix, label)
+
+    return results
+
+
+def list_available_textures() -> list[str]:
+    allowed = {".jpg", ".jpeg", ".png", ".webp", ".bmp", ".tif", ".tiff", ".exr"}
+    return [
+        str(path.relative_to(TEXTURE_DIR)).replace("\\", "/")
+        for path in sorted(TEXTURE_DIR.rglob("*"))
+        if path.is_file() and path.suffix.lower() in allowed
+    ]
+
+
+def resolve_texture_path(texture_name: str) -> Path:
+    if not texture_name:
+        raise HTTPException(status_code=400, detail="Invalid texture_name")
+
+    normalized = texture_name.replace("\\", "/").strip("/")
+    candidate = (TEXTURE_DIR / normalized).resolve()
+    base = TEXTURE_DIR.resolve()
+
+    try:
+        candidate.relative_to(base)
+    except ValueError as exc:
+        raise HTTPException(status_code=400, detail="Invalid texture_name") from exc
+
+    if not candidate.exists() or not candidate.is_file():
+        raise HTTPException(status_code=404, detail=f"Texture not found: {normalized}")
+
+    return candidate
+
+
+def build_texture_preview_jpeg(texture_path: Path, max_size: int = 320) -> bytes:
+    pil_img = load_texture_pil_rgb(texture_path)
+    pil_img.thumbnail((max_size, max_size), Image.Resampling.LANCZOS)
+    out = io.BytesIO()
+    pil_img.save(out, format="JPEG", quality=88, optimize=True)
+    return out.getvalue()
+
+
+def load_texture_pil_rgb(texture_path: Path) -> Image.Image:
+    suffix = texture_path.suffix.lower()
+
+    if suffix != ".exr":
+        try:
+            return Image.open(str(texture_path)).convert("RGB")
+        except Exception as exc:
+            raise HTTPException(status_code=500, detail=f"Could not read texture file: {exc}") from exc
+
+    exr = cv2.imread(str(texture_path), cv2.IMREAD_UNCHANGED)
+    if exr is None:
+        raise HTTPException(status_code=500, detail="Could not decode EXR texture")
+
+    if exr.ndim == 2:
+        exr = np.stack([exr, exr, exr], axis=-1)
+    if exr.ndim != 3:
+        raise HTTPException(status_code=500, detail="EXR texture has unsupported shape")
+    if exr.shape[2] > 3:
+        exr = exr[:, :, :3]
+
+    exr = np.nan_to_num(exr, nan=0.0, posinf=0.0, neginf=0.0)
+    exr = np.maximum(exr, 0)
+
+    if np.issubdtype(exr.dtype, np.floating):
+        scale = float(np.percentile(exr, 99.0))
+        if scale <= 1e-8:
+            scale = float(np.max(exr))
+        if scale <= 1e-8:
+            scale = 1.0
+        img = np.clip(exr / scale, 0.0, 1.0)
+        img = np.power(img, 1.0 / 2.2)
+        img_u8 = (img * 255.0).astype(np.uint8)
+    elif exr.dtype == np.uint16:
+        img_u8 = (exr / 257.0).astype(np.uint8)
+    else:
+        img_u8 = np.clip(exr, 0, 255).astype(np.uint8)
+
+    img_rgb = cv2.cvtColor(img_u8, cv2.COLOR_BGR2RGB)
+    return Image.fromarray(img_rgb).convert("RGB")
+
+
+def estimate_mask_orientation_degrees(binary_mask: np.ndarray) -> float:
+    mask_u8 = (binary_mask > 0).astype(np.uint8)
+    contours, _ = cv2.findContours(mask_u8, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+    if not contours:
+        return 0.0
+
+    largest = max(contours, key=cv2.contourArea)
+    if cv2.contourArea(largest) < 25.0:
+        return 0.0
+
+    rect = cv2.minAreaRect(largest)
+    (_, _), (width, height), angle = rect
+
+    dominant_angle = float(angle)
+    if width < height:
+        dominant_angle += 90.0
+
+    dominant_angle %= 180.0
+    return dominant_angle
+
+
+def _compute_trapezoid_score_from_mask(
+    binary_mask: np.ndarray,
+    ys: np.ndarray,
+    xs: np.ndarray,
+    min_y: int,
+    max_y: int,
+    bbox_h: int,
+) -> float:
+    """Return 0..1 indicating how floor-like (wider at bottom) the mask shape is."""
+    quarter = max(1, bbox_h // 4)
+    top_xs = xs[ys <= (min_y + quarter)]
+    bot_xs = xs[ys >= (max_y - quarter)]
+    if len(top_xs) < 3 or len(bot_xs) < 3:
+        return 0.0
+    top_w = float(top_xs.max() - top_xs.min())
+    bot_w = float(bot_xs.max() - bot_xs.min())
+    if top_w < 5.0:
+        return 1.0 if bot_w > 20.0 else 0.0
+    ratio = bot_w / top_w
+    return float(np.clip((ratio - 1.0) / 1.8, 0.0, 1.0))
+
+
+def _sort_quad_corners(pts: np.ndarray) -> np.ndarray:
+    """Sort 4 points into [TL, TR, BR, BL] order."""
+    result = np.zeros((4, 2), dtype=np.float32)
+    s = pts[:, 0] + pts[:, 1]
+    d = pts[:, 0] - pts[:, 1]
+    result[0] = pts[np.argmin(s)]
+    result[1] = pts[np.argmax(d)]
+    result[2] = pts[np.argmax(s)]
+    result[3] = pts[np.argmin(d)]
+    return result
+
+
+def _extract_mask_quad(binary_mask: np.ndarray) -> np.ndarray | None:
+    """Approximate mask as 4-corner polygon sorted [TL, TR, BR, BL], or None."""
+    mask_u8 = (binary_mask > 0).astype(np.uint8)
+    contours, _ = cv2.findContours(mask_u8, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+    if not contours:
+        return None
+    largest = max(contours, key=cv2.contourArea)
+    if cv2.contourArea(largest) < 400.0:
+        return None
+    hull = cv2.convexHull(largest)
+    peri = cv2.arcLength(hull, True)
+    for eps_frac in (0.03, 0.05, 0.08, 0.10, 0.13):
+        approx = cv2.approxPolyDP(hull, eps_frac * peri, True)
+        if len(approx) == 4:
+            return _sort_quad_corners(approx.reshape(4, 2).astype(np.float32))
+    return None
+
+
+def _tile_texture_perspective(
+    tex_pil: Image.Image,
+    quad: np.ndarray,
+    image_width: int,
+    image_height: int,
+) -> Image.Image | None:
+    """
+    Tile texture with perspective correction for a floor surface.
+    quad: [TL, TR, BR, BL] in image coordinates.
+    Returns full-image-size PIL image with warped tiled texture, or None on failure.
+    Pixels outside the perspective quad are filled with regular tiling to avoid black gaps.
+    """
+    tl, tr, br, bl = quad
+    bot_w = float(np.linalg.norm(br.astype(float) - bl.astype(float)))
+    top_w = float(np.linalg.norm(tr.astype(float) - tl.astype(float)))
+    left_h = float(np.linalg.norm(bl.astype(float) - tl.astype(float)))
+    right_h = float(np.linalg.norm(br.astype(float) - tr.astype(float)))
+    rect_w = min(int(max(bot_w, top_w)) + 1, image_width * 2)
+    rect_h = min(int(max(left_h, right_h)) + 1, image_height * 2)
+    if rect_w < 8 or rect_h < 8:
+        return None
+    tex_arr = np.array(tex_pil.convert("RGB"), dtype=np.uint8)
+    th, tw = tex_arr.shape[:2]
+    if tw < 1 or th < 1:
+        return None
+    rect_tiled = np.zeros((rect_h, rect_w, 3), dtype=np.uint8)
+    for ry in range(0, rect_h, th):
+        for rx in range(0, rect_w, tw):
+            py = min(th, rect_h - ry)
+            px = min(tw, rect_w - rx)
+            rect_tiled[ry : ry + py, rx : rx + px] = tex_arr[:py, :px]
+    src_pts = np.array(
+        [[0.0, 0.0], [float(rect_w - 1), 0.0], [float(rect_w - 1), float(rect_h - 1)], [0.0, float(rect_h - 1)]],
+        dtype=np.float32,
+    )
+    dst_pts = quad.astype(np.float32)
+    try:
+        H = cv2.getPerspectiveTransform(src_pts, dst_pts)
+        warped = cv2.warpPerspective(rect_tiled, H, (image_width, image_height))
+        # Mapa de cobertura: píxeles realmente cubiertos por el warp
+        cov_src = np.ones((rect_h, rect_w), dtype=np.uint8) * 255
+        coverage = cv2.warpPerspective(cov_src, H, (image_width, image_height))
+    except cv2.error:
+        return None
+
+    # Rellenar píxeles sin cobertura (fuera del quad) con tiling regular
+    # para evitar espacios negros donde la máscara supera el quad aproximado
+    regular = np.zeros((image_height, image_width, 3), dtype=np.uint8)
+    for ry in range(0, image_height, th):
+        for rx in range(0, image_width, tw):
+            py = min(th, image_height - ry)
+            px = min(tw, image_width - rx)
+            regular[ry : ry + py, rx : rx + px] = tex_arr[:py, :px]
+
+    uncovered = coverage < 128
+    warped[uncovered] = regular[uncovered]
+
+    return Image.fromarray(warped)
+
+
+def classify_texture_material(texture_name: str) -> str:
+    texture_key = texture_name.lower()
+    if "acm" in texture_key or "wpc" in texture_key:
+        return "acm"
+    if any(hint in texture_key for hint in ("deck", "wood", "plank", "laminate", "floor")):
+        return "wood"
+    if any(hint in texture_key for hint in ("marble", "granite", "tile", "brick", "cobblestone", "stone", "cartago", "riverbed")):
+        return "stone"
+    if any(hint in texture_key for hint in ("metal", "rust", "iron", "steel")):
+        return "metal"
+    return "generic"
+
+
+def infer_surface_type_and_direction(
+    binary_mask: np.ndarray,
+    image_width: int,
+    image_height: int,
+    texture_name: str,
+) -> tuple[str, float, float, int]:
+    mask_u8 = (binary_mask > 0).astype(np.uint8)
+    ys, xs = np.where(mask_u8 > 0)
+    if ys.size == 0 or xs.size == 0:
+        return ("wall", 0.0, 0.78, max(180, image_width // 4))
+
+    min_x, max_x = int(xs.min()), int(xs.max())
+    min_y, max_y = int(ys.min()), int(ys.max())
+    bbox_w = max(1, max_x - min_x + 1)
+    bbox_h = max(1, max_y - min_y + 1)
+    aspect = bbox_w / max(1.0, float(bbox_h))
+    center_y = float(ys.mean()) / max(1.0, float(image_height))
+    dominant_angle = estimate_mask_orientation_degrees(binary_mask)
+    material = classify_texture_material(texture_name)
+
+    # Trapezoid score: floor in perspective is wider at the bottom than the top
+    trapezoid_score = _compute_trapezoid_score_from_mask(binary_mask, ys, xs, min_y, max_y, bbox_h)
+
+    is_ceiling = center_y < 0.26 and aspect > 1.35
+    # Floor: low center + trapezoidal shape, OR clearly low + wide
+    is_floor = (
+        (center_y > 0.55 and aspect >= 0.9 and trapezoid_score > 0.30)
+        or (center_y > 0.68 and aspect > 1.15)
+    )
+
+    if is_ceiling:
+        surface_type = "ceiling"
+        angle = 0.0
+        blend_alpha = 0.58
+        tile_width = max(128, image_width // 5)
+    elif is_floor:
+        if material == "wood":
+            surface_type = "deck"
+            angle = dominant_angle if 8.0 <= dominant_angle <= 172.0 else 0.0
+            blend_alpha = 0.82
+            tile_width = max(320, int(bbox_w * 0.95), image_width // 2)
+        else:
+            surface_type = "floor"
+            angle = 0.0
+            blend_alpha = 0.80
+            # ACM floor: ~3 large-format panels visible on the near edge
+            tile_width = max(200, int(bbox_w * 0.35)) if material == "acm" else max(144, image_width // 3)
+    else:
+        surface_type = "wall"
+        angle = 0.0
+        if material == "acm":
+            blend_alpha = 0.78
+            # ACM wall panels: ~3 panels across the surface width
+            tile_width = max(180, int(bbox_w * 0.33))
+        elif material == "wood":
+            blend_alpha = 0.70
+            tile_width = max(220, int(bbox_w * 0.55), image_width // 4)
+        elif material == "stone":
+            blend_alpha = 0.84
+            tile_width = max(128, image_width // 4)
+        else:
+            blend_alpha = 0.66
+            tile_width = max(128, image_width // 4)
+
+    return (surface_type, float(angle % 180.0), float(blend_alpha), int(tile_width))
+
+
+def choose_auto_texture_settings(material: str, surface_type: str) -> tuple[float, float, float]:
+    strength_map = {"acm": 0.98, "stone": 0.96, "wood": 0.88, "metal": 0.91, "generic": 0.9}
+    intensity_map = {"acm": 0.08, "stone": 0.36, "wood": 0.3, "metal": 0.34, "generic": 0.32}
+
+    strength = float(strength_map.get(material, 0.9))
+    intensity = float(intensity_map.get(material, 0.32))
+
+    if surface_type in {"wall", "facade"}:
+        strength += 0.02
+        angle = 28.0
+    elif surface_type in {"roof"}:
+        angle = 42.0
+        intensity += 0.03
+    elif surface_type in {"floor", "deck"}:
+        angle = 24.0
+        intensity += 0.02
+    else:
+        angle = 35.0
+
+    return (
+        float(np.clip(strength, 0.55, 0.99)),
+        float(angle % 360.0),
+        float(np.clip(intensity, 0.0, 1.0)),
+    )
+
+
+def build_feather_mask(binary_mask: np.ndarray, sigma: float = 2.2) -> np.ndarray:
+    mask = (binary_mask > 0).astype(np.float32)
+    if mask.max() <= 0:
+        return mask
+    feather = cv2.GaussianBlur(mask, (0, 0), sigmaX=sigma, sigmaY=sigma)
+    return np.clip(feather, 0.0, 1.0)
+
+
+def build_scene_luminance_map(orig_rgb: np.ndarray) -> np.ndarray:
+    orig_u8 = orig_rgb.astype(np.uint8)
+    orig_lab = cv2.cvtColor(orig_u8, cv2.COLOR_RGB2LAB).astype(np.float32)
+    l_channel = orig_lab[:, :, 0] / 255.0
+    broad_light = cv2.GaussianBlur(l_channel, (0, 0), sigmaX=18.0, sigmaY=18.0)
+    local_detail = l_channel - cv2.GaussianBlur(l_channel, (0, 0), sigmaX=4.0, sigmaY=4.0)
+    light_map = 0.82 + (broad_light * 0.36) + (local_detail * 0.18)
+    return np.clip(light_map, 0.72, 1.22)
+
+
+def build_texture_relief_map(tex_rgb: np.ndarray, material: str = "generic") -> np.ndarray:
+    tex_u8 = tex_rgb.astype(np.uint8)
+    tex_gray = cv2.cvtColor(tex_u8, cv2.COLOR_RGB2GRAY).astype(np.float32) / 255.0
+    micro_relief = tex_gray - cv2.GaussianBlur(tex_gray, (0, 0), sigmaX=3.0, sigmaY=3.0)
+
+    relief_scale = {"acm": 0.35, "stone": 2.8, "wood": 2.2, "metal": 1.8}.get(material, 2.0)
+    return np.clip(micro_relief * relief_scale, -1.0, 1.0)
+
+
+def build_directional_light_map(
+    tex_rgb: np.ndarray,
+    material: str,
+    light_angle_degrees: float,
+    light_intensity: float,
+) -> np.ndarray:
+    tex_u8 = tex_rgb.astype(np.uint8)
+    tex_gray = cv2.cvtColor(tex_u8, cv2.COLOR_RGB2GRAY).astype(np.float32) / 255.0
+    height_map = cv2.GaussianBlur(tex_gray, (0, 0), sigmaX=1.4, sigmaY=1.4)
+    grad_x = cv2.Sobel(height_map, cv2.CV_32F, 1, 0, ksize=3)
+    grad_y = cv2.Sobel(height_map, cv2.CV_32F, 0, 1, ksize=3)
+
+    relief_scale = {"acm": 0.45, "stone": 3.0, "wood": 2.4, "metal": 1.6}.get(material, 2.0)
+
+    nx = -grad_x * relief_scale
+    ny = -grad_y * relief_scale
+    nz = np.ones_like(nx, dtype=np.float32)
+    norm = np.sqrt((nx * nx) + (ny * ny) + (nz * nz)) + 1e-6
+    nx = nx / norm
+    ny = ny / norm
+    nz = nz / norm
+
+    theta = np.deg2rad(float(light_angle_degrees))
+    lx = float(np.cos(theta))
+    ly = float(-np.sin(theta))
+    lz = 0.82
+    light_norm = max(1e-6, float(np.sqrt((lx * lx) + (ly * ly) + (lz * lz))))
+    lx /= light_norm
+    ly /= light_norm
+    lz /= light_norm
+
+    diffuse = np.clip((nx * lx) + (ny * ly) + (nz * lz), 0.0, 1.0)
+    strength = float(np.clip(light_intensity, 0.0, 1.0))
+    if material == "acm":
+        return np.clip(0.97 + (diffuse * (0.03 + (0.12 * strength))), 0.95, 1.12)
+    return np.clip(0.86 + (diffuse * (0.14 + (0.60 * strength))), 0.72, 1.35)
+
+
+def build_mask_edge_occlusion(binary_mask: np.ndarray, light_intensity: float) -> np.ndarray:
+    mask_u8 = (binary_mask > 0).astype(np.uint8)
+    if mask_u8.max() == 0:
+        return np.ones(mask_u8.shape, dtype=np.float32)
+
+    distance = cv2.distanceTransform(mask_u8, cv2.DIST_L2, 5).astype(np.float32)
+    inner_values = distance[mask_u8 > 0]
+    if inner_values.size == 0:
+        return np.ones(mask_u8.shape, dtype=np.float32)
+
+    max_distance = max(1.0, float(np.percentile(inner_values, 95)))
+    normalized = np.clip(distance / (max_distance * 0.16), 0.0, 1.0)
+    edge_strength = 1.0 - normalized
+    occlusion = 1.0 - (edge_strength * (0.04 + (0.08 * float(np.clip(light_intensity, 0.0, 1.0)))))
+    occlusion[mask_u8 == 0] = 1.0
+    return np.clip(occlusion, 0.88, 1.0)
+
+
+def apply_surface_lighting(
+    tex_rgb: np.ndarray,
+    orig_rgb: np.ndarray,
+    binary_mask: np.ndarray,
+    material: str,
+    lighting_mode: str,
+    light_angle_degrees: float,
+    light_intensity: float,
+) -> np.ndarray:
+    scene_light = build_scene_luminance_map(orig_rgb)
+    directional_light = build_directional_light_map(tex_rgb, material, light_angle_degrees, light_intensity)
+    relief_map = build_texture_relief_map(tex_rgb, material)
+    edge_occlusion = build_mask_edge_occlusion(binary_mask, light_intensity)
+
+    if material == "acm":
+        if lighting_mode == "directional":
+            light_map = directional_light
+        elif lighting_mode == "flat":
+            light_map = np.ones(scene_light.shape, dtype=np.float32)
+        else:
+            # 45 % scene luminance so ACM panels inherit shadows/gradients from photo
+            light_map = (scene_light * 0.45) + (directional_light * 0.55)
+    elif lighting_mode == "directional":
+        light_map = directional_light
+    elif lighting_mode == "flat":
+        light_map = np.ones(scene_light.shape, dtype=np.float32)
+    else:
+        light_map = (scene_light * 0.78) + (directional_light * 0.22)
+
+    detail_scale = 0.02 + (0.05 * float(np.clip(light_intensity, 0.0, 1.0))) if material == "acm" else 0.08 + (0.18 * float(np.clip(light_intensity, 0.0, 1.0)))
+    detail_boost = 1.0 + (relief_map * detail_scale)
+    enhanced = tex_rgb.astype(np.float32)
+    enhanced *= light_map[:, :, None]
+    enhanced *= detail_boost[:, :, None]
+    enhanced *= edge_occlusion[:, :, None]
+    return np.clip(enhanced, 0, 255).astype(np.uint8)
+
+
+def blend_texture_preserve_shading(
+    orig_rgb: np.ndarray,
+    tex_rgb: np.ndarray,
+    alpha_mask: np.ndarray,
+    blend_alpha: float,
+    material: str = "generic",
+) -> np.ndarray:
+    orig_u8 = orig_rgb.astype(np.uint8)
+    tex_u8 = tex_rgb.astype(np.uint8)
+
+    orig_lab = cv2.cvtColor(orig_u8, cv2.COLOR_RGB2LAB).astype(np.float32)
+    tex_lab = cv2.cvtColor(tex_u8, cv2.COLOR_RGB2LAB).astype(np.float32)
+
+    mixed_lab = tex_lab.copy()
+    if material == "acm":
+        # 30 % original luminance → panels inherit scene shadows while keeping panel colour
+        mixed_lab[:, :, 0] = (0.30 * orig_lab[:, :, 0]) + (0.70 * tex_lab[:, :, 0])
+        mixed_lab[:, :, 1] = (0.97 * tex_lab[:, :, 1]) + (0.03 * orig_lab[:, :, 1])
+        mixed_lab[:, :, 2] = (0.97 * tex_lab[:, :, 2]) + (0.03 * orig_lab[:, :, 2])
+    elif material == "wood":
+        mixed_lab[:, :, 0] = (0.78 * orig_lab[:, :, 0]) + (0.22 * tex_lab[:, :, 0])
+        mixed_lab[:, :, 1] = (0.9 * tex_lab[:, :, 1]) + (0.1 * orig_lab[:, :, 1])
+        mixed_lab[:, :, 2] = (0.9 * tex_lab[:, :, 2]) + (0.1 * orig_lab[:, :, 2])
+    elif material == "stone":
+        orig_l_base = cv2.GaussianBlur(orig_lab[:, :, 0], (0, 0), sigmaX=11.0, sigmaY=11.0)
+        mixed_lab[:, :, 0] = (0.18 * orig_l_base) + (0.82 * tex_lab[:, :, 0])
+        mixed_lab[:, :, 1] = (0.95 * tex_lab[:, :, 1]) + (0.05 * orig_lab[:, :, 1])
+        mixed_lab[:, :, 2] = (0.95 * tex_lab[:, :, 2]) + (0.05 * orig_lab[:, :, 2])
+    else:
+        mixed_lab[:, :, 0] = orig_lab[:, :, 0]
+        mixed_lab[:, :, 1] = (0.8 * tex_lab[:, :, 1]) + (0.2 * orig_lab[:, :, 1])
+        mixed_lab[:, :, 2] = (0.8 * tex_lab[:, :, 2]) + (0.2 * orig_lab[:, :, 2])
+
+    shaded_tex = cv2.cvtColor(np.clip(mixed_lab, 0, 255).astype(np.uint8), cv2.COLOR_LAB2RGB).astype(np.float32)
+    if material == "wood":
+        tex_gray = cv2.cvtColor(tex_u8, cv2.COLOR_RGB2GRAY).astype(np.float32)
+        tex_base = cv2.GaussianBlur(tex_gray, (0, 0), sigmaX=9.0, sigmaY=9.0)
+        tex_detail = np.clip((tex_gray - tex_base) / 255.0, -0.35, 0.35)
+        shaded_tex *= (1.0 + (tex_detail[:, :, None] * 0.28))
+
+    alpha = np.clip(alpha_mask[:, :, None] * float(blend_alpha), 0.0, 1.0)
+    composite = (orig_rgb * (1.0 - alpha)) + (shaded_tex * alpha)
+    return np.clip(composite, 0, 255).astype(np.uint8)
+
+
+def blend_texture_direct(
+    orig_rgb: np.ndarray,
+    tex_rgb: np.ndarray,
+    alpha_mask: np.ndarray,
+    blend_alpha: float,
+) -> np.ndarray:
+    alpha = np.clip(alpha_mask[:, :, None] * float(blend_alpha), 0.0, 1.0)
+    composite = (orig_rgb * (1.0 - alpha)) + (tex_rgb * alpha)
+    return np.clip(composite, 0, 255).astype(np.uint8)
+
+
+def apply_local_texture_sync(payload: ApplyTextureRequest) -> dict[str, Any]:
+    step = "APPLY_TEXTURE"
+    started = log_timing_start(step)
+    try:
+        safe_name = Path(payload.filename).name
+        if not safe_name:
+            raise HTTPException(status_code=400, detail="Invalid filename")
+
+        label_safe_name = Path(payload.original_filename).name if payload.original_filename else safe_name
+
+        image_path = UPLOAD_DIR / safe_name
+        if not image_path.exists() or not image_path.is_file():
+            image_path = OUTPUT_DIR / safe_name
+
+        if (not image_path.exists() or not image_path.is_file()) and payload.original_filename:
+            orig_name = Path(payload.original_filename).name
+            image_path = UPLOAD_DIR / orig_name
+            if not image_path.exists() or not image_path.is_file():
+                image_path = OUTPUT_DIR / orig_name
+
+        if not image_path.exists() or not image_path.is_file():
+            raise HTTPException(
+                status_code=404,
+                detail=f"Image not found: {safe_name} (also tried original: {payload.original_filename or 'n/a'})",
+            )
+
+        masks_dir = UPLOAD_DIR / "masks"
+        masks_dir.mkdir(exist_ok=True)
+        label_owner = Path(image_path).stem
+        label_path = masks_dir / f"{label_owner}_labels.png"
+        if not label_path.exists() and payload.original_filename:
+            alt_owner = Path(payload.original_filename).name
+            alt_label = masks_dir / f"{alt_owner}_labels.png"
+            if alt_label.exists():
+                label_path = alt_label
+
+        if not label_path.exists():
+            raise HTTPException(
+                status_code=404,
+                detail=f"Label map not found for {label_owner}. Upload/segment the image first.",
+            )
+
+        if not payload.mask_indices:
+            raise HTTPException(status_code=400, detail="No mask indices provided")
+
+        texture_path = resolve_texture_path(payload.texture_name)
+        orig_pil = Image.open(str(image_path)).convert("RGB")
+        width, height = orig_pil.size
+
+        label_map = cv2.imread(str(label_path), cv2.IMREAD_GRAYSCALE)
+        if label_map is None:
+            raise HTTPException(status_code=500, detail="Could not read label map")
+
+        binary_mask = np.zeros((label_map.shape[0], label_map.shape[1]), dtype=np.uint8)
+        for idx in payload.mask_indices:
+            binary_mask |= (label_map == idx).astype(np.uint8)
+
+        if binary_mask.max() == 0:
+            raise HTTPException(status_code=400, detail="None of the selected segments were found in the label map.")
+
+        direction_mode = str(payload.direction_mode or "auto").strip().lower()
+        if direction_mode not in {"auto", "manual", "none"}:
+            raise HTTPException(status_code=400, detail="Invalid direction_mode. Use auto, manual, or none.")
+
+        replace_mode = str(getattr(payload, "replace_mode", "realistic") or "realistic").strip().lower()
+        lighting_mode = str(getattr(payload, "lighting_mode", "scene") or "scene").strip().lower()
+
+        material = classify_texture_material(payload.texture_name)
+        surface_type, inferred_angle, blend_alpha, target_w = infer_surface_type_and_direction(
+            binary_mask, width, height, payload.texture_name,
+        )
+        replace_strength, light_angle_degrees, light_intensity = choose_auto_texture_settings(material, surface_type)
+        effective_alpha = float(np.clip(blend_alpha * (0.55 + (0.75 * replace_strength)), 0.0, 0.98))
+        if material == "acm":
+            effective_alpha = float(max(effective_alpha, 0.92))
+
+        applied_angle = 0.0
+        if direction_mode == "auto":
+            applied_angle = inferred_angle
+        elif direction_mode == "manual":
+            applied_angle = float(payload.angle_degrees)
+
+        tex_pil = load_texture_pil_rgb(texture_path)
+
+        # Escalar al tamaño de tile deseado ANTES de rotar
+        tex_w, tex_h = tex_pil.size
+        scale = target_w / max(1, tex_w)
+        if abs(scale - 1.0) > 0.05:
+            tex_pil = tex_pil.resize(
+                (max(1, int(tex_w * scale)), max(1, int(tex_h * scale))),
+                Image.Resampling.LANCZOS,
+            )
+            tex_w, tex_h = tex_pil.size
+
+        tiled: Image.Image | None = None
+
+        # Floor surfaces: perspective tiling solo cuando la perspectiva es fuerte.
+        # Para pisos de dormitorio/habitación (perspectiva suave) el quad aproximado
+        # no cubre bien el mask irregular → produce negro. Se usa tiling regular en esos casos.
+        if surface_type == "floor" and direction_mode in {"auto", "none"}:
+            ys_m, xs_m = np.where(binary_mask > 0)
+            if ys_m.size > 0:
+                min_y_m, max_y_m = int(ys_m.min()), int(ys_m.max())
+                bbox_h_m = max(1, max_y_m - min_y_m + 1)
+                trap_score = _compute_trapezoid_score_from_mask(
+                    binary_mask, ys_m, xs_m, min_y_m, max_y_m, bbox_h_m
+                )
+                if trap_score > 0.35:
+                    quad = _extract_mask_quad(binary_mask)
+                    if quad is not None:
+                        tiled = _tile_texture_perspective(tex_pil, quad, width, height)
+                        if tiled is not None:
+                            logger.info(f"[APPLY_TEXTURE] perspective floor tiling applied (trap={trap_score:.2f})")
+                else:
+                    logger.info(f"[APPLY_TEXTURE] flat floor tiling (trap={trap_score:.2f} < 0.35, skip perspective)")
+
+        # Wall / ceiling surfaces: perspective tiling cuando el quad es significativamente
+        # no-rectangular (pared fotografiada en ángulo). Un ratio > 1.20 entre lado mayor
+        # y lado menor indica distorsión perspectiva visible.
+        if surface_type in {"wall", "ceiling"} and tiled is None and direction_mode in {"auto", "none"}:
+            quad = _extract_mask_quad(binary_mask)
+            if quad is not None:
+                tl, tr, br, bl = quad
+                top_w   = float(np.linalg.norm(tr.astype(float) - tl.astype(float)))
+                bot_w   = float(np.linalg.norm(br.astype(float) - bl.astype(float)))
+                left_h  = float(np.linalg.norm(bl.astype(float) - tl.astype(float)))
+                right_h = float(np.linalg.norm(br.astype(float) - tr.astype(float)))
+                w_ratio = max(top_w, bot_w) / max(1.0, min(top_w, bot_w))
+                h_ratio = max(left_h, right_h) / max(1.0, min(left_h, right_h))
+                if w_ratio > 1.20 or h_ratio > 1.20:
+                    tiled = _tile_texture_perspective(tex_pil, quad, width, height)
+                    if tiled is not None:
+                        logger.info(
+                            f"[APPLY_TEXTURE] perspective wall tiling applied "
+                            f"(w_ratio={w_ratio:.2f}, h_ratio={h_ratio:.2f})"
+                        )
+
+        if tiled is None:
+            if abs(applied_angle) > 0.01:
+                # Tile on a large canvas first, then rotate the full canvas to avoid black corners
+                diag = int(np.ceil(np.sqrt(width ** 2 + height ** 2))) + max(tex_w, tex_h)
+                large_w = width + diag
+                large_h = height + diag
+                large = Image.new("RGB", (large_w, large_h))
+                for y in range(0, large_h, tex_h):
+                    for x in range(0, large_w, tex_w):
+                        large.paste(tex_pil, (x, y))
+                large = large.rotate(-applied_angle, resample=Image.Resampling.BICUBIC, expand=False)
+                cx = (large_w - width) // 2
+                cy = (large_h - height) // 2
+                tiled = large.crop((cx, cy, cx + width, cy + height))
+            else:
+                tiled = Image.new("RGB", (width, height))
+                for y in range(0, height, tex_h):
+                    for x in range(0, width, tex_w):
+                        tiled.paste(tex_pil, (x, y))
+
+        orig_u8 = np.array(orig_pil, dtype=np.uint8)
+
+        try:
+            if bool(getattr(payload, "clear_mask_before_apply", False)):
+                orig_candidate = None
+                if payload.original_filename:
+                    cand = UPLOAD_DIR / Path(payload.original_filename).name
+                    if cand.exists() and cand.is_file():
+                        orig_candidate = cand
+                    else:
+                        cand2 = OUTPUT_DIR / Path(payload.original_filename).name
+                        if cand2.exists() and cand2.is_file():
+                            orig_candidate = cand2
+                if orig_candidate is None:
+                    stem = Path(image_path).stem
+                    if "_edit_" in stem:
+                        base_name = stem.split("_edit_")[0] + ".jpg"
+                        cand = UPLOAD_DIR / base_name
+                        if cand.exists() and cand.is_file():
+                            orig_candidate = cand
+                        else:
+                            cand2 = OUTPUT_DIR / base_name
+                            if cand2.exists() and cand2.is_file():
+                                orig_candidate = cand2
+
+                if orig_candidate is not None:
+                    try:
+                        base_pil = Image.open(str(orig_candidate)).convert("RGB")
+                        if base_pil.size != (width, height):
+                            base_pil = base_pil.resize((width, height), Image.Resampling.LANCZOS)
+                        base_arr = np.array(base_pil, dtype=np.uint8)
+                        mask_bool = (binary_mask > 0)
+                        orig_u8[mask_bool] = base_arr[mask_bool]
+                        logger.info(f"[APPLY_TEXTURE] cleared mask from original source: {orig_candidate}")
+                    except Exception:
+                        logger.exception("Failed to restore original pixels for clear_mask_before_apply")
+        except Exception:
+            logger.exception("Error handling clear_mask_before_apply")
+
+        tiled_arr = np.array(tiled, dtype=np.uint8)
+
+        # Parchar píxeles muy oscuros (suma R+G+B < 20) dentro de la máscara.
+        # Cubren tanto negro exacto (0,0,0) como píxeles casi negros que el warp
+        # de perspectiva puede generar en bordes del quad o zonas sin cobertura.
+        mask_bool = binary_mask > 0
+        dark_in_mask = mask_bool & (tiled_arr.sum(axis=2) < 20)
+        if dark_in_mask.any():
+            th_f, tw_f = tex_pil.size[1], tex_pil.size[0]
+            tex_np = np.array(tex_pil, dtype=np.uint8)
+            ys_b, xs_b = np.where(dark_in_mask)
+            tiled_arr[ys_b, xs_b] = tex_np[ys_b % th_f, xs_b % tw_f]
+
+        lit_tex = apply_surface_lighting(
+            tiled_arr,
+            orig_u8,
+            binary_mask,
+            material,
+            lighting_mode,
+            light_angle_degrees,
+            light_intensity,
+        )
+
+        orig_arr = orig_u8.astype(np.float32)
+        tex_arr = lit_tex.astype(np.float32)
+
+        if replace_mode in {"hard", "absolute", "force", "replace"}:
+            mask_bool = (binary_mask > 0).astype(bool)
+            composite_arr = orig_arr.copy()
+            composite_arr[mask_bool] = tex_arr[mask_bool]
+            composite = np.clip(composite_arr, 0, 255).astype(np.uint8)
+        else:
+            feather_mask = build_feather_mask(binary_mask)
+            # All materials use shading-preservation so scene luminance (shadows/highlights)
+            # from the original photo is transferred onto the texture.
+            composite = blend_texture_preserve_shading(orig_arr, tex_arr, feather_mask, effective_alpha, material)
+
+        input_stem = Path(image_path).stem
+        edit_suffix = uuid.uuid4().hex[:8]
+        out_filename = f"{input_stem}_edit_{edit_suffix}.jpg"
+        out_path = UPLOAD_DIR / out_filename
+        Image.fromarray(composite).save(str(out_path), format="JPEG", quality=UPLOAD_JPEG_QUALITY, optimize=True)
+
+        try:
+            out_label_path = masks_dir / f"{Path(out_filename).stem}_labels.png"
+            if label_path.exists():
+                shutil.copyfile(str(label_path), str(out_label_path))
+        except Exception:
+            logger.exception("Failed to copy label map for output image")
+
+        return {
+            "message": "Texture applied successfully",
+            "original": safe_name,
+            "mask_indices": payload.mask_indices,
+            "texture_name": payload.texture_name,
+            "material": material,
+            "direction_mode": direction_mode,
+            "surface_type": surface_type,
+            "replace_mode": replace_mode,
+            "replace_strength": round(replace_strength, 3),
+            "lighting_mode": lighting_mode,
+            "light_angle_degrees": round(light_angle_degrees, 2),
+            "light_intensity": round(light_intensity, 3),
+            "blend_alpha": round(effective_alpha, 3),
+            "applied_angle_degrees": round(applied_angle, 2),
+            "output_filename": out_filename,
+            "output_url": f"/seg/image/{out_filename}",
+        }
+    finally:
+        log_timing_end(step, started)

backend/visualizador.html

@@ -1,125 +1,125 @@
-<!doctype html>
-<html lang="es">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Visualizador SaaS fasdfadsf</title>
-    <script
-      src="https://unpkg.com/react@18/umd/react.development.js"
-      crossorigin
-    ></script>
-    <script
-      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
-      crossorigin
-    ></script>
-    <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="bg-slate-100 text-slate-900">
-    <div
-      id="root"
-      class="min-h-screen flex items-center justify-center p-4"
-    ></div>
-
-    <script>
-      const { useState, useEffect } = React;
-
-      function App() {
-        const [cliente, setCliente] = useState(null);
-        const [error, setError] = useState(null);
-        const [apiKey, setApiKey] = useState(null);
-
-        useEffect(() => {
-          const params = new URLSearchParams(window.location.search);
-          const token = params.get("token");
-
-          if (!token) {
-            setError("No se encontró el parámetro 'token' en la URL.");
-            return;
-          }
-
-          const url = `/config?token=${encodeURIComponent(token)}`;
-
-          fetch(url)
-            .then((res) => {
-              if (!res.ok) {
-                throw new Error("Error al obtener configuración del cliente");
-              }
-              return res.json();
-            })
-            .then((data) => {
-              setApiKey(data.client_id);
-              setCliente(data);
-              return fetch("/session/start", {
-                method: "POST",
-                headers: {
-                  "Content-Type": "application/x-www-form-urlencoded",
-                },
-                body: `token=${encodeURIComponent(token)}`,
-              });
-            })
-            .catch((err) => setError(err.message));
-        }, []);
-
-        const enviarMensaje = () => {
-          if (!cliente) return;
-          window.parent.postMessage(
-            {
-              type: "saas-session-active",
-              nombreCliente: cliente.nombre,
-            },
-            "*",
-          );
-        };
-
-        return React.createElement(
-          "div",
-          {
-            className:
-              "w-full max-w-3xl bg-white rounded-3xl shadow-xl p-8 space-y-6 text-center",
-          },
-          React.createElement(
-            "h1",
-            { className: "text-3xl font-bold text-slate-900" },
-            "Panel de Control:",
-          ),
-          apiKey &&
-            React.createElement(
-              "p",
-              { className: "text-sm text-slate-500" },
-              `API key usada: ${apiKey}`,
-            ),
-          cliente
-            ? React.createElement(
-                "p",
-                { className: "text-xl text-slate-700" },
-                cliente.nombre,
-              )
-            : React.createElement(
-                "p",
-                { className: "text-xl text-slate-500" },
-                error || "Cargando datos...",
-              ),
-          React.createElement(
-            "button",
-            {
-              className:
-                "px-6 py-3 bg-blue-600 text-white rounded-xl shadow hover:bg-blue-700 transition",
-              onClick: enviarMensaje,
-              disabled: !cliente,
-            },
-            "Notificar al sitio padre",
-          ),
-          cliente &&
-            React.createElement(
-              "div",
-              { className: "mt-4 text-sm text-slate-500" },
-              `Color primario: ${cliente.color_primario}`,
-            ),
-        );
-      }
-
-      const root = ReactDOM.createRoot(document.getElementById("root"));
-      root.render(React.createElement(App));
-    </script>
-  </body>
-</html>
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Visualizador SaaS fasdfadsf</title>
+    <script
+      src="https://unpkg.com/react@18/umd/react.development.js"
+      crossorigin
+    ></script>
+    <script
+      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
+      crossorigin
+    ></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-slate-100 text-slate-900">
+    <div
+      id="root"
+      class="min-h-screen flex items-center justify-center p-4"
+    ></div>
+
+    <script>
+      const { useState, useEffect } = React;
+
+      function App() {
+        const [cliente, setCliente] = useState(null);
+        const [error, setError] = useState(null);
+        const [apiKey, setApiKey] = useState(null);
+
+        useEffect(() => {
+          const params = new URLSearchParams(window.location.search);
+          const token = params.get("token");
+
+          if (!token) {
+            setError("No se encontró el parámetro 'token' en la URL.");
+            return;
+          }
+
+          const url = `/config?token=${encodeURIComponent(token)}`;
+
+          fetch(url)
+            .then((res) => {
+              if (!res.ok) {
+                throw new Error("Error al obtener configuración del cliente");
+              }
+              return res.json();
+            })
+            .then((data) => {
+              setApiKey(data.client_id);
+              setCliente(data);
+              return fetch("/session/start", {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/x-www-form-urlencoded",
+                },
+                body: `token=${encodeURIComponent(token)}`,
+              });
+            })
+            .catch((err) => setError(err.message));
+        }, []);
+
+        const enviarMensaje = () => {
+          if (!cliente) return;
+          window.parent.postMessage(
+            {
+              type: "saas-session-active",
+              nombreCliente: cliente.nombre,
+            },
+            "*",
+          );
+        };
+
+        return React.createElement(
+          "div",
+          {
+            className:
+              "w-full max-w-3xl bg-white rounded-3xl shadow-xl p-8 space-y-6 text-center",
+          },
+          React.createElement(
+            "h1",
+            { className: "text-3xl font-bold text-slate-900" },
+            "Panel de Control:",
+          ),
+          apiKey &&
+            React.createElement(
+              "p",
+              { className: "text-sm text-slate-500" },
+              `API key usada: ${apiKey}`,
+            ),
+          cliente
+            ? React.createElement(
+                "p",
+                { className: "text-xl text-slate-700" },
+                cliente.nombre,
+              )
+            : React.createElement(
+                "p",
+                { className: "text-xl text-slate-500" },
+                error || "Cargando datos...",
+              ),
+          React.createElement(
+            "button",
+            {
+              className:
+                "px-6 py-3 bg-blue-600 text-white rounded-xl shadow hover:bg-blue-700 transition",
+              onClick: enviarMensaje,
+              disabled: !cliente,
+            },
+            "Notificar al sitio padre",
+          ),
+          cliente &&
+            React.createElement(
+              "div",
+              { className: "mt-4 text-sm text-slate-500" },
+              `Color primario: ${cliente.color_primario}`,
+            ),
+        );
+      }
+
+      const root = ReactDOM.createRoot(document.getElementById("root"));
+      root.render(React.createElement(App));
+    </script>
+  </body>
+</html>

frontend/.gitignore

@@ -1,24 +1,24 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/FRONTEND_DOCUMENTATION.md

@@ -1,250 +1,250 @@
-# Documentación del Frontend
-
-Este documento describe la arquitectura, las rutas, los estados, los hooks y los componentes principales del frontend React + TypeScript ubicado en `frontend/`.
-
----
-
-## 1. Visión general
-
-El frontend está construido con:
-
-- React 19
-- TypeScript
-- Vite
-- React Router DOM
-- Zustand para estado global
-- @tanstack/react-query para consultas asíncronas
-- Tailwind CSS para estilos
-- Arquitectura basada en características (`features`)
-
-La carpeta principal de la aplicación es `frontend/src`.
-
----
-
-## 2. Estructura de carpetas clave
-
-- `src/main.tsx` - punto de entrada, configuración de router y React Query
-- `src/App.tsx` - rutas principales de la aplicación
-- `src/store` - estado global con Zustand
-- `src/api` - cliente y funciones de API centralizadas
-- `src/hooks` - hooks reutilizables del frontend
-- `src/features` - features organizadas por dominio
-- `src/utils` - utilidades compartidas
-- `src/types.ts` - tipos globales de la aplicación
-
----
-
-## 3. Rutas principales
-
-`src/App.tsx` define las rutas:
-
-- `/` → `RoomSetup`
-- `/visualizer` → `RoomVisualizer`
-- `/settings` → `SettingsPage`
-- `*` → redirección a `/`
-
----
-
-## 4. Estado global (Zustand)
-
-`src/store/useAppStore.ts` almacena:
-
-- `previewImage` - URL de la imagen cargada
-- `uploadMessage` - estado de mensaje de subida
-- `openProductId` - producto seleccionado en `RoomVisualizer`
-- `viewMode` - vista actual de productos en el visualizador (`grid` o `list`)
-
-Funciones disponibles:
-
-- `setPreviewImage`
-- `setUploadMessage`
-- `setOpenProductId`
-- `setViewMode`
-- `reset`
-
----
-
-## 5. Cliente API centralizado
-
-`src/api/client.ts` incluye:
-
-- `DEV_API_BASE` y `API_BASE` para la URL del backend
-- `getApiBase` / `buildApiUrl` para construir endpoints
-- `fetchClientConfig` para obtener configuración de cliente
-- `uploadRoomImage` para subir imágenes al servidor
-- `startSession` para iniciar una sesión remota
-
-Esta capa permite mantener la URL del backend en un solo lugar y soportar un token de desarrollo automático.
-
----
-
-## 6. Hooks compartidos
-
-### `src/hooks/useUploadImage.ts`
-
-- Maneja la subida de imágenes al backend
-- Controla `isUploading` y `uploadError`
-- Envuelve `uploadRoomImage` del cliente API
-
----
-
-## 7. Tipos globales
-
-`src/types.ts` declara tipos comunes como:
-
-- `ClientData`
-- `RouteItem`
-- `Product`
-
-El tipo `Product` se usa en el visualizador para productos de catálogo.
-
----
-
-## 8. Feature: Room Setup
-
-### Archivos
-
-- `src/features/roomSetup/RoomSetup.tsx`
-- `src/features/roomSetup/roomSetupHooks.ts`
-- `src/features/roomSetup/RoomSetupComponents.tsx`
-- `src/data/roomSetupData.ts`
-
-### Comportamiento
-
-`RoomSetup` es la página principal donde el usuario puede:
-
-- subir una imagen arrastrando o seleccionando archivo
-- ver una vista previa de la imagen
-- iniciar la navegación hacia el visualizador
-- ver habitaciones de demostración filtrables
-
-### `useRoomSetup`
-
-Este hook abstrae toda la lógica de:
-
-- drag & drop
-- selección de archivos
-- subida de imagen
-- gestión de estados de carga
-- navegación con `useNavigate`
-
-### Componentes auxiliares
-
-- `FilterButton` - botón de filtrado por categoría
-- `RoomCard` - tarjeta de habitación de demostración
-
----
-
-## 9. Feature: Room Visualizer
-
-### Archivos
-
-- `src/features/roomVisualizer/RoomVisualizer.tsx`
-- `src/features/roomVisualizer/roomVisualizerHooks.ts`
-- `src/features/roomVisualizer/roomVisualizerData.ts`
-- `src/features/roomVisualizer/ProductCards.tsx`
-
-### Comportamiento
-
-`RoomVisualizer` muestra:
-
-- la imagen subida por el usuario
-- controles de zoom y arrastre de la imagen
-- lista / grid de productos para aplicar en la habitación
-- selección de producto y detalles asociados
-
-### `useRoomVisualizer`
-
-Extrae la lógica de visualización de productos:
-
-- modo de vista (`grid` / `list`)
-- búsqueda y filtros básicos
-- producto seleccionado
-- manejo de selección de producto
-- agrupación en chunks para renderizar grillas
-
-### Datos de productos
-
-- `roomVisualizerData.ts` contiene el catálogo de productos estáticos usados en la vista.
-
-### Componentes
-
-- `ProductGroupCard` - renderiza un grupo de 3 productos en grid
-- `IndividualProductCard` - renderiza un producto en modo lista
-
----
-
-## 10. Feature: Settings
-
-### Archivo
-
-- `src/features/settings/SettingsPage.tsx`
-
-### Comportamiento
-
-La página de configuración permite al usuario:
-
-- definir la URL base de la API
-- activar / desactivar la lista de rutas en el viewer
-- definir token de desarrollo automático
-
-### Soporte de almacenamiento
-
-`src/utils/settings.ts` gestiona:
-
-- carga de `localStorage`
-- guardado de configuración
-- valores por defecto
-
----
-
-## 11. Componentes comunes
-
-- `src/components/ui/LoadingScreen.tsx` - pantalla de carga reutilizable
-
----
-
-## 12. Flujo principal de la app
-
-1. Usuario entra en `/`
-2. Sube una imagen en `RoomSetup`
-3. Se crea una vista previa y se almacena en Zustand
-4. Se navega a `/visualizer`
-5. `RoomVisualizer` usa la imagen y muestra productos
-6. El usuario filtra, busca y selecciona productos
-7. `SettingsPage` permite ajustar la API y opciones de la app
-
----
-
-## 13. Cómo ejecutar el frontend
-
-Desde `frontend/`:
-
-```bash
-npm install
-npm run dev
-```
-
-Construcción de producción:
-
-```bash
-npm run build
-```
-
----
-
-## 14. Posibles mejoras futuras
-
-- mover `roomVisualizerProducts` a una API real o servicio de datos
-- extraer más componentes presentacionales del visualizador
-- usar React Query para cargar configuración del cliente en lugar de gestión manual
-- añadir tests unitarios para hooks y componentes
-- normalizar rutas y nombres de features
-
----
-
-## 15. Observaciones adicionales
-
-- La base API se controla desde `VITE_API_BASE_URL` o `DEV_API_BASE` en desarrollo.
-- La aplicación usa `queryClient` de React Query, aunque hoy solo se usa para potenciales fetches futuros.
-- El estado global es ligero y se usa principalmente para compartir imagen previa, modo de vista y selección de producto.
+# Documentación del Frontend
+
+Este documento describe la arquitectura, las rutas, los estados, los hooks y los componentes principales del frontend React + TypeScript ubicado en `frontend/`.
+
+---
+
+## 1. Visión general
+
+El frontend está construido con:
+
+- React 19
+- TypeScript
+- Vite
+- React Router DOM
+- Zustand para estado global
+- @tanstack/react-query para consultas asíncronas
+- Tailwind CSS para estilos
+- Arquitectura basada en características (`features`)
+
+La carpeta principal de la aplicación es `frontend/src`.
+
+---
+
+## 2. Estructura de carpetas clave
+
+- `src/main.tsx` - punto de entrada, configuración de router y React Query
+- `src/App.tsx` - rutas principales de la aplicación
+- `src/store` - estado global con Zustand
+- `src/api` - cliente y funciones de API centralizadas
+- `src/hooks` - hooks reutilizables del frontend
+- `src/features` - features organizadas por dominio
+- `src/utils` - utilidades compartidas
+- `src/types.ts` - tipos globales de la aplicación
+
+---
+
+## 3. Rutas principales
+
+`src/App.tsx` define las rutas:
+
+- `/` → `RoomSetup`
+- `/visualizer` → `RoomVisualizer`
+- `/settings` → `SettingsPage`
+- `*` → redirección a `/`
+
+---
+
+## 4. Estado global (Zustand)
+
+`src/store/useAppStore.ts` almacena:
+
+- `previewImage` - URL de la imagen cargada
+- `uploadMessage` - estado de mensaje de subida
+- `openProductId` - producto seleccionado en `RoomVisualizer`
+- `viewMode` - vista actual de productos en el visualizador (`grid` o `list`)
+
+Funciones disponibles:
+
+- `setPreviewImage`
+- `setUploadMessage`
+- `setOpenProductId`
+- `setViewMode`
+- `reset`
+
+---
+
+## 5. Cliente API centralizado
+
+`src/api/client.ts` incluye:
+
+- `DEV_API_BASE` y `API_BASE` para la URL del backend
+- `getApiBase` / `buildApiUrl` para construir endpoints
+- `fetchClientConfig` para obtener configuración de cliente
+- `uploadRoomImage` para subir imágenes al servidor
+- `startSession` para iniciar una sesión remota
+
+Esta capa permite mantener la URL del backend en un solo lugar y soportar un token de desarrollo automático.
+
+---
+
+## 6. Hooks compartidos
+
+### `src/hooks/useUploadImage.ts`
+
+- Maneja la subida de imágenes al backend
+- Controla `isUploading` y `uploadError`
+- Envuelve `uploadRoomImage` del cliente API
+
+---
+
+## 7. Tipos globales
+
+`src/types.ts` declara tipos comunes como:
+
+- `ClientData`
+- `RouteItem`
+- `Product`
+
+El tipo `Product` se usa en el visualizador para productos de catálogo.
+
+---
+
+## 8. Feature: Room Setup
+
+### Archivos
+
+- `src/features/roomSetup/RoomSetup.tsx`
+- `src/features/roomSetup/roomSetupHooks.ts`
+- `src/features/roomSetup/RoomSetupComponents.tsx`
+- `src/data/roomSetupData.ts`
+
+### Comportamiento
+
+`RoomSetup` es la página principal donde el usuario puede:
+
+- subir una imagen arrastrando o seleccionando archivo
+- ver una vista previa de la imagen
+- iniciar la navegación hacia el visualizador
+- ver habitaciones de demostración filtrables
+
+### `useRoomSetup`
+
+Este hook abstrae toda la lógica de:
+
+- drag & drop
+- selección de archivos
+- subida de imagen
+- gestión de estados de carga
+- navegación con `useNavigate`
+
+### Componentes auxiliares
+
+- `FilterButton` - botón de filtrado por categoría
+- `RoomCard` - tarjeta de habitación de demostración
+
+---
+
+## 9. Feature: Room Visualizer
+
+### Archivos
+
+- `src/features/roomVisualizer/RoomVisualizer.tsx`
+- `src/features/roomVisualizer/roomVisualizerHooks.ts`
+- `src/features/roomVisualizer/roomVisualizerData.ts`
+- `src/features/roomVisualizer/ProductCards.tsx`
+
+### Comportamiento
+
+`RoomVisualizer` muestra:
+
+- la imagen subida por el usuario
+- controles de zoom y arrastre de la imagen
+- lista / grid de productos para aplicar en la habitación
+- selección de producto y detalles asociados
+
+### `useRoomVisualizer`
+
+Extrae la lógica de visualización de productos:
+
+- modo de vista (`grid` / `list`)
+- búsqueda y filtros básicos
+- producto seleccionado
+- manejo de selección de producto
+- agrupación en chunks para renderizar grillas
+
+### Datos de productos
+
+- `roomVisualizerData.ts` contiene el catálogo de productos estáticos usados en la vista.
+
+### Componentes
+
+- `ProductGroupCard` - renderiza un grupo de 3 productos en grid
+- `IndividualProductCard` - renderiza un producto en modo lista
+
+---
+
+## 10. Feature: Settings
+
+### Archivo
+
+- `src/features/settings/SettingsPage.tsx`
+
+### Comportamiento
+
+La página de configuración permite al usuario:
+
+- definir la URL base de la API
+- activar / desactivar la lista de rutas en el viewer
+- definir token de desarrollo automático
+
+### Soporte de almacenamiento
+
+`src/utils/settings.ts` gestiona:
+
+- carga de `localStorage`
+- guardado de configuración
+- valores por defecto
+
+---
+
+## 11. Componentes comunes
+
+- `src/components/ui/LoadingScreen.tsx` - pantalla de carga reutilizable
+
+---
+
+## 12. Flujo principal de la app
+
+1. Usuario entra en `/`
+2. Sube una imagen en `RoomSetup`
+3. Se crea una vista previa y se almacena en Zustand
+4. Se navega a `/visualizer`
+5. `RoomVisualizer` usa la imagen y muestra productos
+6. El usuario filtra, busca y selecciona productos
+7. `SettingsPage` permite ajustar la API y opciones de la app
+
+---
+
+## 13. Cómo ejecutar el frontend
+
+Desde `frontend/`:
+
+```bash
+npm install
+npm run dev
+```
+
+Construcción de producción:
+
+```bash
+npm run build
+```
+
+---
+
+## 14. Posibles mejoras futuras
+
+- mover `roomVisualizerProducts` a una API real o servicio de datos
+- extraer más componentes presentacionales del visualizador
+- usar React Query para cargar configuración del cliente en lugar de gestión manual
+- añadir tests unitarios para hooks y componentes
+- normalizar rutas y nombres de features
+
+---
+
+## 15. Observaciones adicionales
+
+- La base API se controla desde `VITE_API_BASE_URL` o `DEV_API_BASE` en desarrollo.
+- La aplicación usa `queryClient` de React Query, aunque hoy solo se usa para potenciales fetches futuros.
+- El estado global es ligero y se usa principalmente para compartir imagen previa, modo de vista y selección de producto.

frontend/README.md

@@ -1,73 +1,73 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

frontend/eslint.config.js

@@ -1,23 +1,23 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

@@ -1,35 +1,28 @@
-<!doctype html>
-<html lang="es">
-  <head>
-    <meta charset="UTF-8" />
-
-    <!-- Viewport: viewport-fit=cover extiende hasta los bordes en dispositivos con notch -->
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-    />
-
-    <!-- PWA -->
-    <link rel="manifest" href="/manifest.json" />
-    <meta name="theme-color" content="#0047AB" />
-
-    <!-- iOS PWA: fullscreen al instalarse desde Safari -->
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta
-      name="apple-mobile-web-app-status-bar-style"
-      content="black-translucent"
-    />
-    <meta name="apple-mobile-web-app-title" content="Hyper Reality" />
-    <link rel="apple-touch-icon" href="/favicon.svg" />
-
-    <!-- Icono -->
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-
-    <title>Hyper Reality Visualizer</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+
+    <!-- Viewport: viewport-fit=cover extiende hasta los bordes en dispositivos con notch -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+
+    <!-- PWA -->
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#0047AB" />
+
+    <!-- iOS PWA: fullscreen al instalarse desde Safari -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="Hyper Reality" />
+    <link rel="apple-touch-icon" href="/favicon.svg" />
+
+    <!-- Icono -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <title>Hyper Reality Visualizer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -1,47 +1,47 @@
-{
-  "name": "frontend",
-  "private": true,
-  "version": "0.1.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "build:app": "npm run build",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "generate:version": "node ./scripts/generate-version.js",
-    "predev": "npm run generate:version",
-    "prebuild": "npm run generate:version",
-    "version:patch": "npm version patch --no-git-tag-version",
-    "version:minor": "npm version minor --no-git-tag-version",
-    "version:major": "npm version major --no-git-tag-version"
-  },
-  "dependencies": {
-    "@tanstack/react-query": "^5.99.2",
-    "@tanstack/react-query-devtools": "^5.99.2",
-    "lucide-react": "^1.8.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-router-dom": "^7.14.2",
-    "react-share": "^5.3.0",
-    "sweetalert2": "^11.26.24",
-    "zustand": "^5.0.12"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.4",
-    "@types/node": "^24.12.2",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^9.39.4",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.5.0",
-    "postcss": "^8.5.10",
-    "tailwindcss": "^3.4.5",
-    "typescript": "~6.0.2",
-    "typescript-eslint": "^8.58.2",
-    "vite": "^8.0.9"
-  }
-}
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:app": "npm run build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "generate:version": "node ./scripts/generate-version.js",
+    "predev": "npm run generate:version",
+    "prebuild": "npm run generate:version",
+    "version:patch": "npm version patch --no-git-tag-version",
+    "version:minor": "npm version minor --no-git-tag-version",
+    "version:major": "npm version major --no-git-tag-version"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.99.2",
+    "@tanstack/react-query-devtools": "^5.99.2",
+    "lucide-react": "^1.8.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "react-share": "^5.3.0",
+    "sweetalert2": "^11.26.24",
+    "zustand": "^5.0.12"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^24.12.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.5.0",
+    "postcss": "^8.5.10",
+    "tailwindcss": "^3.4.5",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.9"
+  }
+}

frontend/postcss.config.js

@@ -1,6 +1,6 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/rewrite_css.py

@@ -1,509 +1,509 @@
-from pathlib import Path
-
-app_css = '''
-:root {
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  color: #111827;
-  background: #f8fafc;
-  line-height: 1.5;
-}
-
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-html, body, #root {
-  min-height: 100%;
-}
-
-body {
-  margin: 0;
-  background: #f8fafc;
-  color: #111827;
-}
-
-button, input, select, textarea {
-  font: inherit;
-}
-
-button {
-  cursor: pointer;
-}
-
-.app-shell {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 24px;
-}
-
-.topbar {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  gap: 16px;
-  padding: 22px 24px;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 18px;
-}
-
-.topbar h1 {
-  margin: 0;
-  font-size: clamp(1.9rem, 2.5vw, 2.6rem);
-}
-
-.topbar p {
-  margin: 6px 0 0;
-  color: #475569;
-}
-
-.topbar-nav {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.topbar-nav a {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 14px;
-  border-radius: 14px;
-  background: #f8fafc;
-  color: #334155;
-  text-decoration: none;
-  border: 1px solid transparent;
-  transition: background 0.2s ease, border-color 0.2s ease;
-}
-
-.topbar-nav a:hover {
-  background: #ffffff;
-  border-color: #d1d5db;
-}
-
-.content-viewer {
-  margin-top: 24px;
-}
-
-.route-index,
-.panel,
-.viewer-panel,
-.bridge-panel,
-.room-setup-dropzone,
-.room-setup-card,
-.room-setup-preview {
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 20px;
-}
-
-.route-index,
-.panel,
-.viewer-panel,
-.bridge-panel,
-.room-setup-card {
-  padding: 22px;
-}
-
-.route-index h2,
-.panel h2,
-.viewer-panel h2,
-.room-setup-copy h1,
-.room-setup-bottom h2 {
-  margin: 0 0 16px;
-}
-
-.route-index p,
-.room-setup-features li,
-.room-setup-drop-content p,
-.room-setup-drop-content small,
-.room-setup-card h3,
-.topbar p,
-.error-box,
-.empty-state {
-  color: #475569;
-}
-
-.route-index ul,
-.room-setup-features,
-.room-setup-filters,
-.room-setup-grid {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.route-index ul {
-  display: grid;
-  gap: 12px;
-}
-
-.form-row {
-  display: grid;
-  gap: 14px;
-  margin-bottom: 20px;
-}
-
-label {
-  font-size: 0.95rem;
-  color: #334155;
-}
-
-input,
-select,
-textarea {
-  width: 100%;
-  padding: 14px 16px;
-  border-radius: 14px;
-  border: 1px solid #d1d5db;
-  background: #f8fafc;
-  color: #111827;
-}
-
-input:focus,
-select:focus,
-textarea:focus {
-  outline: 2px solid #cbd5e1;
-  outline-offset: 2px;
-}
-
-.button,
-.button-primary,
-.button-secondary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  border-radius: 16px;
-  padding: 14px 18px;
-  font-weight: 700;
-  border: 1px solid transparent;
-  transition: all 0.2s ease;
-}
-
-.button {
-  background: #111827;
-  color: #ffffff;
-}
-
-.button:hover {
-  opacity: 0.95;
-}
-
-.button.secondary,
-.button-secondary {
-  background: #f3f4f6;
-  color: #111827;
-  border-color: #d1d5db;
-}
-
-.error-box {
-  margin-top: 16px;
-  padding: 16px;
-  border-radius: 16px;
-  background: #fef2f2;
-  color: #991b1b;
-  border: 1px solid #fecaca;
-}
-
-.empty-state {
-  min-height: 220px;
-  display: grid;
-  place-content: center;
-  border: 1px dashed #d1d5db;
-  border-radius: 18px;
-}
-
-.room-setup {
-  background: #f8fafc;
-}
-
-.room-setup-inner {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 32px 24px;
-}
-
-.room-setup-header {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 24px;
-}
-
-.room-setup-close {
-  border: none;
-  background: transparent;
-  color: #475569;
-  padding: 10px;
-  border-radius: 999px;
-  cursor: pointer;
-}
-
-.room-setup-close:hover {
-  background: #e5e7eb;
-}
-
-.room-setup-top {
-  display: grid;
-  gap: 24px;
-  grid-template-columns: 1.1fr 0.9fr;
-  margin-bottom: 40px;
-}
-
-.room-setup-copy h1 {
-  margin: 0 0 24px;
-  font-size: clamp(2rem, 2.5vw, 3rem);
-  color: #111827;
-}
-
-.room-setup-features {
-  display: grid;
-  gap: 16px;
-}
-
-.room-setup-features li {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  color: #475569;
-}
-
-.room-setup-actions {
-  display: grid;
-  gap: 16px;
-}
-
-.button-primary {
-  background: #111827;
-  color: #ffffff;
-}
-
-.button-primary:hover {
-  opacity: 0.95;
-}
-
-.button-secondary {
-  background: #ffffff;
-  color: #334155;
-  border-color: #d1d5db;
-}
-
-.button-secondary:hover {
-  background: #f3f4f6;
-}
-
-.button-icon-border {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 10px;
-  border: 1px solid #d1d5db;
-}
-
-.room-setup-dropzone {
-  position: relative;
-  min-height: 420px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-  padding: 24px;
-  border: 1px dashed #d1d5db;
-  border-radius: 28px;
-}
-
-.room-setup-dropzone.dragging {
-  background: #f3f4f6;
-}
-
-.room-setup-file-input {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.room-setup-drop-content {
-  text-align: center;
-}
-
-.room-setup-drop-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 72px;
-  height: 72px;
-  border-radius: 999px;
-  background: #e2e8f0;
-  color: #64748b;
-  margin-bottom: 18px;
-}
-
-.room-setup-drop-icon.active {
-  background: #dbeafe;
-  color: #1e293b;
-}
-
-.room-setup-drop-content h3 {
-  margin: 0 0 8px;
-  font-size: 1.2rem;
-}
-
-.room-setup-drop-content p,
-.room-setup-drop-content small {
-  margin: 0;
-  color: #64748b;
-}
-
-.room-setup-preview {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.room-setup-preview img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.room-setup-preview-overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(255, 255, 255, 0.85);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.room-setup-preview:hover .room-setup-preview-overlay {
-  opacity: 1;
-}
-
-.button-delete {
-  background: #ffffff;
-  color: #111827;
-  padding: 12px 16px;
-  border-radius: 14px;
-  font-weight: 600;
-  border: 1px solid #d1d5db;
-}
-
-.room-setup-bottom h2 {
-  margin: 0 0 24px;
-}
-
-.room-setup-filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-bottom: 24px;
-}
-
-.room-setup-filter {
-  border: 1px solid #d1d5db;
-  background: #ffffff;
-  color: #334155;
-  padding: 10px 16px;
-  border-radius: 16px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.room-setup-filter.active {
-  background: #f3f4f6;
-}
-
-.room-setup-grid {
-  display: grid;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: 20px;
-}
-
-.room-setup-card {
-  overflow: hidden;
-  border-radius: 24px;
-  background: #ffffff;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
-}
-
-.room-setup-card-image {
-  position: relative;
-  aspect-ratio: 4 / 3;
-  overflow: hidden;
-}
-
-.room-setup-card-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.4s ease;
-}
-
-.room-setup-card:hover .room-setup-card-image img {
-  transform: scale(1.04);
-}
-
-.room-setup-card h3 {
-  margin: 16px;
-  font-size: 1rem;
-  color: #334155;
-}
-
-.app-version-badge {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  padding: 10px 14px;
-  border-radius: 12px 0 0 0;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid #e5e7eb;
-  color: #475569;
-  font-size: 0.8rem;
-  z-index: 1000;
-}
-
-.app-version-badge span {
-  display: block;
-  font-weight: 700;
-  color: #111827;
-}
-
-.app-version-badge small {
-  display: block;
-  margin-top: 2px;
-}
-
-@media (max-width: 960px) {
-  .room-setup-top {
-    grid-template-columns: 1fr;
-  }
-
-  .room-setup-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 640px) {
-  .room-setup-inner {
-    padding: 20px 16px;
-  }
-
-  .room-setup-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 900px) {
-  .content {
-    grid-template-columns: 1fr;
-  }
-}
+from pathlib import Path
+
+app_css = '''
+:root {
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #111827;
+  background: #f8fafc;
+  line-height: 1.5;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  background: #f8fafc;
+  color: #111827;
+}
+
+button, input, select, textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+.app-shell {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.topbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  padding: 22px 24px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 18px;
+}
+
+.topbar h1 {
+  margin: 0;
+  font-size: clamp(1.9rem, 2.5vw, 2.6rem);
+}
+
+.topbar p {
+  margin: 6px 0 0;
+  color: #475569;
+}
+
+.topbar-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.topbar-nav a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 14px;
+  border-radius: 14px;
+  background: #f8fafc;
+  color: #334155;
+  text-decoration: none;
+  border: 1px solid transparent;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.topbar-nav a:hover {
+  background: #ffffff;
+  border-color: #d1d5db;
+}
+
+.content-viewer {
+  margin-top: 24px;
+}
+
+.route-index,
+.panel,
+.viewer-panel,
+.bridge-panel,
+.room-setup-dropzone,
+.room-setup-card,
+.room-setup-preview {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 20px;
+}
+
+.route-index,
+.panel,
+.viewer-panel,
+.bridge-panel,
+.room-setup-card {
+  padding: 22px;
+}
+
+.route-index h2,
+.panel h2,
+.viewer-panel h2,
+.room-setup-copy h1,
+.room-setup-bottom h2 {
+  margin: 0 0 16px;
+}
+
+.route-index p,
+.room-setup-features li,
+.room-setup-drop-content p,
+.room-setup-drop-content small,
+.room-setup-card h3,
+.topbar p,
+.error-box,
+.empty-state {
+  color: #475569;
+}
+
+.route-index ul,
+.room-setup-features,
+.room-setup-filters,
+.room-setup-grid {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.route-index ul {
+  display: grid;
+  gap: 12px;
+}
+
+.form-row {
+  display: grid;
+  gap: 14px;
+  margin-bottom: 20px;
+}
+
+label {
+  font-size: 0.95rem;
+  color: #334155;
+}
+
+input,
+select,
+textarea {
+  width: 100%;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid #d1d5db;
+  background: #f8fafc;
+  color: #111827;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: 2px solid #cbd5e1;
+  outline-offset: 2px;
+}
+
+.button,
+.button-primary,
+.button-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  border-radius: 16px;
+  padding: 14px 18px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.button {
+  background: #111827;
+  color: #ffffff;
+}
+
+.button:hover {
+  opacity: 0.95;
+}
+
+.button.secondary,
+.button-secondary {
+  background: #f3f4f6;
+  color: #111827;
+  border-color: #d1d5db;
+}
+
+.error-box {
+  margin-top: 16px;
+  padding: 16px;
+  border-radius: 16px;
+  background: #fef2f2;
+  color: #991b1b;
+  border: 1px solid #fecaca;
+}
+
+.empty-state {
+  min-height: 220px;
+  display: grid;
+  place-content: center;
+  border: 1px dashed #d1d5db;
+  border-radius: 18px;
+}
+
+.room-setup {
+  background: #f8fafc;
+}
+
+.room-setup-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 32px 24px;
+}
+
+.room-setup-header {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 24px;
+}
+
+.room-setup-close {
+  border: none;
+  background: transparent;
+  color: #475569;
+  padding: 10px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.room-setup-close:hover {
+  background: #e5e7eb;
+}
+
+.room-setup-top {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: 1.1fr 0.9fr;
+  margin-bottom: 40px;
+}
+
+.room-setup-copy h1 {
+  margin: 0 0 24px;
+  font-size: clamp(2rem, 2.5vw, 3rem);
+  color: #111827;
+}
+
+.room-setup-features {
+  display: grid;
+  gap: 16px;
+}
+
+.room-setup-features li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #475569;
+}
+
+.room-setup-actions {
+  display: grid;
+  gap: 16px;
+}
+
+.button-primary {
+  background: #111827;
+  color: #ffffff;
+}
+
+.button-primary:hover {
+  opacity: 0.95;
+}
+
+.button-secondary {
+  background: #ffffff;
+  color: #334155;
+  border-color: #d1d5db;
+}
+
+.button-secondary:hover {
+  background: #f3f4f6;
+}
+
+.button-icon-border {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+  border: 1px solid #d1d5db;
+}
+
+.room-setup-dropzone {
+  position: relative;
+  min-height: 420px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  padding: 24px;
+  border: 1px dashed #d1d5db;
+  border-radius: 28px;
+}
+
+.room-setup-dropzone.dragging {
+  background: #f3f4f6;
+}
+
+.room-setup-file-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.room-setup-drop-content {
+  text-align: center;
+}
+
+.room-setup-drop-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  border-radius: 999px;
+  background: #e2e8f0;
+  color: #64748b;
+  margin-bottom: 18px;
+}
+
+.room-setup-drop-icon.active {
+  background: #dbeafe;
+  color: #1e293b;
+}
+
+.room-setup-drop-content h3 {
+  margin: 0 0 8px;
+  font-size: 1.2rem;
+}
+
+.room-setup-drop-content p,
+.room-setup-drop-content small {
+  margin: 0;
+  color: #64748b;
+}
+
+.room-setup-preview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.room-setup-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.room-setup-preview-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.room-setup-preview:hover .room-setup-preview-overlay {
+  opacity: 1;
+}
+
+.button-delete {
+  background: #ffffff;
+  color: #111827;
+  padding: 12px 16px;
+  border-radius: 14px;
+  font-weight: 600;
+  border: 1px solid #d1d5db;
+}
+
+.room-setup-bottom h2 {
+  margin: 0 0 24px;
+}
+
+.room-setup-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 24px;
+}
+
+.room-setup-filter {
+  border: 1px solid #d1d5db;
+  background: #ffffff;
+  color: #334155;
+  padding: 10px 16px;
+  border-radius: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.room-setup-filter.active {
+  background: #f3f4f6;
+}
+
+.room-setup-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 20px;
+}
+
+.room-setup-card {
+  overflow: hidden;
+  border-radius: 24px;
+  background: #ffffff;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
+}
+
+.room-setup-card-image {
+  position: relative;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+}
+
+.room-setup-card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.4s ease;
+}
+
+.room-setup-card:hover .room-setup-card-image img {
+  transform: scale(1.04);
+}
+
+.room-setup-card h3 {
+  margin: 16px;
+  font-size: 1rem;
+  color: #334155;
+}
+
+.app-version-badge {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  padding: 10px 14px;
+  border-radius: 12px 0 0 0;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid #e5e7eb;
+  color: #475569;
+  font-size: 0.8rem;
+  z-index: 1000;
+}
+
+.app-version-badge span {
+  display: block;
+  font-weight: 700;
+  color: #111827;
+}
+
+.app-version-badge small {
+  display: block;
+  margin-top: 2px;
+}
+
+@media (max-width: 960px) {
+  .room-setup-top {
+    grid-template-columns: 1fr;
+  }
+
+  .room-setup-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .room-setup-inner {
+    padding: 20px 16px;
+  }
+
+  .room-setup-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 900px) {
+  .content {
+    grid-template-columns: 1fr;
+  }
+}
 '@; Set-Content -Path '.\src\App.css' -Value $content"

frontend/scripts/generate-version.js

@@ -1,19 +1,19 @@
-import { readFileSync, writeFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const root = dirname(fileURLToPath(import.meta.url));
-const frontendRoot = join(root, "..");
-const pkg = JSON.parse(
-  readFileSync(join(frontendRoot, "package.json"), "utf8"),
-);
-const version = pkg.version || "0.0.0";
-const timestamp = new Date()
-  .toISOString()
-  .replace(/[-:]/g, "")
-  .replace(/\.\d+Z$/, "");
-const fullVersion = `${version}-dev.${timestamp}`;
-const content = `export const appVersion = ${JSON.stringify(fullVersion)};\n`;
-
-writeFileSync(join(frontendRoot, "src", "version.ts"), content, "utf8");
-console.log(`Generated version: ${fullVersion}`);
+import { readFileSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = dirname(fileURLToPath(import.meta.url));
+const frontendRoot = join(root, "..");
+const pkg = JSON.parse(
+  readFileSync(join(frontendRoot, "package.json"), "utf8"),
+);
+const version = pkg.version || "0.0.0";
+const timestamp = new Date()
+  .toISOString()
+  .replace(/[-:]/g, "")
+  .replace(/\.\d+Z$/, "");
+const fullVersion = `${version}-dev.${timestamp}`;
+const content = `export const appVersion = ${JSON.stringify(fullVersion)};\n`;
+
+writeFileSync(join(frontendRoot, "src", "version.ts"), content, "utf8");
+console.log(`Generated version: ${fullVersion}`);

frontend/src/App.css

@@ -1,542 +1,542 @@
-:root {
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
-  color: var(--brand-black);
-  background: var(--brand-light);
-  line-height: 1.5;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body,
-#root {
-  min-height: 100%;
-}
-
-body {
-  margin: 0;
-  background: var(--brand-light);
-  color: var(--brand-black);
-}
-
-button,
-input,
-select,
-textarea {
-  font: inherit;
-}
-
-button {
-  cursor: pointer;
-}
-
-.app-shell {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 24px;
-}
-
-.topbar {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  gap: 16px;
-  padding: 22px 24px;
-  background: var(--brand-surface);
-  border: 1px solid var(--brand-border);
-  border-radius: 18px;
-}
-
-.topbar h1 {
-  margin: 0;
-  font-size: clamp(1.9rem, 2.5vw, 2.6rem);
-}
-
-.topbar p {
-  margin: 6px 0 0;
-  color: var(--brand-gray);
-}
-
-.topbar-nav {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.topbar-nav a {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 14px;
-  border-radius: 14px;
-  background: var(--brand-surface);
-  color: var(--brand-black);
-  text-decoration: none;
-  border: 1px solid transparent;
-  transition:
-    background 0.2s ease,
-    border-color 0.2s ease;
-}
-
-.topbar-nav a:hover {
-  background: #ffffff;
-  border-color: #d1d5db;
-}
-
-.content {
-  display: grid;
-  gap: 24px;
-  grid-template-columns: 1.2fr 1.8fr;
-  margin-top: 24px;
-}
-
-.route-index,
-.panel,
-.viewer-panel,
-.bridge-panel,
-.room-setup-dropzone,
-.room-setup-card,
-.room-setup-preview {
-  background: var(--brand-surface);
-  border: 1px solid var(--brand-border);
-  border-radius: 20px;
-}
-
-.route-index,
-.panel,
-.viewer-panel,
-.bridge-panel,
-.room-setup-card {
-  padding: 22px;
-}
-
-.route-index h2,
-.panel h2,
-.viewer-panel h2,
-.room-setup-copy h1,
-.room-setup-bottom h2 {
-  margin: 0 0 16px;
-}
-
-.route-index p,
-.room-setup-features li,
-.room-setup-drop-content p,
-.room-setup-drop-content small,
-.room-setup-card h3,
-.topbar p,
-.error-box,
-.empty-state {
-  color: #475569;
-}
-
-.route-index ul,
-.room-setup-features,
-.room-setup-filters,
-.room-setup-grid {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.route-index ul {
-  display: grid;
-  gap: 12px;
-}
-
-.form-row {
-  display: grid;
-  gap: 14px;
-  margin-bottom: 20px;
-}
-
-label {
-  font-size: 0.95rem;
-  color: var(--brand-black);
-}
-
-input,
-select,
-textarea {
-  width: 100%;
-  padding: 14px 16px;
-  border-radius: 14px;
-  border: 1px solid #d1d5db;
-  background: #ffffff;
-  color: #111827;
-}
-
-input:focus,
-select:focus,
-textarea:focus {
-  outline: 2px solid var(--brand-blue);
-  outline-offset: 2px;
-}
-
-.button,
-.button-primary,
-.button-secondary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  border-radius: 16px;
-  padding: 14px 18px;
-  font-weight: 700;
-  border: 1px solid transparent;
-  transition: all 0.2s ease;
-}
-
-.button {
-  background: var(--brand-black);
-  color: var(--brand-surface);
-}
-
-.button:hover {
-  opacity: 0.95;
-}
-
-.button.secondary,
-.button-secondary {
-  background: var(--brand-surface);
-  color: var(--brand-black);
-  border-color: var(--brand-border);
-}
-
-.error-box {
-  margin-top: 16px;
-  padding: 16px;
-  border-radius: 16px;
-  background: #fef2f2;
-  color: #991b1b;
-  border: 1px solid #fecaca;
-}
-
-.empty-state {
-  min-height: 220px;
-  display: grid;
-  place-content: center;
-  border: 1px dashed #d1d5db;
-  border-radius: 18px;
-}
-
-.room-setup {
-  background: var(--brand-light);
-}
-
-.room-setup-inner {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 32px 24px;
-}
-
-.room-setup-header {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 24px;
-}
-
-.room-setup-close {
-  border: none;
-  background: transparent;
-  color: var(--brand-black);
-  padding: 10px;
-  border-radius: 999px;
-  cursor: pointer;
-}
-
-.room-setup-close:hover {
-  background: var(--brand-border);
-}
-
-.room-setup-top {
-  display: grid;
-  gap: 24px;
-  grid-template-columns: 1.1fr 0.9fr;
-  margin-bottom: 40px;
-}
-
-.room-setup-copy h1 {
-  margin: 0 0 24px;
-  font-size: clamp(2rem, 2.5vw, 3rem);
-  color: #111827;
-}
-
-.room-setup-features {
-  display: grid;
-  gap: 16px;
-}
-
-.room-setup-features li {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  color: #475569;
-}
-
-.room-setup-actions {
-  display: grid;
-  gap: 16px;
-}
-
-.button-primary {
-  background: #111827;
-  color: #ffffff;
-}
-
-.button-primary:hover {
-  opacity: 0.95;
-}
-
-.button-secondary {
-  background: #ffffff;
-  color: #334155;
-  border-color: #d1d5db;
-}
-
-.button-secondary:hover {
-  background: #f3f4f6;
-}
-
-.button-icon-border {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 10px;
-  border: 1px solid #d1d5db;
-}
-
-.room-setup-dropzone {
-  position: relative;
-  min-height: 420px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-  padding: 24px;
-  border: 1px dashed #d1d5db;
-  border-radius: 28px;
-}
-
-.room-setup-dropzone.dragging {
-  background: #f3f4f6;
-}
-
-.room-setup-file-input {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.room-setup-drop-content {
-  text-align: center;
-}
-
-.room-setup-drop-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 72px;
-  height: 72px;
-  border-radius: 999px;
-  background: #e2e8f0;
-  color: #64748b;
-  margin-bottom: 18px;
-}
-
-.room-setup-drop-icon.active {
-  background: #dbeafe;
-  color: #1e293b;
-}
-
-.room-setup-drop-content h3 {
-  margin: 0 0 8px;
-  font-size: 1.2rem;
-}
-
-.room-setup-drop-content p,
-.room-setup-drop-content small {
-  margin: 0;
-  color: #64748b;
-}
-
-.room-setup-preview {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.room-setup-preview img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.room-setup-preview-overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(255, 255, 255, 0.85);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.room-setup-preview:hover .room-setup-preview-overlay {
-  opacity: 1;
-}
-
-.button-delete {
-  background: #ffffff;
-  color: #111827;
-  padding: 12px 16px;
-  border-radius: 14px;
-  font-weight: 600;
-  border: 1px solid #d1d5db;
-}
-
-.room-setup-bottom h2 {
-  margin: 0 0 24px;
-}
-
-.room-setup-filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-bottom: 24px;
-}
-
-.room-setup-filter {
-  border: 1px solid #d1d5db;
-  background: #ffffff;
-  color: #334155;
-  padding: 10px 16px;
-  border-radius: 16px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.room-setup-filter.active {
-  background: #f3f4f6;
-}
-
-.room-setup-grid {
-  display: grid;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: 20px;
-}
-
-.room-setup-card {
-  overflow: hidden;
-  border-radius: 24px;
-  background: #ffffff;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
-}
-
-.room-setup-card-image {
-  position: relative;
-  aspect-ratio: 4 / 3;
-  overflow: hidden;
-}
-
-.room-setup-card-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.4s ease;
-}
-
-.room-setup-card:hover .room-setup-card-image img {
-  transform: scale(1.04);
-}
-
-.room-setup-card h3 {
-  margin: 16px;
-  font-size: 1rem;
-  color: #334155;
-}
-
-@media (max-width: 960px) {
-  .room-setup-top {
-    grid-template-columns: 1fr;
-  }
-
-  .room-setup-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 640px) {
-  .room-setup-inner {
-    padding: 20px 16px;
-  }
-
-  .room-setup-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.app-version-badge {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  padding: 6px 10px;
-  border-radius: 12px 0 0 0;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid #e5e7eb;
-  color: #475569;
-  font-size: 0.78rem;
-  text-align: right;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
-  z-index: 1000;
-}
-
-.app-version-badge:hover {
-  opacity: 1;
-}
-
-.app-version-badge span {
-  display: block;
-  font-weight: 700;
-  color: #111827;
-}
-
-.app-version-badge small {
-  display: block;
-  margin-top: 1px;
-  color: #6b7280;
-}
-
-@media (max-width: 640px) {
-  .app-version-badge {
-    right: 6px;
-    bottom: 6px;
-    padding: 5px 8px;
-    font-size: 0.72rem;
-  }
-
-  .app-version-badge small {
-    margin-top: 0.5px;
-  }
-}
-
-@media (max-width: 900px) {
-  .content {
-    grid-template-columns: 1fr;
-  }
-}
+:root {
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+  color: var(--brand-black);
+  background: var(--brand-light);
+  line-height: 1.5;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--brand-light);
+  color: var(--brand-black);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+.app-shell {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.topbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  padding: 22px 24px;
+  background: var(--brand-surface);
+  border: 1px solid var(--brand-border);
+  border-radius: 18px;
+}
+
+.topbar h1 {
+  margin: 0;
+  font-size: clamp(1.9rem, 2.5vw, 2.6rem);
+}
+
+.topbar p {
+  margin: 6px 0 0;
+  color: var(--brand-gray);
+}
+
+.topbar-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.topbar-nav a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 14px;
+  border-radius: 14px;
+  background: var(--brand-surface);
+  color: var(--brand-black);
+  text-decoration: none;
+  border: 1px solid transparent;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.topbar-nav a:hover {
+  background: #ffffff;
+  border-color: #d1d5db;
+}
+
+.content {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: 1.2fr 1.8fr;
+  margin-top: 24px;
+}
+
+.route-index,
+.panel,
+.viewer-panel,
+.bridge-panel,
+.room-setup-dropzone,
+.room-setup-card,
+.room-setup-preview {
+  background: var(--brand-surface);
+  border: 1px solid var(--brand-border);
+  border-radius: 20px;
+}
+
+.route-index,
+.panel,
+.viewer-panel,
+.bridge-panel,
+.room-setup-card {
+  padding: 22px;
+}
+
+.route-index h2,
+.panel h2,
+.viewer-panel h2,
+.room-setup-copy h1,
+.room-setup-bottom h2 {
+  margin: 0 0 16px;
+}
+
+.route-index p,
+.room-setup-features li,
+.room-setup-drop-content p,
+.room-setup-drop-content small,
+.room-setup-card h3,
+.topbar p,
+.error-box,
+.empty-state {
+  color: #475569;
+}
+
+.route-index ul,
+.room-setup-features,
+.room-setup-filters,
+.room-setup-grid {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.route-index ul {
+  display: grid;
+  gap: 12px;
+}
+
+.form-row {
+  display: grid;
+  gap: 14px;
+  margin-bottom: 20px;
+}
+
+label {
+  font-size: 0.95rem;
+  color: var(--brand-black);
+}
+
+input,
+select,
+textarea {
+  width: 100%;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid #d1d5db;
+  background: #ffffff;
+  color: #111827;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: 2px solid var(--brand-blue);
+  outline-offset: 2px;
+}
+
+.button,
+.button-primary,
+.button-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  border-radius: 16px;
+  padding: 14px 18px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.button {
+  background: var(--brand-black);
+  color: var(--brand-surface);
+}
+
+.button:hover {
+  opacity: 0.95;
+}
+
+.button.secondary,
+.button-secondary {
+  background: var(--brand-surface);
+  color: var(--brand-black);
+  border-color: var(--brand-border);
+}
+
+.error-box {
+  margin-top: 16px;
+  padding: 16px;
+  border-radius: 16px;
+  background: #fef2f2;
+  color: #991b1b;
+  border: 1px solid #fecaca;
+}
+
+.empty-state {
+  min-height: 220px;
+  display: grid;
+  place-content: center;
+  border: 1px dashed #d1d5db;
+  border-radius: 18px;
+}
+
+.room-setup {
+  background: var(--brand-light);
+}
+
+.room-setup-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 32px 24px;
+}
+
+.room-setup-header {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 24px;
+}
+
+.room-setup-close {
+  border: none;
+  background: transparent;
+  color: var(--brand-black);
+  padding: 10px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.room-setup-close:hover {
+  background: var(--brand-border);
+}
+
+.room-setup-top {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: 1.1fr 0.9fr;
+  margin-bottom: 40px;
+}
+
+.room-setup-copy h1 {
+  margin: 0 0 24px;
+  font-size: clamp(2rem, 2.5vw, 3rem);
+  color: #111827;
+}
+
+.room-setup-features {
+  display: grid;
+  gap: 16px;
+}
+
+.room-setup-features li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #475569;
+}
+
+.room-setup-actions {
+  display: grid;
+  gap: 16px;
+}
+
+.button-primary {
+  background: #111827;
+  color: #ffffff;
+}
+
+.button-primary:hover {
+  opacity: 0.95;
+}
+
+.button-secondary {
+  background: #ffffff;
+  color: #334155;
+  border-color: #d1d5db;
+}
+
+.button-secondary:hover {
+  background: #f3f4f6;
+}
+
+.button-icon-border {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+  border: 1px solid #d1d5db;
+}
+
+.room-setup-dropzone {
+  position: relative;
+  min-height: 420px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  padding: 24px;
+  border: 1px dashed #d1d5db;
+  border-radius: 28px;
+}
+
+.room-setup-dropzone.dragging {
+  background: #f3f4f6;
+}
+
+.room-setup-file-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.room-setup-drop-content {
+  text-align: center;
+}
+
+.room-setup-drop-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  border-radius: 999px;
+  background: #e2e8f0;
+  color: #64748b;
+  margin-bottom: 18px;
+}
+
+.room-setup-drop-icon.active {
+  background: #dbeafe;
+  color: #1e293b;
+}
+
+.room-setup-drop-content h3 {
+  margin: 0 0 8px;
+  font-size: 1.2rem;
+}
+
+.room-setup-drop-content p,
+.room-setup-drop-content small {
+  margin: 0;
+  color: #64748b;
+}
+
+.room-setup-preview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.room-setup-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.room-setup-preview-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.room-setup-preview:hover .room-setup-preview-overlay {
+  opacity: 1;
+}
+
+.button-delete {
+  background: #ffffff;
+  color: #111827;
+  padding: 12px 16px;
+  border-radius: 14px;
+  font-weight: 600;
+  border: 1px solid #d1d5db;
+}
+
+.room-setup-bottom h2 {
+  margin: 0 0 24px;
+}
+
+.room-setup-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 24px;
+}
+
+.room-setup-filter {
+  border: 1px solid #d1d5db;
+  background: #ffffff;
+  color: #334155;
+  padding: 10px 16px;
+  border-radius: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.room-setup-filter.active {
+  background: #f3f4f6;
+}
+
+.room-setup-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 20px;
+}
+
+.room-setup-card {
+  overflow: hidden;
+  border-radius: 24px;
+  background: #ffffff;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
+}
+
+.room-setup-card-image {
+  position: relative;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+}
+
+.room-setup-card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.4s ease;
+}
+
+.room-setup-card:hover .room-setup-card-image img {
+  transform: scale(1.04);
+}
+
+.room-setup-card h3 {
+  margin: 16px;
+  font-size: 1rem;
+  color: #334155;
+}
+
+@media (max-width: 960px) {
+  .room-setup-top {
+    grid-template-columns: 1fr;
+  }
+
+  .room-setup-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .room-setup-inner {
+    padding: 20px 16px;
+  }
+
+  .room-setup-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.app-version-badge {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  padding: 6px 10px;
+  border-radius: 12px 0 0 0;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid #e5e7eb;
+  color: #475569;
+  font-size: 0.78rem;
+  text-align: right;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
+  z-index: 1000;
+}
+
+.app-version-badge:hover {
+  opacity: 1;
+}
+
+.app-version-badge span {
+  display: block;
+  font-weight: 700;
+  color: #111827;
+}
+
+.app-version-badge small {
+  display: block;
+  margin-top: 1px;
+  color: #6b7280;
+}
+
+@media (max-width: 640px) {
+  .app-version-badge {
+    right: 6px;
+    bottom: 6px;
+    padding: 5px 8px;
+    font-size: 0.72rem;
+  }
+
+  .app-version-badge small {
+    margin-top: 0.5px;
+  }
+}
+
+@media (max-width: 900px) {
+  .content {
+    grid-template-columns: 1fr;
+  }
+}

frontend/src/App.tsx

@@ -1,20 +1,20 @@
-import { Routes, Route, Navigate } from "react-router-dom";
-import SettingsPage from "./features/settings/SettingsPage";
-import RoomSetup from "./features/roomSetup/RoomSetup";
-import RoomVisualizer from "./features/roomVisualizer/RoomVisualizer";
-import SharedView from "./features/shared/SharedView";
-import "./App.css";
-
-export default function App() {
-  return (
-    <div className="min-h-screen bg-[#f4f8ff] text-[#333333]">
-      <Routes>
-        <Route path="/" element={<RoomSetup />} />
-        <Route path="/visualizer" element={<RoomVisualizer />} />
-        <Route path="/share/:shareId" element={<SharedView />} />
-        <Route path="/settings" element={<SettingsPage />} />
-        <Route path="*" element={<Navigate to="/" replace />} />
-      </Routes>
-    </div>
-  );
-}
+import { Routes, Route, Navigate } from "react-router-dom";
+import SettingsPage from "./features/settings/SettingsPage";
+import RoomSetup from "./features/roomSetup/RoomSetup";
+import RoomVisualizer from "./features/roomVisualizer/RoomVisualizer";
+import SharedView from "./features/shared/SharedView";
+import "./App.css";
+
+export default function App() {
+  return (
+    <div className="min-h-screen bg-[#f4f8ff] text-[#333333]">
+      <Routes>
+        <Route path="/" element={<RoomSetup />} />
+        <Route path="/visualizer" element={<RoomVisualizer />} />
+        <Route path="/share/:shareId" element={<SharedView />} />
+        <Route path="/settings" element={<SettingsPage />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </div>
+  );
+}

frontend/src/api/client.ts

@@ -1,100 +1,100 @@
-import type { ClientData } from "../types";
-
-export const DEV_API_BASE = "http://localhost:8000";
-export const API_BASE =
-  import.meta.env.VITE_API_BASE_URL ??
-  (import.meta.env.DEV ? DEV_API_BASE : "");
-const DEV_CLIENT_ID = "ID_UNICO_DEL_CLIENTE_001";
-
-export interface ClientConfigResponse {
-  cliente: ClientData;
-  query: string;
-}
-
-export function getApiBase(customApiBase?: string) {
-  return customApiBase?.trim() ? customApiBase : API_BASE;
-}
-
-export function buildApiUrl(path: string, customApiBase?: string) {
-  return `${getApiBase(customApiBase)}${path}`;
-}
-
-export async function fetchClientConfig(
-  token: string,
-  clientId: string,
-  customApiBase?: string,
-  useDevToken = true,
-): Promise<ClientConfigResponse> {
-  let finalToken = token;
-  const finalClientId = clientId;
-
-  if (!finalToken && !finalClientId) {
-    if (!import.meta.env.DEV || !useDevToken) {
-      throw new Error("No se encontró el token o key en la URL.");
-    }
-
-    const tokenRes = await fetch(buildApiUrl("/api/token", customApiBase), {
-      method: "POST",
-      headers: { "Content-Type": "application/x-www-form-urlencoded" },
-      body: `client_id=${encodeURIComponent(DEV_CLIENT_ID)}`,
-    });
-
-    if (!tokenRes.ok) {
-      throw new Error("No se pudo generar el token de prueba en desarrollo.");
-    }
-
-    const tokenData = await tokenRes.json();
-    finalToken = tokenData.token;
-  }
-
-  const query = finalToken
-    ? `token=${encodeURIComponent(finalToken)}`
-    : `client_id=${encodeURIComponent(finalClientId)}`;
-
-  const res = await fetch(buildApiUrl(`/config?${query}`, customApiBase));
-  if (!res.ok) {
-    const text = await res.text();
-    throw new Error(
-      `No se pudo obtener la configuración del cliente. ${res.status} ${text}`,
-    );
-  }
-
-  const cliente = await res.json();
-  return { cliente, query };
-}
-
-export interface UploadImageResponse {
-  filename: string;
-  [key: string]: unknown;
-}
-
-export async function uploadRoomImage(
-  file: File,
-  customApiBase?: string,
-): Promise<UploadImageResponse> {
-  const formData = new FormData();
-  formData.append("file", file);
-
-  const response = await fetch(
-    buildApiUrl("/api/upload-image", customApiBase),
-    {
-      method: "POST",
-      body: formData,
-    },
-  );
-
-  if (!response.ok) {
-    const text = await response.text();
-    throw new Error(text || "Error al subir la imagen");
-  }
-
-  return response.json();
-}
-
-export async function startSession(query: string, customApiBase?: string) {
-  await fetch(buildApiUrl("/session/start", customApiBase), {
-    method: "POST",
-    headers: { "Content-Type": "application/x-www-form-urlencoded" },
-    body: query,
-  });
-}
+import type { ClientData } from "../types";
+
+export const DEV_API_BASE = "http://localhost:8000";
+export const API_BASE =
+  import.meta.env.VITE_API_BASE_URL ??
+  (import.meta.env.DEV ? DEV_API_BASE : "");
+const DEV_CLIENT_ID = "ID_UNICO_DEL_CLIENTE_001";
+
+export interface ClientConfigResponse {
+  cliente: ClientData;
+  query: string;
+}
+
+export function getApiBase(customApiBase?: string) {
+  return customApiBase?.trim() ? customApiBase : API_BASE;
+}
+
+export function buildApiUrl(path: string, customApiBase?: string) {
+  return `${getApiBase(customApiBase)}${path}`;
+}
+
+export async function fetchClientConfig(
+  token: string,
+  clientId: string,
+  customApiBase?: string,
+  useDevToken = true,
+): Promise<ClientConfigResponse> {
+  let finalToken = token;
+  const finalClientId = clientId;
+
+  if (!finalToken && !finalClientId) {
+    if (!import.meta.env.DEV || !useDevToken) {
+      throw new Error("No se encontró el token o key en la URL.");
+    }
+
+    const tokenRes = await fetch(buildApiUrl("/api/token", customApiBase), {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: `client_id=${encodeURIComponent(DEV_CLIENT_ID)}`,
+    });
+
+    if (!tokenRes.ok) {
+      throw new Error("No se pudo generar el token de prueba en desarrollo.");
+    }
+
+    const tokenData = await tokenRes.json();
+    finalToken = tokenData.token;
+  }
+
+  const query = finalToken
+    ? `token=${encodeURIComponent(finalToken)}`
+    : `client_id=${encodeURIComponent(finalClientId)}`;
+
+  const res = await fetch(buildApiUrl(`/config?${query}`, customApiBase));
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(
+      `No se pudo obtener la configuración del cliente. ${res.status} ${text}`,
+    );
+  }
+
+  const cliente = await res.json();
+  return { cliente, query };
+}
+
+export interface UploadImageResponse {
+  filename: string;
+  [key: string]: unknown;
+}
+
+export async function uploadRoomImage(
+  file: File,
+  customApiBase?: string,
+): Promise<UploadImageResponse> {
+  const formData = new FormData();
+  formData.append("file", file);
+
+  const response = await fetch(
+    buildApiUrl("/api/upload-image", customApiBase),
+    {
+      method: "POST",
+      body: formData,
+    },
+  );
+
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(text || "Error al subir la imagen");
+  }
+
+  return response.json();
+}
+
+export async function startSession(query: string, customApiBase?: string) {
+  await fetch(buildApiUrl("/session/start", customApiBase), {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: query,
+  });
+}

frontend/src/components/ui/LoadingScreen.tsx

@@ -1,33 +1,33 @@
-import { Image } from "lucide-react";
-
-export default function LoadingScreen() {
-  return (
-    <div className="fixed inset-0 flex flex-col items-center justify-center bg-zinc-400 z-50">
-      <div className="relative flex flex-col items-center">
-        <div className="relative mb-8 animate-pulse">
-          <div className="text-white">
-            <Image size={110} strokeWidth={1.2} className="drop-shadow-sm" />
-          </div>
-          <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-14 h-1.5 bg-yellow-400 rounded-full shadow-md" />
-        </div>
-
-        <div className="text-center">
-          <p className="text-white text-xl font-light tracking-widest uppercase opacity-90 animate-pulse">
-            Encontrar los mejores productos
-          </p>
-          <div className="mt-8 flex gap-2 justify-center">
-            <div className="w-2 h-2 bg-white rounded-full animate-bounce [animation-delay:-0.3s]" />
-            <div className="w-2 h-2 bg-white rounded-full animate-bounce [animation-delay:-0.15s]" />
-            <div className="w-2 h-2 bg-white rounded-full animate-bounce" />
-          </div>
-        </div>
-      </div>
-
-      <div className="absolute bottom-10 opacity-30">
-        <p className="text-white text-xs tracking-tighter uppercase font-bold">
-          Cargando Catálogo v2.0
-        </p>
-      </div>
-    </div>
-  );
-}
+import { Image } from "lucide-react";
+
+export default function LoadingScreen() {
+  return (
+    <div className="fixed inset-0 flex flex-col items-center justify-center bg-zinc-400 z-50">
+      <div className="relative flex flex-col items-center">
+        <div className="relative mb-8 animate-pulse">
+          <div className="text-white">
+            <Image size={110} strokeWidth={1.2} className="drop-shadow-sm" />
+          </div>
+          <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-14 h-1.5 bg-yellow-400 rounded-full shadow-md" />
+        </div>
+
+        <div className="text-center">
+          <p className="text-white text-xl font-light tracking-widest uppercase opacity-90 animate-pulse">
+            Encontrar los mejores productos
+          </p>
+          <div className="mt-8 flex gap-2 justify-center">
+            <div className="w-2 h-2 bg-white rounded-full animate-bounce [animation-delay:-0.3s]" />
+            <div className="w-2 h-2 bg-white rounded-full animate-bounce [animation-delay:-0.15s]" />
+            <div className="w-2 h-2 bg-white rounded-full animate-bounce" />
+          </div>
+        </div>
+      </div>
+
+      <div className="absolute bottom-10 opacity-30">
+        <p className="text-white text-xs tracking-tighter uppercase font-bold">
+          Cargando Catálogo v2.0
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/data/roomSetupData.ts

@@ -1,329 +1,329 @@
-export type RoomCategory = {
-  id: string;
-  label: string;
-  count: number;
-};
-
-export type RoomItem = {
-  id: number;
-  title: string;
-  category: string;
-  img: string;
-};
-
-export const categorias: RoomCategory[] = [
-  { id: "todos", label: "Todos", count: 33 },
-  { id: "bano", label: "Baño", count: 10 },
-  { id: "cocina", label: "Cocina", count: 2 },
-  { id: "comedor", label: "Comedor", count: 3 },
-  { id: "dormitorio", label: "Dormitorio", count: 5 },
-  { id: "espacio_abierto", label: "Espacio abierto", count: 7 },
-  { id: "sala", label: "Sala de estar", count: 1 },
-  { id: "terraza", label: "Terraza", count: 5 },
-];
-
-export const habitaciones: RoomItem[] = [
-  {
-    id: 1,
-    title: "Refugio de Spa Contemporáneo",
-    category: "bano",
-    img: new URL(
-      "../assets/imagens-default-room/bathroom/bathroom1.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 2,
-    title: "Oasis de Mármol Sereno",
-    category: "bano",
-    img: new URL(
-      "../assets/imagens-default-room/bathroom/bathroom2.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 3,
-    title: "Baño Zen de Luz Natural",
-    category: "bano",
-    img: new URL(
-      "../assets/imagens-default-room/bathroom/bathroom3.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 4,
-    title: "Retiro de Spa Blanco",
-    category: "bano",
-    img: new URL(
-      "../assets/imagens-default-room/bathroom/bathroom4.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 5,
-    title: "Lavabo de Encanto Minimalista",
-    category: "bano",
-    img: new URL(
-      "../assets/imagens-default-room/bathroom/bathroom5.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 6,
-    title: "Baño Escandinavo Refinado",
-    category: "bano",
-    img: new URL(
-      "../assets/imagens-default-room/bathroom/bathroom6.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 7,
-    title: "Santuario de Mármol Pálido",
-    category: "bano",
-    img: new URL(
-      "../assets/imagens-default-room/bathroom/bathroom7.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 8,
-    title: "Oasis Sereno de Blanco y Luz",
-    category: "bano",
-    img: new URL(
-      "../assets/imagens-default-room/bathroom/bathroom8.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 9,
-    title: "Retiro de Mármol y Madera",
-    category: "bano",
-    img: new URL(
-      "../assets/imagens-default-room/bathroom/bathroom9.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 10,
-    title: "Baño de Luz Cálida",
-    category: "bano",
-    img: new URL(
-      "../assets/imagens-default-room/bathroom/bathroom10.png",
-      import.meta.url,
-    ).href,
-  },
-
-  {
-    id: 11,
-    title: "Cocina Gourmet de Autor",
-    category: "cocina",
-    img: new URL(
-      "../assets/imagens-default-room/Kitchen/kitchen1.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 12,
-    title: "Cocina Contemporánea Urbana",
-    category: "cocina",
-    img: new URL(
-      "../assets/imagens-default-room/Kitchen/kitchen2.png",
-      import.meta.url,
-    ).href,
-  },
-
-  {
-    id: 13,
-    title: "Comedor de Gala Moderno",
-    category: "comedor",
-    img: new URL(
-      "../assets/imagens-default-room/dining room/diningroom1.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 14,
-    title: "Comedor Clásico de Lujo",
-    category: "comedor",
-    img: new URL(
-      "../assets/imagens-default-room/dining room/diningroom2.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 15,
-    title: "Sala de Banquetes Minimalista",
-    category: "comedor",
-    img: new URL(
-      "../assets/imagens-default-room/dining room/diningroom3.png",
-      import.meta.url,
-    ).href,
-  },
-
-  {
-    id: 16,
-    title: "Suite del Amanecer",
-    category: "dormitorio",
-    img: new URL(
-      "../assets/imagens-default-room/bedroom/bedroom1.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 17,
-    title: "Dormitorio de Seda",
-    category: "dormitorio",
-    img: new URL(
-      "../assets/imagens-default-room/bedroom/bedroom2.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 18,
-    title: "Alcoba Tranquila",
-    category: "dormitorio",
-    img: new URL(
-      "../assets/imagens-default-room/bedroom/bedroom3.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 19,
-    title: "Retiro de Noche Azul",
-    category: "dormitorio",
-    img: new URL(
-      "../assets/imagens-default-room/bedroom/bedroom4.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 20,
-    title: "Quinta Esencia del Descanso",
-    category: "dormitorio",
-    img: new URL(
-      "../assets/imagens-default-room/bedroom/bedroom5.png",
-      import.meta.url,
-    ).href,
-  },
-
-  {
-    id: 21,
-    title: "Salón Contemporáneo Sereno",
-    category: "sala",
-    img: new URL(
-      "../assets/imagens-default-room/living room/livingroom1.png",
-      import.meta.url,
-    ).href,
-  },
-
-  {
-    id: 22,
-    title: "Loft de Claridad",
-    category: "espacio_abierto",
-    img: new URL(
-      "../assets/imagens-default-room/open space/openspace1.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 23,
-    title: "Galería Abierta Suave",
-    category: "espacio_abierto",
-    img: new URL(
-      "../assets/imagens-default-room/open space/openspace2.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 24,
-    title: "Ático de Luz Serena",
-    category: "espacio_abierto",
-    img: new URL(
-      "../assets/imagens-default-room/open space/openspace3.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 25,
-    title: "Salón Multifuncional Luminoso",
-    category: "espacio_abierto",
-    img: new URL(
-      "../assets/imagens-default-room/open space/openspace4.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 26,
-    title: "Atrio de Cielo Blanco",
-    category: "espacio_abierto",
-    img: new URL(
-      "../assets/imagens-default-room/open space/openspace5.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 27,
-    title: "Estudio de Altura",
-    category: "espacio_abierto",
-    img: new URL(
-      "../assets/imagens-default-room/open space/openspace6.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 28,
-    title: "Retiro Etéreo",
-    category: "espacio_abierto",
-    img: new URL(
-      "../assets/imagens-default-room/open space/openspace7.png",
-      import.meta.url,
-    ).href,
-  },
-
-  {
-    id: 29,
-    title: "Terraza Nocturna de Ciudad",
-    category: "terraza",
-    img: new URL(
-      "../assets/imagens-default-room/terrace/terrace1.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 30,
-    title: "Terraza Contemporánea",
-    category: "terraza",
-    img: new URL(
-      "../assets/imagens-default-room/terrace/terrace2.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 31,
-    title: "Terraza de Rooftop Chic",
-    category: "terraza",
-    img: new URL(
-      "../assets/imagens-default-room/terrace/terrace3.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 32,
-    title: "Terraza de Diseño Iluminado",
-    category: "terraza",
-    img: new URL(
-      "../assets/imagens-default-room/terrace/terrace4.png",
-      import.meta.url,
-    ).href,
-  },
-  {
-    id: 33,
-    title: "Terraza de Encanto Nocturno",
-    category: "terraza",
-    img: new URL(
-      "../assets/imagens-default-room/terrace/terrace5.png",
-      import.meta.url,
-    ).href,
-  },
-];
+export type RoomCategory = {
+  id: string;
+  label: string;
+  count: number;
+};
+
+export type RoomItem = {
+  id: number;
+  title: string;
+  category: string;
+  img: string;
+};
+
+export const categorias: RoomCategory[] = [
+  { id: "todos", label: "Todos", count: 33 },
+  { id: "bano", label: "Baño", count: 10 },
+  { id: "cocina", label: "Cocina", count: 2 },
+  { id: "comedor", label: "Comedor", count: 3 },
+  { id: "dormitorio", label: "Dormitorio", count: 5 },
+  { id: "espacio_abierto", label: "Espacio abierto", count: 7 },
+  { id: "sala", label: "Sala de estar", count: 1 },
+  { id: "terraza", label: "Terraza", count: 5 },
+];
+
+export const habitaciones: RoomItem[] = [
+  {
+    id: 1,
+    title: "Refugio de Spa Contemporáneo",
+    category: "bano",
+    img: new URL(
+      "../assets/imagens-default-room/bathroom/bathroom1.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 2,
+    title: "Oasis de Mármol Sereno",
+    category: "bano",
+    img: new URL(
+      "../assets/imagens-default-room/bathroom/bathroom2.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 3,
+    title: "Baño Zen de Luz Natural",
+    category: "bano",
+    img: new URL(
+      "../assets/imagens-default-room/bathroom/bathroom3.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 4,
+    title: "Retiro de Spa Blanco",
+    category: "bano",
+    img: new URL(
+      "../assets/imagens-default-room/bathroom/bathroom4.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 5,
+    title: "Lavabo de Encanto Minimalista",
+    category: "bano",
+    img: new URL(
+      "../assets/imagens-default-room/bathroom/bathroom5.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 6,
+    title: "Baño Escandinavo Refinado",
+    category: "bano",
+    img: new URL(
+      "../assets/imagens-default-room/bathroom/bathroom6.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 7,
+    title: "Santuario de Mármol Pálido",
+    category: "bano",
+    img: new URL(
+      "../assets/imagens-default-room/bathroom/bathroom7.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 8,
+    title: "Oasis Sereno de Blanco y Luz",
+    category: "bano",
+    img: new URL(
+      "../assets/imagens-default-room/bathroom/bathroom8.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 9,
+    title: "Retiro de Mármol y Madera",
+    category: "bano",
+    img: new URL(
+      "../assets/imagens-default-room/bathroom/bathroom9.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 10,
+    title: "Baño de Luz Cálida",
+    category: "bano",
+    img: new URL(
+      "../assets/imagens-default-room/bathroom/bathroom10.png",
+      import.meta.url,
+    ).href,
+  },
+
+  {
+    id: 11,
+    title: "Cocina Gourmet de Autor",
+    category: "cocina",
+    img: new URL(
+      "../assets/imagens-default-room/Kitchen/kitchen1.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 12,
+    title: "Cocina Contemporánea Urbana",
+    category: "cocina",
+    img: new URL(
+      "../assets/imagens-default-room/Kitchen/kitchen2.png",
+      import.meta.url,
+    ).href,
+  },
+
+  {
+    id: 13,
+    title: "Comedor de Gala Moderno",
+    category: "comedor",
+    img: new URL(
+      "../assets/imagens-default-room/dining room/diningroom1.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 14,
+    title: "Comedor Clásico de Lujo",
+    category: "comedor",
+    img: new URL(
+      "../assets/imagens-default-room/dining room/diningroom2.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 15,
+    title: "Sala de Banquetes Minimalista",
+    category: "comedor",
+    img: new URL(
+      "../assets/imagens-default-room/dining room/diningroom3.png",
+      import.meta.url,
+    ).href,
+  },
+
+  {
+    id: 16,
+    title: "Suite del Amanecer",
+    category: "dormitorio",
+    img: new URL(
+      "../assets/imagens-default-room/bedroom/bedroom1.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 17,
+    title: "Dormitorio de Seda",
+    category: "dormitorio",
+    img: new URL(
+      "../assets/imagens-default-room/bedroom/bedroom2.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 18,
+    title: "Alcoba Tranquila",
+    category: "dormitorio",
+    img: new URL(
+      "../assets/imagens-default-room/bedroom/bedroom3.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 19,
+    title: "Retiro de Noche Azul",
+    category: "dormitorio",
+    img: new URL(
+      "../assets/imagens-default-room/bedroom/bedroom4.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 20,
+    title: "Quinta Esencia del Descanso",
+    category: "dormitorio",
+    img: new URL(
+      "../assets/imagens-default-room/bedroom/bedroom5.png",
+      import.meta.url,
+    ).href,
+  },
+
+  {
+    id: 21,
+    title: "Salón Contemporáneo Sereno",
+    category: "sala",
+    img: new URL(
+      "../assets/imagens-default-room/living room/livingroom1.png",
+      import.meta.url,
+    ).href,
+  },
+
+  {
+    id: 22,
+    title: "Loft de Claridad",
+    category: "espacio_abierto",
+    img: new URL(
+      "../assets/imagens-default-room/open space/openspace1.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 23,
+    title: "Galería Abierta Suave",
+    category: "espacio_abierto",
+    img: new URL(
+      "../assets/imagens-default-room/open space/openspace2.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 24,
+    title: "Ático de Luz Serena",
+    category: "espacio_abierto",
+    img: new URL(
+      "../assets/imagens-default-room/open space/openspace3.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 25,
+    title: "Salón Multifuncional Luminoso",
+    category: "espacio_abierto",
+    img: new URL(
+      "../assets/imagens-default-room/open space/openspace4.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 26,
+    title: "Atrio de Cielo Blanco",
+    category: "espacio_abierto",
+    img: new URL(
+      "../assets/imagens-default-room/open space/openspace5.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 27,
+    title: "Estudio de Altura",
+    category: "espacio_abierto",
+    img: new URL(
+      "../assets/imagens-default-room/open space/openspace6.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 28,
+    title: "Retiro Etéreo",
+    category: "espacio_abierto",
+    img: new URL(
+      "../assets/imagens-default-room/open space/openspace7.png",
+      import.meta.url,
+    ).href,
+  },
+
+  {
+    id: 29,
+    title: "Terraza Nocturna de Ciudad",
+    category: "terraza",
+    img: new URL(
+      "../assets/imagens-default-room/terrace/terrace1.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 30,
+    title: "Terraza Contemporánea",
+    category: "terraza",
+    img: new URL(
+      "../assets/imagens-default-room/terrace/terrace2.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 31,
+    title: "Terraza de Rooftop Chic",
+    category: "terraza",
+    img: new URL(
+      "../assets/imagens-default-room/terrace/terrace3.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 32,
+    title: "Terraza de Diseño Iluminado",
+    category: "terraza",
+    img: new URL(
+      "../assets/imagens-default-room/terrace/terrace4.png",
+      import.meta.url,
+    ).href,
+  },
+  {
+    id: 33,
+    title: "Terraza de Encanto Nocturno",
+    category: "terraza",
+    img: new URL(
+      "../assets/imagens-default-room/terrace/terrace5.png",
+      import.meta.url,
+    ).href,
+  },
+];

frontend/src/features/roomSetup/RoomSetup.tsx

@@ -1,334 +1,318 @@
-import { useState } from "react";
-import {
-  X,
-  Camera,
-  Package,
-  Camera as CameraIcon,
-  UploadCloud,
-  Users,
-  ArrowRight,
-} from "lucide-react";
-import { useNavigate } from "react-router-dom";
-import { categorias, habitaciones } from "../../data/roomSetupData";
-import { FilterButton, RoomCard } from "./RoomSetupComponents";
-import { useRoomSetup } from "./roomSetupHooks";
-import useAppStore from "../../store/useAppStore";
-import { useHistoryStore, type HistoryItem } from "../../store/useAppStore";
-import { useActiveSessions } from "../../hooks/useActiveSessions";
-import { API_BASE } from "../../api/client";
-import {
-  useLoadSessionHistory,
-  deleteSessionFromBackend,
-} from "../../hooks/useSessionSync";
-import { useCallback } from "react";
-
-export default function RoomSetup() {
-  useLoadSessionHistory();
-  const [categoriaActiva, setCategoriaActiva] = useState("todos");
-  const navigate = useNavigate();
-  const segmentProgress = useAppStore((s) => s.segmentProgress);
-  const segmentFilename = useAppStore((s) => s.segmentFilename);
-  const storedPreviewImage = useAppStore((s) => s.previewImage);
-  const sessionHistory = useHistoryStore((s) => s.sessionHistory);
-  const removeFromHistory = useHistoryStore((s) => s.removeFromHistory);
-  const userId = useHistoryStore((s) => s.userId);
-
-  const handleDeleteSession = useCallback(
-    (e: React.MouseEvent, filename: string) => {
-      e.stopPropagation();
-      removeFromHistory(filename);
-      deleteSessionFromBackend(userId, filename);
-    },
-    [removeFromHistory, userId],
-  );
-  const { count: activeSessions } = useActiveSessions();
-  const {
-    isDragging,
-    previewImage,
-    uploadMessage,
-    isUploading,
-    fileInputRef,
-    handleDragOver,
-    handleDragLeave,
-    handleDrop,
-    handleFileChange,
-    handleDemoRoomSelect,
-    triggerFileInput,
-    clearPreviewImage,
-  } = useRoomSetup();
-
-  const habitacionesFiltradas =
-    categoriaActiva === "todos"
-      ? habitaciones
-      : habitaciones.filter((h) => h.category === categoriaActiva);
-
-  return (
-    <div className="min-h-screen bg-[#f4f8ff] font-sans text-[#333333]">
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-8 relative">
-        {isUploading && (
-          <div className="fixed inset-0 bg-white/80 backdrop-blur-sm z-50 flex flex-col items-center justify-center gap-4 px-4">
-            <p className="text-[#0047AB] font-semibold text-lg text-center">
-              Analizando imagen con IA...
-            </p>
-            <div className="w-full max-w-xs sm:w-72 bg-gray-200 rounded-full h-3 overflow-hidden">
-              <div
-                className="bg-[#0047AB] h-3 rounded-full transition-all duration-500"
-                style={{ width: `${segmentProgress}%` }}
-              />
-            </div>
-            <p className="text-sm text-gray-500">{uploadMessage}</p>
-          </div>
-        )}
-
-        {/* Badge de sesiones activas */}
-        {activeSessions > 0 && (
-          <div className="mb-4 flex justify-end">
-            <div className="flex items-center gap-2 bg-white border border-[#dbe7ff] rounded-full px-4 py-1.5 shadow-sm">
-              <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
-              <Users className="w-4 h-4 text-[#0047AB]" />
-              <span className="text-sm font-medium text-[#0047AB]">
-                {activeSessions} usuario{activeSessions !== 1 ? "s" : ""} activo
-                {activeSessions !== 1 ? "s" : ""}
-              </span>
-            </div>
-          </div>
-        )}
-
-        {/* SECCIÓN SUPERIOR: Sube tu foto */}
-        <section className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-12 mb-10 sm:mb-16 lg:mb-20">
-          {/* Columna Izquierda: Textos y Botones */}
-          <div className="flex flex-col justify-center">
-            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-[#333333] mb-4 sm:mb-6 lg:mb-8">
-              Ver los productos en su cuarto
-            </h1>
-
-            <ul className="space-y-4 sm:space-y-6 mb-6 sm:mb-8 lg:mb-10">
-              <li className="flex items-center gap-3 text-base sm:text-lg font-medium text-[#333333]">
-                <Camera className="w-5 h-5 sm:w-6 sm:h-6 text-[#0047AB] shrink-0" />
-                Sube una foto de tu habitación
-              </li>
-              <li className="flex items-center gap-3 text-base sm:text-lg font-medium text-[#333333]">
-                <Package className="w-5 h-5 sm:w-6 sm:h-6 text-[#0047AB] shrink-0" />
-                Prueba nuestros productos
-              </li>
-            </ul>
-
-            <div className="w-full flex flex-col gap-3">
-              <button
-                onClick={triggerFileInput}
-                className="w-full bg-[#333333] hover:bg-black text-white font-bold text-base sm:text-lg py-3 sm:py-4 px-6 rounded-xl flex items-center justify-center gap-3 transition-colors shadow-sm"
-              >
-                <CameraIcon
-                  className="w-5 h-5 sm:w-6 sm:h-6"
-                  strokeWidth={2.5}
-                />
-                Sube tu foto
-              </button>
-
-              {segmentFilename && !isUploading && (
-                <button
-                  onClick={() =>
-                    navigate("/visualizer", {
-                      state: {
-                        previewImage:
-                          storedPreviewImage ??
-                          `${API_BASE}/seg/image/${segmentFilename}`,
-                      },
-                    })
-                  }
-                  className="w-full bg-[#0047AB] hover:bg-[#003a94] text-white font-bold text-base sm:text-lg py-3 sm:py-4 px-6 rounded-xl flex items-center justify-center gap-3 transition-colors shadow-sm"
-                >
-                  Continuar al visualizador
-                  <ArrowRight
-                    className="w-5 h-5 sm:w-6 sm:h-6"
-                    strokeWidth={2.5}
-                  />
-                </button>
-              )}
-            </div>
-            {uploadMessage && (
-              <p className="text-sm text-[#707070] mt-3">{uploadMessage}</p>
-            )}
-          </div>
-
-          {/* Columna Derecha: Dropzone de Imagen */}
-          <div
-            className={`relative rounded-2xl overflow-hidden min-h-[220px] sm:aspect-[4/3] sm:min-h-0 flex flex-col items-center justify-center border-2 border-dashed transition-all duration-200 ${
-              isDragging
-                ? "border-[#0047AB] bg-[#eaf1ff]"
-                : "border-[#dbe7ff] bg-[#f4f8ff] hover:bg-[#eef4ff]"
-            }`}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={handleDrop}
-          >
-            {previewImage ? (
-              <div className="relative w-full h-full group">
-                <img
-                  src={previewImage}
-                  alt="Vista previa"
-                  className="w-full h-full object-cover"
-                />
-                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-sm">
-                  <button
-                    onClick={clearPreviewImage}
-                    className="bg-white text-[#0047AB] font-medium py-2 px-4 rounded-lg flex items-center gap-2 hover:bg-[#eef4ff] transition-colors shadow-lg"
-                  >
-                    <X className="w-4 h-4" /> Eliminar foto
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <>
-                <input
-                  type="file"
-                  accept="image/*"
-                  onChange={handleFileChange}
-                  ref={fileInputRef}
-                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-                />
-                <div className="flex flex-col items-center pointer-events-none text-center p-6">
-                  <div
-                    className={`w-14 h-14 sm:w-16 sm:h-16 rounded-full flex items-center justify-center mb-3 sm:mb-4 transition-colors ${
-                      isDragging
-                        ? "bg-[#0047AB]/20 text-[#0047AB]"
-                        : "bg-[#eaf1ff] text-[#0047AB]"
-                    }`}
-                  >
-                    <UploadCloud className="w-7 h-7 sm:w-8 sm:h-8" />
-                  </div>
-                  <h3 className="text-lg sm:text-xl font-bold text-[#333333] mb-2">
-                    {isDragging
-                      ? "Suelta la imagen aquí"
-                      : "Arrastra tu foto aquí"}
-                  </h3>
-                  <p className="text-[#707070] text-sm sm:text-base">
-                    o haz clic para explorar en tu dispositivo
-                  </p>
-                  <p className="text-[#707070] text-xs mt-3 sm:mt-4">
-                    Formatos soportados: JPG, PNG
-                  </p>
-                </div>
-              </>
-            )}
-          </div>
-        </section>
-
-        {/* SECCIÓN HISTORIAL DE SESIÓN */}
-        {sessionHistory.length > 0 && (
-          <section className="mb-10 sm:mb-14">
-            <h2 className="text-xl sm:text-2xl font-bold text-[#333333] mb-4 sm:mb-6">
-              Tus espacios recientes
-            </h2>
-            <div
-              className="flex gap-4 overflow-x-auto pb-2"
-              style={{ scrollbarWidth: "thin" }}
-            >
-              {sessionHistory.map((item: HistoryItem) => (
-                <div
-                  key={item.filename}
-                  role="button"
-                  tabIndex={0}
-                  onClick={() =>
-                    navigate("/visualizer", {
-                      state: {
-                        previewImage: item.previewUrl,
-                        filename: item.filename,
-                        maskCount: item.maskCount,
-                      },
-                    })
-                  }
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      navigate("/visualizer", {
-                        state: {
-                          previewImage: item.previewUrl,
-                          filename: item.filename,
-                          maskCount: item.maskCount,
-                        },
-                      });
-                    }
-                  }}
-                  className={`flex-shrink-0 group relative rounded-2xl overflow-hidden border-2 transition-all duration-200 ${
-                    segmentFilename === item.filename
-                      ? "border-[#0047AB] shadow-lg shadow-[#0047AB]/20"
-                      : "border-[#dbe7ff] hover:border-[#0047AB]"
-                  }`}
-                  style={{ width: 160, height: 120 }}
-                >
-                  <img
-                    src={item.previewUrl}
-                    alt="Habitación previa"
-                    className="w-full h-full object-cover"
-                  />
-                  {/* Overlay con hora */}
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent flex flex-col justify-end p-2">
-                    <p className="text-white/80 text-[10px]">
-                      {new Date(item.uploadedAt).toLocaleDateString([], {
-                        day: "2-digit",
-                        month: "short",
-                      })}{" "}
-                      {new Date(item.uploadedAt).toLocaleTimeString([], {
-                        hour: "2-digit",
-                        minute: "2-digit",
-                      })}
-                    </p>
-                  </div>
-                  {/* Badge "activa" o botón eliminar */}
-                  {segmentFilename === item.filename ? (
-                    <div className="absolute top-2 right-2 bg-[#0047AB] text-white text-[9px] font-bold px-1.5 py-0.5 rounded-full">
-                      Activa
-                    </div>
-                  ) : (
-                    <button
-                      onClick={(e) => handleDeleteSession(e, item.filename)}
-                      className="absolute top-2 right-2 w-5 h-5 rounded-full bg-black/50 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500"
-                    >
-                      <X className="w-3 h-3" />
-                    </button>
-                  )}
-                  {/* Hover: continuar */}
-                  <div className="absolute inset-0 bg-[#0047AB]/80 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-                    <span className="text-white text-xs font-bold flex items-center gap-1">
-                      Continuar <ArrowRight className="w-3.5 h-3.5" />
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </section>
-        )}
-
-        {/* SECCIÓN INFERIOR: Habitaciones de demostración */}
-        <section>
-          <h2 className="text-xl sm:text-2xl font-bold text-[#0047AB] mb-4 sm:mb-6">
-            ¿No tienes una foto? Prueba nuestras habitaciones de demostración
-          </h2>
-
-          {/* Filtros */}
-          <div className="flex flex-wrap gap-2 mb-6 sm:mb-8">
-            {categorias.map((cat) => (
-              <FilterButton
-                key={cat.id}
-                category={cat}
-                active={categoriaActiva === cat.id}
-                onSelect={setCategoriaActiva}
-              />
-            ))}
-          </div>
-
-          {/* Cuadrícula de Imágenes */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">
-            {habitacionesFiltradas.map((hab) => (
-              <RoomCard
-                key={hab.id}
-                room={hab}
-                onSelect={handleDemoRoomSelect}
-              />
-            ))}
-          </div>
-        </section>
-      </main>
-    </div>
-  );
-}
+import { useState } from "react";
+import {
+  X,
+  Camera,
+  Package,
+  Camera as CameraIcon,
+  UploadCloud,
+  Users,
+  ArrowRight,
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { categorias, habitaciones } from "../../data/roomSetupData";
+import { FilterButton, RoomCard } from "./RoomSetupComponents";
+import { useRoomSetup } from "./roomSetupHooks";
+import useAppStore from "../../store/useAppStore";
+import { useHistoryStore, type HistoryItem } from "../../store/useAppStore";
+import { useActiveSessions } from "../../hooks/useActiveSessions";
+import { API_BASE } from "../../api/client";
+import { useLoadSessionHistory, deleteSessionFromBackend } from "../../hooks/useSessionSync";
+import { useCallback } from "react";
+
+export default function RoomSetup() {
+  useLoadSessionHistory();
+  const [categoriaActiva, setCategoriaActiva] = useState("todos");
+  const navigate = useNavigate();
+  const segmentProgress = useAppStore((s) => s.segmentProgress);
+  const segmentFilename = useAppStore((s) => s.segmentFilename);
+  const storedPreviewImage = useAppStore((s) => s.previewImage);
+  const sessionHistory = useHistoryStore((s) => s.sessionHistory);
+  const removeFromHistory = useHistoryStore((s) => s.removeFromHistory);
+  const userId = useHistoryStore((s) => s.userId);
+
+  const handleDeleteSession = useCallback(
+    (e: React.MouseEvent, filename: string) => {
+      e.stopPropagation();
+      removeFromHistory(filename);
+      deleteSessionFromBackend(userId, filename);
+    },
+    [removeFromHistory, userId],
+  );
+  const { count: activeSessions } = useActiveSessions();
+  const {
+    isDragging,
+    previewImage,
+    uploadMessage,
+    isUploading,
+    fileInputRef,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    handleFileChange,
+    handleDemoRoomSelect,
+    triggerFileInput,
+    clearPreviewImage,
+  } = useRoomSetup();
+
+  const habitacionesFiltradas =
+    categoriaActiva === "todos"
+      ? habitaciones
+      : habitaciones.filter((h) => h.category === categoriaActiva);
+
+  return (
+    <div className="min-h-screen bg-[#f4f8ff] font-sans text-[#333333]">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-8 relative">
+        {isUploading && (
+          <div className="fixed inset-0 bg-white/80 backdrop-blur-sm z-50 flex flex-col items-center justify-center gap-4 px-4">
+            <p className="text-[#0047AB] font-semibold text-lg text-center">
+              Analizando imagen con IA...
+            </p>
+            <div className="w-full max-w-xs sm:w-72 bg-gray-200 rounded-full h-3 overflow-hidden">
+              <div
+                className="bg-[#0047AB] h-3 rounded-full transition-all duration-500"
+                style={{ width: `${segmentProgress}%` }}
+              />
+            </div>
+            <p className="text-sm text-gray-500">{uploadMessage}</p>
+          </div>
+        )}
+
+        {/* Badge de sesiones activas */}
+        {activeSessions > 0 && (
+          <div className="mb-4 flex justify-end">
+            <div className="flex items-center gap-2 bg-white border border-[#dbe7ff] rounded-full px-4 py-1.5 shadow-sm">
+              <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+              <Users className="w-4 h-4 text-[#0047AB]" />
+              <span className="text-sm font-medium text-[#0047AB]">
+                {activeSessions} usuario{activeSessions !== 1 ? "s" : ""} activo
+                {activeSessions !== 1 ? "s" : ""}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {/* SECCIÓN SUPERIOR: Sube tu foto */}
+        <section className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-12 mb-10 sm:mb-16 lg:mb-20">
+          {/* Columna Izquierda: Textos y Botones */}
+          <div className="flex flex-col justify-center">
+            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-[#333333] mb-4 sm:mb-6 lg:mb-8">
+              Ver los productos en su cuarto
+            </h1>
+
+            <ul className="space-y-4 sm:space-y-6 mb-6 sm:mb-8 lg:mb-10">
+              <li className="flex items-center gap-3 text-base sm:text-lg font-medium text-[#333333]">
+                <Camera className="w-5 h-5 sm:w-6 sm:h-6 text-[#0047AB] shrink-0" />
+                Sube una foto de tu habitación
+              </li>
+              <li className="flex items-center gap-3 text-base sm:text-lg font-medium text-[#333333]">
+                <Package className="w-5 h-5 sm:w-6 sm:h-6 text-[#0047AB] shrink-0" />
+                Prueba nuestros productos
+              </li>
+            </ul>
+
+            <div className="w-full flex flex-col gap-3">
+              <button
+                onClick={triggerFileInput}
+                className="w-full bg-[#333333] hover:bg-black text-white font-bold text-base sm:text-lg py-3 sm:py-4 px-6 rounded-xl flex items-center justify-center gap-3 transition-colors shadow-sm"
+              >
+                <CameraIcon
+                  className="w-5 h-5 sm:w-6 sm:h-6"
+                  strokeWidth={2.5}
+                />
+                Sube tu foto
+              </button>
+
+              {segmentFilename && !isUploading && (
+                <button
+                  onClick={() =>
+                    navigate("/visualizer", {
+                      state: {
+                        previewImage:
+                          storedPreviewImage ??
+                          `${API_BASE}/seg/image/${segmentFilename}`,
+                      },
+                    })
+                  }
+                  className="w-full bg-[#0047AB] hover:bg-[#003a94] text-white font-bold text-base sm:text-lg py-3 sm:py-4 px-6 rounded-xl flex items-center justify-center gap-3 transition-colors shadow-sm"
+                >
+                  Continuar al visualizador
+                  <ArrowRight
+                    className="w-5 h-5 sm:w-6 sm:h-6"
+                    strokeWidth={2.5}
+                  />
+                </button>
+              )}
+            </div>
+            {uploadMessage && (
+              <p className="text-sm text-[#707070] mt-3">{uploadMessage}</p>
+            )}
+          </div>
+
+          {/* Columna Derecha: Dropzone de Imagen */}
+          <div
+            className={`relative rounded-2xl overflow-hidden min-h-[220px] sm:aspect-[4/3] sm:min-h-0 flex flex-col items-center justify-center border-2 border-dashed transition-all duration-200 ${
+              isDragging
+                ? "border-[#0047AB] bg-[#eaf1ff]"
+                : "border-[#dbe7ff] bg-[#f4f8ff] hover:bg-[#eef4ff]"
+            }`}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          >
+            {previewImage ? (
+              <div className="relative w-full h-full group">
+                <img
+                  src={previewImage}
+                  alt="Vista previa"
+                  className="w-full h-full object-cover"
+                />
+                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-sm">
+                  <button
+                    onClick={clearPreviewImage}
+                    className="bg-white text-[#0047AB] font-medium py-2 px-4 rounded-lg flex items-center gap-2 hover:bg-[#eef4ff] transition-colors shadow-lg"
+                  >
+                    <X className="w-4 h-4" /> Eliminar foto
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <>
+                <input
+                  type="file"
+                  accept="image/*"
+                  onChange={handleFileChange}
+                  ref={fileInputRef}
+                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                />
+                <div className="flex flex-col items-center pointer-events-none text-center p-6">
+                  <div
+                    className={`w-14 h-14 sm:w-16 sm:h-16 rounded-full flex items-center justify-center mb-3 sm:mb-4 transition-colors ${
+                      isDragging
+                        ? "bg-[#0047AB]/20 text-[#0047AB]"
+                        : "bg-[#eaf1ff] text-[#0047AB]"
+                    }`}
+                  >
+                    <UploadCloud className="w-7 h-7 sm:w-8 sm:h-8" />
+                  </div>
+                  <h3 className="text-lg sm:text-xl font-bold text-[#333333] mb-2">
+                    {isDragging
+                      ? "Suelta la imagen aquí"
+                      : "Arrastra tu foto aquí"}
+                  </h3>
+                  <p className="text-[#707070] text-sm sm:text-base">
+                    o haz clic para explorar en tu dispositivo
+                  </p>
+                  <p className="text-[#707070] text-xs mt-3 sm:mt-4">
+                    Formatos soportados: JPG, PNG
+                  </p>
+                </div>
+              </>
+            )}
+          </div>
+        </section>
+
+        {/* SECCIÓN HISTORIAL DE SESIÓN */}
+        {sessionHistory.length > 0 && (
+          <section className="mb-10 sm:mb-14">
+            <h2 className="text-xl sm:text-2xl font-bold text-[#333333] mb-4 sm:mb-6">
+              Tus espacios recientes
+            </h2>
+            <div
+              className="flex gap-4 overflow-x-auto pb-2"
+              style={{ scrollbarWidth: "thin" }}
+            >
+              {sessionHistory.map((item: HistoryItem) => (
+                <button
+                  key={item.filename}
+                  onClick={() =>
+                    navigate("/visualizer", {
+                      state: {
+                        previewImage: item.previewUrl,
+                        filename: item.filename,
+                        maskCount: item.maskCount,
+                      },
+                    })
+                  }
+                  className={`flex-shrink-0 group relative rounded-2xl overflow-hidden border-2 transition-all duration-200 ${
+                    segmentFilename === item.filename
+                      ? "border-[#0047AB] shadow-lg shadow-[#0047AB]/20"
+                      : "border-[#dbe7ff] hover:border-[#0047AB]"
+                  }`}
+                  style={{ width: 160, height: 120 }}
+                >
+                  <img
+                    src={item.previewUrl}
+                    alt="Habitación previa"
+                    className="w-full h-full object-cover"
+                  />
+                  {/* Overlay con hora */}
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent flex flex-col justify-end p-2">
+                    <p className="text-white/80 text-[10px]">
+                      {new Date(item.uploadedAt).toLocaleDateString([], {
+                        day: "2-digit",
+                        month: "short",
+                      })}{" "}
+                      {new Date(item.uploadedAt).toLocaleTimeString([], {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      })}
+                    </p>
+                  </div>
+                  {/* Badge "activa" o botón eliminar */}
+                  {segmentFilename === item.filename ? (
+                    <div className="absolute top-2 right-2 bg-[#0047AB] text-white text-[9px] font-bold px-1.5 py-0.5 rounded-full">
+                      Activa
+                    </div>
+                  ) : (
+                    <button
+                      onClick={(e) => handleDeleteSession(e, item.filename)}
+                      className="absolute top-2 right-2 w-5 h-5 rounded-full bg-black/50 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500"
+                    >
+                      <X className="w-3 h-3" />
+                    </button>
+                  )}
+                  {/* Hover: continuar */}
+                  <div className="absolute inset-0 bg-[#0047AB]/80 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                    <span className="text-white text-xs font-bold flex items-center gap-1">
+                      Continuar <ArrowRight className="w-3.5 h-3.5" />
+                    </span>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* SECCIÓN INFERIOR: Habitaciones de demostración */}
+        <section>
+          <h2 className="text-xl sm:text-2xl font-bold text-[#0047AB] mb-4 sm:mb-6">
+            ¿No tienes una foto? Prueba nuestras habitaciones de demostración
+          </h2>
+
+          {/* Filtros */}
+          <div className="flex flex-wrap gap-2 mb-6 sm:mb-8">
+            {categorias.map((cat) => (
+              <FilterButton
+                key={cat.id}
+                category={cat}
+                active={categoriaActiva === cat.id}
+                onSelect={setCategoriaActiva}
+              />
+            ))}
+          </div>
+
+          {/* Cuadrícula de Imágenes */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">
+            {habitacionesFiltradas.map((hab) => (
+              <RoomCard
+                key={hab.id}
+                room={hab}
+                onSelect={handleDemoRoomSelect}
+              />
+            ))}
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}

frontend/src/features/roomSetup/RoomSetupComponents.tsx

@@ -1,62 +1,62 @@
-import {
-  type RoomCategory,
-  type RoomItem,
-  categorias,
-} from "../../data/roomSetupData";
-
-type FilterButtonProps = {
-  category: RoomCategory;
-  active: boolean;
-  onSelect: (id: string) => void;
-};
-
-export function FilterButton({
-  category,
-  active,
-  onSelect,
-}: FilterButtonProps) {
-  return (
-    <button
-      type="button"
-      onClick={() => onSelect(category.id)}
-      className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 border ${
-        active
-          ? "bg-[#0047AB] border-[#0047AB] text-white shadow-sm"
-          : "bg-white border-[#0047AB] text-[#0047AB] hover:bg-[#eaf1ff]"
-      }`}
-    >
-      {category.label} ({category.count})
-    </button>
-  );
-}
-
-type RoomCardProps = {
-  room: RoomItem;
-  onSelect: (url: string) => void;
-};
-
-export function RoomCard({ room, onSelect }: RoomCardProps) {
-  const categoryLabel =
-    categorias.find((cat) => cat.id === room.category)?.label ?? room.category;
-
-  return (
-    <button
-      type="button"
-      onClick={() => onSelect(room.img)}
-      className="group cursor-pointer text-left"
-    >
-      <div className="relative aspect-[4/3] rounded-2xl overflow-hidden mb-3 bg-[#edf4ff]">
-        <img
-          src={room.img}
-          alt={room.title}
-          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
-        />
-        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300" />
-      </div>
-      <div className="px-1">
-        <h3 className="text-[#333333] font-medium text-sm">{room.title}</h3>
-        <p className="text-[#707070] text-xs mt-1">{categoryLabel}</p>
-      </div>
-    </button>
-  );
-}
+import {
+  type RoomCategory,
+  type RoomItem,
+  categorias,
+} from "../../data/roomSetupData";
+
+type FilterButtonProps = {
+  category: RoomCategory;
+  active: boolean;
+  onSelect: (id: string) => void;
+};
+
+export function FilterButton({
+  category,
+  active,
+  onSelect,
+}: FilterButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(category.id)}
+      className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 border ${
+        active
+          ? "bg-[#0047AB] border-[#0047AB] text-white shadow-sm"
+          : "bg-white border-[#0047AB] text-[#0047AB] hover:bg-[#eaf1ff]"
+      }`}
+    >
+      {category.label} ({category.count})
+    </button>
+  );
+}
+
+type RoomCardProps = {
+  room: RoomItem;
+  onSelect: (url: string) => void;
+};
+
+export function RoomCard({ room, onSelect }: RoomCardProps) {
+  const categoryLabel =
+    categorias.find((cat) => cat.id === room.category)?.label ?? room.category;
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(room.img)}
+      className="group cursor-pointer text-left"
+    >
+      <div className="relative aspect-[4/3] rounded-2xl overflow-hidden mb-3 bg-[#edf4ff]">
+        <img
+          src={room.img}
+          alt={room.title}
+          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+        />
+        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300" />
+      </div>
+      <div className="px-1">
+        <h3 className="text-[#333333] font-medium text-sm">{room.title}</h3>
+        <p className="text-[#707070] text-xs mt-1">{categoryLabel}</p>
+      </div>
+    </button>
+  );
+}

frontend/src/features/roomSetup/roomSetup.types.ts

@@ -1,6 +1,6 @@
-// Tipos específicos de la feature roomSetup.
-
-export type RoomSetupState = {
-  previewImage: string | null;
-  uploadMessage: string | null;
-};
+// Tipos específicos de la feature roomSetup.
+
+export type RoomSetupState = {
+  previewImage: string | null;
+  uploadMessage: string | null;
+};

frontend/src/features/roomSetup/roomSetupHooks.ts

@@ -7,8 +7,11 @@ import {
   type RefObject,
 } from "react";
 import { useNavigate } from "react-router-dom";
-import useAppStore, { useHistoryStore } from "../../store/useAppStore";
-import { uploadRoomImage, buildApiUrl } from "../../api/client";
+import useAppStore from "../../store/useAppStore";
+import { useHistoryStore } from "../../store/useAppStore";
+import { useSegmentUpload } from "../../hooks/useSegmentUpload";
+import { API_BASE } from "../../api/client";
+import { saveSessionToBackend } from "../../hooks/useSessionSync";
 
 export function useRoomSetup(): {
   isDragging: boolean;
@@ -37,9 +40,7 @@ export function useRoomSetup(): {
   const addToHistory = useHistoryStore((state) => state.addToHistory);
   const userId = useHistoryStore((state) => state.userId);
 
-  const setUploadedFile = useAppStore((s) => s.setUploadedFile);
-  // applyTextureOpenAI is unused in this hook; call it from the visualizer where needed
-  const isUploading = false;
+  const { uploadAndSegment, isUploading } = useSegmentUpload();
 
   const clearPreviewImage = useCallback(() => {
     setPreviewImage(null);
@@ -52,30 +53,35 @@ export function useRoomSetup(): {
       // Blob URL used only for local preview while uploading; replaced with server URL after
       const objectUrl = URL.createObjectURL(file);
       setPreviewImage(objectUrl);
-      setUploadMessage("Imagen lista — selecciona un producto para aplicar");
-      setUploadedFile(file);
-
-      // Start uploading in background so backend has a stable URL for processing.
-      (async () => {
-        try {
-          const res = await uploadRoomImage(file);
-          if (res?.url) {
-            const serverUrl = buildApiUrl(res.url as string);
-            setPreviewImage(serverUrl);
-            setUploadMessage("Imagen subida al servidor");
-          }
-        } catch (err) {
-          const msg =
-            err instanceof Error ? err.message : "Error al subir la imagen";
-          setUploadMessage(msg);
-        }
-      })();
+      setUploadMessage("Iniciando segmentación...");
 
       try {
-        // Ahora el flujo es: usuario sube imagen → selecciona producto → backend /api/generate-image
-        // Navegamos al visualizador con la preview local y el usuario selecciona producto allí.
+        const { filename, maskCount } = await uploadAndSegment(
+          file,
+          (progress, message) => {
+            setSegmentProgress(progress);
+            setUploadMessage(message);
+          },
+        );
+
+        setSegmentResult(filename, maskCount);
+        setUploadMessage(`Segmentación completa — ${maskCount} zonas detectadas`);
+
+        // Server URL persists across page refreshes; blob URL does not
+        const serverImageUrl = `${API_BASE}/seg/image/${filename}`;
+        setPreviewImage(serverImageUrl);
+
+        const historyItem = {
+          filename,
+          previewUrl: serverImageUrl,
+          maskCount,
+          uploadedAt: Date.now(),
+        };
+        addToHistory(historyItem);
+        saveSessionToBackend(userId, historyItem);
+
         navigate("/visualizer", {
-          state: { previewImage: objectUrl },
+          state: { previewImage: serverImageUrl },
         });
       } catch (err) {
         const message =
@@ -89,6 +95,7 @@ export function useRoomSetup(): {
       setUploadMessage,
       setSegmentResult,
       setSegmentProgress,
+      uploadAndSegment,
       addToHistory,
       userId,
     ],

frontend/src/features/roomVisualizer/MaskLayer.tsx

@@ -1,45 +1,45 @@
-import React from "react";
-
-interface MaskLayerProps {
-  maskUrl: string;
-  color: string;
-  onMouseEnter: (maskUrl: string) => void;
-  onClick: (maskUrl: string) => void;
-}
-
-/**
- * Componente para renderizar una única capa de máscara.
- * Usa React.memo para evitar re-renderizados si las props no cambian.
- */
-const MaskLayer = React.memo(function MaskLayer({
-  maskUrl,
-  color,
-  onMouseEnter,
-  onClick,
-}: MaskLayerProps) {
-  // Creamos los manejadores de eventos aquí para pasar la URL de la máscara.
-  // Como el componente está memoizado, estas funciones solo se recrean si las props cambian.
-  const handleMouseEnter = () => onMouseEnter(maskUrl);
-  const handleClick = () => onClick(maskUrl);
-
-  return (
-    <div
-      className="absolute top-0 left-0 w-full h-full transition-opacity duration-200"
-      style={{
-        backgroundColor: color,
-        maskImage: `url(${maskUrl})`,
-        WebkitMaskImage: `url(${maskUrl})`,
-        maskSize: "contain",
-        WebkitMaskSize: "contain",
-        maskRepeat: "no-repeat",
-        WebkitMaskRepeat: "no-repeat",
-        maskPosition: "center",
-        WebkitMaskPosition: "center",
-      }}
-      onMouseEnter={handleMouseEnter}
-      onClick={handleClick}
-    />
-  );
-});
-
-export default MaskLayer;
+import React from "react";
+
+interface MaskLayerProps {
+  maskUrl: string;
+  color: string;
+  onMouseEnter: (maskUrl: string) => void;
+  onClick: (maskUrl: string) => void;
+}
+
+/**
+ * Componente para renderizar una única capa de máscara.
+ * Usa React.memo para evitar re-renderizados si las props no cambian.
+ */
+const MaskLayer = React.memo(function MaskLayer({
+  maskUrl,
+  color,
+  onMouseEnter,
+  onClick,
+}: MaskLayerProps) {
+  // Creamos los manejadores de eventos aquí para pasar la URL de la máscara.
+  // Como el componente está memoizado, estas funciones solo se recrean si las props cambian.
+  const handleMouseEnter = () => onMouseEnter(maskUrl);
+  const handleClick = () => onClick(maskUrl);
+
+  return (
+    <div
+      className="absolute top-0 left-0 w-full h-full transition-opacity duration-200"
+      style={{
+        backgroundColor: color,
+        maskImage: `url(${maskUrl})`,
+        WebkitMaskImage: `url(${maskUrl})`,
+        maskSize: "contain",
+        WebkitMaskSize: "contain",
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+        maskPosition: "center",
+        WebkitMaskPosition: "center",
+      }}
+      onMouseEnter={handleMouseEnter}
+      onClick={handleClick}
+    />
+  );
+});
+
+export default MaskLayer;

frontend/src/features/roomVisualizer/RoomPreviewPanel.tsx

@@ -1,338 +1,329 @@
-import {
-  type PointerEvent,
-  type SyntheticEvent,
-  type RefObject,
-} from "react";
-import {
-  ArrowLeft,
-  Share2,
-  Download,
-  MapPin,
-  ShoppingCart,
-  RefreshCw,
-  RotateCcw,
-  Paintbrush,
-  Loader2,
-} from "lucide-react";
-import type { Product } from "../../types";
-import type { SegmentMeta } from "../../hooks/useSegmentCanvas";
-
-interface RoomPreviewPanelProps {
-  previewImage?: string | null;
-  offset: { x: number; y: number };
-  zoom: number;
-  imageSize: { width: number; height: number };
-  wrapperRef: RefObject<HTMLDivElement | null>;
-  canvasRef: RefObject<HTMLCanvasElement | null>;
-  selectedProduct: Product | null;
-  selectedMasks: Set<number>;
-  hoveredMask: number;
-  segmentMeta: Map<number, SegmentMeta>;
-  isApplying: boolean;
-  onBack: () => void;
-  onPointerDown: (event: PointerEvent<HTMLDivElement>) => void;
-  onPointerMove: (event: PointerEvent<HTMLDivElement>) => void;
-  onPointerUp: (event: PointerEvent<HTMLDivElement>) => void;
-  updateImageSize: (img: HTMLImageElement) => void;
-  onCanvasMouseMove: (e: React.MouseEvent<HTMLCanvasElement>) => void;
-  onCanvasMouseLeave: () => void;
-  onCanvasClick: (e: React.MouseEvent<HTMLCanvasElement>) => void;
-  onApplyTexture: () => void;
-  onReset: () => void;
-  onDownload: () => Promise<void>;
-  onShare: () => Promise<void>;
-  maskCount?: number;
-}
-
-
-export function RoomPreviewPanel({
-  previewImage,
-  offset,
-  zoom,
-  imageSize,
-  wrapperRef,
-  canvasRef,
-  selectedProduct,
-  selectedMasks,
-  hoveredMask,
-  segmentMeta,
-  isApplying,
-  onBack,
-  onPointerDown,
-  onPointerMove,
-  onPointerUp,
-  updateImageSize,
-  onCanvasMouseMove,
-  onCanvasMouseLeave,
-  onCanvasClick,
-  onApplyTexture,
-  onReset,
-  onDownload,
-  onShare,
-  maskCount = 0,
-}: RoomPreviewPanelProps) {
-  const canApply = (selectedMasks.size > 0 || maskCount === 0) && selectedProduct != null;
-
-
-  const getLabel = (index: number) =>
-    segmentMeta.get(index)?.label ?? `Zona ${index}`;
-
-  return (
-    <div className="w-full h-full bg-white overflow-hidden">
-      <div className="relative h-full overflow-hidden lg:rounded-lg bg-[#f4f8ff]">
-
-        {/* ── Mobile top bar ───────────────────────────────────────── */}
-        {/* pr-12 reserva espacio a la derecha para el botón .hr-close del padre */}
-        <div className="lg:hidden absolute left-0 right-0 top-0 z-10 h-12 bg-white shadow-sm flex items-center justify-between px-3 pr-12">
-          <button
-            onClick={onBack}
-            className="p-2 rounded-full hover:bg-gray-100 transition-colors"
-          >
-            <ArrowLeft className="h-5 w-5 text-[#333]" />
-          </button>
-          <div className="flex items-center gap-1">
-            <button
-              onClick={onShare}
-              className="p-2 rounded-full hover:bg-[#eaf1ff] transition-colors"
-            >
-              <Share2 className="h-5 w-5 text-[#0047AB]" />
-            </button>
-            <button
-              onClick={onDownload}
-              className="p-2 rounded-full hover:bg-[#eaf1ff] transition-colors"
-            >
-              <Download className="h-5 w-5 text-[#0047AB]" />
-            </button>
-          </div>
-        </div>
-
-        {/* ── Desktop top bar ──────────────────────────────────────── */}
-        <div className="pointer-events-none hidden lg:flex absolute left-1/2 top-0 z-10 -translate-x-1/2 w-[80%] h-16 rounded-b-md bg-white shadow-sm items-center justify-center gap-4 px-3">
-          <button
-            onClick={onBack}
-            className="pointer-events-auto rounded-full bg-[#333333] px-4 py-2 text-sm font-semibold text-white hover:bg-black flex items-center gap-2"
-          >
-            <ArrowLeft className="h-4 w-4" /> Cambiar de Habitación
-          </button>
-          <span className="text-gray-400">|</span>
-          <button
-            onClick={onShare}
-            className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2"
-          >
-            <Share2 className="h-4 w-4 text-[#0047AB]" />
-            Compartir
-          </button>
-          <button
-            onClick={onDownload}
-            className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2"
-          >
-            <Download className="h-4 w-4 text-[#0047AB]" /> Descargar
-          </button>
-          <a
-            href="https://nauffargermany.com/gt/sucursales-2/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2"
-          >
-            <MapPin className="h-4 w-4 text-[#0047AB]" /> Encuentra tu tienda
-          </a>
-          {selectedProduct?.detailUrl ? (
-            <a
-              href={selectedProduct.detailUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2"
-            >
-              <ShoppingCart className="h-4 w-4 text-[#0047AB]" /> Ir a la página del producto
-            </a>
-          ) : (
-            <button
-              disabled
-              className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-gray-300 flex items-center gap-2 cursor-default"
-            >
-              <ShoppingCart className="h-4 w-4 text-gray-300" /> Ir a la página del producto
-            </button>
-          )}
-        </div>
-
-        {/* ── Área de imagen + canvas ──────────────────────────────── */}
-        <div
-          ref={wrapperRef}
-          className="absolute inset-x-0 top-12 lg:top-16 bottom-12 lg:bottom-16 flex items-center justify-center bg-[#edf4ff] overflow-hidden"
-          onPointerDown={onPointerDown}
-          onPointerMove={onPointerMove}
-          onPointerUp={onPointerUp}
-        >
-          {previewImage ? (
-            <div
-              style={{
-                transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
-                transformOrigin: "center center",
-                position: "relative",
-                display: "inline-flex",
-                lineHeight: 0,
-                ...(imageSize.width > 0
-                  ? { width: imageSize.width, height: imageSize.height }
-                  : {}),
-              }}
-            >
-              <img
-                src={previewImage}
-                alt="Vista previa de la habitación"
-                draggable={false}
-                onDragStart={(e) => e.preventDefault()}
-                onLoad={(event: SyntheticEvent<HTMLImageElement>) =>
-                  updateImageSize(event.currentTarget)
-                }
-                style={{
-                  display: "block",
-                  width: imageSize.width > 0 ? "100%" : "auto",
-                  height: imageSize.height > 0 ? "100%" : "auto",
-                  maxWidth: imageSize.width > 0 ? "none" : "100%",
-                  maxHeight: imageSize.height > 0 ? "none" : "100%",
-                  objectFit: "contain",
-                }}
-              />
-              <canvas
-                ref={canvasRef}
-                style={{
-                  position: "absolute",
-                  inset: 0,
-                  width: "100%",
-                  height: "100%",
-                  cursor: "crosshair",
-                }}
-                onMouseMove={onCanvasMouseMove}
-                onMouseLeave={onCanvasMouseLeave}
-                onClick={onCanvasClick}
-              />
-            </div>
-          ) : (
-            <div className="flex h-full w-full items-center justify-center text-[#707070] text-sm px-6 text-center">
-              No hay vista previa disponible aún.
-            </div>
-          )}
-        </div>
-
-        {/* ── Hint de selección ────────────────────────────────────── */}
-        {previewImage && selectedMasks.size === 0 && (
-          <div className="pointer-events-none absolute top-14 lg:top-20 left-1/2 -translate-x-1/2 z-10 bg-black/50 text-white text-xs px-3 py-1.5 rounded-full whitespace-nowrap">
-            {maskCount > 0 ? (
-              hoveredMask > 0
-                ? `${getLabel(hoveredMask)} — haz clic para seleccionar`
-                : "Haz clic sobre una zona de la imagen para seleccionarla"
-            ) : (
-              "Selecciona un producto de la lista para visualizarlo con IA"
-            )}
-          </div>
-        )}
-
-
-        {/* ── Mobile bottom bar ────────────────────────────────────── */}
-        <div className="pointer-events-none lg:hidden absolute left-0 right-0 bottom-0 z-10 h-12 bg-white border-t border-gray-100 shadow-sm flex items-center px-3 gap-2">
-          {selectedProduct && (
-            <div className="flex items-center gap-2 min-w-0 flex-1">
-              <img
-                src={selectedProduct.image}
-                alt={selectedProduct.name}
-                className="w-8 h-8 object-cover rounded-md border border-gray-200 shrink-0"
-              />
-              <div className="min-w-0">
-                <p className="text-[10px] text-[#707070] truncate">{selectedProduct.brand}</p>
-                <p className="text-xs font-semibold text-[#333] truncate leading-tight">{selectedProduct.name}</p>
-              </div>
-            </div>
-          )}
-          {!selectedProduct && selectedMasks.size > 0 && (
-            <p className="text-xs text-[#0047AB] font-medium truncate flex-1">
-              {[...selectedMasks].map(getLabel).join(", ")}
-            </p>
-          )}
-          {!selectedProduct && selectedMasks.size === 0 && <div className="flex-1" />}
-
-          <div className="flex items-center gap-1 ml-auto shrink-0">
-            {canApply && (
-              <button
-                onClick={onApplyTexture}
-                disabled={isApplying}
-                className="pointer-events-auto flex items-center gap-1.5 bg-[#0047AB] text-white px-3 py-1.5 rounded-full text-xs font-semibold hover:bg-[#003a94] disabled:opacity-60 transition-colors"
-              >
-                {isApplying ? (
-                  <Loader2 className="h-3 w-3 animate-spin" />
-                ) : (
-                  <Paintbrush className="h-3 w-3" />
-                )}
-                {isApplying ? "Aplicando..." : "Aplicar"}
-              </button>
-            )}
-            <button
-              onClick={onReset}
-              className="pointer-events-auto p-2 rounded-full hover:bg-[#eaf1ff] transition-colors"
-            >
-              <RefreshCw className="h-4 w-4 text-[#0047AB]" />
-            </button>
-          </div>
-        </div>
-
-        {/* ── Desktop bottom bar ───────────────────────────────────── */}
-        <div className="pointer-events-none hidden lg:flex absolute left-1/2 bottom-0 z-10 -translate-x-1/2 w-[80%] h-16 rounded-t-md bg-white border border-[#0047AB]/10 shadow-sm items-center justify-start gap-4 px-4">
-          {selectedProduct && (
-            <div className="pointer-events-none flex items-center gap-3">
-              <img
-                src={selectedProduct.image}
-                alt={selectedProduct.name}
-                className="w-10 h-10 object-cover rounded-md border border-gray-200"
-              />
-              <div>
-                <p className="text-[#707070] text-xs">{selectedProduct.brand}</p>
-                <p className="font-semibold text-[#333333] text-sm leading-tight">
-                  {selectedProduct.name}
-                </p>
-              </div>
-            </div>
-          )}
-
-          {selectedMasks.size > 0 && (
-            <p className="text-xs text-[#0047AB] font-medium truncate max-w-[260px]">
-              {[...selectedMasks].map(getLabel).join(", ")}
-            </p>
-          )}
-
-          <div className="flex-1" />
-
-          {canApply && (
-            <button
-              onClick={onApplyTexture}
-              disabled={isApplying}
-              className="pointer-events-auto flex items-center gap-2 bg-[#0047AB] text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-[#003a94] disabled:opacity-60 transition-colors"
-            >
-              {isApplying ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <Paintbrush className="h-4 w-4" />
-              )}
-              {isApplying ? "Aplicando..." : "Aplicar textura"}
-            </button>
-          )}
-
-          <button
-            onClick={onReset}
-            className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2"
-          >
-            <span className="inline-flex items-center justify-center rounded-full bg-[#eaf1ff] p-2">
-              <RefreshCw className="h-4 w-4 text-[#0047AB]" />
-            </span>
-            Reiniciar
-          </button>
-          <button className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2">
-            <span className="inline-flex items-center justify-center rounded-full bg-[#eaf1ff] p-2">
-              <RotateCcw className="h-4 w-4 text-[#0047AB]" />
-            </span>
-            Girar
-          </button>
-        </div>
-
-      </div>
-    </div>
-  );
-}
+import {
+  type PointerEvent,
+  type SyntheticEvent,
+  type RefObject,
+} from "react";
+import {
+  ArrowLeft,
+  Share2,
+  Download,
+  MapPin,
+  ShoppingCart,
+  RefreshCw,
+  RotateCcw,
+  Paintbrush,
+  Loader2,
+} from "lucide-react";
+import type { Product } from "../../types";
+import type { SegmentMeta } from "../../hooks/useSegmentCanvas";
+
+interface RoomPreviewPanelProps {
+  previewImage?: string | null;
+  offset: { x: number; y: number };
+  zoom: number;
+  imageSize: { width: number; height: number };
+  wrapperRef: RefObject<HTMLDivElement | null>;
+  canvasRef: RefObject<HTMLCanvasElement | null>;
+  selectedProduct: Product | null;
+  selectedMasks: Set<number>;
+  hoveredMask: number;
+  segmentMeta: Map<number, SegmentMeta>;
+  isApplying: boolean;
+  onBack: () => void;
+  onPointerDown: (event: PointerEvent<HTMLDivElement>) => void;
+  onPointerMove: (event: PointerEvent<HTMLDivElement>) => void;
+  onPointerUp: (event: PointerEvent<HTMLDivElement>) => void;
+  updateImageSize: (img: HTMLImageElement) => void;
+  onCanvasMouseMove: (e: React.MouseEvent<HTMLCanvasElement>) => void;
+  onCanvasMouseLeave: () => void;
+  onCanvasClick: (e: React.MouseEvent<HTMLCanvasElement>) => void;
+  onApplyTexture: () => void;
+  onReset: () => void;
+  onDownload: () => Promise<void>;
+  onShare: () => Promise<void>;
+}
+
+export function RoomPreviewPanel({
+  previewImage,
+  offset,
+  zoom,
+  imageSize,
+  wrapperRef,
+  canvasRef,
+  selectedProduct,
+  selectedMasks,
+  hoveredMask,
+  segmentMeta,
+  isApplying,
+  onBack,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  updateImageSize,
+  onCanvasMouseMove,
+  onCanvasMouseLeave,
+  onCanvasClick,
+  onApplyTexture,
+  onReset,
+  onDownload,
+  onShare,
+}: RoomPreviewPanelProps) {
+  const canApply = selectedMasks.size > 0 && selectedProduct != null;
+
+  const getLabel = (index: number) =>
+    segmentMeta.get(index)?.label ?? `Zona ${index}`;
+
+  return (
+    <div className="w-full h-full bg-white overflow-hidden">
+      <div className="relative h-full overflow-hidden lg:rounded-lg bg-[#f4f8ff]">
+
+        {/* ── Mobile top bar ───────────────────────────────────────── */}
+        {/* pr-12 reserva espacio a la derecha para el botón .hr-close del padre */}
+        <div className="lg:hidden absolute left-0 right-0 top-0 z-10 h-12 bg-white shadow-sm flex items-center justify-between px-3 pr-12">
+          <button
+            onClick={onBack}
+            className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+          >
+            <ArrowLeft className="h-5 w-5 text-[#333]" />
+          </button>
+          <div className="flex items-center gap-1">
+            <button
+              onClick={onShare}
+              className="p-2 rounded-full hover:bg-[#eaf1ff] transition-colors"
+            >
+              <Share2 className="h-5 w-5 text-[#0047AB]" />
+            </button>
+            <button
+              onClick={onDownload}
+              className="p-2 rounded-full hover:bg-[#eaf1ff] transition-colors"
+            >
+              <Download className="h-5 w-5 text-[#0047AB]" />
+            </button>
+          </div>
+        </div>
+
+        {/* ── Desktop top bar ──────────────────────────────────────── */}
+        <div className="pointer-events-none hidden lg:flex absolute left-1/2 top-0 z-10 -translate-x-1/2 w-[80%] h-16 rounded-b-md bg-white shadow-sm items-center justify-center gap-4 px-3">
+          <button
+            onClick={onBack}
+            className="pointer-events-auto rounded-full bg-[#333333] px-4 py-2 text-sm font-semibold text-white hover:bg-black flex items-center gap-2"
+          >
+            <ArrowLeft className="h-4 w-4" /> Cambiar de Habitación
+          </button>
+          <span className="text-gray-400">|</span>
+          <button
+            onClick={onShare}
+            className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2"
+          >
+            <Share2 className="h-4 w-4 text-[#0047AB]" />
+            Compartir
+          </button>
+          <button
+            onClick={onDownload}
+            className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2"
+          >
+            <Download className="h-4 w-4 text-[#0047AB]" /> Descargar
+          </button>
+          <a
+            href="https://nauffargermany.com/gt/sucursales-2/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2"
+          >
+            <MapPin className="h-4 w-4 text-[#0047AB]" /> Encuentra tu tienda
+          </a>
+          {selectedProduct?.detailUrl ? (
+            <a
+              href={selectedProduct.detailUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2"
+            >
+              <ShoppingCart className="h-4 w-4 text-[#0047AB]" /> Ir a la página del producto
+            </a>
+          ) : (
+            <button
+              disabled
+              className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-gray-300 flex items-center gap-2 cursor-default"
+            >
+              <ShoppingCart className="h-4 w-4 text-gray-300" /> Ir a la página del producto
+            </button>
+          )}
+        </div>
+
+        {/* ── Área de imagen + canvas ──────────────────────────────── */}
+        <div
+          ref={wrapperRef}
+          className="absolute inset-x-0 top-12 lg:top-16 bottom-12 lg:bottom-16 flex items-center justify-center bg-[#edf4ff] overflow-hidden"
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerUp}
+        >
+          {previewImage ? (
+            <div
+              style={{
+                transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
+                transformOrigin: "center center",
+                position: "relative",
+                display: "inline-flex",
+                lineHeight: 0,
+                ...(imageSize.width > 0
+                  ? { width: imageSize.width, height: imageSize.height }
+                  : {}),
+              }}
+            >
+              <img
+                src={previewImage}
+                alt="Vista previa de la habitación"
+                draggable={false}
+                onDragStart={(e) => e.preventDefault()}
+                onLoad={(event: SyntheticEvent<HTMLImageElement>) =>
+                  updateImageSize(event.currentTarget)
+                }
+                style={{
+                  display: "block",
+                  width: imageSize.width > 0 ? "100%" : "auto",
+                  height: imageSize.height > 0 ? "100%" : "auto",
+                  maxWidth: imageSize.width > 0 ? "none" : "100%",
+                  maxHeight: imageSize.height > 0 ? "none" : "100%",
+                  objectFit: "contain",
+                }}
+              />
+              <canvas
+                ref={canvasRef}
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  width: "100%",
+                  height: "100%",
+                  cursor: "crosshair",
+                }}
+                onMouseMove={onCanvasMouseMove}
+                onMouseLeave={onCanvasMouseLeave}
+                onClick={onCanvasClick}
+              />
+            </div>
+          ) : (
+            <div className="flex h-full w-full items-center justify-center text-[#707070] text-sm px-6 text-center">
+              No hay vista previa disponible aún.
+            </div>
+          )}
+        </div>
+
+        {/* ── Hint de selección ────────────────────────────────────── */}
+        {previewImage && selectedMasks.size === 0 && (
+          <div className="pointer-events-none absolute top-14 lg:top-20 left-1/2 -translate-x-1/2 z-10 bg-black/50 text-white text-xs px-3 py-1.5 rounded-full whitespace-nowrap">
+            {hoveredMask > 0
+              ? `${getLabel(hoveredMask)} — haz clic para seleccionar`
+              : "Haz clic sobre una zona de la imagen para seleccionarla"}
+          </div>
+        )}
+
+        {/* ── Mobile bottom bar ────────────────────────────────────── */}
+        <div className="pointer-events-none lg:hidden absolute left-0 right-0 bottom-0 z-10 h-12 bg-white border-t border-gray-100 shadow-sm flex items-center px-3 gap-2">
+          {selectedProduct && (
+            <div className="flex items-center gap-2 min-w-0 flex-1">
+              <img
+                src={selectedProduct.image}
+                alt={selectedProduct.name}
+                className="w-8 h-8 object-cover rounded-md border border-gray-200 shrink-0"
+              />
+              <div className="min-w-0">
+                <p className="text-[10px] text-[#707070] truncate">{selectedProduct.brand}</p>
+                <p className="text-xs font-semibold text-[#333] truncate leading-tight">{selectedProduct.name}</p>
+              </div>
+            </div>
+          )}
+          {!selectedProduct && selectedMasks.size > 0 && (
+            <p className="text-xs text-[#0047AB] font-medium truncate flex-1">
+              {[...selectedMasks].map(getLabel).join(", ")}
+            </p>
+          )}
+          {!selectedProduct && selectedMasks.size === 0 && <div className="flex-1" />}
+
+          <div className="flex items-center gap-1 ml-auto shrink-0">
+            {canApply && (
+              <button
+                onClick={onApplyTexture}
+                disabled={isApplying}
+                className="pointer-events-auto flex items-center gap-1.5 bg-[#0047AB] text-white px-3 py-1.5 rounded-full text-xs font-semibold hover:bg-[#003a94] disabled:opacity-60 transition-colors"
+              >
+                {isApplying ? (
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                ) : (
+                  <Paintbrush className="h-3 w-3" />
+                )}
+                {isApplying ? "Aplicando..." : "Aplicar"}
+              </button>
+            )}
+            <button
+              onClick={onReset}
+              className="pointer-events-auto p-2 rounded-full hover:bg-[#eaf1ff] transition-colors"
+            >
+              <RefreshCw className="h-4 w-4 text-[#0047AB]" />
+            </button>
+          </div>
+        </div>
+
+        {/* ── Desktop bottom bar ───────────────────────────────────── */}
+        <div className="pointer-events-none hidden lg:flex absolute left-1/2 bottom-0 z-10 -translate-x-1/2 w-[80%] h-16 rounded-t-md bg-white border border-[#0047AB]/10 shadow-sm items-center justify-start gap-4 px-4">
+          {selectedProduct && (
+            <div className="pointer-events-none flex items-center gap-3">
+              <img
+                src={selectedProduct.image}
+                alt={selectedProduct.name}
+                className="w-10 h-10 object-cover rounded-md border border-gray-200"
+              />
+              <div>
+                <p className="text-[#707070] text-xs">{selectedProduct.brand}</p>
+                <p className="font-semibold text-[#333333] text-sm leading-tight">
+                  {selectedProduct.name}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {selectedMasks.size > 0 && (
+            <p className="text-xs text-[#0047AB] font-medium truncate max-w-[260px]">
+              {[...selectedMasks].map(getLabel).join(", ")}
+            </p>
+          )}
+
+          <div className="flex-1" />
+
+          {canApply && (
+            <button
+              onClick={onApplyTexture}
+              disabled={isApplying}
+              className="pointer-events-auto flex items-center gap-2 bg-[#0047AB] text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-[#003a94] disabled:opacity-60 transition-colors"
+            >
+              {isApplying ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Paintbrush className="h-4 w-4" />
+              )}
+              {isApplying ? "Aplicando..." : "Aplicar textura"}
+            </button>
+          )}
+
+          <button
+            onClick={onReset}
+            className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2"
+          >
+            <span className="inline-flex items-center justify-center rounded-full bg-[#eaf1ff] p-2">
+              <RefreshCw className="h-4 w-4 text-[#0047AB]" />
+            </span>
+            Reiniciar
+          </button>
+          <button className="pointer-events-auto rounded-full bg-transparent px-4 py-2 text-sm font-medium text-[#0047AB] hover:bg-[#eaf1ff] flex items-center gap-2">
+            <span className="inline-flex items-center justify-center rounded-full bg-[#eaf1ff] p-2">
+              <RotateCcw className="h-4 w-4 text-[#0047AB]" />
+            </span>
+            Girar
+          </button>
+        </div>
+
+      </div>
+    </div>
+  );
+}

frontend/src/features/roomVisualizer/RoomVisualizer.tsx

@@ -1,1000 +1,617 @@
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type PointerEvent,
-} from "react";
-import { ChevronDown } from "lucide-react";
-import { createRoot } from "react-dom/client";
-import { useLocation, useNavigate } from "react-router-dom";
-import { LayoutGrid, Search, SlidersHorizontal, Menu, X } from "lucide-react";
-import Swal from "sweetalert2";
-import {
-  WhatsappShareButton,
-  WhatsappIcon,
-  TelegramShareButton,
-  TelegramIcon,
-  TwitterShareButton,
-  XIcon,
-  FacebookShareButton,
-  FacebookIcon,
-  EmailShareButton,
-  EmailIcon,
-} from "react-share";
-import { ProductGroupCard, IndividualProductCard } from "./ProductCards";
-import { useRoomVisualizer } from "./roomVisualizerHooks";
-import { useCatalogProducts } from "./useCatalogProducts";
-import { RoomPreviewPanel } from "./RoomPreviewPanel";
-import useAppStore from "../../store/useAppStore";
-import { API_BASE } from "../../api/client";
-// No segmentation canvas: we remove mask-based flows and use defaults
-import { useApplyTexture } from "../../hooks/useApplyTexture";
-import type { SegmentMeta } from "../../hooks/useSegmentCanvas";
-
-type RoomVisualizerState = {
-  previewImage?: string;
-  filename?: string;
-  maskCount?: number;
-};
-
-// ── Hook para detectar mobile (< 1024px) ─────────────────────────────────────
-function useIsMobile() {
-  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 1024);
-  useEffect(() => {
-    const handler = () => setIsMobile(window.innerWidth < 1024);
-    window.addEventListener("resize", handler);
-    return () => window.removeEventListener("resize", handler);
-  }, []);
-  return isMobile;
-}
-
-export default function RoomVisualizer() {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const state = location.state as RoomVisualizerState | null;
-  const isMobile = useIsMobile();
-
-  const storedPreviewImage = useAppStore((store) => store.previewImage);
-  const segmentFilename = useAppStore((store) => store.segmentFilename);
-  const accumulatedFilename = useAppStore((store) => store.accumulatedFilename);
-  const setAccumulatedFilename = useAppStore(
-    (store) => store.setAccumulatedFilename,
-  );
-  const setSegmentResult = useAppStore((store) => store.setSegmentResult);
-  const setPreviewImage = useAppStore((store) => store.setPreviewImage);
-
-  // Restaurar segmentFilename y previewImage cuando se abre una sesión del historial
-  useEffect(() => {
-    if (state?.filename && state.filename !== segmentFilename) {
-      setSegmentResult(state.filename, state.maskCount ?? 0);
-      setAccumulatedFilename(null); // limpiar ediciones de sesión anterior
-    }
-    if (state?.previewImage) {
-      setPreviewImage(state.previewImage);
-    }
-    // Solo al montar — state no cambia tras la navegación
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const [currentPreviewImage, setCurrentPreviewImage] = useState<string | null>(
-    () => {
-      if (accumulatedFilename)
-        return `${API_BASE}/seg/image/${accumulatedFilename}`;
-      return state?.previewImage ?? storedPreviewImage ?? null;
-    },
-  );
-
-  const [zoom, setZoom] = useState(1);
-  const [offset, setOffset] = useState({ x: 0, y: 0 });
-  const [dragStart, setDragStart] = useState<{ x: number; y: number } | null>(
-    null,
-  );
-  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  const { products, categories, loading, error } = useCatalogProducts();
-
-  // null = sin interacción (primera categoría abierta por defecto)
-  // Set vacío = usuario cerró todo deliberadamente
-  const [openCategoryIds, setOpenCategoryIds] = useState<Set<string> | null>(
-    null,
-  );
-
-  const isCategoryOpen = useCallback(
-    (id: string) => {
-      if (openCategoryIds === null) {
-        return categories.length > 0 && id === categories[0].id;
-      }
-      return openCategoryIds.has(id);
-    },
-    [openCategoryIds, categories],
-  );
-
-  const toggleCategory = useCallback(
-    (id: string) => {
-      setOpenCategoryIds((prev) => {
-        const base =
-          prev === null
-            ? categories.length > 0
-              ? new Set([categories[0].id])
-              : new Set<string>()
-            : new Set(prev);
-        if (base.has(id)) base.delete(id);
-        else base.add(id);
-        return base;
-      });
-    },
-    [categories],
-  );
-
-  const {
-    viewMode,
-    showGrid,
-    showList,
-    openProductId,
-    handleSelectProduct,
-    selectedProduct,
-    isSearchOpen,
-    setIsSearchOpen,
-    searchQuery,
-    setSearchQuery,
-    closeSearch,
-    filteredProducts,
-    chunkArray,
-  } = useRoomVisualizer(products);
-
-  useEffect(() => {
-    showList();
-  }, [showList]);
-
-  // Masks/segmentation removed: provide safe defaults/noops so panels keep working
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const hoveredMask = -1;
-  const selectedMasks = new Set<number>();
-  const segmentMeta = new Map<number, SegmentMeta>();
-  const handleCanvasMouseMove = () => {};
-  const handleCanvasMouseLeave = () => {};
-  const handleCanvasClick = () => {};
-
-  const {
-    applyTexture,
-    applyTextureAI,
-    applyTextureOpenAI,
-    isApplying,
-    resetResult,
-  } = useApplyTexture();
-  const uploadedFile = useAppStore((s) => s.uploadedFile);
-
-  const applyTextureWith = useCallback(
-    async (texturePath: string) => {
-      if (isApplying) {
-        Swal.fire(
-          "Espera",
-          "Ya hay una operación en curso. Espera a que termine.",
-          "info",
-        );
-        return;
-      }
-      // Si el usuario subió una imagen en esta sesión, preferimos usar el endpoint OpenAI
-      if (uploadedFile) {
-        try {
-          // If the image was already uploaded to server, prefer passing the server filename (avoid sending generated previews)
-          const serverUrl = state?.previewImage ?? storedPreviewImage ?? null;
-          let source: File | string = uploadedFile;
-          // If preview points to uploads path, extract filename and send it instead
-          if (
-            typeof serverUrl === "string" &&
-            serverUrl.includes("/uploads/")
-          ) {
-            // serverUrl may be e.g. "http://localhost:8000/uploads/<filename>" or "/uploads/<filename>"
-            const idx = serverUrl.lastIndexOf("/uploads/");
-            const filename = serverUrl.substring(idx + "/uploads/".length);
-            source = filename;
-          }
-          const data = await applyTextureOpenAI(source, texturePath);
-          if (data?.url) {
-            setCurrentPreviewImage(data.url);
-          }
-        } catch (err) {
-          Swal.fire(
-            "Error",
-            err instanceof Error ? err.message : "Error al procesar",
-            "error",
-          );
-        }
-        return;
-      }
-      // Si no hay imagen subida y no hay segmentFilename, no hay flujo sin máscaras disponible
-      if (!segmentFilename) {
-        Swal.fire(
-          "Atención",
-          "Sube primero una imagen para aplicar el producto.",
-          "info",
-        );
-        return;
-      }
-      const baseFilename = accumulatedFilename ?? segmentFilename;
-      try {
-        // Si no hay máscaras seleccionadas (o no existen en el flujo simplificado), usamos IA
-        if (selectedMasks.size === 0) {
-          const data = await applyTextureAI(
-            baseFilename,
-            texturePath,
-            segmentFilename,
-          );
-
-          let resultData = data;
-          // Si es un job asíncrono, poll para esperar el resultado
-          if (data.job_id) {
-            const poll = async () => {
-              while (true) {
-                const res = await fetch(`${API_BASE}/seg/jobs/${data.job_id}`);
-                const job = await res.json();
-                if (job.status === "done") return job.result;
-                if (job.status === "failed")
-                  throw new Error(job.message || "AI failed");
-                await new Promise((r) => setTimeout(r, 2000));
-              }
-            };
-            resultData = await poll();
-          }
-
-          if (resultData?.url) {
-            setCurrentPreviewImage(
-              `${API_BASE}${resultData.url}?t=${Date.now()}`,
-            );
-            setAccumulatedFilename(resultData.filename);
-          }
-          return;
-        }
-
-        // Flujo tradicional (si hubiera máscaras)
-        const data = await applyTexture(
-          baseFilename,
-          [...selectedMasks],
-          texturePath,
-          segmentFilename,
-        );
-        if (data?.output_url) {
-          setCurrentPreviewImage(
-            `${API_BASE}${data.output_url}?t=${Date.now()}`,
-          );
-          setAccumulatedFilename(data.output_filename);
-        }
-      } catch (err) {
-        Swal.fire(
-          "Error",
-          err instanceof Error ? err.message : "Error al procesar",
-          "error",
-        );
-      }
-    },
-    [
-      applyTexture,
-      applyTextureAI,
-      segmentFilename,
-      selectedMasks,
-      accumulatedFilename,
-      setAccumulatedFilename,
-    ],
-  );
-
-  const handleApplyTexture = useCallback(async () => {
-    if (selectedProduct) await applyTextureWith(selectedProduct.ref);
-  }, [applyTextureWith, selectedProduct]);
-
-  const handleProductSelect = useCallback(
-    async (id: string | number | null) => {
-      handleSelectProduct(id);
-      if (!id) return;
-      const product = products.find((p) => p.id === id);
-      if (!product) return;
-      // If user uploaded a file, use OpenAI flow; otherwise require existing segmentFilename
-      if (uploadedFile) {
-        await applyTextureWith(product.ref);
-        return;
-      }
-      if (!segmentFilename) {
-        Swal.fire(
-          "Atención",
-          "Sube primero una imagen para aplicar el producto.",
-          "info",
-        );
-        return;
-      }
-      await applyTextureWith(product.ref);
-    },
-    [handleSelectProduct, segmentFilename, products, applyTextureWith],
-  );
-
-  const handleReset = useCallback(() => {
-    const original = state?.previewImage ?? storedPreviewImage ?? null;
-    setCurrentPreviewImage(original);
-    setAccumulatedFilename(null);
-    resetResult();
-  }, [state, storedPreviewImage, setAccumulatedFilename, resetResult]);
-
-  const handleDownload = useCallback(async () => {
-    if (!currentPreviewImage) return;
-    const response = await fetch(currentPreviewImage);
-    const blob = await response.blob();
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `hyper-reality-${Date.now()}.jpg`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  }, [currentPreviewImage]);
-
-  const handleShare = useCallback(async (): Promise<void> => {
-    let shareUrl = window.location.href;
-    const outputFilename = accumulatedFilename;
-    if (outputFilename) {
-      try {
-        const res = await fetch(`${API_BASE}/api/share`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            output_filename: outputFilename,
-            segment_filename: segmentFilename,
-          }),
-        });
-        if (res.ok) {
-          const data = (await res.json()) as { share_id: string };
-          shareUrl = `${window.location.origin}/app/share/${data.share_id}`;
-        }
-      } catch {
-        // fallback to current URL
-      }
-    }
-
-    const title = "My design with Hyper Reality Visualizer";
-    let reactRoot: ReturnType<typeof createRoot> | null = null;
-
-    await Swal.fire({
-      title: "Compartir diseño",
-      html: `
-        <div style="text-align:left">
-          <p style="font-size:13px;color:#666;margin-bottom:8px">Enlace de tu diseño:</p>
-          <div style="display:flex;gap:8px;align-items:center;margin-bottom:20px">
-            <input id="swal-share-url" readonly value="${shareUrl}"
-              style="flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:8px;font-size:12px;background:#f9f9f9;outline:none;color:#333;" />
-            <button id="swal-copy-btn"
-              style="padding:8px 16px;background:#0047AB;color:white;border:none;border-radius:8px;cursor:pointer;font-size:13px;white-space:nowrap;font-weight:600;">
-              Copiar
-            </button>
-          </div>
-          <p style="font-size:13px;color:#666;margin-bottom:12px">Compartir en:</p>
-          <div id="swal-share-buttons" style="display:flex;gap:12px;flex-wrap:wrap;"></div>
-        </div>
-      `,
-      showConfirmButton: false,
-      showCloseButton: true,
-      width: 500,
-      didOpen: () => {
-        const copyBtn = document.getElementById("swal-copy-btn");
-        copyBtn?.addEventListener("click", async () => {
-          await navigator.clipboard.writeText(shareUrl).catch(() => {});
-          if (copyBtn) {
-            copyBtn.textContent = "¡Copiado!";
-            copyBtn.style.background = "#16a34a";
-          }
-          setTimeout(() => {
-            if (copyBtn) {
-              copyBtn.textContent = "Copiar";
-              copyBtn.style.background = "#0047AB";
-            }
-          }, 2000);
-        });
-        const container = document.getElementById("swal-share-buttons");
-        if (container) {
-          reactRoot = createRoot(container);
-          reactRoot.render(
-            <>
-              <WhatsappShareButton url={shareUrl} title={title}>
-                <WhatsappIcon size={48} round />
-              </WhatsappShareButton>
-              <TelegramShareButton url={shareUrl} title={title}>
-                <TelegramIcon size={48} round />
-              </TelegramShareButton>
-              <TwitterShareButton url={shareUrl} title={title}>
-                <XIcon size={48} round />
-              </TwitterShareButton>
-              <FacebookShareButton url={shareUrl}>
-                <FacebookIcon size={48} round />
-              </FacebookShareButton>
-              <EmailShareButton
-                url={shareUrl}
-                subject={title}
-                body="Mira mi diseño de habitación:"
-              >
-                <EmailIcon size={48} round />
-              </EmailShareButton>
-            </>,
-          );
-        }
-      },
-      willClose: () => {
-        reactRoot?.unmount();
-      },
-    });
-  }, [segmentFilename, accumulatedFilename]);
-
-  const clampOffset = useCallback(
-    (x: number, y: number, zoomValue: number) => {
-      const wrapper = wrapperRef.current;
-      if (!wrapper || imageSize.width === 0 || imageSize.height === 0)
-        return { x, y };
-      const containerRect = wrapper.getBoundingClientRect();
-      const scaledWidth = imageSize.width * zoomValue;
-      const scaledHeight = imageSize.height * zoomValue;
-      const maxX = Math.max(0, (scaledWidth - containerRect.width) / 2);
-      const maxY = Math.max(0, (scaledHeight - containerRect.height) / 2);
-      return {
-        x: Math.max(-maxX, Math.min(maxX, x)),
-        y: Math.max(-maxY, Math.min(maxY, y)),
-      };
-    },
-    [imageSize],
-  );
-
-  const updateImageSize = useCallback(
-    (img: HTMLImageElement) => {
-      const wrapper = wrapperRef.current;
-      if (!wrapper) return;
-      const containerRect = wrapper.getBoundingClientRect();
-      const naturalRatio = img.naturalWidth / img.naturalHeight;
-      const containerRatio = containerRect.width / containerRect.height;
-      const width =
-        naturalRatio > containerRatio
-          ? containerRect.width
-          : containerRect.height * naturalRatio;
-      const height =
-        naturalRatio > containerRatio
-          ? containerRect.width / naturalRatio
-          : containerRect.height;
-      setImageSize({ width, height });
-      setOffset((current) => clampOffset(current.x, current.y, zoom));
-    },
-    [clampOffset, zoom],
-  );
-
-  const handleWheel = useCallback(
-    (event: WheelEvent) => {
-      event.preventDefault();
-      setZoom((currentZoom) => {
-        const next = Math.min(
-          3,
-          Math.max(1, currentZoom - event.deltaY * 0.0015),
-        );
-        setOffset((current) => clampOffset(current.x, current.y, next));
-        return next;
-      });
-    },
-    [clampOffset],
-  );
-
-  useEffect(() => {
-    const el = wrapperRef.current;
-    if (!el) return;
-    el.addEventListener("wheel", handleWheel, { passive: false });
-    return () => el.removeEventListener("wheel", handleWheel);
-  }, [handleWheel]);
-
-  const handlePointerDown = useCallback(
-    (event: PointerEvent<HTMLDivElement>) => {
-      setDragStart({ x: event.clientX, y: event.clientY });
-    },
-    [],
-  );
-
-  const handlePointerMove = useCallback(
-    (event: PointerEvent<HTMLDivElement>) => {
-      if (!dragStart || zoom <= 1) return;
-      const dx = event.clientX - dragStart.x;
-      const dy = event.clientY - dragStart.y;
-      setOffset((current) => clampOffset(current.x + dx, current.y + dy, zoom));
-      setDragStart({ x: event.clientX, y: event.clientY });
-    },
-    [clampOffset, dragStart, zoom],
-  );
-
-  const handlePointerUp = useCallback(() => setDragStart(null), []);
-
-  // Props compartidos entre mobile y desktop para RoomPreviewPanel
-  const previewPanelProps = {
-    previewImage: currentPreviewImage,
-    offset,
-    zoom,
-    imageSize,
-    wrapperRef,
-    canvasRef,
-    selectedProduct,
-    selectedMasks,
-    hoveredMask,
-    segmentMeta,
-    isApplying,
-    onBack: () => navigate("/app"),
-    onPointerDown: handlePointerDown,
-    onPointerMove: handlePointerMove,
-    onPointerUp: handlePointerUp,
-    updateImageSize,
-    onCanvasMouseMove: handleCanvasMouseMove,
-    onCanvasMouseLeave: handleCanvasMouseLeave,
-    onCanvasClick: handleCanvasClick,
-    onApplyTexture: handleApplyTexture,
-    onReset: handleReset,
-    onDownload: handleDownload,
-    onShare: handleShare,
-    maskCount: state?.maskCount ?? 0,
-  };
-
-  // ── Mobile strip: thumbnails + búsqueda ──────────────────────────────────
-  const MobileProductStrip = (
-    <div
-      style={{
-        background: "#fff",
-        borderTop: "1px solid #e5e7eb",
-        flexShrink: 0,
-      }}
-    >
-      {isSearchOpen && (
-        <div style={{ padding: "8px 12px 4px" }}>
-          <div style={{ position: "relative" }}>
-            <Search
-              style={{
-                position: "absolute",
-                left: 10,
-                top: "50%",
-                transform: "translateY(-50%)",
-                width: 16,
-                height: 16,
-                color: "#9ca3af",
-              }}
-            />
-            <input
-              autoFocus
-              type="text"
-              placeholder="Buscar productos..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              style={{
-                width: "100%",
-                paddingLeft: 34,
-                paddingRight: 32,
-                paddingTop: 8,
-                paddingBottom: 8,
-                borderRadius: 8,
-                border: "2px solid #0047AB",
-                outline: "none",
-                fontSize: 14,
-                color: "#333",
-                boxSizing: "border-box",
-              }}
-            />
-            <button
-              onClick={closeSearch}
-              style={{
-                position: "absolute",
-                right: 8,
-                top: "50%",
-                transform: "translateY(-50%)",
-                background: "none",
-                border: "none",
-                cursor: "pointer",
-                padding: 4,
-              }}
-            >
-              <X style={{ width: 14, height: 14, color: "#9ca3af" }} />
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Thumbnails con scroll horizontal */}
-      <div
-        style={{
-          display: "flex",
-          overflowX: "auto",
-          gap: 8,
-          padding: "8px 12px",
-          scrollbarWidth: "none",
-        }}
-      >
-        {loading ? (
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "100%",
-              height: 64,
-              fontSize: 12,
-              color: "#9ca3af",
-            }}
-          >
-            Cargando...
-          </div>
-        ) : (
-          filteredProducts.map((product) => (
-            <button
-              key={product.id}
-              onClick={() => handleProductSelect(product.id)}
-              style={{
-                flexShrink: 0,
-                width: 64,
-                height: 64,
-                borderRadius: 12,
-                overflow: "hidden",
-                border:
-                  openProductId === product.id
-                    ? "2.5px solid #0047AB"
-                    : "2px solid #e5e7eb",
-                boxShadow:
-                  openProductId === product.id ? "0 0 0 2px #dbe7ff" : "none",
-                cursor: "pointer",
-                padding: 0,
-                background: "none",
-                transition: "border-color 0.15s",
-              }}
-            >
-              <img
-                src={product.image}
-                alt={product.name}
-                style={{
-                  width: "100%",
-                  height: "100%",
-                  objectFit: "cover",
-                  display: "block",
-                }}
-              />
-            </button>
-          ))
-        )}
-      </div>
-
-      {/* Info del producto + íconos */}
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          padding: "0 12px 10px",
-          gap: 8,
-          minHeight: 36,
-        }}
-      >
-        {selectedProduct ? (
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <p
-              style={{
-                fontSize: 10,
-                color: "#707070",
-                textTransform: "uppercase",
-                letterSpacing: "0.05em",
-                margin: 0,
-                lineHeight: 1,
-              }}
-            >
-              {selectedProduct.brand}
-            </p>
-            <p
-              style={{
-                fontSize: 12,
-                fontWeight: 600,
-                color: "#333",
-                margin: 0,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-              }}
-            >
-              {selectedProduct.name}
-            </p>
-          </div>
-        ) : (
-          <div style={{ flex: 1 }} />
-        )}
-        <div style={{ display: "flex", gap: 4, flexShrink: 0 }}>
-          <button
-            onClick={() => setIsSearchOpen(!isSearchOpen)}
-            style={{
-              padding: 6,
-              borderRadius: 8,
-              border: "none",
-              background: "none",
-              cursor: "pointer",
-            }}
-          >
-            <Search style={{ width: 16, height: 16, color: "#0047AB" }} />
-          </button>
-          <button
-            style={{
-              padding: 6,
-              borderRadius: 8,
-              border: "none",
-              background: "none",
-              cursor: "pointer",
-            }}
-          >
-            <SlidersHorizontal
-              style={{ width: 16, height: 16, color: "#0047AB" }}
-            />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-
-  // ── Desktop sidebar ───────────────────────────────────────────────────────
-  const DesktopSidebar = (
-    <div
-      style={{
-        width: "25%",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        borderRight: "1px solid rgba(0,71,171,0.1)",
-        background: "#fff",
-        flexShrink: 0,
-      }}
-    >
-      <div style={{ padding: "24px 24px 0" }}>
-        <div style={{ height: 1, background: "#e5e7eb", width: "100%" }} />
-
-        {/* Barra de herramientas */}
-        <div
-          style={{ display: "flex", alignItems: "center", gap: 8, height: 46 }}
-        >
-          {!isSearchOpen && (
-            <button
-              onClick={() => setIsSearchOpen(true)}
-              className="p-3 rounded-lg border border-[#0047AB] bg-[#0047AB] text-white hover:bg-[#003a94] transition-all duration-300 flex items-center justify-center shadow-sm"
-            >
-              <Search className="w-5 h-5" />
-            </button>
-          )}
-          <button className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border border-[#0047AB] bg-white text-[#0047AB] hover:bg-[#eaf1ff] transition-all duration-300 shadow-sm">
-            <SlidersHorizontal className="w-4 h-4 text-[#0047AB]" />
-            <span className="font-medium text-sm">Filtros</span>
-          </button>
-          <div className="flex border border-gray-300 rounded-lg overflow-hidden shadow-sm">
-            <button
-              onClick={showList}
-              className={`p-2.5 flex items-center justify-center transition-colors ${viewMode === "list" ? "bg-[#0047AB] text-white" : "bg-white text-[#0047AB] hover:bg-[#eaf1ff] border-r border-[#dbe7ff]"}`}
-            >
-              <Menu className="w-5 h-5" />
-            </button>
-            <button
-              onClick={showGrid}
-              className={`p-2.5 flex items-center justify-center transition-colors ${viewMode === "grid" ? "bg-[#0047AB] text-white" : "bg-white text-[#0047AB] hover:bg-[#eaf1ff]"}`}
-            >
-              <LayoutGrid className="w-5 h-5" />
-            </button>
-          </div>
-        </div>
-
-        {isSearchOpen && (
-          <div className="animate-in slide-in-from-top-2 fade-in duration-300">
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
-              <input
-                autoFocus
-                type="text"
-                placeholder="¿Qué estás buscando?..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full pl-11 pr-10 py-3 rounded-lg border-2 border-[#0047AB] bg-white focus:outline-none transition-all text-sm text-[#333333]"
-              />
-              <button
-                onClick={closeSearch}
-                className="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 bg-white rounded-full shadow-sm"
-              >
-                <X className="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Lista de productos con acordeón por categoría */}
-      <div className="flex-1 overflow-y-auto py-2">
-        {loading ? (
-          <div className="flex items-center justify-center h-32 text-sm text-gray-400">
-            Cargando productos...
-          </div>
-        ) : error ? (
-          <div className="flex items-center justify-center h-32 text-sm text-red-400">
-            {error}
-          </div>
-        ) : searchQuery ? (
-          /* Búsqueda activa → lista plana de resultados */
-          <div className={viewMode === "grid" ? "px-4" : "px-2"}>
-            {filteredProducts.length === 0 ? (
-              <div className="flex items-center justify-center h-24 text-sm text-gray-400">
-                Sin resultados
-              </div>
-            ) : viewMode === "grid" ? (
-              <div className="flex flex-col gap-4">
-                {chunkArray(filteredProducts, 3).map((group, i) => (
-                  <ProductGroupCard
-                    key={i}
-                    group={group}
-                    openProductId={openProductId}
-                    onSelectProduct={handleProductSelect}
-                  />
-                ))}
-              </div>
-            ) : (
-              <div className="grid grid-cols-1 gap-3">
-                {filteredProducts.map((product) => (
-                  <IndividualProductCard
-                    key={product.id}
-                    product={product}
-                    isSelected={openProductId === product.id}
-                    onToggle={() => handleProductSelect(product.id)}
-                  />
-                ))}
-              </div>
-            )}
-          </div>
-        ) : (
-          /* Sin búsqueda → acordeón por categoría */
-          <div className="flex flex-col">
-            {categories.map((cat) => {
-              const isOpen = isCategoryOpen(cat.id);
-              return (
-                <div
-                  key={cat.id}
-                  className="border-b border-gray-100 last:border-0"
-                >
-                  <button
-                    onClick={() => toggleCategory(cat.id)}
-                    className="w-full flex items-center justify-between px-4 py-3 hover:bg-[#f4f8ff] transition-colors text-left"
-                  >
-                    <div className="flex items-center gap-2 min-w-0">
-                      <span className="font-semibold text-sm text-[#333] truncate">
-                        {cat.nombre}
-                      </span>
-                      <span className="text-xs text-[#0047AB] bg-[#eaf1ff] px-1.5 py-0.5 rounded-full flex-shrink-0">
-                        {cat.products.length}
-                      </span>
-                    </div>
-                    <ChevronDown
-                      className={`w-4 h-4 text-[#0047AB] flex-shrink-0 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
-                    />
-                  </button>
-
-                  {isOpen && (
-                    <div
-                      className={
-                        viewMode === "grid" ? "px-4 pb-4" : "px-2 pb-2"
-                      }
-                    >
-                      {viewMode === "grid" ? (
-                        <div className="flex flex-col gap-4">
-                          {chunkArray(cat.products, 3).map((group, i) => (
-                            <ProductGroupCard
-                              key={i}
-                              group={group}
-                              openProductId={openProductId}
-                              onSelectProduct={handleProductSelect}
-                            />
-                          ))}
-                        </div>
-                      ) : (
-                        <div className="grid grid-cols-1 gap-3">
-                          {cat.products.map((product) => (
-                            <IndividualProductCard
-                              key={product.id}
-                              product={product}
-                              isSelected={openProductId === product.id}
-                              onToggle={() => handleProductSelect(product.id)}
-                            />
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-
-  return (
-    <div
-      style={{
-        height: "100svh",
-        width: "100%",
-        background: "#fff",
-        fontFamily: "sans-serif",
-        color: "#000",
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      {isApplying && (
-        <div
-          aria-hidden={!isApplying}
-          style={{
-            position: "fixed",
-            inset: 0,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            background: "rgba(0,0,0,0.45)",
-            zIndex: 9999,
-            backdropFilter: "blur(2px)",
-            WebkitBackdropFilter: "blur(2px)",
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: 12,
-              padding: 20,
-              borderRadius: 12,
-              background: "rgba(255,255,255,0.98)",
-              boxShadow: "0 6px 24px rgba(0,0,0,0.3)",
-              minWidth: 220,
-            }}
-          >
-            <div
-              style={{
-                width: 48,
-                height: 48,
-                borderRadius: 24,
-                border: "4px solid #e6e6e6",
-                borderTopColor: "#0047AB",
-                animation: "hr-spin 1s linear infinite",
-              }}
-            />
-            <div style={{ fontSize: 14, color: "#111", textAlign: "center" }}>
-              Generando imagen… Por favor espera
-            </div>
-          </div>
-          <style>{`@keyframes hr-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }`}</style>
-        </div>
-      )}
-      {isMobile ? (
-        // ── Layout Mobile: imagen arriba, strip de thumbnails abajo ──────────
-        <div
-          style={{
-            flex: 1,
-            display: "flex",
-            flexDirection: "column",
-            minHeight: 0,
-          }}
-        >
-          <div style={{ flex: 1, minHeight: 0, overflow: "hidden" }}>
-            <RoomPreviewPanel {...previewPanelProps} />
-          </div>
-          {MobileProductStrip}
-        </div>
-      ) : (
-        // ── Layout Desktop: sidebar izquierda + imagen derecha ───────────────
-        <div
-          style={{
-            flex: 1,
-            display: "flex",
-            flexDirection: "row",
-            minHeight: 0,
-          }}
-        >
-          {DesktopSidebar}
-          <div style={{ flex: 1, minWidth: 0, overflow: "hidden" }}>
-            <RoomPreviewPanel {...previewPanelProps} />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type PointerEvent,
+} from "react";
+import { ChevronDown } from "lucide-react";
+import { createRoot } from "react-dom/client";
+import { useLocation, useNavigate } from "react-router-dom";
+import {
+  LayoutGrid,
+  Search,
+  SlidersHorizontal,
+  Menu,
+  X,
+} from "lucide-react";
+import Swal from "sweetalert2";
+import {
+  WhatsappShareButton, WhatsappIcon,
+  TelegramShareButton, TelegramIcon,
+  TwitterShareButton, XIcon,
+  FacebookShareButton, FacebookIcon,
+  EmailShareButton, EmailIcon,
+} from "react-share";
+import { ProductGroupCard, IndividualProductCard } from "./ProductCards";
+import { useRoomVisualizer } from "./roomVisualizerHooks";
+import { useCatalogProducts } from "./useCatalogProducts";
+import { RoomPreviewPanel } from "./RoomPreviewPanel";
+import useAppStore from "../../store/useAppStore";
+import { useSegmentCanvas } from "../../hooks/useSegmentCanvas";
+import { useApplyTexture } from "../../hooks/useApplyTexture";
+import { API_BASE } from "../../api/client";
+
+type RoomVisualizerState = {
+  previewImage?: string;
+  filename?: string;
+  maskCount?: number;
+};
+
+// ── Hook para detectar mobile (< 1024px) ─────────────────────────────────────
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 1024);
+  useEffect(() => {
+    const handler = () => setIsMobile(window.innerWidth < 1024);
+    window.addEventListener("resize", handler);
+    return () => window.removeEventListener("resize", handler);
+  }, []);
+  return isMobile;
+}
+
+export default function RoomVisualizer() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const state = location.state as RoomVisualizerState | null;
+  const isMobile = useIsMobile();
+
+  const storedPreviewImage = useAppStore((store) => store.previewImage);
+  const segmentFilename = useAppStore((store) => store.segmentFilename);
+  const accumulatedFilename = useAppStore((store) => store.accumulatedFilename);
+  const setAccumulatedFilename = useAppStore((store) => store.setAccumulatedFilename);
+  const setSegmentResult = useAppStore((store) => store.setSegmentResult);
+  const setPreviewImage = useAppStore((store) => store.setPreviewImage);
+
+  // Restaurar segmentFilename y previewImage cuando se abre una sesión del historial
+  useEffect(() => {
+    if (state?.filename && state.filename !== segmentFilename) {
+      setSegmentResult(state.filename, state.maskCount ?? 0);
+      setAccumulatedFilename(null); // limpiar ediciones de sesión anterior
+    }
+    if (state?.previewImage) {
+      setPreviewImage(state.previewImage);
+    }
+  // Solo al montar — state no cambia tras la navegación
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const [currentPreviewImage, setCurrentPreviewImage] = useState<string | null>(() => {
+    if (accumulatedFilename) return `${API_BASE}/seg/image/${accumulatedFilename}`;
+    return state?.previewImage ?? storedPreviewImage ?? null;
+  });
+
+  const [zoom, setZoom] = useState(1);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [dragStart, setDragStart] = useState<{ x: number; y: number } | null>(null);
+  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const { products, categories, loading, error } = useCatalogProducts();
+
+  // null = sin interacción (primera categoría abierta por defecto)
+  // Set vacío = usuario cerró todo deliberadamente
+  const [openCategoryIds, setOpenCategoryIds] = useState<Set<string> | null>(null);
+
+  const isCategoryOpen = useCallback(
+    (id: string) => {
+      if (openCategoryIds === null) {
+        return categories.length > 0 && id === categories[0].id;
+      }
+      return openCategoryIds.has(id);
+    },
+    [openCategoryIds, categories],
+  );
+
+  const toggleCategory = useCallback((id: string) => {
+    setOpenCategoryIds((prev) => {
+      const base =
+        prev === null
+          ? categories.length > 0
+            ? new Set([categories[0].id])
+            : new Set<string>()
+          : new Set(prev);
+      if (base.has(id)) base.delete(id);
+      else base.add(id);
+      return base;
+    });
+  }, [categories]);
+
+  const {
+    viewMode, showGrid, showList,
+    openProductId, handleSelectProduct, selectedProduct,
+    isSearchOpen, setIsSearchOpen,
+    searchQuery, setSearchQuery, closeSearch,
+    filteredProducts, chunkArray,
+  } = useRoomVisualizer(products);
+
+  useEffect(() => { showList(); }, [showList]);
+
+
+  const {
+    canvasRef,
+    hoveredMask,
+    selectedMasks,
+    segmentMeta,
+    handleCanvasMouseMove,
+    handleCanvasMouseLeave,
+    handleCanvasClick,
+    clearSelection,
+  } = useSegmentCanvas(segmentFilename);
+
+  const { applyTexture, isApplying, resetResult } = useApplyTexture();
+
+  const applyTextureWith = useCallback(
+    async (texturePath: string) => {
+      if (!segmentFilename || selectedMasks.size === 0) return;
+      const baseFilename = accumulatedFilename ?? segmentFilename;
+      try {
+        const data = await applyTexture(baseFilename, [...selectedMasks], texturePath, segmentFilename);
+        if (data?.output_url) {
+          setCurrentPreviewImage(`${API_BASE}${data.output_url}?t=${Date.now()}`);
+          setAccumulatedFilename(data.output_filename);
+          clearSelection();
+        }
+      } catch {
+        // error ya guardado en el hook
+      }
+    },
+    [applyTexture, segmentFilename, selectedMasks, clearSelection, accumulatedFilename, setAccumulatedFilename],
+  );
+
+  const handleApplyTexture = useCallback(async () => {
+    if (selectedProduct) await applyTextureWith(selectedProduct.ref);
+  }, [applyTextureWith, selectedProduct]);
+
+  const handleProductSelect = useCallback(
+    async (id: string | number | null) => {
+      handleSelectProduct(id);
+      if (!id || selectedMasks.size === 0 || !segmentFilename) return;
+      const product = products.find((p) => p.id === id);
+      if (product) await applyTextureWith(product.ref);
+    },
+    [handleSelectProduct, selectedMasks, segmentFilename, products, applyTextureWith],
+  );
+
+  const handleReset = useCallback(() => {
+    const original = state?.previewImage ?? storedPreviewImage ?? null;
+    setCurrentPreviewImage(original);
+    setAccumulatedFilename(null);
+    clearSelection();
+    resetResult();
+  }, [state, storedPreviewImage, setAccumulatedFilename, clearSelection, resetResult]);
+
+  const handleDownload = useCallback(async () => {
+    if (!currentPreviewImage) return;
+    const response = await fetch(currentPreviewImage);
+    const blob = await response.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `hyper-reality-${Date.now()}.jpg`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, [currentPreviewImage]);
+
+  const handleShare = useCallback(async (): Promise<void> => {
+    let shareUrl = window.location.href;
+    const outputFilename = accumulatedFilename;
+    if (outputFilename) {
+      try {
+        const res = await fetch(`${API_BASE}/api/share`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ output_filename: outputFilename, segment_filename: segmentFilename }),
+        });
+        if (res.ok) {
+          const data = (await res.json()) as { share_id: string };
+          shareUrl = `${window.location.origin}/app/share/${data.share_id}`;
+        }
+      } catch {
+        // fallback to current URL
+      }
+    }
+
+    const title = "My design with Hyper Reality Visualizer";
+    let reactRoot: ReturnType<typeof createRoot> | null = null;
+
+    await Swal.fire({
+      title: "Compartir diseño",
+      html: `
+        <div style="text-align:left">
+          <p style="font-size:13px;color:#666;margin-bottom:8px">Enlace de tu diseño:</p>
+          <div style="display:flex;gap:8px;align-items:center;margin-bottom:20px">
+            <input id="swal-share-url" readonly value="${shareUrl}"
+              style="flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:8px;font-size:12px;background:#f9f9f9;outline:none;color:#333;" />
+            <button id="swal-copy-btn"
+              style="padding:8px 16px;background:#0047AB;color:white;border:none;border-radius:8px;cursor:pointer;font-size:13px;white-space:nowrap;font-weight:600;">
+              Copiar
+            </button>
+          </div>
+          <p style="font-size:13px;color:#666;margin-bottom:12px">Compartir en:</p>
+          <div id="swal-share-buttons" style="display:flex;gap:12px;flex-wrap:wrap;"></div>
+        </div>
+      `,
+      showConfirmButton: false,
+      showCloseButton: true,
+      width: 500,
+      didOpen: () => {
+        const copyBtn = document.getElementById("swal-copy-btn");
+        copyBtn?.addEventListener("click", async () => {
+          await navigator.clipboard.writeText(shareUrl).catch(() => {});
+          if (copyBtn) { copyBtn.textContent = "¡Copiado!"; copyBtn.style.background = "#16a34a"; }
+          setTimeout(() => {
+            if (copyBtn) { copyBtn.textContent = "Copiar"; copyBtn.style.background = "#0047AB"; }
+          }, 2000);
+        });
+        const container = document.getElementById("swal-share-buttons");
+        if (container) {
+          reactRoot = createRoot(container);
+          reactRoot.render(
+            <>
+              <WhatsappShareButton url={shareUrl} title={title}><WhatsappIcon size={48} round /></WhatsappShareButton>
+              <TelegramShareButton url={shareUrl} title={title}><TelegramIcon size={48} round /></TelegramShareButton>
+              <TwitterShareButton url={shareUrl} title={title}><XIcon size={48} round /></TwitterShareButton>
+              <FacebookShareButton url={shareUrl}><FacebookIcon size={48} round /></FacebookShareButton>
+              <EmailShareButton url={shareUrl} subject={title} body="Mira mi diseño de habitación:"><EmailIcon size={48} round /></EmailShareButton>
+            </>,
+          );
+        }
+      },
+      willClose: () => { reactRoot?.unmount(); },
+    });
+  }, [segmentFilename, accumulatedFilename]);
+
+  const clampOffset = useCallback(
+    (x: number, y: number, zoomValue: number) => {
+      const wrapper = wrapperRef.current;
+      if (!wrapper || imageSize.width === 0 || imageSize.height === 0) return { x, y };
+      const containerRect = wrapper.getBoundingClientRect();
+      const scaledWidth = imageSize.width * zoomValue;
+      const scaledHeight = imageSize.height * zoomValue;
+      const maxX = Math.max(0, (scaledWidth - containerRect.width) / 2);
+      const maxY = Math.max(0, (scaledHeight - containerRect.height) / 2);
+      return {
+        x: Math.max(-maxX, Math.min(maxX, x)),
+        y: Math.max(-maxY, Math.min(maxY, y)),
+      };
+    },
+    [imageSize],
+  );
+
+  const updateImageSize = useCallback(
+    (img: HTMLImageElement) => {
+      const wrapper = wrapperRef.current;
+      if (!wrapper) return;
+      const containerRect = wrapper.getBoundingClientRect();
+      const naturalRatio = img.naturalWidth / img.naturalHeight;
+      const containerRatio = containerRect.width / containerRect.height;
+      const width = naturalRatio > containerRatio ? containerRect.width : containerRect.height * naturalRatio;
+      const height = naturalRatio > containerRatio ? containerRect.width / naturalRatio : containerRect.height;
+      setImageSize({ width, height });
+      setOffset((current) => clampOffset(current.x, current.y, zoom));
+    },
+    [clampOffset, zoom],
+  );
+
+  const handleWheel = useCallback(
+    (event: WheelEvent) => {
+      event.preventDefault();
+      setZoom((currentZoom) => {
+        const next = Math.min(3, Math.max(1, currentZoom - event.deltaY * 0.0015));
+        setOffset((current) => clampOffset(current.x, current.y, next));
+        return next;
+      });
+    },
+    [clampOffset],
+  );
+
+  useEffect(() => {
+    const el = wrapperRef.current;
+    if (!el) return;
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => el.removeEventListener("wheel", handleWheel);
+  }, [handleWheel]);
+
+  const handlePointerDown = useCallback((event: PointerEvent<HTMLDivElement>) => {
+    setDragStart({ x: event.clientX, y: event.clientY });
+  }, []);
+
+  const handlePointerMove = useCallback(
+    (event: PointerEvent<HTMLDivElement>) => {
+      if (!dragStart || zoom <= 1) return;
+      const dx = event.clientX - dragStart.x;
+      const dy = event.clientY - dragStart.y;
+      setOffset((current) => clampOffset(current.x + dx, current.y + dy, zoom));
+      setDragStart({ x: event.clientX, y: event.clientY });
+    },
+    [clampOffset, dragStart, zoom],
+  );
+
+  const handlePointerUp = useCallback(() => setDragStart(null), []);
+
+  // Props compartidos entre mobile y desktop para RoomPreviewPanel
+  const previewPanelProps = {
+    previewImage: currentPreviewImage,
+    offset,
+    zoom,
+    imageSize,
+    wrapperRef,
+    canvasRef,
+    selectedProduct,
+    selectedMasks,
+    hoveredMask,
+    segmentMeta,
+    isApplying,
+    onBack: () => navigate("/app"),
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    updateImageSize,
+    onCanvasMouseMove: handleCanvasMouseMove,
+    onCanvasMouseLeave: handleCanvasMouseLeave,
+    onCanvasClick: handleCanvasClick,
+    onApplyTexture: handleApplyTexture,
+    onReset: handleReset,
+    onDownload: handleDownload,
+    onShare: handleShare,
+  };
+
+  // ── Mobile strip: thumbnails + búsqueda ──────────────────────────────────
+  const MobileProductStrip = (
+    <div style={{ background: "#fff", borderTop: "1px solid #e5e7eb", flexShrink: 0 }}>
+      {isSearchOpen && (
+        <div style={{ padding: "8px 12px 4px" }}>
+          <div style={{ position: "relative" }}>
+            <Search style={{ position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", width: 16, height: 16, color: "#9ca3af" }} />
+            <input
+              autoFocus
+              type="text"
+              placeholder="Buscar productos..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              style={{
+                width: "100%",
+                paddingLeft: 34,
+                paddingRight: 32,
+                paddingTop: 8,
+                paddingBottom: 8,
+                borderRadius: 8,
+                border: "2px solid #0047AB",
+                outline: "none",
+                fontSize: 14,
+                color: "#333",
+                boxSizing: "border-box",
+              }}
+            />
+            <button
+              onClick={closeSearch}
+              style={{ position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", padding: 4 }}
+            >
+              <X style={{ width: 14, height: 14, color: "#9ca3af" }} />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Thumbnails con scroll horizontal */}
+      <div style={{ display: "flex", overflowX: "auto", gap: 8, padding: "8px 12px", scrollbarWidth: "none" }}>
+        {loading ? (
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: 64, fontSize: 12, color: "#9ca3af" }}>
+            Cargando...
+          </div>
+        ) : (
+          filteredProducts.map((product) => (
+            <button
+              key={product.id}
+              onClick={() => handleProductSelect(product.id)}
+              style={{
+                flexShrink: 0,
+                width: 64,
+                height: 64,
+                borderRadius: 12,
+                overflow: "hidden",
+                border: openProductId === product.id ? "2.5px solid #0047AB" : "2px solid #e5e7eb",
+                boxShadow: openProductId === product.id ? "0 0 0 2px #dbe7ff" : "none",
+                cursor: "pointer",
+                padding: 0,
+                background: "none",
+                transition: "border-color 0.15s",
+              }}
+            >
+              <img
+                src={product.image}
+                alt={product.name}
+                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
+              />
+            </button>
+          ))
+        )}
+      </div>
+
+      {/* Info del producto + íconos */}
+      <div style={{ display: "flex", alignItems: "center", padding: "0 12px 10px", gap: 8, minHeight: 36 }}>
+        {selectedProduct ? (
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <p style={{ fontSize: 10, color: "#707070", textTransform: "uppercase", letterSpacing: "0.05em", margin: 0, lineHeight: 1 }}>
+              {selectedProduct.brand}
+            </p>
+            <p style={{ fontSize: 12, fontWeight: 600, color: "#333", margin: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+              {selectedProduct.name}
+            </p>
+          </div>
+        ) : (
+          <div style={{ flex: 1 }} />
+        )}
+        <div style={{ display: "flex", gap: 4, flexShrink: 0 }}>
+          <button
+            onClick={() => setIsSearchOpen(!isSearchOpen)}
+            style={{ padding: 6, borderRadius: 8, border: "none", background: "none", cursor: "pointer" }}
+          >
+            <Search style={{ width: 16, height: 16, color: "#0047AB" }} />
+          </button>
+          <button
+            style={{ padding: 6, borderRadius: 8, border: "none", background: "none", cursor: "pointer" }}
+          >
+            <SlidersHorizontal style={{ width: 16, height: 16, color: "#0047AB" }} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  // ── Desktop sidebar ───────────────────────────────────────────────────────
+  const DesktopSidebar = (
+    <div style={{ width: "25%", height: "100%", display: "flex", flexDirection: "column", borderRight: "1px solid rgba(0,71,171,0.1)", background: "#fff", flexShrink: 0 }}>
+      <div style={{ padding: "24px 24px 0" }}>
+        <div style={{ height: 1, background: "#e5e7eb", width: "100%" }} />
+
+        {/* Barra de herramientas */}
+        <div style={{ display: "flex", alignItems: "center", gap: 8, height: 46 }}>
+          {!isSearchOpen && (
+            <button
+              onClick={() => setIsSearchOpen(true)}
+              className="p-3 rounded-lg border border-[#0047AB] bg-[#0047AB] text-white hover:bg-[#003a94] transition-all duration-300 flex items-center justify-center shadow-sm"
+            >
+              <Search className="w-5 h-5" />
+            </button>
+          )}
+          <button className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border border-[#0047AB] bg-white text-[#0047AB] hover:bg-[#eaf1ff] transition-all duration-300 shadow-sm">
+            <SlidersHorizontal className="w-4 h-4 text-[#0047AB]" />
+            <span className="font-medium text-sm">Filtros</span>
+          </button>
+          <div className="flex border border-gray-300 rounded-lg overflow-hidden shadow-sm">
+            <button
+              onClick={showList}
+              className={`p-2.5 flex items-center justify-center transition-colors ${viewMode === "list" ? "bg-[#0047AB] text-white" : "bg-white text-[#0047AB] hover:bg-[#eaf1ff] border-r border-[#dbe7ff]"}`}
+            >
+              <Menu className="w-5 h-5" />
+            </button>
+            <button
+              onClick={showGrid}
+              className={`p-2.5 flex items-center justify-center transition-colors ${viewMode === "grid" ? "bg-[#0047AB] text-white" : "bg-white text-[#0047AB] hover:bg-[#eaf1ff]"}`}
+            >
+              <LayoutGrid className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {isSearchOpen && (
+          <div className="animate-in slide-in-from-top-2 fade-in duration-300">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+              <input
+                autoFocus
+                type="text"
+                placeholder="¿Qué estás buscando?..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-11 pr-10 py-3 rounded-lg border-2 border-[#0047AB] bg-white focus:outline-none transition-all text-sm text-[#333333]"
+              />
+              <button
+                onClick={closeSearch}
+                className="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 bg-white rounded-full shadow-sm"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Lista de productos con acordeón por categoría */}
+      <div className="flex-1 overflow-y-auto py-2">
+        {loading ? (
+          <div className="flex items-center justify-center h-32 text-sm text-gray-400">Cargando productos...</div>
+        ) : error ? (
+          <div className="flex items-center justify-center h-32 text-sm text-red-400">{error}</div>
+        ) : searchQuery ? (
+          /* Búsqueda activa → lista plana de resultados */
+          <div className={viewMode === "grid" ? "px-4" : "px-2"}>
+            {filteredProducts.length === 0 ? (
+              <div className="flex items-center justify-center h-24 text-sm text-gray-400">Sin resultados</div>
+            ) : viewMode === "grid" ? (
+              <div className="flex flex-col gap-4">
+                {chunkArray(filteredProducts, 3).map((group, i) => (
+                  <ProductGroupCard key={i} group={group} openProductId={openProductId} onSelectProduct={handleProductSelect} />
+                ))}
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 gap-3">
+                {filteredProducts.map((product) => (
+                  <IndividualProductCard key={product.id} product={product} isSelected={openProductId === product.id} onToggle={() => handleProductSelect(product.id)} />
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          /* Sin búsqueda → acordeón por categoría */
+          <div className="flex flex-col">
+            {categories.map((cat) => {
+              const isOpen = isCategoryOpen(cat.id);
+              return (
+                <div key={cat.id} className="border-b border-gray-100 last:border-0">
+                  <button
+                    onClick={() => toggleCategory(cat.id)}
+                    className="w-full flex items-center justify-between px-4 py-3 hover:bg-[#f4f8ff] transition-colors text-left"
+                  >
+                    <div className="flex items-center gap-2 min-w-0">
+                      <span className="font-semibold text-sm text-[#333] truncate">{cat.nombre}</span>
+                      <span className="text-xs text-[#0047AB] bg-[#eaf1ff] px-1.5 py-0.5 rounded-full flex-shrink-0">
+                        {cat.products.length}
+                      </span>
+                    </div>
+                    <ChevronDown
+                      className={`w-4 h-4 text-[#0047AB] flex-shrink-0 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
+                    />
+                  </button>
+
+                  {isOpen && (
+                    <div className={viewMode === "grid" ? "px-4 pb-4" : "px-2 pb-2"}>
+                      {viewMode === "grid" ? (
+                        <div className="flex flex-col gap-4">
+                          {chunkArray(cat.products, 3).map((group, i) => (
+                            <ProductGroupCard key={i} group={group} openProductId={openProductId} onSelectProduct={handleProductSelect} />
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="grid grid-cols-1 gap-3">
+                          {cat.products.map((product) => (
+                            <IndividualProductCard key={product.id} product={product} isSelected={openProductId === product.id} onToggle={() => handleProductSelect(product.id)} />
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <div style={{ height: "100svh", width: "100%", background: "#fff", fontFamily: "sans-serif", color: "#000", display: "flex", flexDirection: "column" }}>
+      {isMobile ? (
+        // ── Layout Mobile: imagen arriba, strip de thumbnails abajo ──────────
+        <div style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }}>
+          <div style={{ flex: 1, minHeight: 0, overflow: "hidden" }}>
+            <RoomPreviewPanel {...previewPanelProps} />
+          </div>
+          {MobileProductStrip}
+        </div>
+      ) : (
+        // ── Layout Desktop: sidebar izquierda + imagen derecha ───────────────
+        <div style={{ flex: 1, display: "flex", flexDirection: "row", minHeight: 0 }}>
+          {DesktopSidebar}
+          <div style={{ flex: 1, minWidth: 0, overflow: "hidden" }}>
+            <RoomPreviewPanel {...previewPanelProps} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}