From eaa96fbc248e27eb153eae72e5db56b4c62c2492 Mon Sep 17 00:00:00 2001
From: Nurfog <juan.allende@gmail.com>
Date: Wed, 16 Sep 2026 14:55:10 -0300
Subject: [PATCH] style: sidebar con lenguaje inventario (gradiente navy,
 glass, acento)

---
 frontend/src/app/globals.css | 83 +++++++++++++++++++++++++++---------
 1 file changed, 62 insertions(+), 21 deletions(-)

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index af5bb97..5bcbb94 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -62,11 +62,13 @@ body {
   color: #fff !important;
 }
 
-/* Sidebar */
+/* Sidebar (lenguaje inventario: gradiente navy→azul, glass, acento celeste) */
 .sidebar {
   width: var(--sidebar-width);
   min-height: 100vh;
-  background: linear-gradient(180deg, #00285d 0%, #001a3d 100%);
+  background:
+    radial-gradient(220px 220px at 110% -40px, rgba(1, 95, 201, 0.35), transparent 70%),
+    linear-gradient(180deg, #16243d 0%, #0b1c36 60%, #0a2c5e 100%);
   color: #fff;
   position: fixed;
   top: 0;
@@ -75,46 +77,81 @@ body {
   display: flex;
   flex-direction: column;
   transition: transform 0.3s ease;
+  box-shadow: 0.5rem 0 1.25rem rgba(22, 36, 61, 0.13);
 }
 
 .sidebar .nav-link {
-  color: rgba(255, 255, 255, 0.7);
-  padding: 0.75rem 1.25rem;
-  border-radius: var(--radius-sm);
-  margin: 0.125rem 0.75rem;
+  color: rgba(255, 255, 255, 0.72);
+  padding: 0.6rem 1rem;
+  border-radius: 12px;
+  margin: 0.15rem 0.75rem;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.7rem;
   font-size: 0.9rem;
   transition: all 0.2s ease;
   text-decoration: none;
+  border: 1px solid transparent;
 }
 
 .sidebar .nav-link:hover {
   color: #fff;
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.08);
+  transform: translateX(2px);
 }
 
 .sidebar .nav-link.active {
   color: #fff;
-  background-color: rgba(255, 255, 255, 0.15);
-  font-weight: 500;
+  background-color: rgba(255, 255, 255, 0.14);
+  border-color: rgba(255, 255, 255, 0.16);
+  box-shadow: inset 3px 0 0 #9ed0ff;
+  font-weight: 600;
 }
 
 .sidebar .nav-link i {
-  font-size: 1.1rem;
-  width: 24px;
-  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
+  font-size: 1.05rem;
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.sidebar .nav-link.active i {
+  color: #9ed0ff;
+  background: rgba(255, 255, 255, 0.16);
+}
+
+.sidebar nav .text-uppercase {
+  color: rgba(158, 208, 255, 0.75) !important;
+  font-weight: 700;
 }
 
 .sidebar-brand {
-  padding: 1.5rem 1.25rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 1.25rem 1.25rem 1.1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }
 
+.sidebar-brand > i {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 44px;
+  width: 44px;
+  height: 44px;
+  font-size: 1.45rem !important;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
 .sidebar-brand h5 {
   margin: 0;
   font-weight: 700;
@@ -123,23 +160,27 @@ body {
 }
 
 .sidebar-user {
-  padding: 1.25rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  margin-top: auto;
+  padding: 0.9rem;
+  margin: auto 0.75rem 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.07);
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }
 
 .sidebar-user .avatar {
+  flex: 0 0 40px;
   width: 40px;
   height: 40px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  background: linear-gradient(135deg, #16243d, #015fc9);
+  border: 1px solid rgba(255, 255, 255, 0.25);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 600;
+  font-weight: 700;
   font-size: 0.9rem;
 }