/* =========================================================
   NAI HUB · SIDEBAR
   NEURO APRENDIZAJE INFANTIL

   UBICACIÓN:
   frontend/src/components/sidebar/sidebar.css

   - COMPACTO
   - LEGIBLE
   - MODERNO
   - ANIMADO
   - SIN GLOW
   - TEXTO BLANCO / NEGRO
   - RESPONSIVE
   ========================================================= */


/* =========================================================
   TOKENS
   ========================================================= */

.app-sidebar {
  --sb-bg:
    #070a16;

  --sb-bg-secondary:
    #090d1b;

  --sb-surface:
    rgba(255, 255, 255, .055);

  --sb-surface-hover:
    rgba(255, 255, 255, .095);

  --sb-border:
    rgba(255, 255, 255, .10);

  --sb-border-strong:
    rgba(255, 255, 255, .19);

  --sb-text:
    #ffffff;

  --sb-violet:
    #aa9be0;

  --sb-violet-surface:
    rgba(170, 155, 224, .13);

  --sb-green:
    #58d58a;

  --sb-radius:
    9px;

  --sb-item-radius:
    8px;

  --sb-transition:
    150ms cubic-bezier(.2, .8, .2, 1);
}


/* =========================================================
   BASE
   ========================================================= */

.app-sidebar {
  position:
    fixed;

  top:
    0;

  bottom:
    0;

  left:
    0;

  z-index:
    60;

  width:
    var(
      --sidebar-width,
      220px
    );

  height:
    100vh;

  height:
    100dvh;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  padding:
    8px;

  overflow:
    hidden;

  border-right:
    1px solid var(--sb-border);

  background:
    linear-gradient(
      180deg,
      var(--sb-bg-secondary) 0%,
      var(--sb-bg) 100%
    );

  color:
    var(--sb-text);

  transition:
    width 190ms cubic-bezier(.22, 1, .36, 1),
    padding 190ms cubic-bezier(.22, 1, .36, 1),
    transform 220ms cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   LÍNEA SUPERIOR
   ========================================================= */

.app-sidebar::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  right:
    0;

  left:
    0;

  z-index:
    5;

  height:
    1px;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(89, 74, 153, .14) 15%,
      rgba(140, 122, 201, .56) 50%,
      rgba(89, 74, 153, .14) 85%,
      transparent 100%
    );
}


/* =========================================================
   BACKGROUND LAYER
   ========================================================= */

.sidebar-background-layer {
  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  pointer-events:
    none;

  opacity:
    .22;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, .018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .018) 1px,
      transparent 1px
    );

  background-size:
    48px 48px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 18%,
      #000 74%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      #000 18%,
      #000 74%,
      transparent 100%
    );
}


/* =========================================================
   CANVAS
   ========================================================= */

#sidebarCanvas {
  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  width:
    100%;

  height:
    100%;

  pointer-events:
    none;

  opacity:
    .60;
}


/* =========================================================
   MOBILE BACKDROP
   ========================================================= */

.sidebar-mobile-backdrop {
  display:
    none;
}


/* =========================================================
   HEADER
   ========================================================= */

.sidebar-header {
  position:
    relative;

  z-index:
    2;

  min-height:
    50px;

  display:
    flex;

  align-items:
    center;

  padding:
    0 4px 8px;

  border-bottom:
    1px solid var(--sb-border);
}


/* =========================================================
   BRAND
   ========================================================= */

