From 857ce09797ff9d3643b043a13e7007de23c063ed Mon Sep 17 00:00:00 2001
From: snlavaise <snlavaise@gmail.com>
Date: Tue, 11 Aug 2026 23:20:46 +0000
Subject: [PATCH] =?UTF-8?q?Agregar=20indicador/badge=20amarillo=20con=20el?=
 =?UTF-8?q?=20recuento=20de=20camas=20Fuera=20de=20=C3=81rea?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/sections/MapaCamas.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

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('');