From 8c0e683b70bd5c45a0cd726327f2942fcbe98a9d Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Mon, 9 Mar 2026 12:59:10 -0500
Subject: [PATCH] Update app branding with new icono and titulosib logos

---
 frontend/src/components/AppHeader.vue     | 33 ++++++++++++-----------
 frontend/src/views/AdminPanel.vue         | 15 ++++++++---
 frontend/src/views/AuthView.vue           | 18 +++++--------
 frontend/src/views/RoutesView.vue         |  2 +-
 frontend/src/views/SplashScreen.vue       |  6 ++---
 frontend/src/views/StrategicAnalytics.vue | 32 +++++++++++++++++++---
 6 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index b7f7460..9f815fe 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -87,7 +87,9 @@
       </Transition>
     </div>
     
-    <h1 class="header-title" @click="goToHome">{{ t('header.title') }}</h1>
+    <div class="header-title-container" @click="goToHome">
+      <img src="/titulosib.png" alt="SIB Logo" class="header-logo-img" />
+    </div>
     
     <div class="header-actions">
       <!-- Side Menu handles all actions for a cleaner UI -->
@@ -205,27 +207,28 @@ const handleLogout = () => {
     }
 }
 
-.header-title {
-  font-size: 24px;
-  font-weight: 800;
-  letter-spacing: -0.04em;
-  color: var(--text-primary);
-  margin: 0;
-  text-align: center;
+.header-title-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   grid-column: 2;
   cursor: pointer;
+  height: 40px;
   transition: all 0.3s ease;
-  text-transform: uppercase;
 }
 
