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/agente-ia/index.html

@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#1B4332" />
+    <link rel="manifest" href="/ai/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/ai/icons/icon-192.png" />
     <title>FRASA Desarrollos — Asistente IA</title>
   </head>
   <body>

apps/agente-ia/public/manifest.webmanifest

@@ -0,0 +1,13 @@
+{
+  "name": "Frasa · Asistente IA",
+  "short_name": "Asistente IA",
+  "start_url": "/ai/",
+  "scope": "/ai/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#1B4332",
+  "icons": [
+    { "src": "/ai/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/ai/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

apps/agente-ia/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/agente-ia/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/agente-ia/src/lib/password.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { validarConfirmacion, validarPasswordNueva } from './password'
+
+describe('validarPasswordNueva', () => {
+  it('exige ≥8 caracteres y al menos un número (misma regla que el API)', () => {
+    expect(validarPasswordNueva('corta1')).toContain('8 caracteres')
+    expect(validarPasswordNueva('sinnumeros')).toContain('número')
+    expect(validarPasswordNueva('')).toBeTruthy()
+  })
+
+  it('acepta contraseñas que cumplen la regla', () => {
+    expect(validarPasswordNueva('Frasa2026')).toBeNull()
+    expect(validarPasswordNueva('12345678')).toBeNull()
+  })
+})
+
+describe('validarConfirmacion', () => {
+  it('null si coinciden; mensaje si difieren', () => {
+    expect(validarConfirmacion('abc12345', 'abc12345')).toBeNull()
+    expect(validarConfirmacion('abc12345', 'abc12346')).toContain('no coincide')
+  })
+})

apps/agente-ia/src/lib/password.ts

@@ -0,0 +1,16 @@
+// Validación cliente de la contraseña nueva: misma regla que el API
+// (api-gateway/src/services/auth.service.ts). El API vuelve a validar;
+// esto solo evita un viaje de red con errores obvios.
+
+/** null si cumple; mensaje si no (≥8 caracteres y al menos 1 número) */
+export function validarPasswordNueva(nueva: string): string | null {
+  if (nueva.length < 8 || !/\d/.test(nueva)) {
+    return 'La nueva contraseña debe tener al menos 8 caracteres y un número'
+  }
+  return null
+}
+
+/** null si la confirmación coincide con la nueva; mensaje si difiere */
+export function validarConfirmacion(nueva: string, confirmar: string): string | null {
+  return nueva === confirmar ? null : 'La confirmación no coincide con la nueva contraseña'
+}

apps/agente-ia/src/services/auth.test.ts

@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
   ErrorLogin,
+  cambiarPassword,
   conAuth,
   getSesion,
   getToken,
@@ -122,3 +123,37 @@ describe('manejar401', () => {
     expect(getSesion()).not.toBeNull()
   })
 })
+
+describe('cambiarPassword', () => {
+  it('204: resuelve sin tocar la sesión y manda Bearer + ambas contraseñas', async () => {
+    localStorage.setItem('frasa_auth', JSON.stringify(sesionOk))
+    const fetchMock = vi.fn().mockResolvedValue(new Response(null, { status: 204 }))
+    vi.stubGlobal('fetch', fetchMock)
+
+    await cambiarPassword('Frasa2026', 'NuevaPass2026')
+
+    const [url, init] = fetchMock.mock.calls[0] as [string, RequestInit]
+    expect(url).toContain('/auth/cambiar-password')
+    expect(init.method).toBe('POST')
+    expect(init.headers).toMatchObject({ Authorization: 'Bearer jwt-de-prueba' })
+    expect(JSON.parse(init.body as string)).toEqual({ actual: 'Frasa2026', nueva: 'NuevaPass2026' })
+    expect(getSesion()).not.toBeNull()
+  })
+
+  it('400 del API: lanza Error con el mensaje del API (p. ej. actual incorrecta)', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue(
+        new Response('{"error":"La contraseña actual no es correcta"}', { status: 400 }),
+      ),
+    )
+    await expect(cambiarPassword('mala', 'NuevaPass2026')).rejects.toThrow(
+      'La contraseña actual no es correcta',
+    )
+  })
+
+  it('sin red: Error de conexión', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new TypeError('fetch failed')))
+    await expect(cambiarPassword('a', 'b12345678')).rejects.toThrow('No se pudo conectar')
+  })
+})

apps/agente-ia/src/services/auth.ts

@@ -75,3 +75,28 @@ export function manejar401(res: Response): void {
   logout()
   if (typeof window !== 'undefined') window.location.reload()
 }
