From dabdd9b1445c6a40661c00d8baf673fc40f4b510 Mon Sep 17 00:00:00 2001
From: Sergio Nicolas Lavaise <snlavaise@gmail.com>
Date: Fri, 17 Apr 2026 12:30:01 -0300
Subject: [PATCH] Fix: tabs con overflow-x-auto en TabsList para scroll
 responsive

---
 src/sections/HistoriaClinica.tsx | 86 ++++++++++++++++----------------
 1 file changed, 42 insertions(+), 44 deletions(-)

diff --git a/src/sections/HistoriaClinica.tsx b/src/sections/HistoriaClinica.tsx
index 506781e..1b9451f 100644
--- a/src/sections/HistoriaClinica.tsx
+++ b/src/sections/HistoriaClinica.tsx
@@ -469,49 +469,47 @@ export function HistoriaClinica({
 
 
 
-      <Tabs value={tabActivo} onValueChange={setTabActivo}>
-        <div className="overflow-x-auto -mx-4 px-4">
-          <TabsList className="flex w-max min-w-full gap-1 pb-2">
-            <TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-              <FileText className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">Evoluciones</span>
-              <span className="sm:hidden">Evol</span>
-              ({evoluciones.length})
-            </TabsTrigger>
-            <TabsTrigger value="laboratorios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-              <FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">Laboratorio</span>
-              <span className="sm:hidden">Lab</span>
-              ({laboratorios.length})
-            </TabsTrigger>
-            <TabsTrigger value="acidobase" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-              <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">EAB</span>
-              <span className="sm:hidden">EAB</span>
-              ({acidosBase.length})
-            </TabsTrigger>
-            <TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-              <Microscope className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">Cultivos</span>
-              <span className="sm:hidden">Cult</span>
-              ({cultivos.length})
-            </TabsTrigger>
-            <TabsTrigger value="atb" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-              <Pill className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">ATB</span>
-            </TabsTrigger>
-            <TabsTrigger value="estudios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-              <ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">Estudios</span>
-              <span className="sm:hidden">Est</span>
-              ({estudiosComplementarios.length})
-            </TabsTrigger>
-            <TabsTrigger value="interconsultas" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-              <Users className="h-3 w-3 sm:h-4 sm:w-4" />
-              <span className="hidden sm:inline">Interconsultas</span>
-            </TabsTrigger>
-          </TabsList>
-        </div>
+      <Tabs value={tabActivo} onValueChange={setTabActivo} className="w-full">
+        <TabsList className="flex w-full gap-1 overflow-x-auto pb-2">
+          <TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+            <FileText className="h-3 w-3 sm:h-4 sm:w-4" />
+            <span className="hidden sm:inline">Evoluciones</span>
+            <span className="sm:hidden">Evol</span>
+            ({evoluciones.length})
+          </TabsTrigger>
+          <TabsTrigger value="laboratorios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+            <FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
+            <span className="hidden sm:inline">Laboratorio</span>
+            <span className="sm:hidden">Lab</span>
+            ({laboratorios.length})
+          </TabsTrigger>
+          <TabsTrigger value="acidobase" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+            <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
+            <span className="hidden sm:inline">EAB</span>
+            <span className="sm:hidden">EAB</span>
+            ({acidosBase.length})
+          </TabsTrigger>
+          <TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+            <Microscope className="h-3 w-3 sm:h-4 sm:w-4" />
+            <span className="hidden sm:inline">Cultivos</span>
+            <span className="sm:hidden">Cult</span>
+            ({cultivos.length})
+          </TabsTrigger>
+          <TabsTrigger value="atb" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+            <Pill className="h-3 w-3 sm:h-4 sm:w-4" />
+            <span className="hidden sm:inline">ATB</span>
+          </TabsTrigger>
+          <TabsTrigger value="estudios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+            <ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" />
+            <span className="hidden sm:inline">Estudios</span>
+            <span className="sm:hidden">Est</span>
+            ({estudiosComplementarios.length})
+          </TabsTrigger>
+          <TabsTrigger value="interconsultas" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+            <Users className="h-3 w-3 sm:h-4 sm:w-4" />
+            <span className="hidden sm:inline">Interconsultas</span>
+          </TabsTrigger>
+        </TabsList>
 
         <TabsContent value="laboratorios" className="mt-4">
           <SeccionLaboratorios lab={laboratorios} patientId={paciente.id} add={onAgregarLaboratorio} update={onActualizarLaboratorio} del={onEliminarLaboratorio} addAcidoBase={onAgregarAcidoBase} />
@@ -2091,7 +2089,7 @@ function SeccionInterconsultas({ interconsultas, pacienteId, internacionId, add,
                 placeholder="Ej: Cardiología, Neurología, Infectología, etc."
               />
             </div>
-            
+
             <div>
               <Label>Respuesta</Label>
               <textarea