.sidebar-brand {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


/* =========================================================
   LOGO
   ========================================================= */

.sidebar-brand-logo {
  width:
    38px;

  height:
    38px;

  flex:
    0 0 38px;

  display:
    grid;

  place-items:
    center;

  padding:
    2px;

  overflow:
    hidden;

  border:
    1px solid rgba(255, 255, 255, .19);

  border-radius:
    50%;

  background:
    #ffffff;

  transition:
    transform var(--sb-transition),
    border-color var(--sb-transition);
}


.sidebar-brand:hover
.sidebar-brand-logo {
  transform:
    translateY(-1px);

  border-color:
    rgba(170, 155, 224, .38);
}


.sidebar-brand-image {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    contain;

  border-radius:
    50%;
}


/* =========================================================
   BRAND CONTENT
   ========================================================= */

.sidebar-brand-content {
  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  overflow:
    hidden;

  opacity:
    1;

  transition:
    opacity 130ms ease,
    transform 170ms ease,
    width 170ms ease;
}


.sidebar-brand-content strong {
  overflow:
    hidden;

  color:
    #ffffff;

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    -.025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.sidebar-brand-content span {
  overflow:
    hidden;

  color:
    #ffffff;

  font-size:
    7.8px;

  font-weight:
    600;

  line-height:
    1.1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   MAIN
   ========================================================= */

.sidebar-main {
  position:
    relative;

  z-index:
    2;

  min-height:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  padding:
    1px 0;
}


/* =========================================================
   SECTION
   ========================================================= */

.sidebar-section {
  min-height:
    0;

  margin-top:
    8px;
}


.sidebar-section-header {
  min-height:
    15px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  margin-bottom:
    4px;

  padding:
    0 6px;
}


.sidebar-section-label {
  flex:
    0 0 auto;

  overflow:
    hidden;

  color:
    #ffffff;

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.sidebar-section-line {
  height:
    1px;

  flex:
    1;

  background:
    #ffffff;

  opacity:
    .15;
}


/* =========================================================
   NAV
   ========================================================= */

.sidebar-navigation,
.sidebar-bottom-navigation {
  display:
    grid;

  gap:
    2px;
}


/* =========================================================
   NAV ITEM
   ========================================================= */

.sidebar-nav-item {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  min-height:
    35px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 7px;

  overflow:
    hidden;

  border:
    1px solid transparent;

  border-radius:
    var(--sb-item-radius);

  background:
    transparent;

  color:
    #ffffff;

  font-family:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  outline:
    none;

  transition:
    background var(--sb-transition),
    border-color var(--sb-transition),
    transform var(--sb-transition);
}


.sidebar-nav-item:hover {
  border-color:
    var(--sb-border-strong);

  background:
    var(--sb-surface-hover);

  transform:
    translateX(2px);
}


.sidebar-nav-item:active,
.sidebar-nav-item.is-clicked {
  transform:
    translateX(1px)
    scale(.985);
}


/* =========================================================
   ACTIVE
   ========================================================= */

.sidebar-nav-item.active {
  border-color:
    rgba(170, 155, 224, .30);

  background:
    var(--sb-violet-surface);

  color:
    #ffffff;
}


/* =========================================================
   INDICATOR
   ========================================================= */

.sidebar-nav-indicator {
  position:
    absolute;

  top:
    50%;

  left:
    0;

  width:
    2px;

  height:
    15px;

  border-radius:
    0 2px 2px 0;

  background:
    var(--sb-violet);

  opacity:
    0;

  transform:
    translateY(-50%)
    scaleY(.35);

  transition:
    opacity 130ms ease,
    transform 150ms ease;
}


.sidebar-nav-item.active
.sidebar-nav-indicator {
  opacity:
    1;

  transform:
    translateY(-50%)
    scaleY(1);
}


/* =========================================================
   ICON
   ========================================================= */

.sidebar-nav-icon {
  width:
    26px;

  height:
    26px;

  flex:
    0 0 26px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid transparent;

  border-radius:
    7px;

  color:
    #ffffff;

  transition:
    background var(--sb-transition),
    border-color var(--sb-transition),
    transform var(--sb-transition);
}


.sidebar-nav-icon svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.2;
}


.sidebar-nav-item:hover
.sidebar-nav-icon {
  border-color:
    rgba(255, 255, 255, .08);

  background:
    rgba(255, 255, 255, .055);

  transform:
    scale(1.04);
}


.sidebar-nav-item.active
.sidebar-nav-icon {
  border-color:
    rgba(170, 155, 224, .20);

  background:
    rgba(170, 155, 224, .13);

  color:
    #ffffff;
}


/* =========================================================
   LABEL
   ========================================================= */

.sidebar-nav-label {
  min-width:
    0;

  flex:
    1;

  overflow:
    hidden;

  color:
    #ffffff;

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1;

  letter-spacing:
    -.012em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  transition:
    opacity 130ms ease,
    width 170ms ease;
}


/* =========================================================
   ARROW
   ========================================================= */

.sidebar-nav-arrow {
  width:
    13px;

  height:
    13px;

  flex:
    0 0 13px;

  display:
    grid;

  place-items:
    center;

  color:
    #ffffff;

  opacity:
    0;

  transform:
    translateX(-3px);

  transition:
    opacity var(--sb-transition),
    transform var(--sb-transition);
}


.sidebar-nav-arrow svg {
  width:
    10px;

  height:
    10px;

  stroke-width:
    2.2;
}


.sidebar-nav-item:hover
.sidebar-nav-arrow,
.sidebar-nav-item.active
.sidebar-nav-arrow {
  opacity:
    .85;

  transform:
    translateX(0);
}


/* =========================================================
   SPACER
   ========================================================= */

.sidebar-spacer {
  flex:
    1;

  min-height:
    8px;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.sidebar-bottom {
  padding-top:
    7px;

  border-top:
    1px solid var(--sb-border);
}


/* =========================================================
   FOOTER SIDEBAR
   ========================================================= */

.sidebar-footer {
  position:
    relative;

  z-index:
    2;

  min-height:
    40px;

  display:
    grid;

  grid-template-columns:
    27px
    minmax(0, 1fr)
    6px;

  align-items:
    center;

  gap:
    7px;

  margin-top:
    6px;

  padding:
    6px 7px;

  overflow:
    hidden;

  border:
    1px solid var(--sb-border);

  border-radius:
    var(--sb-radius);

  background:
    var(--sb-surface);

  transition:
    background var(--sb-transition),
    border-color var(--sb-transition),
    transform var(--sb-transition);
}


.sidebar-footer:hover {
  border-color:
    var(--sb-border-strong);

  background:
    var(--sb-surface-hover);

  transform:
    translateY(-1px);
}


/* =========================================================
   FOOTER ICON
   ========================================================= */

.sidebar-footer-icon {
  width:
    27px;

  height:
    27px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(170, 155, 224, .18);

  border-radius:
    7px;

  background:
    rgba(170, 155, 224, .10);

  color:
    #ffffff;
}


.sidebar-footer-icon svg {
  width:
    13px;

  height:
    13px;

  stroke-width:
    2.2;
}


/* =========================================================
   FOOTER COPY
   ========================================================= */

.sidebar-footer-content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  overflow:
    hidden;
}


.sidebar-footer-content strong {
  overflow:
    hidden;

  color:
    #ffffff;

  font-size:
    8.5px;

  font-weight:
    800;

  line-height:
    1.05;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.sidebar-footer-content span {
  overflow:
    hidden;

  color:
    #ffffff;

  font-size:
    7.2px;

  font-weight:
    600;

  line-height:
    1.05;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   STATUS
   ========================================================= */

.sidebar-footer-status {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--sb-green);

  animation:
    sidebarStatusPulse
    2s
    ease-in-out
    infinite;
}


@keyframes sidebarStatusPulse {

  0%,
  100% {
    opacity:
      .55;

    transform:
      scale(.80);
  }

  50% {
    opacity:
      1;

    transform:
      scale(1);
  }

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.sidebar-main {
  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(255, 255, 255, .15)
    transparent;
}


.sidebar-main::-webkit-scrollbar {
  width:
    3px;
}


.sidebar-main::-webkit-scrollbar-track {
  background:
    transparent;
}


.sidebar-main::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    rgba(255, 255, 255, .15);
}


/* =========================================================
   COLLAPSED
   ========================================================= */

.sidebar-collapsed
.app-sidebar {
  width:
    var(
      --sidebar-width-collapsed,
      54px
    );

  padding-left:
    7px;

  padding-right:
    7px;
}


/* =========================================================
   APP SHELL SYNC
   ========================================================= */

.app-shell {
  transition:
    margin-left 190ms cubic-bezier(.22, 1, .36, 1) !important;
}


/* =========================================================
   COLLAPSED HEADER
   ========================================================= */

.sidebar-collapsed
.sidebar-header {
  min-height:
    46px;

  justify-content:
    center;

  padding:
    0 0 7px;
}


.sidebar-collapsed
.sidebar-brand {
  justify-content:
    center;
}


.sidebar-collapsed
.sidebar-brand-logo {
  width:
    34px;

  height:
    34px;

  flex-basis:
    34px;
}


.sidebar-collapsed
.sidebar-brand-content {
  width:
    0;

  flex:
    0 0 0;

  opacity:
    0;

  transform:
    translateX(-5px);

  pointer-events:
    none;
}


/* =========================================================
   COLLAPSED SECTION
   ========================================================= */

.sidebar-collapsed
.sidebar-section {
  margin-top:
    6px;
}


.sidebar-collapsed
.sidebar-section-header {
  min-height:
    0;

  height:
    0;

  margin:
    0;

  padding:
    0;

  overflow:
    hidden;
}


.sidebar-collapsed
.sidebar-section-label,
.sidebar-collapsed
.sidebar-section-line {
  display:
    none;
}


/* =========================================================
   COLLAPSED ITEM
   ========================================================= */

.sidebar-collapsed
.sidebar-nav-item {
  min-height:
    35px;

  justify-content:
    center;

  gap:
    0;

  padding:
    0;
}


.sidebar-collapsed
.sidebar-nav-item:hover {
  transform:
    translateY(-1px);
}


.sidebar-collapsed
.sidebar-nav-icon {
  width:
    27px;

  height:
    27px;

  flex-basis:
    27px;
}


.sidebar-collapsed
.sidebar-nav-label,
.sidebar-collapsed
.sidebar-nav-arrow {
  width:
    0;

  max-width:
    0;

  flex:
    0 0 0;

  opacity:
    0;

  pointer-events:
    none;
}


.sidebar-collapsed
.sidebar-nav-indicator {
  left:
    -7px;
}


.sidebar-collapsed
.sidebar-bottom {
  padding-top:
    6px;
}


/* =========================================================
   COLLAPSED FOOTER
   ========================================================= */

.sidebar-collapsed
.sidebar-footer {
  min-height:
    35px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    4px;
}


.sidebar-collapsed
.sidebar-footer-icon {
  width:
    27px;

  height:
    27px;

  flex:
    0 0 27px;
}


.sidebar-collapsed
.sidebar-footer-content,
.sidebar-collapsed
.sidebar-footer-status {
  display:
    none;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-theme="light"]
.app-sidebar,
body.light
.app-sidebar {
  --sb-bg:
    #f2f3f6;

  --sb-bg-secondary:
    #fafafa;

  --sb-surface:
    #ffffff;

  --sb-surface-hover:
    #ffffff;

  --sb-border:
    #d6dae1;

  --sb-border-strong:
    #b5bbc5;

  --sb-text:
    #050505;

  --sb-violet:
    #57498f;

  --sb-violet-surface:
    rgba(87, 73, 143, .08);

  --sb-green:
    #16844c;

  background:
    linear-gradient(
      180deg,
      #fafafa 0%,
      #f2f3f6 100%
    );

  color:
    #050505;

  border-right-color:
    #d6dae1;
}


/* =========================================================
   LIGHT TEXT
   ========================================================= */

html[data-theme="light"]
.sidebar-brand-content strong,
html[data-theme="light"]
.sidebar-brand-content span,
html[data-theme="light"]
.sidebar-section-label,
html[data-theme="light"]
.sidebar-nav-item,
html[data-theme="light"]
.sidebar-nav-icon,
html[data-theme="light"]
.sidebar-nav-label,
html[data-theme="light"]
.sidebar-nav-arrow,
html[data-theme="light"]
.sidebar-footer-icon,
html[data-theme="light"]
.sidebar-footer-content strong,
html[data-theme="light"]
.sidebar-footer-content span,
body.light
.sidebar-brand-content strong,
body.light
.sidebar-brand-content span,
body.light
.sidebar-section-label,
body.light
.sidebar-nav-item,
body.light
.sidebar-nav-icon,
body.light
.sidebar-nav-label,
body.light
.sidebar-nav-arrow,
body.light
.sidebar-footer-icon,
body.light
.sidebar-footer-content strong,
body.light
.sidebar-footer-content span {
  color:
    #050505;
}


/* =========================================================
   LIGHT SECTION LINE
   ========================================================= */

html[data-theme="light"]
.sidebar-section-line,
body.light
.sidebar-section-line {
  background:
    #050505;

  opacity:
    .12;
}


/* =========================================================
   LIGHT LOGO
   ========================================================= */

html[data-theme="light"]
.sidebar-brand-logo,
body.light
.sidebar-brand-logo {
  border-color:
    #d0d4dc;

  background:
    #ffffff;
}


/* =========================================================
   LIGHT ACTIVE
   ========================================================= */

html[data-theme="light"]
.sidebar-nav-item.active,
body.light
.sidebar-nav-item.active {
  border-color:
    rgba(87, 73, 143, .24);

  background:
    rgba(87, 73, 143, .08);

  color:
    #050505;
}


/* =========================================================
   LIGHT ICON ACTIVE
   ========================================================= */

html[data-theme="light"]
.sidebar-nav-item.active
.sidebar-nav-icon,
body.light
.sidebar-nav-item.active
.sidebar-nav-icon {
  border-color:
    rgba(87, 73, 143, .18);

  background:
    rgba(87, 73, 143, .08);

  color:
    #050505;
}


/* =========================================================
   LIGHT CANVAS
   ========================================================= */

html[data-theme="light"]
#sidebarCanvas,
body.light
#sidebarCanvas {
  opacity:
    .11;
}


/* =========================================================
   LIGHT GRID
   ========================================================= */

html[data-theme="light"]
.sidebar-background-layer,
body.light
.sidebar-background-layer {
  opacity:
    .10;

  filter:
    invert(1);
}


/* =========================================================
   REVEAL
   ========================================================= */

.sidebar-reveal {
  opacity:
    0;

  transform:
    translateY(4px);

  transition:
    opacity 220ms cubic-bezier(.22, 1, .36, 1)
    var(--sidebar-delay, 0ms),
    transform 220ms cubic-bezier(.22, 1, .36, 1)
    var(--sidebar-delay, 0ms);
}


.sidebar-reveal-visible {
  opacity:
    1;

  transform:
    translateY(0);
}


/* =========================================================
   ALTURA BAJA
   ========================================================= */

@media (max-height: 760px) {

  .app-sidebar {
    padding-top:
      6px;

    padding-bottom:
      6px;
  }


  .sidebar-header {
    min-height:
      44px;
  }


  .sidebar-brand-logo {
    width:
      34px;

    height:
      34px;

    flex-basis:
      34px;
  }


  .sidebar-section {
    margin-top:
      6px;
  }


  .sidebar-nav-item {
    min-height:
      32px;
  }


  .sidebar-navigation,
  .sidebar-bottom-navigation {
    gap:
      1px;
  }


  .sidebar-footer {
    min-height:
      35px;

    margin-top:
      5px;

    padding-top:
      4px;

    padding-bottom:
      4px;
  }

}


/* =========================================================
   MOBILE OFFCANVAS
   ========================================================= */

@media (max-width: 720px) {

  .app-sidebar {
    width:
      min(
        252px,
        calc(100vw - 48px)
      ) !important;

    height:
      100vh;

    height:
      100dvh;

    padding:
      9px;

    visibility:
      hidden;

    pointer-events:
      none;

    transform:
      translateX(-103%);

    border-right:
      1px solid var(--sb-border);

    box-shadow:
      12px 0 30px rgba(0, 0, 0, .22);
  }


  .sidebar-mobile-open
  .app-sidebar {
    visibility:
      visible;

    pointer-events:
      auto;

    transform:
      translateX(0);
  }


  /* =======================================================
     MOBILE FORCE EXPANDED
     ======================================================= */

  .sidebar-collapsed
  .app-sidebar {
    width:
      min(
        252px,
        calc(100vw - 48px)
      ) !important;

    padding:
      9px;
  }


  .sidebar-collapsed
  .sidebar-header {
    min-height:
      50px;

    justify-content:
      flex-start;

    padding:
      0 4px 8px;
  }


  .sidebar-collapsed
  .sidebar-brand {
    justify-content:
      flex-start;
  }


  .sidebar-collapsed
  .sidebar-brand-logo {
    width:
      38px;

    height:
      38px;

    flex-basis:
      38px;
  }


  .sidebar-collapsed
  .sidebar-brand-content {
    width:
      auto;

    flex:
      1;

    opacity:
      1;

    transform:
      none;

    pointer-events:
      auto;
  }


  .sidebar-collapsed
  .sidebar-section {
    margin-top:
      8px;
  }


  .sidebar-collapsed
  .sidebar-section-header {
    min-height:
      15px;

    height:
      auto;

    display:
      flex;

    margin-bottom:
      4px;

    padding:
      0 6px;

    overflow:
      visible;
  }


  .sidebar-collapsed
  .sidebar-section-label,
  .sidebar-collapsed
  .sidebar-section-line {
    display:
      block;
  }


  .sidebar-collapsed
  .sidebar-section-line {
    flex:
      1;
  }


  .sidebar-collapsed
  .sidebar-nav-item {
    min-height:
      35px;

    justify-content:
      flex-start;

    gap:
      8px;

    padding:
      0 7px;
  }


  .sidebar-collapsed
  .sidebar-nav-icon {
    width:
      26px;

    height:
      26px;

    flex-basis:
      26px;
  }


  .sidebar-collapsed
  .sidebar-nav-label {
    width:
      auto;

    max-width:
      none;

    flex:
      1;

    opacity:
      1;

    pointer-events:
      auto;
  }


  .sidebar-collapsed
  .sidebar-nav-arrow {
    width:
      13px;

    max-width:
      13px;

    flex:
      0 0 13px;

    opacity:
      0;

    pointer-events:
      auto;
  }


  .sidebar-collapsed
  .sidebar-nav-item:hover
  .sidebar-nav-arrow,
  .sidebar-collapsed
  .sidebar-nav-item.active
  .sidebar-nav-arrow {
    opacity:
      .85;
  }


  .sidebar-collapsed
  .sidebar-nav-indicator {
    left:
      0;
  }


  .sidebar-collapsed
  .sidebar-bottom {
    padding-top:
      7px;
  }


  .sidebar-collapsed
  .sidebar-footer {
    min-height:
      40px;

    display:
      grid;

    grid-template-columns:
      27px
      minmax(0, 1fr)
      6px;

    justify-content:
      normal;

    padding:
      6px 7px;
  }


  .sidebar-collapsed
  .sidebar-footer-content {
    display:
      flex;
  }


  .sidebar-collapsed
  .sidebar-footer-status {
    display:
      block;
  }


  /* =======================================================
     BACKDROP
     ======================================================= */

  .sidebar-mobile-backdrop {
    position:
      fixed;

    inset:
      0;

    z-index:
      55;

    display:
      block;

    width:
      100vw;

    height:
      100vh;

    height:
      100dvh;

    visibility:
      hidden;

    opacity:
      0;

    pointer-events:
      none;

    background:
      rgba(0, 0, 0, .50);

    transition:
      opacity 180ms ease,
      visibility 180ms ease;
  }


  .sidebar-mobile-open
  .sidebar-mobile-backdrop {
    visibility:
      visible;

    opacity:
      1;

    pointer-events:
      auto;
  }


  html.sidebar-mobile-open,
  html.sidebar-mobile-open
  body {
    overflow:
      hidden;
  }


  .app-shell,
  .sidebar-collapsed
  .app-shell,
  .sidebar-mobile-open
  .app-shell {
    margin-left:
      0 !important;
  }

}


/* =========================================================
   MOBILE ≤ 520
   ========================================================= */

@media (max-width: 520px) {

  .app-sidebar,
  .sidebar-collapsed
  .app-sidebar {
    width:
      min(
        240px,
        calc(100vw - 40px)
      ) !important;
  }


  .sidebar-brand-content strong {
    font-size:
      10.5px;
  }


  .sidebar-brand-content span {
    font-size:
      7.5px;
  }


  .sidebar-nav-label {
    font-size:
      9.8px;
  }

}


/* =========================================================
   MOBILE ≤ 390
   ========================================================= */

@media (max-width: 390px) {

  .app-sidebar,
  .sidebar-collapsed
  .app-sidebar {
    width:
      calc(
        100vw -
        32px
      ) !important;
  }


  .sidebar-nav-item {
    min-height:
      34px;
  }


  .sidebar-footer {
    margin-top:
      5px;
  }

}


/* =========================================================
   FOCUS
   ========================================================= */

.sidebar-nav-item:focus-visible {
  outline:
    2px solid currentColor;

  outline-offset:
    -2px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .app-sidebar *,
  .app-sidebar *::before,
  .app-sidebar *::after,
  .sidebar-mobile-backdrop {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }


  .sidebar-reveal {
    opacity:
      1;

    transform:
      none;
  }


  #sidebarCanvas {
    display:
      none;
  }

}/* =========================================================
   NAI HUB · SIDEBAR
   DARK BLACK OVERRIDE

   MODO OSCURO:
   - NEGRO REAL
   - SIN AZUL
   - SIN DEGRADADO AZULADO
   - CONSERVA VIOLETA SOLO EN ESTADO ACTIVO
   ========================================================= */


/* =========================================================
   TOKENS DARK
   ========================================================= */

html[data-theme="dark"]
.app-sidebar,
body[data-theme="dark"]
.app-sidebar,
body.dark
.app-sidebar {

  --sb-bg:
    #050505;

  --sb-bg-secondary:
    #050505;

  --sb-surface:
    rgba(255, 255, 255, .045);

  --sb-surface-hover:
    rgba(255, 255, 255, .075);

  --sb-border:
    rgba(255, 255, 255, .09);

  --sb-border-strong:
    rgba(255, 255, 255, .16);

  --sb-text:
    #ffffff;

  --sb-violet:
    #a99bd7;

  --sb-violet-surface:
    rgba(169, 155, 215, .11);

  --sb-green:
    #58d58a;

  background:
    #050505 !important;

  border-right-color:
    rgba(255, 255, 255, .09) !important;

  color:
    #ffffff !important;

}


/* =========================================================
   REMOVE BLUE GRADIENT
   ========================================================= */

html[data-theme="dark"]
.app-sidebar,
body[data-theme="dark"]
.app-sidebar,
body.dark
.app-sidebar {

  background-image:
    none !important;

}


/* =========================================================
   HEADER / BOTTOM DIVIDERS
   ========================================================= */

html[data-theme="dark"]
.sidebar-header,
html[data-theme="dark"]
.sidebar-bottom,
body[data-theme="dark"]
.sidebar-header,
body[data-theme="dark"]
.sidebar-bottom,
body.dark
.sidebar-header,
body.dark
.sidebar-bottom {

  border-color:
    rgba(255, 255, 255, .09) !important;

}


/* =========================================================
   TOP LINE
   ========================================================= */

html[data-theme="dark"]
.app-sidebar::before,
body[data-theme="dark"]
.app-sidebar::before,
body.dark
.app-sidebar::before {

  background:
    rgba(255, 255, 255, .10) !important;

}


/* =========================================================
   GRID
   ========================================================= */

html[data-theme="dark"]
.sidebar-background-layer,
body[data-theme="dark"]
.sidebar-background-layer,
body.dark
.sidebar-background-layer {

  opacity:
    .10 !important;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, .015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .015) 1px,
      transparent 1px
    ) !important;

}


