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/pages/Proyectos/ProjectActivitiesTab.jsx

@@ -12,6 +12,7 @@ import { Field, FieldRow } from '../../components/Field.jsx';
 import { ComboBox } from '../../components/ComboBox.jsx';
 import { StatusBadge, ProgressBar, DueBadge } from '../../components/StatusBadge.jsx';
 import { dueStatus } from '../../utils/dueStatus.js';
+import { DetailPopup } from '../../components/DetailPopup.jsx';
 import ActivityDetailPanel from './ActivityDetailPanel.jsx';
 
 const EMPTY_FORM = { name: '', description: '', responsibleUserId: '', priorityId: '', statusId: '', startDate: '', dueDate: '', isMilestone: false };
@@ -128,17 +129,16 @@ export default function ProjectActivitiesTab({ projectId }) {
         </div>
       )}
 
-      {selected && (
-        <div style={{ marginTop: 16 }}>
+      <DetailPopup open={!!selected} title={selected ? `${selected.code} — ${selected.name}` : ''} onClose={() => setSelected(null)} width={720} height={680}>
+        {selected && (
           <ActivityDetailPanel
             activity={selected}
             projectId={projectId}
             siblingActivities={activities}
             onChanged={refreshAll}
-            onClose={() => setSelected(null)}
           />
-        </div>
-      )}
+        )}
+      </DetailPopup>
     </div>
   );
 }