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