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

src/sections/EditIngreso.tsx

@@ -96,10 +96,10 @@ 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" />
@@ -151,8 +151,11 @@ 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" />
@@ -160,7 +163,7 @@ export function EditIngreso({
               </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,35 +179,10 @@ 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>
 
-        {/* Columna 2: Datos de Ingreso */}
+
       <div className="space-y-6">
         <Card>
           <CardContent className="pt-6 space-y-4">
@@ -213,6 +191,7 @@ export function EditIngreso({
               Datos de Ingreso
             </h3>
 
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
                 <Label>Fecha Ingreso al Hospital</Label>
                 <Input
@@ -229,14 +208,7 @@ export function EditIngreso({
                   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
@@ -245,29 +217,23 @@ export function EditIngreso({
                   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" 
+                  placeholder="Valor Apache o riesgo"
-                  value={medico}
+                  value={apache}
-                  onChange={(e) => setMedico(e.target.value)}
+                  onChange={(e) => setApache(e.target.value)}
                 />
               </div>
+            </div>
           </CardContent>
         </Card>
+
       </div>
 
-        {/* Columna 3: Datos Clínicos */}
+
+
       <div className="space-y-6">
         <Card>
           <CardContent className="pt-6 space-y-4">
@@ -306,7 +272,7 @@ export function EditIngreso({
             </div>
 
             <div>
-                <Label>Antecedentes de la Enfermedad Actual</Label>
+              <Label>Antecedentes de Enfermedad Actual</Label>
               <textarea
                 className="w-full p-2 border rounded-md text-sm min-h-[80px]"
                 placeholder="Antecedentes relevantes"
@@ -317,7 +283,30 @@ export function EditIngreso({
           </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>
   );
 }

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">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        {/* Columna 1: Datos del Paciente, Cama y Datos Adicionales */}
+        {/* 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,11 +187,9 @@ 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">
@@ -200,6 +198,7 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
               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,29 +224,20 @@ 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" 
+                  placeholder="Valor Apache o riesgo" 
-                  value={medico}
+                  value={apache}
-                  onChange={(e) => setMedico(e.target.value)}
+                  onChange={(e) => setApache(e.target.value)}
                 />
               </div>
+            </div>
           </CardContent>
         </Card>
       </div>
 
-        {/* Columna 3: Datos Clínicos */}
       <div className="space-y-6">
         <Card>
           <CardContent className="pt-6 space-y-4">
@@ -304,6 +287,25 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
           </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>
   );