/* R12_R21 · Sidebar compacto + scrollbar corporativo.
   Capa visual aislada: no modifica app.js ni la lógica de navegación. */
:root{--sidebar-collapsed:76px}

/* El área navegable ocupa únicamente el espacio disponible del sidebar. */
.sidebar .nav-scroll{
  flex:1 1 auto;
  min-height:0;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.24) transparent;
}
.sidebar .nav-scroll::-webkit-scrollbar{width:5px;height:5px}
.sidebar .nav-scroll::-webkit-scrollbar-track{background:transparent}
.sidebar .nav-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);
  border-radius:999px;
}
.sidebar .nav-scroll::-webkit-scrollbar-thumb:hover{background:rgba(254,76,2,.68)}
.sidebar .nav-scroll::-webkit-scrollbar-corner{background:transparent}

/* Control de contracción: queda en el borde derecho sin ocupar el menú. */
.sidebar-collapse-btn{
  position:absolute;
  right:-13px;
  top:27px;
  z-index:3;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(0,29,92,.16);
  border-radius:999px;
  background:#fff;
  color:#001D5C;
  box-shadow:0 5px 16px rgba(0,29,92,.18);
  font-size:18px;
  font-weight:900;
  line-height:1;
  transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
.sidebar-collapse-btn:hover{
  background:#FE4C02;
  color:#fff;
  border-color:#FE4C02;
  box-shadow:0 7px 18px rgba(254,76,2,.25);
}

@media(min-width:901px){
  .sidebar,.app-main{transition:width .22s var(--ease),margin-left .22s var(--ease)}
  .sidebar{overflow:visible}

  .app-shell.sidebar-collapsed .sidebar{
    width:var(--sidebar-collapsed);
    padding-left:10px;
    padding-right:10px;
  }
  .app-shell.sidebar-collapsed .app-main{margin-left:var(--sidebar-collapsed)}

  /* En compacto queda únicamente el isotipo de Dodo. */
  .app-shell.sidebar-collapsed .sidebar-head{
    justify-content:center;
    padding-left:0;
    padding-right:0;
  }
  .app-shell.sidebar-collapsed .sidebar-head .brand-lockup{justify-content:center;gap:0}
  .app-shell.sidebar-collapsed .sidebar-head .brand-lockup>div:last-child{display:none!important}
  .app-shell.sidebar-collapsed .sidebar .brand-mark{margin:0;flex:0 0 42px}

  /* Etiquetas fuera; los iconos/números permanecen centrados. */
  .app-shell.sidebar-collapsed .nav-label{display:none!important}
  .app-shell.sidebar-collapsed .nav-scroll{padding-top:7px;padding-bottom:10px}
  .app-shell.sidebar-collapsed .nav-mode-group{gap:6px;margin:2px 0 7px}
  .app-shell.sidebar-collapsed .nav-item{
    justify-content:center;
    gap:0;
    min-height:43px;
    padding:8px;
    overflow:visible;
  }
  .app-shell.sidebar-collapsed .nav-item>span:not(.nav-icon):not(.nav-mode-number),
  .app-shell.sidebar-collapsed .nav-item .nav-mode-copy,
  .app-shell.sidebar-collapsed .nav-item .nav-badge{display:none!important}
  .app-shell.sidebar-collapsed .nav-item .nav-icon,
  .app-shell.sidebar-collapsed .nav-item.nav-mode .nav-mode-number{margin:0;flex:0 0 auto}
  .app-shell.sidebar-collapsed .nav-item.nav-mode{min-height:47px;padding:8px;border-radius:12px}

  /* Pie compacto: conserva estado, avatar y salida sin textos. */
  .app-shell.sidebar-collapsed .sidebar-foot{padding-top:10px}
  .app-shell.sidebar-collapsed .mini-status{justify-content:center;padding:8px 0}
  .app-shell.sidebar-collapsed .mini-status>div{display:none!important}
  .app-shell.sidebar-collapsed .user-mini{
    grid-template-columns:36px;
    justify-content:center;
    padding:7px;
    background:rgba(255,255,255,.045);
  }
  .app-shell.sidebar-collapsed .user-mini-text,
  .app-shell.sidebar-collapsed .user-mini #logout-btn{display:none!important}
}

/* Móvil conserva exactamente el patrón existente ☰ / X. */
@media(max-width:900px){
  .sidebar-collapse-btn{display:none!important}
  .sidebar .nav-scroll{scrollbar-width:thin}
}