Hacer Cultivos responsive estilo Pacientes

src/sections/HistoriaClinica.tsx

@@ -1677,13 +1677,15 @@ 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> :
+      <div>
+        <div className="grid grid-cols-1 gap-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> :
         cs.map(c => (
-          <Card key={c.id} className="mb-2"><CardContent className="p-4">
+          <Card key={c.id} className="hover:shadow-md transition-shadow"><CardContent className="p-4">
             <div className="flex flex-col gap-3">
-              <div className="flex items-start justify-between">
+              <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                 <div className="flex items-center gap-3">
-                  <div className={`h-10 w-10 rounded-full flex items-center justify-center ${c.estado === 'NAF/Pendiente' ? 'bg-amber-100' : c.estado === 'Parcial' ? 'bg-orange-100' : c.estado === 'Positivo' ? 'bg-red-100' : 'bg-green-100'}`}>
+                  <div className={`h-10 w-10 rounded-full flex items-center justify-center flex-shrink-0 ${c.estado === 'NAF/Pendiente' ? 'bg-amber-100' : c.estado === 'Parcial' ? 'bg-orange-100' : c.estado === 'Positivo' ? 'bg-red-100' : 'bg-green-100'}`}>
                     <Microscope className={`h-5 w-5 ${c.estado === 'NAF/Pendiente' ? 'text-amber-600' : c.estado === 'Parcial' ? 'text-orange-600' : c.estado === 'Positivo' ? 'text-red-600' : 'text-green-600'}`} />
                   </div>
                   <div>
@@ -1694,7 +1696,7 @@ const resetRes = () => {
                     </div>
                   </div>
                 </div>
-                <div className="flex items-center gap-2">
+                <div className="flex flex-wrap items-center gap-2">
                   {c.estado === 'NAF/Pendiente' && (
                     <>
                       <Button size="sm" variant="outline" onClick={() => openParcial(c)}><AlertCircle className="h-4 w-4 mr-1" />Parcial</Button>
@@ -1744,8 +1746,9 @@ const resetRes = () => {
               )}
             </div>
           </CardContent></Card>
-        ))
-      }
+          ))}
+        </div>
+      </div>
     </div>
   );
 }