Merge pull request 'Mejorar responsividad fix#219' (#221) from issue/219-mejorar-responsividad into main

Reviewed-on: #221

src/components/asignaturas/detalle/AsignaturaDetailPage.tsx

@@ -323,7 +323,12 @@ function DatosGenerales({
               initialContent={pre}
               // Pasamos las materias del plan para el Select (excluyendo la actual)
               availableSubjects={
-                availableSubjects?.filter((a) => a.id !== asignaturaId) || []
+                availableSubjects?.filter(
+                  (a) =>
+                    a.id !== asignaturaId &&
+                    a.numero_ciclo < data?.numero_ciclo &&
+                    a.numero_ciclo,
+                ) || []
               }
               onPersist={({ value }) => {
                 updateAsignatura.mutate({
@@ -628,8 +633,14 @@ function InfoCard({
                     Materia de Seriación
                   </label>
                   <Select
-                    value={tempText?.[0]?.id || 'none'}
+                    value={
+                      Array.isArray(tempText) && tempText.length > 0
+                        ? tempText[0].id
+                        : 'none'
+                    }
                     onValueChange={(val) => {
+                      console.log(availableSubjects)
+
                       const selected = availableSubjects?.find(
                         (s) => s.id === val,
                       )
@@ -651,16 +662,24 @@ function InfoCard({
                       }
                     }}
                   >
-                    <SelectTrigger>
+                    <SelectTrigger className="w-full">
+                      <div className="flex-1 truncate text-left">
                         <SelectValue placeholder="Selecciona una materia" />
+                      </div>
                     </SelectTrigger>
                     <SelectContent>
                       <SelectItem value="none">
                         Ninguna (Sin seriación)
                       </SelectItem>
                       {availableSubjects?.map((asig) => (
-                        <SelectItem key={asig.id} value={asig.id}>
+                        <SelectItem
+                          key={asig.id}
+                          value={asig.id}
+                          className="max-w-[300px] sm:max-w-[500px]"
+                        >
+                          <span className="block truncate">
                             {asig.codigo} - {asig.nombre}
+                          </span>
                         </SelectItem>
                       ))}
                     </SelectContent>

src/components/asignaturas/detalle/IAAsignaturaTab.tsx

@@ -883,7 +883,7 @@ export function IAAsignaturaTab() {
         <DrawerPortal>
           <DrawerOverlay className="fixed inset-0 bg-black/40" />
           <DrawerContent className="fixed right-0 bottom-0 left-0 h-[70vh] p-4 outline-none">
-            <div className="flex h-full flex-col overflow-hidden">
+            <div className="flex h-full flex-col overflow-hidden pt-8">
               {/* Reutiliza aquí el componente de la lista de chats */}
               <Button
                 onClick={() => {

src/routes/planes/$planId/_detalle/historial.tsx

@@ -139,13 +139,16 @@ function RouteComponent() {
       </div>
 
       <div className="relative space-y-0">
-        <div className="absolute top-0 bottom-0 left-9 w-px bg-slate-200" />
+        <div className="absolute top-0 bottom-0 left-6 w-px bg-slate-200 md:left-9" />
         {historyEvents.length === 0 ? (
           <div className="ml-20 py-10 text-slate-500">No hay registros.</div>
         ) : (
           historyEvents.map((event) => (
-            <div key={event.id} className="group relative flex gap-6 pb-8">
-              <div className="relative z-10 flex h-18 flex-col items-center">
+            <div
+              key={event.id}
+              className="group relative flex gap-3 pb-8 md:gap-6"
+            >
+              <div className="relative z-10 flex flex-col items-center">
                 <div className="flex h-[42px] w-[42px] items-center justify-center rounded-full border-4 border-white bg-slate-100 text-slate-600 shadow-sm transition-colors group-hover:bg-teal-50 group-hover:text-teal-600">
                   {event.icon}
                 </div>
@@ -153,10 +156,10 @@ function RouteComponent() {
 
               <Card className="flex-1 border-slate-200 shadow-none transition-colors hover:border-teal-200">
                 <CardContent className="p-4">
-                  <div className="flex flex-col gap-1">
+                  <div className="flex flex-col gap-2">
                     {/* LÍNEA SUPERIOR: Título a la izquierda --- Usuario, Botón y Fecha a la derecha */}
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
+                    <div className="flex flex-col justify-between gap-2 md:flex-row md:items-center">
+                      <div className="flex flex-wrap items-center gap-2">
                         <span className="text-sm font-bold text-slate-800">
                           {event.type}
                         </span>
@@ -172,9 +175,9 @@ function RouteComponent() {
                       </div>
 
                       {/* Grupo de elementos alineados a la derecha */}
-                      <div className="flex items-center gap-4 text-slate-500">
+                      <div className="flex flex-wrap items-center gap-3 text-slate-500 md:gap-4">
                         {/* Usuario e Icono */}
-                        <div className="flex items-center gap-2 text-xs">
+                        <div className="flex items-center gap-1.5 text-xs">
                           <User className="h-3.5 w-3.5" />
                           <span className="text-muted-foreground">
                             {event.user}
@@ -184,14 +187,14 @@ function RouteComponent() {
                         {/* Botón Ver Cambios */}
                         <button
                           onClick={() => openCompareModal(event)}
-                          className="group/btn flex items-center gap-1.5 text-xs transition-colors hover:text-teal-600"
+                          className="group/btn flex items-center gap-1.5 text-xs font-medium text-teal-600 md:text-slate-500 md:hover:text-teal-600"
                         >
                           <Eye className="h-4 w-4 text-slate-400 group-hover/btn:text-teal-600" />
                           <span>Ver cambios</span>
                         </button>
 
                         {/* Fecha exacta (Solo visible en desktop para no amontonar) */}
-                        <span className="hidden text-[11px] text-slate-400 md:block">
+                        <span className="hidden text-[11px] text-slate-400 lg:block">
                           {format(event.date, 'yyyy-MM-dd HH:mm')}
                         </span>
                       </div>

src/routes/planes/$planId/_detalle/iaplan.tsx

@@ -482,9 +482,9 @@ function RouteComponent() {
   }
 
   return (
-    <div className="flex h-[calc(100vh-160px)] max-h-[calc(100vh-160px)] w-full flex-col gap-6 overflow-hidden p-4 md:flex-row">
+    <div className="flex min-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">
       {/* --- HEADER MÓVIL (Solo visible en < md) --- */}
-      <div className="flex items-center justify-between rounded-lg border bg-white p-2 md:hidden">
+      <div className="flex shrink-0 items-center justify-between rounded-lg border bg-white p-2 shadow-sm md:hidden">
         <Button
           variant="ghost"
           size="sm"

src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx

@@ -215,9 +215,14 @@ function AsignaturaLayout() {
 
       {/* TABS */}
 
-      <nav className="border-b bg-white">
+      <nav className="sticky top-0 z-20 border-b bg-white">
         <div className="mx-auto max-w-7xl px-6">
-          <div className="flex justify-center gap-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">
             {[
               { label: 'Datos', to: '' },
               { label: 'Contenido', to: 'contenido' },
@@ -241,7 +246,7 @@ function AsignaturaLayout() {
                   }
                   from="/planes/$planId/asignaturas/$asignaturaId"
                   params={{ planId, asignaturaId }}
-                  className={`border-b-2 py-3 text-sm font-medium ${
+                  className={`shrink-0 border-b-2 py-4 text-sm font-medium transition-colors ${
                     isActive
                       ? 'border-blue-600 text-blue-600'
                       : 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700'