From 708068167a7af5e350fb9711197d3eafc3695954 Mon Sep 17 00:00:00 2001
From: Sergio Nicolas Lavaise <snlavaise@gmail.com>
Date: Sat, 18 Apr 2026 15:24:50 -0300
Subject: [PATCH] Fix: Evoluciones responsive improvements

---
 src/sections/Evoluciones.tsx | 106 +++++++++++++++++------------------
 1 file changed, 53 insertions(+), 53 deletions(-)

diff --git a/src/sections/Evoluciones.tsx b/src/sections/Evoluciones.tsx
index 1b9b4d0..fa5f80c 100644
--- a/src/sections/Evoluciones.tsx
+++ b/src/sections/Evoluciones.tsx
@@ -20,11 +20,11 @@ interface EvolucionesProps {
   getInternacionActivaByPaciente: (pacienteId: string) => Internacion | undefined;
 }
 
-export function Evoluciones({ 
-  evoluciones, 
-  internaciones, 
+export function Evoluciones({
+  evoluciones,
+  internaciones,
   pacientes,
-  onAgregarEvolucion, 
+  onAgregarEvolucion,
   onActualizarEvolucion,
   onEliminarEvolucion,
   getPacienteById,
@@ -35,7 +35,7 @@ export function Evoluciones({
   const [dialogoAbierto, setDialogoAbierto] = useState(false);
   const [evolucionExpandida, setEvolucionExpandida] = useState<string | null>(null);
   const [evolucionEditando, setEvolucionEditando] = useState<Evolucion | null>(null);
-  
+
   const [fecha, setFecha] = useState(new Date().toISOString().split('T')[0]);
   const [hora, setHora] = useState(new Date().toTimeString().slice(0, 5));
   const [medico, setMedico] = useState('');
@@ -110,26 +110,26 @@ export function Evoluciones({
     const signosVitales: SignosVitales | undefined =
       temperatura || presionSistolica || frecuenciaCardiaca
         ? {
-            temperatura: temperatura ? parseFloat(temperatura) : undefined,
-            presionSistolica: presionSistolica ? parseInt(presionSistolica) : undefined,
-            presionDiastolica: presionDiastolica ? parseInt(presionDiastolica) : undefined,
-            frecuenciaCardiaca: frecuenciaCardiaca ? parseInt(frecuenciaCardiaca) : undefined,
-            frecuenciaRespiratoria: frecuenciaRespiratoria ? parseInt(frecuenciaRespiratoria) : undefined,
-            saturacionO2: saturacionO2 ? parseInt(saturacionO2) : undefined,
-          }
+          temperatura: temperatura ? parseFloat(temperatura) : undefined,
+          presionSistolica: presionSistolica ? parseInt(presionSistolica) : undefined,
+          presionDiastolica: presionDiastolica ? parseInt(presionDiastolica) : undefined,
+          frecuenciaCardiaca: frecuenciaCardiaca ? parseInt(frecuenciaCardiaca) : undefined,
+          frecuenciaRespiratoria: frecuenciaRespiratoria ? parseInt(frecuenciaRespiratoria) : undefined,
+          saturacionO2: saturacionO2 ? parseInt(saturacionO2) : undefined,
+        }
         : undefined;
 
     const examenFisico: ExamenFisico | undefined =
       snc || cardiovascular || respiratorio || abdominal || genitourinario || pielAnexos || soma
         ? {
-            SNC: snc || undefined,
-            Cardiovascular: cardiovascular || undefined,
-            Respiratorio: respiratorio || undefined,
-            Abdominal: abdominal || undefined,
-            Genitourinario: genitourinario || undefined,
-            PielAnexos: pielAnexos || undefined,
-            SOMA: soma || undefined,
-          }
+          SNC: snc || undefined,
+          Cardiovascular: cardiovascular || undefined,
+          Respiratorio: respiratorio || undefined,
+          Abdominal: abdominal || undefined,
+          Genitourinario: genitourinario || undefined,
+          PielAnexos: pielAnexos || undefined,
+          SOMA: soma || undefined,
+        }
         : undefined;
 
     const evolucionData = {
@@ -164,8 +164,8 @@ export function Evoluciones({
       if (!internacion) return false;
       const paciente = getPacienteById(internacion.pacienteId);
       if (!paciente) return false;
-      
-      return !busqueda || 
+
+      return !busqueda ||
         paciente.nombre.toLowerCase().includes(busqueda.toLowerCase()) ||
         paciente.apellido.toLowerCase().includes(busqueda.toLowerCase()) ||
         paciente.dni.includes(busqueda);
@@ -184,7 +184,7 @@ export function Evoluciones({
   };
 
   return (
-    <div className="space-y-6 dark:text-white overflow-x-hidden">
+    <div className="space-y-6 dark:text-white overflow-x-hidden max-w-screen">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Evoluciones Diarias</h1>
@@ -221,7 +221,7 @@ export function Evoluciones({
                   </Select>
                 </div>
               )}
-              
+
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div>
                   <Label>Fecha *</Label>
@@ -243,7 +243,7 @@ export function Evoluciones({
                     <Label className="flex items-center gap-1">
                       <Heart className="h-4 w-4" />TAS
                     </Label>
-                    <Input 
+                    <Input
                       type="number"
                       value={presionSistolica}
                       onChange={(e) => setPresionSistolica(e.target.value)}
@@ -254,7 +254,7 @@ export function Evoluciones({
                     <Label className="flex items-center gap-1">
                       <Heart className="h-4 w-4" />TAD
                     </Label>
-                    <Input 
+                    <Input
                       type="number"
                       value={presionDiastolica}
                       onChange={(e) => setPresionDiastolica(e.target.value)}
@@ -265,7 +265,7 @@ export function Evoluciones({
                     <Label className="flex items-center gap-1">
                       <Activity className="h-4 w-4" />FC
                     </Label>
-                    <Input 
+                    <Input
                       type="number"
                       value={frecuenciaCardiaca}
                       onChange={(e) => setFrecuenciaCardiaca(e.target.value)}
@@ -276,7 +276,7 @@ export function Evoluciones({
                     <Label className="flex items-center gap-1">
                       <Wind className="h-4 w-4" />FR
                     </Label>
-                    <Input 
+                    <Input
                       type="number"
                       value={frecuenciaRespiratoria}
                       onChange={(e) => setFrecuenciaRespiratoria(e.target.value)}
@@ -287,7 +287,7 @@ export function Evoluciones({
                     <Label className="flex items-center gap-1">
                       <Thermometer className="h-4 w-4" />T°
                     </Label>
-                    <Input 
+                    <Input
                       type="number"
                       step="0.1"
                       value={temperatura}
@@ -299,7 +299,7 @@ export function Evoluciones({
                     <Label className="flex items-center gap-1">
                       <Droplets className="h-4 w-4" />SatO2
                     </Label>
-                    <Input 
+                    <Input
                       type="number"
                       value={saturacionO2}
                       onChange={(e) => setSaturacionO2(e.target.value)}
@@ -378,7 +378,7 @@ export function Evoluciones({
 
               <div>
                 <Label>Médico *</Label>
-                <Input 
+                <Input
                   value={medico}
                   onChange={(e) => setMedico(e.target.value)}
                   placeholder="Nombre del médico"
@@ -391,12 +391,12 @@ export function Evoluciones({
                 Cancelar
               </Button>
               <Button variant="outline"
-                 onClick={handleGuardar}
-                 disabled={!medico || (!evolucionEditando && !pacienteSeleccionado)}
-               >
-                 <Save className="h-4 w-4 mr-2" />
-                 Guardar Evolución
-               </Button>
+                onClick={handleGuardar}
+                disabled={!medico || (!evolucionEditando && !pacienteSeleccionado)}
+              >
+                <Save className="h-4 w-4 mr-2" />
+                Guardar Evolución
+              </Button>
             </div>
           </DialogContent>
         </Dialog>
@@ -422,12 +422,12 @@ export function Evoluciones({
           const paciente = internacion ? getPacienteById(internacion.pacienteId) : null;
           const signosTexto = getSignosVitalesTexto(evolucion.signosVitales);
           const estaExpandida = evolucionExpandida === evolucion.id;
-          
+
           return (
             <Card key={evolucion.id} className="hover:shadow-md transition-shadow">
               <CardContent className="p-4">
                 <div className="flex flex-col sm:flex-row gap-3">
-                  <div className="flex items-start justify-between w-full">
+                  <div className="flex flex-col sm:flex-row items-start justify-between w-full">
                     <div className="flex items-center gap-3">
                       <div className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
                         <FileText className="h-5 w-5 text-blue-600" />
@@ -450,8 +450,8 @@ export function Evoluciones({
                       </div>
                     </div>
                     <div className="flex items-center gap-2">
-                      <Button 
-                        size="sm" 
+                      <Button
+                        size="sm"
                         variant="outline"
                         onClick={() => setEvolucionExpandida(estaExpandida ? null : evolucion.id)}
                       >
@@ -462,16 +462,16 @@ export function Evoluciones({
                           <Pencil className="h-4 w-4" />
                         </Button>
                       )}
-                      <Button variant="outline" 
-                         size="sm" 
-                         className="text-red-600"
-                         onClick={() => onEliminarEvolucion(evolucion.id)}
-                       >
-                         <Trash2 className="h-4 w-4" />
+                      <Button variant="outline"
+                        size="sm"
+                        className="text-red-600"
+                        onClick={() => onEliminarEvolucion(evolucion.id)}
+                      >
+                        <Trash2 className="h-4 w-4" />
                       </Button>
                     </div>
                   </div>
-                  
+
                   {signosTexto && (
                     <div className="bg-blue-50 p-2 rounded-lg">
                       <p className="text-sm font-medium text-blue-800 flex items-center gap-2">
@@ -480,7 +480,7 @@ export function Evoluciones({
                       </p>
                     </div>
                   )}
-                  
+
                   {estaExpandida && (
                     <>
                       {evolucion.examenFisico && (
@@ -497,21 +497,21 @@ export function Evoluciones({
                           </div>
                         </div>
                       )}
-                      
+
                       {evolucion.novedades && (
                         <div className="bg-red-50 p-3 rounded-lg border border-red-200 mt-3">
                           <p className="text-sm font-medium text-red-800 mb-1">Novedades:</p>
                           <p className="text-sm text-gray-800 whitespace-pre-wrap">{evolucion.novedades}</p>
                         </div>
                       )}
-                      
-{evolucion.comentario && (
+
+                      {evolucion.comentario && (
                         <div>
                           <p className="text-sm font-medium text-gray-700">Comentario:</p>
                           <p className="text-sm text-gray-600 whitespace-pre-wrap">{evolucion.comentario}</p>
                         </div>
                       )}
-                      
+
                       {evolucion.pendientes && (
                         <div className="bg-amber-50 p-3 rounded-lg border border-amber-200">
                           <p className="text-sm font-medium text-amber-800 mb-1">Pendientes:</p>