/* =========================================================
   ML RENTABILIDAD · SIDEBAR
   FUTURISTA / PREMIUM / FLAT
   BORDES MARCADOS / DIVISIONES / ANIMADO
   SIN CARDS
   ========================================================= */


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

.sidebar {
  position: relative;

  z-index: 80;

  width: 100%;
  height: 100vh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

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

  background:
    var(--sidebar);

  box-shadow:
    12px 0 40px
    rgba(
      0,
      0,
      0,
      0.08
    );

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


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

.sidebar::before {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 2px;

  content: "";

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      var(--accent) 18%,
      var(--accent) 55%,
      transparent 100%
    );

  opacity: 0.75;

  animation:
    sidebarTopGlow
    6s
    ease-in-out
    infinite;
}

@keyframes sidebarTopGlow {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }
}


/* =========================================================
   AMBIENT BACKGROUND
   ========================================================= */

.sidebar::after {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 240px;

  z-index: -1;

  content: "";

  pointer-events: none;

  background:
    radial-gradient(
      circle at 30% 0%,
      color-mix(
        in srgb,
        var(--accent) 10%,
        transparent
      ),
      transparent 60%
    );

  animation:
    sidebarAmbient
    9s
    ease-in-out
    infinite;
}

@keyframes sidebarAmbient {
  0%,
  100% {
    transform:
      translateY(0);

    opacity: 0.7;
  }

  50% {
    transform:
      translateY(25px);

    opacity: 1;
  }
}


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

.sidebar-header {
  position: relative;

  min-height: 76px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding:
    0
    16px;

  border-bottom:
    1px solid
    var(--border-strong);

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--surface-2) 55%,
        transparent
      ),
      transparent
    );
}


/* =========================================================
   HEADER SIDE DETAIL
   ========================================================= */

.sidebar-header::after {
  position: absolute;

  left: 0;
  bottom: -1px;

  width: 58px;
  height: 1px;

  content: "";

  background:
    var(--accent);

  box-shadow:
    0 0 10px
    color-mix(
      in srgb,
      var(--accent) 55%,
      transparent
    );
}


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

.sidebar-mark {
  position: relative;

  width: 39px;
  height: 39px;

  flex:
    0
    0
    auto;

  display: grid;
  place-items: center;

  overflow: hidden;

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

  border-radius: 8px;

  background:
    linear-gradient(
      135deg,
      var(--accent-soft),
      color-mix(
        in srgb,
        var(--accent) 5%,
        transparent
      )
    );

  color:
    var(--accent);

  box-shadow:
    inset
    0 0 0 1px
    color-mix(
      in srgb,
      var(--accent) 4%,
      transparent
    ),
    0 0 20px
    color-mix(
      in srgb,
      var(--accent) 10%,
      transparent
    );

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

.sidebar-mark::before {
  position: absolute;

  top: -70%;
  left: -80%;

  width: 80%;
  height: 240%;

  content: "";

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.32
      ),
      transparent
    );

  transform:
    rotate(22deg);

  animation:
    sidebarLogoScan
    5s
    ease-in-out
    infinite;
}

@keyframes sidebarLogoScan {
  0%,
  60% {
    left: -90%;
  }

  100% {
    left: 140%;
  }
}

.sidebar-header:hover
.sidebar-mark {
  transform:
    rotate(-3deg)
    scale(1.04);

  border-color:
    var(--accent);

  box-shadow:
    0 0 24px
    color-mix(
      in srgb,
      var(--accent) 20%,
      transparent
    );
}

.sidebar-mark svg {
  width: 18px;
  height: 18px;
}


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

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

  display: grid;

  gap: 3px;
}

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

  color:
    var(--text);

  font-size: 13px;
  font-weight: 900;

  line-height: 1;

  letter-spacing:
    -0.035em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

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

  color:
    var(--muted);

  font-size: 8px;
  font-weight: 700;

  letter-spacing:
    0.04em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.sidebar-nav {
  position: relative;

  flex:
    1
    1
    auto;

  min-height: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;

  padding:
    15px
    10px;

  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-width:
    thin;
}


/* =========================================================
   NAV VERTICAL LINE
   ========================================================= */

