From 54200986ab11a67748249aaca7cf8554e79a6b09 Mon Sep 17 00:00:00 2001
From: Guillermo Arrieta Medina <guillermo.arrieta@lasallistas.org.mx>
Date: Thu, 26 Mar 2026 14:11:09 -0600
Subject: [PATCH] Espaciado ahora es consistente

---
 .../asignaturas/detalle/AsignaturaDetailPage.tsx   |  2 +-
 .../asignaturas/detalle/BibliographyItem.tsx       |  2 +-
 .../asignaturas/detalle/ContenidoTematico.tsx      |  2 +-
 .../wizard/PasoFuenteClonadoInterno.tsx            |  2 +-
 src/components/wizard/WizardLayout.tsx             |  6 +++---
 src/routes/dashboard.tsx                           |  2 +-
 src/routes/planes/$planId/_detalle.tsx             |  2 +-
 src/routes/planes/$planId/_detalle/asignaturas.tsx |  2 +-
 src/routes/planes/$planId/_detalle/documento.tsx   |  2 +-
 src/routes/planes/$planId/_detalle/flujo.tsx       |  2 +-
 src/routes/planes/$planId/_detalle/historial.tsx   |  2 +-
 src/routes/planes/$planId/_detalle/iaplan.tsx      |  6 +++---
 src/routes/planes/$planId/_detalle/index.tsx       |  2 +-
 .../$planId/asignaturas/$asignaturaId/route.tsx    |  8 ++++----
 src/routes/planes/_lista.tsx                       | 14 ++++++++++++--
 15 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/components/asignaturas/detalle/AsignaturaDetailPage.tsx b/src/components/asignaturas/detalle/AsignaturaDetailPage.tsx
