/* ============================================================================
 * DATALYSE SIDEBAR — rediseño Cloudflare 2026-07. REESCRITA DE CERO.
 *
 * UNICA fuente de verdad del sidebar: geometria, acoplamiento con
 * page-wrapper/topbar, skin, mini-sidebar y off-canvas. datalyse-modern.css §04,
 * datalyse-theme.css y 165_behaviours.css ya NO llevan reglas de sidebar — no
 * reintroducirlas alli. La unica capa por encima es el <style> datanav del index
 * (modo embebido 70px, intencionado).
 *
 * Markup (index.html): ul#sidebarnav con items
 * sueltos (.sb-single), y grupos <details.sb-group> por categoria: summary
 * (.sb-summary: icono + label + chevron) + ul.sb-children con los <a> de
 * siempre (li.sidebar-item > a.sidebar-link). Abajo, #sbBottomFixed fuera del
 * scroll. Los grupos colapsan SIN JS (details nativo); recientes, pins y
 * Ctrl/Cmd+K usan solo DOM, eventos directos y localStorage.
 *
 * Tokens: --dt-* (datalyse-modern.css). Las custom properties se resuelven en
 * computed-value time, asi que da igual que modern cargue despues.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1 · Geometria del aside + neutralizacion del hover legacy del vendor
 *     (v2datastrapp: 270px). El hover flotante del modo mini se controla de
 *     forma explicita en la seccion 10; en movil solo desliza el off-canvas.
 * ------------------------------------------------------------------------- */
[data-bs-theme="light"] .left-sidebar {
  --dt-sidebar: #fbfbfb;
  --dt-surface: #ffffff;
  --dt-text: #171717;
  --dt-muted: #525252;
  --dt-faint: #737373;
  --dt-hover: #f3f3f3;
  --dt-active: #f3f3f3;
  --sb-line: rgba(10, 10, 10, .10);
}

[data-bs-theme="dark"] .left-sidebar {
  --sb-line: rgba(255, 255, 255, .10);
}

.left-sidebar,
.left-sidebar:hover {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  height: 100%;
  padding: 0;
  overflow: visible;
  background: var(--dt-sidebar) !important;
  background-image: none !important;
  border-right: 1px solid var(--sb-line) !important;
  box-shadow: none !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.01em;
  transition: left .25s cubic-bezier(.77, 0, .175, 1);
}

/* Solo en full: por encima del topbar (z 3000 en viewports estrechos taparia
   el logo); con modal, RecordPanel o la capa de alta (.rpn-open) abiertos NO,
   para que el backdrop lo tape */
body[data-sidebartype="full"]:not(.modal-open):not(.rp-open):not(.rpn-open) .left-sidebar {
  z-index: 3001 !important;
}

/* Columna flex: brand / nav scrolleable / bloque fijo abajo */
.sidebar-colwrap {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
}

nav#soynavhome.hnsidebarm {
  height: auto !important;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 !important;
}

#sbBottomFixed { flex: 0 0 auto; }
#sbTopFixed { flex: 0 0 auto; padding: 6px 0 2px; }
#sbTopFixed:empty { display: none; }
#sbTopFixed ul { margin: 0; padding: 0; list-style: none; }
#sbTopFixed .sb-switch { margin: 0 14px 4px; }
[data-sidebartype="mini-sidebar"] #sbTopFixed .sb-switch { margin: 0 6px 2px; }

/* Scroll nativo: sin observers ni motor de terceros en el sidebar. */
nav#soynavhome { scrollbar-width: thin; scrollbar-color: transparent transparent; }
nav#soynavhome:hover { scrollbar-color: var(--dt-border-strong) transparent; }
nav#soynavhome::-webkit-scrollbar { width: 6px; }
nav#soynavhome::-webkit-scrollbar-track { background: transparent; }
nav#soynavhome::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
nav#soynavhome:hover::-webkit-scrollbar-thumb { background: var(--dt-border-strong); }

.left-sidebar * { user-select: none; }

/* ---------------------------------------------------------------------------
 * 2 · Brand (desde 2026-09-12: logo completo centrado en expandido, "D" en mini)
 * ------------------------------------------------------------------------- */
.left-sidebar .brand-logo {
  height: var(--dt-topbar-h);
  min-height: var(--dt-topbar-h) !important;
  padding: 0 12px !important;
  background: var(--dt-sidebar) !important;
  border-bottom: 1px solid var(--sb-line) !important;
}

.left-sidebar .brand-logo .logo-img.sb-workspace {
  display: flex;
  width: 100% !important;
  min-width: 0;
  height: 34px;
  padding: 0 2px;
  align-items: center;
  gap: 8px;
  color: var(--dt-text) !important;
  border-radius: 8px;
  text-align: left !important;
  text-decoration: none;
  transition: background-color .25s cubic-bezier(.4, 0, .2, 1);
}

/* 2026-08-31 (Marc): el bloque logo+Datalyse ya NO se ilumina al hover (era un resto
   del selector de workspace retirado; el click sigue navegando a la home). */

.left-sidebar .brand-logo .logo-img.sb-workspace:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--dt-focus);
}

.sb-workspace-mark {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
}

.left-sidebar .brand-logo .logo-img .sb-workspace-mark img {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: contain;
  transform: none !important;
}