/* =========================================================
   CANVAS
   ========================================================= */

html[data-theme="dark"]
#sidebarCanvas,
body[data-theme="dark"]
#sidebarCanvas,
body.dark
#sidebarCanvas {

  opacity:
    .22 !important;

  mix-blend-mode:
    normal !important;

}


/* =========================================================
   TEXT
   ========================================================= */

html[data-theme="dark"]
.sidebar-brand-content strong,
html[data-theme="dark"]
.sidebar-brand-content span,
html[data-theme="dark"]
.sidebar-section-label,
html[data-theme="dark"]
.sidebar-nav-item,
html[data-theme="dark"]
.sidebar-nav-icon,
html[data-theme="dark"]
.sidebar-nav-label,
html[data-theme="dark"]
.sidebar-nav-arrow,
html[data-theme="dark"]
.sidebar-footer-icon,
html[data-theme="dark"]
.sidebar-footer-content strong,
html[data-theme="dark"]
.sidebar-footer-content span,

body[data-theme="dark"]
.sidebar-brand-content strong,
body[data-theme="dark"]
.sidebar-brand-content span,
body[data-theme="dark"]
.sidebar-section-label,
body[data-theme="dark"]
.sidebar-nav-item,
body[data-theme="dark"]
.sidebar-nav-icon,
body[data-theme="dark"]
.sidebar-nav-label,
body[data-theme="dark"]
.sidebar-nav-arrow,
body[data-theme="dark"]
.sidebar-footer-icon,
body[data-theme="dark"]
.sidebar-footer-content strong,
body[data-theme="dark"]
.sidebar-footer-content span,

