From 0a9c672c75da4ced94eca1c522fb0422fdf7b4d3 Mon Sep 17 00:00:00 2001
From: Juan Pablo Restrepo <juanpablorestrepo95@gmail.com>
Date: Sat, 6 Jun 2026 11:26:14 -0500
Subject: [PATCH] boton cerrar sesion arriba a la derecha

---
 data/sesiones.json                 | 10 +++-
 frontend/administrativo/admin.css  | 76 ++++++++++++++++++++++--------
 frontend/administrativo/index.html | 13 ++---
 3 files changed, 71 insertions(+), 28 deletions(-)

diff --git a/data/sesiones.json b/data/sesiones.json
index 2ff03c7..2e1ff4e 100644
--- a/data/sesiones.json
+++ b/data/sesiones.json
@@ -66,9 +66,15 @@
     "createdAt": 1780726025468
   },
   {
-    "token": "901dc29fdf21ee6ac2a96fd6844fe956f898eaf748c3f9008a34362f1febc87c",
+    "token": "b7c6e592ca90af4ad27604116f26c96cdc706e060d3da7b2648404c0684ab368",
     "usuario": "admin",
     "rol": "admin",
-    "createdAt": 1780726303152
+    "createdAt": 1780759863126
+  },
+  {
+    "token": "b1798edc58b621eea0e8b04adc9507a1518451f4088313550bdb573d537cbe65",
+    "usuario": "admin",
+    "rol": "admin",
+    "createdAt": 1780762827102
   }
 ]
diff --git a/frontend/administrativo/admin.css b/frontend/administrativo/admin.css
index e01be93..514696c 100644
--- a/frontend/administrativo/admin.css
+++ b/frontend/administrativo/admin.css
@@ -413,15 +413,6 @@ select {
   box-shadow: 0 6px 24px rgba(167, 139, 250, 0.18);
 }
 
-.topbar-divider {
-  width: 1px;
-  height: 24px;
-  background: var(--line);
-  margin: 0 6px;
-  flex-shrink: 0;
-  align-self: center;
-}
-
 .nav-item {
   display: inline-flex;
   align-items: center;
@@ -462,13 +453,66 @@ select {
 
 /* Visibilidad de nav-items y secciones admin-only se controla por JS (aplicarPermisos) */
 
-.nav-item-logout {
-  margin-left: auto;
+/* ════════════════════════════════
+   BOTÓN CERRAR SESIÓN — fixed en la esquina superior derecha
+   Independiente de la topbar. Vive en la esquina para tener
+   acceso rápido sin importar la vista/scroll.
+   ════════════════════════════════ */
+.btn-logout-fixed {
+  position: fixed;
+  top: 18px;
+  right: 20px;
+  z-index: 60; /* por encima de la topbar (z:50) */
+
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1.5px solid var(--line-strong);
+  border-radius: var(--radius-pill);
+  font-family: inherit;
+  font-size: 0.92rem;
+  font-weight: 500;
+  color: var(--ink-soft);
+  white-space: nowrap;
+  cursor: pointer;
+  box-shadow: 0 6px 24px rgba(167, 139, 250, 0.18);
+  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
 }
 
-.nav-item-logout:hover {
+.btn-logout-fixed:hover {
   background: var(--danger-soft);
+  border-color: rgba(220, 38, 38, 0.4);
   color: var(--danger);
+  transform: translateY(-1px);
+  box-shadow: 0 8px 28px rgba(220, 38, 38, 0.22);
+}
+
+.btn-logout-fixed .logout-icon {
+  font-size: 1rem;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+@media (max-width: 760px) {
+  .btn-logout-fixed {
+    top: 12px;
+    right: 12px;
+    padding: 9px 14px;
+    font-size: 0.85rem;
+  }
+}
+
+@media (max-width: 380px) {
+  .btn-logout-fixed .logout-label {
+    display: none; /* solo el icono ↪ en pantallas muy chicas */
+  }
+  .btn-logout-fixed {
+    padding: 9px 12px;
+  }
 }
 
 /* ════════════════════════════════
@@ -1607,14 +1651,6 @@ select {
   .nav-icon {
     font-size: 1rem;
   }
-
-  .topbar-divider {
-    display: none;
-  }
-
-  .nav-item-logout {
-    margin-left: 0;
-  }
 }
 
 @media (max-width: 480px) {
diff --git a/frontend/administrativo/index.html b/frontend/administrativo/index.html
index 31638bd..803847d 100644
--- a/frontend/administrativo/index.html
+++ b/frontend/administrativo/index.html
@@ -7,7 +7,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="admin.css?v=16">
+  <link rel="stylesheet" href="admin.css?v=17">
 </head>
 <body>
 
@@ -85,11 +85,6 @@
           <span class="nav-icon">👥</span>
           <span class="nav-label">Usuarios</span>
         </button>
-        <span class="topbar-divider" aria-hidden="true"></span>
-        <button type="button" class="nav-item nav-item-logout" id="btnLogout">
-          <span class="nav-icon">↪</span>
-          <span class="nav-label">Cerrar sesión</span>
-        </button>
       </div>
     </nav>
 
@@ -377,6 +372,12 @@
       </section>
 
     </main>
+
+    <!-- BOTÓN FIJO: Cerrar sesión (esquina superior derecha) -->
+    <button type="button" class="btn-logout-fixed" id="btnLogout" aria-label="Cerrar sesión">
+      <span class="logout-icon" aria-hidden="true">↪</span>
+      <span class="logout-label">Cerrar sesión</span>
+    </button>
   </div>
 
   <!-- MODAL: Crear usuario -->