feat: version 3.0.0 -- Correcciones de auditoria de seguridad, accesibilidad y redundancia

Permisos (superadmin, viewer, busqueda, tareas recurrentes), bootstrap atomico,
revocacion de JWT por version de sesion (028), control optimista de edicion (029),
logo sin SVG + CSP, ingesta endurecida, correos escapados, borradores, paginacion
de proyectos, accesibilidad de dialogos/controles e i18n.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/components/DetailPopup.jsx

@@ -1,5 +1,8 @@
 import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
+import { useId } from 'react';
+import { useModalFocus } from '../hooks/useModalFocus.js';
+import { useUi } from '../context/ui-context.jsx';
 
 // Popup grande para ver/editar el detalle de un elemento de un listado (reemplaza el patron
 // "panel debajo del listado"). Reglas duras:
@@ -9,13 +12,16 @@ import { X } from 'lucide-react';
 //    (ej. Info/Comentarios/Documentos) nunca debe cambiar su tamaño — solo el contenido interno
 //    hace scroll. `height` es fijo por instancia; ajustar via prop segun cuanto contenido espera.
 export function DetailPopup({ open, title, onClose, children, width = 720, height = 640 }) {
+  const titleId = useId();
+  const { t } = useUi();
+  const modalRef = useModalFocus(open, onClose);
   if (!open) return null;
   return createPortal(
     <div className="detail-popup-overlay">
-      <div className="detail-popup" style={{ maxWidth: width, height }}>
+      <div className="detail-popup" style={{ maxWidth: width, height }} role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1} ref={modalRef}>
         <div className="detail-popup-header">
-          <div className="detail-popup-title">{title}</div>
-          <button className="icon-btn" onClick={onClose}><X /></button>
+          <div className="detail-popup-title" id={titleId}>{title}</div>
+          <button className="icon-btn" aria-label={t('common_close')} onClick={onClose}><X /></button>
         </div>
         <div className="detail-popup-body">{children}</div>
       </div>