+
+/**
+ * POST /auth/cambiar-password. Lanza Error con el mensaje del API cuando
+ * falla (p. ej. "La contraseña actual no es correcta"); no toca la sesión.
+ */
+export async function cambiarPassword(actual: string, nueva: string): Promise<void> {
+  let res: Response
+  try {
+    res = await fetch(
+      `${API_URL}/auth/cambiar-password`,
+      conAuth({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ actual, nueva }),
+      }),
+    )
+  } catch {
+    throw new Error('No se pudo conectar con el servidor')
+  }
+  manejar401(res)
+  if (!res.ok) {
+    const body = (await res.json().catch(() => null)) as { error?: string } | null
+    throw new Error(body?.error ?? `Error ${res.status}`)
+  }
+}

apps/alta-clientes/index.html

@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#1B4332" />
+    <link rel="manifest" href="/client/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/client/icons/icon-192.png" />
     <title>FRASA Desarrollos — Alta de Clientes</title>
   </head>
   <body>

apps/alta-clientes/public/manifest.webmanifest

@@ -0,0 +1,13 @@
+{
+  "name": "Frasa · Alta de clientes",
+  "short_name": "Alta clientes",
+  "start_url": "/client/",
+  "scope": "/client/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#1B4332",
+  "icons": [
+    { "src": "/client/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/client/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

apps/alta-clientes/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/alta-clientes/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/alta-clientes/src/lib/password.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { validarConfirmacion, validarPasswordNueva } from './password'
+
+describe('validarPasswordNueva', () => {
+  it('exige ≥8 caracteres y al menos un número (misma regla que el API)', () => {
+    expect(validarPasswordNueva('corta1')).toContain('8 caracteres')
+    expect(validarPasswordNueva('sinnumeros')).toContain('número')
+    expect(validarPasswordNueva('')).toBeTruthy()
+  })
+
+  it('acepta contraseñas que cumplen la regla', () => {
+    expect(validarPasswordNueva('Frasa2026')).toBeNull()
+    expect(validarPasswordNueva('12345678')).toBeNull()
+  })
+})
+
+describe('validarConfirmacion', () => {
+  it('null si coinciden; mensaje si difieren', () => {
+    expect(validarConfirmacion('abc12345', 'abc12345')).toBeNull()
+    expect(validarConfirmacion('abc12345', 'abc12346')).toContain('no coincide')
+  })
+})

apps/alta-clientes/src/lib/password.ts

@@ -0,0 +1,16 @@
+// Validación cliente de la contraseña nueva: misma regla que el API
+// (api-gateway/src/services/auth.service.ts). El API vuelve a validar;
+// esto solo evita un viaje de red con errores obvios.
+
+/** null si cumple; mensaje si no (≥8 caracteres y al menos 1 número) */
+export function validarPasswordNueva(nueva: string): string | null {
+  if (nueva.length < 8 || !/\d/.test(nueva)) {
+    return 'La nueva contraseña debe tener al menos 8 caracteres y un número'
+  }
+  return null
+}
+
+/** null si la confirmación coincide con la nueva; mensaje si difiere */
+export function validarConfirmacion(nueva: string, confirmar: string): string | null {
+  return nueva === confirmar ? null : 'La confirmación no coincide con la nueva contraseña'
+}

apps/alta-clientes/src/services/auth.test.ts

@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
   ErrorLogin,
+  cambiarPassword,
   conAuth,
   getSesion,
   getToken,
@@ -122,3 +123,37 @@ describe('manejar401', () => {
     expect(getSesion()).not.toBeNull()
   })
 })
+
+describe('cambiarPassword', () => {
+  it('204: resuelve sin tocar la sesión y manda Bearer + ambas contraseñas', async () => {
+    localStorage.setItem('frasa_auth', JSON.stringify(sesionOk))
+    const fetchMock = vi.fn().mockResolvedValue(new Response(null, { status: 204 }))
+    vi.stubGlobal('fetch', fetchMock)
+
+    await cambiarPassword('Frasa2026', 'NuevaPass2026')
+
+    const [url, init] = fetchMock.mock.calls[0] as [string, RequestInit]
+    expect(url).toContain('/auth/cambiar-password')
+    expect(init.method).toBe('POST')
+    expect(init.headers).toMatchObject({ Authorization: 'Bearer jwt-de-prueba' })
+    expect(JSON.parse(init.body as string)).toEqual({ actual: 'Frasa2026', nueva: 'NuevaPass2026' })
+    expect(getSesion()).not.toBeNull()
+  })
+
+  it('400 del API: lanza Error con el mensaje del API (p. ej. actual incorrecta)', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue(
+        new Response('{"error":"La contraseña actual no es correcta"}', { status: 400 }),
+      ),
+    )
+    await expect(cambiarPassword('mala', 'NuevaPass2026')).rejects.toThrow(
+      'La contraseña actual no es correcta',
+    )
+  })
+
+  it('sin red: Error de conexión', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new TypeError('fetch failed')))
+    await expect(cambiarPassword('a', 'b12345678')).rejects.toThrow('No se pudo conectar')
+  })
+})

