refactor: remove unused state variables and streamline Tabs layout in HistoriaClinica component

src/sections/HistoriaClinica.tsx

@@ -206,15 +206,7 @@ export function HistoriaClinica({
   onEditarIngreso,
 }: HistoriaClinicaProps) {
   const [tabActivo, setTabActivo] = useState('evoluciones');
-  const [detalleExpandido, setDetalleExpandido] = useState(false);
-  const [editIngresoDialog, setEditIngresoDialog] = useState(false);
-  const [editFechaIngreso, setEditFechaIngreso] = useState(internacion.fechaIngresoClinica);
-  const [editMotivoConsulta, setEditMotivoConsulta] = useState(internacion.motivoConsulta || '');
-  const [editDiagnostico, setEditDiagnostico] = useState(internacion.diagnosticoIngreso || '');
-  const [editEnfermedadActual, setEditEnfermedadActual] = useState(internacion.enfermedadActual || '');
-  const [editAntecedentes, setEditAntecedentes] = useState(internacion.antecedentesEnfermedadActual || '');
-  const [editMedico, setEditMedico] = useState(internacion.medicoIngresante || '');
-  const [editCamaId, setEditCamaId] = useState(internacion.camaId || '');
+
 
   const calcularEdad = (fechaNacimiento: string) => {
     const hoy = new Date();
@@ -250,6 +242,9 @@ export function HistoriaClinica({
         </div>
 
 
+
+      </div>
+
       <div className="flex gap-2 ml-auto sm:ml-0">
         <Button variant="secondary" onClick={onVolver}>
           <ArrowLeft className="h-4 w-4 mr-2" />
@@ -260,8 +255,6 @@ export function HistoriaClinica({
           Editar Ingreso
         </Button>
       </div>
-      </div>
-
 
       <Card>
         <CardContent className="p-4">
@@ -472,50 +465,51 @@ export function HistoriaClinica({
 
         </CardContent>
       </Card>
-
-      <Tabs className="w-full max-w-full min-w-0" value={tabActivo} onValueChange={setTabActivo}>
-        <ScrollArea className="w-full max-w-full">
-          <TabsList className="inline-flex w-max min-w-full justify-start gap-1 p-1">
-            <TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+      <div className="grid grid-cols-1 w-full">
+        <div className="w-full overflow-x-auto rounded-md border pb-2">
+          <Tabs className="w-full" value={tabActivo} onValueChange={setTabActivo}>
+            <ScrollArea className="w-full rounded-md border bg-background whitespace-nowrap">
+              <TabsList>
+                <TabsTrigger value="evoluciones">
                   <FileText className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">Evoluciones</span>
+                  <span>Evoluciones</span>
                   ({evoluciones.length})
                 </TabsTrigger>
 
-            <TabsTrigger value="indicaciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+                <TabsTrigger value="indicaciones">
                   <List className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">Indicaciones</span>
+                  <span>Indicaciones</span>
 
                 </TabsTrigger>
 
-            <TabsTrigger value="laboratorios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+                <TabsTrigger value="laboratorios">
                   <FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">Laboratorio</span>
+                  <span>Laboratorio</span>
                   ({laboratorios.length})
                 </TabsTrigger>
-            <TabsTrigger value="acidobase" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+                <TabsTrigger value="acidobase">
                   <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">EAB</span>
+                  <span>EAB</span>
                   ({acidosBase.length})
                 </TabsTrigger>
-            <TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+                <TabsTrigger value="cultivos">
                   <Microscope className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">Cultivos</span>
+                  <span>Cultivos</span>
                   ({cultivos.length})
                 </TabsTrigger>
-            <TabsTrigger value="atb" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+                <TabsTrigger value="atb">
                   <Pill className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">ATB</span>
+                  <span>ATB</span>
                   ({atb.length})
                 </TabsTrigger>
-            <TabsTrigger value="estudios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+                <TabsTrigger value="estudios">
                   <ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">Estudios</span>
+                  <span>Estudios</span>
                   ({estudiosComplementarios.length})
                 </TabsTrigger>
-            <TabsTrigger value="interconsultas" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+                <TabsTrigger value="interconsultas">
                   <Users className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">Interconsultas</span>
+                  <span>Interconsultas</span>
                   ({interconsultas.length})
                 </TabsTrigger>
               </TabsList>
@@ -572,6 +566,8 @@ export function HistoriaClinica({
             </TabsContent>
           </Tabs>
         </div>
+      </div>
+    </div>
   );
 }
 
@@ -1409,8 +1405,8 @@ function SeccionEvoluciones({ evos, internacionId, add, update, del }: {
                   <div><p className="font-medium">{e.fecha} {e.hora}</p><p className="text-sm text-gray-600">Médico: {e.medico}</p></div>
                   <div className="flex gap-1">
                     <Button size="sm" variant="outline" onClick={() => setExpanded(isExpanded ? null : e.id)}>{isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}</Button>
-                    <Button size="sm" variant="ghost" onClick={() => openEdit(e)}><Pencil /></Button>
-                    <Button size="sm" variant="ghost" className="text-red-600" onClick={() => del(e.id)}><Trash2 /></Button>
+                    <Button size="sm" variant="outline" onClick={() => openEdit(e)}><Pencil /></Button>
+                    <Button size="sm" variant="outline" className="text-red-600" onClick={() => del(e.id)}><Trash2 /></Button>
                   </div>
                 </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>}
@@ -1602,6 +1598,7 @@ function SeccionAcidosBase({ ab, patientId, add, update, del }: {
                   <TableHead>Lactato</TableHead>
                   <TableHead>FiO2</TableHead>
                   <TableHead>PaFiO2</TableHead>
+                  <TableHead>...</TableHead>
 
                 </TableRow>
               </TableHeader>
@@ -1617,6 +1614,23 @@ function SeccionAcidosBase({ ab, patientId, add, update, del }: {
                     <TableCell>{a.sato2}</TableCell>
                     <TableCell>{a.lactato}</TableCell>
                     <TableCell>{a.fio2}</TableCell>
+                    <TableCell>{(() => {
+                      if (a.fio2 == null || a.fio2 <= 0) return <span className="badge">—</span>;
+
+                      const pf = a.po2 / a.fio2;
+
+                      const color =
+                        pf > 300 ? "green" :
+                          pf > 200 ? "yellow" :
+                            pf > 100 ? "orange" :
+                              "red";
+
+                      return (
+                        <span className={`badge badge-${color}`}>
+                          {pf.toFixed(1)}
+                        </span>
+                      );
+                    })()}</TableCell>
 
 
                     <TableCell>