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/alta-clientes/src/components/AltaAfluenciaForm.tsx

@@ -173,7 +173,7 @@ export default function AltaAfluenciaForm({ onVolver, onPasarAAltaCliente }: Pro
   }
 
   return (
-    <form onSubmit={(e) => void enviar(e)} noValidate className="max-w-2xl">
+    <form onSubmit={(e) => void enviar(e)} noValidate>
       <div className="grid gap-6 sm:grid-cols-2">
         <label htmlFor="afluencia-nombre" className="block sm:col-span-2">
           <span className={labelClase}>

apps/alta-clientes/src/components/AppHeader.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+
+interface Props {
+  titulo: string
+  acciones?: ReactNode
+}
+
+/** Barra superior de la app: marca a la izquierda, acciones a la derecha */
+export default function AppHeader({ titulo, acciones }: Props) {
+  return (
+    <header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur">
+      <div className="mx-auto flex min-h-14 max-w-[1280px] flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2 sm:px-6">
+        <span className="text-sm font-bold tracking-widest text-[#111827]">
+          FRASA<span className="text-[#F97316]">.</span>
+        </span>
+        <h1 className="text-xl font-semibold text-[#111827]">{titulo}</h1>
+        {acciones && <div className="ml-auto flex items-center gap-3">{acciones}</div>}
+      </div>
+    </header>
+  )
+}

apps/alta-clientes/src/components/AuthGate.tsx

@@ -19,7 +19,7 @@ export default function AuthGate({ children }: { children: ReactNode }) {
   return (
     <div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
       <div className="border-b border-[#E5E7EB] bg-white">
-        <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
+        <div className="mx-auto flex max-w-[1280px] items-center justify-between px-4 py-2 sm:px-6">
           <span className="text-xs font-medium text-[#64748B]">
             {sesion.usuario.nombre} · {sesion.usuario.rol}
           </span>

apps/alta-clientes/src/components/ChecklistExpediente.tsx

@@ -12,7 +12,7 @@ export default function ChecklistExpediente({ documentos, firmaDataUrl }: Props)
   return (
     <section
       aria-label="Checklist del expediente"
-      className="rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm"
+      className="border-t border-[#E5E7EB] px-6 py-6 first:border-t-0"
     >
       <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
         Expediente: {estado.completos}/{estado.total}

apps/alta-clientes/src/components/SectionCard.tsx

@@ -6,13 +6,13 @@ interface Props {
   children: ReactNode
 }
 
-/** Tarjeta de sección del wizard */
+/** Sección interna del paso del wizard (separada por divisor dentro de la tarjeta del paso) */
 export default function SectionCard({ titulo, descripcion, children }: Props) {
   return (
-    <section className="rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
+    <section className="border-t border-[#E5E7EB] px-6 py-6 first:border-t-0">
       <h3 className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">{titulo}</h3>
       {descripcion && <p className="mt-2 text-sm text-[#64748B]">{descripcion}</p>}
-      <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">{children}</div>
+      <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">{children}</div>
     </section>
   )
 }

apps/alta-clientes/src/components/Stepper.tsx

@@ -4,37 +4,84 @@ interface Props {
   onIrAPaso: (paso: number) => void
 }
 
-/** Stepper de progreso del wizard; permite volver a pasos ya visitados */
-export default function Stepper({ pasos, pasoActual, onIrAPaso }: Props) {
+/** Palomita de paso completado */
+function IconoCheck() {
   return (
-    <nav aria-label="Progreso">
-      <ol className="flex flex-wrap items-baseline gap-x-6 gap-y-3 border-b border-[#E5E7EB] pb-4">
-        {pasos.map((nombre, i) => {
-          const activo = i === pasoActual
-          const completado = i < pasoActual
-          return (
-            <li key={nombre}>
-              <button
-                type="button"
-                onClick={() => completado && onIrAPaso(i)}
-                disabled={!completado}
-                aria-current={activo ? 'step' : undefined}
-                className={`text-xs font-medium transition-colors duration-150 ${
-                  activo
-                    ? 'font-semibold text-accent'
-                    : completado
-                      ? 'text-[#111827] hover:text-accent'
-                      : 'text-[#94A3B8]'
-                }`}
-                title={nombre}
-              >
-                <span className="mr-2">{String(i + 1).padStart(2, '0')}</span>
-                <span className="hidden md:inline">{nombre}</span>
-              </button>
-            </li>
-          )
-        })}
-      </ol>
-    </nav>
+    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className="h-3.5 w-3.5">
+      <path
+        fillRule="evenodd"
+        d="M16.704 5.29a1 1 0 010 1.42l-7.2 7.2a1 1 0 01-1.42 0l-3.2-3.2a1 1 0 111.42-1.42l2.49 2.5 6.49-6.5a1 1 0 011.42 0z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+/**
+ * Stepper de progreso del wizard; permite volver a pasos ya visitados.
+ * En lg se muestra vertical (sidebar sticky en la página); en móvil colapsa
+ * a una barra horizontal de progreso.
+ */
+export default function Stepper({ pasos, pasoActual, onIrAPaso }: Props) {
+  const avance = Math.round(((pasoActual + 1) / pasos.length) * 100)
+  return (
+    <>
+      {/* Móvil: barra horizontal de progreso */}
+      <div className="lg:hidden">
+        <div className="flex items-baseline justify-between gap-4">
+          <p className="text-sm font-medium text-[#111827]">{pasos[pasoActual]}</p>
+          <p className="text-xs text-[#64748B]">
+            Paso {pasoActual + 1} de {pasos.length}
+          </p>
+        </div>
+        <div className="mt-2 h-1.5 rounded-full bg-[#E5E7EB]">
+          <div
+            className="h-full rounded-full bg-accent transition-all duration-200"
+            style={{ width: `${avance}%` }}
+          />
+        </div>
+      </div>
+
+      {/* Escritorio: lista vertical con el estado de cada paso */}
+      <nav aria-label="Progreso" className="hidden lg:block">
+        <ol className="space-y-1">
+          {pasos.map((nombre, i) => {
+            const activo = i === pasoActual
+            const completado = i < pasoActual
+            return (
+              <li key={nombre}>
+                <button
+                  type="button"
+                  onClick={() => completado && onIrAPaso(i)}
+                  disabled={!completado}
+                  aria-current={activo ? 'step' : undefined}
+                  className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors duration-150 ${
+                    activo
+                      ? 'bg-accent/5 font-semibold text-accent'
+                      : completado
+                        ? 'text-[#111827] hover:bg-[#F1F5F9]'
+                        : 'text-[#94A3B8]'
+                  }`}
+                >
+                  <span
+                    aria-hidden="true"
+                    className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium ${
+                      activo
+                        ? 'bg-accent text-white'
+                        : completado
+                          ? 'bg-green-100 text-green-700'
+                          : 'border border-[#D1D5DB] bg-white text-[#94A3B8]'
+                    }`}
+                  >
+                    {completado ? <IconoCheck /> : i + 1}
+                  </span>
+                  <span className="truncate">{nombre}</span>
+                </button>
+              </li>
+            )
+          })}
+        </ol>
+      </nav>
+    </>
   )
 }