apps/alta-clientes/src/services/auth.ts

@@ -75,3 +75,28 @@ export function manejar401(res: Response): void {
   logout()
   if (typeof window !== 'undefined') window.location.reload()
 }
+
+/**
+ * POST /auth/cambiar-password. Lanza Error con el mensaje del API cuando
+ * falla (p. ej. "La contraseña actual no es correcta"); no toca la sesión.
+ */
+export async function cambiarPassword(actual: string, nueva: string): Promise<void> {
+  let res: Response
+  try {
+    res = await fetch(
+      `${API_URL}/auth/cambiar-password`,
+      conAuth({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ actual, nueva }),
+      }),
+    )
+  } catch {
+    throw new Error('No se pudo conectar con el servidor')
+  }
+  manejar401(res)
+  if (!res.ok) {
+    const body = (await res.json().catch(() => null)) as { error?: string } | null
+    throw new Error(body?.error ?? `Error ${res.status}`)
+  }
+}

apps/cobranza/index.html

@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#1B4332" />
+    <link rel="manifest" href="/pay/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/pay/icons/icon-192.png" />
     <title>FRASA Desarrollos — Cobranza</title>
   </head>
   <body>

apps/cobranza/public/manifest.webmanifest

@@ -0,0 +1,13 @@
+{
+  "name": "Frasa · Cobranza",
+  "short_name": "Cobranza",
+  "start_url": "/pay/",
+  "scope": "/pay/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#1B4332",
+  "icons": [
+    { "src": "/pay/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/pay/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

apps/cobranza/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/cobranza/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/cobranza/src/lib/password.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { validarConfirmacion, validarPasswordNueva } from './password'
+
+describe('validarPasswordNueva', () => {
+  it('exige ≥8 caracteres y al menos un número (misma regla que el API)', () => {
+    expect(validarPasswordNueva('corta1')).toContain('8 caracteres')
+    expect(validarPasswordNueva('sinnumeros')).toContain('número')
+    expect(validarPasswordNueva('')).toBeTruthy()
+  })
+
+  it('acepta contraseñas que cumplen la regla', () => {
+    expect(validarPasswordNueva('Frasa2026')).toBeNull()
+    expect(validarPasswordNueva('12345678')).toBeNull()
+  })
+})
+
+describe('validarConfirmacion', () => {
+  it('null si coinciden; mensaje si difieren', () => {
+    expect(validarConfirmacion('abc12345', 'abc12345')).toBeNull()
+    expect(validarConfirmacion('abc12345', 'abc12346')).toContain('no coincide')
+  })
+})

apps/cobranza/src/lib/password.ts

@@ -0,0 +1,16 @@
+// Validación cliente de la contraseña nueva: misma regla que el API
+// (api-gateway/src/services/auth.service.ts). El API vuelve a validar;
+// esto solo evita un viaje de red con errores obvios.
+
+/** null si cumple; mensaje si no (≥8 caracteres y al menos 1 número) */
+export function validarPasswordNueva(nueva: string): string | null {
+  if (nueva.length < 8 || !/\d/.test(nueva)) {
+    return 'La nueva contraseña debe tener al menos 8 caracteres y un número'
+  }
+  return null
+}
+
+/** null si la confirmación coincide con la nueva; mensaje si difiere */
+export function validarConfirmacion(nueva: string, confirmar: string): string | null {
+  return nueva === confirmar ? null : 'La confirmación no coincide con la nueva contraseña'
+}

apps/cobranza/src/services/auth.test.ts

@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
   ErrorLogin,
+  cambiarPassword,
   conAuth,
   getSesion,
   getToken,
@@ -122,3 +123,37 @@ describe('manejar401', () => {
     expect(getSesion()).not.toBeNull()
   })
 })
+
+describe('cambiarPassword', () => {
+  it('204: resuelve sin tocar la sesión y manda Bearer + ambas contraseñas', async () => {
+    localStorage.setItem('frasa_auth', JSON.stringify(sesionOk))
+    const fetchMock = vi.fn().mockResolvedValue(new Response(null, { status: 204 }))
+    vi.stubGlobal('fetch', fetchMock)
+
+    await cambiarPassword('Frasa2026', 'NuevaPass2026')
+
+    const [url, init] = fetchMock.mock.calls[0] as [string, RequestInit]
+    expect(url).toContain('/auth/cambiar-password')
+    expect(init.method).toBe('POST')
+    expect(init.headers).toMatchObject({ Authorization: 'Bearer jwt-de-prueba' })
+    expect(JSON.parse(init.body as string)).toEqual({ actual: 'Frasa2026', nueva: 'NuevaPass2026' })
+    expect(getSesion()).not.toBeNull()
+  })
+
+  it('400 del API: lanza Error con el mensaje del API (p. ej. actual incorrecta)', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue(
+        new Response('{"error":"La contraseña actual no es correcta"}', { status: 400 }),
+      ),
+    )
+    await expect(cambiarPassword('mala', 'NuevaPass2026')).rejects.toThrow(
+      'La contraseña actual no es correcta',
+    )
+  })
+
+  it('sin red: Error de conexión', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new TypeError('fetch failed')))
+    await expect(cambiarPassword('a', 'b12345678')).rejects.toThrow('No se pudo conectar')
+  })
+})

