Fix: Mapa de camas responsive y mejoras en Historia Clínica

docker-compose.yml

@@ -4,10 +4,10 @@ services:
   app:
     build: .
     ports:
-      - "80:80"
+      - "8077:80"
       - "4000:4000"
     volumes:
-      - hospital-data:/app/data
+      - hospital-data:/app
     restart: unless-stopped
 
 volumes:

src/sections/HistoriaClinica.tsx

@@ -154,23 +154,34 @@ export function HistoriaClinica({
     <div className="space-y-6">
       <div className="flex items-center justify-between gap-4">
         <div className="flex items-center gap-4">
-          <Button variant="outline" onClick={onVolver}>
-            <ArrowLeft className="h-4 w-4 mr-2" />
-            Volver
-          </Button>
+
           <div>
             <h1 className="text-2xl font-bold text-gray-900">Historia Clínica</h1>
             <p className="text-gray-500">
               Cama: {cama?.numero || 'N/A'} | {paciente.apellido}, {paciente.nombre} | {paciente.fechaNacimiento ? calcularEdad(paciente.fechaNacimiento) + ' años' : ''} | DNI: {paciente.dni}
             </p>
           </div>
+
         </div>
+
+        <div className="flex items-center gap-4">
+          <Button variant="outline" onClick={onVolver}>
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            Volver
+          </Button>
           <Button variant="outline" onClick={() => setEditIngresoDialog(true)}>
             <Pencil className="h-4 w-4 mr-2" />
             Editar Ingreso
           </Button>
+
         </div>
 
+      </div>
+
+
+
+
+
       <Dialog open={editIngresoDialog} onOpenChange={setEditIngresoDialog}>
         <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
           <DialogHeader>
@@ -284,7 +295,7 @@ export function HistoriaClinica({
                     try {
                       const formField = form.getTextField(field.name);
                       if (formField) formField.setText(field.value);
-                    } catch (e) {}
+                    } catch (e) { }
                   }
                   const pdfBytes = await pdfDoc.save();
                   const blob = new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' });
@@ -956,7 +967,7 @@ function SeccionCultivos({ cults, patient, add, update, del }: {
 
   const cs = cults.filter(c => c.pacienteId === patient.id).sort((a, b) => new Date(b.fechaToma).getTime() - new Date(a.fechaToma).getTime());
 
-  const getEstadoColor = (estado:Cultivo['estado']) => {
+  const getEstadoColor = (estado: Cultivo['estado']) => {
     switch (estado) {
       case 'NAF/Pendiente': return 'bg-amber-100 text-amber-800';
       case 'Parcial': return 'bg-orange-100 text-orange-800';
@@ -1005,7 +1016,7 @@ function SeccionCultivos({ cults, patient, add, update, del }: {
             </div>
             <div>
               <Label>Tipo de Muestra *</Label>
-              <Select value={tipoMuestra} onValueChange={(v:Cultivo['tipoMuestra']) => setTipoMuestra(v)}>
+              <Select value={tipoMuestra} onValueChange={(v: Cultivo['tipoMuestra']) => setTipoMuestra(v)}>
                 <SelectTrigger><SelectValue /></SelectTrigger>
                 <SelectContent>
                   <SelectItem value="HMCx2">HMCx2</SelectItem>
@@ -1049,7 +1060,7 @@ function SeccionCultivos({ cults, patient, add, update, del }: {
             <div className="grid grid-cols-2 gap-4">
               <div><Label>Fecha de Resultado *</Label><Input type="date" value={fechaResultado} onChange={e => setFechaResultado(e.target.value)} /></div>
               <div><Label>Resultado *</Label>
-                <Select value={estadoResultado} onValueChange={(v:Cultivo['estado']) => setEstadoResultado(v)}>
+                <Select value={estadoResultado} onValueChange={(v: Cultivo['estado']) => setEstadoResultado(v)}>
                   <SelectTrigger><SelectValue /></SelectTrigger>
                   <SelectContent>
                     <SelectItem value="Positivo">Positivo</SelectItem>

src/sections/MapaCamas.tsx

@@ -277,7 +277,7 @@ export function MapaCamas({
       </Card>
 
       {/* Mapa de Camas */}
-      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 sm:gap-4">
         {sortedCamas.map((cama) => {
           const paciente = cama.pacienteId ? getPacienteById(cama.pacienteId) : null;
           const internacion = cama.internacionId ? getInternacionById(cama.internacionId) : null;