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/i18n/messages.js

@@ -211,6 +211,7 @@ export const messages = {
     vault_field_notes: 'Notas',
     vault_field_icon: 'Ícono',
     vault_icon_auto: 'Automático (inicial del nombre)',
+    vault_icon_more: 'Más íconos (marcas conocidas)',
     vault_password_unchanged_hint: 'Dejar en blanco para no cambiarla',
     vault_reveal: 'Revelar',
     vault_copy: 'Copiar',
@@ -542,6 +543,7 @@ export const messages = {
     vault_field_notes: 'Notes',
     vault_field_icon: 'Icon',
     vault_icon_auto: 'Automatic (name initial)',
+    vault_icon_more: 'More icons (well-known brands)',
     vault_password_unchanged_hint: 'Leave blank to keep it unchanged',
     vault_reveal: 'Reveal',
     vault_copy: 'Copy',

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>
         )}
 

frontend/src/styles/app.css

@@ -396,6 +396,8 @@ table.list-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
 .vault-icon-option.selected { border-color: rgb(var(--accent)); background: rgb(var(--accent) / .15); color: rgb(var(--accent)); }
 .vault-icon-option.brand, .vault-card-icon.brand { background: #fff; }
 .vault-icon-option.brand.selected { border-color: rgb(var(--accent)); }
+.vault-icon-option.vault-icon-more { border-style: dashed; color: rgb(var(--muted)); }
+.vault-icon-option.vault-icon-more:hover { color: rgb(var(--accent)); }
 
 /* --- Overlay de actualizacion (ver UpdaterPanel.jsx) ---
    Bloquea toda la pantalla (no solo el panel) mientras corre scripts/apply-update.sh, porque el