From dc6ec786d04ea892330987e2b5d6b401f8530547 Mon Sep 17 00:00:00 2001
From: Consult AS Technology <ialcarazsalazar@consultoria-as.com>
Date: Tue, 8 Sep 2026 08:36:53 +0000
Subject: [PATCH] fix(responsive): layout 100% width en todas las resoluciones
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Eliminado max-w-[1280px] de todas las apps (mi-dia, landing, cotizador, cobranza, dashboards, alta-clientes)
- Kanban: sin restricción de ancho, columnas min-w-[220px]
- Grids: xl:grid-cols-4/5 para pantallas grandes
- CSS base: -webkit-text-size-adjust + min-h-screen
- 6 apps construidas
---
 apps/alta-clientes/src/components/AppHeader.tsx   |  2 +-
 apps/alta-clientes/src/index.css                  |  5 ++++-
 apps/alta-clientes/src/pages/AltaClientePage.tsx  | 10 +++++-----
 apps/cobranza/src/components/Layout.tsx           |  4 ++--
 apps/cobranza/src/index.css                       |  5 ++++-
 apps/cobranza/src/pages/DashboardPage.tsx         |  2 +-
 apps/cotizador/src/index.css                      |  5 ++++-
 apps/cotizador/src/pages/CotizadorPage.tsx        |  4 ++--
 apps/dashboards/src/components/MiTablero.tsx      |  4 ++--
 apps/dashboards/src/components/TableroGeneral.tsx |  4 ++--
 apps/dashboards/src/index.css                     |  5 ++++-
 apps/dashboards/src/pages/DashboardPage.tsx       |  4 ++--
 apps/landing/src/App.tsx                          |  6 +++---
 apps/landing/src/components/Navbar.tsx            |  2 +-
 apps/landing/src/components/VistaContactos.tsx    |  2 +-
 apps/landing/src/components/config/ConfigPage.tsx |  2 +-
 apps/landing/src/index.css                        |  5 ++++-
 apps/landing/src/pages/CapturaPage.tsx            |  2 +-
 apps/landing/src/pages/ClientesMaestroPage.tsx    |  2 +-
 apps/mi-dia/src/components/KanbanView.tsx         |  8 ++++----
 apps/mi-dia/src/index.css                         |  5 ++++-
 apps/mi-dia/src/pages/MiDiaPage.tsx               | 12 ++++++------
 22 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/apps/alta-clientes/src/components/AppHeader.tsx b/apps/alta-clientes/src/components/AppHeader.tsx