.sb-workspace-name {
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.375;
  letter-spacing: -.012em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-workspace-chevron {
  flex: 0 0 auto;
  color: var(--dt-text);
  font-size: 12px;
  opacity: .4;
}

[data-bs-theme="light"] .left-sidebar .dark-logo,
[data-bs-theme="dark"] .left-sidebar .light-logo { display: block !important; }

[data-bs-theme="light"] .left-sidebar .light-logo,
[data-bs-theme="dark"] .left-sidebar .dark-logo { display: none !important; }

/* 2026-09-12 (Marc, lamina "Sidebar Datalyse"): la marca ya no es "D + Datalyse". Expandido =
   el LOGO COMPLETO CENTRADO (#urllogosidebarfull/2 en index.html: logo.svg en claro, logowhite.svg en
   oscuro; el reseller pone su url_logo en los dos). Mini = solo la "D" (.sb-workspace-mark, o el
   url_logomini del reseller). Al desplegarse el mini por hover/foco vuelve el logo completo. */
.left-sidebar .brand-logo .logo-img.sb-workspace { justify-content: center; }

.left-sidebar .brand-logo .logo-img.sb-workspace .sb-workspace-mark { display: none; }

.left-sidebar .brand-logo .sb-brand-full {
  display: inline-flex;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  overflow: visible;
}

.left-sidebar .brand-logo .sb-brand-full img {
  width: auto !important;
  height: 20px !important;
  max-width: 180px !important;
  max-height: 20px !important;
  object-fit: contain;
  object-position: center;
  transform: none !important;
}

/* !important: el vendor (v2datastrapp) muestra .hide-menu al hacer :hover sobre el aside y pisaba estas dos */
[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo .logo-img.sb-workspace .sb-workspace-mark { display: inline-flex !important; }
[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo .sb-brand-full { display: none !important; }

/* En mini la marca es SIEMPRE la "D": desde el 2026-09-12 el rail no se ensancha al pasar el
   ratón (cada grupo abre un panel flotante, §10), así que no hay estado "desplegado". */

/* ---------------------------------------------------------------------------
 * 3 · Acoplamiento con el layout (page-wrapper / topbar)
 * ------------------------------------------------------------------------- */
@media (min-width: 1300px) {
  [data-layout="vertical"] body:not([data-sidebartype="mini-sidebar"]) .page-wrapper {
    margin-left: 260px !important;
  }

  [data-layout="vertical"] body:not([data-sidebartype="mini-sidebar"]) :is(.topbar, .app-header, .header, .navbar.topbar) {
    left: 260px !important;
    width: calc(100vw - 260px) !important;
  }

}

/* ---------------------------------------------------------------------------
 * 4 · Nav raiz (el pill de busqueda se retiro: la busqueda vive en Dalia)
 * ------------------------------------------------------------------------- */
#sidebarnav { padding: 10px 0 8px; margin: 0; list-style: none; }

/* ---------------------------------------------------------------------------
 * 5 · Items (base compartida: sueltos, hijos de grupo y bloque fijo)
 * ------------------------------------------------------------------------- */
:is(#sidebarnav, #sbBottomFixed) ul { margin: 0; padding: 0; list-style: none; }

:is(#sidebarnav, #sbBottomFixed) .sidebar-item {
  margin: 0 14px 1px;
  list-style: none;
}

:is(#sidebarnav, #sbBottomFixed) .sidebar-link {
  position: relative;
  display: flex;
  min-height: 34px;
  padding: 0 12px !important;
  align-items: center;
  gap: 10px;
  color: var(--dt-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.1765;
  letter-spacing: -.012em;
  text-decoration: none;
  transition: color .15s cubic-bezier(.4, 0, .2, 1),
              background-color .25s cubic-bezier(.4, 0, .2, 1) !important;
}

:is(#sidebarnav, #sbBottomFixed) .sidebar-link:hover {
  color: var(--dt-text) !important;
  background: var(--dt-hover) !important;
}

:is(#sidebarnav, #sbBottomFixed) .sidebar-link.active,
:is(#sidebarnav, #sbBottomFixed) .sidebar-link[aria-current="page"],
:is(#sidebarnav, #sbBottomFixed) .sidebar-item.selected > .sidebar-link {
  color: var(--dt-text) !important;
  background: var(--dt-active) !important;
  font-weight: 500;
}

:is(#sidebarnav, #sbBottomFixed) .sidebar-link:active {
  background: var(--dt-active) !important;
}

:is(#sidebarnav, #sbBottomFixed) .sidebar-link:focus-visible {
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px var(--dt-focus) !important;
}

/* Columna de icono 16px */
:is(#sidebarnav, #sbBottomFixed) .sidebar-link > span:first-child {
  position: relative;
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
}

/* Iconos grises mas claros que el texto (como Cloudflare); al hover/activo suben
   medio tono; el chevron va aparte, siempre tenue */
:is(#sidebarnav, #sbBottomFixed) .sidebar-link .ti,
#sidebarnav .sb-summary .ti:not(.sb-chevron) {
  color: var(--dt-text) !important;
  font-size: 16px;
  opacity: .5;
  transition: color .2s cubic-bezier(.4, 0, .2, 1),
              opacity .2s cubic-bezier(.4, 0, .2, 1);
}

:is(#sidebarnav, #sbBottomFixed) .sidebar-link:hover .ti,
:is(#sidebarnav, #sbBottomFixed) .sidebar-link.active .ti,
#sidebarnav .sb-summary:hover .ti:not(.sb-chevron) {
  color: var(--dt-text) !important;
  opacity: .72;
}

@media (hover: hover) {
  :is(#sidebarnav, #sbBottomFixed) .sidebar-link:hover > span:first-child .ti {
    transform: scale(1.025);
  }
}

/* Label con ellipsis */
:is(#sidebarnav, #sbBottomFixed) .sidebar-link .hide-menu {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badges de no-leidos (por CLASE, los pintan los handlers de sockets) */
:is(#sidebarnav, #sbBottomFixed) .sidebar-link .popup-badge.spanacuantos {
  position: absolute;
  top: -7px !important;
  right: -9px !important;
  left: auto !important;
  z-index: 4;
  min-width: 16px !important;
  width: auto !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  color: var(--dt-sidebar) !important;
  background: var(--dt-text) !important;
  border: 2px solid var(--dt-sidebar) !important;
  border-radius: 999px !important;
  box-sizing: border-box;
  font-size: 9px !important;
  font-weight: 700;
  line-height: 12px;
  transform: none !important;
}

/* Modulos NO instalados: atenuados + candado; el click abre el modal de activar */
#sidebarnav .sidebar-module-notinstalled > .sidebar-link {
  position: relative;
  opacity: .45;
  filter: grayscale(.4);
}

#sidebarnav .sidebar-module-notinstalled > .sidebar-link::after {
  content: "\eae2"; /* ti-lock en v2tabler.css (\ea75 era ti-cloud-upload: bug historico, visto 2026-09-12) */
  position: absolute;
  top: 50%;
  right: 10px;
  font-family: "tabler-icons";
  font-size: 13px;
  opacity: .65;
  transform: translateY(-50%);
}

#sidebarnav .sidebar-module-notinstalled:hover > .sidebar-link {
  opacity: .8;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * 6 · Grupos colapsables <details> (sin JS, chevron por CSS)
 * ------------------------------------------------------------------------- */
li.sb-groupli { margin: 0 14px 1px; list-style: none; }

/* Etiquetas de seccion grises (las "Observe"/"Desarrollo" de Cloudflare) */
li.sb-cap {
  margin: 16px 14px 8px;
  padding: 0 12px;
  color: var(--dt-faint);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.1765;
  list-style: none;
  user-select: none;
}

/* Separador hairline antes del bloque final (el "Administrar cuenta" de Cloudflare) */
li.sb-sep {
  margin: 12px 14px;
  border-top: 1px solid var(--sb-line);
  list-style: none;
}

details.sb-group { margin: 0; }

/* Apertura/cierre SUAVE de los grupos (Chrome moderno via ::details-content;
   en navegadores sin soporte abre instantaneo, sin efecto adverso) */
.left-sidebar { interpolate-size: allow-keywords; }

details.sb-group::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size .25s cubic-bezier(.77, 0, .175, 1),
              content-visibility .25s allow-discrete;
}

details.sb-group[open]::details-content { block-size: auto; }

.sb-summary {
  display: flex;
  min-height: 34px;
  padding: 0 12px;
  align-items: center;
  gap: 10px;
  color: var(--dt-text);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: color .25s cubic-bezier(.4, 0, .2, 1),
              background-color .25s cubic-bezier(.4, 0, .2, 1);
}

.sb-summary::-webkit-details-marker { display: none; }
.sb-summary::marker { content: none; }

.sb-summary:hover { background: var(--dt-hover); }

.sb-summary:active { background: var(--dt-active); }

.sb-summary:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--dt-focus);
}

.sb-gicon {
  position: relative;
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
}

/* Badge agregado (p.ej. comunicaciones no leidas) sobre el icono del grupo */
.sb-gicon > span[class*="spanacuantos"] {
  position: absolute;
  top: -7px;
  right: -9px;
  z-index: 4;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  color: var(--dt-sidebar);
  background: var(--dt-text);
  border: 2px solid var(--dt-sidebar);
  border-radius: 999px;
  box-sizing: border-box;
  font-size: 9px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
}

.sb-glabel {
  overflow: hidden;
  flex: 1 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-chevron {
  margin-left: auto;
  color: var(--dt-text);
  font-size: 12px !important;
  opacity: .4;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1),
              opacity .2s cubic-bezier(.4, 0, .2, 1);
}

.sb-summary:hover .sb-chevron { opacity: 1; }

details[open] > .sb-summary .sb-chevron { transform: rotate(90deg); }
details[open] > .sb-summary { color: var(--dt-text); }

/* Hijos: sin icono, indentados 28px y unidos por la guía vertical de Cloudflare. */
#sidebarnav .sb-children {
  position: relative;
  margin: 0;
  padding: 0 0 0 28px !important;
  list-style: none;
}

#sidebarnav .sb-children::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 19px;
  z-index: 0;
  width: 1px;
  background: var(--sb-line);
  pointer-events: none;
}

#sidebarnav .sb-children .sidebar-item {
  position: relative;
  z-index: 1;
  margin: 0 0 1px !important;
}

.sb-children .sidebar-link {
  min-height: 34px;
  padding: 0 12px !important;
  font-size: 13px;
}

/* El span del icono se va al final de la fila: el glifo se oculta y el badge
   de no-leidos queda como pill estatica al final del label (estilo "Beta") */
.sb-children .sidebar-link > span:first-child {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  order: 3;
  margin-left: auto;
}

.sb-children .sidebar-link > span:first-child > i.ti { display: none; }

/* En hijos el badge queda como pill outline neutra al final de la fila
   (estilo "Nuevo"/"Beta" de Cloudflare), no como punto de alerta */
.sb-children .sidebar-link .popup-badge.spanacuantos {
  position: static !important;
  top: auto !important;
  right: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 5px !important;
  color: var(--dt-muted) !important;
  background: transparent !important;
  border: 1px solid var(--dt-border-strong) !important;
  font-size: 10px !important;
  font-weight: 550;
  line-height: 1.5;
  transform: none !important;
}

/* Candado de no instalado: en hijos, junto al final (sin icono que estorbe) */
.sb-children .sidebar-module-notinstalled > .sidebar-link::after { right: 12px; }

/* ---------------------------------------------------------------------------
 * 6b · Leftbar nuevo (2026-10-21, Marc): subtitulos de bloque dentro de un grupo
 *      (li.sb-subcap "Calls", "Studio"; los oculta sidebar_updateSubcaps si no les
 *      sigue ningun item visible), tesela con el degradado de marca para el grupo
 *      IA (.sb-featured; los unicos hex de marca permitidos: azul, cian y coral del
 *      orbe) y etiqueta en negrita (.sb-strong, Autopilot).
 * ------------------------------------------------------------------------- */
#sidebarnav li.sb-subcap {
  margin: 8px 0 2px;
  padding: 0 12px;
  color: var(--dt-faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
  list-style: none;
  user-select: none;
}
#sidebarnav li.sb-subcap > .hide-menu { display: inline; }
#sidebarnav li.sb-flyhead + li.sb-subcap { margin-top: 6px; }

.sb-gicon.sb-featured,
.sb-flyicon.sb-featured {
  color: #fff;
  background: conic-gradient(from 210deg, #0081e0, #20bde5 42%, #ff7a59 72%, #0081e0);
  border: 0;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.sb-gicon.sb-featured {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: -2px 0;
}
.sb-gicon.sb-featured .ti,
.sb-flyicon.sb-featured .ti { color: #fff; font-size: 13px; opacity: 1; }
.sb-flyicon.sb-featured { border-radius: 8px; }
.sb-flyicon.sb-featured .ti { font-size: 15px; }

#sidebarnav a.sidebar-link.sb-strong > .hide-menu { font-weight: 600; }
/* la regla general de iconos del summary (id + !important, §5) pisaria la tesela: misma arma */
#sidebarnav .sb-summary .sb-gicon.sb-featured .ti:not(.sb-chevron) { color: #fff !important; font-size: 13px; opacity: 1; }

/* ---------------------------------------------------------------------------
 * 7 · Recientes: filas de dos líneas + pin a la derecha, igual que Cloudflare
 * ------------------------------------------------------------------------- */
#sidebarnav #sbRecentList .sb-recent-item {
  position: relative;
  display: flex;
  min-height: 47px;
  margin: 0 0 1px !important;
  border-radius: 8px;
  transition: background-color .25s cubic-bezier(.4, 0, .2, 1);
}

#sbRecentList .sb-recent-item:hover { background: var(--dt-hover); }

#sbRecentList .sidebar-link {
  min-width: 0;
  min-height: 47px;
  flex: 1 1 auto;
  padding: 0 34px 0 11px !important;
  background: transparent !important;
}

#sbRecentList .sidebar-link:hover,
#sbRecentList .sidebar-link:active { background: transparent !important; }

#sidebarnav #sbRecentList .sidebar-link > .sb-recent-copy {
  display: flex;
  width: 100% !important;
  min-width: 0;
  height: auto !important;
  flex: 1 1 auto !important;
  flex-direction: column;
  order: 0;
  margin: 0 !important;
  padding: 8px 0;
  align-items: stretch;
  justify-content: center;
}

#sidebarnav #sbRecentList .sb-recent-title {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden;
  color: var(--dt-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 15.3px;
  letter-spacing: -.012em;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sidebarnav #sbRecentList .sb-child-sub {
  display: block;
  width: 100%;
  height: auto !important;
  min-width: 0;
  overflow: hidden;
  color: var(--dt-faint);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 15.75px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-recent-pin {
  position: absolute;
  top: 50%;
  right: 6px;
  z-index: 3;
  display: grid;
  width: 22px;
  height: 36px;
  padding: 0;
  place-items: center;
  color: var(--dt-faint);
  background: transparent;
  border: 0;
  opacity: 0;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .15s ease, opacity .1s ease;
}

.sb-recent-item:hover .sb-recent-pin,
.sb-recent-pin:focus-visible,
.sb-recent-pin.is-pinned { opacity: .5; }

.sb-recent-pin:hover,
.sb-recent-pin:focus-visible {
  color: var(--dt-text);
  opacity: 1;
  outline: 0;
}

.sb-recent-pin .ti { font-size: 14px; }

/* ---------------------------------------------------------------------------
 * 8 · Bloque fijo abajo (Settings), separado por hairline
 * ------------------------------------------------------------------------- */
#sbBottomFixed {
  position: relative;
  padding: 9px 0 6px;
  border-top: 0;
  background: var(--dt-sidebar);
}

#sbBottomFixed::before {
  content: "";
  position: absolute;
  top: 0;
  right: 14px;
  left: 14px;
  height: 1px;
  background: var(--sb-line);
}

