Ajustar placeholder FiO2: 0.21 en lugar de 21

src/sections/HistoriaClinica.tsx

@@ -26,7 +26,8 @@ import {
   MoreHorizontal,
   Edit,
   ClipboardList,
-  TrendingUp
+  TrendingUp,
+  TypeOutline
 } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -1417,7 +1418,7 @@ function SeccionAcidosBase({ ab, patientId, add, update, del }: {
       </Dialog>
       <Dialog open={editDialog} onOpenChange={setEditDialog}>
         <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
-          <DialogHeader><DialogTitle>Editar Gasometría Arterial</DialogTitle></DialogHeader>
+          <DialogHeader><DialogTitle>Editar Gasometría</DialogTitle></DialogHeader>
           <div className="space-y-4">
             <div className="grid grid-cols-2 gap-4">
               <div><Label>Fecha *</Label><Input type="date" value={fecha} onChange={e => setFecha(e.target.value)} /></div>
@@ -1431,7 +1432,7 @@ function SeccionAcidosBase({ ab, patientId, add, update, del }: {
               <div><Label>BE *</Label><Input type="number" step="0.1" value={be} onChange={e => setBe(e.target.value)} placeholder="0" /></div>
               <div><Label>SatO2 *</Label><Input type="number" value={sato2} onChange={e => setSato2(e.target.value)} placeholder="97" /></div>
               <div><Label>Lactato</Label><Input type="number" step="0.1" value={lactato} onChange={e => setLactato(e.target.value)} placeholder="1.0" /></div>
-              <div><Label>FiO2</Label><Input type="number" value={fio2} onChange={e => setFio2(e.target.value)} placeholder="21" /></div>
+              <div><Label>FiO2</Label><Input type="number" value={fio2} onChange={e => setFio2(e.target.value)} placeholder="0.21" /></div>
             </div>
             {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>
@@ -1448,6 +1449,8 @@ function SeccionAcidosBase({ ab, patientId, add, update, del }: {
                 <div className="flex items-start justify-between">
                   <div><p className="font-medium">{a.fecha} {a.hora}</p></div>
                   <div className="flex items-center gap-2">
+                    
+                    <Badge variant="outline" className="text-xs">{a.fio2 && a.po2 &&<span className="mr-1">PaFiO2: {Math.round(a.po2 / a.fio2 * 100) / 100}</span>}</Badge>
                     <Badge variant="outline" className="text-xs">{a.fio2 && <span className="mr-1">FiO₂:{a.fio2}</span>}</Badge>
                     <Badge className={getColorPh(a.ph)}>pH: {a.ph}</Badge>
                     <Button size="sm" variant="ghost" className="text-blue-600" onClick={() => loadEdit(a)}><Edit /></Button>
@@ -1462,7 +1465,7 @@ function SeccionAcidosBase({ ab, patientId, add, update, del }: {
                   <div className="bg-gray-50 p-2 rounded text-center"><p className="text-xs text-gray-500">BE</p><p className="font-bold">{a.be}</p></div>
                   <div className="bg-gray-50 p-2 rounded text-center"><p className="text-xs text-gray-500">SatO2</p><p className="font-bold">{a.sato2}%</p></div>
                   {a.lactato && <div className="bg-gray-50 p-2 rounded text-center"><p className="text-xs text-gray-500">Lactato</p><p className="font-bold">{a.lactato}</p></div>}
-                  {a.fio2 && a.po2 && <div className="bg-orange-100 p-2 rounded text-center"><p className="text-xs text-orange-600">PaFiO₂</p><p className="font-bold text-orange-700">{Math.round(a.po2 / a.fio2 * 100) / 100}</p></div>}
+                  
                   {a.fio2 && <div className="bg-gray-50 p-2 rounded text-center"><p className="text-xs text-gray-500">FiO2</p><p className="font-bold">{a.fio2}</p></div>}
                 </div>
                 {a.interpretacion && <div className="bg-teal-50 p-3 rounded-lg border border-teal-200"><p className="text-sm font-medium text-teal-800">Interpretación: {a.interpretacion}</p></div>}