Fix: add dark mode colors to Dashboard and MapaCamas badges

src/sections/Dashboard.tsx

@@ -56,7 +56,7 @@ export function Dashboard({
           <p className="text-gray-500 dark:text-gray-400">Resumen del servicio - Clinica Medica</p>
         </div>
         <div className="flex items-center gap-2">
-          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
+          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 dark:bg-green-900 dark:text-green-300 dark:border-green-700">
             <CheckCircle2 className="h-3 w-3 mr-1" />
             Sistema Operativo
           </Badge>
@@ -213,7 +213,7 @@ export function Dashboard({
                           Ingreso: {internacion.fechaIngresoClinica ? formatDateDDMMYYYY(internacion.fechaIngresoClinica) : 'N/A'}
                         </p>
                       </div>
-                      <Badge variant="outline" className="bg-purple-50 text-purple-700">
+                      <Badge variant="outline" className="bg-purple-50 text-purple-700 dark:bg-purple-900 dark:text-purple-300 dark:border-purple-700">
                         Activa
                       </Badge>
                     </div>
@@ -301,7 +301,7 @@ export function Dashboard({
                           {cultivo.tipoMuestra} - {cultivo.fechaToma}
                         </p>
                       </div>
-                      <Badge className="bg-amber-100 text-amber-800">
+                      <Badge className="bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300">
                         <Clock className="h-3 w-3 mr-1" />
                         Pendiente
                       </Badge>

src/sections/HistoriaClinica.tsx

@@ -251,11 +251,11 @@ export function HistoriaClinica({
 
 
 
-        <Button variant="outline" onClick={onVolver}>
+        <Button variant="secondary" onClick={onVolver}>
           <ArrowLeft className="h-4 w-4 mr-2" />
           Volver
         </Button>
-        <Button variant="outline" onClick={onEditarIngreso}>
+        <Button onClick={onEditarIngreso}>
           <Pencil className="h-4 w-4 mr-2" />
           Editar Ingreso
         </Button>

src/sections/Internaciones.tsx

@@ -307,7 +307,7 @@ export function Internaciones({
 
           return (
             <Card key={internacion.id} className="hover:shadow-md transition-shadow">
-              <CardContent className="p-4 dark:bg-gray-800">
+              <CardContent className="p-4">
                 <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
                   <div className="flex items-start gap-4">
                     <div className={`h-12 w-12 rounded-full flex items-center justify-center flex-shrink-0 ${internacion.activa ? 'bg-purple-100' : 'bg-gray-100'

src/sections/MapaCamas.tsx

@@ -76,20 +76,20 @@ export function MapaCamas({
 
   const getEstadoColor = (cama: Cama) => {
     if (cama.estado === 'Disponible') {
-      return 'bg-green-100 border-green-300 text-green-800';
+      return 'bg-green-100 border-green-300 text-green-800 dark:bg-green-900 dark:border-green-700 dark:text-green-300';
     }
     if (cama.estado === 'Reservada') {
-      return 'bg-orange-100 border-orange-300 text-orange-800';
+      return 'bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900 dark:border-orange-700 dark:text-orange-300';
     }
     if (cama.estado === 'Ocupada') {
       // Tipos de aislamiento
       const aislamientos = ['Aislamiento KPC', 'Aislamiento COVID', 'Aislamiento Clostridium', 'Aislamiento Neutropenico'];
       if (aislamientos.includes(cama.tipo)) {
-        return 'bg-red-100 border-red-300 text-red-800';
+        return 'bg-red-100 border-red-300 text-red-800 dark:bg-red-900 dark:border-red-700 dark:text-red-300';
       }
-      return 'bg-blue-100 border-blue-300 text-blue-800';
+      return 'bg-blue-100 border-blue-300 text-blue-800 dark:bg-blue-900 dark:border-blue-700 dark:text-blue-300';
     }
-    return 'bg-amber-100 border-amber-300 text-amber-800';
+    return 'bg-amber-100 border-amber-300 text-amber-800 dark:bg-amber-900 dark:border-amber-700 dark:text-amber-300';
   };
 
   const getEstadoIcono = (cama: Cama) => {
@@ -181,10 +181,10 @@ export function MapaCamas({
           <p className="text-gray-500 dark:text-gray-400">Gestión de camas del servicio</p>
         </div>
         <div className="flex items-center gap-2">
-          <Badge variant="outline" className="bg-green-50 text-green-700">
+          <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').length} Disponibles
           </Badge>
-          <Badge variant="outline" className="bg-red-50 text-red-700">
+          <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').length} Ocupadas
           </Badge>
           <div className="ml-4 flex items-center gap-2 flex-wrap sm:flex-nowrap">
@@ -280,7 +280,7 @@ export function MapaCamas({
                     </div>
                     <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">
+                    <Badge variant="outline" className="mt-1 sm:mt-2 text-xs bg-white/50 dark:bg-gray-800 dark:text-gray-300">
                       {cama.tipo}
                     </Badge>
                     {cama.estado === 'Ocupada' && paciente && (

src/sections/Pacientes.tsx

@@ -330,7 +330,7 @@ export function Pacientes({
       <div className="grid grid-cols-1 gap-4">
         {pacientesFiltrados.map((paciente) => (
           <Card key={paciente.id} className="hover:shadow-md transition-shadow">
-            <CardContent className="p-4 dark:bg-gray-800">
+            <CardContent className="p-4">
               <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
                 <div className="flex items-start gap-4">
                   <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">