Separar formulario de nuevo registro en un modal propio y cambiar etiqueta Categoría a Tipo de Determinación

src/sections/HistoriaClinica.tsx

@@ -1063,10 +1063,10 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
   };
 
   const [otrosDialog, setOtrosDialog] = useState(false);
+  const [nuevoOtroDialog, setNuevoOtroDialog] = useState(false);
   const [nuevaObsFecha, setNuevaObsFecha] = useState(getLocalToday());
   const [nuevaObsTexto, setNuevaObsTexto] = useState('');
   const [nuevaObsCategoria, setNuevaObsCategoria] = useState<string>('Otros');
-  const [mostrarNuevoFormOtros, setMostrarNuevoFormOtros] = useState<boolean>(false);
 
   const [editOtrosDialog, setEditOtrosDialog] = useState(false);
   const [editOtrosItem, setEditOtrosItem] = useState<{ id: string; fecha: string; hora: string; observaciones: string; categoria?: string; source: 'lab' | 'otros' } | null>(null);
@@ -1807,102 +1807,29 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
       <Dialog open={otrosDialog} onOpenChange={setOtrosDialog}>
         <DialogContent className="sm:max-w-2xl max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle>Otros / Observaciones de Laboratorio</DialogTitle>
+            <DialogTitle>Otras Determinaciones - Laboratorio</DialogTitle>
           </DialogHeader>
           <div className="space-y-4 my-2">
             
