Fix: Layout NuevoIngreso igual a EditIngreso, cards del mismo tamaño

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>
   );
 }