index 8cc1eb4..28f3430 100644
--- a/apps/alta-clientes/src/components/AppHeader.tsx
+++ b/apps/alta-clientes/src/components/AppHeader.tsx
@@ -10,7 +10,7 @@ interface Props {
 export default function AppHeader({ titulo, acciones }: Props) {
   return (
     <header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur dark:border-[#1E293B] dark:bg-[#1E293B]/95">
-      <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">
+      <div className="flex min-h-14 flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2 sm:px-6 lg:px-8">
         <a
           href="/"
           className="rounded-lg px-2 py-1.5 text-xs font-medium text-[#64748B] dark:text-[#94A3B8] transition-all duration-100 ease-out hover:bg-[#F9FAFB] hover:text-[#111827] dark:text-[#E2E8F0]"
diff --git a/apps/alta-clientes/src/index.css b/apps/alta-clientes/src/index.css
index d4ed915..cc4e305 100644
--- a/apps/alta-clientes/src/index.css
+++ b/apps/alta-clientes/src/index.css
@@ -9,8 +9,11 @@
 }
 
 @layer base {
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
   body {
-    @apply bg-[#F8FAFC] text-[#111827] antialiased;
+    @apply min-h-screen bg-[#F8FAFC] text-[#111827] antialiased;
   }
 
   :focus-visible {
diff --git a/apps/alta-clientes/src/pages/AltaClientePage.tsx b/apps/alta-clientes/src/pages/AltaClientePage.tsx
index 4674a81..8d04bf3 100644
--- a/apps/alta-clientes/src/pages/AltaClientePage.tsx
+++ b/apps/alta-clientes/src/pages/AltaClientePage.tsx
@@ -338,7 +338,7 @@ export default function AltaClientePage() {
   if (pantalla === 'cargando') {
     return (
       <div className="min-h-screen bg-[#F8FAFC] dark:bg-[#0F172A]">
-        <main className="mx-auto max-w-[1280px] px-4 py-16 sm:px-6">
+        <main className="px-4 py-16 sm:px-6 lg:px-8">
           <SkeletonCard />
         </main>
       </div>
@@ -350,7 +350,7 @@ export default function AltaClientePage() {
       <div className="min-h-screen bg-[#F8FAFC] dark:bg-[#0F172A]">
         <AppHeader titulo="Alta de Clientes" />
         <BannerModoLocal />
-        <main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6 sm:py-12">
+        <main className="px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
           <div className="mx-auto max-w-4xl">
             <p className="text-sm text-[#64748B] dark:text-[#94A3B8]">
               Elige cómo registrar al interesado: captura ligera de afluencia o formato completo de alta.
@@ -397,7 +397,7 @@ export default function AltaClientePage() {
     return (
       <div className="min-h-screen bg-[#F8FAFC] dark:bg-[#0F172A]">
         <AppHeader titulo="Alta Afluencia" />
-        <main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6 sm:py-10">
+        <main className="px-4 py-8 sm:px-6 sm:py-10 lg:px-8">
           <div className="mx-auto max-w-3xl">
             <p className="text-sm text-[#64748B] dark:text-[#94A3B8]">
               Captura rápida del interesado; entra al embudo de ventas.
@@ -423,7 +423,7 @@ export default function AltaClientePage() {
     return (
       <div className="min-h-screen bg-[#F8FAFC] dark:bg-[#0F172A]">
         <AppHeader titulo="Alta de Clientes" />
-        <main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6 sm:py-10">
+        <main className="px-4 py-8 sm:px-6 sm:py-10 lg:px-8">
           <div className="max-w-3xl">
             {borradores.length > 0 && (
               <>
@@ -514,7 +514,7 @@ export default function AltaClientePage() {
         }
       />
 
-      <main className="mx-auto max-w-[1280px] px-4 py-6 sm:px-6 sm:py-8">
+      <main className="px-4 py-6 sm:px-6 sm:py-8 lg:px-8">
         <div className="md:grid md:grid-cols-[260px_minmax(0,1fr)] md:gap-8 lg:gap-8">
           <div className="mb-6 md:sticky md:top-20 md:mb-0 md:self-start">
             <Stepper pasos={[...PASOS]} pasoActual={paso} onIrAPaso={irAPaso} />
diff --git a/apps/cobranza/src/components/Layout.tsx b/apps/cobranza/src/components/Layout.tsx
index 7a5324c..ebb3537 100644
--- a/apps/cobranza/src/components/Layout.tsx
+++ b/apps/cobranza/src/components/Layout.tsx
@@ -6,7 +6,7 @@ export default function Layout({ children }: { children: ReactNode }) {
   return (
     <div className="min-h-screen bg-[#F8FAFC] dark:bg-[#0F172A] text-[#111827] dark:text-[#E2E8F0]">
       <header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur dark:border-[#1E293B] dark:bg-[#1E293B]/95">
-        <div className="mx-auto flex h-16 max-w-[1280px] items-center justify-between px-4 sm:px-6">
+        <div className="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
           <div className="flex items-center gap-3">
             <a
               href="/"
@@ -43,7 +43,7 @@ export default function Layout({ children }: { children: ReactNode }) {
           </nav>
         </div>
       </header>
-      <main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6">{children}</main>
+      <main className="px-4 py-8 sm:px-6 lg:px-8">{children}</main>
     </div>
   )
 }
diff --git a/apps/cobranza/src/index.css b/apps/cobranza/src/index.css
index 038e755..9961ba7 100644
--- a/apps/cobranza/src/index.css
+++ b/apps/cobranza/src/index.css
@@ -9,8 +9,11 @@
 }
 
 @layer base {
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
   body {
-    @apply bg-[#F8FAFC] text-[#111827] antialiased;
+    @apply min-h-screen bg-[#F8FAFC] text-[#111827] antialiased;
   }
 
   *:focus-visible {
diff --git a/apps/cobranza/src/pages/DashboardPage.tsx b/apps/cobranza/src/pages/DashboardPage.tsx
index 3fd3852..e8424b7 100644
--- a/apps/cobranza/src/pages/DashboardPage.tsx
+++ b/apps/cobranza/src/pages/DashboardPage.tsx
@@ -237,7 +237,7 @@ export default function DashboardPage() {
       )}
 
       {/* KPIs */}
-      <div className="grid grid-cols-2 gap-4 md:gap-6 lg:grid-cols-4">
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-6 lg:grid-cols-4 xl:grid-cols-5">
         <KpiCard titulo="Planes activos" valor={activos.length} />
         <KpiCard
           titulo="Al corriente / con atraso"
diff --git a/apps/cotizador/src/index.css b/apps/cotizador/src/index.css
index d2df83a..380bcea 100644
--- a/apps/cotizador/src/index.css
+++ b/apps/cotizador/src/index.css
@@ -10,8 +10,11 @@
 }
 
 @layer base {
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
   body {
-    @apply bg-[#F8FAFC] text-[#111827] antialiased;
+    @apply min-h-screen bg-[#F8FAFC] text-[#111827] antialiased;
   }
 
   :focus-visible {
diff --git a/apps/cotizador/src/pages/CotizadorPage.tsx b/apps/cotizador/src/pages/CotizadorPage.tsx
index c8bafbc..f2ca598 100644
--- a/apps/cotizador/src/pages/CotizadorPage.tsx
+++ b/apps/cotizador/src/pages/CotizadorPage.tsx
@@ -306,7 +306,7 @@ export default function CotizadorPage() {
   return (
     <div className="min-h-screen bg-[#F8FAFC] dark:bg-[#0F172A]">
       <BannerModoLocal />
-      <main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6 lg:py-10">
+      <main className="px-4 py-8 sm:px-6 lg:px-8 lg:py-10">
         {/* Encabezado de página */}
         <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
           <div>
@@ -556,7 +556,7 @@ export default function CotizadorPage() {
               </div>
             ) : (
               <div className="space-y-8">
-                <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+                <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                   {propuestas.map((p, i) => (
                     <ProposalCard
                       key={p.tipo}
diff --git a/apps/dashboards/src/components/MiTablero.tsx b/apps/dashboards/src/components/MiTablero.tsx
index 9de4e81..9b78eff 100644
--- a/apps/dashboards/src/components/MiTablero.tsx
+++ b/apps/dashboards/src/components/MiTablero.tsx
@@ -43,7 +43,7 @@ export default function MiTablero({ alCambiarAcciones }: { alCambiarAcciones: (a
   const funnel = resumen ? funnelMisLeads(resumen.misLeads) : []
 
   return (
-    <main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6">
+    <main className="px-4 py-8 sm:px-6 lg:px-8">
       <div className="mb-8">
         <h1 className="text-xl font-semibold text-[#111827] dark:text-[#E2E8F0]">Mi tablero</h1>
         {resumen && (
@@ -70,7 +70,7 @@ export default function MiTablero({ alCambiarAcciones }: { alCambiarAcciones: (a
 
       {resumen && (
         <>
-          <section aria-label="Mis indicadores" className="grid gap-4 grid-cols-2 lg:grid-cols-4">
+          <section aria-label="Mis indicadores" className="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
             <KpiCard
               titulo="Mis leads activos"
               valor={resumen.misLeads.length}
diff --git a/apps/dashboards/src/components/TableroGeneral.tsx b/apps/dashboards/src/components/TableroGeneral.tsx
index 96eecdc..9fd6591 100644
--- a/apps/dashboards/src/components/TableroGeneral.tsx
+++ b/apps/dashboards/src/components/TableroGeneral.tsx
@@ -88,7 +88,7 @@ export default function TableroGeneral({
   const sinCobranza = resumen !== null && resumen.cobranza.planesAlCorriente + resumen.cobranza.planesConVencidos === 0
 
   return (
-    <main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6">
+    <main className="px-4 py-8 sm:px-6 lg:px-8">
       <div className="mb-8">
         <h1 className="text-xl font-semibold text-[#111827] dark:text-[#E2E8F0]">Tablero comercial</h1>
         {resumen && (
@@ -109,7 +109,7 @@ export default function TableroGeneral({
 
       {resumen && (
         <>
-          <section aria-label="Indicadores clave" className="grid gap-4 grid-cols-2 lg:grid-cols-4">
+          <section aria-label="Indicadores clave" className="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
             <KpiCard
               titulo="Leads totales"
               valor={resumen.leads.total}
diff --git a/apps/dashboards/src/index.css b/apps/dashboards/src/index.css
index a9dd8fc..e0a1945 100644
--- a/apps/dashboards/src/index.css
+++ b/apps/dashboards/src/index.css
@@ -24,8 +24,11 @@
 }
 
 @layer base {
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
   body {
-    @apply bg-[#F8FAFC] text-[#111827] antialiased;
+    @apply min-h-screen bg-[#F8FAFC] text-[#111827] antialiased;
   }
 
   *:focus-visible {
diff --git a/apps/dashboards/src/pages/DashboardPage.tsx b/apps/dashboards/src/pages/DashboardPage.tsx
index 7650cad..aba12a7 100644
--- a/apps/dashboards/src/pages/DashboardPage.tsx
+++ b/apps/dashboards/src/pages/DashboardPage.tsx
@@ -47,7 +47,7 @@ export default function DashboardPage() {
     <div>
       <BannerModoLocal />
       <header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur dark:border-[#1E293B] dark:bg-[#1E293B]/95">
-        <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 min-h-14 flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-2 sm:px-6 lg:px-8">
           <div className="flex items-center gap-2.5">
             <a
               href="/"
@@ -100,7 +100,7 @@ export default function DashboardPage() {
         </div>
       </header>
       {vista === null ? (
-        <main className="mx-auto max-w-[1280px] px-4 py-16 sm:px-6">
+        <main className="px-4 py-16 sm:px-6 lg:px-8">
           <p className="text-sm text-[#64748B] dark:text-[#94A3B8]">Tu rol no tiene tableros asignados por ahora.</p>
         </main>
       ) : vista === 'mia' ? (
diff --git a/apps/landing/src/App.tsx b/apps/landing/src/App.tsx
index 48211b1..ba23130 100644
--- a/apps/landing/src/App.tsx
+++ b/apps/landing/src/App.tsx
@@ -90,7 +90,7 @@ export default function App() {
       <Navbar usuario={usuario} onConfiguraciones={() => setVista('configuraciones')} />
       <BannerModoLocal />
 
-      <main className="mx-auto w-full max-w-[1280px] flex-1 px-4 sm:px-6">
+      <main className="w-full flex-1 px-4 sm:px-6 lg:px-8">
         <section aria-labelledby="titulo-hero" className="py-12 sm:py-16">
           <h1
             id="titulo-hero"
@@ -105,7 +105,7 @@ export default function App() {
         </section>
 
         <nav aria-label="Módulos del ecosistema">
-          <ul className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
             {MODULOS.filter((modulo) => esModuloVisible(modulo, permitidos)).map((modulo) => (
               <TarjetaModulo
                 key={modulo.id}
@@ -130,7 +130,7 @@ export default function App() {
       </main>
 
       <footer className="mt-16 border-t border-[#E5E7EB] dark:border-[#1E293B]">
-        <div className="mx-auto max-w-[1280px] px-6 py-8">
+        <div className="px-6 py-8 sm:px-6 lg:px-8">
           <p className="text-xs text-[#64748B] dark:text-[#94A3B8]">Consult (AS) Technology</p>
         </div>
       </footer>
diff --git a/apps/landing/src/components/Navbar.tsx b/apps/landing/src/components/Navbar.tsx
index c9b7643..511f216 100644
--- a/apps/landing/src/components/Navbar.tsx
+++ b/apps/landing/src/components/Navbar.tsx
@@ -27,7 +27,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
 
   return (
     <header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur dark:border-[#1E293B] dark:bg-[#1E293B]/95">
-      <div className="mx-auto flex h-14 max-w-[1280px] items-center justify-between px-4 sm:px-6">
+      <div className="flex h-14 items-center justify-between px-4 sm:px-6 lg:px-8">
         <span className="text-base font-semibold tracking-tight text-[#111827] dark:text-[#E2E8F0]">
           FRASA<span className="text-accent">.</span>
         </span>
diff --git a/apps/landing/src/components/VistaContactos.tsx b/apps/landing/src/components/VistaContactos.tsx
index 1f5c447..d1c9618 100644
--- a/apps/landing/src/components/VistaContactos.tsx
+++ b/apps/landing/src/components/VistaContactos.tsx
@@ -69,7 +69,7 @@ export function VistaContactos({ onVolver }: Props) {
   useEffect(() => cargar(), [cargar])
 
   return (
-    <main className="mx-auto w-full max-w-[1280px] flex-1 px-4 py-12 sm:px-6 sm:py-16">
+    <main className="w-full flex-1 px-4 py-12 sm:px-6 lg:px-8 sm:py-16">
       <div className="flex items-center gap-4">
         <button
           type="button"
diff --git a/apps/landing/src/components/config/ConfigPage.tsx b/apps/landing/src/components/config/ConfigPage.tsx
index ca5b0f1..dd164bb 100644
--- a/apps/landing/src/components/config/ConfigPage.tsx
+++ b/apps/landing/src/components/config/ConfigPage.tsx
@@ -25,7 +25,7 @@ export function ConfigPage({ onVolver }: Props) {
   const tabs = esAdmin ? [...TABS_BASE, { key: 'auditoria' as const, label: 'Auditoría' }] : TABS_BASE
 
   return (
-    <main className="mx-auto w-full max-w-[1280px] flex-1 px-6 py-12 sm:py-16">
+    <main className="w-full flex-1 px-6 py-12 sm:px-6 lg:px-8 sm:py-16">
       <div className="flex items-center gap-4">
         <button
           type="button"
diff --git a/apps/landing/src/index.css b/apps/landing/src/index.css
index 06766e6..29c08a6 100644
--- a/apps/landing/src/index.css
+++ b/apps/landing/src/index.css
@@ -9,8 +9,11 @@
 }
 
 @layer base {
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
   body {
-    @apply bg-[#F8FAFC] text-[#111827] antialiased dark:bg-[#0F172A] dark:text-[#E2E8F0];
+    @apply min-h-screen bg-[#F8FAFC] text-[#111827] antialiased dark:bg-[#0F172A] dark:text-[#E2E8F0];
   }
 
   /* Foco visible accesible: anillo azul en elementos interactivos */
diff --git a/apps/landing/src/pages/CapturaPage.tsx b/apps/landing/src/pages/CapturaPage.tsx
index 8a8a2e8..572f7ec 100644
--- a/apps/landing/src/pages/CapturaPage.tsx
+++ b/apps/landing/src/pages/CapturaPage.tsx
@@ -101,7 +101,7 @@ export function CapturaPage({ onVolver }: Props) {
   const campos = CAMPOS_POR_DEPARTAMENTO[departamento] ?? []
 
   return (
-    <main className="mx-auto w-full max-w-[1280px] flex-1 px-4 py-12 sm:px-6 sm:py-16">
+    <main className="w-full flex-1 px-4 py-12 sm:px-6 lg:px-8 sm:py-16">
       {/* Header */}
       <div className="flex flex-wrap items-center gap-4">
         <button
diff --git a/apps/landing/src/pages/ClientesMaestroPage.tsx b/apps/landing/src/pages/ClientesMaestroPage.tsx
index 519d6ca..a492444 100644
--- a/apps/landing/src/pages/ClientesMaestroPage.tsx
+++ b/apps/landing/src/pages/ClientesMaestroPage.tsx
@@ -122,7 +122,7 @@ export function ClientesMaestroPage({ onVolver }: Props) {
 
   return (
     <>
-    <main className="mx-auto w-full max-w-[1280px] flex-1 px-4 py-12 sm:px-6 sm:py-16">
+    <main className="w-full flex-1 px-4 py-12 sm:px-6 lg:px-8 sm:py-16">
       <div className="flex items-center gap-4">
         <button
           type="button"
diff --git a/apps/mi-dia/src/components/KanbanView.tsx b/apps/mi-dia/src/components/KanbanView.tsx
index 991f2e3..1643d34 100644
--- a/apps/mi-dia/src/components/KanbanView.tsx
+++ b/apps/mi-dia/src/components/KanbanView.tsx
@@ -57,15 +57,15 @@ export default function KanbanView({ leads, onCambiarEstado }: KanbanViewProps)
   }
 
   return (
-    <div className="flex gap-4 overflow-x-auto pb-4">
+    <div className="flex gap-4 overflow-x-auto scroll-smooth pb-4">
       {COLUMNAS.map((col) => (
         <div
           key={col.id}
-          className={`flex min-w-[260px] flex-1 flex-col rounded-xl border border-[#E5E7EB] bg-[#F8FAFC] dark:border-[#334155] dark:bg-[#0F172A] border-t-4 ${col.color}`}
+          className={`flex min-w-[220px] flex-1 flex-col rounded-xl border border-[#E5E7EB] bg-[#F8FAFC] dark:border-[#334155] dark:bg-[#0F172A] border-t-4 ${col.color}`}
           onDragOver={onDragOver}
           onDrop={() => onDrop(col.id)}
         >
-          <div className="flex items-center justify-between px-4 pt-3 pb-2">
+          <div className="flex items-center justify-between px-3 pt-3 pb-2 sm:px-4">
             <h4 className="text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">
               {col.titulo}
             </h4>
@@ -83,7 +83,7 @@ export default function KanbanView({ leads, onCambiarEstado }: KanbanViewProps)
                   draggable
                   onDragStart={() => onDragStart(lead.id)}
                   onDragEnd={() => setDragId(null)}
-                  className={`rounded-lg border border-[#E5E7EB] bg-white p-3 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B] cursor-grab transition-opacity ${
+                  className={`rounded-lg border border-[#E5E7EB] bg-white p-2.5 shadow-sm dark:border-[#1E293B] dark:bg-[#1E293B] cursor-grab transition-opacity sm:p-3 ${
                     dragId === lead.id ? 'opacity-50' : ''
                   }`}
                 >
diff --git a/apps/mi-dia/src/index.css b/apps/mi-dia/src/index.css
index a9dd8fc..e0a1945 100644
--- a/apps/mi-dia/src/index.css
+++ b/apps/mi-dia/src/index.css
@@ -24,8 +24,11 @@
 }
 
 @layer base {
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
   body {
-    @apply bg-[#F8FAFC] text-[#111827] antialiased;
+    @apply min-h-screen bg-[#F8FAFC] text-[#111827] antialiased;
   }
 
   *:focus-visible {
diff --git a/apps/mi-dia/src/pages/MiDiaPage.tsx b/apps/mi-dia/src/pages/MiDiaPage.tsx
index eabd353..d1936d9 100644
--- a/apps/mi-dia/src/pages/MiDiaPage.tsx
+++ b/apps/mi-dia/src/pages/MiDiaPage.tsx
@@ -828,7 +828,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
   return (
     <>
       <header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur dark:border-[#1E293B] dark:bg-[#1E293B]/95">
-        <div className="mx-auto flex h-14 max-w-[1280px] items-center justify-between gap-4 px-4 sm:px-6">
+        <div className="flex h-14 items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
           <div className="flex min-w-0 items-center gap-3">
             <a
               href="/"
@@ -881,14 +881,14 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
       <BannerModoLocal />
 
       {offline && (
-        <div className="mx-auto max-w-[1280px] px-4 pt-4 sm:px-6">
+        <div className="px-4 pt-4 sm:px-6 lg:px-8">
           <div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium text-amber-700">
             Modo offline{offlineFecha ? ` — datos de ${offlineFecha}` : ''}
           </div>
         </div>
       )}
 
-      <main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6">
+      <main className={`px-4 py-6 sm:px-6 lg:px-8 ${vistaKanban && tabCrm === 'leads' ? 'w-full' : 'mx-auto max-w-[1280px]'}`}>
         <div className="mb-6">
           <h1 className="text-xl font-semibold text-[#111827] dark:text-[#E2E8F0]">{nombreVendedor}</h1>
           <p className="mt-1 text-sm text-[#64748B] dark:text-[#94A3B8]">{formatoFechaCorta(hoy)}</p>
@@ -937,8 +937,8 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
               <KpiCard titulo="Leads nuevos esta semana" valor={resumen.conteos.leadsNuevosSemana} />
             </section>
 
-            <div className="mt-6 flex flex-col gap-6 md:grid md:grid-cols-2 md:gap-6 lg:grid-cols-3">
-              <div className="order-2 flex flex-col gap-6 md:order-1 md:col-span-2 lg:col-span-2">
+            <div className={`mt-6 flex flex-col gap-6 ${vistaKanban && tabCrm === 'leads' ? '' : 'md:grid md:grid-cols-2 md:gap-6 lg:grid-cols-3'}`}>
+              <div className={`order-2 flex flex-col gap-6 ${vistaKanban && tabCrm === 'leads' ? '' : 'md:order-1 md:col-span-2 lg:col-span-2'}`}>
                 <section aria-label="CRM personal">
                   <TabsCrm
                     activa={tabCrm}
@@ -1202,7 +1202,7 @@ export default function MiDiaPage({ accionesSesion }: { accionesSesion: Acciones
                 </section>
               </div>
 
-              <aside className="order-1 flex flex-col gap-6 md:order-2 lg:sticky lg:top-20 lg:self-start">
+              <aside className={`order-1 flex flex-col gap-6 ${vistaKanban && tabCrm === 'leads' ? 'hidden' : 'md:order-2 lg:sticky lg:top-20 lg:self-start'}`}>
                 <section aria-label="Mis actividades">
                   <TituloSeccion>Mis actividades</TituloSeccion>
                   {resumen.misActividadesHoy.length === 0 ? (