body.dark
.sidebar-brand-content strong,
body.dark
.sidebar-brand-content span,
body.dark
.sidebar-section-label,
body.dark
.sidebar-nav-item,
body.dark
.sidebar-nav-icon,
body.dark
.sidebar-nav-label,
body.dark
.sidebar-nav-arrow,
body.dark
.sidebar-footer-icon,
body.dark
.sidebar-footer-content strong,
body.dark
.sidebar-footer-content span {

  color:
    #ffffff !important;

}


/* =========================================================
   SECTION LINE
   ========================================================= */

html[data-theme="dark"]
.sidebar-section-line,
body[data-theme="dark"]
.sidebar-section-line,
body.dark
.sidebar-section-line {

  background:
    #ffffff !important;

  opacity:
    .11 !important;

}


/* =========================================================
   NAV ITEM
   ========================================================= */

html[data-theme="dark"]
.sidebar-nav-item,
body[data-theme="dark"]
.sidebar-nav-item,
body.dark
.sidebar-nav-item {

  background:
    transparent !important;

  border-color:
    transparent !important;

  color:
    #ffffff !important;

}


/* =========================================================
   NAV ITEM HOVER
   ========================================================= */

html[data-theme="dark"]
.sidebar-nav-item:hover,
body[data-theme="dark"]
.sidebar-nav-item:hover,
body.dark
.sidebar-nav-item:hover {

  background:
    #111111 !important;

  border-color:
    rgba(255, 255, 255, .11) !important;

}


