feat: version 2.8.4 -- catalogo de logos de marca oculto tras boton +

El selector de icono generico de Contraseñas queda igual; el catalogo de marcas (simple-icons)
pasa a estar colapsado por defecto detras de un boton "+", y se abre solo si la entrada ya
tenia un logo de marca asignado.

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

frontend/src/pages/Contrasenas/ContrasenasPage.jsx

@@ -81,6 +81,7 @@ export default function ContrasenasPage() {
   const [revealedPassword, setRevealedPassword] = useState(null);
   const [passwordVisible, setPasswordVisible] = useState(false);
   const [creating, setCreating] = useState(false);
+  const [showBrandIcons, setShowBrandIcons] = useState(false);
 
   const [changingPin, setChangingPin] = useState(false);
   const [pinChangeForm, setPinChangeForm] = useState({ current: '', next: '', next2: '' });
@@ -180,6 +181,7 @@ export default function ContrasenasPage() {
     setPasswordVisible(false);
     setEditing(false);
     setCreating(false);
+    setShowBrandIcons(!!BRAND_ICONS[entry.icon_key]);
   }
 
   function openCreate() {
@@ -189,6 +191,7 @@ export default function ContrasenasPage() {
     setPasswordVisible(false);
     setEditing(true);
     setCreating(true);
+    setShowBrandIcons(false);
   }
 
   function closePopup() {
@@ -357,19 +360,30 @@ export default function ContrasenasPage() {
                 </button>
               ))}
             </div>
-            <div className="vault-icon-picker vault-icon-picker-brands">
-              {Object.entries(BRAND_ICONS).map(([key, icon]) => (
-                <button
-                  type="button"
-                  key={key}
-                  className={`vault-icon-option brand ${form.iconKey === key ? 'selected' : ''}`}
-                  title={icon.title}
-                  onClick={() => setForm((f) => ({ ...f, iconKey: key }))}
-                >
-                  <BrandSvg icon={icon} size={16} />
-                </button>
-              ))}
-            </div>
+            {showBrandIcons ? (
+              <div className="vault-icon-picker vault-icon-picker-brands">
+                {Object.entries(BRAND_ICONS).map(([key, icon]) => (
+                  <button
+                    type="button"
+                    key={key}
+                    className={`vault-icon-option brand ${form.iconKey === key ? 'selected' : ''}`}
+                    title={icon.title}
+                    onClick={() => setForm((f) => ({ ...f, iconKey: key }))}
+                  >
+                    <BrandSvg icon={icon} size={16} />
+                  </button>
+                ))}
+              </div>
+            ) : (
+              <button
+                type="button"
+                className="vault-icon-option vault-icon-more"
+                title={t('vault_icon_more')}
+                onClick={() => setShowBrandIcons(true)}
+              >
+                <Plus size={16} />
+              </button>
+            )}
           </Field>
         )}