/* panel-sidebar.css — estilos ÚNICOS del sidebar del panel nuevo (Ola 0, #758).
 *
 * buildSideNav() (panel-common.js) inyecta el mismo markup en todas las
 * páginas: .sidebar-logo, .sidebar-section, .sidebar-label, .nav-item,
 * .nav-icon, .nav-label, .gp-nav-badge, .sidebar-bottom, .sidebar-user.
 * Hasta el 2026-09-08 cada página traía su copia inline de estas reglas
 * (40 páginas, 23 variantes) y tres páginas no traían ninguna → menú roto
 * (Cliente 360, Sucursales, Alta Gestión). Este archivo es la fuente única.
 *
 * Se enlaza ANTES del <style> inline de cada página, así una página puede
 * seguir ajustando algo puntual (gana la regla posterior). Las variables de
 * abajo son defaults: el :root de cada página, si las define, las pisa.
 */
:root {
  --sidebar-w: 220px;
  --sidebar-bg: #191919;
  --sidebar-text: #9b9b9b;
  --sidebar-text-active: #fff;
  --sidebar-hover: #2a2a2a;
  --sidebar-active: #2f2f2f;
  --sidebar-border: #333;
  --accent: #2563eb;
}

.sidebar {
  width: var(--sidebar-w); background: var(--sidebar-bg);
  display: flex; flex-direction: column; flex-shrink: 0;
  border-right: 1px solid var(--sidebar-border);
  /* Páginas con banner superior fijan --gp-sidebar-top (25/30/33px) en su :root
     para que el sidebar arranque debajo del banner y no exceda el viewport. */
  height: calc(100vh - var(--gp-sidebar-top, 0px));
  position: sticky; top: var(--gp-sidebar-top, 0px); overflow-y: auto;
}
.sidebar-logo {
  padding: 18px 16px 14px; border-bottom: 1px solid var(--sidebar-border);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-logo .logo-mark {
  width: 26px; height: 26px; background: var(--accent); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.sidebar-logo .logo-text { font-size: 14px; font-weight: 600; color: #fff; letter-spacing: -0.2px; }
.sidebar-logo .logo-sub { font-size: 10px; color: var(--sidebar-text); }
.sidebar-section { padding: 8px 0; }
.sidebar-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase;
  color: #555; padding: 6px 14px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 14px;
  font-size: 13px; color: var(--sidebar-text); text-decoration: none;
  transition: background 0.1s, color 0.1s; position: relative; cursor: pointer;
}
.nav-item:hover { background: var(--sidebar-hover); color: #ccc; }
.nav-item.active { background: var(--sidebar-active); color: var(--sidebar-text-active); }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; background: var(--accent); border-radius: 0 2px 2px 0;
}
.nav-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.nav-label { min-width: 0; flex: 1 1 auto; }
/* Globito de pendientes (refreshNavBadges, GET /api/nav-badges). Oculto en 0. */
.gp-nav-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px;
  text-align: center; display: none; flex-shrink: 0;
}
.gp-nav-badge.show { display: inline-block; }
.nav-badge {
  margin-left: auto; font-size: 10px; font-weight: 600;
  background: #333; color: #bbb; padding: 1px 6px; border-radius: 10px;
}
.nav-item.active .nav-badge { background: var(--accent); color: #fff; }
.nav-badge.alert { background: #7f1d1d; color: #fca5a5; }
.nav-item.dead { opacity: 0.4; cursor: default; }
.nav-item.dead:hover { background: none; color: var(--sidebar-text); }
.sidebar-bottom { margin-top: auto; border-top: 1px solid var(--sidebar-border); padding: 10px 0; }
.sidebar-user {
  display: flex; align-items: center; gap: 9px; padding: 8px 14px;
  font-size: 12px; color: var(--sidebar-text);
}
.sidebar-user .avatar {
  width: 26px; height: 26px; border-radius: 50%; background: #3a3a3a;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #aaa; flex-shrink: 0;
}
.sidebar-user .u-name { color: #ddd; font-weight: 500; }
.sidebar-user .u-role { font-size: 10px; color: #555; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 40; }