/* =========================
   SIDEBAR (Mobile + Desktop)
   ========================= */

/* Variables rápidas (opcionales) */
:root {
  --sb-bg: #ffffff;
  --sb-border: rgba(0, 0, 0, .08);
  --sb-title: #0d6efd;
  /* bootstrap primary */
  --sb-text: #2c2f36;
  --sb-muted: #6c757d;
  --sb-hover-bg: rgba(13, 110, 253, .08);
  --sb-active-bg: rgba(13, 110, 253, .14);
  --sb-radius: 12px;
}

/* =========================
   SIDEBAR (Mobile + Desktop)
   ========================= */

:root {
  --sb-bg: #ffffff;
  --sb-border: rgba(0, 0, 0, .08);
  --sb-title: #0d6efd;
  --sb-text: #2c2f36;
  --sb-muted: #6c757d;
  --sb-hover-bg: rgba(13, 110, 253, .08);
  --sb-active-bg: rgba(13, 110, 253, .14);
  --sb-radius: 12px;
}

/* Desktop sidebar container */
#sidebar {
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-border) !important;

  /* ✅ IMPORTANT: para que el "cuadro" se achique en flex */
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  flex: 0 0 280px;

  transition: width .25s ease, min-width .25s ease, max-width .25s ease, flex-basis .25s ease;
}

/* Header del sidebar */
#sidebar .p-3 {
  border-bottom: 1px solid var(--sb-border);
}

/* Título "Menú" */
#sidebar h5 {
  color: var(--sb-title) !important;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Botón toggle */
#toggle-btn {
  border-radius: 10px;
}

/* Área scroll */
#sidebar .flex-grow-1 {
  padding: .25rem .25rem .75rem;
}

/* Links del sidebar */
#sidebar .nav-link,
#sidebarMobile .nav-link {
  color: var(--sb-text) !important;
  font-weight: 600;
  font-size: .95rem;
  border-radius: var(--sb-radius);
  margin: .15rem .35rem;
  padding: .6rem .75rem;
  transition: background-color .2s ease, transform .08s ease;
}

/* Íconos */
#sidebar .nav-link i,
#sidebarMobile .nav-link i {
  font-size: 1.05rem;
  opacity: .9;
}

/* Hover */
#sidebar .nav-link:hover,
#sidebarMobile .nav-link:hover {
  background: var(--sb-hover-bg);
  transform: translateX(2px);
}

/* Active */
#sidebar .nav-link.active,
#sidebarMobile .nav-link.active {
  background: var(--sb-active-bg);
  color: var(--sb-title) !important;
}

/* Secciones */
#sidebar .sidebar-section,
#sidebarMobile .sidebar-section {
  padding: .65rem .85rem .25rem;
  color: var(--sb-muted) !important;
  letter-spacing: .08em;
  font-size: .72rem;
}

/* Submenú collapse */
#submenuMore .nav-link {
  font-size: .92rem;
  font-weight: 500;
  padding: .5rem .7rem;
  margin: .12rem .25rem;
}

/* Chevron */
#sidebar .bi-chevron-down,
#sidebarMobile .bi-chevron-down {
  font-size: .9rem;
  opacity: .8;
}

/* Logout */
#sidebar .logout-link,
#sidebarMobile .logout-link {
  color: #dc3545 !important;
  font-weight: 700;
}

#sidebar .logout-link:hover,
#sidebarMobile .logout-link:hover {
  background: rgba(220, 53, 69, .10);
}

/* Offcanvas móvil */
#sidebarMobile.offcanvas {
  width: 300px;
}

#sidebarMobile .offcanvas-header {
  border-bottom: 1px solid var(--sb-border);
}

#sidebarMobile h5 {
  color: var(--sb-title) !important;
  font-weight: 800;
}

/* ✅ Modo colapsado (la clase correcta será .collapsed) */
#sidebar.collapsed {
  width: 86px;
  min-width: 86px;
  max-width: 86px;
  flex: 0 0 86px;
}

/* oculta etiquetas y secciones */
#sidebar.collapsed .nav-link .label,
#sidebar.collapsed .sidebar-section,
#sidebar.collapsed .sidebar-brand-text {
  display: none !important;
}

/* centra iconos */
#sidebar.collapsed .nav-link {
  justify-content: center;
  padding: .65rem .6rem;
}

#sidebar.collapsed .nav-link i {
  margin: 0 !important;
}

/* Para que el main se adapte bien (evita desbordes) */
main.flex-grow-1 {
  min-width: 0;
}

/* =========================
   FIX OVERFLOW MOBILE (espacio blanco derecha)
   ========================= */
html,
body {
  width: 100%;
  overflow-x: hidden;
  /* evita scroll horizontal por offcanvas/transform */
}

/* contenedor principal */
#pantalla {
  max-width: 100%;
  overflow-x: clip;
  /* mejor que hidden para transforms */
}

/* offcanvas: nunca más ancho que el viewport */
.offcanvas {
  max-width: 100vw;
}

/* tu sidebar móvil: que no exceda en pantallas muy pequeñas */
#sidebarMobile.offcanvas {
  width: min(300px, 88vw);
}

/* main no debe forzar ancho */
main.flex-grow-1 {
  min-width: 0;
  max-width: 100%;
}

.brand-title {
  font-weight: 800;
  line-height: 1;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-sub {
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ajustes navbar en móvil */
@media (max-width: 576px) {
  .navbar-brand .brand-title {
    font-size: 1.1rem;
    /* Título más pequeño */
  }

  .navbar-brand .brand-sub {
    font-size: .8rem;
    opacity: .7;
  }

  .d-flex.align-items-center {
    gap: 0.5rem;
    /* Reducir espacio en los botones */
  }

  .navbar .btn {
    font-size: .8rem;
    /* Botones más pequeños */
    padding: .4rem .6rem;
  }

  /* Ajustar los iconos en el navbar */
  .navbar .bi {
    font-size: 1rem;
  }
}

/* Icono de "Menú" en móvil */
@media (max-width: 767px) {
  .btn-outline-light {
    font-size: .9rem;
  }
}

/* Mejor manejo de espacio para el botón habilitado / no habilitado */
@media (max-width: 767px) {

  .btn-success,
  .btn-danger {
    font-size: .85rem;
    padding: .4rem .6rem;
  }
}

.chart-box {
  height: 260px;
  /* controla el tamaño del gráfico */
  max-height: 260px;
}

#stockWrap {
  max-height: 260px;
  overflow: auto;
}