feat(contactos): detalle completo del cliente con propiedad e historial

- GET /api/contactos/:id/detalle: todas las columnas del contacto, la
  propiedad comprada/en proceso (apartado relacionado por teléfono/email,
  enriquecido con el desarrollo de la unidad), quién atiende cada item
  relacionado (leads/oportunidades/apartados, columna people) y el
  historial completo de atención (activity log de los 4 tableros +
  capturas y alta local con nombre del capturista)
- monday.service: getContactoDetalle (columnas por título),
  getHistorialItems (todos los eventos del activity log por items) y
  ApartadoMonday enriquecido (teléfono, email, precio final, fecha compra)
- Landing: la lista de Contactos abre un modal por cliente con datos,
  propiedad, relaciones CRM (con quién atiende) y timeline de historial
- Tests: 465 API + 12 landing, verde

api-gateway/src/controllers/contactos.controller.ts

@@ -1,5 +1,8 @@
 import type { Request, Response } from 'express'
 import { mondayService } from '../services/monday.service.js'
+import { detalleContacto, claveTelefono } from '../services/contactos-detalle.service.js'
+import { prisma } from '../services/prisma.js'
+import { NotFoundError } from '../utils/errors.js'
 
 /**
  * GET /api/contactos (Bearer) → contactos del tablero Contactos de Monday
@@ -8,3 +11,84 @@ import { mondayService } from '../services/monday.service.js'
 export async function listarContactosEndpoint(_req: Request, res: Response): Promise<void> {
   res.json(await mondayService.getContactos())
 }
+
+/**
+ * GET /api/contactos/:id/detalle (Bearer) → ficha completa del contacto:
+ * todas sus columnas, la propiedad comprada/en proceso (apartado relacionado),
+ * quién atiende cada item relacionado (leads, oportunidades, apartados) y el
+ * historial completo de atención (activity log de Monday + capturas locales).
+ */
+export async function detalleContactoEndpoint(req: Request, res: Response): Promise<void> {
+  const contactoId = String(req.params['id'])
+
+  const contacto = await mondayService.getContactoDetalle(contactoId)
+  if (contacto === null) throw new NotFoundError('Contacto no encontrado')
+
+  // Nombres para "atendidoPor"/historial: usuarios del ecosistema + workspace
+  const mapeados = await prisma.usuario.findMany({
+    where: { mondayUserId: { not: null }, activo: true },
+    select: { nombre: true, mondayUserId: true },
+  })
+  const nombresPorMondayId = new Map<number, string>(
+    mapeados.filter((m) => m.mondayUserId !== null).map((m) => [m.mondayUserId!, m.nombre]),
+  )
+  try {
+    for (const u of await mondayService.getUsuariosWorkspace()) {
+      if (!nombresPorMondayId.has(u.id)) nombresPorMondayId.set(u.id, u.nombre)
+    }
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error('No se pudieron listar los usuarios del workspace de Monday:', err)
+  }
+
+  // Registro local: capturas con el mismo teléfono (Monday no guarda quién
+  // capturó) y la ficha de cliente ligada a este contacto (o por celular).
+  // LeadCaptura/Cliente no tienen relación Prisma a Usuario: se resuelve a mano.
+  const clave = claveTelefono(contacto['Teléfono'] ?? '')
+  const capturasTodas = await prisma.leadCaptura.findMany({
+    where: { telefono: { not: null } },
+    orderBy: { createdAt: 'desc' },
+  })
+  const capturasCrudas = capturasTodas.filter((c) => c.telefono !== null && clave !== '' && claveTelefono(c.telefono) === clave)
+
+  const clienteCrudo = await prisma.cliente.findFirst({
+    where: {
+      OR: [
+        { mondayContactoId: contactoId },
+        ...(clave !== '' ? [{ celular: { contains: clave } }] : []),
+      ],
+    },
+    include: { _count: { select: { documentos: true } } },
+    orderBy: { createdAt: 'desc' },
+  })
+
+  // Nombres de capturistas (ids locales → nombre para mostrar)
+  const idsUsuarios = [
+    ...new Set([
+      ...capturasCrudas.map((c) => c.usuarioId),
+      ...(clienteCrudo?.capturadoPorId ? [clienteCrudo.capturadoPorId] : []),
+    ]),
+  ]
+  const usuariosLocal = idsUsuarios.length
+    ? await prisma.usuario.findMany({ where: { id: { in: idsUsuarios } }, select: { id: true, nombre: true } })
+    : []
+  const nombreLocal = new Map(usuariosLocal.map((u) => [u.id, u.nombre]))
+
+  const capturas = capturasCrudas.map((c) => ({
+    leadId: c.leadId,
+    nombreLead: c.nombreLead,
+    createdAt: c.createdAt,
+    usuario: nombreLocal.has(c.usuarioId) ? { nombre: nombreLocal.get(c.usuarioId)! } : null,
+  }))
+  const clienteLocal = clienteCrudo
+    ? {
+        ...clienteCrudo,
+        capturadoPor:
+          clienteCrudo.capturadoPorId && nombreLocal.has(clienteCrudo.capturadoPorId)
+            ? { nombre: nombreLocal.get(clienteCrudo.capturadoPorId)! }
+            : null,
+      }
+    : null
+
+  res.json(await detalleContacto(mondayService, contactoId, nombresPorMondayId, capturas, clienteLocal))
+}

