Agregar icons X a botones cancelar, dark mode en todos los componentes

src/sections/Pacientes.tsx

@@ -138,12 +138,12 @@ export function Pacientes({
   };
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 dark:text-white">
       {/* Header */}
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900">Pacientes</h1>
-          <p className="text-gray-500">Gestión de pacientes del hospital</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Pacientes</h1>
+          <p className="text-gray-500 dark:text-gray-400">Gestión de pacientes del hospital</p>
         </div>
         <Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
           <DialogTrigger asChild>
@@ -337,7 +337,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">
+<CardContent className="p-4 dark:bg-gray-800">
               <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">