diff --git a/src/sections/MapaCamas.tsx b/src/sections/MapaCamas.tsx
index 63d4ae3..3b5d4a7 100644
--- a/src/sections/MapaCamas.tsx
+++ b/src/sections/MapaCamas.tsx
@@ -187,14 +187,17 @@ export function MapaCamas({
           </h1>
           <p className="text-gray-500 dark:text-gray-400">Gestión de camas del servicio</p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-wrap">
           <Badge variant="outline" className="bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-300 dark:border-green-700">
             {camas.filter(c => c.estado === 'Disponible' && !isCamaFueraDeGrupo(c, grupos)).length} Disponibles
           </Badge>
           <Badge variant="outline" className="bg-red-50 text-red-700 dark:bg-red-900 dark:text-red-300 dark:border-red-700">
             {camas.filter(c => c.estado === 'Ocupada' && !isCamaFueraDeGrupo(c, grupos)).length} Ocupadas
           </Badge>
-          <div className="ml-4 flex items-center gap-2 flex-wrap sm:flex-nowrap">
+          <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/40 dark:text-amber-300 dark:border-amber-800">
+            {camas.filter(c => isCamaFueraDeGrupo(c)).length} Fuera de Área
+          </Badge>
+          <div className="ml-0 sm:ml-4 flex items-center gap-2 flex-wrap sm:flex-nowrap">
             <Button variant="outline" onClick={() => {
               setEditingGrupoId(null);
               setGrupoNombre('');