apps/cobranza/src/services/auth.ts

@@ -75,3 +75,28 @@ export function manejar401(res: Response): void {
   logout()
   if (typeof window !== 'undefined') window.location.reload()
 }
+
+/**
+ * POST /auth/cambiar-password. Lanza Error con el mensaje del API cuando
+ * falla (p. ej. "La contraseña actual no es correcta"); no toca la sesión.
+ */
+export async function cambiarPassword(actual: string, nueva: string): Promise<void> {
+  let res: Response
+  try {
+    res = await fetch(
+      `${API_URL}/auth/cambiar-password`,
+      conAuth({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ actual, nueva }),
+      }),
+    )
+  } catch {
+    throw new Error('No se pudo conectar con el servidor')
+  }
+  manejar401(res)
+  if (!res.ok) {
+    const body = (await res.json().catch(() => null)) as { error?: string } | null
+    throw new Error(body?.error ?? `Error ${res.status}`)
+  }
+}

apps/cotizador/index.html

@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#1B4332" />
+    <link rel="manifest" href="/quote/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/quote/icons/icon-192.png" />
     <title>FRASA Desarrollos — Cotizador</title>
   </head>
   <body>

apps/cotizador/public/manifest.webmanifest

@@ -0,0 +1,13 @@
+{
+  "name": "Frasa · Cotizador",
+  "short_name": "Cotizador",
+  "start_url": "/quote/",
+  "scope": "/quote/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#1B4332",
+  "icons": [
+    { "src": "/quote/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/quote/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

apps/cotizador/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/cotizador/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/cotizador/src/lib/password.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { validarConfirmacion, validarPasswordNueva } from './password'
+
+describe('validarPasswordNueva', () => {
+  it('exige ≥8 caracteres y al menos un número (misma regla que el API)', () => {
+    expect(validarPasswordNueva('corta1')).toContain('8 caracteres')
+    expect(validarPasswordNueva('sinnumeros')).toContain('número')
+    expect(validarPasswordNueva('')).toBeTruthy()
+  })
+
+  it('acepta contraseñas que cumplen la regla', () => {
+    expect(validarPasswordNueva('Frasa2026')).toBeNull()
+    expect(validarPasswordNueva('12345678')).toBeNull()
+  })
+})
+
+describe('validarConfirmacion', () => {
+  it('null si coinciden; mensaje si difieren', () => {
+    expect(validarConfirmacion('abc12345', 'abc12345')).toBeNull()
+    expect(validarConfirmacion('abc12345', 'abc12346')).toContain('no coincide')
+  })
+})

apps/cotizador/src/lib/password.ts

@@ -0,0 +1,16 @@
+// Validación cliente de la contraseña nueva: misma regla que el API
+// (api-gateway/src/services/auth.service.ts). El API vuelve a validar;
+// esto solo evita un viaje de red con errores obvios.
+
+/** null si cumple; mensaje si no (≥8 caracteres y al menos 1 número) */
+export function validarPasswordNueva(nueva: string): string | null {
+  if (nueva.length < 8 || !/\d/.test(nueva)) {
+    return 'La nueva contraseña debe tener al menos 8 caracteres y un número'
+  }
+  return null
+}
+
+/** null si la confirmación coincide con la nueva; mensaje si difiere */
+export function validarConfirmacion(nueva: string, confirmar: string): string | null {
+  return nueva === confirmar ? null : 'La confirmación no coincide con la nueva contraseña'
+}

apps/cotizador/src/services/auth.test.ts

@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
   ErrorLogin,
+  cambiarPassword,
   conAuth,
   getSesion,
   getToken,
@@ -122,3 +123,37 @@ describe('manejar401', () => {
     expect(getSesion()).not.toBeNull()
   })
 })
+
+describe('cambiarPassword', () => {
+  it('204: resuelve sin tocar la sesión y manda Bearer + ambas contraseñas', async () => {
+    localStorage.setItem('frasa_auth', JSON.stringify(sesionOk))
+    const fetchMock = vi.fn().mockResolvedValue(new Response(null, { status: 204 }))
+    vi.stubGlobal('fetch', fetchMock)
+
+    await cambiarPassword('Frasa2026', 'NuevaPass2026')
+
+    const [url, init] = fetchMock.mock.calls[0] as [string, RequestInit]
+    expect(url).toContain('/auth/cambiar-password')
+    expect(init.method).toBe('POST')
+    expect(init.headers).toMatchObject({ Authorization: 'Bearer jwt-de-prueba' })
+    expect(JSON.parse(init.body as string)).toEqual({ actual: 'Frasa2026', nueva: 'NuevaPass2026' })
+    expect(getSesion()).not.toBeNull()
+  })
+
+  it('400 del API: lanza Error con el mensaje del API (p. ej. actual incorrecta)', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue(
+        new Response('{"error":"La contraseña actual no es correcta"}', { status: 400 }),
+      ),
+    )
+    await expect(cambiarPassword('mala', 'NuevaPass2026')).rejects.toThrow(
+      'La contraseña actual no es correcta',
+    )
+  })
+
+  it('sin red: Error de conexión', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new TypeError('fetch failed')))
+    await expect(cambiarPassword('a', 'b12345678')).rejects.toThrow('No se pudo conectar')
+  })
+})

