.app-custom-sidebar {
  .app-sidebar {
    background-color: #0077c0 !important;

    > .menu > .menu-item > .menu-link,
    > .menu > .menu-item > .menu-title {
      font-weight: 600 !important;
    }

    .menu-sub .menu-link,
    .menu-sub .menu-title {
      font-weight: 300 !important;
    }

    .menu-link,
    .menu-title,
    .menu-arrow {
      color: #fff !important;
    }

    .menu-arrow {
      width: 1rem !important;
      height: 1rem !important;
      fill: #fff !important;
    }

    .menu-icon {
      .ki-duotone,
      .ki-outline,
      .ki-solid {
        color: #fff !important;

        > span {
          fill: #fff !important;
        }
      }
    }

    .bullet-dot {
      background-color: #fff !important;
    }
  }

  .app-sidebar-wrapper.hover-scroll-overlay-y {
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: transparent;
      border-radius: 3px;
      transition: background-color 0.3s ease;
    }

    &::-webkit-scrollbar-thumb:hover,
    &::-webkit-scrollbar-thumb:active {
      background-color: rgba(255, 255, 255, 0.3);
    }

    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  #kt_scrolltop {
    background-color: #0077c0 !important;

    .ki-duotone,
    .ki-outline,
    .ki-solid {
      color: #ffffff !important;

      > span {
        fill: #ffffff !important;
      }
    }
  }

  .dropdown-menu.show {
    margin-right: 2rem !important;
  }

  #kt_app_sidebar_footer {
    .menu-heading {
      color: #fff !important;
    }
  }

  [class^="apexcharts-"][class*="-icon"] {
    top: -4em !important;
  }

  .apexcharts-menu.apexcharts-menu-open {
    top: -2em !important;
  }

  .card .card-header .card-title,
  .card .card-header .card-title .card-label,
  .fs-2hx {
    font-size: 2rem !important;
  }

  /* Oculta los íconos originales */
  .ki-black-left-line .path1:before,
  .ki-black-left-line .path2:before {
    display: none !important;
  }

  #kt_app_sidebar_toggle {
    display: inline-block;

    &::before {
      content: "\f053";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 1.7rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      transition: content 0.3s ease;
    }

    &.active::before {
      content: "\f054";
    }
  }

  @media (max-width: 1025px) {
    #kt_app_header {
      position: sticky;
      top: 0;
      z-index: 1050;
      background-color: #fff;
    }

    .app-sidebar {
      z-index: 1051;
    }

    .fullscreen-message {
      font-size: 1.2rem !important;
    }

    .card .card-header .card-title,
    .card .card-header .card-title .card-label,
    .fs-2hx,
    .fs-1,
    .fs-4 {
      font-size: 1.2rem !important;
    }

    .ls-n2 {
      letter-spacing: 0 !important;
    }

    .dropdown-menu.show {
      right: 0rem !important;
      left: auto !important;
      top: 100% !important;
      transform: none !important;
      width: auto !important;
      max-width: calc(100vw);
      overflow-x: hidden;
      box-sizing: border-box;
    }
  }

  @media (min-width: 1026px) {
    .custom-padding-dashboard,
    .custom-padding-reports,
    .custom-padding-documents {
      padding: 3rem !important;
    }
  }

  #guardarCompraOCR {
    .select2-container--bootstrap5 .select2-selection--single {
      height: 42px !important;
    }

    .select2-container--bootstrap5.select2-container--focus:not(
        .select2-container--disabled
      ),
    .select2-container--bootstrap5.select2-container--open:not(
        .select2-container--disabled
      )
      .form-select:not(.form-select-solid):not(.form-select-transparent) {
      border-color: var(--bs-gray-400);
      height: 42px !important;
    }
  }
}

.btn.btn-danger {
  border-color: #ff6961;
  background-color: #ff6961;
}

.btn.btn-danger:hover {
  border-color: #ff6961;
  background-color: #ff6961;
}

.btn-check:checked + .btn.btn-danger,
.btn-check:active + .btn.btn-danger,
.btn.btn-danger:focus:not(.btn-active),
.btn.btn-danger:hover:not(.btn-active),
.btn.btn-danger:active:not(.btn-active),
.btn.btn-danger.active,
.btn.btn-danger.show,
.show > .btn.btn-danger {
  border-color: #ff6961;
  background-color: #ff6961 !important;
}

[data-kt-scrolltop="on"] .scrolltop {
  opacity: 0.7 !important;
  animation: animation-scrolltop 0.4s ease-out 1 !important;
}

[data-kt-scrolltop]:not([data-kt-scrolltop="on"]) .scrolltop {
  opacity: 1 !important;
  animation: none !important;
}

.scrolltop:hover {
  opacity: 1 !important;
  transition: opacity 0.3s ease;
}