Agregar boton Ver Otros y modal de observaciones en la pestaña laboratorios

src/sections/HistoriaClinica.tsx

@@ -951,6 +951,7 @@ function SeccionLaboratorios({ lab, patientId, internacionId, add, update, del,
 }) {
   const [dialog, setDialog] = useState(false);
   const [obsDialog, setObsDialog] = useState(false);
+  const [otrosDialog, setOtrosDialog] = useState(false);
   const [evolDialog, setEvolDialog] = useState(false);
   const [edit, setEdit] = useState<Laboratorio | null>(null);
   const [obsLab, setObsLab] = useState<Laboratorio | null>(null);
@@ -1444,6 +1445,14 @@ function SeccionLaboratorios({ lab, patientId, internacionId, add, update, del,
     return labSortAsc ? -diff : diff;
   });
 
+  const labsConObservaciones = lab
+    .filter(l => l.pacienteId === patientId && l.observaciones && l.observaciones.trim() !== '')
+    .sort((a, b) => {
+      const dateA = new Date(a.fecha + 'T' + (a.hora || '00:00')).getTime();
+      const dateB = new Date(b.fecha + 'T' + (b.hora || '00:00')).getTime();
+      return dateB - dateA;
+    });
+
   return (
     <div className="space-y-4 w-full max-w-full min-w-0">
       <div className="flex justify-between">
@@ -1451,6 +1460,7 @@ function SeccionLaboratorios({ lab, patientId, internacionId, add, update, del,
           {canEdit && <Button variant="outline" onClick={() => { reset(); setDialog(true); }}><Plus className="h-4 w-4 mr-2" />Nuevo</Button>}
           <Button variant="outline" onClick={() => { setParametroEvolucion('Hematocrito'); setEvolDialog(true); }}><TrendingUp className="h-4 w-4 mr-2" />Evolución</Button>
           <Button variant="outline" onClick={() => { setImportFecha(new Date().toISOString().split('T')[0]); setImportHora(new Date().toTimeString().slice(0, 5)); setImportTexto(''); setImportResultados([]); setImportObservaciones(''); setImportDialog(true); }}><FileText className="h-4 w-4 mr-2" />Importar</Button>
+          <Button variant="outline" onClick={() => setOtrosDialog(true)}><Eye className="h-4 w-4 mr-2" />Ver Otros</Button>
         </div>
       </div>
       <Dialog open={dialog} onOpenChange={setDialog}>
@@ -1529,6 +1539,32 @@ function SeccionLaboratorios({ lab, patientId, internacionId, add, update, del,
         </DialogContent>
       </Dialog>
 
+      <Dialog open={otrosDialog} onOpenChange={setOtrosDialog}>
+        <DialogContent className="sm:max-w-xl max-h-[85vh] overflow-y-auto" aria-describedby={undefined}>
+          <DialogHeader>
+            <DialogTitle>Otros / Observaciones de Laboratorio</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 my-2">
+            {labsConObservaciones.length === 0 ? (
+              <p className="text-sm text-gray-500 text-center py-6">No hay observaciones registradas.</p>
+            ) : (
+              labsConObservaciones.map(l => (
+                <div key={l.id} className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 space-y-2">
+                  <div className="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400 font-medium">
+                    <span>{formatDateDDMMYYYY(l.fecha)} {l.hora || ''}</span>
+                    <Badge variant="secondary" className="text-[10px] px-1.5 py-0.5">Obs</Badge>
+                  </div>
+                  <p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap font-sans">{l.observaciones}</p>
+                </div>
+              ))
+            )}
+          </div>
+          <div className="flex justify-end gap-2 mt-4">
+            <Button onClick={() => setOtrosDialog(false)}>Cerrar</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
       <Dialog open={evolDialog} onOpenChange={setEvolDialog}>
         <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
           <DialogHeader>