From 05693a7ea641b671dfeac7013ae009f005433201 Mon Sep 17 00:00:00 2001
From: Sergio Nicolas Lavaise <snlavaise@gmail.com>
Date: Thu, 16 Apr 2026 09:10:59 -0300
Subject: [PATCH] Revertir cambios de Cultivos responsive

---
 src/sections/HistoriaClinica.tsx | 147 ++++++++++++++-----------------
 1 file changed, 68 insertions(+), 79 deletions(-)

diff --git a/src/sections/HistoriaClinica.tsx b/src/sections/HistoriaClinica.tsx
index f933cd6..c65ef94 100644
--- a/src/sections/HistoriaClinica.tsx
+++ b/src/sections/HistoriaClinica.tsx
@@ -31,7 +31,6 @@ 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';
@@ -1678,85 +1677,75 @@ 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>
-      ) : (
-        <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>
-                    )}
+      {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'}`} />
                   </div>
-                </CardContent></Card>
-            ))}
-          </div>
-        </ScrollArea>
-      )}
+                  <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>
+        ))
+      }
     </div>
   );
 }