Actualizar imagen e iconos de marca

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%;