diff --git a/src/sections/HistoriaClinica.tsx b/src/sections/HistoriaClinica.tsx
index 8d30c0a..6ac2993 100644
--- a/src/sections/HistoriaClinica.tsx
+++ b/src/sections/HistoriaClinica.tsx
@@ -1615,18 +1615,18 @@ function SeccionAcidosBase({ ab, patientId, add, update, del }: {
                     <TableCell>{a.lactato}</TableCell>
                     <TableCell>{a.fio2}</TableCell>
                     <TableCell>{(() => {
-                      if (a.fio2 == null || a.fio2 <= 0) return <span className="badge">—</span>;
+                      if (a.fio2 == null || a.fio2 <= 0) return <span className="text-gray-400">—</span>;
 
                       const pf = a.po2 / a.fio2;
 
-                      const color =
-                        pf > 300 ? "green" :
-                          pf > 200 ? "yellow" :
-                            pf > 100 ? "orange" :
-                              "red";
+                      const badgeClass =
+                        pf > 300 ? "bg-green-500 text-white hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-500" :
+                        pf > 200 ? "bg-yellow-500 text-white hover:bg-yellow-600 dark:bg-yellow-600 dark:hover:bg-yellow-500" :
+                        pf > 100 ? "bg-orange-500 text-white hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-500" :
+                        "bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-500";
 
                       return (
-                        <Badge className={`bg-${color}-500 text-white hover:bg-${color}-600 dark:hover:bg-${color}-700`}>
+                        <Badge className={badgeClass}>
                           {pf.toFixed(1)}
                         </Badge>
                       );