.sb-item-chevron {
  margin-left: auto;
  color: var(--dt-text) !important;
  font-size: 12px !important;
  opacity: .4 !important;
  transition: opacity .2s ease;
}

#sbBottomFixed .sidebar-link:hover .sb-item-chevron { opacity: 1 !important; }

/* ---------------------------------------------------------------------------
 * 9 · Topbar (la busqueda vive en el pill central Dalia desde 2026-08-09)
 * ------------------------------------------------------------------------- */
#headerCollapse {
  display: inline-flex !important;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  color: var(--dt-faint) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: color .2s ease, background-color .25s cubic-bezier(.4, 0, .2, 1);
}

#headerCollapse:hover {
  color: var(--dt-text) !important;
  background: var(--dt-hover) !important;
}

#headerCollapse:focus-visible {
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px var(--dt-focus) !important;
}

#headerCollapse .topbar-sidebar-icon {
  color: currentColor;
  opacity: .72;
  transition: opacity .2s ease, transform .2s cubic-bezier(.4, 0, .2, 1);
}

#headerCollapse:hover .topbar-sidebar-icon {
  opacity: 1;
  transform: scale(1.04);
}

/* ---------------------------------------------------------------------------
 * 10 · Mini-sidebar (60px, solo iconos) + PANEL FLOTANTE por grupo (2026-09-12, Marc).
 *      El rail ya NO se ensancha al pasar el raton: cada grupo abre su ul.sb-children como
 *      tarjeta fija a la derecha (la coloca sidebar_fly* de 165_appMARC.js).
 *      datanav (70px) lo pisa el <style> inline del index — intencionado.
 * ------------------------------------------------------------------------- */