+            <div className="flex justify-between items-center pb-2 border-b">
+              <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">Registros Existentes</h4>
               {canEdit && (
-              <div className="flex justify-between items-center bg-gray-50 dark:bg-gray-800/60 p-3 rounded-lg border border-gray-200 dark:border-gray-700">
-                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                  ¿Desea agregar una nueva observación?
-                </span>
                 <Button 
                   size="sm" 
-                  variant={mostrarNuevoFormOtros ? "outline" : "default"}
+                  onClick={() => {
-                  onClick={() => setMostrarNuevoFormOtros(!mostrarNuevoFormOtros)}
-                >
-                  {mostrarNuevoFormOtros ? (
-                    <>
-                      <X className="h-4 w-4 mr-1.5" /> Ocultar Formulario
-                    </>
-                  ) : (
-                    <>
-                      <Plus className="h-4 w-4 mr-1.5" /> Nuevo Registro
-                    </>
-                  )}
-                </Button>
-              </div>
-            )}
-
-            {canEdit && mostrarNuevoFormOtros && (
-              <div className="bg-blue-50/40 dark:bg-gray-900 p-4 rounded-lg border border-blue-200 dark:border-gray-700 space-y-3 mb-4 animate-in fade-in duration-200">
-                <div className="flex justify-between items-center">
-                  <h4 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Agregar Nuevo Registro</h4>
-                  <Button size="icon" variant="ghost" className="h-6 w-6 text-gray-500 hover:text-gray-700" onClick={() => setMostrarNuevoFormOtros(false)}>
-                    <X className="h-4 w-4" />
-                  </Button>
-                </div>
-
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                  <div>
-                    <Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Categoría</Label>
-                    <Select value={nuevaObsCategoria} onValueChange={setNuevaObsCategoria}>
-                      <SelectTrigger className="h-9 bg-white dark:bg-gray-800">
-                        <SelectValue placeholder="Seleccionar categoría" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {CATEGORIAS_OTROS.map(cat => (
-                          <SelectItem key={cat} value={cat}>{cat}</SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div>
-                    <Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Fecha</Label>
-                    <Input type="date" className="h-9 bg-white dark:bg-gray-800" value={nuevaObsFecha} onChange={e => setNuevaObsFecha(e.target.value)} />
-                  </div>
-                </div>
-
-                <div>
-                  <Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Observaciones / Determinaciones</Label>
-                  <Textarea 
-                    placeholder="Ingrese los detalles, resultados, etc..." 
-                    value={nuevaObsTexto} 
-                    onChange={e => setNuevaObsTexto(e.target.value)} 
-                    className="min-h-[80px] bg-white dark:bg-gray-800"
-                  />
-                </div>
-
-                <div className="flex justify-end gap-2 pt-1">
-                  <Button variant="outline" size="sm" onClick={() => setMostrarNuevoFormOtros(false)}>
-                    Cancelar
-                  </Button>
-                  <Button size="sm" onClick={() => {
-                    if (addOtroLaboratorio && nuevaObsTexto.trim() !== '') {
-                      addOtroLaboratorio({
-                        pacienteId: patientId,
-                        internacionId,
-                        fecha: nuevaObsFecha,
-                        hora: new Date().toTimeString().slice(0, 5),
-                        observaciones: nuevaObsTexto,
-                        categoria: nuevaObsCategoria
-                      });
-                      setNuevaObsTexto('');
                     setNuevaObsFecha(getLocalToday());
+                    setNuevaObsTexto('');
                     setNuevaObsCategoria('Otros');
-                      setMostrarNuevoFormOtros(false);
+                    setNuevoOtroDialog(true);
-                      toast.success('Registro guardado correctamente');
+                  }}
-                    }
+                >
-                  }} disabled={!nuevaObsTexto.trim()}>
+                  <Plus className="h-4 w-4 mr-1.5" /> Nuevo Registro
-                    <Save className="h-4 w-4 mr-1.5" /> Guardar
                 </Button>
-                </div>
-              </div>
               )}
+            </div>
 
             <div>
-              <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 border-b pb-2">Registros</h4>
+              <div className="space-y-3 max-h-[50vh] overflow-y-auto pr-2">
-              <div className="space-y-3 max-h-[45vh] overflow-y-auto pr-2">
                 {[
                   ...labsConObservaciones.map(l => ({ id: l.id, fecha: l.fecha, hora: l.hora, observaciones: l.observaciones, categoria: 'Obs. de Lab', source: 'lab' as const })),
                   ...(otrosLaboratorios || []).filter(o => o.pacienteId === patientId).map(o => ({ id: o.id, fecha: o.fecha, hora: o.hora, observaciones: o.observaciones, categoria: o.categoria || 'Otros', source: 'otros' as const }))
@@ -1947,6 +1874,66 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
         </DialogContent>
       </Dialog>
 
+      <Dialog open={nuevoOtroDialog} onOpenChange={setNuevoOtroDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Nuevo Registro - Otras Determinaciones</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 my-2">
+            <div>
+              <Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Tipo de Determinación</Label>
+              <Select value={nuevaObsCategoria} onValueChange={setNuevaObsCategoria}>
+                <SelectTrigger className="h-9">
+                  <SelectValue placeholder="Seleccionar tipo" />
+                </SelectTrigger>
+                <SelectContent>
+                  {CATEGORIAS_OTROS.map(cat => (
+                    <SelectItem key={cat} value={cat}>{cat}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Fecha</Label>
+              <Input type="date" className="h-9" value={nuevaObsFecha} onChange={e => setNuevaObsFecha(e.target.value)} />
+            </div>
+            <div>
+              <Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Observaciones / Determinaciones</Label>
+              <Textarea 
+                placeholder="Ingrese los detalles, resultados, etc..." 
+                value={nuevaObsTexto} 
+                onChange={e => setNuevaObsTexto(e.target.value)} 
+                className="min-h-[100px]"
+              />
+            </div>
+          </div>
+          <div className="flex justify-end gap-2 mt-2">
+            <Button variant="outline" onClick={() => setNuevoOtroDialog(false)}>
+              Cancelar
+            </Button>
+            <Button onClick={() => {
+              if (addOtroLaboratorio && nuevaObsTexto.trim() !== '') {
+                addOtroLaboratorio({
+                  pacienteId: patientId,
+                  internacionId,
+                  fecha: nuevaObsFecha,
+                  hora: new Date().toTimeString().slice(0, 5),
+                  observaciones: nuevaObsTexto,
+                  categoria: nuevaObsCategoria
+                });
+                setNuevaObsTexto('');
+                setNuevaObsFecha(getLocalToday());
+                setNuevaObsCategoria('Otros');
+                setNuevoOtroDialog(false);
+                toast.success('Registro guardado correctamente');
+              }
+            }} disabled={!nuevaObsTexto.trim()}>
+              <Save className="h-4 w-4 mr-1.5" /> Guardar
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
       <Dialog open={editOtrosDialog} onOpenChange={setEditOtrosDialog}>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
@@ -1955,10 +1942,10 @@ function SeccionLaboratorios({ lab, otrosLaboratorios = [], patientId, internaci
           <div className="space-y-4 my-2">
             {editOtrosItem?.source === 'otros' && (
               <div>
-                <Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Categoría</Label>
+                <Label className="text-xs font-semibold text-gray-700 dark:text-gray-300">Tipo de Determinación</Label>
                 <Select value={editOtrosCategoria} onValueChange={setEditOtrosCategoria}>
                   <SelectTrigger className="h-9">
-                    <SelectValue placeholder="Seleccionar categoría" />
+                    <SelectValue placeholder="Seleccionar tipo" />
                   </SelectTrigger>
                   <SelectContent>
                     {CATEGORIAS_OTROS.map(cat => (