Fix: Botones con iconos en formulario y listado de Áreas

src/sections/MapaCamas.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Bed, CheckCircle2, Clock, Wrench, User, Plus, Trash, Edit2 } from 'lucide-react';
+import { Bed, CheckCircle2, Clock, Wrench, User, Plus, Trash, Edit2, Save, X } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -500,17 +500,21 @@ export function MapaCamas({
             </div>
             <div className="flex gap-2 justify-end">
               {editingAreaId && (
-                <Button variant="destructive" onClick={() => { if (confirm('Eliminar área?')) { onEliminarArea(editingAreaId); setAreaDialogOpen(false); } }}>
-                  Eliminar
+                <Button size="sm" variant="destructive" onClick={() => { if (confirm('Eliminar área?')) { onEliminarArea(editingAreaId); setAreaDialogOpen(false); } }}>
+                  <Trash className="h-4 w-4" />
                 </Button>
               )}
-              <Button onClick={() => setAreaDialogOpen(false)}>Cancelar</Button>
-              <Button onClick={() => {
+              <Button size="sm" variant="outline" onClick={() => setAreaDialogOpen(false)}>
+                <X className="h-4 w-4" />
+              </Button>
+              <Button size="sm" onClick={() => {
                 if (!areaNombre.trim()) return alert('Nombre requerido');
                 if (editingAreaId) onActualizarArea(editingAreaId, { nombre: areaNombre });
                 else onAgregarArea({ nombre: areaNombre });
                 setAreaDialogOpen(false);
-              }}>Guardar</Button>
+              }}>
+                <Save className="h-4 w-4" />
+              </Button>
             </div>
             <div>
               <p className="text-sm font-medium">Áreas existentes</p>
@@ -518,12 +522,12 @@ export function MapaCamas({
                 {areas.map(a => (
                   <div key={a.id} className="flex items-center justify-between">
                     <div>{a.nombre}</div>
-                    <div className="flex gap-2">
-                      <Button variant="ghost" onClick={() => { setEditingAreaId(a.id); setAreaNombre(a.nombre); }}>
-                        Editar
+                    <div className="flex gap-1">
+                      <Button size="sm" variant="ghost" onClick={() => { setEditingAreaId(a.id); setAreaNombre(a.nombre); }}>
+                        <Edit2 className="h-4 w-4" />
                       </Button>
-                      <Button variant="destructive" onClick={() => { if (confirm('Eliminar área?')) onEliminarArea(a.id); }}>
-                        Eliminar
+                      <Button size="sm" variant="ghost" className="text-red-600" onClick={() => { if (confirm('Eliminar área?')) onEliminarArea(a.id); }}>
+                        <Trash className="h-4 w-4" />
                       </Button>
                     </div>
                   </div>