index cf97662..7cacce6 100644
--- a/src/components/asignaturas/detalle/AsignaturaDetailPage.tsx
+++ b/src/components/asignaturas/detalle/AsignaturaDetailPage.tsx
@@ -232,7 +232,7 @@ function DatosGenerales({
   if (isLoading) return <p>Cargando información...</p>
 
   return (
-    <div className="animate-in fade-in mx-auto max-w-7xl space-y-8 px-4 py-8 duration-500">
+    <div className="animate-in fade-in space-y-8 pb-8 duration-500">
       {/* Encabezado de la Sección */}
       <div className="flex flex-col justify-between gap-4 border-b pb-6 md:flex-row md:items-center">
         <div>
diff --git a/src/components/asignaturas/detalle/BibliographyItem.tsx b/src/components/asignaturas/detalle/BibliographyItem.tsx
index c566c3a..a6c4b37 100644
--- a/src/components/asignaturas/detalle/BibliographyItem.tsx
+++ b/src/components/asignaturas/detalle/BibliographyItem.tsx
@@ -125,7 +125,7 @@ export function BibliographyItem() {
     return <div className="p-10 text-center">Cargando bibliografía...</div>
 
   return (
-    <div className="animate-in fade-in mx-auto max-w-5xl space-y-8 py-10 duration-500">
+    <div className="animate-in fade-in space-y-8 pb-8 duration-500">
       <div className="flex flex-col gap-4 border-b pb-4 md:flex-row md:items-center md:justify-between">
         <div>
           <h2 className="text-2xl font-bold tracking-tight text-slate-900">
diff --git a/src/components/asignaturas/detalle/ContenidoTematico.tsx b/src/components/asignaturas/detalle/ContenidoTematico.tsx
index 70a5165..806d7af 100644
--- a/src/components/asignaturas/detalle/ContenidoTematico.tsx
+++ b/src/components/asignaturas/detalle/ContenidoTematico.tsx
@@ -662,7 +662,7 @@ export function ContenidoTematico() {
   }
 
   return (
-    <div className="animate-in fade-in mx-auto max-w-5xl space-y-6 py-10 duration-500">
+    <div className="animate-in fade-in space-y-6 pb-8 duration-500">
       <div className="flex items-center justify-between border-b pb-4">
         <div>
           <h2 className="text-2xl font-bold tracking-tight text-slate-900">
diff --git a/src/components/asignaturas/wizard/PasoFuenteClonadoInterno.tsx b/src/components/asignaturas/wizard/PasoFuenteClonadoInterno.tsx
index 17d629f..4a1ae4b 100644
--- a/src/components/asignaturas/wizard/PasoFuenteClonadoInterno.tsx
+++ b/src/components/asignaturas/wizard/PasoFuenteClonadoInterno.tsx
@@ -163,7 +163,7 @@ export function PasoFuenteClonadoInterno({
 
   return (
     <div className="grid gap-4">
-      <Card>
+      <Card className="gap-4">
         <CardHeader>
           <CardTitle className="text-base">Fuente</CardTitle>
         </CardHeader>
diff --git a/src/components/wizard/WizardLayout.tsx b/src/components/wizard/WizardLayout.tsx
index 96fb1a5..77b2594 100644
--- a/src/components/wizard/WizardLayout.tsx
+++ b/src/components/wizard/WizardLayout.tsx
@@ -25,7 +25,7 @@ export function WizardLayout({
         }}
       >
         <div className="z-10 flex-none border-b bg-white">
-          <CardHeader className="flex flex-row items-center justify-between gap-4 p-6 pb-4">
+          <CardHeader className="flex flex-row items-center justify-between gap-4 p-6 pb-3">
             <CardTitle>{title}</CardTitle>
             <button
               onClick={onClose}
@@ -36,10 +36,10 @@ export function WizardLayout({
             </button>
           </CardHeader>
 
-          {headerSlot ? <div className="px-6 pb-6">{headerSlot}</div> : null}
+          {headerSlot ? <div className="px-6 pb-3">{headerSlot}</div> : null}
         </div>
 
-        <div className="flex-1 overflow-y-auto bg-gray-50/30 p-6">
+        <div className="flex-1 overflow-y-auto bg-gray-50/30 px-4 py-3 xl:px-6">
           {children}
         </div>
 
diff --git a/src/routes/dashboard.tsx b/src/routes/dashboard.tsx
index 2dc7df5..862ba12 100644
--- a/src/routes/dashboard.tsx
+++ b/src/routes/dashboard.tsx
@@ -30,7 +30,7 @@ function RouteComponent() {
       4. px-4 md:px-6: Padding RESPONSIVO interno (seguro para móviles y desktop).
       5. py-6: Padding vertical (opcional, para separarse del header).
       */}
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 py-6 md:px-6 lg:px-8">
+      <div className="mx-auto flex w-full max-w-400 flex-col gap-4 p-4 md:px-6 md:pb-6 lg:px-8 lg:pb-8">
         <DashboardHeader
           nombre="Dr. Carlos Mendoza"
           rol="Jefe de Carrera"
diff --git a/src/routes/planes/$planId/_detalle.tsx b/src/routes/planes/$planId/_detalle.tsx
index 9717dda..b577cd5 100644
--- a/src/routes/planes/$planId/_detalle.tsx
+++ b/src/routes/planes/$planId/_detalle.tsx
@@ -127,7 +127,7 @@ function RouteComponent() {
         </div>
       </div>
 
-      <div className="mx-auto max-w-400 space-y-8 p-8">
+      <div className="mx-auto max-w-400 space-y-8 p-4 md:px-6 md:pb-6 lg:px-8 lg:pb-8">
         {/* 2. Header del Plan */}
         {isLoading ? (
           /* ===== SKELETON ===== */
diff --git a/src/routes/planes/$planId/_detalle/asignaturas.tsx b/src/routes/planes/$planId/_detalle/asignaturas.tsx
index 8de9d88..cd0ef8a 100644
--- a/src/routes/planes/$planId/_detalle/asignaturas.tsx
+++ b/src/routes/planes/$planId/_detalle/asignaturas.tsx
@@ -129,7 +129,7 @@ function AsignaturasPage() {
   }
 
   return (
-    <div className="container mx-auto space-y-6 px-6 py-6">
+    <div className="w-full space-y-6">
       {/* Header */}
       <div className="flex flex-wrap items-center justify-between gap-4">
         <div>
diff --git a/src/routes/planes/$planId/_detalle/documento.tsx b/src/routes/planes/$planId/_detalle/documento.tsx
index 2c2bdbf..2e1cd47 100644
--- a/src/routes/planes/$planId/_detalle/documento.tsx
+++ b/src/routes/planes/$planId/_detalle/documento.tsx
@@ -102,7 +102,7 @@ function RouteComponent() {
     }
   }
   return (
-    <div className="flex min-h-screen flex-col gap-6 bg-slate-50/30 p-6">
+    <div className="flex min-h-screen flex-col gap-6 bg-slate-50/30">
       {/* HEADER DE ACCIONES */}
       <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
         <div>
diff --git a/src/routes/planes/$planId/_detalle/flujo.tsx b/src/routes/planes/$planId/_detalle/flujo.tsx
index eb3ba17..61d6272 100644
--- a/src/routes/planes/$planId/_detalle/flujo.tsx
+++ b/src/routes/planes/$planId/_detalle/flujo.tsx
@@ -18,7 +18,7 @@ function RouteComponent() {
   console.log(rawData)
 
   return (
-    <div className="flex flex-col gap-6 p-6">
+    <div className="flex flex-col gap-6">
       {/* Header Informativo (Opcional, si no viene del layout padre) */}
       <div className="flex items-center justify-between">
         <div>
diff --git a/src/routes/planes/$planId/_detalle/historial.tsx b/src/routes/planes/$planId/_detalle/historial.tsx
index 51c3b30..345b8c6 100644
--- a/src/routes/planes/$planId/_detalle/historial.tsx
+++ b/src/routes/planes/$planId/_detalle/historial.tsx
@@ -125,7 +125,7 @@ function RouteComponent() {
     )
 
   return (
-    <div className="mx-auto max-w-5xl p-6">
+    <div className="mx-auto">
       <div className="mb-8 flex items-end justify-between">
         <div>
           <h1 className="flex items-center gap-2 text-xl font-bold text-slate-800">
diff --git a/src/routes/planes/$planId/_detalle/iaplan.tsx b/src/routes/planes/$planId/_detalle/iaplan.tsx
index 2329252..ffaee91 100644
--- a/src/routes/planes/$planId/_detalle/iaplan.tsx
+++ b/src/routes/planes/$planId/_detalle/iaplan.tsx
@@ -581,7 +581,7 @@ function RouteComponent() {
   }
 
   return (
-    <div className="flex h-[calc(100vh-80px)] w-full flex-col gap-4 p-4 md:h-[calc(100vh-160px)] md:max-h-[calc(100vh-160px)] md:flex-row md:overflow-hidden">
+    <div className="flex h-[calc(100vh-80px)] w-full flex-col gap-4 pb-1 md:h-[calc(100vh-160px)] md:max-h-[calc(100vh-160px)] md:flex-row md:overflow-hidden">
       {/* --- HEADER MÓVIL (Solo visible en < md) --- */}
       <div className="flex shrink-0 items-center justify-between rounded-lg border bg-white p-2 shadow-sm md:hidden">
         <Button
@@ -1119,11 +1119,11 @@ function RouteComponent() {
       </div>
 
       {/* --- PANEL LATERAL: ACCIONES RÁPIDAS (Escritorio) --- */}
-      <div className="hidden flex-[1] flex-col gap-4 overflow-y-auto pr-2 md:flex">
+      <div className="hidden flex-[1] flex-col gap-4 overflow-y-auto md:flex">
         <h4 className="flex items-center gap-2 text-left text-sm font-bold text-slate-800">
           <Lightbulb size={18} className="text-orange-500" /> Acciones rápidas
         </h4>
-        <div className="space-y-2">
+        <div className="space-y-2 p-1">
           {PRESETS.map((preset) => (
             <button
               key={preset.id}
diff --git a/src/routes/planes/$planId/_detalle/index.tsx b/src/routes/planes/$planId/_detalle/index.tsx
index e9899a5..e640260 100644
--- a/src/routes/planes/$planId/_detalle/index.tsx
+++ b/src/routes/planes/$planId/_detalle/index.tsx
@@ -229,7 +229,7 @@ function DatosGeneralesPage() {
     })
   }
   return (
-    <div className="animate-in fade-in container mx-auto px-6 py-6 duration-500">
+    <div className="animate-in fade-in duration-500">
       <div className="mb-6">
         <h2 className="text-foreground text-lg font-semibold">
           Datos Generales del Plan
diff --git a/src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx b/src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
index 48ec8a4..7df4712 100644
--- a/src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
+++ b/src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
@@ -140,7 +140,7 @@ function AsignaturaLayout() {
   return (
     <div>
       <section className="bg-linear-to-b from-[#0b1d3a] to-[#0e2a5c] text-white">
-        <div className="mx-auto max-w-7xl px-6 py-10">
+        <div className="mx-auto max-w-400 p-4 py-10 md:px-6 lg:px-8">
           <Link
             to="/planes/$planId/asignaturas"
             params={{ planId }}
@@ -216,13 +216,13 @@ function AsignaturaLayout() {
       {/* TABS */}
 
       <nav className="sticky top-0 z-20 border-b bg-white">
-        <div className="mx-auto max-w-7xl px-6">
+        <div className="mx-auto max-w-400 p-4 py-2 md:px-6 lg:px-8">
           {/* CAMBIOS CLAVE:
         1. overflow-x-auto: Permite scroll horizontal.
         2. scrollbar-hide: (Opcional) para que no se vea la barra fea.
         3. justify-start md:justify-center: Alineado a la izquierda en móvil para que el scroll funcione, centrado en desktop.
     */}
-          <div className="no-scrollbar flex items-center justify-start gap-8 overflow-x-auto whitespace-nowrap md:justify-center">
+          <div className="no-scrollbar flex items-center justify-start gap-8 overflow-x-auto whitespace-nowrap md:justify-start">
             {[
               { label: 'Datos', to: '' },
               { label: 'Contenido', to: 'contenido' },
@@ -260,7 +260,7 @@ function AsignaturaLayout() {
         </div>
       </nav>
 
-      <div className="mx-auto max-w-7xl px-6 py-8">
+      <div className="mx-auto max-w-400 p-4 py-8 md:px-6 lg:px-8">
         <Outlet />
       </div>
     </div>
diff --git a/src/routes/planes/_lista.tsx b/src/routes/planes/_lista.tsx
index f58283c..28830a7 100644
--- a/src/routes/planes/_lista.tsx
+++ b/src/routes/planes/_lista.tsx
@@ -101,13 +101,20 @@ function RouteComponent() {
     setPage(0) // Resetear página al buscar
   }
 
+  // Deshabilitar el botón 'Limpiar' si no hay filtros distintos al valor por defecto
+  const isClearDisabled =
+    cleanSearchTerm === '' &&
+    facultadSel === 'todas' &&
+    carreraSel === 'todas' &&
+    estadoSel === 'todos'
+
   // Renderizado condicional básico
   if (isError)
     return <div className="p-8 text-red-500">Error cargando planes.</div>
 
   return (
     <main className="bg-background min-h-screen w-full">
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 py-6 md:px-6 lg:px-8">
+      <div className="mx-auto flex w-full max-w-400 flex-col gap-4 px-4 py-6 md:px-6 lg:px-8">
         <div className="flex flex-col gap-4 lg:col-span-3">
           {/* Header y Botón Nuevo */}
           <div className="flex flex-col items-stretch justify-between gap-4 sm:flex-row sm:items-center">
@@ -184,7 +191,10 @@ function RouteComponent() {
               <button
                 type="button"
                 onClick={resetFilters}
-                className="ring-offset-background bg-secondary text-secondary-foreground hover:bg-secondary/90 inline-flex h-9 items-center justify-center gap-2 rounded-md px-4 text-sm font-medium shadow-md transition-colors"
+                disabled={isClearDisabled}
+                className={`ring-offset-background bg-secondary text-secondary-foreground hover:bg-secondary/90 inline-flex h-9 items-center justify-center gap-2 rounded-md px-4 text-sm font-medium shadow-md transition-colors ${
+                  isClearDisabled ? 'opacity-50 cursor-not-allowed' : ''
+                }`}
               >
                 <Icons.X className="h-4 w-4" /> Limpiar
               </button>