[data-sidebartype="mini-sidebar"] .left-sidebar,
[data-sidebartype="mini-sidebar"] .left-sidebar:hover {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
}

body[data-sidebartype="mini-sidebar"] .page-wrapper { margin-left: 60px !important; }

body[data-sidebartype="mini-sidebar"] :is(.topbar, .app-header, .header, .navbar.topbar) {
  left: 60px !important;
  width: calc(100vw - 60px) !important;
}

[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo {
  justify-content: center !important;
  padding: 0 !important;
}

[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo .logo-img.sb-workspace {
  width: 36px !important;
  padding: 5px !important;
  justify-content: center;
}

[data-sidebartype="mini-sidebar"] .sb-workspace-mark {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo .logo-img .sb-workspace-mark img {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}[data-sidebartype="mini-sidebar"] li.sb-cap { display: none; }
/* Recientes conserva su icono en mini; sidebar_recentRender controla u-hidden
   cuando no hay entradas disponibles. */

[data-sidebartype="mini-sidebar"] li.sb-sep { margin: 8px 6px; }

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sbBottomFixed) .sidebar-item,
[data-sidebartype="mini-sidebar"] li.sb-groupli { margin: 1px 6px; }

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sbBottomFixed) .sidebar-link,
[data-sidebartype="mini-sidebar"] .sb-summary {
  min-height: 34px;
  padding: 8px !important;
  justify-content: center !important;
}

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

/* En mini los hijos vuelven a ser icono centrado (el grupo se expande igual) */
[data-sidebartype="mini-sidebar"] .sb-children .sidebar-link {
  padding: 8px !important;
}

[data-sidebartype="mini-sidebar"] .sb-children { padding-left: 0; }
[data-sidebartype="mini-sidebar"] .sb-children::before { display: none; }

[data-sidebartype="mini-sidebar"] .sb-children .sidebar-link > span:first-child {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  order: 0;
  margin-left: 0;
}

[data-sidebartype="mini-sidebar"] .sb-children .sidebar-link > span:first-child > i.ti { display: inline-flex; }

[data-sidebartype="mini-sidebar"] .sb-children .sidebar-link .popup-badge.spanacuantos {
  position: absolute !important;
  top: -7px !important;
  right: -9px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  color: var(--dt-sidebar) !important;
  background: var(--dt-text) !important;
  border: 2px solid var(--dt-sidebar) !important;
  font-size: 9px !important;
  line-height: 12px;
}

/* En el rail cerrado los hijos de un grupo no ocupan sitio (un grupo activo puede conservar
   <details open>): solo se pintan como PANEL FLOTANTE cuando sidebar_flyAbre (165_appMARC.js)
   marca el li con .sb-flyopen. Sin flechas: el rail ya no se despliega. */
[data-sidebartype="mini-sidebar"] #sidebarnav details.sb-group > .sb-children { display: none !important; }
[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sbBottomFixed) .ti.ti-chevron-right { display: none !important; }
[data-sidebartype="mini-sidebar"] #sbBottomFixed .sb-item-chevron { display: none !important; }

/* ── Panel flotante por grupo (Marc 2026-09-12, lámina "Flyouts del sidebar mini") ──────────
   Al pasar el ratón (o llegar con Tab, o tocar) por un grupo, su ul.sb-children se pinta como
   tarjeta position:fixed a la derecha del rail; top/left los escribe el JS (un fixed con top:auto
   NO sigue el scroll del nav) y los clampa al viewport. Selectores con #sidebarnav para pesar
   más que la base (#sidebarnav .sb-children es position:relative con padding !important). */
[data-sidebartype="mini-sidebar"] #sidebarnav li.sb-groupli,
[data-sidebartype="mini-sidebar"] #sidebarnav li.sb-single,
[data-sidebartype="mini-sidebar"] #sbBottomFixed .sidebar-item {
  position: relative;
  margin: 1px 0 !important; /* el li ocupa los 60px del rail: el panel arranca en su borde, sin hueco que pierda el hover */
  padding: 0 6px;
}

