feat: version 2.16.1 -- barra superior reducida, barra inferior fija y contador de Contraseñas en ella

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

frontend/src/pages/Contrasenas/ContrasenasPage.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { createPortal } from 'react-dom';
 import {
   Plus, ChevronUp, ChevronLeft, Trash2, Eye, EyeOff, Copy, Pencil, Save, X, RefreshCw, ShieldAlert,
   MoreVertical, Mail, Globe, Server, Database, Cloud, Shield, Lock, Wifi, CreditCard, Building2, Printer,
@@ -76,6 +77,9 @@ export default function ContrasenasPage() {
   const navigate = useNavigate();
 
   const [locked, setLocked] = useState(true);
+  // Hueco de la barra inferior donde se muestra la cuenta regresiva (solo mientras esta desbloqueado).
+  const [footSlot, setFootSlot] = useState(null);
+  useEffect(() => { setFootSlot(document.getElementById('footbar-slot')); }, []);
   const [checking, setChecking] = useState(true);
   const [hasPinSet, setHasPinSet] = useState(null);
   const [entries, setEntries] = useState(null);
@@ -152,8 +156,8 @@ export default function ContrasenasPage() {
   useEffect(() => () => setVaultToken(null), []);
 
   // Cierre por inactividad (3 min sin teclado/clic/toque/rueda): lo cuenta <AutoLockCountdown>, que
-  // muestra el tiempo restante junto al titulo y reinicia con cada accion del usuario, asi que
-  // nunca lo saca en medio de escribir/editar una credencial.
+  // se muestra en la barra inferior (a la derecha) mientras esta desbloqueado y se reinicia con cada
+  // accion del usuario, asi que nunca lo saca en medio de escribir/editar una credencial.
   function autoLockExit() {
     pushToast({ tone: 'warning', message: t('vault_auto_lock_notice') });
     navigate('/');
@@ -430,9 +434,9 @@ export default function ContrasenasPage() {
 
   return (
     <div>
+      {footSlot && createPortal(<AutoLockCountdown ms={AUTO_LOCK_MS} onExpire={autoLockExit} title={t('vault_countdown_hint')} />, footSlot)}
       <div className="toolbar">
         <h2 className="page-title mt-0" style={{ marginBottom: 0 }}>{t('nav_passwords')}</h2>
-        <AutoLockCountdown ms={AUTO_LOCK_MS} onExpire={autoLockExit} title={t('vault_countdown_hint')} />
         <SearchInput value={search} onChange={setSearch} />
         <div style={{ flex: 1 }} />
         <Button variant="standard" icon={RefreshCw} onClick={() => setChangingPin(true)}>{t('vault_change_pin')}</Button>