feat: PWA instalable, cambio de contraseña y dashboards por rol

- POST /api/auth/cambiar-password (bcrypt 12, política ≥8+1 número) +
  modal en las 6 apps con auth
- PWA: manifest + íconos de marca en las 7 apps (sin service worker a
  propósito, documentado); instalable en celular
- Dashboards: 'Mi tablero' para vendedor (sus KPIs y funnel) y sección
  Equipo para coordinador/corporativo/admin
- mi-dia: equipo.porVendedor gana leadsNuevosSemana
- Tests: api 271, cotizador 88, alta 88, cobranza 81, agente-ia 19,
  dashboards 15, mi-dia 11, landing 4

apps/dashboards/src/components/AuthGate.tsx

@@ -1,13 +1,16 @@
 import { useState, type ReactNode } from 'react'
 import { getSesion, logout, type Sesion } from '../services/auth'
+import CambiarPasswordModal from './CambiarPasswordModal'
 import LoginScreen from './LoginScreen'
 
 /**
  * Gate de autenticación: sin sesión solo se ve el login; con sesión se ve la
- * app con una barra discreta "nombre · rol" y botón "Salir".
+ * app con una barra discreta "nombre · rol", "Contraseña" (modal de cambio)
+ * y botón "Salir".
  */
 export default function AuthGate({ children }: { children: ReactNode }) {
   const [sesion, setSesion] = useState<Sesion | null>(() => getSesion())
+  const [modalPassword, setModalPassword] = useState(false)
 
   if (!sesion) {
     return <LoginScreen onLogin={() => setSesion(getSesion())} />
@@ -20,19 +23,29 @@ export default function AuthGate({ children }: { children: ReactNode }) {
           <span className="text-xs font-bold uppercase tracking-widest text-neutral-500">
             {sesion.usuario.nombre} · {sesion.usuario.rol}
           </span>
-          <button
-            type="button"
-            onClick={() => {
-              logout()
-              setSesion(null)
-            }}
-            className="text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:text-accent-hover"
-          >
-            Salir
-          </button>
+          <div className="flex items-center gap-4">
+            <button
+              type="button"
+              onClick={() => setModalPassword(true)}
+              className="text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:text-neutral-900"
+            >
+              Contraseña
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                logout()
+                setSesion(null)
+              }}
+              className="text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:text-accent-hover"
+            >
+              Salir
+            </button>
+          </div>
         </div>
       </div>
       {children}
+      {modalPassword && <CambiarPasswordModal onCerrar={() => setModalPassword(false)} />}
     </div>
   )
 }

apps/dashboards/src/components/CambiarPasswordModal.tsx

