feat: autorregistro con verificacion de correo + aprobacion, superadmin y SMTP

- POST /api/auth/register: primer usuario del sistema -> superadmin con sesion
  directa (bootstrap, sin correo ni aprobacion); los siguientes quedan
  pending_verification y reciben un correo con enlace de un solo uso (24h).
- GET /api/auth/verify-email: pasa a pending_approval y notifica in-app a los
  admin/superadmin activos.
- admin/superadmin aprueban (POST /api/users/:id/approve, eligen rol y
  departamento) o rechazan (POST /api/users/:id/reject, borra y audita el
  email) desde Organizacion -> Usuarios (nuevo badge de estado + acciones).
- login() da mensaje especifico segun el status de la cuenta en vez del
  generico "credenciales invalidas".
- Recuperacion de clave (forgot/reset-password): respuesta siempre generica,
  token de 1 hora de un solo uso.
- Nuevo modulo settings: SMTP configurable SOLO por superadmin desde
  Configuracion -> Correo (SMTP); clave cifrada AES-256-GCM (ENCRYPTION_KEY)
  en la tabla system_settings, nunca expuesta por la API. sendMail() degrada
  a modo dev (loguea en vez de enviar) si no hay SMTP configurado, y nunca
  deja que un fallo de envio tumbe al que lo llama.
- Migracion 002_registration_and_smtp.sql: rol superadmin, columnas de ciclo
  de vida en users (status, tokens), tabla system_settings, y promueve al
  usuario mas antiguo del sistema a superadmin.
- Fix: React.StrictMode disparaba el efecto de VerifyEmailPage dos veces; la
  segunda llamada (token ya consumido) mostraba "enlace invalido" pese a que
  la verificacion ya habia funcionado. Se agrega una guarda por token.
- Fix (deuda tecnica v1.0.0): se reordena el montaje de rutas en app.js —
  subtasksRoutes (mount generico en /api) va al final, para no interceptar
  con su requireAuth interno una request sin token dirigida a un router mas
  especifico registrado despues.
- Documentacion actualizada: AGENTS.md, SPEC.md, API.md, BASE_DE_DATOS.md,
  CONFIGURACION.md, ESTADO.md, CHANGELOG.md. Version 1.1.0.

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

frontend/src/pages/Configuracion/ConfiguracionPage.jsx

@@ -1,12 +1,15 @@
-import { Palette, ListChecks, Flag, FolderKanban, Layers } from 'lucide-react';
+import { Palette, ListChecks, Flag, FolderKanban, Layers, Mail } from 'lucide-react';
 import { useUi } from '../../context/ui-context.jsx';
+import { useAuth } from '../../context/auth-context.jsx';
 import { Expander } from '../../components/Expander.jsx';
 import { Field, FieldRow } from '../../components/Field.jsx';
 import { ComboBox } from '../../components/ComboBox.jsx';
 import { CatalogEditor } from './CatalogEditor.jsx';
