From 7705e4147e5808f9ab70ee3f8e851a41bc6ca8b4 Mon Sep 17 00:00:00 2001
From: Santiago Lavaise <snlavaise@github.com>
Date: Tue, 14 Apr 2026 01:10:31 -0300
Subject: [PATCH] =?UTF-8?q?Fix:=20Layout=20NuevoIngreso=20igual=20a=20Edit?=
 =?UTF-8?q?Ingreso,=20cards=20del=20mismo=20tama=C3=B1o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/sections/EditIngreso.tsx  | 253 ++++++++++++++++------------------
 src/sections/NuevoIngreso.tsx | 190 ++++++++++++-------------
 2 files changed, 217 insertions(+), 226 deletions(-)

diff --git a/src/sections/EditIngreso.tsx b/src/sections/EditIngreso.tsx
index 7d70886..caf2c7b 100644
--- a/src/sections/EditIngreso.tsx
+++ b/src/sections/EditIngreso.tsx
@@ -20,16 +20,16 @@ interface EditIngresoProps {
   getAreaName: (areaId: string | undefined) => string;
 }
 
-export function EditIngreso({ 
-  internacion, 
-  paciente: pacienteOriginal, 
+export function EditIngreso({
+  internacion,
+  paciente: pacienteOriginal,
   cama: camaOriginal,
-  pacientes, 
+  pacientes,
   camas,
-  areas, 
-  onActualizarInternacion, 
-  onVolver, 
-  getAreaName 
+  areas,
+  onActualizarInternacion,
+  onVolver,
+  getAreaName
 }: EditIngresoProps) {
   const [pacienteSeleccionado, setPacienteSeleccionado] = useState(internacion.pacienteId);
   const [busqueda, setBusqueda] = useState('');
@@ -96,16 +96,16 @@ export function EditIngreso({
         </div>
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         {/* Columna 1: Datos del Paciente, Cama y Datos Adicionales */}
         <div className="space-y-6">
-          <Card>
+          <Card className="min-h-[200px]">
             <CardContent className="pt-6 space-y-4">
               <h3 className="font-semibold text-gray-900 flex items-center gap-2">
                 <User className="h-4 w-4" />
                 Datos del Paciente
               </h3>
-              
+
               {selectedPaciente ? (
                 <div className="flex items-center gap-2 flex-wrap">
                   <Badge className="bg-blue-100 text-blue-800">
@@ -127,7 +127,7 @@ export function EditIngreso({
                       if (!q) {
                         return <div className="p-2 text-sm text-gray-500">Escriba para buscar</div>;
                       }
-                      const matches = pacientes.filter(p => 
+                      const matches = pacientes.filter(p =>
                         p.apellido.toLowerCase().includes(q) ||
                         p.nombre.toLowerCase().includes(q) ||
                         p.dni.includes(q)
@@ -151,16 +151,19 @@ export function EditIngreso({
               )}
             </CardContent>
           </Card>
+        </div>
 
-          <Card>
+        {/* Columna 2: Cama */}
+        <div className="space-y-6">
+          <Card className="min-h-[200px]">
             <CardContent className="pt-6 space-y-4">
               <h3 className="font-semibold text-gray-900 flex items-center gap-2">
                 <Bed className="h-4 w-4" />
                 Asignación de Cama
               </h3>
-              
+
               <div>
-                <Label>Cama *</Label>
+
                 <Select value={camaSeleccionada} onValueChange={setCamaSeleccionada}>
                   <SelectTrigger>
                     <SelectValue placeholder="Seleccionar cama" />
@@ -168,7 +171,7 @@ export function EditIngreso({
                   <SelectContent>
                     {camas.map(c => (
                       <SelectItem key={c.id} value={c.id}>
-                        {c.numero} - {getAreaName(c.areaId)} ({c.tipo})
+                        {c.numero} - {getAreaName(c.areaId)}
                       </SelectItem>
                     ))}
                   </SelectContent>
@@ -176,148 +179,134 @@ export function EditIngreso({
               </div>
             </CardContent>
           </Card>
-
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <h3 className="font-semibold text-gray-900 flex items-center gap-2">
-                <ClipboardList className="h-4 w-4" />
-                Datos Adicionales
-              </h3>
-              
-              <div>
-                <Label>Apache / Mortalidad</Label>
-                <Input 
-                  placeholder="Valor Apache o riesgo" 
-                  value={apache}
-                  onChange={(e) => setApache(e.target.value)}
-                />
-              </div>
-              <div>
-                <Label>Derivado de</Label>
-                <Input 
-                  placeholder="Hospital o clínica de derivación" 
-                  value={derivacion}
-                  onChange={(e) => setDerivacion(e.target.value)}
-                />
-              </div>
-            </CardContent>
-          </Card>
         </div>
+      </div>
 
-        {/* Columna 2: Datos de Ingreso */}
-        <div className="space-y-6">
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <h3 className="font-semibold text-gray-900 flex items-center gap-2">
-                <ClipboardList className="h-4 w-4" />
-                Datos de Ingreso
-              </h3>
-              
+
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6 space-y-4">
+            <h3 className="font-semibold text-gray-900 flex items-center gap-2">
+              <ClipboardList className="h-4 w-4" />
+              Datos de Ingreso
+            </h3>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
                 <Label>Fecha Ingreso al Hospital</Label>
-                <Input 
-                  type="date" 
+                <Input
+                  type="date"
                   value={fechaIngresoHospital}
                   onChange={(e) => setFechaIngresoHospital(e.target.value)}
                 />
               </div>
               <div>
                 <Label>Fecha Ingreso a Clínica Médica</Label>
-                <Input 
-                  type="date" 
+                <Input
+                  type="date"
                   value={fechaIngresoClinica}
                   onChange={(e) => setFechaIngresoClinica(e.target.value)}
                 />
               </div>
-              <div>
-                <Label>Apache / Mortalidad</Label>
-                <Input 
-                  placeholder="Valor Apache o riesgo" 
-                  value={apache}
-                  onChange={(e) => setApache(e.target.value)}
-                />
-              </div>
+
               <div>
                 <Label>Derivado de</Label>
-                <Input 
-                  placeholder="Hospital o clínica de derivación" 
+                <Input
+                  placeholder="Hospital o clínica de derivación"
                   value={derivacion}
                   onChange={(e) => setDerivacion(e.target.value)}
                 />
               </div>
-            </CardContent>
-          </Card>
 
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <h3 className="font-semibold text-gray-900 flex items-center gap-2">
-                <Stethoscope className="h-4 w-4" />
-                Médico Ingresante
-              </h3>
-              
               <div>
-                <Label>Médico Ingresante *</Label>
-                <Input 
-                  placeholder="Nombre del médico" 
-                  value={medico}
-                  onChange={(e) => setMedico(e.target.value)}
+                <Label>Apache / Mortalidad</Label>
+                <Input
+                  placeholder="Valor Apache o riesgo"
+                  value={apache}
+                  onChange={(e) => setApache(e.target.value)}
                 />
               </div>
-            </CardContent>
-          </Card>
-        </div>
+            </div>
+          </CardContent>
+        </Card>
 
-        {/* Columna 3: Datos Clínicos */}
-        <div className="space-y-6">
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <h3 className="font-semibold text-gray-900">
-                Datos Clínicos
-              </h3>
-              
-              <div>
-                <Label>Motivo de Consulta *</Label>
-                <textarea
-                  className="w-full p-2 border rounded-md text-sm min-h-[80px]"
-                  placeholder="Motivo por el cual consulta"
-                  value={motivoConsulta}
-                  onChange={(e) => setMotivoConsulta(e.target.value)}
-                />
-              </div>
-              
-              <div>
-                <Label>Diagnóstico de Ingreso *</Label>
-                <textarea
-                  className="w-full p-2 border rounded-md text-sm min-h-[80px]"
-                  placeholder="Diagnóstico principal"
-                  value={diagnosticoIngreso}
-                  onChange={(e) => setDiagnosticoIngreso(e.target.value)}
-                />
-              </div>
-              
-              <div>
-                <Label>Enfermedad Actual *</Label>
-                <textarea
-                  className="w-full p-2 border rounded-md text-sm min-h-[100px]"
-                  placeholder="Descripción de la enfermedad actual"
-                  value={enfermedadActual}
-                  onChange={(e) => setEnfermedadActual(e.target.value)}
-                />
-              </div>
-              
-              <div>
-                <Label>Antecedentes de la Enfermedad Actual</Label>
-                <textarea
-                  className="w-full p-2 border rounded-md text-sm min-h-[80px]"
-                  placeholder="Antecedentes relevantes"
-                  value={antecedentesEnfermedadActual}
-                  onChange={(e) => setAntecedentesEnfermedadActual(e.target.value)}
-                />
-              </div>
-            </CardContent>
-          </Card>
-        </div>
       </div>
+
+
+
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6 space-y-4">
+            <h3 className="font-semibold text-gray-900">
+              Datos Clínicos
+            </h3>
+
+            <div>
+              <Label>Motivo de Consulta *</Label>
+              <textarea
+                className="w-full p-2 border rounded-md text-sm min-h-[80px]"
+                placeholder="Motivo por el cual consulta"
+                value={motivoConsulta}
+                onChange={(e) => setMotivoConsulta(e.target.value)}
+              />
+            </div>
+
+            <div>
+              <Label>Diagnóstico de Ingreso *</Label>
+              <textarea
+                className="w-full p-2 border rounded-md text-sm min-h-[80px]"
+                placeholder="Diagnóstico principal"
+                value={diagnosticoIngreso}
+                onChange={(e) => setDiagnosticoIngreso(e.target.value)}
+              />
+            </div>
+
+            <div>
+              <Label>Enfermedad Actual *</Label>
+              <textarea
+                className="w-full p-2 border rounded-md text-sm min-h-[100px]"
+                placeholder="Descripción de la enfermedad actual"
+                value={enfermedadActual}
+                onChange={(e) => setEnfermedadActual(e.target.value)}
+              />
+            </div>
+
+            <div>
+              <Label>Antecedentes de Enfermedad Actual</Label>
+              <textarea
+                className="w-full p-2 border rounded-md text-sm min-h-[80px]"
+                placeholder="Antecedentes relevantes"
+                value={antecedentesEnfermedadActual}
+                onChange={(e) => setAntecedentesEnfermedadActual(e.target.value)}
+              />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+
+      {/* Columna 4: Médico Ingresante */}
+      <div className="space-y-6">
+
+        <Card>
+          <CardContent className="pt-6 space-y-4">
+            <h3 className="font-semibold text-gray-900 flex items-center gap-2">
+              <Stethoscope className="h-4 w-4" />
+              Médico Ingresante
+            </h3>
+
+            <div>
+              <Label>Médico Ingresante *</Label>
+              <Input
+                placeholder="Nombre del médico"
+                value={medico}
+                onChange={(e) => setMedico(e.target.value)}
+              />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/sections/NuevoIngreso.tsx b/src/sections/NuevoIngreso.tsx
index 6908160..e2ac411 100644
--- a/src/sections/NuevoIngreso.tsx
+++ b/src/sections/NuevoIngreso.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { ArrowLeft, Save, X, Bed, Calendar, Stethoscope, User, ClipboardList } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -73,9 +73,6 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
   };
 
   const selectedPaciente = pacientes.find(p => p.id === pacienteSeleccionado);
-  const camasDisponibles = camaSeleccionada 
-    ? []
-    : camas.filter(c => c.estado === 'Disponible' && !c.pacienteId);
 
   return (
     <div className="space-y-6">
@@ -104,10 +101,10 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
         </div>
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Columna 1: Datos del Paciente, Cama y Datos Adicionales */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {/* Columna 1: Datos del Paciente */}
         <div className="space-y-6">
-          <Card>
+          <Card className="min-h-[200px]">
             <CardContent className="pt-6 space-y-4">
               <h3 className="font-semibold text-gray-900 flex items-center gap-2">
                 <User className="h-4 w-4" />
@@ -162,8 +159,11 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
               )}
             </CardContent>
           </Card>
+        </div>
 
-          <Card>
+        {/* Columna 2: Cama */}
+        <div className="space-y-6">
+          <Card className="min-h-[200px]">
             <CardContent className="pt-6 space-y-4">
               <h3 className="font-semibold text-gray-900 flex items-center gap-2">
                 <Bed className="h-4 w-4" />
@@ -179,7 +179,7 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
                   <SelectContent>
                     {camas.map(c => (
                       <SelectItem key={c.id} value={c.id}>
-                        {c.numero} - {getAreaName(c.areaId)} ({c.tipo})
+                        {c.numero} - {getAreaName(c.areaId)}
                       </SelectItem>
                     ))}
                   </SelectContent>
@@ -187,19 +187,18 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
               </div>
             </CardContent>
           </Card>
-
-          
         </div>
+      </div>
 
-        {/* Columna 2: Fechas y Médico */}
-        <div className="space-y-6">
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <h3 className="font-semibold text-gray-900 flex items-center gap-2">
-                <Calendar className="h-4 w-4" />
-                Datos de Ingreso
-              </h3>
-              
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6 space-y-4">
+            <h3 className="font-semibold text-gray-900 flex items-center gap-2">
+              <Calendar className="h-4 w-4" />
+              Datos de Ingreso
+            </h3>
+            
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
                 <Label>Fecha Ingreso al Hospital</Label>
                 <Input 
@@ -216,14 +215,7 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
                   onChange={(e) => setFechaIngresoClinica(e.target.value)}
                 />
               </div>
-              <div>
-                <Label>Apache / Mortalidad</Label>
-                <Input 
-                  placeholder="Valor Apache o riesgo" 
-                  value={apache}
-                  onChange={(e) => setApache(e.target.value)}
-                />
-              </div>
+
               <div>
                 <Label>Derivado de</Label>
                 <Input 
@@ -232,78 +224,88 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
                   onChange={(e) => setDerivacion(e.target.value)}
                 />
               </div>
-            </CardContent>
-          </Card>
 
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <h3 className="font-semibold text-gray-900 flex items-center gap-2">
-                <Stethoscope className="h-4 w-4" />
-                Médico Ingresante
-              </h3>
-              
               <div>
-                <Label>Médico Ingresante *</Label>
+                <Label>Apache / Mortalidad</Label>
                 <Input 
-                  placeholder="Nombre del médico" 
-                  value={medico}
-                  onChange={(e) => setMedico(e.target.value)}
+                  placeholder="Valor Apache o riesgo" 
+                  value={apache}
+                  onChange={(e) => setApache(e.target.value)}
                 />
               </div>
-            </CardContent>
-          </Card>
-        </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
 
-        {/* Columna 3: Datos Clínicos */}
-        <div className="space-y-6">
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <h3 className="font-semibold text-gray-900">
-                Datos Clínicos
-              </h3>
-              
-              <div>
-                <Label>Motivo de Consulta *</Label>
-                <textarea
-                  className="w-full p-2 border rounded-md text-sm min-h-[80px]"
-                  placeholder="Motivo por el cual consulta"
-                  value={motivoConsulta}
-                  onChange={(e) => setMotivoConsulta(e.target.value)}
-                />
-              </div>
-              
-              <div>
-                <Label>Diagnóstico de Ingreso *</Label>
-                <textarea
-                  className="w-full p-2 border rounded-md text-sm min-h-[80px]"
-                  placeholder="Diagnóstico principal"
-                  value={diagnosticoIngreso}
-                  onChange={(e) => setDiagnosticoIngreso(e.target.value)}
-                />
-              </div>
-              
-              <div>
-                <Label>Enfermedad Actual *</Label>
-                <textarea
-                  className="w-full p-2 border rounded-md text-sm min-h-[100px]"
-                  placeholder="Descripción de la enfermedad actual"
-                  value={enfermedadActual}
-                  onChange={(e) => setEnfermedadActual(e.target.value)}
-                />
-              </div>
-              
-              <div>
-                <Label>Antecedentes de la Enfermedad Actual</Label>
-                <textarea
-                  className="w-full p-2 border rounded-md text-sm min-h-[80px]"
-                  placeholder="Antecedentes relevantes"
-                  value={antecedentesEnfermedadActual}
-                  onChange={(e) => setAntecedentesEnfermedadActual(e.target.value)}
-                />
-              </div>
-            </CardContent>
-          </Card>
-        </div>
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6 space-y-4">
+            <h3 className="font-semibold text-gray-900">
+              Datos Clínicos
+            </h3>
+            
+            <div>
+              <Label>Motivo de Consulta *</Label>
+              <textarea
+                className="w-full p-2 border rounded-md text-sm min-h-[80px]"
+                placeholder="Motivo por el cual consulta"
+                value={motivoConsulta}
+                onChange={(e) => setMotivoConsulta(e.target.value)}
+              />
+            </div>
+            
+            <div>
+              <Label>Diagnóstico de Ingreso *</Label>
+              <textarea
+                className="w-full p-2 border rounded-md text-sm min-h-[80px]"
+                placeholder="Diagnóstico principal"
+                value={diagnosticoIngreso}
+                onChange={(e) => setDiagnosticoIngreso(e.target.value)}
+              />
+            </div>
+            
+            <div>
+              <Label>Enfermedad Actual *</Label>
+              <textarea
+                className="w-full p-2 border rounded-md text-sm min-h-[100px]"
+                placeholder="Descripción de la enfermedad actual"
+                value={enfermedadActual}
+                onChange={(e) => setEnfermedadActual(e.target.value)}
+              />
+            </div>
+            
+            <div>
+              <Label>Antecedentes de la Enfermedad Actual</Label>
+              <textarea
+                className="w-full p-2 border rounded-md text-sm min-h-[80px]"
+                placeholder="Antecedentes relevantes"
+                value={antecedentesEnfermedadActual}
+                onChange={(e) => setAntecedentesEnfermedadActual(e.target.value)}
+              />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="space-y-6">
+        <Card>
+          <CardContent className="pt-6 space-y-4">
+            <h3 className="font-semibold text-gray-900 flex items-center gap-2">
+              <Stethoscope className="h-4 w-4" />
+              Médico Ingresante
+            </h3>
+            
+            <div>
+              <Label>Médico Ingresante *</Label>
+              <Input 
+                placeholder="Nombre del médico" 
+                value={medico}
+                onChange={(e) => setMedico(e.target.value)}
+              />
+            </div>
+          </CardContent>
+        </Card>
       </div>
     </div>
   );