/* =========================================================
   ACTIVE
   ========================================================= */

html[data-theme="dark"]
.sidebar-nav-item.active,
body[data-theme="dark"]
.sidebar-nav-item.active,
body.dark
.sidebar-nav-item.active {

  background:
    #15131a !important;

  border-color:
    rgba(169, 155, 215, .24) !important;

  color:
    #ffffff !important;

}


/* =========================================================
   ACTIVE INDICATOR
   ========================================================= */

html[data-theme="dark"]
.sidebar-nav-item.active
.sidebar-nav-indicator,
body[data-theme="dark"]
.sidebar-nav-item.active
.sidebar-nav-indicator,
body.dark
.sidebar-nav-item.active
.sidebar-nav-indicator {

  background:
    #a99bd7 !important;

}


/* =========================================================
   NAV ICON
   ========================================================= */

html[data-theme="dark"]
.sidebar-nav-icon,
body[data-theme="dark"]
.sidebar-nav-icon,
body.dark
.sidebar-nav-icon {

  color:
    #ffffff !important;

  background:
    transparent !important;

  border-color:
    transparent !important;

}


html[data-theme="dark"]
.sidebar-nav-icon svg,
body[data-theme="dark"]
.sidebar-nav-icon svg,
body.dark
.sidebar-nav-icon svg {

  color:
    #ffffff !important;

  stroke:
    #ffffff !important;

}