+import SmtpSettingsPanel from './SmtpSettingsPanel.jsx';
 
 export default function ConfiguracionPage() {
   const { t, theme, setTheme, lang, setLang, buttonMode, setButtonMode } = useUi();
+  const { user } = useAuth();
 
   return (
     <div>
@@ -84,6 +87,12 @@ export default function ConfiguracionPage() {
           fields={[{ key: 'name', label: t('common_name'), type: 'text' }]}
         />
       </Expander>
+
+      {user?.roleCode === 'superadmin' && (
+        <Expander icon={Mail} title={t('config_smtp')}>
+          <SmtpSettingsPanel />
+        </Expander>
+      )}
     </div>
   );
 }

frontend/src/pages/Configuracion/SmtpSettingsPanel.jsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { Save } from 'lucide-react';
+import { useUi } from '../../context/ui-context.jsx';
+import { useAsync, useAction } from '../../hooks/useAsync.js';
+import { getSmtpConfig, updateSmtpConfig } from '../../services/settings.js';
+import { Field, FieldRow } from '../../components/Field.jsx';
+import { Button } from '../../components/Button.jsx';
+import { InfoBar } from '../../components/InfoBar.jsx';
+
+export default function SmtpSettingsPanel() {
+  const { t, pushToast } = useUi();
+  const runAction = useAction();
+  const { data: config, reload } = useAsync(getSmtpConfig, []);
+  const [form, setForm] = useState({ host: '', port: 587, user: '', from: '', pass: '' });
+
+  useEffect(() => {
+    if (config) setForm({ host: config.host, port: config.port, user: config.user, from: config.from, pass: '' });
+  }, [config]);
+
+  async function save() {
+    await runAction(async () => {
+      await updateSmtpConfig(form);
+      await reload();
+      setForm((f) => ({ ...f, pass: '' }));
+      pushToast({ tone: 'success', message: t('common_saved') });
+    });
+  }
+
+  if (!config) return <div className="text-muted">{t('common_loading')}</div>;
+
+  return (
+    <div>
+      {!config.configured && <InfoBar tone="warning" dismissible={false}>{t('smtp_not_configured')}</InfoBar>}
+      <FieldRow>
+        <Field label={t('smtp_host')}>
+          <input className="input" value={form.host} onChange={(e) => setForm((f) => ({ ...f, host: e.target.value }))} placeholder="192.168.222.10" />
+        </Field>
+        <Field label={t('smtp_port')}>
+          <input className="input" type="number" value={form.port} onChange={(e) => setForm((f) => ({ ...f, port: Number(e.target.value) }))} />
+        </Field>
+      </FieldRow>
+      <FieldRow>
+        <Field label={t('smtp_user')}>
+          <input className="input" value={form.user} onChange={(e) => setForm((f) => ({ ...f, user: e.target.value }))} placeholder="project@linkedcorp.net" />
+        </Field>
+        <Field label={t('smtp_from')}>
+          <input className="input" value={form.from} onChange={(e) => setForm((f) => ({ ...f, from: e.target.value }))} placeholder="project@linkedcorp.net" />
+        </Field>
+      </FieldRow>
+      <Field label={t('smtp_pass')} hint={config.configured ? t('smtp_pass_configured_hint') : undefined}>
+        <input className="input" type="password" value={form.pass} onChange={(e) => setForm((f) => ({ ...f, pass: e.target.value }))} />
+      </Field>
+      <Button variant="accent" icon={Save} onClick={save}>{t('common_save')}</Button>
+    </div>
+  );
+}

frontend/src/pages/Login/ForgotPasswordPage.jsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Send } from 'lucide-react';
+import { useUi } from '../../context/ui-context.jsx';
+import { forgotPassword } from '../../services/auth.js';
+import { Field } from '../../components/Field.jsx';
+import { Button } from '../../components/Button.jsx';
+import logoDark from '../../assets/logoLinkedCorpTxt.png';
+import logoLight from '../../assets/logoLinkedCorpTxtBlack.png';
+
+export default function ForgotPasswordPage() {
+  const { t, theme } = useUi();
+  const [email, setEmail] = useState('');
+  const [sent, setSent] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await forgotPassword(email);
+    } finally {
+      setLoading(false);
+      setSent(true); // siempre generico, exista o no el correo
+    }
+  }
+
+  return (
+    <div className="login-shell">
+      <form className="login-card" onSubmit={handleSubmit}>
+        <div className="login-logo">
+          <img src={theme === 'light' ? logoLight : logoDark} alt={t('appName')} className="login-logo-img" />
+        </div>
+        <div className="login-title">{t('forgot_password_title')}</div>
+        {sent ? (
+          <div className="login-info">{t('forgot_password_sent')}</div>
+        ) : (
+          <>
+            <Field label={t('login_email')}>
+              <input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required autoFocus />
+            </Field>
+            <Button variant="accent" icon={Send} type="submit" disabled={loading} style={{ width: '100%', justifyContent: 'center' }}>
+              {t('forgot_password_submit')}
+            </Button>
+          </>
+        )}
+        <div className="login-links">
+          <Link to="/login">{t('register_back_to_login')}</Link>
+        </div>
+      </form>
+    </div>
+  );
+}

frontend/src/pages/Login/LoginPage.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { LogIn } from 'lucide-react';
 import { useAuth } from '../../context/auth-context.jsx';
 import { useUi } from '../../context/ui-context.jsx';
