/* =============================================
   DATALYSE SIDEBAR STYLES
   Modern neutral design (ChatGPT-inspired)
   ============================================= */

@import url('/cssyappv3/fonts-local/inter.css');

/* ===== SIDEBAR BASE (LIGHT) ===== */

.left-sidebar {
  font-family: inherit;
  background: var(--el-bg-sidebar, var(--white-color));
  border-right: 1px solid var(--el-border, var(--border-color));
}

/* Brand area: hairline continuo con el topbar (70px), logo compacto */
.left-sidebar .brand-logo {
  min-height: 70px;
  padding: 0 16px;
}
.left-sidebar .brand-logo .logo-img img.dark-logo,
.left-sidebar .brand-logo .logo-img img.light-logo {
  max-height: 28px;
  width: auto;
}
.left-sidebar .brand-logo .logo-img.text-center { text-align: left !important; }

/* Scrollbar del sidebar (simplebar; el vendor fuerza rgba(0,0,0,.5)!important) */
.left-sidebar .simplebar-scrollbar::before {
  background: var(--el-border-strong) !important;
  width: 5px;
  border-radius: 3px;
}
.left-sidebar .simplebar-track.simplebar-vertical { width: 8px; }

.left-sidebar .scroll-sidebar {
  padding-left: 0;
  padding-right: 0;
}

/* 2026-07-19: More fuera del scroll — columna flex del aside: brand fijo arriba,
   nav (SimpleBar) ocupa el resto y scrollea, y #sidebarMasFooter queda fijo abajo */
.left-sidebar .sidebar-colwrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.left-sidebar .sidebar-colwrap .brand-logo { flex: 0 0 auto; }
nav#soynavhome.hnsidebarm {
  height: auto !important; /* pisa el calc(100vh - 75px)!important de .hnsidebarm (165_behaviours.css) */
  flex: 1 1 auto;
  min-height: 0;
}
/* El scroll nativo "gordo" duplicado lo causaba .simplebar-placeholder: SimpleBar lo dimensiona
   por JS (inline) al alto TOTAL del contenido — pensado para hosts con altura auto — y con el nav
   flexado hacía crecer el wrapper por detrás de la máscara → el host scrolleaba en nativo sobre
   vacío. Se anula SOLO eso (!important gana al estilo inline); el resto de SimpleBar, intacto. */
nav#soynavhome .simplebar-placeholder { height: 0 !important; }
#sidebarMasFooter { flex: 0 0 auto; }
#sidebarMasFooter > ul { list-style: none; margin: 0; padding: 0; }

:is(#sidebarnav, #sidebarMasFooter) {
  padding: 4px 0;
}

/* Section headers — estilo ElevenLabs: discretas, sentence case, muted */
:is(#sidebarnav, #sidebarMasFooter) .nav-small-cap {
  padding: 16px 18px 5px 18px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--el-text-dim, var(--text-muted-color));
  line-height: 1.2;
}

:is(#sidebarnav, #sidebarMasFooter) .nav-small-cap .nav-small-cap-icon {
  display: none !important;
}

:is(#sidebarnav, #sidebarMasFooter) .nav-small-cap .hide-menu {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--el-text-dim, var(--text-muted-color));
}

/* Sidebar items */
:is(#sidebarnav, #sidebarMasFooter) .sidebar-item {
  margin: 1px 10px;
}

/* Sidebar links */
:is(#sidebarnav, #sidebarMasFooter) .sidebar-link {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary-color);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  gap: 10px;
  line-height: 1.4;
}

:is(#sidebarnav, #sidebarMasFooter) .sidebar-link:hover {
  background-color: var(--el-hover, var(--hover-color));
  color: var(--text-color);
}

