/* ============================================================================
   LX-LATERAL — Sidebar del area de cliente (diseno de Rafa, prefijo .lxl-).
   Aplicado SOBRE la estructura real (#sidebar-dash / #sidebar-profile con
   ul.tabs-profile) para conservar el cableado: pestañas (custom.js, .current),
   revelado por rol (#sidebar-item-*), .logout-button y hooks de almacenamiento
   (.status-membership-plan / .status-storage-usage / .status-membership-progress-bar2).
   Colapsado enganchado a html.lxc-collapsed (hamburguesa de la barra superior).
   ========================================================================== */
#sidebar-dash,#sidebar-profile{
  --lxl-noche:#0D1031; --lxl-magenta:#AE419C; --lxl-fondo:#F4F2EF;
  --lxl-txt-3:#6b6a79; --lxl-gris:#8a8996; --lxl-borde:#DAD8E0; --lxl-borde-2:#E3E2E8; --lxl-rojo:#B3261E;
}

/* Contenedor (id para vencer reglas previas): 236px / colapsado 76px.
   STICKY bajo la barra (72px): en flujo, se ancla a top:72px al hacer scroll
   (override del position:fixed inline). align-self:flex-start para no estirarse
   a la altura del contenido dentro del .row (display:flex). */
#sidebar-dash,#sidebar-profile{
  position:fixed!important;top:72px!important;left:0!important;
  width:236px!important;max-width:236px!important;height:calc(100vh - 72px)!important;
  font-family:'Montserrat',system-ui,sans-serif;
  background:var(--lxl-fondo)!important;border-right:1px solid var(--lxl-borde);
  /* la visibilidad la sigue dando d-none/d-lg-flex del markup; aqui solo el layout. */
  flex-direction:column;justify-content:space-between;gap:20px;
  padding:22px 0!important;overflow:hidden auto;
  transition:width .22s cubic-bezier(.3,.1,.3,1),max-width .22s;
}
html.lxc-collapsed #sidebar-dash,html.lxc-collapsed #sidebar-profile{width:76px!important;max-width:76px!important}
html.lxc-collapsed .text-menu,html.lxc-collapsed .lxl-capacidad{display:none!important}

/* Navegacion. PREFIJO #sidebar-dash/#sidebar-profile A PROPOSITO: index.css tiene
   reglas antiguas `#sidebar-dash ul li ...` de especificidad de ID (margin-top:1rem,
   padding:5px 3px, font-weight:600, hover gris #C8C9CF, .text-menu margin-left:10px)
   que pisaban las clases .lxl-. Con id+clase vencemos. NO se toca index.css (SCSS sync). */
#sidebar-dash .lxl-nav,#sidebar-profile .lxl-nav{display:flex;flex-direction:column;gap:4px;padding:0 12px;margin:0!important;list-style:none;width:100%!important;max-width:100%!important}
#sidebar-dash .lxl-nav li,#sidebar-profile .lxl-nav li{width:100%;margin:0!important;list-style:none}
#sidebar-dash .lxl-btn,#sidebar-profile .lxl-btn{height:46px;padding:0 14px;display:flex;align-items:center;gap:14px;border:0;border-radius:6px;background:none;color:var(--lxl-noche);font-size:14px;font-weight:400;text-align:left;text-decoration:none;text-wrap:nowrap;cursor:pointer;transition:background .16s,color .16s}
/* color !important: pink-theme.css tiene a:hover{color:#353f4f!important} que
   forzaba gris el texto al pasar el raton. */
#sidebar-dash .lxl-btn:hover,#sidebar-profile .lxl-btn:hover{background:rgba(174,65,156,.06);color:var(--lxl-magenta)!important;border-radius:6px}
#sidebar-dash .lxl-nav li.current .lxl-btn:hover,#sidebar-profile .lxl-nav li.current .lxl-btn:hover{color:var(--lxl-magenta)!important}
/* Activo = li.current (lo marca custom.js). */
#sidebar-dash .lxl-nav li.current .lxl-btn,#sidebar-profile .lxl-nav li.current .lxl-btn{background:rgba(174,65,156,.10);color:var(--lxl-magenta);font-weight:500}
#sidebar-dash .lxl-btn .text-menu,#sidebar-profile .lxl-btn .text-menu{margin-left:0;font-weight:400}
#sidebar-dash .lxl-nav li.current .lxl-btn .text-menu,#sidebar-profile .lxl-nav li.current .lxl-btn .text-menu{font-weight:500}
#sidebar-dash .lxl-salir .text-menu,#sidebar-profile .lxl-salir .text-menu{font-weight:400}
.lxl-ico{flex:none;display:grid;place-items:center;width:24px;height:24px}
.lxl-ico svg{display:block}
.lxl-btn .text-menu,.lxl-salir .text-menu{white-space:nowrap}

/* Pie: tarjeta de capacidad + Salir. */
.lxl-pie{display:flex;flex-direction:column;gap:16px;padding:0 12px}
.lxl-capacidad{display:flex;flex-direction:column;gap:9px;padding:16px 14px;background:#fff;border:1px solid var(--lxl-borde-2);border-radius:6px}
.lxl-cap-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lxl-cap-rot{font-size:11px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--lxl-gris)}
.lxl-cap-plan{font-size:12px;font-weight:500;color:var(--lxl-magenta)}
.lxl-cap-riel{height:5px;border-radius:3px;background:var(--lxl-borde-2);overflow:hidden}
.lxl-cap-uso{height:100%;background:var(--lxl-magenta)}
.lxl-cap-txt{font-size:12px;font-weight:300;color:var(--lxl-txt-3)}
.lxl-salir{height:46px;padding:0 14px;display:flex;align-items:center;gap:14px;border:0;border-radius:6px;background:none;color:var(--lxl-rojo);font-size:14px;font-weight:400;text-align:left;text-decoration:none;cursor:pointer;transition:background .16s}
/* Salir: misma interaccion que los botones del nav pero en ROJO. color !important
   vence a pink-theme a:hover{color:#353f4f!important}. */
#sidebar-dash .lxl-salir:hover,#sidebar-profile .lxl-salir:hover{background:rgba(179,38,30,.08);color:var(--lxl-rojo)!important}

/* Colapsado: SOLO se oculta el texto (regla arriba). Los iconos NO se mueven: con
   el mismo padding (nav 12px + boton 14px) el icono queda centrado en el riel de
   76px (centro a 38px = 76/2), idéntico a abierto -> sin saltos. */