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/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-[#4B5563]">
             {sesion.usuario.nombre} · {sesion.usuario.rol}
           </span>

apps/dashboards/src/components/MiTablero.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Cell, Funnel, FunnelChart, LabelList, ResponsiveContainer, Tooltip } from 'recharts'
 import KpiCard from './KpiCard'
-import { EstadoVacio, TituloSeccion } from './comunes'
+import { EstadoVacio, TarjetaGrafica, type AccionesTablero } from './comunes'
 import { funnelMisLeads, type ResumenMiDia } from '../lib/mi-tablero'
 import { fetchResumenMiDia } from '../services/mi-dia'
 
@@ -13,7 +13,7 @@ const COLORES_FUNNEL = ['#94A3B8', '#64748B', '#3B82F6', '#2563EB']
  * apartados por vencer) y un funnel simple de sus leads por estado.
  * Fuente: GET /api/mi-dia/resumen (filtra por su mondayUserId en el API).
  */
-export default function MiTablero() {
+export default function MiTablero({ alCambiarAcciones }: { alCambiarAcciones: (acciones: AccionesTablero) => void }) {
   const [resumen, setResumen] = useState<ResumenMiDia | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [cargando, setCargando] = useState(true)
@@ -34,28 +34,22 @@ export default function MiTablero() {
     void cargar()
   }, [cargar])
 
+  // Expone "Actualizar" al header sticky de DashboardPage
+  useEffect(() => {
+    alCambiarAcciones({ actualizar: () => void cargar(), cargando })
+  }, [alCambiarAcciones, cargar, cargando])
+
   const funnel = resumen ? funnelMisLeads(resumen.misLeads) : []
 
   return (
-    <main className="mx-auto max-w-6xl px-4 py-8">
-      <div className="mb-8 flex items-end justify-between">
-        <div>
-          <p className="text-xs font-semibold uppercase tracking-wider text-accent">FRASA Desarrollos</p>
-          <h1 className="mt-2 text-3xl font-light text-[#111827]">Mi tablero</h1>
-          {resumen && (
-            <p className="mt-1 text-xs text-[#64748B]">
-              Actualizado: {new Date(resumen.generadoEn).toLocaleString('es-MX')}
-            </p>
-          )}
-        </div>
-        <button
-          type="button"
-          onClick={() => void cargar()}
-          disabled={cargando}
-          className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-blue-50 disabled:opacity-50"
-        >
-          {cargando ? 'Actualizando…' : 'Actualizar'}
-        </button>
+    <main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6">
+      <div className="mb-8">
+        <h1 className="text-xl font-semibold text-[#111827]">Mi tablero</h1>
+        {resumen && (
+          <p className="mt-1 text-sm text-[#64748B]">
+            Actualizado: {new Date(resumen.generadoEn).toLocaleString('es-MX')}
+          </p>
+        )}
       </div>
 
       {error && (
@@ -75,7 +69,7 @@ export default function MiTablero() {
 
       {resumen && (
         <>
-          <section aria-label="Mis indicadores" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <section aria-label="Mis indicadores" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
             <KpiCard
               titulo="Mis leads activos"
               valor={resumen.misLeads.length}
@@ -93,26 +87,27 @@ export default function MiTablero() {
             />
           </section>
 
-          <section aria-label="Mis leads por estado" className="mt-12">
-            <TituloSeccion>Mis leads por estado</TituloSeccion>
-            {funnel.length === 0 ? (
-              <EstadoVacio mensaje="Sin leads asignados" />
-            ) : (
-              <div className="h-72">
-                <ResponsiveContainer width="100%" height="100%">
-                  <FunnelChart>
-                    <Tooltip />
-                    <Funnel dataKey="valor" data={funnel} nameKey="etapa" isAnimationActive={false}>
-                      {funnel.map((etapa, i) => (
-                        <Cell key={etapa.etapa} fill={COLORES_FUNNEL[i % COLORES_FUNNEL.length]} />
-                      ))}
-                      <LabelList position="right" dataKey="etapa" stroke="none" fontSize={11} />
-                      <LabelList position="center" dataKey="valor" stroke="none" fill="#fff" fontSize={12} />
-                    </Funnel>
-                  </FunnelChart>
-                </ResponsiveContainer>
-              </div>
-            )}
+          <section aria-label="Mis leads por estado" className="mt-10">
+            <TarjetaGrafica titulo="Mis leads por estado">
+              {funnel.length === 0 ? (
+                <EstadoVacio mensaje="Sin leads asignados" />
+              ) : (
+                <div className="h-72">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <FunnelChart>
+                      <Tooltip />
+                      <Funnel dataKey="valor" data={funnel} nameKey="etapa" isAnimationActive={false}>
+                        {funnel.map((etapa, i) => (
+                          <Cell key={etapa.etapa} fill={COLORES_FUNNEL[i % COLORES_FUNNEL.length]} />
+                        ))}
+                        <LabelList position="right" dataKey="etapa" stroke="none" fontSize={11} />
+                        <LabelList position="center" dataKey="valor" stroke="none" fill="#fff" fontSize={12} />
+                      </Funnel>
+                    </FunnelChart>
+                  </ResponsiveContainer>
+                </div>
+              )}
+            </TarjetaGrafica>
           </section>
         </>
       )}

apps/dashboards/src/components/Perfilamiento.tsx

@@ -20,7 +20,7 @@ const DIMENSIONES: { titulo: string; registro: (perfil: ResumenReportes['leads']
 function TarjetaDimension({ titulo, datos }: { titulo: string; datos: Record<string, number> }) {
   const rebanadas = rebanadasDe(datos)
   return (
-    <div className="rounded-xl border border-[#E5E7EB] bg-white p-4 shadow-sm transition-shadow duration-200 hover:shadow-md">
+    <div className="rounded-xl border border-[#E5E7EB] bg-white p-5 shadow-sm transition-shadow duration-200 hover:shadow-md">
       <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-[#64748B]">{titulo}</p>
       {rebanadas.length === 0 ? (
         <EstadoVacio mensaje="Sin datos" />
@@ -47,9 +47,9 @@ function TarjetaDimension({ titulo, datos }: { titulo: string; datos: Record<str
  */
 export default function Perfilamiento({ perfil }: { perfil: ResumenReportes['leads']['perfil'] }) {
   return (
-    <section aria-label="Perfilamiento de la afluencia" className="mt-12">
+    <section aria-label="Perfilamiento de la afluencia" className="mt-10">
       <TituloSeccion>Perfilamiento de la afluencia</TituloSeccion>
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {DIMENSIONES.map((d) => (
           <TarjetaDimension key={d.titulo} titulo={d.titulo} datos={d.registro(perfil)} />
         ))}

apps/dashboards/src/components/SeccionEquipo.tsx

@@ -30,7 +30,7 @@ export default function SeccionEquipo() {
   }, [cargar])
 
   return (
-    <section aria-label="Equipo" className="mt-12">
+    <section aria-label="Equipo" className="mt-10">
       <TituloSeccion>Equipo: leads por vendedor</TituloSeccion>
       {error && (
         <p role="alert" className="rounded-lg bg-amber-50 px-4 py-3 text-xs font-medium text-amber-700">

apps/dashboards/src/components/TableroGeneral.tsx

@@ -18,7 +18,7 @@ import {
 import KpiCard from './KpiCard'
 import Perfilamiento from './Perfilamiento'
 import SeccionEquipo from './SeccionEquipo'
-import { EstadoVacio, TituloSeccion } from './comunes'
+import { EstadoVacio, TarjetaGrafica, type AccionesTablero } from './comunes'
 import {
   datosCobranza,
   datosFunnel,
@@ -47,7 +47,13 @@ const COLORES_COBRANZA = ['#2563EB', '#F59E0B']
  * pipeline, funnel y cobranza). Con `mostrarEquipo` (coordinador/corporativo/
  * admin) agrega la sección Equipo con leads por vendedor.
  */
-export default function TableroGeneral({ mostrarEquipo }: { mostrarEquipo: boolean }) {
+export default function TableroGeneral({
+  mostrarEquipo,
+  alCambiarAcciones,
+}: {
+  mostrarEquipo: boolean
+  alCambiarAcciones: (acciones: AccionesTablero) => void
+}) {
   const [resumen, setResumen] = useState<ResumenReportes | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [cargando, setCargando] = useState(true)
@@ -68,6 +74,11 @@ export default function TableroGeneral({ mostrarEquipo }: { mostrarEquipo: boole
     void cargar()
   }, [cargar])
 
+  // Expone "Actualizar" al header sticky de DashboardPage
+  useEffect(() => {
+    alCambiarAcciones({ actualizar: () => void cargar(), cargando })
+  }, [alCambiarAcciones, cargar, cargando])
+
   const unidades = resumen ? unidadesApiladas(resumen) : []
   const funnel = resumen ? datosFunnel(resumen) : []
   const cobranza = resumen ? datosCobranza(resumen) : []
@@ -76,25 +87,14 @@ export default function TableroGeneral({ mostrarEquipo }: { mostrarEquipo: boole
   const sinCobranza = resumen !== null && resumen.cobranza.planesAlCorriente + resumen.cobranza.planesConVencidos === 0
 
   return (
-    <main className="mx-auto max-w-6xl px-4 py-8">
-      <div className="mb-8 flex items-end justify-between">
-        <div>
-          <p className="text-xs font-semibold uppercase tracking-wider text-accent">FRASA Desarrollos</p>
-          <h1 className="mt-2 text-3xl font-light text-[#111827]">Tablero comercial</h1>
-          {resumen && (
-            <p className="mt-1 text-xs text-[#64748B]">
-              Actualizado: {new Date(resumen.generadoEn).toLocaleString('es-MX')}
-            </p>
-          )}
-        </div>
-        <button
-          type="button"
-          onClick={() => void cargar()}
-          disabled={cargando}
-          className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-blue-50 disabled:opacity-50"
-        >
-          {cargando ? 'Actualizando…' : 'Actualizar'}
-        </button>
+    <main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6">
+      <div className="mb-8">
+        <h1 className="text-xl font-semibold text-[#111827]">Tablero comercial</h1>
+        {resumen && (
+          <p className="mt-1 text-sm text-[#64748B]">
+            Actualizado: {new Date(resumen.generadoEn).toLocaleString('es-MX')}
+          </p>
+        )}
       </div>
 
       {error && (
@@ -151,97 +151,101 @@ export default function TableroGeneral({ mostrarEquipo }: { mostrarEquipo: boole
             />
           </section>
 
-          <section aria-label="Inventario por desarrollo" className="mt-12">
-            <TituloSeccion>Unidades por desarrollo y status</TituloSeccion>
-            {unidades.length === 0 ? (
-              <EstadoVacio mensaje="Sin inventario" />
-            ) : (
-              <div className="h-72">
-                <ResponsiveContainer width="100%" height="100%">
-                  <BarChart data={unidades} margin={{ top: 8, right: 8, left: -16, bottom: 0 }}>
-                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                    <XAxis dataKey="desarrollo" tick={{ fontSize: 11 }} />
-                    <YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
-                    <Tooltip />
-                    <Legend wrapperStyle={{ fontSize: 11 }} />
-                    {Object.keys(COLORES_STATUS).map((status) => (
-                      <Bar key={status} dataKey={status} stackId="unidades" fill={COLORES_STATUS[status]} />
-                    ))}
-                  </BarChart>
-                </ResponsiveContainer>
-              </div>
-            )}
-          </section>
-
-          <section aria-label="Pipeline de ventas por etapa" className="mt-12">
-            <TituloSeccion>Pipeline de ventas por etapa</TituloSeccion>
-            {sinPipeline ? (
-              <EstadoVacio mensaje="Sin unidades en el pipeline" />
-            ) : (
-              <div className="h-80">
-                <ResponsiveContainer width="100%" height="100%">
-                  <BarChart data={pipeline} layout="vertical" margin={{ top: 8, right: 24, left: 24, bottom: 0 }}>
-                    <CartesianGrid strokeDasharray="3 3" horizontal={false} />
-                    <XAxis type="number" allowDecimals={false} tick={{ fontSize: 11 }} />
-                    <YAxis type="category" dataKey="etapa" width={90} tick={{ fontSize: 11 }} />
-                    <Tooltip />
-                    <Bar dataKey="valor" name="Unidades" fill="#2563EB" isAnimationActive={false} />
-                  </BarChart>
-                </ResponsiveContainer>
-              </div>
-            )}
-          </section>
-
-          <div className="mt-12 grid gap-12 lg:grid-cols-2">
-            <section aria-label="Embudo comercial">
-              <TituloSeccion>Embudo: leads → oportunidades → ganado</TituloSeccion>
-              {funnel.every((e) => e.valor === 0) ? (
-                <EstadoVacio mensaje="Sin movimiento comercial" />
-              ) : (
-                <div className="h-72">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <FunnelChart>
-                      <Tooltip />
-                      <Funnel dataKey="valor" data={funnel} nameKey="etapa" isAnimationActive={false}>
-                        {funnel.map((etapa, i) => (
-                          <Cell key={etapa.etapa} fill={COLORES_FUNNEL[i % COLORES_FUNNEL.length]} />
+          <div className="mt-10 grid gap-6 sm:grid-cols-1 lg:grid-cols-2">
+            <section aria-label="Inventario por desarrollo" className="lg:col-span-2">
+              <TarjetaGrafica titulo="Unidades por desarrollo y status">
+                {unidades.length === 0 ? (
+                  <EstadoVacio mensaje="Sin inventario" />
+                ) : (
+                  <div className="h-72">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart data={unidades} margin={{ top: 8, right: 8, left: -16, bottom: 0 }}>
+                        <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                        <XAxis dataKey="desarrollo" tick={{ fontSize: 11 }} />
+                        <YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
+                        <Tooltip />
+                        <Legend wrapperStyle={{ fontSize: 11 }} />
+                        {Object.keys(COLORES_STATUS).map((status) => (
+                          <Bar key={status} dataKey={status} stackId="unidades" fill={COLORES_STATUS[status]} />
                         ))}
-                        <LabelList position="right" dataKey="etapa" stroke="none" fontSize={11} />
-                        <LabelList position="center" dataKey="valor" stroke="none" fill="#fff" fontSize={12} />
-                      </Funnel>
-                    </FunnelChart>
-                  </ResponsiveContainer>
-                </div>
-              )}
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </div>
+                )}
+              </TarjetaGrafica>
+            </section>
+
+            <section aria-label="Pipeline de ventas por etapa" className="lg:col-span-2">
+              <TarjetaGrafica titulo="Pipeline de ventas por etapa">
+                {sinPipeline ? (
+                  <EstadoVacio mensaje="Sin unidades en el pipeline" />
+                ) : (
+                  <div className="h-80">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart data={pipeline} layout="vertical" margin={{ top: 8, right: 24, left: 24, bottom: 0 }}>
+                        <CartesianGrid strokeDasharray="3 3" horizontal={false} />
+                        <XAxis type="number" allowDecimals={false} tick={{ fontSize: 11 }} />
+                        <YAxis type="category" dataKey="etapa" width={90} tick={{ fontSize: 11 }} />
+                        <Tooltip />
+                        <Bar dataKey="valor" name="Unidades" fill="#2563EB" isAnimationActive={false} />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </div>
+                )}
+              </TarjetaGrafica>
+            </section>
+
+            <section aria-label="Embudo comercial">
+              <TarjetaGrafica titulo="Embudo: leads → oportunidades → ganado">
+                {funnel.every((e) => e.valor === 0) ? (
+                  <EstadoVacio mensaje="Sin movimiento comercial" />
+                ) : (
+                  <div className="h-72">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <FunnelChart>
+                        <Tooltip />
+                        <Funnel dataKey="valor" data={funnel} nameKey="etapa" isAnimationActive={false}>
+                          {funnel.map((etapa, i) => (
+                            <Cell key={etapa.etapa} fill={COLORES_FUNNEL[i % COLORES_FUNNEL.length]} />
+                          ))}
+                          <LabelList position="right" dataKey="etapa" stroke="none" fontSize={11} />
+                          <LabelList position="center" dataKey="valor" stroke="none" fill="#fff" fontSize={12} />
+                        </Funnel>
+                      </FunnelChart>
+                    </ResponsiveContainer>
+                  </div>
+                )}
+              </TarjetaGrafica>
             </section>
 
             <section aria-label="Estado de la cobranza">
-              <TituloSeccion>Cobranza: al corriente vs vencidos</TituloSeccion>
-              {sinCobranza ? (
-                <EstadoVacio mensaje="Sin planes activos" />
-              ) : (
-                <div className="h-72">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <PieChart>
-                      <Pie
-                        data={cobranza}
-                        dataKey="valor"
-                        nameKey="nombre"
-                        innerRadius={60}
-                        outerRadius={90}
-                        isAnimationActive={false}
-                        label={({ name, value }) => `${name}: ${value}`}
-                        fontSize={11}
-                      >
-                        {cobranza.map((rebanada, i) => (
-                          <Cell key={rebanada.nombre} fill={COLORES_COBRANZA[i % COLORES_COBRANZA.length]} />
-                        ))}
-                      </Pie>
-                      <Tooltip />
-                    </PieChart>
-                  </ResponsiveContainer>
-                </div>
-              )}
+              <TarjetaGrafica titulo="Cobranza: al corriente vs vencidos">
+                {sinCobranza ? (
+                  <EstadoVacio mensaje="Sin planes activos" />
+                ) : (
+                  <div className="h-72">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <PieChart>
+                        <Pie
+                          data={cobranza}
+                          dataKey="valor"
+                          nameKey="nombre"
+                          innerRadius={60}
+                          outerRadius={90}
+                          isAnimationActive={false}
+                          label={({ name, value }) => `${name}: ${value}`}
+                          fontSize={11}
+                        >
+                          {cobranza.map((rebanada, i) => (
+                            <Cell key={rebanada.nombre} fill={COLORES_COBRANZA[i % COLORES_COBRANZA.length]} />
+                          ))}
+                        </Pie>
+                        <Tooltip />
+                      </PieChart>
+                    </ResponsiveContainer>
+                  </div>
+                )}
+              </TarjetaGrafica>
             </section>
           </div>
 

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

apps/dashboards/src/pages/DashboardPage.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import MiTablero from '../components/MiTablero'
 import TableroGeneral from '../components/TableroGeneral'
+import type { AccionesTablero } from '../components/comunes'
 import { esRolConEquipo } from '../lib/mi-tablero'
 import { getSesion } from '../services/auth'
 
@@ -8,42 +9,70 @@ type Vista = 'mia' | 'general'
 
 const VISTAS: { id: Vista; etiqueta: string }[] = [
   { id: 'mia', etiqueta: 'Mi tablero' },
-  { id: 'general', etiqueta: 'General' },
+  { id: 'general', etiqueta: 'Tablero general' },
 ]
 
 /**
  * Tableros con vista por rol: el vendedor entra a "Mi tablero" (sus KPIs y el
  * funnel de sus leads); coordinador/corporativo/admin entran a "General" con
- * la sección Equipo. El toggle permite cambiar de vista en cualquier momento.
+ * la sección Equipo. El header sticky concentra la marca, el segmented control
+ * de vistas y el botón "Actualizar" de la vista activa.
  */
 export default function DashboardPage() {
   const rol = getSesion()?.usuario.rol ?? 'vendedor'
   const conEquipo = esRolConEquipo(rol)
   const [vista, setVista] = useState<Vista>(conEquipo ? 'general' : 'mia')
+  const [acciones, setAcciones] = useState<AccionesTablero | null>(null)
 
   return (
     <div>
-      <div className="border-b border-[#E5E7EB] bg-white">
-        <div className="mx-auto flex max-w-6xl gap-2 px-4 py-3" role="tablist" aria-label="Vista del tablero">
-          {VISTAS.map((v) => (
-            <button
-              key={v.id}
-              type="button"
-              role="tab"
-              aria-selected={vista === v.id}
-              onClick={() => setVista(v.id)}
-              className={
-                vista === v.id
-                  ? 'rounded-lg bg-accent px-5 py-2 text-xs font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover'
-                  : 'rounded-lg border border-[#D1D5DB] bg-white px-5 py-2 text-xs font-medium text-[#374151] transition-all duration-100 ease-out hover:bg-[#F9FAFB]'
-              }
+      <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 justify-between gap-x-4 gap-y-2 px-4 py-2 sm:px-6">
+          <div className="flex items-center gap-2.5">
+            <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent text-xs font-bold text-white">
+              F
+            </span>
+            <span className="text-sm font-semibold text-[#111827]">FRASA Desarrollos</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <div
+              className="inline-flex rounded-lg border border-[#E5E7EB] bg-[#F1F5F9] p-1"
+              role="tablist"
+              aria-label="Vista del tablero"
             >
-              {v.etiqueta}
+              {VISTAS.map((v) => (
+                <button
+                  key={v.id}
+                  type="button"
+                  role="tab"
+                  aria-selected={vista === v.id}
+                  onClick={() => setVista(v.id)}
+                  className={
+                    vista === v.id
+                      ? 'rounded-md bg-white px-3 py-1.5 text-xs font-medium text-[#111827] shadow-sm transition-all duration-100 ease-out'
+                      : 'rounded-md px-3 py-1.5 text-xs font-medium text-[#64748B] transition-all duration-100 ease-out hover:text-[#111827]'
+                  }
+                >
+                  {v.etiqueta}
+                </button>
+              ))}
+            </div>
+            <button
+              type="button"
+              onClick={() => acciones?.actualizar()}
+              disabled={!acciones || acciones.cargando}
+              className="rounded-lg border border-[#D1D5DB] bg-white px-4 py-1.5 text-xs font-medium text-accent shadow-sm transition-all duration-100 ease-out hover:bg-blue-50 disabled:opacity-50"
+            >
+              {acciones?.cargando ? 'Actualizando…' : 'Actualizar'}
             </button>
-          ))}
+          </div>
         </div>
-      </div>
-      {vista === 'mia' ? <MiTablero /> : <TableroGeneral mostrarEquipo={conEquipo} />}
+      </header>
+      {vista === 'mia' ? (
+        <MiTablero alCambiarAcciones={setAcciones} />
+      ) : (
+        <TableroGeneral mostrarEquipo={conEquipo} alCambiarAcciones={setAcciones} />
+      )}
     </div>
   )
 }