/* =========================================================
   NAV ICON HOVER
   ========================================================= */

html[data-theme="dark"]
.sidebar-nav-item:hover
.sidebar-nav-icon,
body[data-theme="dark"]
.sidebar-nav-item:hover
.sidebar-nav-icon,
body.dark
.sidebar-nav-item:hover
.sidebar-nav-icon {

  background:
    #161616 !important;

  border-color:
    rgba(255, 255, 255, .08) !important;

}


/* =========================================================
   NAV ICON ACTIVE
   ========================================================= */

html[data-theme="dark"]
.sidebar-nav-item.active
.sidebar-nav-icon,
body[data-theme="dark"]
.sidebar-nav-item.active
.sidebar-nav-icon,
body.dark
.sidebar-nav-item.active
.sidebar-nav-icon {

  background:
    rgba(169, 155, 215, .10) !important;

  border-color:
    rgba(169, 155, 215, .18) !important;

  color:
    #ffffff !important;

}


/* =========================================================
   ARROW
   ========================================================= */

html[data-theme="dark"]
.sidebar-nav-arrow svg,
body[data-theme="dark"]
.sidebar-nav-arrow svg,
body.dark
.sidebar-nav-arrow svg {

  color:
    #ffffff !important;

  stroke:
    #ffffff !important;

}