[data-sidebartype="mini-sidebar"] #sidebarnav li.sb-groupli.sb-flyopen details.sb-group > .sb-children {
  display: block !important;
  position: fixed;
  top: 0;
  left: 60px; /* los dos los fija el JS */
  width: 268px;
  max-height: calc(100vh - 16px);
  margin: 0;
  padding: 6px !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--dt-border-strong) transparent;
  color: var(--dt-text);
  background: var(--dt-overlay);
  border: 1px solid var(--dt-border-strong);
  border-radius: 12px;
  box-shadow: var(--dt-pop-shadow);
  z-index: 3002;
}

/* rail cerrado: el contador agregado de Comunicaciones (lo alimenta d_totalemails) sí se ve sobre el icono
   del grupo; 165_behaviours.css lo mata con id+!important para el expandido, donde ya cuentan los hijos */
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-gicon > #spanacuantoscomunications:not(.u-hidden) { display: block !important; }

/* la guía vertical de expandido no pinta en el panel */
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children::before { display: none !important; }

/* el icono del grupo queda resaltado mientras su panel está abierto */
[data-sidebartype="mini-sidebar"] #sidebarnav li.sb-groupli.sb-flyopen > details > .sb-summary { background: var(--dt-active); }
[data-sidebartype="mini-sidebar"] #sidebarnav li.sb-groupli.sb-flyopen > details > .sb-summary .ti:not(.sb-chevron) { opacity: .85; }