apps/cotizador/src/services/auth.ts

@@ -75,3 +75,28 @@ export function manejar401(res: Response): void {
   logout()
   if (typeof window !== 'undefined') window.location.reload()
 }
+
+/**
+ * POST /auth/cambiar-password. Lanza Error con el mensaje del API cuando
+ * falla (p. ej. "La contraseña actual no es correcta"); no toca la sesión.
+ */
+export async function cambiarPassword(actual: string, nueva: string): Promise<void> {
+  let res: Response
+  try {
+    res = await fetch(
+      `${API_URL}/auth/cambiar-password`,
+      conAuth({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ actual, nueva }),
+      }),
+    )
+  } catch {
+    throw new Error('No se pudo conectar con el servidor')
+  }
+  manejar401(res)
+  if (!res.ok) {
+    const body = (await res.json().catch(() => null)) as { error?: string } | null
+    throw new Error(body?.error ?? `Error ${res.status}`)
+  }
+}

apps/dashboards/index.html

@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#1B4332" />
+    <link rel="manifest" href="/dash/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/dash/icons/icon-192.png" />
     <title>FRASA Desarrollos — Tableros</title>
   </head>
   <body>

apps/dashboards/public/manifest.webmanifest

@@ -0,0 +1,13 @@
+{
+  "name": "Frasa · Tableros",
+  "short_name": "Tableros",
+  "start_url": "/dash/",
+  "scope": "/dash/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#1B4332",
+  "icons": [
+    { "src": "/dash/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/dash/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

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>
+}

apps/dashboards/src/lib/mi-tablero.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import { esRolConEquipo, funnelMisLeads, type LeadMiDia } from './mi-tablero'
+
+function lead(id: string, estado: string): LeadMiDia {
+  return { id, nombre: `Lead ${id}`, telefono: '', email: '', estado, origen: 'Web', updatedAt: '' }
+}
+
+describe('esRolConEquipo', () => {
+  it('coordinador, corporativo y admin ven equipo; vendedor no', () => {
+    expect(esRolConEquipo('coordinador')).toBe(true)
+    expect(esRolConEquipo('corporativo')).toBe(true)
+    expect(esRolConEquipo('admin')).toBe(true)
+    expect(esRolConEquipo('vendedor')).toBe(false)
+  })
+})
+
+describe('funnelMisLeads', () => {
+  it('agrupa por estado normalizado y ordena de mayor a menor', () => {
+    const funnel = funnelMisLeads([
+      lead('1', 'NUEVO'),
+      lead('2', 'nuevo'),
+      lead('3', ' Contactado '),
+      lead('4', 'CITA'),
+    ])
+    expect(funnel).toEqual([
+      { etapa: 'NUEVO', valor: 2 },
+      { etapa: 'CITA', valor: 1 },
+      { etapa: 'CONTACTADO', valor: 1 },
+    ])
+  })
+
+  it('lista vacía → funnel vacío; estado vacío → SIN ESTADO', () => {
+    expect(funnelMisLeads([])).toEqual([])
+    expect(funnelMisLeads([lead('1', '  ')])).toEqual([{ etapa: 'SIN ESTADO', valor: 1 }])
+  })
+})

apps/dashboards/src/lib/mi-tablero.ts

@@ -0,0 +1,81 @@
+// Tipos del endpoint GET /api/mi-dia/resumen (espejo del contrato del API) y
+// transformaciones puras para la vista "Mi tablero" y la sección "Equipo".
+
+export interface LeadMiDia {
+  id: string
+  nombre: string
+  telefono: string
+  email: string
+  estado: string
+  origen: string
+  updatedAt: string
+}
+
+export interface ActividadMiDia {
+  id: string
+  nombre: string
+  tipo: string
+  fecha: string // 'YYYY-MM-DD'
+  estado: string
+}
+
+export interface ApartadoPorVencer {
+  id: string
+  nombre: string
+  unidadCodigo: string
+  fechaLimite: string // 'YYYY-MM-DD'
+  estado: string
+  diasRestantes: number
+}
+
+export interface VendedorEquipo {
+  mondayUserId: number
+  nombre: string | null
+  leadsAsignados: number
+  leadsNuevosSemana: number
+}
+
+export interface ResumenMiDia {
+  generadoEn: string
+  sinMapeoMonday: boolean
+  misLeads: LeadMiDia[]
+  misActividadesHoy: ActividadMiDia[]
+  apartadosPorVencer: ApartadoPorVencer[]
+  misOportunidades: { porEtapa: Record<string, number> } | null
+  notaOportunidades: string | null
+  conteos: {
+    leadsNuevosSemana: number
+    actividadesAbiertas: number
+  }
+  equipo?: {
+    leadsNuevosSinAsignar: number
+    porVendedor: VendedorEquipo[]
+  }
+}
+
+const ROLES_CON_EQUIPO = ['coordinador', 'corporativo', 'admin']
+
+/** ¿El rol ve el tablero general por defecto y la sección de equipo? (misma regla que el API) */
+export function esRolConEquipo(rol: string): boolean {
+  return ROLES_CON_EQUIPO.includes(rol)
+}
+
+export interface EtapaFunnelPersonal {
+  etapa: string
+  valor: number
+}
+
+/**
+ * Funnel personal: conteo de mis leads por estado (etiqueta normalizada en
+ * mayúsculas), ordenado de mayor a menor para que la gráfica baje.
+ */
+export function funnelMisLeads(misLeads: LeadMiDia[]): EtapaFunnelPersonal[] {
+  const conteo = new Map<string, number>()
+  for (const lead of misLeads) {
+    const estado = lead.estado.trim().toUpperCase() || 'SIN ESTADO'
+    conteo.set(estado, (conteo.get(estado) ?? 0) + 1)
+  }
+  return [...conteo.entries()]
+    .map(([etapa, valor]) => ({ etapa, valor }))
+    .sort((a, b) => b.valor - a.valor || a.etapa.localeCompare(b.etapa))
+}

apps/dashboards/src/lib/password.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { validarConfirmacion, validarPasswordNueva } from './password'
+
+describe('validarPasswordNueva', () => {
+  it('exige ≥8 caracteres y al menos un número (misma regla que el API)', () => {
+    expect(validarPasswordNueva('corta1')).toContain('8 caracteres')
+    expect(validarPasswordNueva('sinnumeros')).toContain('número')
+    expect(validarPasswordNueva('')).toBeTruthy()
+  })
+
+  it('acepta contraseñas que cumplen la regla', () => {
+    expect(validarPasswordNueva('Frasa2026')).toBeNull()
+    expect(validarPasswordNueva('12345678')).toBeNull()
+  })
+})
+
+describe('validarConfirmacion', () => {
+  it('null si coinciden; mensaje si difieren', () => {
+    expect(validarConfirmacion('abc12345', 'abc12345')).toBeNull()
+    expect(validarConfirmacion('abc12345', 'abc12346')).toContain('no coincide')
+  })
+})

apps/dashboards/src/lib/password.ts

@@ -0,0 +1,16 @@
+// Validación cliente de la contraseña nueva: misma regla que el API
+// (api-gateway/src/services/auth.service.ts). El API vuelve a validar;
+// esto solo evita un viaje de red con errores obvios.
+
+/** null si cumple; mensaje si no (≥8 caracteres y al menos 1 número) */
+export function validarPasswordNueva(nueva: string): string | null {
+  if (nueva.length < 8 || !/\d/.test(nueva)) {
+    return 'La nueva contraseña debe tener al menos 8 caracteres y un número'
+  }
+  return null
+}
+
+/** null si la confirmación coincide con la nueva; mensaje si difiere */
+export function validarConfirmacion(nueva: string, confirmar: string): string | null {
+  return nueva === confirmar ? null : 'La confirmación no coincide con la nueva contraseña'
+}

apps/dashboards/src/pages/DashboardPage.tsx

@@ -1,255 +1,49 @@
-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 '../components/KpiCard'
-import {
-  datosCobranza,
-  datosFunnel,
-  datosPipeline,
-  formatoMoneda,
-  formatoPorcentaje,
-  unidadesApiladas,
-  unidadesEnEtapa,
-  type ResumenReportes,
-} from '../lib/reportes'
-import { fetchResumen } from '../services/reportes'
+import { useState } from 'react'
+import MiTablero from '../components/MiTablero'
+import TableroGeneral from '../components/TableroGeneral'
+import { esRolConEquipo } from '../lib/mi-tablero'
+import { getSesion } from '../services/auth'
 
-// 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']
+type Vista = 'mia' | 'general'
+
+const VISTAS: { id: Vista; etiqueta: string }[] = [
+  { id: 'mia', etiqueta: 'Mi tablero' },
+  { id: 'general', etiqueta: 'General' },
+]
+
+/**
+ * Tableros con vista por rol: el vendedor entra a "Mi tablero" (sus KPIs y el
+ * funnel de sus leads); coordinador/corporativo/admin entran a "General" con
+ * la sección Equipo. El toggle permite cambiar de vista en cualquier momento.
+ */
+export default function DashboardPage() {
+  const rol = getSesion()?.usuario.rol ?? 'vendedor'
+  const conEquipo = esRolConEquipo(rol)
+  const [vista, setVista] = useState<Vista>(conEquipo ? 'general' : 'mia')
 
-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>
+      <div className="border-b border-neutral-200 bg-white">
+        <div className="mx-auto flex max-w-6xl gap-2 px-4 py-3" role="tablist" aria-label="Vista del tablero">
+          {VISTAS.map((v) => (
+            <button
+              key={v.id}
+              type="button"
+              role="tab"
+              aria-selected={vista === v.id}
+              onClick={() => setVista(v.id)}
+              className={
+                vista === v.id
+                  ? 'bg-accent px-5 py-2 text-xs font-bold uppercase tracking-widest text-white'
+                  : 'border border-neutral-300 px-5 py-2 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500'
+              }
+            >
+              {v.etiqueta}
+            </button>
+          ))}
+        </div>
+      </div>
+      {vista === 'mia' ? <MiTablero /> : <TableroGeneral mostrarEquipo={conEquipo} />}
     </div>
   )
 }
-
-function TituloSeccion({ children }: { children: string }) {
-  return <h2 className="mb-4 text-xs font-bold uppercase tracking-widest text-neutral-500">{children}</h2>
-}
-
-export default function DashboardPage() {
-  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>
-        </>
-      )}
-    </main>
-  )
-}

