:root{
  --nb-blue:#4A90D9; --nb-violet:#7B5CF6; --nb-pink:#E84098;
  --nb-violet-aa:#6B48F2;
  --nb-grad:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%);
  --nb-grad-suave:linear-gradient(135deg,rgba(74,144,217,0.16) 0%,
                  rgba(123,92,246,0.16) 50%,rgba(232,64,152,0.16) 100%);
  --nb-ink:#14111F; --nb-ink-2:#4C4560; --nb-ink-3:#726C85;
  --nb-line:#E9E4F3; --nb-line-2:#D8D0EC;
  --nb-paper:#FFFFFF; --nb-paper-2:#FAF8FE;
  --nb-ff-d:"Outfit",system-ui,-apple-system,sans-serif;
  --nb-ff-b:"Figtree",system-ui,-apple-system,sans-serif;
}
/* ── barra lateral (noticias y preguntas) ─────────────────── */
.main-container .card-sidebar{
  background:var(--nb-paper) !important;
  border:1px solid var(--nb-line) !important;
  border-radius:15px !important; overflow:hidden;
  box-shadow:0 1px 2px rgba(20,17,31,0.04), 0 12px 30px -20px rgba(20,17,31,0.16);
}
.main-container .card-sidebar .card-header{
  background:var(--nb-paper-2) !important;
  border-bottom:1px solid var(--nb-line) !important;
  padding:14px 18px !important;
}
.main-container .card-sidebar .card-title{
  font-family:var(--nb-ff-d) !important; font-weight:600 !important;
  font-size:1rem !important; color:var(--nb-ink) !important;
}
.main-container .card-sidebar .card-title i:not(.card-minimise){
  color:var(--nb-violet) !important; margin-right:8px;
}
.main-container .card-sidebar .card-minimise{color:var(--nb-ink-3) !important}
.main-container .list-group-item{
  background:transparent !important;
  border:0 !important; border-bottom:1px solid var(--nb-line) !important;
  font-family:var(--nb-ff-b); font-size:0.94rem;
  color:var(--nb-ink-2) !important; padding:11px 18px !important;
  transition:background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.main-container .list-group-item:last-child{border-bottom:0 !important}
.main-container .list-group-item-action:hover,
.main-container .list-group-item-action:focus{
  background:var(--nb-paper-2) !important;
  color:var(--nb-violet-aa) !important; padding-left:23px !important;
}
.main-container .list-group-item.active{
  background:var(--nb-grad-suave) !important;
  color:var(--nb-ink) !important; font-weight:600;
}
.main-container .list-group-item i{color:var(--nb-violet) !important}

/* ── LA COLUMNA LATERAL SE PEGA SOLO SI CABE ─────────────────
   Esto vive AQUI, en el bloque sin filtro de ruta, y no con el resto
   del area de cliente, por el mismo motivo que el aspecto de la
   lateral: es el mismo componente en el area, en la base de
   conocimientos, en las noticias, en las descargas y en la tienda de
   MarketConnect. Estando en el bloque filtrado, `/store/hosting` y
   `/knowledgebase` se quedaban sin el —lo vio el responsable— porque a
   esas rutas no les llega aquella hoja.

   SE PEGA SOLO SI CABE ENTERA. La clase la pone el JS despues de
   medir; sin ella la columna baja con la pagina como cualquier otra.
   La primera version se pegaba siempre y le ponia `max-height` con
   scroll propio, y estaba mal por una razon que dio el responsable con
   sus palabras: «tiene posibilidad de scroll y puede descubrir
   Soporte». Si hay que DESCUBRIRLO, ya no sirve: un scroll dentro de
   otro no lo encuentra nadie, y al llegar al pie nada avisa de que
   arriba quedaron cajas sin ver.

   Medido: en el ticket la columna suma 1.132 px contra los 756 utiles
   de una ventana de 900; en el detalle de dominio son 570 y en el
   panel 657, y ahi caben de sobra.

   Y SE PEGA LA COLUMNA ENTERA, NUNCA UNA CAJA SUELTA: pegando solo
   `.sidebar-primary`, en el detalle de dominio se montaba encima de
   «Acciones» y le comia la cabecera. Por eso las de dentro se
   devuelven a `static`.

   Dos formas de columna, porque el tema no las monta igual: en el area
   y en soporte la columna CONTIENE los `.sidebar`; en la tienda la
   columna ES el `.sidebar`. El `.col-lg-3` del pie —el de «Siganos»—
   no lleva ninguno de los dos y por eso queda fuera solo.

   AIRE BAJO LA BARRA: la barra flotante `nav#nav.cros-navbar` va de 14
   a 95 px, asi que un `top:96px` deja UN pixel y la caja parece
   calzada debajo del menu en vez de parada. Con 120 quedan 25 de
   respiracion, la misma distancia que hay entre barra y contenido con
   la pagina arriba del todo. */
@media (min-width:992px){
  [class*="col-lg-3"].nb-pegada{
    position:sticky !important; top:120px !important;
    align-self:flex-start !important;
  }
  .nb-pegada .sidebar,
  .nb-pegada .sidebar-primary,
  .nb-pegada .sidebar-secondary{
    position:static !important; top:auto !important; z-index:auto !important;
  }

  /* Y QUE PARE A LA ALTURA DEL ULTIMO ARTICULO, NI UN PIXEL MAS.

     Una caja pegada se suelta cuando su borde de abajo alcanza el de su
     contenedor, y ese contenedor es la fila entera. El problema es que la
     fila NO acaba donde acaba el contenido: el ultimo `.section` de
     `.primary-content` arrastra su `margin-bottom:38px`, un margen que
     separa secciones entre si y que despues de la ultima no separa de
     nada. La fila se estira esos 38 px y la columna los aprovecha para
     seguir bajando.

     En `/knowledgebase` la caja acababa 22 px por debajo del ultimo
     articulo: los 38 que sobran menos los 16 del `mb-3` que Croster le
     pone a la tarjeta lateral. Se quitan los dos —el margen que ya no
     separa y el `mb-3`, que dentro de una columna pegada tampoco separa
     de nada porque no hay nada debajo— y el borde de la caja cae justo
     sobre el del ultimo articulo.

     No se compensa con un numero: 22 solo vale para esta pagina. Medido
     en `/knowledgebase` (22 de mas), `/knowledgebase/1/Dominios` y
     `/knowledgebase/2/Hosting` (16 de menos en las dos): las tres cuadran
     a 0. En `/announcements` no cambia nada, porque alli la lateral no
     llega a pegarse. */
     Y OJO CON QUE TARJETA PIERDE EL MARGEN. La columna del area de
     cliente lleva TRES —«Su Informacion», «Contactos» y «Accesos
     Directos»— repartidas en dos contenedores, `.sidebar-primary` con una
     y `.sidebar-secondary` con dos. Quitarselo a `.card-sidebar` a secas
     las deja pegadas sin una linea de aire entre ellas, y `:last-child` a
     secas tampoco vale: «Su Informacion» tambien es la ultima de SU
     contenedor y es la que separa de «Contactos».

     La que sobra el margen es la ultima de la COLUMNA: la ultima tarjeta
     del ultimo contenedor. */
     El resto —el aire que la fila arrastra de mas y que dejaba a la
     columna bajar por debajo del ultimo recuadro— lo mide el JS de abajo,
     que es el unico que puede saber donde acaba lo que se ve. Aqui solo
     se quita el margen de la ultima tarjeta, que si es fijo. */
  .main-container .nb-pegada > *:last-child .card-sidebar:last-child{margin-bottom:0 !important}
}