From 02fbf4c90e16a2be3ba76f3974107c6d00ae1d40 Mon Sep 17 00:00:00 2001
From: Sergio Nicolas Lavaise <snlavaise@gmail.com>
Date: Sat, 18 Apr 2026 15:07:02 -0300
Subject: [PATCH] Fix: responsive grids en Evoluciones (grid-cols-1
 sm:grid-cols-2)

---
 src/sections/Evoluciones.tsx     |   8 +--
 src/sections/HistoriaClinica.tsx | 109 ++++++++++++++++---------------
 2 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/src/sections/Evoluciones.tsx b/src/sections/Evoluciones.tsx
index 8e7281f..84ea2f0 100644
--- a/src/sections/Evoluciones.tsx
+++ b/src/sections/Evoluciones.tsx
@@ -197,7 +197,7 @@ export function Evoluciones({
               Nueva Evolución
             </Button>
           </DialogTrigger>
-          <DialogContent className="sm:max-w-3xl max-h-[90vh] overflow-y-auto">
+          <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
             <DialogHeader>
               <DialogTitle>
                 {evolucionEditando ? 'Editar Evolución' : 'Nueva Evolución'}
@@ -222,7 +222,7 @@ export function Evoluciones({
                 </div>
               )}
               
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div>
                   <Label>Fecha *</Label>
                   <Input type="date" value={fecha} onChange={(e) => setFecha(e.target.value)} />
@@ -238,7 +238,7 @@ export function Evoluciones({
                   <Activity className="h-4 w-4" />
                   Signos Vitales
                 </p>
-                <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                   <div>
                     <Label className="flex items-center gap-1">
                       <Heart className="h-4 w-4" />TAS
@@ -486,7 +486,7 @@ export function Evoluciones({
                       {evolucion.examenFisico && (
                         <div className="bg-green-50 p-3 rounded-lg border border-green-200">
                           <p className="text-sm font-medium text-green-800 mb-2">Examen Físico:</p>
-                          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs">
+                          <div className="grid grid-cols-1 sm:grid-cols-4 gap-2 text-xs">
                             {evolucion.examenFisico.SNC && <div><span className="font-medium">SNC:</span> {evolucion.examenFisico.SNC}</div>}
                             {evolucion.examenFisico.Cardiovascular && <div><span className="font-medium">CV:</span> {evolucion.examenFisico.Cardiovascular}</div>}
                             {evolucion.examenFisico.Respiratorio && <div><span className="font-medium">Resp:</span> {evolucion.examenFisico.Respiratorio}</div>}
diff --git a/src/sections/HistoriaClinica.tsx b/src/sections/HistoriaClinica.tsx
index 6290958..a08210f 100644
--- a/src/sections/HistoriaClinica.tsx
+++ b/src/sections/HistoriaClinica.tsx
@@ -48,6 +48,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import type { Laboratorio, AcidoBase, Cultivo, Paciente, ResultadoLaboratorio, Internacion, Evolucion, Cama, EstudioComplementario, Interconsulta } from '@/types';
@@ -240,17 +241,17 @@ export function HistoriaClinica({
           <p className="text-gray-500 dark:text-gray-400">Módulo de Historia Clínica de Internación</p>
         </div>
 
-        <div className="flex items-center gap-2">
 
-          <Button variant="outline" onClick={onVolver}>
-            <ArrowLeft className="h-4 w-4 mr-2" />
-            Volver
-          </Button>
-          <Button variant="outline" onClick={onEditarIngreso}>
-            <Pencil className="h-4 w-4 mr-2" />
-            Editar Ingreso
-          </Button>
-        </div>
+
+        <Button variant="outline" onClick={onVolver}>
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Volver
+        </Button>
+        <Button variant="outline" onClick={onEditarIngreso}>
+          <Pencil className="h-4 w-4 mr-2" />
+          Editar Ingreso
+        </Button>
+
       </div>
 
 
@@ -461,52 +462,54 @@ export function HistoriaClinica({
 
           </div>
 
-</CardContent>
+        </CardContent>
       </Card>
 
-      <Tabs value={tabActivo} onValueChange={setTabActivo}>
-        <div className="overflow-x-auto -mx-4 px-4">
-          <TabsList className="inline-flex min-w-full gap-1">
+      <Tabs className="w-full p-4" value={tabActivo} onValueChange={setTabActivo}>
+        <ScrollArea className="w-full whitespace-nowrap rounded-md">
+          <TabsList>
             <TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm whitespace-nowrap">
-            <FileText className="h-3 w-3 sm:h-4 sm:w-4" />
-            <span className="hidden sm:inline">Evoluciones</span>
-            <span className="sm:hidden">Evol</span>
-            ({evoluciones.length})
-          </TabsTrigger>
-          <TabsTrigger value="laboratorios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-            <FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
-            <span className="hidden sm:inline">Laboratorio</span>
-            <span className="sm:hidden">Lab</span>
-            ({laboratorios.length})
-          </TabsTrigger>
-          <TabsTrigger value="acidobase" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-            <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
-            <span className="hidden sm:inline">EAB</span>
-            <span className="sm:hidden">EAB</span>
-            ({acidosBase.length})
-          </TabsTrigger>
-          <TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-            <Microscope className="h-3 w-3 sm:h-4 sm:w-4" />
-            <span className="hidden sm:inline">Cultivos</span>
-            <span className="sm:hidden">Cult</span>
-            ({cultivos.length})
-          </TabsTrigger>
-          <TabsTrigger value="atb" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-            <Pill className="h-3 w-3 sm:h-4 sm:w-4" />
-            <span className="hidden sm:inline">ATB</span>
-          </TabsTrigger>
-          <TabsTrigger value="estudios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-            <ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" />
-            <span className="hidden sm:inline">Estudios</span>
-            <span className="sm:hidden">Est</span>
-            ({estudiosComplementarios.length})
-          </TabsTrigger>
-          <TabsTrigger value="interconsultas" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-            <Users className="h-3 w-3 sm:h-4 sm:w-4" />
-            <span className="hidden sm:inline">Interconsultas</span>
-          </TabsTrigger>
-        </TabsList>
-        </div>
+              <FileText className="h-3 w-3 sm:h-4 sm:w-4" />
+              <span className="hidden sm:inline">Evoluciones</span>
+              ({evoluciones.length})
+            </TabsTrigger>
+            <TabsTrigger value="laboratorios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+              <FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
+              <span className="hidden sm:inline">Laboratorio</span>
+
+              ({laboratorios.length})
+            </TabsTrigger>
+            <TabsTrigger value="acidobase" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+              <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
+              <span className="hidden sm:inline">EAB</span>
+
+              ({acidosBase.length})
+            </TabsTrigger>
+            <TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+              <Microscope className="h-3 w-3 sm:h-4 sm:w-4" />
+              <span className="hidden sm:inline">Cultivos</span>
+
+              ({cultivos.length})
+            </TabsTrigger>
+            <TabsTrigger value="atb" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+              <Pill className="h-3 w-3 sm:h-4 sm:w-4" />
+              <span className="hidden sm:inline">ATB</span>
+
+            </TabsTrigger>
+            <TabsTrigger value="estudios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+              <ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" />
+              <span className="hidden sm:inline">Estudios</span>
+
+              ({estudiosComplementarios.length})
+            </TabsTrigger>
+            <TabsTrigger value="interconsultas" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+              <Users className="h-3 w-3 sm:h-4 sm:w-4" />
+              <span className="hidden sm:inline">Interconsultas</span>
+              ({interconsultas.length})
+            </TabsTrigger>
+          </TabsList>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
 
         <TabsContent value="laboratorios" className="mt-4">
           <SeccionLaboratorios lab={laboratorios} patientId={paciente.id} add={onAgregarLaboratorio} update={onActualizarLaboratorio} del={onEliminarLaboratorio} addAcidoBase={onAgregarAcidoBase} />