api-gateway/src/routes/index.ts

@@ -62,7 +62,7 @@ import {
   listarUsuariosMondayEndpoint,
 } from '../controllers/usuarios.controller.js'
 import { resumenMiDiaEndpoint } from '../controllers/mi-dia.controller.js'
-import { listarContactosEndpoint } from '../controllers/contactos.controller.js'
+import { listarContactosEndpoint, detalleContactoEndpoint } from '../controllers/contactos.controller.js'
 import { webhookMonday } from '../controllers/webhooks.controller.js'
 import {
   correrRoundRobin,
@@ -150,6 +150,7 @@ apiRouter.post('/apartados/:itemId/documentos', uploadDocumentosApartado.array('
 apiRouter.get('/mi-dia/resumen', resumenMiDiaEndpoint)
 
 apiRouter.get('/contactos', listarContactosEndpoint)
+apiRouter.get('/contactos/:id/detalle', detalleContactoEndpoint)
 
 // GET estático: va ANTES de /leads/:itemId para no colisionar con el parámetro
 apiRouter.get('/leads/buscar', buscarLeadsEndpoint)

api-gateway/src/services/contactos-detalle.service.test.ts

@@ -0,0 +1,121 @@
+import { describe, expect, it } from 'vitest'
+import { claveTelefono, detalleContacto } from './contactos-detalle.service.js'
+import type { LeadMonday, OportunidadMonday, ApartadoMonday } from './monday.service.js'
+
+const MI_ID = 106736727
+
+const leadBase: LeadMonday = {
+  id: 'l1', nombre: 'Ana Demo', createdAt: '', updatedAt: '', estado: 'Nuevo', origen: 'PASE',
+  telefono: '+52 6641234567', email: 'ana@correo.com', vendedorIds: [MI_ID],
+}
+
+const opBase: OportunidadMonday = {
+  id: 'o1', nombre: 'Ana Demo', createdAt: '', updatedAt: '', etapa: 'Cotizador', unidadCodigo: '',
+  precioFinal: 1500000, asesorIds: [MI_ID], telefono: '6641234567', email: '', origen: 'PASE',
+  desarrollo: 'SENDA', modeloInteres: 'SOHO',
+}
+
+const apBase: ApartadoMonday = {
+  id: 'a1', nombre: 'Ana Demo', unidadCodigo: 'SENDA-409-1-2', fechaLimite: '2026-09-10',
+  estado: 'Pago Apartado', vendedorIds: [MI_ID], telefono: '6641234567', email: '',
+  precioFinal: 2646000, fechaCompra: '2026-09-01',
+}
+
+function mondayMock(overrides: Record<string, unknown> = {}) {
+  return {
+    async getContactoDetalle() {
+      return { nombre: 'Ana Demo', Teléfono: '+52 6641234567', Email: 'ana@correo.com', Estado: 'CLIENTE', CURP: 'XAXX010101XXXXXXX0' }
+    },
+    async getLeads() { return [leadBase] },
+    async getOportunidades() { return [opBase] },
+    async getApartados() { return [apBase] },
+    async getHistorialItems(_b: string, ids: string[]) {
+      return ids.map((id, i) => ({
+        itemId: id,
+        fechaISO: `2026-09-0${(i % 9) + 1}T10:00:00.000Z`,
+        usuarioId: MI_ID,
+        evento: 'update_column_value',
+      }))
+    },
+    async getUnidad() { return { desarrollo: 'SENDA' } },
+    ...overrides,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } as any
+}
+
+const nombres = new Map([[MI_ID, 'Martin Zavala']])
+
+describe('claveTelefono', () => {
+  it('últimos 10 dígitos, tolerante a lada, espacios y símbolos', () => {
+    expect(claveTelefono('+52 664 123 4567')).toBe('6641234567')
+    expect(claveTelefono('+16195550134')).toBe('6195550134')
+    expect(claveTelefono('6641234567')).toBe('6641234567')
+    expect(claveTelefono('')).toBe('')
+    expect(claveTelefono('123')).toBe('')
+  })
+})
+
+describe('detalleContacto (GET /api/contactos/:id/detalle)', () => {
+  it('arma contacto + propiedad + relaciones + historial con nombres resueltos', async () => {
+    const d = await detalleContacto(
+      mondayMock(),
+      'c1',
+      nombres,
+      [{ leadId: 'l1', nombreLead: 'Ana Demo', createdAt: new Date('2026-09-02T08:00:00Z'), usuario: { nombre: 'Martin Zavala' } }],
+      {
+        id: 'cl1', nombreCompleto: 'Ana Demo', proyecto: 'SENDA', unidadCodigo: 'SENDA-409-1-2',
+        createdAt: new Date('2026-09-03T08:00:00Z'), capturadoPor: { nombre: 'Martin Zavala' },
+      },
+    )
+    expect(d).not.toBeNull()
+    expect(d!.contacto['CURP']).toBe('XAXX010101XXXXXXX0')
+    // Propiedad comprada (apartado relacionado, enriquecido con el desarrollo)
+    expect(d!.propiedad).toMatchObject({
+      unidadCodigo: 'SENDA-409-1-2',
+      desarrollo: 'SENDA',
+      estado: 'Pago Apartado',
+      precioFinal: 2646000,
+      atendidoPor: 'Martin Zavala',
+    })
+    // Relaciones por teléfono/email con quién atiende
+    expect(d!.relaciones.leads[0]).toMatchObject({ id: 'l1', atendidoPor: 'Martin Zavala' })
+    expect(d!.relaciones.oportunidades[0]).toMatchObject({ id: 'o1', atendidoPor: 'Martin Zavala' })
+    expect(d!.relaciones.apartados[0]).toMatchObject({ id: 'a1', atendidoPor: 'Martin Zavala' })
+    // Historial: activity log + captura + alta local, ordenado desc
+    expect(d!.historial.some((h) => h.fuente === 'App' && h.detalle.includes('Captura'))).toBe(true)
+    expect(d!.historial.some((h) => h.detalle.includes('Alta de cliente'))).toBe(true)
+    expect(d!.historial.every((h) => h.usuario === 'Martin Zavala')).toBe(true)
+    const fechas = d!.historial.map((h) => h.fechaISO)
+    expect(fechas).toEqual([...fechas].sort((a, b) => b.localeCompare(a)))
+  })
+
+  it('sin relaciones ni registros locales: listas vacías y propiedad null', async () => {
+    const d = await detalleContacto(
+      mondayMock({
+        async getLeads() { return [] },
+        async getOportunidades() { return [] },
+        async getApartados() { return [] },
+      }),
+      'c1',
+      new Map(),
+      [],
+      null,
+    )
+    expect(d!.propiedad).toBeNull()
+    expect(d!.relaciones).toEqual({ leads: [], oportunidades: [], apartados: [] })
+    // El historial al menos tiene los eventos del propio contacto
+    expect(d!.historial).toHaveLength(1)
+    expect(d!.historial[0]?.fuente).toBe('Contactos')
+  })
+
+  it('contacto inexistente devuelve null', async () => {
+    const d = await detalleContacto(
+      mondayMock({ async getContactoDetalle() { return null } }),
+      'no-existe',
+      new Map(),
+      [],
+      null,
+    )
+    expect(d).toBeNull()
+  })
+})

api-gateway/src/services/contactos-detalle.service.ts

@@ -0,0 +1,197 @@
+import { config } from '../config/index.js'
+import { detalleEventoUltimoCambio, esEstadoFinalApartado } from './mi-dia.service.js'
+import type { MondayService } from './monday.service.js'
+
+/**
+ * Detalle del módulo Contactos: toda la información del contacto, la propiedad
+ * comprada (apartado relacionado), quién lo atiende (asesor/vendedor actual de
+ * cada item relacionado) y el historial completo de atención.
+ *
+ * Las relaciones se arman por teléfono (últimos 10 dígitos) o email a través de
+ * los tableros Leads, Oportunidades y Apartado; el historial mezcla el activity
+ * log de Monday de esos items + el registro local (quién capturó qué en las apps).
+ */
+
+export interface RelacionCrm {
+  id: string
+  nombre: string
+  estado: string // estado/etapa actual
+  /** Quién lo atiende ahora (columna people del tablero); null si sin asignar */
+  atendidoPor: string | null
+  detalle: string // origen/desarrollo/unidad según el tablero ('' si no aplica)
+}
+
+export interface EventoHistorialContacto {
+  fechaISO: string
+  usuario: string | null // nombre resuelto; null si fue automatización o desconocido
+  detalle: string
+  fuente: string // 'Contactos' | 'Leads' | 'Oportunidades' | 'Apartado' | 'App'
+}
+
+export interface DetalleContacto {
+  contacto: Record<string, string> // columnas del board por título ('nombre' incluido)
+  /** Apartado relacionado más reciente (la propiedad comprada o en proceso) */
+  propiedad: {
+    id: string
+    unidadCodigo: string
+    desarrollo: string
+    estado: string
+    precioFinal: number
+    fechaCompra: string
+    fechaLimite: string
+    atendidoPor: string | null
+  } | null
+  relaciones: {
+    leads: RelacionCrm[]
+    oportunidades: RelacionCrm[]
+    apartados: RelacionCrm[]
+  }
+  historial: EventoHistorialContacto[]
+}
+
+/** Últimos 10 dígitos del teléfono (dedup/relación tolerante a lada y formato) */
+export function claveTelefono(telefono: string): string {
+  const digitos = telefono.replace(/\D/g, '')
+  return digitos.length >= 10 ? digitos.slice(-10) : ''
+}
+
+type MondayDetalle = Pick<
+  MondayService,
+  | 'getContactoDetalle'
+  | 'getLeads'
+  | 'getOportunidades'
+  | 'getApartados'
+  | 'getHistorialItems'
+  | 'getUnidad'
+>
+
+export interface CapturaLocal {
+  leadId: string
+  nombreLead: string
+  createdAt: Date
+  usuario: { nombre: string } | null
+}
+
+export interface ClienteLocal {
+  id: string
+  nombreCompleto: string
+  proyecto: string
+  unidadCodigo: string | null
+  createdAt: Date
+  capturadoPor: { nombre: string } | null
+  _count?: { documentos: number }
+}
+
+export async function detalleContacto(
+  monday: MondayDetalle,
+  contactoId: string,
+  nombresPorMondayId: Map<number, string>,
+  capturas: CapturaLocal[],
+  clienteLocal: ClienteLocal | null,
+): Promise<DetalleContacto | null> {
+  const contacto = await monday.getContactoDetalle(contactoId)
+  if (contacto === null) return null
+
+  const nombre = (id: number | null): string | null =>
+    id !== null ? (nombresPorMondayId.get(id) ?? null) : null
+
+  const tel = claveTelefono(contacto['Teléfono'] ?? '')
+  const email = (contacto['Email'] ?? '').trim().toLowerCase()
+
+  const coincide = (t: string, e: string): boolean =>
+    (tel !== '' && claveTelefono(t) === tel) || (email !== '' && e.trim().toLowerCase() === email)
+
+  const [leads, oportunidades, apartados] = await Promise.all([
+    monday.getLeads(),
+    monday.getOportunidades(),
+    monday.getApartados(),
+  ])
+
+  const relLeads = leads.filter((l) => coincide(l.telefono, l.email))
+  const relOportunidades = oportunidades.filter((o) => coincide(o.telefono, o.email))
+  const relApartados = apartados.filter((a) => coincide(a.telefono ?? '', a.email ?? ''))
+
+  // Propiedad: el apartado relacionado "vivo" (no final) o el último del board;
+  // se enriquece con el desarrollo de la unidad (inventario)
+  let propiedad: DetalleContacto['propiedad'] = null
+  const aptoReciente = relApartados.find((a) => !esEstadoFinalApartado(a.estado)) ?? relApartados[relApartados.length - 1]
+  if (aptoReciente) {
+    let desarrollo = ''
+    if (aptoReciente.unidadCodigo !== '') {
+      try {
+        desarrollo = (await monday.getUnidad(aptoReciente.unidadCodigo))?.desarrollo ?? ''
+      } catch {
+        desarrollo = ''
+      }
+    }
+    propiedad = {
+      id: aptoReciente.id,
+      unidadCodigo: aptoReciente.unidadCodigo,
+      desarrollo,
+      estado: aptoReciente.estado,
+      precioFinal: aptoReciente.precioFinal ?? 0,
+      fechaCompra: aptoReciente.fechaCompra ?? '',
+      fechaLimite: aptoReciente.fechaLimite,
+      atendidoPor: nombre(aptoReciente.vendedorIds[0] ?? null),
+    }
+  }
+
+  // Historial: activity log de los items relacionados + del propio contacto,
+  // más los registros locales de captura/alta (Monday no guarda quién capturó)
+  const [evContactos, evLeads, evOportunidades, evApartado] = await Promise.all([
+    monday.getHistorialItems(config.monday.boards.contactos, [contactoId]),
+    monday.getHistorialItems(config.monday.boards.leads, relLeads.map((l) => l.id)),
+    monday.getHistorialItems(config.monday.boards.oportunidades, relOportunidades.map((o) => o.id)),
+    monday.getHistorialItems(config.monday.boards.apartado, relApartados.map((a) => a.id)),
+  ])
+
+  const historial: EventoHistorialContacto[] = [
+    ...evContactos.map((e) => ({ fechaISO: e.fechaISO, usuario: nombre(e.usuarioId), detalle: detalleEventoUltimoCambio(e.evento), fuente: 'Contactos' })),
+    ...evLeads.map((e) => ({ fechaISO: e.fechaISO, usuario: nombre(e.usuarioId), detalle: detalleEventoUltimoCambio(e.evento), fuente: 'Leads' })),
+    ...evOportunidades.map((e) => ({ fechaISO: e.fechaISO, usuario: nombre(e.usuarioId), detalle: detalleEventoUltimoCambio(e.evento), fuente: 'Oportunidades' })),
+    ...evApartado.map((e) => ({ fechaISO: e.fechaISO, usuario: nombre(e.usuarioId), detalle: detalleEventoUltimoCambio(e.evento), fuente: 'Apartado' })),
+    ...capturas.map((c) => ({
+      fechaISO: c.createdAt.toISOString(),
+      usuario: c.usuario?.nombre ?? null,
+      detalle: `Captura en la app (${c.nombreLead})`,
+      fuente: 'App',
+    })),
+    ...(clienteLocal
+      ? [{
+          fechaISO: clienteLocal.createdAt.toISOString(),
+          usuario: clienteLocal.capturadoPor?.nombre ?? null,
+          detalle: `Alta de cliente registrada${clienteLocal.unidadCodigo ? ` (${clienteLocal.unidadCodigo})` : ''}`,
+          fuente: 'App',
+        }]
+      : []),
+  ].sort((a, b) => b.fechaISO.localeCompare(a.fechaISO))
+
+  return {
+    contacto,
+    propiedad,
+    relaciones: {
+      leads: relLeads.map((l) => ({
+        id: l.id,
+        nombre: l.nombre,
+        estado: l.estado,
+        atendidoPor: nombre(l.vendedorIds[0] ?? null),
+        detalle: l.origen,
+      })),
+      oportunidades: relOportunidades.map((o) => ({
+        id: o.id,
+        nombre: o.nombre,
+        estado: o.etapa,
+        atendidoPor: nombre(o.asesorIds[0] ?? null),
+        detalle: [o.desarrollo, o.modeloInteres].filter((p) => p).join(' · '),
+      })),
+      apartados: relApartados.map((a) => ({
+        id: a.id,
+        nombre: a.nombre,
+        estado: a.estado,
+        atendidoPor: nombre(a.vendedorIds[0] ?? null),
+        detalle: a.unidadCodigo,
+      })),
+    },
+    historial,
+  }
+}

api-gateway/src/services/monday.service.ts

@@ -80,6 +80,10 @@ export interface ApartadoMonday {
   fechaLimite: string // 'YYYY-MM-DD' de 'Fecha límite' ('' si no tiene)
   estado: string // label de la columna status 'Estado'
   vendedorIds: number[] // user IDs asignados en la columna people 'Vendedor'
+  telefono?: string // columna phone 'Teléfono' ('' si no tiene)
+  email?: string // columna email 'Correo electrónico' ('' si no tiene)
+  precioFinal?: number // columna numbers 'Precio Final' (0 si no tiene)
+  fechaCompra?: string // 'YYYY-MM-DD' de 'Fecha Compra' ('' si no tiene)
 }
 
 /** Contacto del tablero Contactos (módulo Contactos de la landing) */
@@ -136,6 +140,14 @@ interface ActivityLogMonday {
   data: string // JSON string; pulse_id identifica el item
 }
 
+/** Evento del activity log de un item (historial completo, no solo el último) */
+export interface EventoHistorialMonday {
+  itemId: string
+  fechaISO: string
+  usuarioId: number | null // user_id de Monday; null si no es numérico (automatizaciones)
+  evento: string // event crudo (create_pulse, update_column_value, ...)
+}
+
 /** Último evento del activity log de un item (para "Último cambio" de Mi día) */
 export interface UltimoCambioMonday {
   fechaISO: string
@@ -1046,6 +1058,59 @@ export class MondayService {
     return resultado
   }
 
+  /**
+   * TODOS los eventos del activity log de un conjunto de items (historial del
+   * módulo Contactos), más reciente primero. Misma normalización de created_at
+   * que getUltimosCambios.
+   */
+  async getHistorialItems(boardId: string, itemIds: string[]): Promise<EventoHistorialMonday[]> {
+    if (itemIds.length === 0) return []
+    const data = await this.graphql<{ boards: { activity_logs: ActivityLogMonday[] }[] }>(
+      `query ($ids: [ID!], $itemIds: [ID!], $limit: Int!) {
+         boards(ids: $ids) {
+           activity_logs(item_ids: $itemIds, limit: $limit) { id event created_at user_id data }
+         }
+       }`,
+      { ids: [boardId], itemIds, limit: Math.min(itemIds.length * 10, 200) },
+    )
+    const eventos: EventoHistorialMonday[] = []
+    for (const log of data.boards[0]?.activity_logs ?? []) {
+      let itemId: string | undefined
+      try {
+        const datos = JSON.parse(log.data) as { pulse_id?: number | string }
+        itemId = datos.pulse_id === undefined ? undefined : String(datos.pulse_id)
+      } catch {
+        continue
+      }
+      if (itemId === undefined) continue
+      const crudo = Number(log.created_at)
+      if (!Number.isFinite(crudo)) continue
+      const ms = crudo > 1e16 ? crudo / 1e4 : crudo > 1e14 ? crudo / 1e3 : crudo
+      const userId = Number(log.user_id)
+      eventos.push({
+        itemId,
+        fechaISO: new Date(ms).toISOString(),
+        usuarioId: Number.isFinite(userId) && userId > 0 ? userId : null,
+        evento: log.event,
+      })
+    }
+    return eventos.sort((a, b) => b.fechaISO.localeCompare(a.fechaISO))
+  }
+
+  /** Item del tablero Contactos con TODAS sus columnas por título ('' si vacía) */
+  async getContactoDetalle(itemId: string): Promise<Record<string, string> | null> {
+    const boardId = config.monday.boards.contactos
+    const [cols, item] = await Promise.all([this.columnasDe(boardId), this.getItemConGrupo(itemId)])
+    if (!item) return null
+    const porTitulo: Record<string, string> = { nombre: item.name }
+    for (const [titulo, col] of cols) {
+      const cv = item.column_values.find((c) => c.id === col.id)
+      // status nunca escrito: value null pero text muestra el default del tablero
+      porTitulo[titulo] = cv?.value ? (cv.text ?? '') : ''
+    }
+    return porTitulo
+  }
+
   /** Parsea el value JSON de una columna people a los user IDs (solo personas) */
   private peopleIds(raw: string | null | undefined): number[] {
     if (!raw) return []
@@ -1121,6 +1186,10 @@ export class MondayService {
     const colFechaLimite = cols.get('Fecha límite')
     const colEstado = cols.get('Estado')
     const colVendedor = cols.get('Vendedor')
+    const colTelefono = cols.get('Teléfono')
+    const colEmail = cols.get('Correo electrónico')
+    const colPrecioFinal = cols.get('Precio Final')
+    const colFechaCompra = cols.get('Fecha Compra')
 
     const items: ItemMonday[] = []
     let cursor: string | null = null
@@ -1168,6 +1237,10 @@ export class MondayService {
         fechaLimite: colFechaLimite ? (porId.get(colFechaLimite.id)?.text ?? '') : '',
         estado,
         vendedorIds: colVendedor ? this.peopleIds(porId.get(colVendedor.id)?.value) : [],
+        telefono: colTelefono ? (porId.get(colTelefono.id)?.text ?? '') : '',
+        email: colEmail ? (porId.get(colEmail.id)?.text ?? '') : '',
+        precioFinal: colPrecioFinal ? Number(porId.get(colPrecioFinal.id)?.text ?? 0) || 0 : 0,
+        fechaCompra: colFechaCompra ? (porId.get(colFechaCompra.id)?.text ?? '') : '',
       }
     })
   }

apps/landing/src/components/ModalContacto.tsx

@@ -0,0 +1,192 @@
+import { useEffect, useState } from 'react'
+import { getContactoDetalle, type DetalleContacto, type RelacionCrm } from '../services/api'
+
+interface Props {
+  contactoId: string
+  nombre: string
+  onCerrar: () => void
+}
+
+const formatoMoneda = (n: number): string =>
+  n > 0 ? n.toLocaleString('es-MX', { style: 'currency', currency: 'MXN', maximumFractionDigits: 0 }) : '—'
+
+const formatoFecha = (iso: string): string =>
+  iso
+    ? new Date(iso).toLocaleString('es-MX', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+    : ''
+
+function Dato({ etiqueta, valor }: { etiqueta: string; valor: string }) {
+  if (valor === '') return null
+  return (
+    <div>
+      <p className="text-xs font-medium text-[#64748B]">{etiqueta}</p>
+      <p className="mt-0.5 text-sm text-[#111827]">{valor}</p>
+    </div>
+  )
+}
+
+function ListaRelaciones({ titulo, items }: { titulo: string; items: RelacionCrm[] }) {
+  if (items.length === 0) return null
+  return (
+    <div>
+      <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">{titulo}</p>
+      <ul className="mt-2 space-y-2">
+        {items.map((r) => (
+          <li key={r.id} className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-[#E5E7EB] px-3 py-2">
+            <span className="text-sm text-[#111827]">
+              {r.estado || 'Sin estado'}
+              {r.detalle ? <span className="ml-2 text-xs text-[#64748B]">{r.detalle}</span> : null}
+            </span>
+            <span className="text-xs font-medium text-[#64748B]">
+              {r.atendidoPor ?? 'Sin asignar'}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+/**
+ * Modal de contacto: toda su información (columnas del board), la propiedad
+ * comprada/en proceso, quién atiende cada item relacionado y el historial
+ * completo de atención (Monday + capturas de las apps).
+ */
+export function ModalContacto({ contactoId, nombre, onCerrar }: Props) {
+  const [detalle, setDetalle] = useState<DetalleContacto | null>(null)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    let vivo = true
+    getContactoDetalle(contactoId)
+      .then((d) => {
+        if (vivo) setDetalle(d)
+      })
+      .catch(() => {
+        if (vivo) setError('No se pudo cargar el detalle del contacto.')
+      })
+    return () => {
+      vivo = false
+    }
+  }, [contactoId])
+
+  // Cerrar con Escape
+  useEffect(() => {
+    const alTeclear = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onCerrar()
+    }
+    window.addEventListener('keydown', alTeclear)
+    return () => window.removeEventListener('keydown', alTeclear)
+  }, [onCerrar])
+
+  const c = detalle?.contacto ?? {}
+
+  return (
+    <div
+      className="fixed inset-0 z-20 flex items-start justify-center overflow-y-auto bg-black/40 px-4 py-8"
+      role="dialog"
+      aria-modal="true"
+      aria-label={`Detalle de ${nombre}`}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onCerrar()
+      }}
+    >
+      <div className="w-full max-w-2xl rounded-2xl border border-[#E5E7EB] bg-white shadow-xl">
+        <div className="flex items-center justify-between border-b border-[#E5E7EB] px-6 py-4">
+          <div className="flex items-center gap-3">
+            <h2 className="text-lg font-semibold text-[#111827]">{c['nombre'] ?? nombre}</h2>
+            {c['Estado'] && (
+              <span className="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-accent">{c['Estado']}</span>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={onCerrar}
+            aria-label="Cerrar"
+            className="rounded-lg px-2 py-1.5 text-sm text-[#64748B] transition-colors hover:bg-[#F9FAFB] hover:text-[#111827]"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div className="space-y-6 px-6 py-5">
+          {error && (
+            <p role="alert" className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+              {error}
+            </p>
+          )}
+          {!detalle && !error && <p className="text-sm text-[#64748B]">Cargando detalle…</p>}
+
+          {detalle && (
+            <>
+              <section aria-label="Datos del contacto">
+                <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-[#64748B]">Datos del contacto</p>
+                <div className="grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-3">
+                  <Dato etiqueta="Teléfono" valor={c['Teléfono'] ?? ''} />
+                  <Dato etiqueta="Email" valor={c['Email'] ?? ''} />
+                  <Dato etiqueta="CURP" valor={c['CURP'] ?? ''} />
+                  <Dato etiqueta="RFC" valor={c['RFC'] ?? ''} />
+                  <Dato etiqueta="Estado civil" valor={c['Estado Civil'] ?? ''} />
+                  <Dato etiqueta="Fecha de nacimiento" valor={c['Fecha Nacimiento'] ?? ''} />
+                  <Dato etiqueta="Rango de edad" valor={c['Rango de Edad'] ?? ''} />
+                  <Dato etiqueta="Actividad económica" valor={c['Actividad Economica'] ?? ''} />
+                  <Dato etiqueta="Vivienda actual" valor={c['Vivienda Actual'] ?? ''} />
+                  <Dato etiqueta="Propósito de compra" valor={c['Proposito de Compra'] ?? ''} />
+                  <Dato etiqueta="Dirección" valor={c['Dirección'] ?? ''} />
+                </div>
+              </section>
+
+              {detalle.propiedad && (
+                <section aria-label="Propiedad">
+                  <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-[#64748B]">Propiedad</p>
+                  <div className="rounded-xl border border-[#E5E7EB] bg-[#F8FAFC] p-4">
+                    <div className="grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-3">
+                      <Dato etiqueta="Desarrollo" valor={detalle.propiedad.desarrollo} />
+                      <Dato etiqueta="Unidad" valor={detalle.propiedad.unidadCodigo} />
+                      <Dato etiqueta="Precio final" valor={formatoMoneda(detalle.propiedad.precioFinal)} />
+                      <Dato etiqueta="Estatus" valor={detalle.propiedad.estado} />
+                      <Dato etiqueta="Fecha de compra" valor={detalle.propiedad.fechaCompra} />
+                      <Dato etiqueta="Atendido por" valor={detalle.propiedad.atendidoPor ?? ''} />
+                    </div>
+                  </div>
+                </section>
+              )}
+
+              <section aria-label="Relaciones CRM" className="space-y-4">
+                <ListaRelaciones titulo="Leads" items={detalle.relaciones.leads} />
+                <ListaRelaciones titulo="Oportunidades" items={detalle.relaciones.oportunidades} />
+                <ListaRelaciones titulo="Apartados" items={detalle.relaciones.apartados} />
+              </section>
+
+              <section aria-label="Historial de atención">
+                <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-[#64748B]">
+                  Historial de atención
+                </p>
+                {detalle.historial.length === 0 ? (
+                  <p className="text-sm text-[#64748B]">Sin movimientos registrados.</p>
+                ) : (
+                  <ul className="max-h-64 space-y-2 overflow-y-auto">
+                    {detalle.historial.map((h, i) => (
+                      <li key={i} className="flex items-baseline justify-between gap-3 rounded-lg border border-[#E5E7EB] px-3 py-2">
+                        <div className="min-w-0">
+                          <p className="text-sm text-[#111827]">
+                            {h.detalle}
+                            <span className="ml-2 rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-600">
+                              {h.fuente}
+                            </span>
+                          </p>
+                          <p className="mt-0.5 text-xs text-[#64748B]">{h.usuario ?? 'Automatización'}</p>
+                        </div>
+                        <span className="shrink-0 text-xs text-[#94A3B8]">{formatoFecha(h.fechaISO)}</span>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </section>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

apps/landing/src/components/VistaContactos.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { getContactos, type Contacto } from '../services/api'
+import { ModalContacto } from './ModalContacto'
 
 interface Props {
   onVolver: () => void
@@ -8,12 +9,14 @@ interface Props {
 /**
  * Vista interna "Contactos": lista del tablero Contactos de Monday (lo más
  * reciente primero). Vive dentro de la landing (no hay router); se abre desde
- * la tarjeta Contactos del grid.
+ * la tarjeta Contactos del grid. Click en un contacto → modal con toda su
+ * información, propiedad, quién lo atiende e historial de atención.
  */
 export function VistaContactos({ onVolver }: Props) {
   const [contactos, setContactos] = useState<Contacto[] | null>(null)
   const [cargando, setCargando] = useState(true)
   const [error, setError] = useState('')
+  const [seleccionado, setSeleccionado] = useState<Contacto | null>(null)
 
   const cargar = useCallback(() => {
     setCargando(true)
@@ -60,20 +63,35 @@ export function VistaContactos({ onVolver }: Props) {
         ) : (
           <ul className="divide-y divide-[#E5E7EB] rounded-xl border border-[#E5E7EB] bg-white shadow-sm">
             {contactos.map((contacto) => (
-              <li key={contacto.id} className="flex flex-wrap items-center gap-x-4 gap-y-1 px-6 py-4">
+              <li key={contacto.id}>
-                <span className="text-sm font-semibold text-[#111827]">{contacto.nombre}</span>
+                <button
-                {contacto.estado && (
+                  type="button"
-                  <span className="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-accent">
+                  onClick={() => setSeleccionado(contacto)}
-                    {contacto.estado}
+                  className="flex w-full flex-wrap items-center gap-x-4 gap-y-1 px-6 py-4 text-left transition-colors duration-100 hover:bg-[#F8FAFC]"
-                  </span>
+                >
-                )}
+                  <span className="text-sm font-semibold text-[#111827]">{contacto.nombre}</span>
-                <span className="text-sm text-[#64748B]">{contacto.telefono || 'Sin teléfono'}</span>
+                  {contacto.estado && (
-                <span className="text-sm text-[#64748B]">{contacto.email || 'Sin email'}</span>
+                    <span className="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-accent">
+                      {contacto.estado}
+                    </span>
+                  )}
+                  <span className="text-sm text-[#64748B]">{contacto.telefono || 'Sin teléfono'}</span>
+                  <span className="text-sm text-[#64748B]">{contacto.email || 'Sin email'}</span>
+                  <span className="ml-auto text-xs font-medium text-accent">Ver detalle →</span>
+                </button>
               </li>
             ))}
           </ul>
         )}
       </section>
+
+      {seleccionado && (
+        <ModalContacto
+          contactoId={seleccionado.id}
+          nombre={seleccionado.nombre}
+          onCerrar={() => setSeleccionado(null)}
+        />
+      )}
     </main>
   )
 }

apps/landing/src/services/api.ts

@@ -53,3 +53,50 @@ export async function guardarVinculoMonday(mondayUserId: number | null): Promise
   if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
   return (await resp.json()) as UsuarioSesion
 }
+
+// ---------- Detalle de contacto (modal del módulo Contactos) ----------
+
+export interface RelacionCrm {
+  id: string
+  nombre: string
+  estado: string
+  /** Quién lo atiende ahora (columna people del tablero); null si sin asignar */
+  atendidoPor: string | null
+  detalle: string
+}
+
+export interface EventoHistorialContacto {
+  fechaISO: string
+  usuario: string | null
+  detalle: string
+  fuente: string // 'Contactos' | 'Leads' | 'Oportunidades' | 'Apartado' | 'App'
+}
+
+export interface DetalleContacto {
+  /** Columnas del board por título ('nombre' incluido); '' si vacía */
+  contacto: Record<string, string>
+  propiedad: {
+    id: string
+    unidadCodigo: string
+    desarrollo: string
+    estado: string
+    precioFinal: number
+    fechaCompra: string
+    fechaLimite: string
+    atendidoPor: string | null
+  } | null
+  relaciones: {
+    leads: RelacionCrm[]
+    oportunidades: RelacionCrm[]
+    apartados: RelacionCrm[]
+  }
+  historial: EventoHistorialContacto[]
+}
+
+/** GET /contactos/:id/detalle — ficha completa: info, propiedad, quién atiende e historial */
+export async function getContactoDetalle(id: string): Promise<DetalleContacto> {
+  const resp = await fetch(`${API_URL}/contactos/${id}/detalle`, conAuth())
+  manejar401(resp)
+  if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+  return (await resp.json()) as DetalleContacto
+}