/* mientras hay panel, el aside sube por encima de las barras fijas de los módulos (z 1000 → 3001;
   con modal/RecordPanel abiertos NO, para que el backdrop lo tape) */
body[data-sidebartype="mini-sidebar"]:not(.modal-open):not(.rp-open):not(.rpn-open) .left-sidebar.sb-flyopen { z-index: 3001 !important; }

/* cabecera de la tarjeta (li.sb-flyhead, primer hijo de cada ul.sb-children; Recientes la genera el JS) */
.sb-flyhead { display: none; }
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children .sb-flyhead {
  display: flex;
  margin: 0 0 4px;
  padding: 6px 8px 9px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--dt-border);
}
.sb-flyicon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  color: var(--dt-text);
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  border-radius: 8px;
}
.sb-flyicon .ti { font-size: 15px; opacity: .8; }
.sb-flytxt { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.sb-flytitle { color: var(--dt-text); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.sb-flysub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--dt-faint);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
}

/* filas del panel: icono + etiqueta (como el nivel 1), badge en pill al borde derecho, candado con sitio */
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children .sidebar-item { margin: 0 0 1px !important; }
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children .sidebar-link {
  min-height: 34px;
  padding: 0 10px !important;
  justify-content: flex-start !important;
  gap: 10px !important; /* datanav pone gap:0 !important */
}
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children .sidebar-link .hide-menu { display: inline-block !important; }
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children .sidebar-link > span:first-child {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  order: 0;
  margin-left: 0;
}
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children .sidebar-link > span:first-child > i.ti { display: inline-flex; }
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children .sidebar-link > span:first-child:has(.spanacuantos) { position: static; width: 16px; flex-basis: 16px; }
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children .sidebar-link:has(.spanacuantos) { padding-right: 44px !important; }
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children .sidebar-link .popup-badge.spanacuantos {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  left: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 5px !important;
  color: var(--dt-muted) !important;
  background: transparent !important;
  border: 1px solid var(--dt-border-strong) !important;
  font-size: 10px !important;
  font-weight: 550;
  line-height: 1.5;
  transform: translateY(-50%) !important;
}
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children .sidebar-link .ti.ti-external-link { margin-left: auto; }
/* subtitulos de bloque dentro del panel flotante (datanav oculta .hide-menu con id+!important) */
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children .sb-subcap { margin: 8px 0 2px; padding: 0 10px; }
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children .sb-subcap > .hide-menu { display: inline !important; }
/* en el rail, la tesela de IA se ve igual con el grupo plegado */
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-summary .sb-gicon.sb-featured { margin: 0; }
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children .sidebar-module-notinstalled > .sidebar-link { padding-right: 32px !important; }
[data-sidebartype="mini-sidebar"] #sidebarnav .sb-children .sidebar-module-notinstalled > .sidebar-link::after { right: 10px; }

/* Recientes dentro del panel: dos líneas + pin, como en expandido */
[data-sidebartype="mini-sidebar"] #sidebarnav #sbRecentList .sb-recent-item { display: flex; }
[data-sidebartype="mini-sidebar"] #sidebarnav #sbRecentList .sb-recent-copy { display: flex; flex-direction: column; padding: 7px 0; }
[data-sidebartype="mini-sidebar"] #sidebarnav #sbRecentList .sb-recent-title,
[data-sidebartype="mini-sidebar"] #sidebarnav #sbRecentList .sb-child-sub { display: block !important; }

/* items sueltos (Inicio, Ajustes): solo su etiqueta, flotante; la coloca sidebar_flyLabelPon */
[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sbBottomFixed) .sb-flylabel { /* con id: datanav (lastcssmarc.css) oculta .hide-menu con id+!important */
  display: inline-block !important;
  position: fixed;
  padding: 7px 10px;
  color: var(--dt-text);
  background: var(--dt-overlay);
  border: 1px solid var(--dt-border-strong);
  border-radius: 8px;
  box-shadow: var(--dt-pop-shadow);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 3002;
  transform: translateY(-50%);
}

body[data-sidebartype="mini-sidebar"].modal-open .left-sidebar,
body[data-sidebartype="mini-sidebar"].rp-open .left-sidebar,
body[data-sidebartype="mini-sidebar"].rpn-open .left-sidebar {
  z-index: 1000 !important;
}

/* ---------------------------------------------------------------------------
 * 11 · Off-canvas (<1300px, modo full): el sidebar sale deslizando
 * ------------------------------------------------------------------------- */
@media (max-width: 1299.98px) {
  body:not([data-sidebartype="mini-sidebar"]) .left-sidebar {
    left: -260px !important;
  }

  body:not([data-sidebartype="mini-sidebar"]) #main-wrapper.show-sidebar .left-sidebar {
    left: 0 !important;
  }

  body:not([data-sidebartype="mini-sidebar"]) .page-wrapper {
    margin-left: 0 !important;
  }

  body:not([data-sidebartype="mini-sidebar"]) :is(.topbar, .app-header, .header, .navbar.topbar) {
    left: 0 !important;
    width: 100vw !important;
  }
}

