feat: administradores por proyecto y Configuracion solo para superadmin

- Un proyecto puede tener uno o mas administradores (role_in_project=
  'admin' en project_members), independiente del rol global del usuario.
  Nuevo PUT /api/projects/:id/members/:userId/role; canWriteProject lo
  reconoce ademas del comportamiento previo (admin/superadmin/it_manager
  global, o project_lead miembro). UI: casilla al agregar miembro + boton
  de escudo para promover/degradar (nunca toca al Dueño).
- Menu "Configuracion" (apariencia, catalogos, SMTP) visible y accesible
  solo para el superadmin: oculto en el nav y con guarda en la ruta
  /configuracion para quien la teclee directo. Escritura de catalogos
  restringida de [superadmin, admin] a solo superadmin para que el
  backend sea consistente con la UI.

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

frontend/src/pages/Configuracion/ConfiguracionPage.jsx

@@ -1,3 +1,4 @@
+import { Navigate } from 'react-router-dom';
 import { Palette, ListChecks, Flag, FolderKanban, Layers, Mail } from 'lucide-react';
 import { useUi } from '../../context/ui-context.jsx';
 import { useAuth } from '../../context/auth-context.jsx';
@@ -11,6 +12,10 @@ export default function ConfiguracionPage() {
   const { t, theme, setTheme, lang, setLang, buttonMode, setButtonMode } = useUi();
   const { user } = useAuth();
 
+  // Regla dura: Configuracion es solo del superadmin (catalogos, SMTP...). El nav ya la oculta
+  // para los demas roles; esta guarda de ruta evita entrar tecleando /configuracion directo.
+  if (user?.roleCode !== 'superadmin') return <Navigate to="/" replace />;
+
   return (
     <div>
       <h2 className="page-title mt-0" style={{ marginBottom: 16 }}>{t('config_title')}</h2>
@@ -88,11 +93,9 @@ export default function ConfiguracionPage() {
         />
       </Expander>
 
-      {user?.roleCode === 'superadmin' && (
-        <Expander icon={Mail} title={t('config_smtp')}>
-          <SmtpSettingsPanel />
-        </Expander>
-      )}
+      <Expander icon={Mail} title={t('config_smtp')}>
+        <SmtpSettingsPanel />
+      </Expander>
     </div>
   );
 }

frontend/src/pages/Proyectos/ProjectMembersTab.jsx

@@ -1,20 +1,24 @@
 import { useState } from 'react';
-import { UserPlus, Trash2 } from 'lucide-react';
+import { UserPlus, Trash2, ShieldCheck, ShieldOff } from 'lucide-react';
 import { useUi } from '../../context/ui-context.jsx';
 import { useAsync, useAction } from '../../hooks/useAsync.js';
-import { addProjectMember, removeProjectMember } from '../../services/projects.js';
+import { addProjectMember, setProjectMemberAdmin, removeProjectMember } from '../../services/projects.js';
 import { listUsers } from '../../services/users.js';
 import { Button } from '../../components/Button.jsx';
 import { Field } from '../../components/Field.jsx';
 import { ComboBox } from '../../components/ComboBox.jsx';
+import { Badge } from '../../components/Badge.jsx';
 import { DetailPopup } from '../../components/DetailPopup.jsx';
 
+const ROLE_BADGE = { owner: { color: 'accent', key: 'project_role_owner' }, admin: { color: 'success', key: 'project_role_admin' } };
+
 export default function ProjectMembersTab({ project, onChanged }) {
   const { t, openDialog } = useUi();
   const runAction = useAction();
   const { data: users } = useAsync(listUsers, []);
 
   const [addingMember, setAddingMember] = useState('');
+  const [addAsAdmin, setAddAsAdmin] = useState(false);
   const [addMemberOpen, setAddMemberOpen] = useState(false);
 
   const userOptions = (users || []).filter((u) => !project.members.some((m) => m.user_id === u.id)).map((u) => ({ value: u.id, label: u.name }));
@@ -22,13 +26,21 @@ export default function ProjectMembersTab({ project, onChanged }) {
   async function addMember() {
     if (!addingMember) return;
     await runAction(async () => {
-      await addProjectMember(project.id, Number(addingMember));
+      await addProjectMember(project.id, Number(addingMember), addAsAdmin ? 'admin' : null);
       setAddingMember('');
+      setAddAsAdmin(false);
       setAddMemberOpen(false);
       onChanged();
     });
   }
 
+  function toggleAdmin(member) {
+    runAction(async () => {
+      await setProjectMemberAdmin(project.id, member.user_id, member.role_in_project !== 'admin');
+      onChanged();
+    });
+  }
+
   function confirmRemoveMember(member) {
     openDialog({
       tone: 'warning',
@@ -48,19 +60,36 @@ export default function ProjectMembersTab({ project, onChanged }) {
           <h3 style={{ margin: 0 }}>{t('project_members')}</h3>
           <Button variant="accent" icon={UserPlus} onClick={() => setAddMemberOpen(true)}>{t('project_add_member')}</Button>
         </div>
-        {project.members.map((m) => (
-          <div key={m.user_id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0' }}>
-            <span style={{ flex: 1, fontSize: '.82rem' }}>{m.name} <span className="text-muted">· {m.email}</span></span>
-            <button className="icon-btn" onClick={() => confirmRemoveMember(m)}><Trash2 size={16} /></button>
-          </div>
-        ))}
+        {project.members.map((m) => {
+          const badge = ROLE_BADGE[m.role_in_project];
+          return (
+            <div key={m.user_id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0' }}>
+              <span style={{ flex: 1, fontSize: '.82rem' }}>{m.name} <span className="text-muted">· {m.email}</span></span>
+              {badge && <Badge color={badge.color}>{t(badge.key)}</Badge>}
+              {m.role_in_project !== 'owner' && (
+                <button
+                  className="icon-btn"
+                  title={m.role_in_project === 'admin' ? t('project_remove_admin') : t('project_make_admin')}
+                  onClick={() => toggleAdmin(m)}
+                >
+                  {m.role_in_project === 'admin' ? <ShieldOff size={16} /> : <ShieldCheck size={16} />}
+                </button>
+              )}
+              <button className="icon-btn" onClick={() => confirmRemoveMember(m)}><Trash2 size={16} /></button>
+            </div>
+          );
+        })}
         {project.members.length === 0 && <div className="text-muted" style={{ fontSize: '.78rem' }}>{t('common_empty')}</div>}
       </div>
 
-      <DetailPopup open={addMemberOpen} title={t('project_add_member')} onClose={() => setAddMemberOpen(false)} width={420} height={260}>
+      <DetailPopup open={addMemberOpen} title={t('project_add_member')} onClose={() => setAddMemberOpen(false)} width={420} height={300}>
         <Field label={t('project_add_member')}>
           <ComboBox options={userOptions} value={addingMember} onChange={setAddingMember} placeholder={t('project_add_member')} />
         </Field>
+        <label className="checkbox-row">
+          <input type="checkbox" checked={addAsAdmin} onChange={(e) => setAddAsAdmin(e.target.checked)} />
+          {t('project_add_member_as_admin')}
+        </label>
         <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
           <Button variant="accent" icon={UserPlus} onClick={addMember}>{t('common_save')}</Button>
           <Button variant="standard" onClick={() => setAddMemberOpen(false)}>{t('common_cancel')}</Button>