From 581c8dca6fe5fd60bf08f0f49eacbaa92e2ddfd4 Mon Sep 17 00:00:00 2001
From: Santiago Lavaise <snlavaise@github.com>
Date: Wed, 15 Apr 2026 01:13:44 -0300
Subject: [PATCH] Agregar icons X a botones cancelar, dark mode en todos los
 componentes

---
 src/sections/AcidoBase.tsx       |  6 +++---
 src/sections/Cultivos.tsx        |  8 ++++----
 src/sections/Dashboard.tsx       |  6 +++---
 src/sections/EditIngreso.tsx     |  6 +++---
 src/sections/Evoluciones.tsx     |  6 +++---
 src/sections/HistoriaClinica.tsx | 24 ++++++++++++------------
 src/sections/Internaciones.tsx   |  8 ++++----
 src/sections/MapaCamas.tsx       | 11 +++++------
 src/sections/NuevoIngreso.tsx    |  6 +++---
 src/sections/Pacientes.tsx       |  8 ++++----
 10 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/src/sections/AcidoBase.tsx b/src/sections/AcidoBase.tsx
index a098e5f..6ae8a22 100644
--- a/src/sections/AcidoBase.tsx
+++ b/src/sections/AcidoBase.tsx
@@ -155,12 +155,12 @@ export function AcidoBaseSection({
   };
 
   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">Estados Ácido-Base</h1>
-          <p className="text-gray-500">Gasometrías y análisis de equilibrio ácido-base</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Estados Ácido-Base</h1>
+          <p className="text-gray-500 dark:text-gray-400">Gasometrías y análisis de equilibrio ácido-base</p>
         </div>
         <Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
           <DialogTrigger asChild>
diff --git a/src/sections/Cultivos.tsx b/src/sections/Cultivos.tsx
index 6b05603..62ac58c 100644
--- a/src/sections/Cultivos.tsx
+++ b/src/sections/Cultivos.tsx
@@ -176,11 +176,11 @@ export function Cultivos({
   }).sort((a, b) => new Date(b.fechaToma).getTime() - new Date(a.fechaToma).getTime());
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 dark:text-white">
       <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">Cultivos</h1>
-          <p className="text-gray-500">Gestión de cultivos microbiológicos y antibiogramas</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Cultivos</h1>
+          <p className="text-gray-500 dark:text-gray-400">Gestión de cultivos microbiológicos y antibiogramas</p>
         </div>
         <Dialog open={dialogoNuevoAbierto} onOpenChange={setDialogoNuevoAbierto}>
           <DialogTrigger asChild>
@@ -268,7 +268,7 @@ export function Cultivos({
                 <textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={observaciones} onChange={(e) => setObservaciones(e.target.value)} />
               </div>
               <div className="flex justify-end gap-2">
-                <Button variant="outline" onClick={() => setDialogoNuevoAbierto(false)}>Cancelar</Button>
+                <Button variant="outline" onClick={() => setDialogoNuevoAbierto(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button>
                 <Button onClick={handleAgregar} disabled={!pacienteSeleccionado || !fechaToma || !tipoMuestra}>
                   <Plus className="h-4 w-4 mr-2" />
                   Guardar
diff --git a/src/sections/Dashboard.tsx b/src/sections/Dashboard.tsx
index b9b37b0..71971e0 100644
--- a/src/sections/Dashboard.tsx
+++ b/src/sections/Dashboard.tsx
@@ -48,12 +48,12 @@ export function Dashboard({
     .slice(0, 5);
 
   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">Dashboard</h1>
-          <p className="text-gray-500">Resumen del servicio - Clinica Medica</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
+          <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">
diff --git a/src/sections/EditIngreso.tsx b/src/sections/EditIngreso.tsx
index caf2c7b..6f07afa 100644
--- a/src/sections/EditIngreso.tsx
+++ b/src/sections/EditIngreso.tsx
@@ -70,18 +70,18 @@ export function EditIngreso({
   };
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 dark:text-white">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
           <Button variant="ghost" size="icon" onClick={onVolver}>
             <ArrowLeft className="h-5 w-5" />
           </Button>
           <div>
-            <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
               <User className="h-6 w-6 text-blue-600" />
               Editar Ingreso
             </h1>
-            <p className="text-gray-500">Modificar datos de internación</p>
+            <p className="text-gray-500 dark:text-gray-400">Modificar datos de internación</p>
           </div>
         </div>
         <div className="flex gap-2">
diff --git a/src/sections/Evoluciones.tsx b/src/sections/Evoluciones.tsx
index 7720394..256b776 100644
--- a/src/sections/Evoluciones.tsx
+++ b/src/sections/Evoluciones.tsx
@@ -184,11 +184,11 @@ export function Evoluciones({
   };
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 dark:text-white">
       <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">Evoluciones Diarias</h1>
-          <p className="text-gray-500">Registro de evoluciones y signos vitales</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Evoluciones Diarias</h1>
+          <p className="text-gray-500 dark:text-gray-400">Registro de evoluciones y signos vitales</p>
         </div>
         <Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
           <DialogTrigger asChild>
diff --git a/src/sections/HistoriaClinica.tsx b/src/sections/HistoriaClinica.tsx
index ed204d6..a02f934 100644
--- a/src/sections/HistoriaClinica.tsx
+++ b/src/sections/HistoriaClinica.tsx
@@ -207,7 +207,7 @@ export function HistoriaClinica({
   };
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 dark:text-white">
       <div>
         <div className="flex items-center gap-4 mb-4">
 
@@ -282,7 +282,7 @@ export function HistoriaClinica({
             </div>
           </div>
           <div className="flex justify-end gap-2 mt-4">
-            <Button variant="outline" onClick={() => setEditIngresoDialog(false)}>Cancelar</Button>
+            <Button variant="outline" onClick={() => setEditIngresoDialog(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button>
             <Button onClick={handleGuardarEdicion} disabled={!editFechaIngreso || !editDiagnostico || !editMedico}><Save className="h-4 w-4 mr-2" />Guardar</Button>
           </div>
         </DialogContent>
@@ -640,7 +640,7 @@ function SeccionLaboratorios({ lab, patientId, add, update, del }: {
           <div className="space-y-4">
             <div><Label>Fecha</Label><Input type="date" value={fecha} onChange={e => setFecha(e.target.value)} /></div>
 
-            <div className="bg-purple-50 p-3 rounded-lg border border-purple-200">
+            <div className="bg-purple-50 dark:bg-purple-900/30 p-3 rounded-lg border border-purple-200 dark:border-purple-700">
               <p className="text-sm font-bold text-purple-800 mb-3">Hemograma</p>
               <div className="grid grid-cols-4 gap-2">
                 <div><Label className="text-xs">Hto</Label><Input placeholder="%" value={hto} onChange={e => setHto(e.target.value)} /></div>
@@ -650,7 +650,7 @@ function SeccionLaboratorios({ lab, patientId, add, update, del }: {
               </div>
             </div>
 
-            <div className="bg-green-50 p-3 rounded-lg border border-green-200">
+            <div className="bg-green-50 dark:bg-green-900/30 p-3 rounded-lg border border-green-200 dark:border-green-700">
               <p className="text-sm font-bold text-green-800 mb-3">Química</p>
               <div className="grid grid-cols-3 gap-2">
                 <div><Label className="text-xs">Gluc</Label><Input placeholder="mg/dL" value={gluc} onChange={e => setGluc(e.target.value)} /></div>
@@ -659,7 +659,7 @@ function SeccionLaboratorios({ lab, patientId, add, update, del }: {
               </div>
             </div>
 
-            <div className="bg-green-50 p-3 rounded-lg border border-green-200">
+            <div className="bg-green-50 dark:bg-green-900/30 p-3 rounded-lg border border-green-200 dark:border-green-700">
               <p className="text-sm font-bold text-green-800 mb-3">Ionograma</p>
               <div className="grid grid-cols-3 gap-2">
                 <div><Label className="text-xs">Na+</Label><Input placeholder="mEq/L" value={na} onChange={e => setNa(e.target.value)} /></div>
@@ -668,7 +668,7 @@ function SeccionLaboratorios({ lab, patientId, add, update, del }: {
               </div>
             </div>
 
-            <div className="bg-green-50 p-3 rounded-lg border border-green-200">
+            <div className="bg-green-50 dark:bg-green-900/30 p-3 rounded-lg border border-green-200 dark:border-green-700">
               <p className="text-sm font-bold text-green-800 mb-3">Hepatograma</p>
               <div className="grid grid-cols-4 gap-2">
                 <div><Label className="text-xs">Bt</Label><Input placeholder="mg/dL" value={bt} onChange={e => setBt(e.target.value)} /></div>
@@ -678,7 +678,7 @@ function SeccionLaboratorios({ lab, patientId, add, update, del }: {
               </div>
             </div>
 
-            <div className="bg-cyan-50 p-3 rounded-lg border border-cyan-200">
+            <div className="bg-cyan-50 dark:bg-cyan-900/30 p-3 rounded-lg border border-cyan-200 dark:border-cyan-700">
               <p className="text-sm font-bold text-cyan-800 mb-3">Coagulograma</p>
               <div className="grid grid-cols-3 gap-2">
                 <div><Label className="text-xs">TP</Label><Input placeholder="seg" value={tp} onChange={e => setTp(e.target.value)} /></div>
@@ -889,7 +889,7 @@ function SeccionEvoluciones({ evos, internacionId, add, update, del }: {
                 <div><Label className="flex items-center gap-1"><Droplets className="h-4 w-4" />SatO2</Label><Input type="number" value={saturacionO2} onChange={e => setSaturacionO2(e.target.value)} placeholder="98" /></div>
               </div>
             </div>
-            <div className="bg-green-50 p-3 rounded-lg border border-green-200">
+            <div className="bg-green-50 dark:bg-green-900/30 p-3 rounded-lg border border-green-200 dark:border-green-700">
               <p className="text-sm font-bold text-green-800 mb-3 flex items-center gap-2"><FileText className="h-4 w-4" />Examen Físico</p>
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div><Label>SNC</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={snc} onChange={e => setSnc(e.target.value)} placeholder="Estado neurológico" /></div>
@@ -927,7 +927,7 @@ function SeccionEvoluciones({ evos, internacionId, add, update, del }: {
                 </div>
                 {svText && <div className="bg-blue-50 p-2 rounded-lg"><p className="text-sm font-medium text-blue-800 flex items-center gap-2"><Activity className="h-4 w-4" />Signos Vitales: {svText}</p></div>}
                 {isExpanded && <>
-                  {e.examenFisico && <div className="bg-green-50 p-3 rounded-lg border border-green-200"><p className="text-sm font-medium text-green-800 mb-2">Examen Físico:</p><div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs">
+                  {e.examenFisico && <div className="bg-green-50 dark:bg-green-900/30 p-3 rounded-lg border border-green-200 dark:border-green-700"><p className="text-sm font-medium text-green-800 mb-2">Examen Físico:</p><div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs">
                     {e.examenFisico.SNC && <div><span className="font-medium">SNC:</span> {e.examenFisico.SNC}</div>}
                     {e.examenFisico.Cardiovascular && <div><span className="font-medium">CV:</span> {e.examenFisico.Cardiovascular}</div>}
                     {e.examenFisico.Respiratorio && <div><span className="font-medium">Resp:</span> {e.examenFisico.Respiratorio}</div>}
@@ -1034,7 +1034,7 @@ function SeccionAcidosBase({ ab, patientId, add, del }: {
             {ph && pco2 && hco3 && <div className="bg-blue-50 p-3 rounded-lg border border-blue-200"><p className="text-sm font-medium text-blue-800 flex items-center gap-2"><Activity className="h-4 w-4" />Interpretación automática: {interpretarGasometria()}</p></div>}
             <div><Label>Interpretación / Comentarios</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[80px]" value={interpretacion} onChange={e => setInterpretacion(e.target.value)} placeholder="Interpretación clínica..." /></div>
           </div>
-          <div className="flex justify-end gap-2 mt-4"><Button variant="outline" onClick={() => setDialog(false)}>Cancelar</Button><Button onClick={handle} disabled={!ph || !pco2 || !po2 || !hco3 || !be || !sato2}><Plus className="h-4 w-4 mr-2" />Guardar Gasometría</Button></div>
+          <div className="flex justify-end gap-2 mt-4"><Button variant="outline" onClick={() => setDialog(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button><Button onClick={handle} disabled={!ph || !pco2 || !po2 || !hco3 || !be || !sato2}><Plus className="h-4 w-4 mr-2" />Guardar Gasometría</Button></div>
         </DialogContent>
       </Dialog>
       {abFiltered.length === 0 ? <div className="text-center py-8 text-gray-400"><Activity className="h-12 w-12 mx-auto mb-2 opacity-50" /><p>No hay gasometrías</p></div> :
@@ -1216,7 +1216,7 @@ const resetRes = () => {
             </div>
             <div><Label>Observaciones</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={observaciones} onChange={e => setObservaciones(e.target.value)} /></div>
           </div>
-          <div className="flex justify-end gap-2 mt-4"><Button variant="outline" onClick={() => setDialog(false)}>Cancelar</Button><Button onClick={handle}><Plus className="h-4 w-4 mr-2" />Guardar</Button></div>
+          <div className="flex justify-end gap-2 mt-4"><Button variant="outline" onClick={() => setDialog(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button><Button onClick={handle}><Plus className="h-4 w-4 mr-2" />Guardar</Button></div>
         </DialogContent>
       </Dialog>
 
@@ -1326,7 +1326,7 @@ const resetRes = () => {
                 </div>
               )}
               {c.estado === 'Negativo' && (
-                <div className="bg-green-50 p-3 rounded-lg border border-green-200">
+                <div className="bg-green-50 dark:bg-green-900/30 p-3 rounded-lg border border-green-200 dark:border-green-700">
                   <p className="text-sm font-medium text-green-800 flex items-center gap-2"><CheckCircle2 className="h-4 w-4" />Sin crecimiento de microorganismos</p>
                   {c.fechaResultado && <p className="text-xs text-green-600 mt-1">Resultado: {c.fechaResultado}</p>}
                 </div>
diff --git a/src/sections/Internaciones.tsx b/src/sections/Internaciones.tsx
index 3186c8c..5346664 100644
--- a/src/sections/Internaciones.tsx
+++ b/src/sections/Internaciones.tsx
@@ -136,12 +136,12 @@ export function Internaciones({
   // Ver Historia Clínica (navegar a página)
 
   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">Internaciones</h1>
-          <p className="text-gray-500">Gestión de internaciones en sala</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Internaciones</h1>
+          <p className="text-gray-500 dark:text-gray-400">Gestión de internaciones en sala</p>
         </div>
         <Dialog open={dialogoNuevaAbierto} onOpenChange={setDialogoNuevaAbierto}>
           <DialogTrigger asChild>
@@ -307,7 +307,7 @@ export function Internaciones({
           
           return (
             <Card key={internacion.id} className="hover:shadow-md transition-shadow">
-              <CardContent className="p-4">
+<CardContent className="p-4 dark:bg-gray-800">
                 <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 ${
diff --git a/src/sections/MapaCamas.tsx b/src/sections/MapaCamas.tsx
index cfac9f6..eda80fd 100644
--- a/src/sections/MapaCamas.tsx
+++ b/src/sections/MapaCamas.tsx
@@ -173,13 +173,12 @@ export function MapaCamas({
     return !internacionActiva;
   });
 
-  return (
-    <div className="space-y-6">
-      {/* Header */}
+return (
+    <div className="space-y-6 dark:text-white">
       <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">Mapa de Camas</h1>
-          <p className="text-gray-500">Gestión de camas del servicio</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Mapa de Camas</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">
           <Badge variant="outline" className="bg-green-50 text-green-700">
@@ -569,7 +568,7 @@ export function MapaCamas({
                   Eliminar
                 </Button>
               )}
-              <Button onClick={() => setBedDialogOpen(false)}>Cancelar</Button>
+              <Button onClick={() => setBedDialogOpen(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button>
               <Button onClick={() => {
                 if (!bedNumero.trim()) return alert('Número requerido');
                 if (editingBed) {
diff --git a/src/sections/NuevoIngreso.tsx b/src/sections/NuevoIngreso.tsx
index 27c3961..0e7747e 100644
--- a/src/sections/NuevoIngreso.tsx
+++ b/src/sections/NuevoIngreso.tsx
@@ -77,18 +77,18 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
   const selectedPaciente = pacientes.find(p => p.id === pacienteSeleccionado);
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 dark:text-white">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
           <Button variant="ghost" size="icon" onClick={onVolver}>
             <ArrowLeft className="h-5 w-5" />
           </Button>
           <div>
-            <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
               <User className="h-6 w-6 text-blue-600" />
               Nuevo Ingreso
             </h1>
-            <p className="text-gray-500">Formulario de internación</p>
+            <p className="text-gray-500 dark:text-gray-400">Formulario de internación</p>
           </div>
         </div>
         <div className="flex gap-2">
diff --git a/src/sections/Pacientes.tsx b/src/sections/Pacientes.tsx
index 06a15ad..5a89423 100644
--- a/src/sections/Pacientes.tsx
+++ b/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">