@media (pointer: coarse) {
  :is(#sidebarnav, #sbBottomFixed) .sidebar-link { min-height: 36px; }
  .sb-summary { min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .left-sidebar,
  .sb-chevron,
  details.sb-group::details-content,
  :is(#sidebarnav, #sbBottomFixed) .sidebar-link { transition: none !important; }
}

/* ---------------------------------------------------------------------------
 * 12 · Modal "Activate module" (portado tal cual de la hoja anterior;
 *      lo abre sidebar_bindNotInstalledClicks → sidebar_openActivateModuleModal)
 * ------------------------------------------------------------------------- */
.sidebar-activate-modal .modal-dialog { margin: 1.75rem auto; }
.sidebar-activate-modal__content {
  background: var(--dt-overlay) !important;
  border: 1px solid var(--dt-border) !important;
  border-radius: var(--dt-radius-lg) !important;
  box-shadow: var(--dt-pop-shadow) !important;
  color: var(--dt-text);
  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: var(--dt-radius);
  background: var(--dt-active);
  color: var(--dt-text);
}
.sidebar-activate-modal__icon .ti { font-size: 20px; }
.sidebar-activate-modal__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--dt-text);
  letter-spacing: -.01em;
}
.sidebar-activate-modal__close {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--dt-border);
  color: var(--dt-muted);
  border-radius: var(--dt-radius);
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sidebar-activate-modal__close:hover {
  background: var(--dt-hover);
  color: var(--dt-text);
}
.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(--dt-text);
  margin: 0 0 8px 0;
  letter-spacing: -.01em;
}
.sidebar-activate-modal__price b { color: var(--dt-text); font-weight: 700; }
.sidebar-activate-modal__desc {
  font-size: 13px;
  color: var(--dt-muted);
  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: var(--dt-radius);
  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(--dt-muted);
  border-color: var(--dt-border);
}
.sidebar-activate-modal__btn--ghost:hover {
  background: var(--dt-hover);
  color: var(--dt-text);
  border-color: var(--dt-border-strong);
}
/* Boton primario en tinta (monocromo): nada de --el-accent, que remapea a azul */
.sidebar-activate-modal__btn--primary {
  background: var(--dt-text);
  color: var(--dt-sidebar);
  border-color: var(--dt-text);
}
.sidebar-activate-modal__btn--primary:hover {
  background: color-mix(in srgb, var(--dt-text) 84%, var(--dt-sidebar));
  border-color: color-mix(in srgb, var(--dt-text) 84%, var(--dt-sidebar));
}
.sidebar-activate-modal ~ .modal-backdrop,
body > .modal-backdrop.show { background: #000; opacity: .6; }

/* 2026-08-31 (Marc): categoria del sidebar SIN ningun modulo instalado dentro — el titulo
   (summary del grupo) sale atenuado, igual que sus items .sidebar-module-notinstalled.
   La clase la pone sidebar_updateHeadersVisibility() y se re-evalua al instalar modulos. */
#sidebarnav > li.sb-groupli.sb-group-noinstalled > details > summary.sb-summary {
  opacity: .45;
  filter: grayscale(.4);
}

/* ---------------------------------------------------------------------------
 * 13 · Fase 2 del leftbar (2026-10-21, Marc: "muy ElevenLabs, limpio"):
 *      pie (expandir, invitar al equipo, Developers, Upgrade, selector de menu)
 *      y boton de plegar en la fila de la marca. Sin Pinned ni chincheta (Marc los
 *      rechazo el 21-10). Los HIJOS se quedan como en §6: SIN icono, con la guia
 *      vertical y el badge como pill al final (Marc, 292271101: "era mas bonito
 *      antes sin tanto icono"; la variante con icono y sin guia se retiro).
 * ------------------------------------------------------------------------- */
/* (sin Pinned ni chincheta en el menu: Marc, 21-10) */

/* boton de plegar en la fila de la marca (expandido) */
.left-sidebar .brand-logo { position: relative; }
.left-sidebar .brand-logo .sb-collapse {
  position: absolute;
  top: 50%;
  right: 12px;
  display: inline-flex;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  color: var(--dt-faint);
  border-radius: 6px;
  text-decoration: none;
}
.left-sidebar .brand-logo .sb-collapse:hover { color: var(--dt-text); background: var(--dt-hover); }
.left-sidebar .brand-logo .sb-collapse .ti { font-size: 16px; }
[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo .sb-collapse { display: none !important; }

/* pie */
#sbBottomFixed ul { margin: 0; padding: 0; list-style: none; }
#sbBottomFixed .sb-expand { display: none; }
[data-sidebartype="mini-sidebar"] #sbBottomFixed .sb-expand { display: block; }
#sbBottomFixed .sb-invite {
  position: relative;
  margin: 0 14px 8px;
  padding: 10px 28px 10px 12px;
  list-style: none;
  border: 1px solid var(--sb-line);
  border-radius: 10px;
}
#sbBottomFixed .sb-invite-link { display: flex; gap: 10px; align-items: flex-start; color: var(--dt-text); text-decoration: none; }
#sbBottomFixed .sb-invite-ico {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  color: var(--dt-text);
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  border-radius: 8px;
}
#sbBottomFixed .sb-invite-ico .ti { font-size: 14px; opacity: .8; }
#sbBottomFixed .sb-invite-txt { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
#sbBottomFixed .sb-invite-txt b { font-size: 13px; font-weight: 600; line-height: 1.25; }
#sbBottomFixed .sb-invite-txt small { color: var(--dt-faint); font-size: 11.5px; line-height: 1.3; }
#sbBottomFixed .sb-invite-close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  width: 20px;
  height: 20px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: var(--dt-faint);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
