/* =====================================================================
   Sidebar colapsable con submenús flotantes (extraído de CIMENTA)
   - Expandido: grupos tipo acordeón (solo uno abierto).
   - Colapsado (solo íconos): cada grupo abre un submenú flotante al pasar el mouse.
   - Móvil (<= 991px): panel deslizable con fondo oscuro.
   Personaliza los colores redefiniendo las variables --sb-* en :root.
   ===================================================================== */
:root{
  --sb-w:276px; --sb-w-min:80px; --sb-top-h:68px;
  --sb-brand:#E8590C; --sb-brand-600:#C2410C; --sb-brand-50:#FFF4EC;
  --sb-ink:#1C1917; --sb-ink-2:#44403C; --sb-muted:#78716C;
  --sb-line:#E7E2DC; --sb-line-2:#F1ECE6; --sb-surface:#FFFFFF;
  --sb-shadow:0 1px 2px rgba(28,25,23,.04),0 8px 24px -12px rgba(28,25,23,.12);
}
[data-bs-theme=dark],[data-theme=dark]{
  --sb-ink:#F5F2EE; --sb-ink-2:#D6D0C9; --sb-muted:#A39B92; --sb-line:#2E2A26; --sb-line-2:#24211E;
  --sb-surface:#1A1816; --sb-brand-50:#2A1A10; --sb-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.6);
}

.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sb-w);background:var(--sb-surface);border-right:1px solid var(--sb-line);display:flex;flex-direction:column;z-index:1040;transition:width .25s ease,transform .25s ease}
.sidebar a{text-decoration:none}
.sb-brand{height:var(--sb-top-h);display:flex;align-items:center;gap:.7rem;padding:0 1.2rem;border-bottom:1px solid var(--sb-line-2);flex-shrink:0}
.sb-logo{width:40px;height:40px;border-radius:12px;background:var(--sb-brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.15rem;flex-shrink:0;overflow:hidden}
.sb-logo img{width:100%;height:100%;object-fit:cover}
.sb-name{line-height:1.1;overflow:hidden;white-space:nowrap;color:var(--sb-ink)}
.sb-name b{font-weight:800;font-size:1.02rem;display:block;text-overflow:ellipsis;overflow:hidden}
.sb-name small{color:var(--sb-muted);font-size:.74rem}
.sb-nav{flex:1;overflow-y:auto;padding:.8rem .7rem 1.5rem;scrollbar-width:thin}
.sb-group{margin-bottom:.25rem}
.sb-group-btn{width:100%;display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;border:0;background:none;color:var(--sb-muted);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;border-radius:10px;cursor:pointer}
.sb-group-btn:hover{color:var(--sb-ink);background:var(--sb-line-2)}
.sb-group-btn .chev{margin-left:auto;transition:transform .2s}
.sb-group.open .sb-group-btn{color:var(--sb-ink)}
.sb-group.open .sb-group-btn .chev{transform:rotate(90deg)}
.sb-group-btn > i:first-child{font-size:1rem}
.sb-items{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.sb-group.open .sb-items{grid-template-rows:1fr}
.sb-items > div{overflow:hidden}
.sb-link{display:flex;align-items:center;gap:.75rem;padding:.6rem .8rem .6rem 1rem;margin:2px 0;border-radius:11px;color:var(--sb-ink-2);font-weight:550;font-size:.92rem;white-space:nowrap;position:relative}
.sb-link i{font-size:1.1rem;width:22px;text-align:center;color:var(--sb-muted)}
.sb-link:hover{background:var(--sb-line-2);color:var(--sb-ink)}
.sb-link.active{background:var(--sb-brand-50);color:var(--sb-brand-600);font-weight:700}
.sb-link.active i{color:var(--sb-brand)}
.sb-link.active::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--sb-brand)}
.sb-link .num{margin-left:auto;font-size:.68rem;font-weight:700;font-style:normal;color:var(--sb-muted);background:var(--sb-line-2);padding:.1rem .45rem;border-radius:20px}
.sb-foot{padding:.8rem;border-top:1px solid var(--sb-line-2)}
.sb-user{display:flex;align-items:center;gap:.65rem;padding:.5rem;border-radius:12px;color:var(--sb-ink)}
.sb-user:hover{background:var(--sb-line-2)}
.sb-user .who{overflow:hidden;white-space:nowrap;line-height:1.15}
.sb-user .who small{color:var(--sb-muted)}
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(15,12,10,.45);z-index:1039}

/* Contenido principal: deja el espacio del menú */
.main{margin-left:var(--sb-w);min-width:0;transition:margin-left .25s ease}

/* ---------- Colapsado (solo íconos) ---------- */
body.sb-collapsed .sidebar{width:var(--sb-w-min)}
body.sb-collapsed .main{margin-left:var(--sb-w-min)}
body.sb-collapsed .sb-name,body.sb-collapsed .sb-group-btn span,body.sb-collapsed .sb-group-btn .chev,body.sb-collapsed .sb-link span,body.sb-collapsed .sb-link .num,body.sb-collapsed .sb-user .who{display:none}
body.sb-collapsed .sb-brand{padding:0 1.2rem;justify-content:center}
body.sb-collapsed .sb-group-btn{justify-content:center;padding:.5rem}
body.sb-collapsed .sb-link{justify-content:center;padding:.65rem}
/* CLAVE: colapsado, los ítems NUNCA se muestran en línea (ni del grupo abierto). Si se mostraran, al pasar
   a flotante saldrían del flujo, los grupos de abajo saltarían bajo el cursor y el submenú cambiaría/cerraría. */
body.sb-collapsed .sb-group .sb-items{grid-template-rows:0fr;transition:none}
/* El grupo que contiene la página actual queda resaltado */
body.sb-collapsed .sb-group:has(.sb-link.active) .sb-group-btn{color:var(--sb-brand);background:var(--sb-brand-50)}
/* Submenú flotante */
body.sb-collapsed .sb-group.sb-flyout .sb-items{position:fixed;left:var(--sb-w-min);width:240px;display:block;grid-template-rows:1fr;max-height:calc(100vh - 24px);overflow-y:auto;padding:.45rem;background:var(--sb-surface);border:1px solid var(--sb-line);border-radius:14px;box-shadow:var(--sb-shadow);z-index:1050}
body.sb-collapsed .sb-group.sb-flyout .sb-items>div{overflow:visible}
body.sb-collapsed .sb-group.sb-flyout .sb-link{justify-content:flex-start;padding:.6rem .8rem .6rem 1rem}
body.sb-collapsed .sb-group.sb-flyout .sb-link span,body.sb-collapsed .sb-group.sb-flyout .sb-link .num{display:initial}

/* ---------- Móvil ---------- */
@media (max-width:991px){
  .sidebar{transform:translateX(-100%);width:var(--sb-w)!important;box-shadow:0 0 60px rgba(0,0,0,.25)}
  body.sb-open .sidebar{transform:none}
  body.sb-open .sb-backdrop{display:block}
  .main{margin-left:0!important}
  body.sb-collapsed .sb-name,body.sb-collapsed .sb-group-btn span,body.sb-collapsed .sb-group-btn .chev,body.sb-collapsed .sb-link span,body.sb-collapsed .sb-user .who{display:initial}
  body.sb-collapsed .sb-group.open .sb-items{grid-template-rows:1fr}
  body.sb-collapsed .sb-group-btn{justify-content:flex-start;padding:.6rem .75rem}
  body.sb-collapsed .sb-link{justify-content:flex-start;padding:.6rem .8rem .6rem 1rem}
}