diff --git a/src/sections/HistoriaClinica.tsx b/src/sections/HistoriaClinica.tsx
index c65ef94..f933cd6 100644
--- a/src/sections/HistoriaClinica.tsx
+++ b/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,75 +1678,85 @@ 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">
-            <div className="flex flex-col gap-3">
-              <div className="flex items-start justify-between">
-                <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'}`}>
-                    <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'}`} />
+      {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">
+                        <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'}`}>
+                          <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>
+                          <p className="font-medium">{c.fechaToma}</p>
+                          <div className="flex items-center gap-2 text-sm text-gray-500">
+                            <Badge variant="outline">{c.tipoMuestra}</Badge>
+                            <Badge className={getEstadoColor(c.estado)}>{getEstadoLabel(c.estado)}</Badge>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex 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>
+                            <Button size="sm" variant="outline" onClick={() => { openDefinitivo(c); setIsParcialMode(false); }}><CheckCircle2 className="h-4 w-4 mr-1" />Definitivo</Button>
+                          </>
+                        )}
+                        {c.estado === 'Parcial' && (
+                          <>
+                            <Button size="sm" variant="outline" onClick={() => openParcial(c)}><Pencil className="h-4 w-4 mr-1" />Editar Parcial</Button>
+                            <Button size="sm" variant="outline" onClick={() => openDefinitivo(c)}><CheckCircle2 className="h-4 w-4 mr-1" />Definitivo</Button>
+                          </>
+                        )}
+                        {(c.estado === 'Positivo' || c.estado === 'Negativo') && <Button size="sm" variant="outline" onClick={() => openDefinitivo(c)}><Pencil className="h-4 w-4" /></Button>}
+                        <Button size="sm" variant="outline" className="text-red-600" onClick={() => del(c.id)}><Trash2 /></Button>
+                      </div>
+                    </div>
+                    {c.protocolo && <p className="text-xs text-gray-500">Protocolo: {c.protocolo}</p>}
+                    {c.observaciones && <p className="text-sm text-gray-600 bg-gray-50 p-2 rounded">{c.observaciones}</p>}
+                    {c.estado === 'Parcial' && c.germen && (
+                      <div className="bg-orange-50 p-3 rounded-lg border border-orange-200">
+                        <p className="text-sm font-medium text-orange-800 flex items-center gap-2"><AlertCircle className="h-4 w-4" />PARCIAL - Germen: {c.germen}</p>
+                        {(c.sensible || c.resistente) && (
+                          <div className="mt-2 space-y-1">
+                            {c.sensible && <p className="text-xs text-orange-700">Sensible: {c.sensible}</p>}
+                            {c.resistente && <p className="text-xs text-orange-700">Resistente: {c.resistente}</p>}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                    {c.estado === 'Positivo' && c.germen && (
+                      <div className="bg-red-50 p-3 rounded-lg border border-red-200">
+                        <p className="text-sm font-medium text-red-800 flex items-center gap-2"><AlertCircle className="h-4 w-4" />Germen: {c.germen}</p>
+                        {c.fechaResultado && <p className="text-xs text-red-600 mt-1">Resultado: {c.fechaResultado}</p>}
+                        {(c.sensible || c.resistente) && (
+                          <div className="mt-2 space-y-2">
+                            {c.sensible && <div><p className="text-xs font-medium text-green-700 mb-1">Sensible a:</p><p className="text-sm text-green-800">{c.sensible}</p></div>}
+                            {c.resistente && <div><p className="text-xs font-medium text-red-700 mb-1">Resistente a:</p><p className="text-sm text-red-800">{c.resistente}</p></div>}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                    {c.estado === 'Negativo' && (
+                      <div className="bg-green-50 dark:bg-green-900/30 p-3 rounded-lg border border-green-200 dark:border-green-700">
+                        <p className="text-sm font-medium text-green-800 flex items-center gap-2"><CheckCircle2 className="h-4 w-4" />Sin crecimiento de microorganismos</p>
+                        {c.fechaResultado && <p className="text-xs text-green-600 mt-1">Resultado: {c.fechaResultado}</p>}
+                      </div>
+                    )}
                   </div>
-                  <div>
-                    <p className="font-medium">{c.fechaToma}</p>
-                    <div className="flex items-center gap-2 text-sm text-gray-500">
-                      <Badge variant="outline">{c.tipoMuestra}</Badge>
-                      <Badge className={getEstadoColor(c.estado)}>{getEstadoLabel(c.estado)}</Badge>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex 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>
-                      <Button size="sm" variant="outline" onClick={() => { openDefinitivo(c); setIsParcialMode(false); }}><CheckCircle2 className="h-4 w-4 mr-1" />Definitivo</Button>
-                    </>
-                  )}
-                  {c.estado === 'Parcial' && (
-                    <>
-                      <Button size="sm" variant="outline" onClick={() => openParcial(c)}><Pencil className="h-4 w-4 mr-1" />Editar Parcial</Button>
-                      <Button size="sm" variant="outline" onClick={() => openDefinitivo(c)}><CheckCircle2 className="h-4 w-4 mr-1" />Definitivo</Button>
-                    </>
-                  )}
-                  {(c.estado === 'Positivo' || c.estado === 'Negativo') && <Button size="sm" variant="outline" onClick={() => openDefinitivo(c)}><Pencil className="h-4 w-4" /></Button>}
-                  <Button size="sm" variant="outline" className="text-red-600" onClick={() => del(c.id)}><Trash2 /></Button>
-                </div>
-              </div>
-              {c.protocolo && <p className="text-xs text-gray-500">Protocolo: {c.protocolo}</p>}
-              {c.observaciones && <p className="text-sm text-gray-600 bg-gray-50 p-2 rounded">{c.observaciones}</p>}
-              {c.estado === 'Parcial' && c.germen && (
-                <div className="bg-orange-50 p-3 rounded-lg border border-orange-200">
-                  <p className="text-sm font-medium text-orange-800 flex items-center gap-2"><AlertCircle className="h-4 w-4" />PARCIAL - Germen: {c.germen}</p>
-                  {(c.sensible || c.resistente) && (
-                    <div className="mt-2 space-y-1">
-                      {c.sensible && <p className="text-xs text-orange-700">Sensible: {c.sensible}</p>}
-                      {c.resistente && <p className="text-xs text-orange-700">Resistente: {c.resistente}</p>}
-                    </div>
-                  )}
-                </div>
-              )}
-              {c.estado === 'Positivo' && c.germen && (
-                <div className="bg-red-50 p-3 rounded-lg border border-red-200">
-                  <p className="text-sm font-medium text-red-800 flex items-center gap-2"><AlertCircle className="h-4 w-4" />Germen: {c.germen}</p>
-                  {c.fechaResultado && <p className="text-xs text-red-600 mt-1">Resultado: {c.fechaResultado}</p>}
-                  {(c.sensible || c.resistente) && (
-                    <div className="mt-2 space-y-2">
-                      {c.sensible && <div><p className="text-xs font-medium text-green-700 mb-1">Sensible a:</p><p className="text-sm text-green-800">{c.sensible}</p></div>}
-                      {c.resistente && <div><p className="text-xs font-medium text-red-700 mb-1">Resistente a:</p><p className="text-sm text-red-800">{c.resistente}</p></div>}
-                    </div>
-                  )}
-                </div>
-              )}
-              {c.estado === 'Negativo' && (
-                <div className="bg-green-50 dark:bg-green-900/30 p-3 rounded-lg border border-green-200 dark:border-green-700">
-                  <p className="text-sm font-medium text-green-800 flex items-center gap-2"><CheckCircle2 className="h-4 w-4" />Sin crecimiento de microorganismos</p>
-                  {c.fechaResultado && <p className="text-xs text-green-600 mt-1">Resultado: {c.fechaResultado}</p>}
-                </div>
-              )}
-            </div>
-          </CardContent></Card>
-        ))
-      }
+                </CardContent></Card>
+            ))}
+          </div>
+        </ScrollArea>
+      )}
     </div>
   );
 }