/* Icons */
:is(#sidebarnav, #sidebarMasFooter) .sidebar-link .ti {
  font-size: 18px;
  color: var(--text-secondary-color);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

:is(#sidebarnav, #sidebarMasFooter) .sidebar-link:hover .ti {
  color: var(--text-color);
}

/* Text */
:is(#sidebarnav, #sidebarMasFooter) .sidebar-link .hide-menu {
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active state — pill neutra estilo ElevenLabs (texto a plena fuerza sobre tinte suave) */
:is(#sidebarnav, #sidebarMasFooter) .sidebar-link.active,
:is(#sidebarnav, #sidebarMasFooter) .sidebar-item.selected > .sidebar-link {
  background-color: var(--el-accent-soft, var(--hover-color));
  color: var(--el-text, var(--text-color));
  font-weight: 500;
}

:is(#sidebarnav, #sidebarMasFooter) .sidebar-link.active .ti,
:is(#sidebarnav, #sidebarMasFooter) .sidebar-item.selected > .sidebar-link .ti {
  color: var(--el-text, var(--text-color)) !important;
}

:is(#sidebarnav, #sidebarMasFooter) .sidebar-link.active .hide-menu,
:is(#sidebarnav, #sidebarMasFooter) .sidebar-item.selected > .sidebar-link .hide-menu {
  color: var(--el-text, var(--text-color));
  font-weight: 500;
}

/* Focus visible — anillo neutro */
:is(#sidebarnav, #sidebarMasFooter) .sidebar-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--el-accent-ring, rgba(0,0,0,.22));
}

/* Flecha de has-arrow al estar expandido: usar currentColor para que se vea en light y dark
   (v2bootstrap.css pone border-color: var(--bs-white) que es invisible sobre fondo claro). */
.sidebar-nav .has-arrow[aria-expanded="true"]::after,
.sidebar-nav li.active > .has-arrow::after,
.sidebar-nav li > .has-arrow.active::after {
  border-color: currentColor !important;
}

/* Notification badges */
:is(#sidebarnav, #sidebarMasFooter) .popup-badge.spanacuantos {
  font-size: 10px;
  padding: 1px 5px;
  position: absolute;
}


/* ===== DARK MODE ===== */

[data-bs-theme="dark"] .left-sidebar {
  background: var(--el-bg-sidebar, var(--white-color));
  border-right: 1px solid var(--el-border, var(--border-color));
}

/* Section headers - dark */
[data-bs-theme="dark"] :is(#sidebarnav, #sidebarMasFooter) .nav-small-cap,
[data-bs-theme="dark"] :is(#sidebarnav, #sidebarMasFooter) .nav-small-cap .hide-menu {
  color: var(--el-text-dim, var(--text-muted-color));
}

/* Links - dark */
[data-bs-theme="dark"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link {
  color: var(--text-secondary-color);
}

[data-bs-theme="dark"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link:hover {
  background-color: var(--el-hover, var(--hover-color));
  color: var(--text-color);
}

/* Icons - dark */
[data-bs-theme="dark"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link .ti {
  color: var(--text-muted-color);
}

[data-bs-theme="dark"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link:hover .ti {
  color: var(--text-color);
}

/* Active - dark */
[data-bs-theme="dark"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link.active,
[data-bs-theme="dark"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-item.selected > .sidebar-link {
  background-color: var(--el-accent-soft, var(--hover-color));
  color: var(--text-color);
  font-weight: 500;
}

[data-bs-theme="dark"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link.active .ti,
[data-bs-theme="dark"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-item.selected > .sidebar-link .ti {
  color: var(--text-color) !important;
}

[data-bs-theme="dark"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link.active .hide-menu,
[data-bs-theme="dark"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-item.selected > .sidebar-link .hide-menu {
  color: var(--text-color);
}

/* Brand logo area - dark */
[data-bs-theme="dark"] .left-sidebar .brand-logo {
  border-bottom-color: var(--el-border);
}

/* Scrollbar - dark */
[data-bs-theme="dark"] .left-sidebar .scroll-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--scrolldark-color);
}

[data-bs-theme="dark"] .left-sidebar .scroll-sidebar::-webkit-scrollbar-track {
  background: transparent;
}


/* ===== MINI-SIDEBAR (COLLAPSED) ===== */
/* Ancho 60px. Colores tomados de los tokens CSS (dark/light) */

[data-sidebartype="mini-sidebar"] .left-sidebar {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  background: var(--el-bg-sidebar, #141415) !important;
  border-right: 1px solid var(--el-border) !important;
  overflow: hidden;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) {
  padding: 6px 0;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-item {
  margin: 2px 6px;
}

/* Logo en modo mini: icono cuadrado pequeño centrado en fondo oscuro */
[data-sidebartype="mini-sidebar"] .brand-logo {
  justify-content: center !important;
  padding: 8px 0 !important;
  background: var(--el-bg-sidebar, #141415) !important;
  border-bottom: none !important;
}
[data-sidebartype="mini-sidebar"] .brand-logo .logo-img {
  width: auto !important;
  max-width: 40px !important;
  margin: 0 auto !important;
}
/* Show correct logo based on theme */
[data-bs-theme="dark"] .brand-logo .dark-logo { display: none !important; }
[data-bs-theme="dark"] .brand-logo .light-logo { display: block !important; }
[data-bs-theme="light"] .brand-logo .dark-logo { display: block !important; }
[data-bs-theme="light"] .brand-logo .light-logo { display: none !important; }

[data-sidebartype="mini-sidebar"] .brand-logo .logo-img img.dark-logo,
[data-sidebartype="mini-sidebar"] .brand-logo .logo-img img.light-logo {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain;
  border-radius: 8px;
}
[data-sidebartype="mini-sidebar"] .brand-logo .logo-img img.light-logo {
  content: url("/images/logo-icon.svg");
}
[data-sidebartype="mini-sidebar"] .brand-logo .logo-img img.dark-logo {
  content: url("/images/logo-icon-dark.svg");
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link {
  padding: 9px 8px !important;
  justify-content: center !important;
  gap: 0 !important;
  border-radius: 8px !important;
  color: var(--el-text-muted, rgba(255,255,255,.55)) !important;
  background: transparent !important;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link:hover {
  background: var(--el-hover, rgba(255,255,255,.06)) !important;
  color: var(--el-text, #fff) !important;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link.active,
[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-item.selected > .sidebar-link {
  background: var(--el-active, rgba(255,255,255,.09)) !important;
  color: var(--el-text, #fff) !important;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link .ti {
  width: auto;
  font-size: 20px;
  color: inherit !important;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link:hover .ti,
[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link.active .ti {
  color: inherit !important;
}

/* More en modo mini: flyout hacia la derecha en lugar de expandir verticalmente */
[data-sidebartype="mini-sidebar"] #sidebarMasColapsable {
  position: static;
}
[data-sidebartype="mini-sidebar"] #sidebarMasColapsable > .sidebar-link.has-arrow::after {
  display: none !important;
}
[data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse {
  position: fixed !important;
  left: 68px !important;
  bottom: 14px !important;
  top: auto !important;
  width: 260px !important;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: var(--el-bg-raised, #1c1c1d) !important;
  border: 1px solid var(--el-border-strong, rgba(255,255,255,.1)) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: var(--el-shadow-lg, 0 20px 60px rgba(0,0,0,.55)) !important;
  z-index: 1050;
  /* Solo visible cuando Bootstrap añade .show/.in */
  display: none !important;
}
[data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse.show,
[data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse.in {
  display: block !important;
}
/* Items dentro del flyout: recuperar el texto y el padding normal */
[data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse .sidebar-item {
  margin: 2px 0 !important;
}
[data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse .sidebar-link {
  justify-content: flex-start !important;
  padding: 9px 12px !important;
  gap: 12px !important;
  border-radius: 8px !important;
  color: var(--el-text, rgba(255,255,255,.75)) !important;
}
[data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse .sidebar-link:hover {
  background: var(--el-hover, rgba(255,255,255,.08)) !important;
  color: var(--el-text, #fff) !important;
}
[data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse .sidebar-link .ti {
  font-size: 18px !important;
}
[data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse .sidebar-link .hide-menu {
  display: inline !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: inherit !important;
}
/* Título "More" (opcional) en el flyout */
[data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse::before {
  content: "More";
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--el-text-dim, rgba(255,255,255,.4));
  padding: 6px 12px 8px 12px;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link .hide-menu {
  display: none;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .nav-small-cap {
  padding: 12px 4px 4px 4px;
  justify-content: center;
  min-height: 0;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .nav-small-cap .hide-menu {
  display: none;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .nav-small-cap .nav-small-cap-icon {
  display: none !important;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .popup-badge.spanacuantos {
  display: none;
}


/* ===== MINI-SIDEBAR (no hover expand — usamos tooltips en su lugar) =====
   El comportamiento de expandir al hacer hover sobre el aside fue eliminado
   a favor de tooltips Bootstrap que muestran el nombre del item/sección.
   Ver sidebar_initTooltips() en 165_appMARC.js
   Hay que sobreescribir reglas de stylesmarc.css:24423 y v2bootstrap.css:17452
   que están dentro de @media(min-width:1300px) con especificidad alta. */
/* Forzar 60px SIEMPRE (baseline vendor 87px, hover vendor 270px) */
[data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar,
[data-layout=vertical] [data-sidebartype=mini-sidebar] .left-sidebar,
[data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover,
[data-layout=vertical] [data-sidebartype=mini-sidebar] .left-sidebar:hover {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  background: var(--el-bg-sidebar, #141415) !important;
  border-right: 1px solid var(--el-border) !important;
  box-shadow: none !important;
}
[data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .hide-menu,
[data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .fixed-profile,
[data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .sidebar-nav .has-arrow::after {
  display: none !important;
}
[data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .nav-small-cap {
  text-align: center !important;
  padding: 8px 4px 2px 4px !important;
}
[data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .sidebar-nav ul .sidebar-item .sidebar-link {
  padding: 8px !important;
  justify-content: center !important;
}
[data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .logo-part {
  display: none !important;
}
[data-layout=vertical] body[data-sidebartype=mini-sidebar] .left-sidebar:hover .logo-img {
  width: auto !important;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .nav-small-cap {
  padding: 6px 4px 2px 4px !important;
  min-height: 8px;
}
[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .nav-small-cap::before {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: var(--el-border, rgba(255,255,255,.08));
  margin: 3px auto 1px auto;
}

/* ===== Modal "Activate module" ===== */
.sidebar-activate-modal .modal-dialog { margin: 1.75rem auto; }
.sidebar-activate-modal__content {
  background: var(--el-bg-raised, #1c1c1d) !important;
  border: 1px solid var(--el-border, rgba(255,255,255,.08)) !important;
  border-radius: 16px !important;
  box-shadow: var(--el-shadow-lg, 0 20px 60px rgba(0,0,0,.45)) !important;
  color: var(--el-text, #f5f5f7);
  overflow: hidden;
}
.sidebar-activate-modal__header {
  border: 0 !important;
  padding: 20px 24px 4px 24px !important;
  display: flex; align-items: center; justify-content: space-between;
}
.sidebar-activate-modal__icon {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  margin-right: 12px;
  border-radius: 10px;
  background: var(--el-active, rgba(255,255,255,.08));
  color: var(--el-text, #f5f5f7);
}
.sidebar-activate-modal__icon .ti { font-size: 20px; }
.sidebar-activate-modal__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text, #f5f5f7);
  letter-spacing: -.01em;
}
.sidebar-activate-modal__close {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--el-border, rgba(255,255,255,.08));
  color: var(--el-text-muted, rgba(255,255,255,.7));
  border-radius: 8px;
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sidebar-activate-modal__close:hover {
  background: var(--el-hover, rgba(255,255,255,.06));
  color: var(--el-text, #fff);
}
.sidebar-activate-modal__close .ti { font-size: 18px; }
.sidebar-activate-modal__body {
  padding: 12px 24px 20px 24px !important;
}
.sidebar-activate-modal__price {
  font-size: 22px;
  font-weight: 600;
  color: var(--el-text, #f5f5f7);
  margin: 0 0 8px 0;
  letter-spacing: -.01em;
}
.sidebar-activate-modal__price b { color: var(--el-text, #fff); font-weight: 700; }
.sidebar-activate-modal__desc {
  font-size: 13px;
  color: var(--el-text-muted, rgba(255,255,255,.55));
  margin: 0;
  line-height: 1.5;
}
.sidebar-activate-modal__footer {
  border: 0 !important;
  padding: 0 24px 20px 24px !important;
  gap: 10px;
  display: flex;
  justify-content: flex-end;
}
.sidebar-activate-modal__btn {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  letter-spacing: -.005em;
}
.sidebar-activate-modal__btn:active { transform: scale(.98); }
.sidebar-activate-modal__btn--ghost {
  background: transparent;
  color: var(--el-text-muted, rgba(255,255,255,.7));
  border-color: var(--el-border, rgba(255,255,255,.12));
}
.sidebar-activate-modal__btn--ghost:hover {
  background: var(--el-hover, rgba(255,255,255,.06));
  color: var(--el-text, #fff);
  border-color: var(--el-border-strong, rgba(255,255,255,.2));
}
.sidebar-activate-modal__btn--primary {
  background: var(--el-accent, #f5f5f7);
  color: var(--el-accent-fg, #0f0f10);
  border-color: var(--el-accent, #f5f5f7);
}
.sidebar-activate-modal__btn--primary:hover {
  background: var(--el-accent-hover, #fff);
  color: var(--el-accent-fg, #000);
}
/* El backdrop del modal también más oscuro */
.sidebar-activate-modal ~ .modal-backdrop,
body > .modal-backdrop.show { background: #000; opacity: .6; }

/* Tooltip custom para el sidebar */
.tooltip.sidebar-tip .tooltip-inner {
  font-size: 12px;
  padding: 5px 9px;
  background: var(--el-bg-raised-2, #2b2b2d);
  color: var(--el-text, #f5f5f7);
  border: 1px solid var(--el-border, rgba(255,255,255,.08));
  border-radius: 6px;
  font-weight: 500;
  box-shadow: var(--el-shadow, 0 6px 20px rgba(0,0,0,.35));
}
.tooltip.sidebar-tip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.sidebar-tip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--el-bg-raised-2, #2b2b2d);
}

/* 2026 Sidebar pin/unpin (el drag handle ti-grip-vertical se eliminó; el <li> entero es draggable) */
:is(#sidebarnav, #sidebarMasFooter) .sidebar-link { position: relative; padding-right: 28px !important; }
:is(#sidebarnav, #sidebarMasFooter) .sidebar-unpin-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .15s ease, color .15s ease;
  cursor: pointer;
  font-size: 13px !important;
  line-height: 1;
  color: var(--text-muted-color, #9ca3af);
  z-index: 3;
}
:is(#sidebarnav, #sidebarMasFooter) .sidebar-unpin-btn { right: 4px; }
/* revelado por hover SOLO con puntero real: en tactil (iOS) el :hover que cambia contenido
   hace que Safari consuma el primer tap como hover -> doble toque para abrir modulos */
@media (hover: hover){
  :is(#sidebarnav, #sidebarMasFooter) .sidebar-item:hover .sidebar-unpin-btn { opacity: .55; }
  :is(#sidebarnav, #sidebarMasFooter) .sidebar-unpin-btn:hover { opacity: 1 !important; color: var(--el-text, var(--brand-color)); }
}
/* .dragging es solo marcador para JS (anclas de drop :not(.dragging)) — sin estilos:
   con opacity aquí el snapshot nativo del drag (que ES el preview de lo que se mueve)
   se capturaría desvaído */
/* Elemento en vuelo oculto en su sitio (la clase la pone _sidebar_dragHideOriginal un tick
   después del dragstart, ya capturado el ghost; en el hueco solo queda el placeholder) */
:is(#sidebarnav, #sidebarMasFooter) .sidebar-item.drag-hidden,
:is(#sidebarnav, #sidebarMasFooter) .nav-small-cap.drag-hidden { display: none !important; }

/* Subsecciones: header + items con sangría a la izquierda */
:is(#sidebarnav, #sidebarMasFooter) li.nav-small-cap[data-sidebar-subsection="y"] {
  padding-left: 36px;
}
:is(#sidebarnav, #sidebarMasFooter) li.nav-small-cap[data-sidebar-subsection="y"] .hide-menu {
  font-size: 10px;
  opacity: .85;
}
:is(#sidebarnav, #sidebarMasFooter) li.sidebar-item[data-sidebar-in-subsection="y"] {
  margin-left: 22px;
}
:is(#sidebarnav, #sidebarMasFooter) li.sidebar-item[data-sidebar-in-subsection="y"] > .sidebar-link {
  border-left: 2px solid var(--border-color, rgba(0,0,0,.08));
  border-radius: 0 8px 8px 0;
}
[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) li.sidebar-item[data-sidebar-in-subsection="y"] {
  margin-left: 4px;
}
[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) li.nav-small-cap[data-sidebar-subsection="y"] {
  padding-left: 4px;
}

/* Clones "marcados" en el desplegable More: los módulos fijados no desaparecen del
   catálogo — se distinguen SOLO por el pin visible (click en el pin = desfijar);
   2026-07-19: sin fondo de acento (el fondo no debe cambiar, orden de Marc) */
#sidebarMasList .mas-pinned-clone .sidebar-unpin-btn {
  opacity: .9 !important;
  color: var(--el-text, var(--brand-color));
}
/* Icono de upgrade (módulo bloqueado por plan): solo se ve en los flyouts del More
   (lo muestran sus reglas de modo full y mini); oculto en sidebar y acordeón responsive */
:is(#sidebarnav, #sidebarMasFooter) .sidebar-upgrade-btn { display: none; }

/* Contenedor temporal (vive 1 tick) para el setDragImage del drag de secciones:
   clones del bloque header+items, renderizado pero fuera de la vista — el navegador
   lo captura como preview del bloque entero en vuelo */
:is(#sidebarnav, #sidebarMasFooter) .sidebar-drag-blockghost {
  position: fixed;
  top: -10000px;
  left: 0;
  margin: 0;
  padding: 6px 8px;
  list-style: none;
  background: var(--el-bg-sidebar, var(--white-color));
  border: 1px solid var(--el-border-strong, var(--border-color));
  border-radius: 10px;
  pointer-events: none;
  z-index: -1;
}
:is(#sidebarnav, #sidebarMasFooter) .sidebar-drag-blockghost > li { margin: 0; }

/* Section headers draggable + botones clone/edit/delete */
:is(#sidebarnav, #sidebarMasFooter) .nav-small-cap { position: relative; cursor: grab; padding-right: 76px; }
:is(#sidebarnav, #sidebarMasFooter) .sidebar-section-clonebtn,
:is(#sidebarnav, #sidebarMasFooter) .sidebar-section-editbtn,
:is(#sidebarnav, #sidebarMasFooter) .sidebar-section-delbtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: 0;
  cursor: pointer;
  color: var(--text-muted-color, #9ca3af);
  z-index: 3;
  transition: opacity .15s ease, color .15s ease;
}
:is(#sidebarnav, #sidebarMasFooter) .sidebar-section-clonebtn { right: 54px; }
:is(#sidebarnav, #sidebarMasFooter) .sidebar-section-editbtn  { right: 32px; }
:is(#sidebarnav, #sidebarMasFooter) .sidebar-section-delbtn   { right: 10px; }
@media (hover: hover){
  :is(#sidebarnav, #sidebarMasFooter) .nav-small-cap:hover .sidebar-section-clonebtn,
  :is(#sidebarnav, #sidebarMasFooter) .nav-small-cap:hover .sidebar-section-editbtn,
  :is(#sidebarnav, #sidebarMasFooter) .nav-small-cap:hover .sidebar-section-delbtn { opacity: .55; }
  :is(#sidebarnav, #sidebarMasFooter) .sidebar-section-clonebtn:hover,
  :is(#sidebarnav, #sidebarMasFooter) .sidebar-section-editbtn:hover,
  :is(#sidebarnav, #sidebarMasFooter) .sidebar-section-delbtn:hover { opacity: 1 !important; color: var(--el-text, var(--brand-color)); }
}
/* Tactil (iOS): sin hover real. Los controles revelados por :hover eran ademas invisibles
   en movil (opacity 0) — visibilidad fija y sin cambios de contenido al tocar */
@media (hover: none){
  :is(#sidebarnav, #sidebarMasFooter) .sidebar-unpin-btn,
  :is(#sidebarnav, #sidebarMasFooter) .sidebar-section-clonebtn,
  :is(#sidebarnav, #sidebarMasFooter) .sidebar-section-editbtn,
  :is(#sidebarnav, #sidebarMasFooter) .sidebar-section-delbtn { opacity: .55; }
  /* el drag tactil arranca con pulsacion larga: sin esto iOS abre su preview de enlace
     (Abrir/Copiar enlace...) sobre el <a> y se come el long-press del drag */
  :is(#sidebarnav, #sidebarMasFooter) .sidebar-item,
  :is(#sidebarnav, #sidebarMasFooter) .nav-small-cap,
  :is(#sidebarnav, #sidebarMasFooter) .sidebar-link {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}
:is(#sidebarnav, #sidebarMasFooter) .hide-menu[contenteditable="true"] {
  outline: 2px solid var(--el-accent-ring, rgba(0,0,0,.3));
  outline-offset: 2px;
  border-radius: 3px;
  padding: 0 4px;
  background: var(--el-hover, rgba(0,0,0,.04));
  min-width: 40px;
  display: inline-block;
}
/* Mini-sidebar: ocultar botones de acción excepto pin en flyout de Más */
[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-unpin-btn,
[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-section-clonebtn,
[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-section-editbtn,
[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-section-delbtn { display: none !important; }
/* Show pin button inside More flyout (solo al hover en no anclados; clones via .mas-pinned-clone) */
[data-sidebartype="mini-sidebar"] #sidebarMasList .sidebar-unpin-btn {
  display: block !important;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  font-size: 13px !important;
}
[data-sidebartype="mini-sidebar"] #sidebarMasList .sidebar-item:not(.mas-pinned-clone) .sidebar-unpin-btn { opacity: 0; }
[data-sidebartype="mini-sidebar"] #sidebarMasList .sidebar-item:not(.mas-pinned-clone):hover .sidebar-unpin-btn { opacity: 1; }
/* Bloqueados por plan en el flyout mini: solo el icono de upgrade */
[data-sidebartype="mini-sidebar"] #sidebarMasList .sidebar-module-planblocked .sidebar-unpin-btn { display: none !important; }
[data-sidebartype="mini-sidebar"] #sidebarMasList .sidebar-module-planblocked > .sidebar-link::after { display: none; }
[data-sidebartype="mini-sidebar"] #sidebarMasList .sidebar-upgrade-btn {
  display: block;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .85;
  font-size: 14px;
  cursor: pointer;
  z-index: 5;
}
[data-sidebartype="mini-sidebar"] #sidebarMasList .sidebar-upgrade-btn:hover { opacity: 1; }
[data-sidebartype="mini-sidebar"] #sidebarMasList .sidebar-link { padding-right: 28px !important; }
/* En modo mini los padding-right extra no hacen falta */
[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link { padding-right: 8px !important; }
[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .nav-small-cap { padding-right: 4px !important; }

/* Botón "New section" con estilo de nav-small-cap (como MARKETING AI) */
:is(#sidebarnav, #sidebarMasFooter) #sidebarNewSectionBtn {
  cursor: pointer !important;
  opacity: .55;
  transition: opacity .15s ease;
  padding-right: 12px;
}
:is(#sidebarnav, #sidebarMasFooter) #sidebarNewSectionBtn:hover { opacity: 1; color: var(--el-text, var(--brand-color)); }
:is(#sidebarnav, #sidebarMasFooter) #sidebarNewSectionBtn .nav-small-cap-icon { font-size: 14px; }
/* No mostrar botones edit/delete en el botón New section */
:is(#sidebarnav, #sidebarMasFooter) #sidebarNewSectionBtn .sidebar-section-editbtn,
:is(#sidebarnav, #sidebarMasFooter) #sidebarNewSectionBtn .sidebar-section-delbtn { display: none !important; }

/* Placeholder visual durante el drag (similar a .sbi-item-placeholder del board de sales) */
:is(#sidebarnav, #sidebarMasFooter) .sidebar-item-placeholder {
  background: rgba(var(--el-accent-rgb, 15,15,16), .08);
  border: 2px dashed rgba(var(--el-accent-rgb, 15,15,16), .35);
  border-radius: 8px;
  margin: 4px 8px;
  height: 34px;
  list-style: none;
  transition: background .1s ease;
  pointer-events: none;
}
/* (Las reglas de ocultar pin/drag en mini-sidebar están arriba en el bloque consolidado) */

/* Módulos NO instalados: mostrar oscurecidos */
:is(#sidebarnav, #sidebarMasFooter) .sidebar-module-notinstalled > .sidebar-link {
  opacity: .45;
  filter: grayscale(0.4);
  position: relative;
}
:is(#sidebarnav, #sidebarMasFooter) .sidebar-module-notinstalled > .sidebar-link::after {
  content: "\ea75"; /* ti ti-lock */
  font-family: "tabler-icons";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: .65;
}
:is(#sidebarnav, #sidebarMasFooter) .sidebar-module-notinstalled:hover > .sidebar-link { opacity: .8; cursor: pointer; }
/* En módulos no instalados sí mostramos el botón unpin (para poder enviarlos a More) */
:is(#sidebarnav, #sidebarMasFooter) .sidebar-module-notinstalled .sidebar-unpin-btn { opacity: 1; color: var(--text-muted-color, #9ca3af); z-index: 5; }
/* Ocultar el candado ::after para que no se solape con el botón unpin */
:is(#sidebarnav, #sidebarMasFooter) .sidebar-module-notinstalled > .sidebar-link::after {
  right: 34px;
}

/* Sólo en modo expandido (full): subir el sidebar por encima del topbar
   (el topbar tiene z-index:3000 !important en datalyse-theme.css y, en
   viewports estrechos, ocupa left:0 width:100% — sin esto taparía el logo).
   Con modal o RecordPanel abiertos (.modal-open / .rp-open) NO se sube, para
   que el backdrop/scrim (z~1039) lo tape. */
body[data-sidebartype="full"]:not(.modal-open):not(.rp-open) .left-sidebar { z-index: 3001 !important; }

/* Animación suave al expandir/colapsar el sidebar y al entrar/salir off-canvas
   (viewports < 1300px lo desplazan a left:-270px → 0 con .show-sidebar). */
.left-sidebar {
  transition: width .25s ease, min-width .25s ease, max-width .25s ease,
              left .25s ease, transform .25s ease,
              padding .25s ease, background-color .25s ease !important;
}
.left-sidebar .brand-logo,
.left-sidebar .scroll-sidebar,
.left-sidebar #sidebarnav,
.left-sidebar #sidebarMasFooter,
.left-sidebar .logo-img,
.left-sidebar .hide-menu {
  transition: width .25s ease, padding .25s ease, opacity .2s ease, background-color .25s ease;
}

/* Padding-left del contenido alineado al ancho real del mini-sidebar (60px,
   no los 87px del template). El topbar también se reajusta al mismo offset. */
body[data-sidebartype="mini-sidebar"] .page-wrapper {
  margin-left: 60px !important;
}
body[data-sidebartype="mini-sidebar"] .topbar {
  width: calc(100% - 60px) !important;
  left: 60px !important;
}


/* =============================================
   HUBSPOT-STYLE MENU (2026)
   Sidebar plano (caps built-in ocultas en modo full) +
   "More" como flyout de 2 columnas: rail de categorías
   (#sidebarMasCats, inyectado por JS) + items reales de
   #sidebarMasList filtrados con .mas-cat-hidden.
   Todo scoped a :not(mini-sidebar) para no tocar el rail de 60px.
   ============================================= */

/* 2026-07-18: eliminada la regla que ocultaba con display:none !important las caps built-in
   ([data-datmenutit]) en modo full — era la causa de que el título CRM nunca apareciera al fijar
   módulos, pisando el sistema de visibilidad por JS (sidebar_updateHeadersVisibility). Las caps
   estáticas se rigen ahora por u-hidden como todas las demás. */

/* 2026-07-19: el "Más" vive en #sidebarMasFooter, FUERA del scroll de SimpleBar
   (footer flex del aside) — ya no necesita sticky */

/* Separador sutil sobre el item Más */
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasColapsable {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--el-border);
}

/* Chevron del Más apuntando a la derecha (flyout), en abierto y cerrado */
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasColapsable > a.has-arrow::after,
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasColapsable > a.has-arrow[aria-expanded="true"]::after {
  top: 50% !important;
  margin-top: 0 !important;
  border-color: currentColor !important;
  transform: rotate(135deg) translate(0, -50%) !important;
}

/* Flyout posicionado SOLO en desktop >=1300px (debajo, el sidebar es off-canvas
   y el rail pasa a fila de chips inline sobre el acordeón — ver bloque
   MORE CATEGORIZADO EN FULL <1300px) */
@media (min-width: 1300px) {
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasColapsable > ul.collapse {
  display: none !important;
}
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasColapsable > ul.collapse.show,
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasColapsable > ul.collapse.in {
  display: block !important;
  position: fixed !important;
  left: 508px;
  bottom: 14px;
  width: 330px;
  height: min(560px, calc(100vh - 120px));
  overflow-y: auto;
  background: var(--el-bg-raised) !important;
  border: 1px solid var(--el-border-strong) !important;
  border-left: 0 !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 12px !important;
  box-shadow: var(--el-shadow-lg) !important;
  z-index: 1050;
  margin: 0 !important;
}
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasColapsable > ul.collapse .sidebar-item {
  margin: 2px 0;
}
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasColapsable > ul.collapse .sidebar-link {
  padding: 10px 12px;
  gap: 12px;
  border-radius: 8px;
}
/* 2026-07-19: eliminada la pill activa dentro del flyout (.active/.selected con acento):
   hacer click en un módulo desde el More solo navega — el fondo marcado es exclusivo
   de los clones anclados (.mas-pinned-clone) para que nada "parezca fijado" sin estarlo */
/* Pin solo al hover en items NO anclados (HubSpot); en anclados el desanclar queda visible
   vía la regla de .mas-pinned-clone. El :not() da especificidad suficiente para ganar
   también al opacity:1 forzado de .sidebar-module-notinstalled */
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList .sidebar-item:not(.mas-pinned-clone) .sidebar-unpin-btn {
  opacity: 0;
}
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList .sidebar-item:not(.mas-pinned-clone):hover .sidebar-unpin-btn {
  opacity: .8;
}
/* Bloqueados por plan dentro del flyout: solo el icono de upgrade (sin pin ni candado) */
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList .sidebar-module-planblocked .sidebar-unpin-btn { display: none !important; }
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList .sidebar-module-planblocked > .sidebar-link::after { display: none; }
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList .sidebar-upgrade-btn {
  display: block;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .85;
  font-size: 15px;
  color: var(--el-text, var(--brand-color));
  cursor: pointer;
  z-index: 5;
}
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList .sidebar-upgrade-btn:hover { opacity: 1; }
}

/* Rail izquierdo de categorías (inyectado por JS) */
#sidebarMasCats { display: none; }
#sidebarMasCats:empty { display: none !important; } /* sin categorías con items no hay rail en ningún modo */
@media (min-width: 1300px) {
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasCats.show {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: fixed;
  left: 278px;
  bottom: 14px;
  width: 230px;
  height: min(560px, calc(100vh - 120px));
  overflow-y: auto;
  background: var(--el-bg-raised);
  border: 1px solid var(--el-border-strong);
  border-right: 1px solid var(--el-border);
  border-radius: 14px 0 0 14px;
  padding: 12px;
  box-shadow: var(--el-shadow-lg);
  z-index: 1050;
}
#sidebarMasCats .mas-cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--el-text-muted);
  cursor: pointer;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}
#sidebarMasCats .mas-cat-btn:hover { background: var(--el-hover); color: var(--el-text); }
#sidebarMasCats .mas-cat-btn.active {
  background: var(--el-accent-soft);
  color: var(--el-text);
  font-weight: 500;
}
#sidebarMasCats .mas-cat-btn .ti { font-size: 14px; opacity: .6; flex-shrink: 0; }

/* Filtro de categoría en modo full desktop (si el item se fija al sidebar
   sale de esta lista y la clase deja de tener efecto) */
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList .mas-cat-hidden { display: none !important; }
}

/* =============================================
   MORE CATEGORIZADO EN FULL <1300px / OFF-CANVAS (2026)
   Acordeón vertical de subsecciones: el JS (sidebar_masAccordionBuild)
   inyecta <li.mas-cat-header> en #sidebarMasList y agrupa los items
   bajo su header vía flex order, sin mutar el orden DOM. Tocar un
   header pliega/despliega sus items (.mas-cat-hidden). El rail
   #sidebarMasCats NO se usa en este modo (queda display:none por la
   regla base de arriba).
   ============================================= */
@media (max-width: 1299.98px) {
  /* La ul abierta pasa a flex column para que order agrupe items bajo su header.
     Gana por ID a .collapse.in{display:block} del vendor; al cerrar, el JS quita
     .mas-accordion y .show y vuelve a mandar .collapse:not(.show){display:none} */
  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList.mas-accordion.show,
  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList.mas-accordion.in {
    display: flex !important;
    flex-direction: column;
    /* 2026-07-19: fuera del scroll de SimpleBar el acordeón necesita scroll propio */
    max-height: min(60vh, calc(100vh - 220px));
    overflow-y: auto;
  }
  /* Neutraliza el .first-level .sidebar-item:last-child{margin-bottom:16px} del
     vendor: con order, el last-child del DOM puede renderizar en medio de la lista */
  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList.mas-accordion > li.sidebar-item {
    margin-bottom: 0;
  }
  /* Header de categoría: fila estilo sidebar-link (label + chevron), como el propio "More" */
  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList > li.mas-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    margin: 0 0 4px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--el-text-muted, rgba(255,255,255,.55));
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background .12s ease, color .12s ease;
  }
  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList > li.mas-cat-header:hover {
    background: var(--el-hover, rgba(255,255,255,.08));
    color: var(--el-text, #fff);
  }
  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList > li.mas-cat-header.open {
    color: var(--el-text, #fff);
  }
  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList > li.mas-cat-header .ti {
    font-size: 14px;
    opacity: .6;
    flex-shrink: 0;
    transition: transform .15s ease;
  }
  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList > li.mas-cat-header.open .ti {
    transform: rotate(90deg);
  }
  /* Items desplegados: leve sangría bajo su header para leer la jerarquía */
  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList.mas-accordion > li.sidebar-item > .sidebar-link {
    padding-left: 20px;
  }
  /* Plegado de secciones (la regla equivalente de desktop vive en el @media >=1300px) */
  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList .mas-cat-hidden { display: none !important; }
}

/* =============================================
   MORE CATEGORIZADO EN MINI-SIDEBAR (2026)
   Mismo flyout de 2 columnas que el modo full pero anclado
   al rail de 60px: categorías (#sidebarMasCats) + items
   (#sidebarMasList) filtrados con .mas-cat-hidden.
   El JS (sidebar_masFlyoutOpen) ya construye el rail en mini.
   ============================================= */
[data-sidebartype="mini-sidebar"] #sidebarMasCats.show {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: fixed;
  left: 68px;
  bottom: 14px;
  width: 220px;
  height: min(560px, calc(100vh - 120px));
  overflow-y: auto;
  background: var(--el-bg-raised, #1c1c1d);
  border: 1px solid var(--el-border-strong, rgba(255,255,255,.1));
  border-right: 1px solid var(--el-border, rgba(255,255,255,.06));
  border-radius: 14px 0 0 14px;
  padding: 12px;
  box-shadow: var(--el-shadow-lg, 0 20px 60px rgba(0,0,0,.55));
  z-index: 1050;
}
/* Botones del rail también en mini (los base están dentro del @media >=1300px del modo full) */
[data-sidebartype="mini-sidebar"] #sidebarMasCats .mas-cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--el-text-muted, rgba(255,255,255,.55));
  cursor: pointer;
  text-align: left;
  transition: background .12s ease, color .12s ease;
  flex-shrink: 0;
}
[data-sidebartype="mini-sidebar"] #sidebarMasCats .mas-cat-btn:hover { background: var(--el-hover, rgba(255,255,255,.08)); color: var(--el-text, #fff); }
[data-sidebartype="mini-sidebar"] #sidebarMasCats .mas-cat-btn.active {
  background: var(--el-accent-soft, rgba(255,255,255,.12));
  color: var(--el-text, #fff);
  font-weight: 500;
}
[data-sidebartype="mini-sidebar"] #sidebarMasCats .mas-cat-btn .ti { font-size: 14px; opacity: .6; flex-shrink: 0; }

/* La lista se desplaza a la derecha del rail y pierde el redondeo izquierdo */
[data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse.show,
[data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse.in {
  left: 288px !important;
  height: min(560px, calc(100vh - 120px));
  max-height: none;
  border-radius: 0 14px 14px 0 !important;
  border-left: 0 !important;
}

/* Filtro de categoría también en mini */
[data-sidebartype="mini-sidebar"] #sidebarMasList .mas-cat-hidden { display: none !important; }

/* Responsive: en pantallas estrechas el rail pasa a fila de chips horizontal
   scrollable encima del panel de items (no caben 2 columnas) */
@media (max-width: 576px) {
  [data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse.show,
  [data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse.in {
    left: 68px !important;
    width: calc(100vw - 80px) !important;
    height: 56vh;
    border-radius: 0 0 14px 14px !important;
    border-left: 1px solid var(--el-border-strong, rgba(255,255,255,.1)) !important;
    border-top: 0 !important;
  }
  [data-sidebartype="mini-sidebar"] #sidebarMasCats.show {
    left: 68px;
    bottom: calc(14px + 56vh);
    width: calc(100vw - 80px);
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 14px 14px 0 0;
    border-right: 1px solid var(--el-border-strong, rgba(255,255,255,.1));
    border-bottom: 1px solid var(--el-border, rgba(255,255,255,.06));
  }
  /* Sin el título "More" duplicado cuando el rail hace de cabecera */
  [data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse::before {
    display: none;
  }
}