-:global(.dark) .header-title {
-  color: var(--active-color);
-  text-shadow: 0 0 15px rgba(254, 231, 21, 0.3);
+.header-logo-img {
+  height: 100%;
+  max-width: 140px;
+  object-fit: contain;
 }
 
-.header-title:hover {
-  transform: scale(1.02);
-  letter-spacing: 0.05em;
+:global(.dark) .header-logo-img {
+  filter: drop-shadow(0 0 10px rgba(254, 231, 21, 0.2));
+}
+
+.header-title-container:hover {
+  transform: scale(1.05);
 }
 
 
diff --git a/frontend/src/views/AdminPanel.vue b/frontend/src/views/AdminPanel.vue
index 1753d98..fc1ee47 100644
--- a/frontend/src/views/AdminPanel.vue
+++ b/frontend/src/views/AdminPanel.vue
@@ -3,7 +3,8 @@
     <div class="header-section">
       <div class="badge">SISTEMA CENTRAL</div>
       <h1>Panel de Control</h1>
-      <p class="subtitle">Ecosistema Administrativo SIB</p>
+      <img src="/titulosib.png" alt="SIB Logo" class="admin-brand-header" />
+      <p class="subtitle">Ecosistema Administrativo Central</p>
     </div>
 
     <div class="dashboard-sections">
@@ -146,12 +147,20 @@ h1 {
   margin: 0;
 }
 
+.admin-brand-header {
+  height: 50px;
+  max-width: 200px;
+  margin: 0 auto 10px;
+  object-fit: contain;
+}
+
 .subtitle {
   color: var(--text-secondary);
-  font-size: 1rem;
+  font-size: 0.9rem;
   font-weight: 500;
-  margin-top: 6px;
+  margin-top: 2px;
   letter-spacing: 0.05em;
+  text-transform: uppercase;
 }
 
 .dashboard-sections {
diff --git a/frontend/src/views/AuthView.vue b/frontend/src/views/AuthView.vue
index 50b6c68..50149fd 100644
--- a/frontend/src/views/AuthView.vue
+++ b/frontend/src/views/AuthView.vue
@@ -45,8 +45,8 @@ const toggleAuth = () => {
       <div class="auth-content-grid">
         <!-- Branding Side (Desktop only) -->
         <div class="branding-section">
-          <img src="/sib.png" alt="SIB Logo" class="brand-logo" />
-          <h1 class="brand-title">SIB</h1>
+          <img src="/icono.png" alt="SIB Icon" class="brand-logo" />
+          <img src="/titulosib.png" alt="SIB Logo" class="brand-title-img" />
           <p class="brand-tagline">{{ t('auth.brandingSubtitle') }}</p>
           <div class="brand-features">
             <div class="feature-item">
@@ -69,7 +69,7 @@ const toggleAuth = () => {
           <div class="glass-card auth-card">
             <!-- Mobile Logo -->
             <div class="mobile-header">
-              <img src="/sib.png" alt="SIB Logo" class="mobile-logo" />
+              <img src="/titulosib.png" alt="SIB Logo" class="mobile-logo" />
             </div>
 
             <!-- Tab Selector -->
@@ -192,15 +192,9 @@ const toggleAuth = () => {
   filter: drop-shadow(0 0 20px rgba(254, 231, 21, 0.4));
 }
 
-.brand-title {
-  font-size: 5rem;
-  font-weight: 800;
-  margin: 0;
-  letter-spacing: -0.04em;
-  background: linear-gradient(to right, #fff, var(--active-color));
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
+.brand-title-img {
+  width: 280px;
+  filter: drop-shadow(0 0 15px rgba(254, 231, 21, 0.3));
 }
 
 .brand-tagline {
diff --git a/frontend/src/views/RoutesView.vue b/frontend/src/views/RoutesView.vue
index 62f7db9..9d8b28d 100644
--- a/frontend/src/views/RoutesView.vue
+++ b/frontend/src/views/RoutesView.vue
@@ -85,7 +85,7 @@ const correlimientos = computed(() => {
       <button @click="router.back()" class="size-10 flex items-center justify-center rounded-full bg-slate-100 dark:bg-card-dark text-slate-600 dark:text-gray-300 active:scale-95 transition-transform">
         <span class="material-icons text-[20px]">arrow_back</span>
       </button>
-      <h1 class="text-xl font-extrabold tracking-tight text-primary uppercase italic">SIB</h1>
+      <img src="/titulosib.png" alt="SIB Logo" class="h-6 object-contain" />
       <div class="size-10"></div>
     </div>
 
diff --git a/frontend/src/views/SplashScreen.vue b/frontend/src/views/SplashScreen.vue
index b335832..2ef501e 100644
--- a/frontend/src/views/SplashScreen.vue
+++ b/frontend/src/views/SplashScreen.vue
@@ -4,7 +4,7 @@
       <!-- Logo with animation -->
       <div class="logo-container" :class="{ 'logo-visible': logoVisible }">
         <div class="logo-box">
-          <img src="/icon-192.png" alt="SIB" class="logo-icon" />
+          <img src="/icono.png" alt="SIB" class="logo-icon" />
         </div>
       </div>
 
@@ -147,8 +147,8 @@ async function performInitializationTasks() {
 .logo-box {
   width: 140px;
   height: 140px;
-  background-color: #fee715;
-  border-radius: 28px;
+  background-color: transparent;
+  border-radius: 0;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/src/views/StrategicAnalytics.vue b/frontend/src/views/StrategicAnalytics.vue
index 0ae5296..6b9ded2 100644
--- a/frontend/src/views/StrategicAnalytics.vue
+++ b/frontend/src/views/StrategicAnalytics.vue
@@ -8,8 +8,11 @@
         </button>
         <div class="badge">INTELIGENCIA ESTRATÉGICA</div>
       </div>
-      <h1>Centro de Operaciones</h1>
-      <p class="subtitle">Análisis segmentado de rendimiento SIB</p>
+      <div class="analytics-header-branding">
+        <img src="/titulosib.png" alt="SIB Logo" class="analytics-logo" />
+        <h1>Centro de Operaciones</h1>
+      </div>
+      <p class="subtitle">Análisis estratégico y rendimiento de red</p>
     </div>
 
     <!-- TACTICAL TAB SELECTOR -->
@@ -631,8 +634,29 @@ onMounted(async () => {
   transform: translateY(-2px);
   box-shadow: 0 4px 15px rgba(254, 231, 21, 0.3);
 }
-h1 { font-size: 2.2rem; font-weight: 900; margin: 0; }
-.subtitle { color: var(--text-secondary); margin-top: 6px; }
+.analytics-header-branding {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 2px;
+}
+
+.analytics-logo {
+  height: 44px;
+  object-fit: contain;
+}
+
+h1 { font-size: 2.2rem; font-weight: 900; margin: 0; letter-spacing: -0.04em; }
+
+.subtitle { 
+  color: var(--text-secondary); 
+  margin-top: 4px; 
+  text-transform: uppercase;
+  font-size: 0.85rem;
+  letter-spacing: 0.1em;
+  font-weight: 600;
+}
 
 /* TABS */
 .tabs-control { display: flex; gap: 12px; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }