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

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