Añadir ruta /security-2falogin (verificación en 2 pasos / TOTP)

Activación de 2FA (TOTP) para el login del juego, guardando el secreto en
acore_auth.account.totp_secret tal como lo lee el bnetserver 3.4.3.

- lib/two-factor.ts: TOTP (HMAC-SHA1, 30s, 6 dígitos, ±1) idéntico al core
  (verificado contra los vectores RFC 6238), Base32, otpauth, y codificado
  del secreto: crudo por defecto o AES-128-GCM (ciphertext‖IV12‖tag12) si se
  define TOTP_MASTER_SECRET (mismo hex que TOTPMasterSecret del servidor).
- Flujo seguro sin bloqueos: el secreto se genera y queda PENDIENTE en la
  sesión; sólo se escribe en la cuenta tras verificar un código válido.
- /api/account/2fa: activar (password + token de seguridad), verificar y
  desactivar (con código actual). QR generado en el servidor (el secreto no
  sale a terceros).
- Página + componente fieles al markup (preview, pasos, copiar clave, ojos).

Verificado E2E: activar -> QR/secreto -> verificar -> totp_secret = 20 bytes
(igual al secreto escaneado) -> desactivar -> NULL.

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

web-next/app/globals.css

@@ -448,3 +448,27 @@ textarea:focus {
   vertical-align: middle;
   margin-right: 6px;
 }
+
+/* ==== Verificación en 2 pasos (/security-2falogin) ==== */
+.twofa-login-info { display: block; }
+.twofa-login-preview {
+  float: right;
+  max-width: 370px;
+  margin-left: 24px;
+  margin-bottom: 8px;
+  height: auto;
+  border: 2px solid #352e2b;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+}
+.google-play-logo { height: 40px; width: 140px; vertical-align: middle; }
+.apple-store-logo { height: 40px; width: 120px; vertical-align: middle; }
+.toggle-password, .toggle-token { cursor: pointer; margin-left: -28px; color: #b1997f; transition: .3s; }
+.toggle-password:hover, .toggle-token:hover { color: #fff; }
+.copy-secret-container { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
+#secret-key { width: 240px; text-align: center; }
+.copy-btn { cursor: pointer; }
+#qr-code { display: block; margin: 0 auto; max-width: 220px; height: auto; background: #fff; padding: 8px; border-radius: 6px; }
+@media screen and (max-width: 1024px) {
+  .twofa-login-info { display: flex; flex-direction: column-reverse; align-items: center; }
+  .twofa-login-preview { float: none; display: block; clear: both; margin: 10px auto 8px auto; max-width: 90vw; }
+}