Add outside area bed workflow

- Add input for writing bed number in NuevoIngreso and EditIngreso
- Auto-complete area when selecting bed from dropdown
- Automatically create new bed with 'Fuera de area' when typing number
- Modify finalizarInternacion to delete bed only for outside area
- Add two-mode selection: select bed or write bed

src/App.tsx

@@ -194,6 +194,7 @@ function AppContent() {
             camas={store.camas}
             areas={store.areas}
             onIniciarInternacion={store.iniciarInternacion}
+            onAgregarCama={store.agregarCama}
             onVolver={() => store.setVista('internaciones')}
             getAreaName={(areaId) => store.areas.find(a => a.id === areaId)?.nombre || ''}
           />
@@ -219,6 +220,7 @@ function AppContent() {
             camas={store.camas}
             areas={store.areas}
             onActualizarInternacion={store.actualizarInternacion}
+            onAgregarCama={store.agregarCama}
             onVolver={() => store.setVista('historiaclinica')}
             getAreaName={(areaId) => store.areas.find(a => a.id === areaId)?.nombre || ''}
           />

src/hooks/useHospitalStore.ts

@@ -238,10 +238,14 @@ const finalizarInternacion = useCallback((internacionId: string, datos: {
     diagnosticoEgreso: string; 
     motivoEgreso: Internacion['motivoEgreso'] 
   }) => {
-    setState(prev => {
-      const internacion = prev.internaciones.find(i => i.id === internacionId);
-      if (!internacion) return prev;
+    const internacion = state.internaciones.find(i => i.id === internacionId);
+    if (!internacion) return;
+    
+    const areaFueraDeArea = state.areas.find(a => (a.nombre || '').trim().toLowerCase() === 'fuera de area');
+    const areaFueraDeAreaId = areaFueraDeArea?.id;
+    const esFueraDeArea = internacion.areaId === areaFueraDeAreaId;
 
+    setState(prev => {
       return {
         ...prev,
         internaciones: prev.internaciones.map(i => 
@@ -249,14 +253,16 @@ const finalizarInternacion = useCallback((internacionId: string, datos: {
             ? { ...i, ...datos, activa: false }
             : i
         ),
-        cams: prev.camas.map(c => 
-          c.id === internacion.camaId 
-            ? { ...c, estado: 'Disponible', pacienteId: undefined, internacionId: undefined }
-            : c
-        ),
+        cams: esFueraDeArea 
+          ? prev.camas.filter(c => c.id !== internacion.camaId)
+          : prev.camas.map(c => 
+              c.id === internacion.camaId 
+                ? { ...c, estado: 'Disponible', pacienteId: undefined, internacionId: undefined }
+                : c
+            ),
       };
     });
-  }, []);
+  }, [state.areas]);
 
   const actualizarInternacion = useCallback((internacionId: string, datos: Partial<Internacion>) => {
     const internacion = state.internaciones.find(i => i.id === internacionId);

src/sections/EditIngreso.tsx

@@ -16,6 +16,7 @@ interface EditIngresoProps {
   camas: Cama[];
   areas: Area[];
   onActualizarInternacion: (id: string, datos: Partial<Internacion>) => void;
+  onAgregarCama?: (cama: Omit<Cama, 'id'>) => string;
   onVolver: () => void;
   getAreaName: (areaId: string | undefined) => string;
 }
@@ -28,6 +29,7 @@ export function EditIngreso({
   camas,
   areas,
   onActualizarInternacion,
+  onAgregarCama,
   onVolver,
   getAreaName
 }: EditIngresoProps) {
@@ -35,6 +37,8 @@ export function EditIngreso({
   const [busqueda, setBusqueda] = useState('');
   const [camaSeleccionada, setCamaSeleccionada] = useState(internacion.camaId);
   const [areaSeleccionada, setAreaSeleccionada] = useState(internacion.areaId);
+  const [camaInput, setCamaInput] = useState('');
+  const [modoCama, setModoCama] = useState<'seleccionar' | 'escribir'>('seleccionar');
   const [medico, setMedico] = useState(internacion.medicoIngresante);
   const [fechaIngresoHospital, setFechaIngresoHospital] = useState(internacion.fechaIngresoHospital || '');
   const [fechaIngresoClinica, setFechaIngresoClinica] = useState(internacion.fechaIngresoClinica || '');
@@ -61,6 +65,8 @@ export function EditIngreso({
     const nombre = (a.nombre || '').trim().toLowerCase();
     return nombre !== 'fuera de area';
   });
+  const areaFueraDeArea = areas.find(a => (a.nombre || '').trim().toLowerCase() === 'fuera de area');
+  const areaFueraDeAreaId = areaFueraDeArea?.id || '';
 
   const parseBedNumber = (numero: string) => {
     const match = numero.match(/^(\d{3})-(\d+)$/);
@@ -105,16 +111,60 @@ export function EditIngreso({
     return oa.suborden - ob.suborden;
   });
 
-  const handleSubmit = () => {
-    if (!pacienteSeleccionado || !camaSeleccionada || !areaSeleccionada || !medico || !diagnosticoIngreso || !enfermedadActual) {
+  const handleSubmit = async () => {
+    if (!pacienteSeleccionado || !medico || !diagnosticoIngreso || !enfermedadActual) {
       alert('Por favor complete los campos obligatorios');
       return;
     }
 
+    let camaId = '';
+    let newAreaId = '';
+
+    if (modoCama === 'escribir') {
+      if (!camaInput.trim()) {
+        alert('Ingrese el número de cama');
+        return;
+      }
+      const numeroCama = camaInput.trim();
+      const camaExistente = camas.find(c => c.numero === numeroCama);
+      if (camaExistente) {
+        camaId = camaExistente.id;
+        newAreaId = camaExistente.areaId || '';
+      } else if (onAgregarCama) {
+        const nuevaCamaId = onAgregarCama({
+          numero: numeroCama,
+          areaId: areaFueraDeAreaId,
+          tipo: 'General',
+          estado: 'Ocupada'
+        });
+        camaId = nuevaCamaId;
+        newAreaId = areaFueraDeAreaId;
+      } else {
+        alert('No se puede agregar una nueva cama');
+        return;
+      }
+    } else {
+      if (!camaSeleccionada) {
+        alert('Seleccione una cama');
+        return;
+      }
+      const camaElegida = sortedCamas.find(c => c.id === camaSeleccionada);
+      if (!camaElegida) {
+        alert('Cama no encontrada');
+        return;
+      }
+      newAreaId = areaSeleccionada || camaElegida.areaId || areaFueraDeAreaId;
+      if (!newAreaId) {
+        alert('Seleccione un área de trabajo');
+        return;
+      }
+      camaId = camaSeleccionada;
+    }
+
     onActualizarInternacion(internacion.id, {
       pacienteId: pacienteSeleccionado,
-      camaId: camaSeleccionada,
-      areaId: areaSeleccionada,
+      camaId: camaId,
+      areaId: newAreaId,
       medicoIngresante: medico,
       diagnosticoIngreso,
       motivoConsulta: motivoConsulta || undefined,
@@ -237,38 +287,69 @@ export function EditIngreso({
                 <Bed className="h-4 w-4" />
                 Asignación de Cama y Área
               </h3>
-
-              <div>
-                <Label>Área de Trabajo *</Label>
-                <Select value={areaSeleccionada} onValueChange={setAreaSeleccionada}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Seleccionar área" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {areasDisponibles.map(a => (
-                      <SelectItem key={a.id} value={a.id}>
-                        {a.nombre}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+              
+              <div className="flex gap-2 mb-4">
+                <Button 
+                  variant={modoCama === 'seleccionar' ? 'default' : 'outline'} 
+                  onClick={() => setModoCama('seleccionar')}
+                >
+                  Seleccionar Cama
+                </Button>
+                <Button 
+                  variant={modoCama === 'escribir' ? 'default' : 'outline'} 
+                  onClick={() => setModoCama('escribir')}
+                >
+                  Escribir Cama
+                </Button>
               </div>
 
-              <div>
-                <Label>Cama</Label>
-                <Select value={camaSeleccionada} onValueChange={setCamaSeleccionada}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Seleccionar cama" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {sortedCamas.map(c => (
-                      <SelectItem key={c.id} value={c.id}>
-                        {c.numero} - {getAreaName(c.areaId)}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
+              {modoCama === 'seleccionar' ? (
+                <>
+                  <div>
+                    <Label>Área de Trabajo *</Label>
+                    <Select value={areaSeleccionada} onValueChange={setAreaSeleccionada}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Seleccionar área" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {areasDisponibles.map(a => (
+                          <SelectItem key={a.id} value={a.id}>
+                            {a.nombre}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div>
+                    <Label>Cama</Label>
+                    <Select value={camaSeleccionada} onValueChange={setCamaSeleccionada}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Seleccionar cama" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {sortedCamas.map(c => (
+                          <SelectItem key={c.id} value={c.id}>
+                            {c.numero} - {getAreaName(c.areaId)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </>
+              ) : (
+                <div>
+                  <Label>Número de Cama (formato XXX-YY) *</Label>
+                  <Input 
+                    placeholder="201-1" 
+                    value={camaInput}
+                    onChange={(e) => setCamaInput(e.target.value)}
+                  />
+                  <p className="text-xs text-gray-500 mt-1">
+                    Esta cama será creada como "Fuera de área"
+                  </p>
+                </div>
+              )}
             </CardContent>
           </Card>
         </div>

src/sections/NuevoIngreso.tsx

@@ -13,17 +13,20 @@ interface NuevoIngresoProps {
   camas: Cama[];
   areas: Area[];
   onIniciarInternacion: (internacion: Omit<Internacion, 'id' | 'activa'>) => void;
+  onAgregarCama?: (cama: Omit<Cama, 'id'>) => string;
   onAgregarPaciente?: (paciente: Omit<Paciente, 'id'>) => void;
   onActualizarPaciente?: (id: string, datos: Partial<Paciente>) => void;
   onVolver: () => void;
   getAreaName: (areaId: string | undefined) => string;
 }
 
-export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, onVolver, getAreaName }: NuevoIngresoProps) {
+export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, onAgregarCama, onVolver, getAreaName }: NuevoIngresoProps) {
   const [pacienteSeleccionado, setPacienteSeleccionado] = useState<string>('');
   const [busqueda, setBusqueda] = useState('');
   const [camaSeleccionada, setCamaSeleccionada] = useState('');
   const [areaSeleccionada, setAreaSeleccionada] = useState('');
+  const [camaInput, setCamaInput] = useState('');
+  const [modoCama, setModoCama] = useState<'seleccionar' | 'escribir'>('seleccionar');
   const [medico, setMedico] = useState('');
   const [fechaIngresoHospital, setFechaIngresoHospital] = useState('');
   const [fechaIngresoClinica, setFechaIngresoClinica] = useState('');
@@ -54,6 +57,9 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
     const nombre = (a.nombre || '').trim().toLowerCase();
     return nombre !== 'fuera de area';
   });
+  const areaFueraDeArea = areas.find(a => (a.nombre || '').trim().toLowerCase() === 'fuera de area');
+  const areaFueraDeAreaId = areaFueraDeArea?.id || '';
+  
   const pacientesSinInternar = pacientes;
 
   const parseBedNumber = (numero: string) => {
@@ -99,16 +105,60 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
     return oa.suborden - ob.suborden;
   });
 
-  const handleSubmit = () => {
-    if (!pacienteSeleccionado || !camaSeleccionada || !areaSeleccionada || !medico || !diagnosticoIngreso || !enfermedadActual) {
+  const handleSubmit = async () => {
+    if (!pacienteSeleccionado || !medico || !diagnosticoIngreso || !enfermedadActual) {
       alert('Por favor complete los campos obligatorios');
       return;
     }
 
+    let camaId = '';
+    let newAreaId = '';
+
+    if (modoCama === 'escribir') {
+      if (!camaInput.trim()) {
+        alert('Ingrese el número de cama');
+        return;
+      }
+      const numeroCama = camaInput.trim();
+      const camaExistente = camas.find(c => c.numero === numeroCama);
+      if (camaExistente) {
+        camaId = camaExistente.id;
+        newAreaId = camaExistente.areaId || '';
+      } else if (onAgregarCama) {
+        const nuevaCamaId = onAgregarCama({
+          numero: numeroCama,
+          areaId: areaFueraDeAreaId,
+          tipo: 'General',
+          estado: 'Ocupada'
+        });
+        camaId = nuevaCamaId;
+        newAreaId = areaFueraDeAreaId;
+      } else {
+        alert('No se puede agregar una nueva cama');
+        return;
+      }
+    } else {
+      if (!camaSeleccionada) {
+        alert('Seleccione una cama');
+        return;
+      }
+      const camaElegida = sortedCamas.find(c => c.id === camaSeleccionada);
+      if (!camaElegida) {
+        alert('Cama no encontrada');
+        return;
+      }
+      newAreaId = camaElegida.areaId || areaFueraDeAreaId;
+      if (!newAreaId) {
+        alert('La cama no tiene un área asignada');
+        return;
+      }
+      camaId = camaSeleccionada;
+    }
+
     onIniciarInternacion({
       pacienteId: pacienteSeleccionado,
-      camaId: camaSeleccionada,
-      areaId: areaSeleccionada,
+      camaId: camaId,
+      areaId: newAreaId,
       medicoIngresante: medico,
       diagnosticoIngreso,
       motivoConsulta: motivoConsulta || undefined,
@@ -217,42 +267,73 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
         <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">
+<h3 className="font-semibold text-gray-900 flex items-center gap-2">
                 <Bed className="h-4 w-4" />
                 Asignación de Cama y Área
               </h3>
               
-              <div>
-                <Label>Área de Trabajo *</Label>
-                <Select value={areaSeleccionada} onValueChange={setAreaSeleccionada}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Seleccionar área" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {areasDisponibles.map(a => (
-                      <SelectItem key={a.id} value={a.id}>
-                        {a.nombre}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              
-              <div>
-                <Label>Cama *</Label>
-                <Select value={camaSeleccionada} onValueChange={setCamaSeleccionada}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Seleccionar cama" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {sortedCamas.map(c => (
-                      <SelectItem key={c.id} value={c.id}>
-                        {c.numero} - {getAreaName(c.areaId)}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+              <div className="flex gap-2 mb-4">
+                <Button 
+                  variant={modoCama === 'seleccionar' ? 'default' : 'outline'} 
+                  onClick={() => setModoCama('seleccionar')}
+                >
+                  Seleccionar Cama
+                </Button>
+                <Button 
+                  variant={modoCama === 'escribir' ? 'default' : 'outline'} 
+                  onClick={() => setModoCama('escribir')}
+                >
+                  Escribir Cama
+                </Button>
               </div>
+
+              {modoCama === 'seleccionar' ? (
+                <>
+                  <div>
+                    <Label>Área de Trabajo *</Label>
+                    <Select value={areaSeleccionada} onValueChange={setAreaSeleccionada}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Seleccionar área" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {areasDisponibles.map(a => (
+                          <SelectItem key={a.id} value={a.id}>
+                            {a.nombre}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  <div>
+                    <Label>Cama *</Label>
+                    <Select value={camaSeleccionada} onValueChange={setCamaSeleccionada}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Seleccionar cama" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {sortedCamas.map(c => (
+                          <SelectItem key={c.id} value={c.id}>
+                            {c.numero} - {getAreaName(c.areaId)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </>
+              ) : (
+                <div>
+                  <Label>Número de Cama (formato XXX-YY) *</Label>
+                  <Input 
+                    placeholder="201-1" 
+                    value={camaInput}
+                    onChange={(e) => setCamaInput(e.target.value)}
+                  />
+                  <p className="text-xs text-gray-500 mt-1">
+                    Esta cama será creada como "Fuera de área"
+                  </p>
+                </div>
+              )}
             </CardContent>
           </Card>
         </div>