@@ -0,0 +1,140 @@
+import { useState, type FormEvent } from 'react'
+import { validarConfirmacion, validarPasswordNueva } from '../lib/password'
+import { cambiarPassword } from '../services/auth'
+
+const CLASE_INPUT =
+  'w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none'
+const CLASE_LABEL = 'mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500'
+
+/**
+ * Modal "Cambiar contraseña": actual + nueva + confirmar. Valida en cliente
+ * con la misma regla del API y muestra el mensaje del API si la actual no es
+ * correcta. Al éxito la sesión sigue intacta (el JWT no cambia).
+ */
+export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => void }) {
+  const [actual, setActual] = useState('')
+  const [nueva, setNueva] = useState('')
+  const [confirmar, setConfirmar] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [exito, setExito] = useState(false)
+  const [cargando, setCargando] = useState(false)
+
+  async function enviar(e: FormEvent) {
+    e.preventDefault()
+    const errorCliente = validarPasswordNueva(nueva) ?? validarConfirmacion(nueva, confirmar)
+    if (errorCliente) {
+      setError(errorCliente)
+      return
+    }
+    setError(null)
+    setCargando(true)
+    try {
+      await cambiarPassword(actual, nueva)
+      setExito(true)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'No se pudo cambiar la contraseña')
+    } finally {
+      setCargando(false)
+    }
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Cambiar contraseña"
+    >
+      <div className="w-full max-w-sm border border-neutral-200 bg-white p-6">
+        <h2 className="mb-6 text-xs font-bold uppercase tracking-widest text-neutral-500">
+          Cambiar contraseña
+        </h2>
+        {exito ? (
+          <>
+            <p className="border border-accent px-4 py-3 text-xs font-bold uppercase tracking-widest text-accent">
+              Contraseña actualizada
+            </p>
+            <button
+              type="button"
+              onClick={onCerrar}
+              className="mt-6 w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover"
+            >
+              Cerrar
+            </button>
+          </>
+        ) : (
+          <form onSubmit={enviar} className="space-y-6">
+            <div>
+              <label htmlFor="password-actual" className={CLASE_LABEL}>
+                Contraseña actual
+              </label>
+              <input
+                id="password-actual"
+                type="password"
+                value={actual}
+                onChange={(e) => setActual(e.target.value)}
+                autoComplete="current-password"
+                autoFocus
+                required
+                className={CLASE_INPUT}
+              />
+            </div>
+            <div>
+              <label htmlFor="password-nueva" className={CLASE_LABEL}>
+                Nueva contraseña
+              </label>
+              <input
+                id="password-nueva"
+                type="password"
+                value={nueva}
+                onChange={(e) => setNueva(e.target.value)}
+                autoComplete="new-password"
+                required
+                className={CLASE_INPUT}
+              />
+              <p className="mt-2 text-xs text-neutral-400">Mínimo 8 caracteres y un número</p>
+            </div>
+            <div>
+              <label htmlFor="password-confirmar" className={CLASE_LABEL}>
+                Confirmar nueva contraseña
+              </label>
+              <input
+                id="password-confirmar"
+                type="password"
+                value={confirmar}
+                onChange={(e) => setConfirmar(e.target.value)}
+                autoComplete="new-password"
+                required
+                className={CLASE_INPUT}
+              />
+            </div>
+            {error && (
+              <p
+                role="alert"
+                className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
+              >
+                {error}
+              </p>
+            )}
+            <div className="flex gap-3">
+              <button
+                type="submit"
+                disabled={cargando}
+                className="flex-1 bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
+              >
+                {cargando ? 'Guardando…' : 'Guardar'}
+              </button>
+              <button
+                type="button"
+                onClick={onCerrar}
+                className="border border-neutral-300 px-5 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500"
+              >
+                Cancelar
+              </button>
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  )
+}

apps/dashboards/src/components/MiTablero.tsx

@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Cell, Funnel, FunnelChart, LabelList, ResponsiveContainer, Tooltip } from 'recharts'
+import KpiCard from './KpiCard'
+import { EstadoVacio, TituloSeccion } from './comunes'
+import { funnelMisLeads, type ResumenMiDia } from '../lib/mi-tablero'
+import { fetchResumenMiDia } from '../services/mi-dia'
+
+// Misma paleta del funnel del tablero general
+const COLORES_FUNNEL = ['#a3a3a3', '#737373', '#52796f', '#1B4332']
+
+/**
+ * "Mi tablero": KPIs personales del vendedor logueado (mis leads, actividades,
+ * apartados por vencer) y un funnel simple de sus leads por estado.
+ * Fuente: GET /api/mi-dia/resumen (filtra por su mondayUserId en el API).
+ */
+export default function MiTablero() {
+  const [resumen, setResumen] = useState<ResumenMiDia | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [cargando, setCargando] = useState(true)
+
+  const cargar = useCallback(async () => {
+    setCargando(true)
+    try {
+      setResumen(await fetchResumenMiDia())
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'No se pudo cargar el tablero')
+    } finally {
+      setCargando(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    void cargar()
+  }, [cargar])
+
+  const funnel = resumen ? funnelMisLeads(resumen.misLeads) : []
+
+  return (
+    <main className="mx-auto max-w-6xl px-4 py-8">
+      <div className="mb-8 flex items-end justify-between">
+        <div>
+          <p className="text-xs font-bold uppercase tracking-widest text-accent">FRASA Desarrollos</p>
+          <h1 className="mt-2 text-3xl font-light text-neutral-900">Mi tablero</h1>
+          {resumen && (
+            <p className="mt-1 text-xs text-neutral-400">
+              Actualizado: {new Date(resumen.generadoEn).toLocaleString('es-MX')}
+            </p>
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={() => void cargar()}
+          disabled={cargando}
+          className="border border-accent px-5 py-2 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white disabled:opacity-50"
+        >
+          {cargando ? 'Actualizando…' : 'Actualizar'}
+        </button>
+      </div>
+
+      {error && (
+        <p role="alert" className="mb-8 border border-amber-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-amber-700">
+          Sin datos del API — {error}
+        </p>
+      )}
+
+      {resumen?.sinMapeoMonday && (
+        <p className="mb-8 border border-amber-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-amber-700">
+          Tu usuario aún no está ligado a Monday: las listas personales aparecen vacías
+        </p>
+      )}
+
+      {!resumen && !error && cargando && <EstadoVacio mensaje="Cargando…" />}
+      {!resumen && !error && !cargando && <EstadoVacio mensaje="Sin datos" />}
+
+      {resumen && (
+        <>
+          <section aria-label="Mis indicadores" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <KpiCard
+              titulo="Mis leads activos"
+              valor={resumen.misLeads.length}
+              detalle={`${resumen.conteos.leadsNuevosSemana} nuevo(s) esta semana`}
+            />
+            <KpiCard
+              titulo="Mis actividades abiertas"
+              valor={resumen.conteos.actividadesAbiertas}
+              detalle={`${resumen.misActividadesHoy.length} con fecha de hoy o antes`}
+            />
+            <KpiCard
+              titulo="Apartados por vencer"
+              valor={resumen.apartadosPorVencer.length}
+              detalle="próximos 7 días (pipeline completo)"
+            />
+          </section>
+
+          <section aria-label="Mis leads por estado" className="mt-12">
+            <TituloSeccion>Mis leads por estado</TituloSeccion>
+            {funnel.length === 0 ? (
+              <EstadoVacio mensaje="Sin leads asignados" />
+            ) : (
+              <div className="h-72">
+                <ResponsiveContainer width="100%" height="100%">
+                  <FunnelChart>
+                    <Tooltip />
+                    <Funnel dataKey="valor" data={funnel} nameKey="etapa" isAnimationActive={false}>
+                      {funnel.map((etapa, i) => (
+                        <Cell key={etapa.etapa} fill={COLORES_FUNNEL[i % COLORES_FUNNEL.length]} />
+                      ))}
+                      <LabelList position="right" dataKey="etapa" stroke="none" fontSize={11} />
+                      <LabelList position="center" dataKey="valor" stroke="none" fill="#fff" fontSize={12} />
+                    </Funnel>
+                  </FunnelChart>
+                </ResponsiveContainer>
+              </div>
+            )}
+          </section>
+        </>
+      )}
+    </main>
+  )
+}

apps/dashboards/src/components/SeccionEquipo.tsx

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useState } from 'react'
+import { EstadoVacio, TituloSeccion } from './comunes'
+import type { ResumenMiDia } from '../lib/mi-tablero'
+import { fetchResumenMiDia } from '../services/mi-dia'
+
+const CLASE_CELDA = 'px-4 py-3 text-sm text-neutral-900'
+const CLASE_ENCABEZADO =
+  'px-4 py-2 text-left text-xs font-bold uppercase tracking-widest text-neutral-500'
+
+/**
+ * Sección "Equipo" (solo coordinador/corporativo/admin): tabla vendedor →
+ * leads asignados y nuevos esta semana, más los leads nuevos sin asignar.
+ * Fuente: `equipo` de GET /api/mi-dia/resumen (el API solo la incluye para
+ * esos roles).
+ */
+export default function SeccionEquipo() {
+  const [equipo, setEquipo] = useState<ResumenMiDia['equipo'] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const cargar = useCallback(async () => {
+    try {
+      setEquipo((await fetchResumenMiDia()).equipo ?? null)
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'No se pudo cargar el equipo')
+    }
+  }, [])
+
+  useEffect(() => {
+    void cargar()
+  }, [cargar])
+
+  return (
+    <section aria-label="Equipo" className="mt-12">
+      <TituloSeccion>Equipo: leads por vendedor</TituloSeccion>
+      {error && (
+        <p role="alert" className="border border-amber-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-amber-700">
+          Sin datos del API — {error}
+        </p>
+      )}
+      {!error && !equipo && <EstadoVacio mensaje="Sin datos de equipo" />}
+      {!error && equipo && (
+        <>
+          <p className="mb-4 text-xs text-neutral-500">
+            Leads nuevos sin asignar:{' '}
+            <span className="font-bold text-neutral-900">{equipo.leadsNuevosSinAsignar}</span>
+          </p>
+          {equipo.porVendedor.length === 0 ? (
+            <EstadoVacio mensaje="Sin leads asignados al equipo" />
+          ) : (
+            <table className="w-full border border-neutral-200 bg-white">
+              <thead className="border-b border-neutral-200">
+                <tr>
+                  <th className={CLASE_ENCABEZADO}>Vendedor</th>
+                  <th className={CLASE_ENCABEZADO}>Leads asignados</th>
+                  <th className={CLASE_ENCABEZADO}>Nuevos esta semana</th>
+                </tr>
+              </thead>
+              <tbody>
+                {equipo.porVendedor.map((v) => (
+                  <tr key={v.mondayUserId} className="border-b border-neutral-100 last:border-b-0">
+                    <td className={CLASE_CELDA}>{v.nombre ?? `Monday #${v.mondayUserId}`}</td>
+                    <td className={CLASE_CELDA}>{v.leadsAsignados}</td>
+                    <td className={CLASE_CELDA}>{v.leadsNuevosSemana}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </>
+      )}
+    </section>
+  )
+}

apps/dashboards/src/components/TableroGeneral.tsx

@@ -0,0 +1,252 @@
+import { useCallback, useEffect, useState } from 'react'
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Funnel,
+  FunnelChart,
+  LabelList,
+  Legend,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts'
+import KpiCard from './KpiCard'
+import SeccionEquipo from './SeccionEquipo'
+import { EstadoVacio, TituloSeccion } from './comunes'
+import {
+  datosCobranza,
+  datosFunnel,
+  datosPipeline,
+  formatoMoneda,
+  formatoPorcentaje,
+  unidadesApiladas,
+  unidadesEnEtapa,
+  type ResumenReportes,
+} from '../lib/reportes'
+import { fetchResumen } from '../services/reportes'
+
+// Paleta StudioBlank: acento verde + neutros (sin gradientes ni sombras)
+const COLORES_STATUS: Record<string, string> = {
+  DISPONIBLE: '#1B4332',
+  APARTADO: '#b45309',
+  VENDIDO: '#525252',
+  BLOQUEADO: '#b91c1c',
+  OTROS: '#d4d4d4',
+}
+const COLORES_FUNNEL = ['#a3a3a3', '#737373', '#52796f', '#1B4332']
+const COLORES_COBRANZA = ['#1B4332', '#b45309']
+
+/**
+ * Vista "General": el tablero comercial de todo el ecosistema (KPIs, inventario,
+ * pipeline, funnel y cobranza). Con `mostrarEquipo` (coordinador/corporativo/
+ * admin) agrega la sección Equipo con leads por vendedor.
+ */
+export default function TableroGeneral({ mostrarEquipo }: { mostrarEquipo: boolean }) {
+  const [resumen, setResumen] = useState<ResumenReportes | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [cargando, setCargando] = useState(true)
+
+  const cargar = useCallback(async () => {
+    setCargando(true)
+    try {
+      setResumen(await fetchResumen())
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'No se pudo cargar el tablero')
+    } finally {
+      setCargando(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    void cargar()
+  }, [cargar])
+
+  const unidades = resumen ? unidadesApiladas(resumen) : []
+  const funnel = resumen ? datosFunnel(resumen) : []
+  const cobranza = resumen ? datosCobranza(resumen) : []
+  const pipeline = resumen ? datosPipeline(resumen) : []
+  const sinPipeline = pipeline.every((e) => e.valor === 0)
+  const sinCobranza = resumen !== null && resumen.cobranza.planesAlCorriente + resumen.cobranza.planesConVencidos === 0
+
+  return (
+    <main className="mx-auto max-w-6xl px-4 py-8">
+      <div className="mb-8 flex items-end justify-between">
+        <div>
+          <p className="text-xs font-bold uppercase tracking-widest text-accent">FRASA Desarrollos</p>
+          <h1 className="mt-2 text-3xl font-light text-neutral-900">Tablero comercial</h1>
+          {resumen && (
+            <p className="mt-1 text-xs text-neutral-400">
+              Actualizado: {new Date(resumen.generadoEn).toLocaleString('es-MX')}
+            </p>
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={() => void cargar()}
+          disabled={cargando}
+          className="border border-accent px-5 py-2 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white disabled:opacity-50"
+        >
+          {cargando ? 'Actualizando…' : 'Actualizar'}
+        </button>
+      </div>
+
+      {error && (
+        <p role="alert" className="mb-8 border border-amber-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-amber-700">
+          Sin datos del API — {error}
+        </p>
+      )}
+
+      {!resumen && !error && cargando && <EstadoVacio mensaje="Cargando…" />}
+      {!resumen && !error && !cargando && <EstadoVacio mensaje="Sin datos" />}
+
+      {resumen && (
+        <>
+          <section aria-label="Indicadores clave" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <KpiCard
+              titulo="Leads totales"
+              valor={resumen.leads.total}
+              detalle={`${resumen.leads.nuevosHoy} hoy · ${resumen.leads.nuevosSemana} esta semana`}
+            />
+            <KpiCard
+              titulo="Oportunidades activas"
+              valor={resumen.oportunidades.activas}
+              detalle={`${resumen.oportunidades.total} en total`}
+            />
+            <KpiCard
+              titulo="Conversión Aparto / Ganado"
+              valor={`${formatoPorcentaje(resumen.oportunidades.tasaAparto)} / ${formatoPorcentaje(resumen.oportunidades.tasaGanado)}`}
+            />
+            <KpiCard
+              titulo="Unidades disponibles"
+              valor={resumen.unidades.disponibles}
+              detalle={`${resumen.unidades.total} en inventario`}
+            />
+            <KpiCard
+              titulo="Cartera vencida"
+              valor={formatoMoneda(resumen.cobranza.montoVencido)}
+              detalle={`${resumen.cobranza.pagosVencidos} pago(s) vencido(s)`}
+            />
+            <KpiCard
+              titulo="Planes activos"
+              valor={resumen.cobranza.planes.activos}
+              detalle={`${resumen.cobranza.planes.liquidados} liquidados · ${resumen.cobranza.planes.cancelados} cancelados`}
+            />
+            <KpiCard titulo="Actividades abiertas" valor={resumen.actividadesAbiertas} />
+            <KpiCard
+              titulo="En notaría"
+              valor={unidadesEnEtapa(resumen, 'Notaría')}
+              detalle="unidades en etapa Notaría"
+            />
+            <KpiCard
+              titulo="Leads por contactar"
+              valor={resumen.leads.porEstado['NUEVO'] ?? 0}
+              detalle="en estado NUEVO"
+            />
+          </section>
+
+          <section aria-label="Inventario por desarrollo" className="mt-12">
+            <TituloSeccion>Unidades por desarrollo y status</TituloSeccion>
+            {unidades.length === 0 ? (
+              <EstadoVacio mensaje="Sin inventario" />
+            ) : (
+              <div className="h-72">
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={unidades} margin={{ top: 8, right: 8, left: -16, bottom: 0 }}>
+                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                    <XAxis dataKey="desarrollo" tick={{ fontSize: 11 }} />
+                    <YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
+                    <Tooltip />
+                    <Legend wrapperStyle={{ fontSize: 11 }} />
+                    {Object.keys(COLORES_STATUS).map((status) => (
+                      <Bar key={status} dataKey={status} stackId="unidades" fill={COLORES_STATUS[status]} />
+                    ))}
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            )}
+          </section>
+
+          <section aria-label="Pipeline de ventas por etapa" className="mt-12">
+            <TituloSeccion>Pipeline de ventas por etapa</TituloSeccion>
+            {sinPipeline ? (
+              <EstadoVacio mensaje="Sin unidades en el pipeline" />
+            ) : (
+              <div className="h-80">
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={pipeline} layout="vertical" margin={{ top: 8, right: 24, left: 24, bottom: 0 }}>
+                    <CartesianGrid strokeDasharray="3 3" horizontal={false} />
+                    <XAxis type="number" allowDecimals={false} tick={{ fontSize: 11 }} />
+                    <YAxis type="category" dataKey="etapa" width={90} tick={{ fontSize: 11 }} />
+                    <Tooltip />
+                    <Bar dataKey="valor" name="Unidades" fill="#1B4332" isAnimationActive={false} />
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            )}
+          </section>
+
+          <div className="mt-12 grid gap-12 lg:grid-cols-2">
+            <section aria-label="Embudo comercial">
+              <TituloSeccion>Embudo: leads → oportunidades → ganado</TituloSeccion>
+              {funnel.every((e) => e.valor === 0) ? (
+                <EstadoVacio mensaje="Sin movimiento comercial" />
+              ) : (
+                <div className="h-72">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <FunnelChart>
+                      <Tooltip />
+                      <Funnel dataKey="valor" data={funnel} nameKey="etapa" isAnimationActive={false}>
+                        {funnel.map((etapa, i) => (
+                          <Cell key={etapa.etapa} fill={COLORES_FUNNEL[i % COLORES_FUNNEL.length]} />
+                        ))}
+                        <LabelList position="right" dataKey="etapa" stroke="none" fontSize={11} />
+                        <LabelList position="center" dataKey="valor" stroke="none" fill="#fff" fontSize={12} />
+                      </Funnel>
+                    </FunnelChart>
+                  </ResponsiveContainer>
+                </div>
+              )}
+            </section>
+
+            <section aria-label="Estado de la cobranza">
+              <TituloSeccion>Cobranza: al corriente vs vencidos</TituloSeccion>
+              {sinCobranza ? (
+                <EstadoVacio mensaje="Sin planes activos" />
+              ) : (
+                <div className="h-72">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <Pie
+                        data={cobranza}
+                        dataKey="valor"
+                        nameKey="nombre"
+                        innerRadius={60}
+                        outerRadius={90}
+                        isAnimationActive={false}
+                        label={({ name, value }) => `${name}: ${value}`}
+                        fontSize={11}
+                      >
+                        {cobranza.map((rebanada, i) => (
+                          <Cell key={rebanada.nombre} fill={COLORES_COBRANZA[i % COLORES_COBRANZA.length]} />
+                        ))}
+                      </Pie>
+                      <Tooltip />
+                    </PieChart>
+                  </ResponsiveContainer>
+                </div>
+              )}
+            </section>
+          </div>
+
+          {mostrarEquipo && <SeccionEquipo />}
+        </>
+      )}
+    </main>
+  )
+}

apps/dashboards/src/components/comunes.tsx

@@ -0,0 +1,13 @@
+// Piezas visuales compartidas por las vistas del tablero (StudioBlank)
+
+export function EstadoVacio({ mensaje }: { mensaje: string }) {
+  return (
+    <div className="flex h-64 items-center justify-center border border-dashed border-neutral-300">
+      <p className="text-xs font-bold uppercase tracking-widest text-neutral-400">{mensaje}</p>
+    </div>
+  )
+}
+
+export function TituloSeccion({ children }: { children: string }) {
+  return <h2 className="mb-4 text-xs font-bold uppercase tracking-widest text-neutral-500">{children}</h2>
+}