fix(ui): reemplaza panel-debajo-del-listado por DetailPopup de tamaño fijo

El detalle de un item de listado (actividad, departamento, usuario, proyecto nuevo,
catalogo) ya no se apila debajo ni al costado del listado: ahora abre en un popup que
cubre la ventana, deja el listado inactivo detras, nunca se cierra con clic afuera (solo
con el boton Cerrar o una accion explicita del formulario) y mantiene un alto FIJO por
instancia para que cambiar de pestaña interna (Info/Subtareas/Dependencias/Comentarios/
Documentos) no reajuste su tamaño.

De paso corrige un bug real de stacking: ContentDialog no usaba portal a document.body,
así que un dialogo de confirmacion abierto desde dentro de un DetailPopup quedaba oculto
detras de este. Ahora ambos son portales con una jerarquia de z-index explicita
(Flyout 100 < DetailPopup 200 < ContentDialog 250 < Toast 300).

En el detalle de actividad, Subtareas y Dependencias pasan de estar apiladas dentro de la
pestaña Info a ser cada una su propia pestaña.

Regla documentada en project-md-templates/UI-UX-WINDOWS.md (componente DetailPopup) para
que aplique a futuros proyectos de escritorio Windows del grupo.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/components/ContentDialog.jsx

@@ -1,3 +1,4 @@
+import { createPortal } from 'react-dom';
 import { useUi } from '../context/ui-context.jsx';
 import { Button } from './Button.jsx';
 
@@ -17,8 +18,11 @@ export function ContentDialogHost() {
     if (!action.keepOpen) closeDialog();
   }
 
-  return (
-    <div className="dialog-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) closeDialog(); }}>
+  // Regla dura: NUNCA se cierra con clic afuera (a diferencia de Flyout) — solo con un boton.
+  // Portal a document.body (igual que Flyout/DetailPopup): garantiza que quede SIEMPRE por
+  // encima de cualquier DetailPopup abierto, sin depender del punto del arbol donde se monta.
+  return createPortal(
+    <div className="dialog-overlay">
       <div className="dialog-surface">
         <div className="dialog-stripe" style={{ background: `rgb(var(--${STRIPE_COLOR[tone]}))` }} />
         <div className="dialog-body">
@@ -33,6 +37,7 @@ export function ContentDialogHost() {
           ))}
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }