.sidebar {
  @extend .py-0;
  @extend .box;
  @extend .m-lg-2;

  .nav-item {
    @extend .rounded-pill;
    @extend .w-100;
    transition: background-color 0.4s;

    // Hover por defecto (solo si no tiene clase hover-bg-*)
    &:not([class*="hover-bg-"]):hover,
    &:not([class*="hover-bg-"]).active {
      @extend .bg-primary;
      @extend .bg-opacity-75;

      .nav-link {
        color: #ffffff !important;
      }
    }

    .nav-link {
      i {
        @extend .me-2;
      }
    }
  }

  @include media-breakpoint-up(lg) {
    @extend .py-lg-2;
    position: sticky;
    top: 0;
    left: 0;
    width: clamp(250px, 100%, 300px);
    max-width: 300px;
    transition: width 0.3s ease;

    .offcanvas-body {
      display: block;
    }

    &.open {
      .nav-link {
        overflow: hidden;
        white-space: nowrap;

        span {
          transition: opacity 0.3s, visibility 0.3s;
          opacity: 1;
          visibility: visible;
        }
      }
    }

    &.close {
      width: 80px;

      .nav-item:hover {
        position: relative;

        &::after {
          content: attr(data-tooltip);
          position: absolute;
          top: 50%;
          left: 100%;
          transform: translate(10px, -50%);
          background-color: rgba(0, 0, 0, 0.7);
          color: white;
          padding: 5px 10px;
          border-radius: 5px;
          opacity: 0;
          animation: fadeInOut 4s ease-in-out;
          font-style: normal;
          max-width: 200px;
        }
      }

      .nav-link {
        overflow: hidden;
        white-space: nowrap;

        span {
          transition: opacity 0.3s, visibility 0.3s;
          opacity: 0;
          visibility: hidden;
        }
      }
    }
  }
}