/* =========================================================
   FOOTER
   ========================================================= */

html[data-theme="dark"]
.sidebar-footer,
body[data-theme="dark"]
.sidebar-footer,
body.dark
.sidebar-footer {

  background:
    #0c0c0c !important;

  border-color:
    rgba(255, 255, 255, .09) !important;

}


/* =========================================================
   FOOTER HOVER
   ========================================================= */

html[data-theme="dark"]
.sidebar-footer:hover,
body[data-theme="dark"]
.sidebar-footer:hover,
body.dark
.sidebar-footer:hover {

  background:
    #121212 !important;

  border-color:
    rgba(255, 255, 255, .14) !important;

}


/* =========================================================
   FOOTER ICON
   ========================================================= */

html[data-theme="dark"]
.sidebar-footer-icon,
body[data-theme="dark"]
.sidebar-footer-icon,
body.dark
.sidebar-footer-icon {

  background:
    #121212 !important;

  border-color:
    rgba(255, 255, 255, .10) !important;

  color:
    #ffffff !important;

}


html[data-theme="dark"]
.sidebar-footer-icon svg,
body[data-theme="dark"]
.sidebar-footer-icon svg,
body.dark
.sidebar-footer-icon svg {

  color:
    #ffffff !important;

  stroke:
    #ffffff !important;

}


