Actualizar imagen e iconos de marca

frontend/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/app-icon-96.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>LinkedSign</title>
   </head>

frontend/public/favicon.svg

@@ -1,6 +1,30 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
-  <rect width="64" height="64" rx="16" fill="#4F46E5"/>
-  <path d="M32 9C25.363 13.978 18.43 16.467 11.26 16.467V29.378C11.26 43.896 20.03 49.763 32 53.438C43.97 49.763 52.74 43.896 52.74 29.378V16.467C45.57 16.467 38.637 13.978 32 9Z" fill="white"/>
-  <path d="M23.778 20.911H31.911C37.208 20.911 41.6 24.392 41.6 29.689C41.6 34.986 37.208 38.467 31.911 38.467H29.6V44.8H23.778V20.911ZM29.6 25.956V33.422H31.6C34.452 33.422 35.956 31.956 35.956 29.689C35.956 27.422 34.452 25.956 31.6 25.956H29.6Z" fill="#4F46E5"/>
-  <path d="M22.489 48.889H41.511V51.911H22.489V48.889Z" fill="#0F172A"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96">
+  <defs>
+    <radialGradient id="bg" cx="40%" cy="34%" r="72%">
+      <stop offset="0%" stop-color="#6366F1"/>
+      <stop offset="100%" stop-color="#1E1B4B"/>
+    </radialGradient>
+  </defs>
+
+  <!-- Background circle -->
+  <circle cx="48" cy="48" r="48" fill="url(#bg)"/>
+  <circle cx="48" cy="48" r="44.5" fill="none" stroke="white" stroke-width="0.6" opacity="0.12"/>
+
+  <!-- Pen barrel (cuerpo) -->
+  <rect x="34" y="12" width="28" height="44" rx="14" fill="white"/>
+
+  <!-- Barrel inner detail -->
+  <rect x="45" y="16" width="6" height="36" rx="3" fill="#4338CA" opacity="0.35"/>
+
+  <!-- Pen nib (plumín) -->
+  <path d="M 34,54 L 48,78 L 62,54 Z" fill="white"/>
+
+  <!-- Nib slit -->
+  <line x1="48" y1="58" x2="48" y2="76" stroke="#4338CA" stroke-width="2" opacity="0.4"/>
+
+  <!-- Clip lateral -->
+  <rect x="59" y="14" width="4" height="38" rx="2" fill="white" opacity="0.5"/>
+
+  <!-- Ink dot (punta de escritura) -->
+  <circle cx="48" cy="79" r="3" fill="white" opacity="0.9"/>
 </svg>

frontend/src/components/layout/Layout.jsx

@@ -83,11 +83,11 @@ export default function Layout({ children }) {
       <aside className={`sidebar ${mobileMenuOpen ? 'sidebar--mobile-open' : ''}`}>
         <div className="sidebar-brand">
           <div className="sidebar-brand-mark">
-            <FileText size={18} />
+            <img src="/app-icon-96.png" alt="LinkedSign" width="32" height="32" style={{ display: 'block' }} />
           </div>
           <div className="sidebar-brand-copy">
-            <span>FirmaDoc</span>
-            <small>Plataforma web</small>
+            <span>LinkedSign</span>
+            <small>Desarrollo de Soluciones</small>
           </div>
           <button
             type="button"
@@ -151,6 +151,10 @@ export default function Layout({ children }) {
       <main className="main-content">
         <div className="topbar">
           <div className="topbar-title">{currentTitle}</div>
+          <div className="topbar-brand-logo" aria-hidden="true">
+            <span className="topbar-brand-by">by</span>
+            <img src="/logoLinkedCorpTxtBlack.png" alt="LinkedCorp" />
+          </div>
         </div>
         {children}
       </main>

frontend/src/index.css

@@ -111,14 +111,19 @@ select {
   width: 32px;
   height: 32px;
   border-radius: 8px;
-  background: var(--c-primary);
-  color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
+.sidebar-brand-mark img {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  object-fit: contain;
+}
+
 .sidebar-brand-copy {
   display: flex;
   flex-direction: column;
@@ -317,6 +322,31 @@ select {
   color: var(--c-text);
 }
 
+.topbar-brand-logo {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.topbar-brand-by {
+  font-size: 11px;
+  line-height: 1;
+  font-weight: 500;
+  color: var(--c-muted);
+  text-transform: lowercase;
+}
+
+.topbar-brand-logo img {
+  display: block;
+  height: 24px;
+  width: auto;
+  max-width: 180px;
+  object-fit: contain;
+}
+
 /* ─── Page ───────────────────────────────────────────────────── */
 .page {
   padding: 20px 24px;
@@ -2022,6 +2052,10 @@ select {
     flex-basis: 100%;
   }
 
+  .topbar-brand-logo {
+    display: none;
+  }
+
   .page {
     padding: 16px;
     max-width: 100%;