.sidebar-nav::before {
  position: absolute;

  top: 44px;
  bottom: 14px;
  left: 25px;

  width: 1px;

  content: "";

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      var(--border-strong),
      color-mix(
        in srgb,
        var(--border) 45%,
        transparent
      ),
      transparent
    );
}


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

.sidebar-section-label {
  position: relative;

  display: block;

  margin-bottom: 8px;

  padding:
    0
    9px;

  color:
    var(--muted-2);

  font-size: 7px;
  font-weight: 900;

  letter-spacing:
    0.2em;

  text-transform:
    uppercase;
}

.sidebar-section-label::after {
  position: absolute;

  top: 50%;
  right: 9px;

  width: 34px;
  height: 1px;

  content: "";

  background:
    var(--border);
}


/* =========================================================
   LINKS
   ========================================================= */

.sidebar-link {
  position: relative;

  min-height: 44px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding:
    0
    11px;

  overflow: hidden;

  border: 0;

  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--border) 55%,
      transparent
    );

  border-radius: 0;

  background:
    transparent;

  color:
    var(--muted);

  font-size: 11px;
  font-weight: 750;

  text-align:
    left;

  transition:
    background var(--transition),
    color var(--transition),
    padding-left var(--transition),
    border-color var(--transition);
}


/* =========================================================
   LINK HOVER
   ========================================================= */

.sidebar-link::after {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;

  width: 0;

  content: "";

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(
        in srgb,
        var(--accent) 7%,
        transparent
      )
    );

  transition:
    width
    220ms
    ease;
}

.sidebar-link:hover {
  padding-left:
    15px;

  color:
    var(--text);

  border-bottom-color:
    var(--border-strong);

  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--accent) 5%,
        transparent
      ),
      transparent 75%
    );
}

.sidebar-link:hover::after {
  width:
    100%;
}


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

.sidebar-link.active {
  padding-left:
    15px;

  color:
    var(--text);

  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--accent) 12%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--accent) 3%,
        transparent
      ) 72%,
      transparent
    );

  border-bottom-color:
    var(--accent-border);
}


/* =========================================================
   ACTIVE LEFT LINE
   ========================================================= */