/* =========================================================
   LOGO
   ========================================================= */

html[data-theme="dark"]
.sidebar-brand-logo,
body[data-theme="dark"]
.sidebar-brand-logo,
body.dark
.sidebar-brand-logo {

  background:
    #ffffff !important;

  border-color:
    rgba(255, 255, 255, .20) !important;

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

html[data-theme="dark"]
.sidebar-main,
body[data-theme="dark"]
.sidebar-main,
body.dark
.sidebar-main {

  scrollbar-color:
    rgba(255, 255, 255, .14)
    transparent;

}


html[data-theme="dark"]
.sidebar-main::-webkit-scrollbar-thumb,
body[data-theme="dark"]
.sidebar-main::-webkit-scrollbar-thumb,
body.dark
.sidebar-main::-webkit-scrollbar-thumb {

  background:
    rgba(255, 255, 255, .14) !important;

}


/* =========================================================
   MOBILE BACKDROP
   ========================================================= */

@media (max-width: 720px) {

  html[data-theme="dark"]
  .sidebar-mobile-backdrop,
  body[data-theme="dark"]
  .sidebar-mobile-backdrop,
  body.dark
  .sidebar-mobile-backdrop {

    background:
      rgba(0, 0, 0, .68) !important;

  }

}/* =========================================================
   SIDEBAR · OCULTAR MÓDULOS DESHABILITADOS
   ========================================================= */

#appSidebar .sidebar-nav-item[hidden],
#appSidebar .sidebar-nav-item.sidebar-nav-item--hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}