style: rediseno de layout profesional en las 7 apps

Headers sticky con marca y acciones, contenedores max-w-[1280px],
grids de contenido con rails laterales sticky (cotizador, mi-dia,
detalle de cobranza), stepper vertical en el wizard de alta, toolbar+
tabla unificadas en cobranza, tabs como segmented control en
dashboards, chat con barra de entrada fija y preguntas sugeridas,
landing con navbar + hero + grid de modulos + footer.

apps/cobranza/src/components/KpiCard.tsx

@@ -1,8 +1,23 @@
 import type { ReactNode } from 'react'
 
-export default function KpiCard({ titulo, valor, detalle }: { titulo: string; valor: ReactNode; detalle?: string }) {
+export default function KpiCard({
+  titulo,
+  valor,
+  detalle,
+  plano = false,
+}: {
+  titulo: string
+  valor: ReactNode
+  detalle?: string
+  /** `plano` quita sombra/hover para anidar la tarjeta dentro de otra tarjeta */
+  plano?: boolean
+}) {
   return (
-    <div className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm transition-shadow duration-200 ease-in-out hover:shadow-md">
+    <div
+      className={`rounded-xl border border-[#E5E7EB] bg-white p-6 ${
+        plano ? '' : 'shadow-sm transition-shadow duration-200 ease-in-out hover:shadow-md'
+      }`}
+    >
       <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">{titulo}</p>
       <p className="mt-2 text-3xl font-light text-[#111827]">{valor}</p>
       {detalle && <p className="mt-2 text-xs text-[#64748B]">{detalle}</p>}

apps/cobranza/src/components/Layout.tsx

@@ -4,14 +4,14 @@ import { Link } from 'react-router-dom'
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
-      <header className="border-b border-[#E5E7EB] bg-white">
-        <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-4">
+      <header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur">
+        <div className="mx-auto flex h-16 max-w-[1280px] items-center justify-between px-4 sm:px-6">
           <Link to="/" className="text-sm tracking-widest">
             <span className="font-bold">FRASA</span>
             <span className="text-[#F97316]">.</span>{' '}
             <span className="font-light text-[#64748B]">COBRANZA</span>
           </Link>
-          <nav className="flex items-center gap-6 text-sm">
+          <nav className="flex items-center gap-3 text-sm sm:gap-6">
             <Link
               to="/"
               className="text-[#64748B] transition-colors duration-150 hover:text-[#111827]"
@@ -20,20 +20,20 @@ export default function Layout({ children }: { children: ReactNode }) {
             </Link>
             <Link
               to="/hoy"
-              className="rounded-lg border border-accent px-5 py-2.5 text-sm font-medium text-accent transition-all duration-100 ease-out hover:bg-accent hover:text-white"
+              className="rounded-lg border border-accent px-3 py-2 text-sm font-medium text-accent transition-all duration-100 ease-out hover:bg-accent hover:text-white sm:px-5 sm:py-2.5"
             >
               Cobranza del día
             </Link>
             <Link
               to="/nuevo"
-              className="rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
+              className="rounded-lg bg-accent px-3 py-2 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover sm:px-5 sm:py-2.5"
             >
               Nuevo plan
             </Link>
           </nav>
         </div>
       </header>
-      <main className="mx-auto max-w-6xl px-4 py-10">{children}</main>
+      <main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6">{children}</main>
     </div>
   )
 }