body {
      padding-top: 82px;
  }

  @media (max-width: 575.98px) {
      body {
          padding-top: 70px;
      }
  }

  /* =========================
     SIDEBAR PRO
  ========================= */
  /* =========================
   SIDEBAR MÁS ORGÁNICO
========================= */
  .x-sidepro {
      position: fixed !important;
      top: 8px;
      left: 18px;
      bottom: 8px;
      width: 275px;

      border-radius: 24px;
      overflow: hidden;

      background:
          radial-gradient(circle at top left, rgba(59, 130, 246, .10), transparent 26%),
          linear-gradient(180deg, rgba(8, 14, 28, .98), rgba(5, 10, 20, .99));

      border: 1px solid rgba(255, 255, 255, .06);
      box-shadow:
          0 20px 50px rgba(0, 0, 0, .25),
          inset 0 1px 0 rgba(255, 255, 255, .03);

      z-index: 1030;

      display: flex;
      flex-direction: column;

      /* importante */
      height: calc(100vh - 16px) !important;
      max-height: calc(100vh - 16px) !important;
  }

  .x-sidepro::before {
      content: "";
      position: absolute;
      top: 0;
      left: 18px;
      right: 18px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(120, 170, 255, .20), transparent);
      pointer-events: none;
      z-index: 1;
  }

  .x-sidepro .custom-scrollbar {
      flex: 1 1 auto;
      min-height: 0;
      height: 100% !important;
      max-height: 100% !important;

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

      margin: 0 !important;
      padding: 12px 14px 20px 12px !important;
      list-style: none;

      position: relative;
      z-index: 2;

      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, .10) transparent;
      overscroll-behavior: contain;
  }

  .x-sidepro .custom-scrollbar::-webkit-scrollbar {
      width: 6px;
  }

  .x-sidepro .custom-scrollbar::-webkit-scrollbar-track {
      background: transparent;
      margin: 10px 0;
  }

  .x-sidepro .custom-scrollbar::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .08);
      border-radius: 999px;
  }

  .x-sidepro .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, .14);
  }

  .x-sidepro .custom-scrollbar::after {
      content: "";
      display: block;
      height: 8px;
  }

  /* clave: evitar que elementos heredados sumen altura rara */
  .x-sidepro .custom-scrollbar>.sidenav-bg {
      display: none !important;
  }

  .x-sidepro .ps__rail-y,
  .x-sidepro .ps__thumb-y,
  .x-sidepro .ps__rail-x,
  .x-sidepro .ps__thumb-x {
      display: none !important;
  }

  /* neutraliza estilos heredados del plugin side-nav */
  .side-nav.x-sidepro {
      right: auto !important;
      margin-left: 0 !important;
  }

  @media (max-width: 991.98px) {
      .x-sidepro {
          top: 76px;
          left: 8px;
          bottom: 8px;
          width: 270px;
          height: calc(100vh - 84px) !important;
          max-height: calc(100vh - 84px) !important;
          border-radius: 22px;
      }
  }

  /* LABELS */
  .x-sidepro__section-label,
  .x-sidepro__group-title {
      padding-left: 8px;
      padding-right: 8px;
      color: rgba(255, 255, 255, .34);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
  }

  /* .x-sidepro__section-label {
      margin-bottom: 10px;
  } */

  .x-sidepro__group-title {
      padding-top: 10px;
      padding-bottom: 8px;
      position: relative;
  }

  .x-sidepro__group-title::after {
      content: "";
      display: block;
      margin-top: 8px;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, .08), transparent);
  }

  /* QUICK BUTTONS */
  .x-sidepro__quick {
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      margin-bottom: 2px;
  }

  .x-sidepro__quick-btn {
      height: 44px;
      border-radius: 16px;
      background:
          linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
      border: 1px solid rgba(255, 255, 255, .07);
      box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .03),
          0 8px 18px rgba(0, 0, 0, .10);
  }

  .x-sidepro__quick-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(96, 165, 250, .22);
      background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  }

  /* LINKS PRINCIPALES */
  .x-sidepro__link {
      min-height: 48px;
      border-radius: 16px;
      margin: 5px 0;
      padding: 0 14px !important;
      background: transparent;
      border: 1px solid transparent;
      font-size: 13px;
      font-weight: 700;
  }

  .x-sidepro__link:hover {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(255, 255, 255, .05);
  }

  .x-sidepro__icon {
      width: 18px;
      text-align: center;
      font-size: 13px;
      color: #7dd3fc;
  }

  .x-sidepro .custom-scrollbar::after {
      content: "";
      display: block;
      height: 12px;
  }

  /* .x-sidepro {
    display: flex;
    flex-direction: column;
  }

  .x-sidepro .custom-scrollbar {
    flex: 1;
  } */

  /* .x-sidepro {
    box-shadow:
      0 20px 50px rgba(0, 0, 0, .25),
      inset 0 1px 0 rgba(255, 255, 255, .03);
  } */

  /* ACTIVO */
  .x-sidepro__nav>li.is-active>.x-sidepro__link {
      background:
          linear-gradient(135deg, rgba(37, 99, 235, .22), rgba(79, 140, 255, .10));
      border: 1px solid rgba(96, 165, 250, .18);
      border-radius: 16px;
      color: #fff !important;
      box-shadow:
          0 10px 24px rgba(0, 0, 0, .14),
          inset 0 1px 0 rgba(255, 255, 255, .03);
  }

  .x-sidepro__nav>li.is-open>.x-sidepro__link {
      background: rgba(255, 255, 255, .04);
      border-color: rgba(255, 255, 255, .05);
  }

  /* SUBMENÚ */
  /* SUBMENÚ */
  .x-sidepro .collapsible-body {
      margin: 4px 0 8px 0;
      padding: 4px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .02);
      border: 1px solid rgba(255, 255, 255, .03);
      overflow: hidden;
  }

  .x-sidepro__subnav {
      padding: 2px;
  }

  .x-sidepro__subnav li {
      list-style: none;
  }

  .x-sidepro__subnav li a {
      min-height: 40px;
      padding: 0 10px;
      border-radius: 14px;
      color: rgba(255, 255, 255, .72);
      font-size: 12px;
      font-weight: 650;

      display: flex;
      align-items: center;
      gap: 8px;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1;
  }

  .x-sidepro__subnav li a i {
      width: 16px;
      min-width: 16px;
      text-align: center;
      font-size: 12px;
      flex: 0 0 16px;
  }

  .x-sidepro__subnav li a:hover,
  .x-sidepro__subnav li a.is-active {
      background: rgba(255, 255, 255, .05);
      color: #fff;
  }

  /* MEJOR BALANCE VISUAL */
  .x-sidepro__nav {
      margin-top: 4px;
  }

  @media (max-width: 991.98px) {
      .x-sidepro {
          top: 76px;
          left: 8px;
          bottom: 8px;
          width: 270px;
          border-radius: 22px;
      }
  }


  .p-xpertech {
      padding: 2.5rem !important;
  }

  /* =========================
     TOPBAR PRO
  ========================= */
  .x-topbar {
      position: fixed;
      top: 8px;
      left: 35px;
      right: 46px;
      z-index: 1040;
      min-height: 62px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      /* border-radius: 18px; */
      border: 1px solid rgba(110, 140, 255, .14);
      background:
          radial-gradient(circle at 20% 0%, rgba(59, 130, 246, .08), transparent 22%),
          radial-gradient(circle at 85% 100%, rgba(99, 102, 241, .08), transparent 22%),
          linear-gradient(180deg, rgba(10, 18, 38, .94), rgba(7, 12, 26, .96));
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow:
          0 14px 40px rgba(0, 0, 0, .30),
          inset 0 1px 0 rgba(255, 255, 255, .03);
      overflow: visible !important;
  }

  .x-topbar::before {
      content: "";
      position: absolute;
      top: 0;
      left: 24px;
      right: 24px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(120, 170, 255, .28), transparent);
      pointer-events: none;
  }

  .x-topbar__left,
  .x-topbar__center,
  .x-topbar__right {
      display: flex;
      align-items: center;
      min-width: 0;
      overflow: visible !important;
  }

  .x-topbar__left {
      flex: 0 0 auto;
  }

  .x-topbar__center {
      flex: 1 1 auto;
      justify-content: center;
  }

  .x-topbar__status-wrap {
      max-width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .x-topbar__right {
      flex: 0 0 auto;
  }

  .x-topbar__nav {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 0;
  }

  .x-topbar__item,
  .x-topbar__item.dropdown {
      list-style: none;
      position: relative;
  }

  .x-topbar__menu {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none !important;
      color: #fff;
      background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
      border: 1px solid rgba(255, 255, 255, .08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
      transition: all .22s ease;
  }

  .x-topbar__menu:hover {
      transform: translateY(-1px);
      background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
      border-color: rgba(120, 170, 255, .18);
  }

  .x-sucursal-chip,
  .x-notify-btn,
  .x-user-nav {
      min-height: 42px;
      height: 42px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px !important;
      color: #fff !important;
      text-decoration: none !important;
      background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .028));
      border: 1px solid rgba(255, 255, 255, .08);
      box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .03),
          0 8px 18px rgba(0, 0, 0, .12);
      transition: all .22s ease;
  }

  .x-sucursal-chip:hover,
  .x-notify-btn:hover,
  .x-user-nav:hover {
      transform: translateY(-1px);
      border-color: rgba(110, 160, 255, .18);
      background: linear-gradient(180deg, rgba(255, 255, 255, .072), rgba(255, 255, 255, .035));
  }

  .x-sucursal-chip__text {
      max-width: 170px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 700;
  }

  .x-notify-btn {
      width: 42px;
      min-width: 42px;
      justify-content: center;
      padding: 0 !important;
      position: relative;
  }

  .x-notify-badge {
      position: absolute;
      top: 3px;
      right: 2px;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, #ff5c87, #ff2d6f);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .14);
      box-shadow: 0 4px 10px rgba(255, 45, 111, .35);
  }

  .x-user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255, 255, 255, .12);
      box-shadow: 0 0 0 2px rgba(59, 130, 246, .12);
  }

  .x-user-nav__name {
      max-width: 110px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 700;
  }

  .x-saas-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 0 10px;
      border-radius: 14px;
      border: 1px solid transparent;
      white-space: nowrap;
      overflow: hidden;
      max-width: 100%;
      box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .03),
          0 10px 24px rgba(0, 0, 0, .14);
  }

  .x-saas-status__icon {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      background: rgba(255, 255, 255, .08);
      font-size: 11px;
  }

  .x-saas-status__text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: .01em;
  }

  .x-saas-status__action {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 30px;
      padding: 0 10px;
      border-radius: 10px;
      text-decoration: none !important;
      font-weight: 800;
      font-size: 12px;
      margin-left: 2px;
      transition: all .2s ease;
  }

  .x-saas-status__action:hover {
      transform: translateY(-1px);
  }

  .x-saas-success {
      background: linear-gradient(180deg, rgba(16, 185, 129, .15), rgba(16, 185, 129, .09));
      border-color: rgba(16, 185, 129, .24);
      color: #9ff5c9;
  }

  .x-saas-warning {
      background: linear-gradient(180deg, rgba(245, 158, 11, .18), rgba(245, 158, 11, .10));
      border-color: rgba(245, 158, 11, .26);
      color: #ffd66d;
  }

  .x-saas-danger {
      background: linear-gradient(180deg, rgba(239, 68, 68, .16), rgba(239, 68, 68, .10));
      border-color: rgba(239, 68, 68, .26);
      color: #ffb1b1;
  }

  .x-saas-warning .x-saas-status__action,
  .x-saas-danger .x-saas-status__action {
      background: rgba(255, 255, 255, .09);
      border: 1px solid rgba(255, 255, 255, .08);
      color: #fff;
  }

  .x-topbar .dropdown-menu {
      position: absolute !important;
      top: calc(100% + 10px) !important;
      right: 0 !important;
      left: auto !important;
      z-index: 9999 !important;
      min-width: 220px;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, .08);
      background: linear-gradient(180deg, rgba(14, 20, 38, .98), rgba(10, 14, 28, .98));
      box-shadow:
          0 20px 40px rgba(0, 0, 0, .30),
          inset 0 1px 0 rgba(255, 255, 255, .03);
      overflow: hidden;
  }

  .x-topbar .dropdown-item {
      color: rgba(255, 255, 255, .86);
      font-size: 13px;
      font-weight: 600;
      padding: 11px 14px;
  }

  .x-topbar .dropdown-item:hover {
      background: rgba(255, 255, 255, .05);
      color: #fff;
  }

  .x-notify-dropdown {
      width: 320px;
      max-width: calc(100vw - 24px);
  }

  .x-notify-header,
  .x-notify-footer {
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  .x-notify-footer {
      border-bottom: 0;
      border-top: 1px solid rgba(255, 255, 255, .06);
  }

  .x-notify-mark {
      background: transparent;
      border: 0;
      color: #93c5fd;
      font-size: 12px;
      font-weight: 700;
  }

  /* Responsive */
  @media (max-width: 991.98px) {
      .x-user-nav__name {
          display: none;
      }

      .x-sucursal-chip__text {
          max-width: 105px;
      }
  }

  @media (max-width: 575.98px) {
      .x-topbar {
          top: 6px;
          left: 8px;
          right: 8px;
          min-height: 56px;
          padding: 6px 8px;
          gap: 6px;
          border-radius: 16px;
      }

      .x-topbar__nav {
          gap: 6px;
      }

      .x-topbar__menu {
          width: 38px;
          height: 38px;
          border-radius: 12px;
      }

      .x-sucursal-chip,
      .x-notify-btn,
      .x-user-nav {
          min-height: 38px;
          height: 38px;
          border-radius: 12px;
      }

      .x-sucursal-chip {
          padding: 0 10px !important;
      }

      .x-sucursal-chip__text {
          max-width: 84px;
          font-size: 12px;
      }

      .x-user-nav {
          padding: 0 6px !important;
      }

      .x-user-avatar {
          width: 30px;
          height: 30px;
      }

      .x-saas-status {
          min-height: 38px;
          padding: 0 8px;
          border-radius: 12px;
          gap: 6px;
      }

      .x-saas-status__text {
          max-width: 82px;
          font-size: 11.5px;
      }

      .x-saas-status__action {
          height: 28px;
          padding: 0 8px;
          font-size: 11px;
      }

      .x-saas-status__action span {
          display: none;
      }

      .x-notify-badge {
          top: 2px;
          right: 1px;
          transform: scale(.88);
      }

      .x-notify-dropdown {
          width: 290px;
      }
  }

  @media (max-width: 430px) {
      .x-topbar__center {
          max-width: 120px;
      }

      .x-sucursal-chip__text {
          max-width: 66px;
      }

      .x-saas-status__text {
          max-width: 60px;
      }

      .x-user-nav.dropdown-toggle::after {
          display: none;
      }
  }

  @media (max-width: 991.98px) {
      .x-sidepro {
          top: 76px;
          left: 8px;
          width: 270px;
          height: calc(100vh - 84px);
          max-height: calc(100vh - 84px);
          border-radius: 22px;
      }
  }

  /* =====================================
SCROLL APPLE STYLE (TRANSPARENTE)
===================================== */

  .x-sidepro,
  .x-sidepro .custom-scrollbar {
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, .18) transparent;
  }

  /* Webkit (Chrome, Edge, Safari) */
  .x-sidepro::-webkit-scrollbar,
  .x-sidepro .custom-scrollbar::-webkit-scrollbar {
      width: 5px;
  }

  /* Track invisible */
  .x-sidepro::-webkit-scrollbar-track,
  .x-sidepro .custom-scrollbar::-webkit-scrollbar-track {
      background: transparent;
  }

  /* Thumb invisible por defecto */
  .x-sidepro::-webkit-scrollbar-thumb,
  .x-sidepro .custom-scrollbar::-webkit-scrollbar-thumb {
      background: transparent;
      border-radius: 999px;
      transition: all .25s ease;
  }

  /* Aparece al hover del sidebar */
  .x-sidepro:hover::-webkit-scrollbar-thumb,
  .x-sidepro .custom-scrollbar:hover::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .18);
      backdrop-filter: blur(6px);
  }

  /* Hover sobre el scroll */
  .x-sidepro::-webkit-scrollbar-thumb:hover,
  .x-sidepro .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, .35);
  }

  .x-sidepro:hover::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .12);
  }