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/dashboards/src/components/comunes.tsx

@@ -1,5 +1,14 @@
 // Piezas visuales compartidas por las vistas del tablero (NovaSpark)
 
+import type { ReactNode } from 'react'
+
+/**
+ * Acciones que cada vista del tablero expone al header de DashboardPage:
+ * el botón "Actualizar" vive en el header sticky y dispara la recarga de la
+ * vista activa (sin cambiar fuentes de datos ni consultas).
+ */
+export type AccionesTablero = { actualizar: () => void; cargando: boolean }
+
 export function EstadoVacio({ mensaje }: { mensaje: string }) {
   return (
     <div className="flex h-64 items-center justify-center rounded-xl border border-dashed border-[#E5E7EB] bg-white">
@@ -11,3 +20,19 @@ export function EstadoVacio({ mensaje }: { mensaje: string }) {
 export function TituloSeccion({ children }: { children: string }) {
   return <h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-[#64748B]">{children}</h2>
 }
+
+/** Tarjeta contenedora de gráficas: título interno + padding consistente. */
+export function TarjetaGrafica({
+  titulo,
+  children,
+}: {
+  titulo: string
+  children: ReactNode
+}) {
+  return (
+    <div className="rounded-xl border border-[#E5E7EB] bg-white p-5 shadow-sm">
+      <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-[#64748B]">{titulo}</h3>
+      {children}
+    </div>
+  )
+}