From 9121a1b123976dd33051c9dbcfac13c8c820501f Mon Sep 17 00:00:00 2001
From: Sergio Nicolas Lavaise <snlavaise@gmail.com>
Date: Tue, 14 Apr 2026 21:28:53 -0300
Subject: [PATCH] Fix: Responsive mejorado en Mapa de Camas para celulares

---
 src/sections/MapaCamas.tsx | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/sections/MapaCamas.tsx b/src/sections/MapaCamas.tsx
index 3227998..cfac9f6 100644
--- a/src/sections/MapaCamas.tsx
+++ b/src/sections/MapaCamas.tsx
@@ -188,12 +188,12 @@ export function MapaCamas({
           <Badge variant="outline" className="bg-red-50 text-red-700">
             {camas.filter(c => c.estado === 'Ocupada').length} Ocupadas
           </Badge>
-        <div className="ml-4 flex items-center gap-2">
+        <div className="ml-4 flex items-center gap-2 flex-wrap sm:flex-nowrap">
           <Button onClick={() => {
             setEditingAreaId(null);
             setAreaNombre('');
             setAreaDialogOpen(true);
-          }}>
+          }} className="text-xs px-2 py-1 sm:text-sm sm:px-4 sm:py-2">
             Administrar Áreas
           </Button>
           <Button onClick={() => {
@@ -202,8 +202,9 @@ export function MapaCamas({
             setBedTipo('General');
             setBedAreaId(areas?.[0]?.id);
             setBedDialogOpen(true);
-          }}>
-            <Plus className="h-4 w-4 mr-1" />Agregar Cama
+          }} className="text-xs px-2 py-1 sm:text-sm sm:px-4 sm:py-2">
+            <Plus className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
+            <span className="hidden sm:inline">Agregar Cama</span>
           </Button>
         </div>
         </div>
@@ -270,21 +271,21 @@ export function MapaCamas({
             <Dialog key={cama.id}>
               <DialogTrigger asChild>
                 <Card 
-                  className={`cursor-pointer hover:shadow-md transition-shadow border-2 ${getEstadoColor(cama)}`}
+                  className={`cursor-pointer hover:shadow-md transition-shadow border-2 w-full ${getEstadoColor(cama)}`}
                   onClick={() => setCamaSeleccionada(cama)}
                 >
-                  <CardContent className="p-4">
-                    <div className="flex items-center justify-between mb-2">
-                      <Bed className="h-6 w-6" />
+                  <CardContent className="p-2 sm:p-4">
+                    <div className="flex items-center justify-between mb-1 sm:mb-2">
+                      <Bed className="h-4 w-4 sm:h-6 sm:w-6" />
                       {getEstadoIcono(cama)}
                     </div>
-                    <p className="font-bold text-lg">{cama.numero}</p>
-                    <p className="text-xs opacity-75">{cama.areaId ? areaById[cama.areaId] ?? 'Área desconocida' : 'Sin área'}</p>
-                    <Badge variant="outline" className="mt-2 text-xs bg-white/50">
+                    <p className="font-bold text-sm sm:text-lg">{cama.numero}</p>
+                    <p className="text-xs opacity-75 truncate">{cama.areaId ? areaById[cama.areaId] ?? 'Área desconocida' : 'Sin área'}</p>
+                    <Badge variant="outline" className="mt-1 sm:mt-2 text-xs bg-white/50">
                       {cama.tipo}
                     </Badge>
                     {cama.estado === 'Ocupada' && paciente && (
-                      <div className="mt-2 pt-2 border-t border-current/20">
+                      <div className="mt-1 sm:mt-2 pt-1 sm:pt-2 border-t border-current/20">
                         <p className="text-xs font-medium truncate">
                           {paciente.apellido}, {paciente.nombre}
                         </p>