feat: ecosistema FRASA — apps Cotizador, Alta Clientes, Cobranza y Landing

- Cotizador (/quote): 4 propuestas con formulas validadas del Excel, comparador,
  combobox de unidades, vigencia, PDF ANEXO A
- Alta Clientes (/client): wizard 8 pasos, validacion CURP RENAPO, OCR de INE,
  checklist de expediente, firma digital, 5 PDFs legales
- Cobranza (/pay): planes de enganche, mora, vista cobranza del dia, recibos PDF,
  bitacora, dashboard con filtros
- Landing (/): entrada al ecosistema
- Design system StudioBlank (monocromo, acento #1B4332) en las 4 apps
- 123 tests vitest

apps/cobranza/src/pages/HoyPage.tsx

@@ -0,0 +1,102 @@
+import { useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+import type { PlanPago } from '../types'
+import { cargarPlanes } from '../services/repository'
+import { cobranzaDelDia, round2, statusPago } from '../lib/cobranza'
+import { formatoFechaCorta, formatoMoneda } from '../lib/formatters'
+import KpiCard from '../components/KpiCard'
+
+/** Vista "Cobranza del día": vencidos + por vencer en 7 días, a través de todos los planes activos */
+export default function HoyPage() {
+  const [planes] = useState<PlanPago[]>(() => cargarPlanes())
+  const hoy = useMemo(() => new Date(), [])
+  const items = useMemo(() => cobranzaDelDia(planes, hoy), [planes, hoy])
+
+  const vencidos = items.filter((i) => i.atraso > 0)
+  const porVencer = items.length - vencidos.length
+  const totalPorCobrar = round2(
+    items.reduce((acc, i) => acc + (i.pago.monto - i.pago.montoPagado), 0),
+  )
+
+  return (
+    <div className="space-y-16">
+      <div>
+        <h1 className="text-3xl font-light text-neutral-900">Cobranza del día</h1>
+        <p className="mt-1 text-sm text-neutral-500">
+          Pagos vencidos y vencimientos de los próximos 7 días, en todos los planes activos.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-2 gap-6 lg:grid-cols-3">
+        <KpiCard titulo="Pagos vencidos" valor={vencidos.length} />
+        <KpiCard titulo="Por vencer (7 días)" valor={porVencer} />
+        <KpiCard titulo="Monto por cobrar" valor={formatoMoneda(totalPorCobrar)} />
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full text-left text-sm">
+          <thead>
+            <tr className="border-b border-neutral-900 text-xs font-bold uppercase tracking-widest text-neutral-500">
+              <th scope="col" className="py-3 pr-4">Cliente</th>
+              <th scope="col" className="py-3 pr-4">Teléfono</th>
+              <th scope="col" className="py-3 pr-4">Unidad</th>
+              <th scope="col" className="py-3 pr-4"># pago</th>
+              <th scope="col" className="py-3 pr-4">Vencimiento</th>
+              <th scope="col" className="py-3 pr-4 text-right">Monto</th>
+              <th scope="col" className="py-3 pr-4 text-right">Restante</th>
+              <th scope="col" className="py-3 pr-4 text-right">Días atraso</th>
+              <th scope="col" className="py-3">Plan</th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map(({ plan, pago, atraso }) => (
+              <tr
+                key={`${plan.id}-${pago.id}`}
+                className="border-b border-neutral-200 transition-colors duration-150 hover:bg-neutral-50"
+              >
+                <td className="py-3 pr-4 font-medium">{plan.clienteNombre}</td>
+                <td className="py-3 pr-4">
+                  {plan.clienteTelefono ? (
+                    <a href={`tel:${plan.clienteTelefono.replace(/\s/g, '')}`} className="text-accent hover:underline">
+                      {plan.clienteTelefono}
+                    </a>
+                  ) : (
+                    <span className="text-neutral-400">—</span>
+                  )}
+                </td>
+                <td className="py-3 pr-4">{plan.unidadCodigo}</td>
+                <td className="py-3 pr-4">{pago.numPago}</td>
+                <td className="py-3 pr-4">{formatoFechaCorta(pago.fechaVencimiento)}</td>
+                <td className="py-3 pr-4 text-right">{formatoMoneda(pago.monto)}</td>
+                <td className="py-3 pr-4 text-right font-medium">
+                  {formatoMoneda(round2(pago.monto - pago.montoPagado))}
+                </td>
+                <td className="py-3 pr-4 text-right">
+                  {atraso > 0 ? (
+                    <span className="font-medium text-red-700">{atraso}</span>
+                  ) : (
+                    <span className="text-amber-700">
+                      {statusPago(pago, hoy) === 'PARCIAL' ? 'Parcial' : 'Por vencer'}
+                    </span>
+                  )}
+                </td>
+                <td className="py-3">
+                  <Link to={`/planes/${plan.id}`} className="text-accent hover:underline">
+                    Ver plan
+                  </Link>
+                </td>
+              </tr>
+            ))}
+            {items.length === 0 && (
+              <tr>
+                <td colSpan={9} className="py-8 text-center text-neutral-500">
+                  No hay pagos vencidos ni vencimientos en los próximos 7 días.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}