/* ═══════════════════════════════════════════════════════════════
   Sidebar colapsable — GBCloudIA Platform
   Activar: clase body.sidebar-collapsed
   Llave localStorage: gbcloud_sidebar ('1' = colapsado)
═══════════════════════════════════════════════════════════════ */

/* Transición al sidebar (main-panel ya la tiene en Paper Dashboard) */
.sidebar { transition: width 0.3s cubic-bezier(0.4,0,0.2,1); }

/* ── Ancho colapsado ──────────────────────────────────────────────
   overflow:hidden es crítico: Paper Dashboard tiene .sidebar-wrapper
   con width:260px hardcodeado — sin este clip, el wrapper sangra
   192px sobre el main-panel y los íconos aparecen desplazados. */
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed .off-canvas-sidebar {
  width: 68px !important;
  overflow: hidden !important;
}
body.sidebar-collapsed .sidebar .sidebar-wrapper {
  width: 68px !important;
  overflow: hidden !important;
}
body.sidebar-collapsed .main-panel {
  width: calc(100% - 68px) !important;
}

/* Ocultar textos y badges */
body.sidebar-collapsed .sidebar .sidebar-wrapper p,
body.sidebar-collapsed .sidebar .sidebar-wrapper h5,
body.sidebar-collapsed .sidebar .sidebar-wrapper .badge,
body.sidebar-collapsed .sidebar .sidebar-wrapper br {
  display: none !important;
}

/* Sub-menús no tienen ícono propio — se ocultan completos */
body.sidebar-collapsed .sidebar .sub-menu {
  display: none !important;
}

/* li de sección (solo contiene h5): convertir en separador visual */
body.sidebar-collapsed .sidebar .sidebar-wrapper li:has(> h5) {
  height: 1px !important;
  background: rgba(0, 0, 0, 0.08) !important;
  margin: 10px 10px !important;
  padding: 0 !important;
  overflow: hidden !important;
  list-style: none !important;
}

/* Íconos: quitar margen lateral de Paper Dashboard y centrar en 68px */
body.sidebar-collapsed .sidebar .nav li > a,
body.sidebar-collapsed .sidebar .nav-link {
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 10px 0 !important;
}

/* Espaciado vertical entre nav-items individuales */
body.sidebar-collapsed .sidebar .nav li.nav-item {
  margin-bottom: 2px !important;
}

/* Logo: imagen completa ↔ texto mini "GB" */
body.sidebar-collapsed .sidebar .logo-full-img {
  display: none !important;
}
body.sidebar-collapsed .sidebar .logo-mini-text {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

/* Botón toggle: girar flecha al colapsar */
body.sidebar-collapsed #sidebar-toggle-btn .toggle-icon {
  transform: rotate(180deg);
}
#sidebar-toggle-btn .toggle-icon { transition: transform 0.3s ease; }

/* Durante la expansión: mantener texto oculto mientras el ancho anima (0.3s) */
body.sidebar-expanding .sidebar .sidebar-wrapper p,
body.sidebar-expanding .sidebar .sidebar-wrapper h5,
body.sidebar-expanding .sidebar .sidebar-wrapper br,
body.sidebar-expanding .sidebar .sidebar-wrapper .badge,
body.sidebar-expanding .sidebar .sub-menu {
  display: none !important;
}
/* Al reaparecer: fade-in suave en lugar de parpadeo */
body:not(.sidebar-collapsed):not(.sidebar-expanding) .sidebar .sidebar-wrapper p,
body:not(.sidebar-collapsed):not(.sidebar-expanding) .sidebar .sidebar-wrapper h5 {
  animation: _sb-text-in 0.18s ease both;
}
@keyframes _sb-text-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Sin animación al cargar (evita flash de expansión en páginas con estado guardado) */
body.sidebar-no-anim .sidebar,
body.sidebar-no-anim .main-panel { transition: none !important; }

/* ── 1920×1080 y pantallas anchas ─────────────────────────────────
   Paper Dashboard usa float:right en .main-panel.
   Al colapsar: 1920 - 68 = 1852px disponibles para el contenido. */
@media (min-width: 1440px) {
  body.sidebar-collapsed .main-panel {
    width: calc(100% - 68px) !important;
  }
  body:not(.sidebar-collapsed) .main-panel {
    width: calc(100% - 260px) !important;
  }
}

/* Móvil: el sidebar tiene su propio comportamiento — no interferir */
@media (max-width: 991px) {
  body.sidebar-collapsed .sidebar              { width: 260px !important; overflow: visible !important; }
  body.sidebar-collapsed .sidebar .sidebar-wrapper { width: 260px !important; overflow: auto !important; }
  body.sidebar-collapsed .main-panel           { width: 100% !important; }
  #sidebar-toggle-btn                          { display: none !important; }
}