apps/dashboards/src/services/auth.ts

@@ -75,3 +75,28 @@ export function manejar401(res: Response): void {
   logout()
   if (typeof window !== 'undefined') window.location.reload()
 }
+
+/**
+ * POST /auth/cambiar-password. Lanza Error con el mensaje del API cuando
+ * falla (p. ej. "La contraseña actual no es correcta"); no toca la sesión.
+ */
+export async function cambiarPassword(actual: string, nueva: string): Promise<void> {
+  let res: Response
+  try {
+    res = await fetch(
+      `${API_URL}/auth/cambiar-password`,
+      conAuth({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ actual, nueva }),
+      }),
+    )
+  } catch {
+    throw new Error('No se pudo conectar con el servidor')
+  }
+  manejar401(res)
+  if (!res.ok) {
+    const body = (await res.json().catch(() => null)) as { error?: string } | null
+    throw new Error(body?.error ?? `Error ${res.status}`)
+  }
+}

apps/dashboards/src/services/mi-dia.ts

@@ -0,0 +1,18 @@
+// Cliente del endpoint "Mi día" del API Gateway (para Mi tablero y la sección Equipo)
+import { conAuth, manejar401 } from './auth'
+import type { ResumenMiDia } from '../lib/mi-tablero'
+
+const API_URL = import.meta.env.VITE_API_URL ?? 'http://192.168.10.123:3000/api'
+
+/** GET /mi-dia/resumen; lanza Error con mensaje legible si el API falla */
+export async function fetchResumenMiDia(): Promise<ResumenMiDia> {
+  let res: Response
+  try {
+    res = await fetch(`${API_URL}/mi-dia/resumen`, conAuth())
+  } catch {
+    throw new Error('No se pudo conectar con el servidor')
+  }
+  manejar401(res)
+  if (!res.ok) throw new Error(`El API respondió ${res.status}`)
+  return (await res.json()) as ResumenMiDia
+}