#sbBottomFixed .sb-invite-close:hover { color: var(--dt-text); background: var(--dt-hover); }
#sbBottomFixed .sb-invite-close .ti { font-size: 12px; }
[data-sidebartype="mini-sidebar"] #sbBottomFixed .sb-invite { display: none; }
#sbBottomFixed .sb-upgrade .sidebar-link {
  margin: 2px 0 6px;
  justify-content: center !important;
  font-weight: 600;
  border: 1px solid var(--sb-line) !important;
  border-radius: 8px !important;
  background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(127, 127, 127, .07) 7px 9px) !important;
}
#sbBottomFixed .sb-upgrade .sidebar-link:hover { background: var(--dt-hover) !important; }
[data-sidebartype="mini-sidebar"] #sbBottomFixed .sb-upgrade .sidebar-link { margin: 1px 0; background: none !important; border-color: transparent !important; }
[data-sidebartype="mini-sidebar"] #sbBottomFixed .sb-upgrade .sidebar-link:hover { background: var(--dt-hover) !important; }
/* Developers: el icono de enlace externo al borde derecho, como el chevron de Settings; en el rail no se pinta */
#sbBottomFixed .sidebar-link > .ti-external-link { margin-left: auto; font-size: 12px !important; opacity: .4 !important; }
[data-sidebartype="mini-sidebar"] #sbBottomFixed .sidebar-link > .ti-external-link { display: none; }

/* selector de menu de plataforma ("Datalyse · Corporate · Switch") */
:is(#sbTopFixed, #sbBottomFixed) .sb-switch { position: relative; margin: 4px 14px 2px; list-style: none; }
:is(#sbTopFixed, #sbBottomFixed) .sb-switch-btn {
  display: flex;
  width: 100%;
  min-height: 38px;
  padding: 4px 10px;
  align-items: center;
  gap: 10px;
  color: var(--dt-text);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
:is(#sbTopFixed, #sbBottomFixed) .sb-switch-btn[disabled] { cursor: default; }
:is(#sbTopFixed, #sbBottomFixed) .sb-switch-btn:not([disabled]):hover { background: var(--dt-hover); }
:is(#sbTopFixed, #sbBottomFixed) .sb-switch-btn:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--dt-focus); }
.sb-switch-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 4px;
  background: #0081e0;
}
.sb-switch-dot[data-mode="broker"] { background: #ff7a59; }
.sb-switch-dot[data-mode="custom"] { background: #20bde5; }
:is(#sbTopFixed, #sbBottomFixed) .sb-switch-txt { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; line-height: 1.15; }
:is(#sbTopFixed, #sbBottomFixed) .sb-switch-brand { color: var(--dt-faint); font-size: 10.5px; font-weight: 500; letter-spacing: .02em; }
:is(#sbTopFixed, #sbBottomFixed) .sb-switch-mode { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
:is(#sbTopFixed, #sbBottomFixed) .sb-switch-cta {
  padding: 2px 8px;
  color: var(--dt-faint);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--sb-line);
  border-radius: 999px;
  white-space: nowrap;
}
[data-sidebartype="mini-sidebar"] :is(#sbTopFixed, #sbBottomFixed) .sb-switch { margin: 1px 6px; }
[data-sidebartype="mini-sidebar"] :is(#sbTopFixed, #sbBottomFixed) .sb-switch-btn { min-height: 34px; padding: 8px; justify-content: center; }
.sb-switch-pop {
  position: fixed;
  z-index: 3002;
  width: 268px;
  padding: 6px;
  color: var(--dt-text);
  background: var(--dt-overlay);
  border: 1px solid var(--dt-border-strong);
  border-radius: 12px;
  box-shadow: var(--dt-pop-shadow);
}
.sb-switch-pop[hidden] { display: none; }
.sb-switch-head { padding: 6px 10px 8px; color: var(--dt-faint); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sb-switch-opt {
  display: flex;
  width: 100%;
  padding: 8px 10px;
  align-items: center;
  gap: 10px;
  color: var(--dt-text);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sb-switch-opt:hover, .sb-switch-opt:focus-visible { outline: 0; background: var(--dt-hover); }
.sb-switch-optxt { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 1px; }
.sb-switch-optxt b { font-size: 13px; font-weight: 600; }
.sb-switch-optxt small { color: var(--dt-faint); font-size: 11.5px; line-height: 1.3; }
:is(#sbTopFixed, #sbBottomFixed) .sb-switch-opt .ti-check { width: 14px; min-width: 14px; height: 14px; font-size: 14px; line-height: 14px; opacity: 0; }
:is(#sbTopFixed, #sbBottomFixed) .sb-switch-opt.is-current .ti-check { opacity: .8; }
#sbModeSwitch[data-busy="1"] .sb-switch-btn { opacity: .6; pointer-events: none; }
body:not(.modal-open):not(.rp-open):not(.rpn-open) .left-sidebar.sb-popopen { z-index: 3001 !important; }

/* ---------------------------------------------------------------------------
 * 14 · Estrellas por categoria (2026-10-21, Marc: "el sidebar tiene que solo
 *      salir los addons marcados con estrella desde el desplegable de su categoria":
 *      la estrella se marca en el desplegable ENTITY del modulo, p.ej. sales.html).
 *      li.sb-nostar = sin estrella: no ocupa sitio salvo que sea la ruta activa.
 * ------------------------------------------------------------------------- */
#sidebarnav li.sidebar-item.sb-nostar:not(.selected) { display: none; }
/* (el boton ⋯ y su desplegable se retiraron el mismo dia: la estrella vive en el desplegable ENTITY del modulo, sales.html) */