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

docker-compose.yml

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

src/sections/HistoriaClinica.tsx

@@ -1,14 +1,14 @@
 import { useState } from 'react';
 import { PDFDocument } from 'pdf-lib';
-import { 
-  FlaskConical, 
-  Activity, 
-  Microscope, 
-  Plus, 
-  Calendar, 
-  Clock, 
-  AlertCircle, 
-  CheckCircle2, 
+import {
+  FlaskConical,
+  Activity,
+  Microscope,
+  Plus,
+  Calendar,
+  Clock,
+  AlertCircle,
+  CheckCircle2,
   ArrowLeft,
   Pencil,
   Trash2,
@@ -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>
-        <Button variant="outline" onClick={() => setEditIngresoDialog(true)}>
-          <Pencil className="h-4 w-4 mr-2" />
-          Editar Ingreso
-        </Button>
+
+        <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' });
@@ -793,9 +804,9 @@ function SeccionAcidosBase({ ab, patientId, add, del }: {
   const [lactato, setLactato] = useState('');
   const [interpretacion, setInterpretacion] = useState('');
 
-  const reset = () => { 
+  const reset = () => {
     setFecha(new Date().toISOString().split('T')[0]);
-    setHora(new Date().toTimeString().slice(0, 5)); 
+    setHora(new Date().toTimeString().slice(0, 5));
     setPh(''); setPco2(''); setPo2(''); setHco3(''); setBe(''); setSato2(''); setLactato(''); setInterpretacion('');
   };
 
@@ -917,12 +928,12 @@ function SeccionCultivos({ cults, patient, add, update, del }: {
   const [sensible, setSensible] = useState('');
   const [resistente, setResistente] = useState('');
 
-  const reset = () => { 
-    setFechaToma(new Date().toISOString().split('T')[0]); 
+  const reset = () => {
+    setFechaToma(new Date().toISOString().split('T')[0]);
     setProtocolo('');
-    setTipoMuestra('HMCx2'); 
-    setObservaciones(''); 
-    setSelected(null); 
+    setTipoMuestra('HMCx2');
+    setObservaciones('');
+    setSelected(null);
   };
 
   const resetRes = () => {
@@ -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';
@@ -975,19 +986,19 @@ function SeccionCultivos({ cults, patient, add, update, del }: {
   };
 
   const handle = () => { add({ pacienteId: patient.id, fechaToma, protocolo: protocolo || undefined, tipoMuestra, observaciones: observaciones || undefined, estado: 'NAF/Pendiente' }); setDialog(false); reset(); };
-  
-  const handleParcial = () => { 
+
+  const handleParcial = () => {
     if (!selected) return;
     update(selected.id, { estado: 'Parcial', germen: germen || undefined, sensible: sensible || undefined, resistente: resistente || undefined });
-    setResDialog(false); 
-    resetRes(); 
+    setResDialog(false);
+    resetRes();
   };
 
-  const handleDefinitivo = () => { 
+  const handleDefinitivo = () => {
     if (!selected) return;
     update(selected.id, { fechaResultado, estado: estadoResultado, germen: germen || undefined, sensible: sensible || undefined, resistente: resistente || undefined });
-    setEditDialog(false); 
-    resetRes(); 
+    setEditDialog(false);
+    resetRes();
   };
 
   return (
@@ -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;