/* ===== Topbar =====*/
.sb-topbar{
  height: 48px;
  background-color: var(--topbar-bg, #2f86a6);
  color: var(--topbar-fg, #ffffff);
}
.sb-topbar .navbar-brand{ margin-left: .25rem; color: inherit; }
.sb-topbar .btn{ color: inherit; text-decoration: none; }

/* ===== Layout ===== */
.sb{
  position: fixed; top: 48px; left: 0;
  height: calc(100vh - 48px);
  width: 280px;
  background: #1f2a33; color: #cfd8df;
  overflow-y: auto;
  transition: transform .2s ease;
  transform: translateX(0);
}
.sb-content{
  margin-left: 280px;
  padding: 16px;
  transition: margin-left .2s ease;
}

/* ===== Items ===== */
.sb-menu{ padding: 8px 0; }
.sb-item{
  display: block;
  padding: 12px 16px;
  color: #cfd8df;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.sb-item:hover{ background: #23313b; color: #fff; }
.sb-item.active{ background: #2b3b47; color: #fff; border-left-color: #5aa9ff; }
.sb-text{ line-height: 1.15; }

/* ===== Ocultar COMPLETAMENTE cuando está colapsada ===== */
body.sb-hidden .sb{
  transform: translateX(-100%);
}
body.sb-hidden .sb-content{
  margin-left: 0;
}

/* ===== Responsive ===== */
@media (max-width: 992px){
  .sb{ z-index: 1030; }
  /* En móviles, oculto también al colapsar */
  body.sb-hidden .sb{ transform: translateX(-100%); }
  body.sb-hidden .sb-content{ margin-left: 0; }
}

/* Los items ahora son flex para alinear icono + texto */
.sb-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: #cfd8df;
  text-decoration: none;
  border-left: 3px solid transparent;
}

/* Iconito tipo “grid” sin librerías externas */
.sb-icon{
  width: 16px; flex: 0 0 16px;
  color: #9fb3c6;
  line-height: 1;
}
.sb-icon::before{
  /* U+25A6 – cuadrícula; liviano y similar al del Shiny */
  content: "▦";
  font-size: 14px;
}

/* Estado hover/activo */
.sb-item:hover .sb-icon{ color: #ffffff; }
.sb-item.active .sb-icon{ color: #5aa9ff; }

/* Cuando la barra está oculta completamente, no hay iconos (ni nada) */
body.sb-hidden .sb{ transform: translateX(-100%); }