@@ -24,8 +24,8 @@ export default function LoginPage() {
     try {
       await login(email, password);
       navigate('/', { replace: true });
-    } catch {
-      setError(t('login_error'));
+    } catch (err) {
+      setError(err.message || t('login_error'));
     } finally {
       setLoading(false);
     }
@@ -48,6 +48,10 @@ export default function LoginPage() {
         <Button variant="accent" icon={LogIn} type="submit" disabled={loading} style={{ width: '100%', justifyContent: 'center' }}>
           {t('login_submit')}
         </Button>
+        <div className="login-links">
+          <Link to="/olvide-clave">{t('login_forgot_password')}</Link>
+          <Link to="/registro">{t('login_create_account')}</Link>
+        </div>
       </form>
     </div>
   );

frontend/src/pages/Login/RegisterPage.jsx

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { UserPlus } from 'lucide-react';
+import { useAuth } from '../../context/auth-context.jsx';
+import { useUi } from '../../context/ui-context.jsx';
+import { register } from '../../services/auth.js';
+import { Field } from '../../components/Field.jsx';
+import { Button } from '../../components/Button.jsx';
+import logoDark from '../../assets/logoLinkedCorpTxt.png';
+import logoLight from '../../assets/logoLinkedCorpTxtBlack.png';
+
+export default function RegisterPage() {
+  const { setSession } = useAuth();
+  const { t, theme } = useUi();
+  const navigate = useNavigate();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [error, setError] = useState('');
+  const [info, setInfo] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError('');
+    setInfo('');
+    if (password !== confirm) { setError(t('register_password_mismatch')); return; }
+    if (password.length < 8) { setError(t('register_password_short')); return; }
+    setLoading(true);
+    try {
+      const result = await register({ name, email, password });
+      if (result.bootstrap) {
+        setSession(result.token, result.user);
+        navigate('/', { replace: true });
+        return;
+      }
+      setInfo(t('register_success'));
+    } catch (err) {
+      setError(err.message || t('common_error'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="login-shell">
+      <form className="login-card" onSubmit={handleSubmit}>
+        <div className="login-logo">
+          <img src={theme === 'light' ? logoLight : logoDark} alt={t('appName')} className="login-logo-img" />
+        </div>
+        <div className="login-title">{t('register_title')}</div>
+        {error && <div className="login-error">{error}</div>}
+        {info && <div className="login-info">{info}</div>}
+        {!info && (
+          <>
+            <Field label={t('register_name')}>
+              <input className="input" value={name} onChange={(e) => setName(e.target.value)} required autoFocus />
+            </Field>
+            <Field label={t('login_email')}>
+              <input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+            </Field>
+            <Field label={t('login_password')}>
+              <input className="input" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+            </Field>
+            <Field label={t('register_password_confirm')}>
+              <input className="input" type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} required />
+            </Field>
+            <Button variant="accent" icon={UserPlus} type="submit" disabled={loading} style={{ width: '100%', justifyContent: 'center' }}>
+              {t('register_submit')}
+            </Button>
+          </>
+        )}
+        <div className="login-links">
+          <Link to="/login">{t('register_back_to_login')}</Link>
+        </div>
+      </form>
+    </div>
+  );
+}

frontend/src/pages/Login/ResetPasswordPage.jsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { KeyRound } from 'lucide-react';
+import { useUi } from '../../context/ui-context.jsx';
+import { resetPassword } from '../../services/auth.js';
+import { Field } from '../../components/Field.jsx';
+import { Button } from '../../components/Button.jsx';
+import logoDark from '../../assets/logoLinkedCorpTxt.png';
+import logoLight from '../../assets/logoLinkedCorpTxtBlack.png';
+
+export default function ResetPasswordPage() {
+  const { t, theme } = useUi();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const token = searchParams.get('token') || '';
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError('');
+    if (password !== confirm) { setError(t('register_password_mismatch')); return; }
+    if (password.length < 8) { setError(t('register_password_short')); return; }
+    setLoading(true);
+    try {
+      await resetPassword(token, password);
+      setSuccess(true);
+      setTimeout(() => navigate('/login', { replace: true }), 2000);
+    } catch (err) {
+      setError(err.message || t('common_error'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="login-shell">
+      <form className="login-card" onSubmit={handleSubmit}>
+        <div className="login-logo">
+          <img src={theme === 'light' ? logoLight : logoDark} alt={t('appName')} className="login-logo-img" />
+        </div>
+        <div className="login-title">{t('reset_password_title')}</div>
+        {error && <div className="login-error">{error}</div>}
+        {success ? (
+          <div className="login-info">{t('reset_password_success')}</div>
+        ) : (
+          <>
+            <Field label={t('reset_password_new')}>
+              <input className="input" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required autoFocus />
+            </Field>
+            <Field label={t('register_password_confirm')}>
+              <input className="input" type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} required />
+            </Field>
+            <Button variant="accent" icon={KeyRound} type="submit" disabled={loading || !token} style={{ width: '100%', justifyContent: 'center' }}>
+              {t('reset_password_submit')}
+            </Button>
+          </>
+        )}
+        <div className="login-links">
+          <Link to="/login">{t('register_back_to_login')}</Link>
+        </div>
+      </form>
+    </div>
+  );
+}

frontend/src/pages/Login/VerifyEmailPage.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { useUi } from '../../context/ui-context.jsx';
+import { verifyEmail } from '../../services/auth.js';
+import logoDark from '../../assets/logoLinkedCorpTxt.png';
+import logoLight from '../../assets/logoLinkedCorpTxtBlack.png';
+
+export default function VerifyEmailPage() {
+  const { t, theme } = useUi();
+  const [searchParams] = useSearchParams();
+  const [state, setState] = useState('loading');
+  const [message, setMessage] = useState('');
+  // El token de verificacion se consume en el servidor (un solo uso): con React.StrictMode el
+  // efecto se dispara dos veces en dev, y la segunda llamada fallaria con "token invalido" aunque
+  // la primera ya haya verificado correctamente. Esta ref evita el segundo disparo.
+  const requestedTokenRef = useRef(null);
+
+  useEffect(() => {
+    const token = searchParams.get('token');
+    if (!token) { setState('error'); setMessage(t('verify_email_missing_token')); return; }
+    if (requestedTokenRef.current === token) return;
+    requestedTokenRef.current = token;
+    verifyEmail(token)
+      .then(() => { setState('success'); setMessage(t('verify_email_success')); })
+      .catch((err) => { setState('error'); setMessage(err.message || t('common_error')); });
+  }, [searchParams, t]);
+
+  return (
+    <div className="login-shell">
+      <div className="login-card">
+        <div className="login-logo">
+          <img src={theme === 'light' ? logoLight : logoDark} alt={t('appName')} className="login-logo-img" />
+        </div>
+        <div className="login-title">{t('verify_email_title')}</div>
+        {state === 'loading' && <div className="text-muted">{t('common_loading')}</div>}
+        {state === 'success' && <div className="login-info">{message}</div>}
+        {state === 'error' && <div className="login-error">{message}</div>}
+        <div className="login-links">
+          <Link to="/login">{t('register_back_to_login')}</Link>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Organizacion/UsersPanel.jsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
-import { Plus, Save, UserX, UserCheck } from 'lucide-react';
+import { Plus, Save, UserX, UserCheck, Check, X as XIcon } from 'lucide-react';
 import { useUi } from '../../context/ui-context.jsx';
+import { useAuth } from '../../context/auth-context.jsx';
 import { useAsync, useAction } from '../../hooks/useAsync.js';
-import { listUsers, listRoles, createUser, updateUser, setUserActive } from '../../services/users.js';
+import { listUsers, listRoles, createUser, updateUser, setUserActive, approveUser, rejectUser } from '../../services/users.js';
 import { listDepartments } from '../../services/departments.js';
 import { ListView } from '../../components/ListView.jsx';
 import { SearchInput } from '../../components/SearchInput.jsx';
@@ -17,19 +18,25 @@ function flatten(nodes, acc = []) {
   return acc;
 }
 
+const STATUS_COLOR = { pending_verification: 'muted', pending_approval: 'warning', active: 'success' };
 const EMPTY_FORM = { name: '', email: '', roleId: '', departmentId: '', position: '', password: '' };
 
 export default function UsersPanel() {
-  const { t, pushToast } = useUi();
+  const { t, pushToast, openDialog } = useUi();
+  const { user: currentUser } = useAuth();
   const runAction = useAction();
   const { data: users, reload } = useAsync(listUsers, []);
   const { data: roles } = useAsync(listRoles, []);
   const { data: deptTree } = useAsync(listDepartments, []);
 
+  const canManage = ['admin', 'superadmin'].includes(currentUser?.roleCode);
+
   const [search, setSearch] = useState('');
   const [editing, setEditing] = useState(false);
   const [selected, setSelected] = useState(null);
   const [form, setForm] = useState(EMPTY_FORM);
+  const [approving, setApproving] = useState(null);
+  const [approveForm, setApproveForm] = useState({ roleId: '', departmentId: '' });
 
   const deptOptions = deptTree ? flatten(deptTree).map((d) => ({ value: d.id, label: d.name })) : [];
   const roleOptions = (roles || []).map((r) => ({ value: r.id, label: r.name }));
@@ -41,6 +48,7 @@ export default function UsersPanel() {
   }
 
   function startEdit(user) {
+    if (!canManage) return;
     setSelected(user);
     setForm({ name: user.name, email: user.email, roleId: user.role_id, departmentId: user.department_id || '', position: user.position || '', password: '' });
     setEditing(true);
@@ -68,13 +76,40 @@ export default function UsersPanel() {
     });
   }
 
+  function startApprove(user) {
+    const collaboratorRole = (roles || []).find((r) => r.code === 'collaborator');
+    setApproving(user);
+    setApproveForm({ roleId: user.role_id || collaboratorRole?.id || '', departmentId: '' });
+  }
+
+  async function confirmApprove() {
+    await runAction(async () => {
+      await approveUser(approving.id, { roleId: approveForm.roleId, departmentId: approveForm.departmentId || null });
+      setApproving(null);
+      await reload();
+      pushToast({ tone: 'success', message: t('common_saved') });
+    });
+  }
+
+  function confirmReject(user) {
+    openDialog({
+      tone: 'warning',
+      title: t('user_reject'),
+      message: t('user_reject_confirm_msg'),
+      actions: [
+        { label: t('common_cancel'), variant: 'standard' },
+        { label: t('user_reject'), variant: 'danger', onClick: () => runAction(async () => { await rejectUser(user.id); await reload(); }) },
+      ],
+    });
+  }
+
   const columns = [
     { key: 'name', label: t('common_name') },
     { key: 'email', label: t('user_email') },
     { key: 'role_name', label: t('user_role') },
     { key: 'department_name', label: t('common_department'), render: (r) => r.department_name || '—' },
-    { key: 'is_active', label: t('common_status'), sortable: false, render: (r) => (
-      <Badge color={r.is_active ? 'success' : 'muted'}>{r.is_active ? t('common_active') : t('common_inactive')}</Badge>
+    { key: 'status', label: t('common_status'), sortable: false, render: (r) => (
+      <Badge color={STATUS_COLOR[r.status] || 'muted'}>{t(`user_status_${r.status}`)}</Badge>
     ) },
   ];
 
@@ -86,7 +121,7 @@ export default function UsersPanel() {
         <div className="toolbar-left">
           <SearchInput value={search} onChange={setSearch} />
         </div>
-        <Button variant="accent" icon={Plus} onClick={startNew}>{t('user_new')}</Button>
+        {canManage && <Button variant="accent" icon={Plus} onClick={startNew}>{t('user_new')}</Button>}
       </div>
 
       <ListView
@@ -95,13 +130,20 @@ export default function UsersPanel() {
         searchValue={search}
         getSearchHaystack={(u) => `${u.name} ${u.email} ${u.role_name} ${u.department_name || ''}`}
         getRowKey={(u) => u.id}
-        onRowClick={startEdit}
-        rowActions={(u) => [
-          { label: t('common_edit'), onClick: () => startEdit(u) },
-          u.is_active
-            ? { label: t('common_inactive'), icon: UserX, danger: true, onClick: () => toggleActive(u) }
-            : { label: t('common_active'), icon: UserCheck, onClick: () => toggleActive(u) },
-        ]}
+        onRowClick={canManage ? startEdit : undefined}
+        rowActions={canManage ? (u) => (
+          u.status === 'pending_approval'
+            ? [
+              { label: t('user_approve'), icon: Check, onClick: () => startApprove(u) },
+              { label: t('user_reject'), icon: XIcon, danger: true, onClick: () => confirmReject(u) },
+            ]
+            : [
+              { label: t('common_edit'), onClick: () => startEdit(u) },
+              u.is_active
+                ? { label: t('common_inactive'), icon: UserX, danger: true, onClick: () => toggleActive(u) }
+                : { label: t('common_active'), icon: UserCheck, onClick: () => toggleActive(u) },
+            ]
+        ) : undefined}
       />
 
       <DetailPopup open={editing} title={selected ? t('common_edit') : t('user_new')} onClose={() => setEditing(false)} width={560} height={440}>
@@ -136,6 +178,21 @@ export default function UsersPanel() {
           <Button variant="standard" onClick={() => setEditing(false)}>{t('common_cancel')}</Button>
         </div>
       </DetailPopup>
+
+      <DetailPopup open={!!approving} title={t('user_approve_title')} onClose={() => setApproving(null)} width={420} height={300}>
+        <FieldRow>
+          <Field label={t('user_role')}>
+            <ComboBox options={roleOptions} value={approveForm.roleId} onChange={(v) => setApproveForm((f) => ({ ...f, roleId: v }))} />
+          </Field>
+          <Field label={t('common_department')}>
+            <ComboBox options={[{ value: '', label: '—' }, ...deptOptions]} value={approveForm.departmentId} onChange={(v) => setApproveForm((f) => ({ ...f, departmentId: v }))} />
+          </Field>
+        </FieldRow>
+        <div style={{ display: 'flex', gap: 8 }}>
+          <Button variant="accent" icon={Check} onClick={confirmApprove}>{t('user_approve')}</Button>
+          <Button variant="standard" onClick={() => setApproving(null)}>{t('common_cancel')}</Button>
+        </div>
+      </DetailPopup>
     </div>
   );
 }