apps/landing/index.html

@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#1B4332" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/icons/icon-192.png" />
     <meta name="description" content="Página de entrada al ecosistema comercial de FRASA Desarrollos" />
     <title>FRASA Desarrollos — Ecosistema comercial</title>
   </head>

apps/landing/public/manifest.webmanifest

@@ -0,0 +1,13 @@
+{
+  "name": "Frasa Desarrollos",
+  "short_name": "Frasa",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#1B4332",
+  "icons": [
+    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

apps/mi-dia/index.html

@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#1B4332" />
+    <link rel="manifest" href="/hoy/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/hoy/icons/icon-192.png" />
     <title>FRASA Desarrollos — Mi día</title>
   </head>
   <body>

apps/mi-dia/public/manifest.webmanifest

@@ -0,0 +1,13 @@
+{
+  "name": "Frasa · Mi día",
+  "short_name": "Mi día",
+  "start_url": "/hoy/",
+  "scope": "/hoy/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#1B4332",
+  "icons": [
+    { "src": "/hoy/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/hoy/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

apps/mi-dia/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/mi-dia/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/mi-dia/src/lib/mi-dia.ts

@@ -41,7 +41,12 @@ export interface ResumenMiDia {
   }
   equipo?: {
     leadsNuevosSinAsignar: number
-    porVendedor: { mondayUserId: number; nombre: string | null; leadsAsignados: number }[]
+    porVendedor: {
+      mondayUserId: number
+      nombre: string | null
+      leadsAsignados: number
+      leadsNuevosSemana: number
+    }[]
   }
 }
 

apps/mi-dia/src/lib/password.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { validarConfirmacion, validarPasswordNueva } from './password'
+
+describe('validarPasswordNueva', () => {
+  it('exige ≥8 caracteres y al menos un número (misma regla que el API)', () => {
+    expect(validarPasswordNueva('corta1')).toContain('8 caracteres')
+    expect(validarPasswordNueva('sinnumeros')).toContain('número')
+    expect(validarPasswordNueva('')).toBeTruthy()
+  })
+
+  it('acepta contraseñas que cumplen la regla', () => {
+    expect(validarPasswordNueva('Frasa2026')).toBeNull()
+    expect(validarPasswordNueva('12345678')).toBeNull()
+  })
+})
+
+describe('validarConfirmacion', () => {
+  it('null si coinciden; mensaje si difieren', () => {
+    expect(validarConfirmacion('abc12345', 'abc12345')).toBeNull()
+    expect(validarConfirmacion('abc12345', 'abc12346')).toContain('no coincide')
+  })
+})

apps/mi-dia/src/lib/password.ts

@@ -0,0 +1,16 @@
+// Validación cliente de la contraseña nueva: misma regla que el API
+// (api-gateway/src/services/auth.service.ts). El API vuelve a validar;
+// esto solo evita un viaje de red con errores obvios.
+
+/** null si cumple; mensaje si no (≥8 caracteres y al menos 1 número) */
+export function validarPasswordNueva(nueva: string): string | null {
+  if (nueva.length < 8 || !/\d/.test(nueva)) {
+    return 'La nueva contraseña debe tener al menos 8 caracteres y un número'
+  }
+  return null
+}
+
+/** null si la confirmación coincide con la nueva; mensaje si difiere */
+export function validarConfirmacion(nueva: string, confirmar: string): string | null {
+  return nueva === confirmar ? null : 'La confirmación no coincide con la nueva contraseña'
+}

apps/mi-dia/src/services/auth.ts

@@ -75,3 +75,28 @@ export function manejar401(res: Response): void {
   logout()
   if (typeof window !== 'undefined') window.location.reload()
 }
+
+/**
+ * POST /auth/cambiar-password. Lanza Error con el mensaje del API cuando
+ * falla (p. ej. "La contraseña actual no es correcta"); no toca la sesión.
+ */
+export async function cambiarPassword(actual: string, nueva: string): Promise<void> {
+  let res: Response
+  try {
+    res = await fetch(
+      `${API_URL}/auth/cambiar-password`,
+      conAuth({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ actual, nueva }),
+      }),
+    )
+  } catch {
+    throw new Error('No se pudo conectar con el servidor')
+  }
+  manejar401(res)
+  if (!res.ok) {
+    const body = (await res.json().catch(() => null)) as { error?: string } | null
+    throw new Error(body?.error ?? `Error ${res.status}`)
+  }
+}