Hacer Cultivos responsive para móviles

src/sections/HistoriaClinica.tsx

@@ -31,6 +31,7 @@ import {
 } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -1677,9 +1678,17 @@ const resetRes = () => {
         </DialogContent>
       </Dialog>
 
-      {cs.length === 0 ? <div className="text-center py-8 text-gray-400"><Microscope className="h-12 w-12 mx-auto mb-2 opacity-50" /><p>No hay cultivos</p></div> :
-        cs.map(c => (
-          <Card key={c.id} className="mb-2"><CardContent className="p-4">
+      {cs.length === 0 ? (
+        <div className="text-center py-8 text-gray-400">
+          <Microscope className="h-12 w-12 mx-auto mb-2 opacity-50" />
+          <p>No hay cultivos</p>
+        </div>
+      ) : (
+        <ScrollArea className="w-full">
+          <div className="flex gap-2 pb-2">
+            {cs.map(c => (
+              <Card key={c.id} className="min-w-[280px] w-[280px] flex-shrink-0">
+                <CardContent className="p-4">
                   <div className="flex flex-col gap-3">
                     <div className="flex items-start justify-between">
                       <div className="flex items-center gap-3">
@@ -1744,8 +1753,10 @@ const resetRes = () => {
                     )}
                   </div>
                 </CardContent></Card>
-        ))
-      }
+            ))}
+          </div>
+        </ScrollArea>
+      )}
     </div>
   );
 }