.sidebar-link.active::before {
  position: absolute;

  top: 8px;
  bottom: 8px;
  left: 0;

  width: 2px;

  content: "";

  background:
    var(--accent);

  box-shadow:
    0 0 12px
    color-mix(
      in srgb,
      var(--accent) 65%,
      transparent
    );

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

@keyframes sidebarActiveLine {
  0%,
  100% {
    opacity: 0.65;
  }

  50% {
    opacity: 1;
  }
}


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

.sidebar-link-icon {
  position: relative;

  z-index: 2;

  width: 30px;
  height: 30px;

  flex:
    0
    0
    auto;

  display: grid;
  place-items: center;

  border:
    1px solid
    transparent;

  border-radius:
    6px;

  background:
    transparent;

  color:
    var(--muted);

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

.sidebar-link:hover
.sidebar-link-icon {
  color:
    var(--text);

  transform:
    translateX(2px);
}

.sidebar-link.active
.sidebar-link-icon {
  border-color:
    var(--accent-border);

  background:
    color-mix(
      in srgb,
      var(--accent) 8%,
      transparent
    );

  color:
    var(--accent);
}

.sidebar-link-icon svg {
  width: 15px;
  height: 15px;

  stroke-width:
    1.9;
}


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

.sidebar-link-text {
  position: relative;

  z-index: 2;

  min-width: 0;

  overflow: hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sidebar-link.active
.sidebar-link-text {
  font-weight:
    850;
}


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

.sidebar-link.active
.sidebar-link-text::after {
  display: inline-block;

  width: 4px;
  height: 4px;

  margin-left: 8px;

  border-radius:
    50%;

  content: "";

  vertical-align:
    middle;

  background:
    var(--accent);

  box-shadow:
    0 0 8px
    var(--accent);
}


/* =========================================================
   CLICK ANIMATION
   ========================================================= */

.sidebar-link-click {
  animation:
    sidebarClick
    180ms
    ease;
}

@keyframes sidebarClick {
  50% {
    transform:
      translateX(2px)
      scale(0.985);
  }
}


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

.sidebar-footer {
  position: relative;

  flex:
    0
    0
    auto;

  padding:
    11px
    12px
    12px;

  border-top:
    1px solid
    var(--border-strong);

  background:
    linear-gradient(
      0deg,
      color-mix(
        in srgb,
        var(--surface-2) 50%,
        transparent
      ),
      transparent
    );
}


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

.sidebar-footer::before {
  position: absolute;

  top: -1px;
  left: 12px;

  width: 42px;
  height: 1px;

  content: "";

  background:
    var(--accent);

  opacity: 0.7;
}


/* =========================================================
   USER
   ========================================================= */

.sidebar-user {
  position: relative;

  min-height: 48px;

  display: flex;
  align-items: center;

  gap: 10px;

  padding:
    0
    4px;

  transition:
    transform var(--transition);
}

.sidebar-user:hover {
  transform:
    translateX(2px);
}


/* =========================================================
   USER AVATAR
   ========================================================= */

.sidebar-avatar {
  width: 34px;
  height: 34px;

  flex:
    0
    0
    auto;

  display: grid;
  place-items: center;

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

  border-radius:
    7px;

  background:
    color-mix(
      in srgb,
      var(--accent) 8%,
      transparent
    );

  color:
    var(--accent);

  box-shadow:
    0 0 14px
    color-mix(
      in srgb,
      var(--accent) 7%,
      transparent
    );
}

.sidebar-avatar svg {
  width: 14px;
  height: 14px;
}


/* =========================================================
   USER COPY
   ========================================================= */

.sidebar-user-copy {
  min-width: 0;

  display: grid;

  gap: 3px;
}

.sidebar-user-copy strong {
  overflow: hidden;

  color:
    var(--text);

  font-size: 10px;
  font-weight: 850;

  line-height: 1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sidebar-user-copy span {
  position: relative;

  padding-left:
    10px;

  color:
    var(--muted);

  font-size: 7px;
  font-weight: 650;

  line-height: 1;
}

.sidebar-user-copy span::before {
  position: absolute;

  top: 50%;
  left: 0;

  width: 5px;
  height: 5px;

  content: "";

  border-radius:
    50%;

  background:
    var(--success);

  transform:
    translateY(-50%);

  box-shadow:
    0 0 8px
    color-mix(
      in srgb,
      var(--success) 60%,
      transparent
    );

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

@keyframes sidebarOnline {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}


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

.sidebar.collapsed
.sidebar-brand-copy,
.sidebar.collapsed
.sidebar-link-text,
.sidebar.collapsed
.sidebar-user-copy,
.sidebar.collapsed
.sidebar-section-label {
  display: none;
}

.sidebar.collapsed
.sidebar-header {
  justify-content:
    center;

  padding:
    0;
}

.sidebar.collapsed
.sidebar-mark {
  width: 36px;
  height: 36px;
}

.sidebar.collapsed
.sidebar-nav {
  padding:
    14px
    8px;

  align-items:
    stretch;
}

.sidebar.collapsed
.sidebar-nav::before {
  left:
    50%;

  transform:
    translateX(-50%);
}

.sidebar.collapsed
.sidebar-link {
  width: 100%;
  min-height: 44px;

  justify-content:
    center;

  padding:
    0;

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

.sidebar.collapsed
.sidebar-link:hover {
  padding-left:
    0;
}

.sidebar.collapsed
.sidebar-link.active {
  padding-left:
    0;
}

.sidebar.collapsed
.sidebar-link.active::before {
  top: 10px;
  bottom: 10px;
  left: 0;
}

.sidebar.collapsed
.sidebar-link-icon {
  width: 31px;
  height: 31px;
}

.sidebar.collapsed
.sidebar-footer {
  padding:
    10px
    7px;
}

.sidebar.collapsed
.sidebar-user {
  justify-content:
    center;

  padding: 0;
}


/* =========================================================
   COLLAPSE TRANSITION
   ========================================================= */

.sidebar.sidebar-transitioning
.sidebar-brand-copy,
.sidebar.sidebar-transitioning
.sidebar-link-text,
.sidebar.sidebar-transitioning
.sidebar-user-copy {
  animation:
    sidebarContentFade
    180ms
    ease;
}

@keyframes sidebarContentFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


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

html[data-theme="dark"]
.sidebar {
  background:
    linear-gradient(
      180deg,
      #0d1014 0%,
      #090c10 100%
    );

  border-right-color:
    rgba(
      255,
      255,
      255,
      0.1
    );
}

html[data-theme="dark"]
.sidebar-header {
  background:
    linear-gradient(
      180deg,
      rgba(
        255,
        255,
        255,
        0.025
      ),
      transparent
    );
}

html[data-theme="dark"]
.sidebar-link {
  border-bottom-color:
    rgba(
      255,
      255,
      255,
      0.055
    );
}

html[data-theme="dark"]
.sidebar-link:hover {
  border-bottom-color:
    rgba(
      255,
      255,
      255,
      0.12
    );
}


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

html[data-theme="light"]
.sidebar {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f7f8fa
    );

  border-right-color:
    rgba(
      15,
      23,
      42,
      0.13
    );
}

html[data-theme="light"]
.sidebar-link {
  border-bottom-color:
    rgba(
      15,
      23,
      42,
      0.075
    );
}


/* =========================================================
   MOBILE OVERLAY
   ========================================================= */

body.sidebar-mobile-active::before {
  position: fixed;

  inset: 0;

  z-index: 190;

  content: "";

  background:
    rgba(
      0,
      0,
      0,
      0.58
    );

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);

  animation:
    sidebarOverlayIn
    180ms
    ease;
}

@keyframes sidebarOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


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

@media (
  max-width: 820px
) {
  .sidebar {
    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    z-index: 200;

    width:
      min(
        86vw,
        280px
      );

    height: 100dvh;

    transform:
      translateX(-105%);

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

    box-shadow:
      24px 0 80px
      rgba(
        0,
        0,
        0,
        0.36
      );

    transition:
      transform
      260ms
      cubic-bezier(
        .2,
        .85,
        .2,
        1
      );
  }

  .sidebar.mobile-open {
    transform:
      translateX(0);
  }


  .sidebar.collapsed {
    width:
      min(
        86vw,
        280px
      );
  }


  .sidebar.collapsed
  .sidebar-brand-copy,
  .sidebar.collapsed
  .sidebar-link-text,
  .sidebar.collapsed
  .sidebar-user-copy,
  .sidebar.collapsed
  .sidebar-section-label {
    display: block;
  }


  .sidebar.collapsed
  .sidebar-header {
    justify-content:
      flex-start;

    padding:
      0
      16px;
  }


  .sidebar.collapsed
  .sidebar-nav {
    padding:
      15px
      10px;
  }


  .sidebar.collapsed
  .sidebar-nav::before {
    left: 25px;

    transform: none;
  }


  .sidebar.collapsed
  .sidebar-link {
    justify-content:
      flex-start;

    padding:
      0
      11px;
  }


  .sidebar.collapsed
  .sidebar-link:hover,
  .sidebar.collapsed
  .sidebar-link.active {
    padding-left:
      15px;
  }


  .sidebar.collapsed
  .sidebar-footer {
    padding:
      11px
      12px
      12px;
  }


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


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (
  max-width: 520px
) {
  .sidebar {
    width:
      min(
        90vw,
        260px
      );
  }

  .sidebar.collapsed {
    width:
      min(
        90vw,
        260px
      );
  }

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

  .sidebar-link {
    min-height:
      42px;
  }
}


/* =========================================================
   TOUCH
   ========================================================= */

@media (
  hover: none
) {
  .sidebar-link:hover,
  .sidebar-user:hover,
  .sidebar-header:hover
  .sidebar-mark {
    transform: none;
  }
}


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

@media (
  prefers-reduced-motion:
  reduce
) {
  .sidebar::before,
  .sidebar::after,
  .sidebar-mark::before,
  .sidebar-link.active::before,
  .sidebar-user-copy span::before,
  .sidebar-link-click {
    animation:
      none !important;
  }
}/* =========================================================
   FIX · OCULTAR LÍNEA VERTICAL DEL NAV
   ========================================================= */

.sidebar-nav::before {
  display: none !important;
}