:root {
    --sb-accent: #1e58af;
    --sb-accent-2: #3f7fe0;
    --sb-accent-soft: rgba(30, 88, 175, 0.10);
    --sb-text: #4a5568;
    --sb-muted: #a0aec0;
  }

  #sidenav-main {
    background: #ffffff;
    min-height: 100vh;
    box-shadow: 0 0 40px rgba(20, 40, 80, 0.05);
    border: 1px solid #eef1f6 !important;
  }

  /* Header / logo */
  #sidenav-main .sidenav-header img { max-height: 62px; object-fit: contain; }

  /* Divisores finos */
  #sidenav-main hr { border-color: #eef1f6; opacity: 1; }

  /* Encabezados de sección */
  #sidenav-main .sb-section {
    display: flex; align-items: center; gap: .5rem;
    color: var(--sb-muted);
    font-size: .62rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: .25rem 1.25rem;
    margin: .35rem 0 .15rem;
  }
  #sidenav-main .sb-section::after { content: ""; flex: 1; height: 1px; background: #eef1f6; }

  /* Enlaces principales */
  #sidenav-main .navbar-nav > .nav-item { margin: 1px .55rem; }
  #sidenav-main .nav-link {
    position: relative;
    display: flex; align-items: center;
    color: var(--sb-text);
    font-size: .875rem; font-weight: 500;
    padding: .6rem .7rem;
    border-radius: .7rem;
    transition: background-color .18s ease, color .18s ease;
  }
  #sidenav-main .nav-link:hover { background: #f4f7fb; color: var(--sb-accent); }

  /* Chip de ícono */
  #sidenav-main .icon {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sb-accent-soft);
    color: var(--sb-accent);
    border-radius: .6rem;
    flex-shrink: 0;
    transition: all .18s ease;
  }
  #sidenav-main .nav-link:hover .icon { background: var(--sb-accent); color: #fff; }
  #sidenav-main .icon i { transition: color .18s ease; font-size: .9rem; }

  /* Estado ACTIVO */
  #sidenav-main .nav-link.active {
    background: var(--sb-accent-soft);
    color: var(--sb-accent);
    font-weight: 600;
  }
  #sidenav-main .nav-link.active::before {
    content: "";
    position: absolute; left: -.55rem; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 22px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--sb-accent), var(--sb-accent-2));
  }
  #sidenav-main .nav-link.active .icon {
    background: linear-gradient(135deg, var(--sb-accent), var(--sb-accent-2));
    color: #fff;
    box-shadow: 0 4px 10px rgba(30, 88, 175, 0.28);
  }

  /* Oculta la flecha por defecto que inyecta el tema Soft UI (evita duplicados) */
  #sidenav-main .nav-link::after,
  #sidenav-main .nav-link .caret,
  #sidenav-main .nav-link-text::after { content: none !important; display: none !important; border: 0 !important; background: none !important; }

  /* Caret propia que rota */
  #sidenav-main .sb-caret { margin-left: auto; font-size: .68rem; color: var(--sb-muted); transition: transform .2s ease; }
  #sidenav-main .nav-link[aria-expanded="true"] .sb-caret { transform: rotate(90deg); color: var(--sb-accent); }

  /* Submenús con guía vertical */
  #sidenav-main .sb-submenu {
    list-style: none;
    margin: .15rem 0 .25rem 1.35rem;
    padding-left: .85rem;
    border-left: 1.5px solid #eef1f6;
  }
  #sidenav-main .sb-submenu .nav-link {
    font-size: .82rem; font-weight: 500;
    color: #718096;
    padding: .42rem .65rem;
    border-radius: .55rem;
  }
  #sidenav-main .sb-submenu .nav-link:hover { color: var(--sb-accent); background: #f4f7fb; }
  #sidenav-main .sb-submenu .nav-link.active { color: var(--sb-accent); background: var(--sb-accent-soft); font-weight: 600; }
  #sidenav-main .sb-submenu .nav-link.active::before { display: none; }
  #sidenav-main .sb-submenu .nav-link .sb-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #cbd5e0; margin-right: .6rem; flex-shrink: 0;
    transition: background .18s ease;
  }
  #sidenav-main .sb-dot i { display: none; }
  #sidenav-main .sb-submenu .nav-link:hover .sb-dot,
  #sidenav-main .sb-submenu .nav-link.active .sb-dot { background: var(--sb-accent); }

  #sidenav-main .sb-logo-compact { display: none; }

  /* El modo compacto muestra iconos; al acercar el cursor vuelve a expandirse. */
  @media (min-width: 1200px) {
    body.g-sidenav-hidden #sidenav-main:not(:hover) {
      width: 5.25rem !important;
      max-width: 5.25rem !important;
      overflow: visible;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover).fixed-start ~ .main-content {
      margin-left: 6.75rem !important;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) .sidenav-header {
      height: 5.25rem;
      padding: 1rem 0 !important;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) .sb-logo-full { display: none; }
    body.g-sidenav-hidden #sidenav-main:not(:hover) .sb-logo-compact {
      display: inline-block;
      width: 42px !important;
      height: 42px;
      object-fit: contain;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) hr,
    body.g-sidenav-hidden #sidenav-main:not(:hover) .sb-section,
    body.g-sidenav-hidden #sidenav-main:not(:hover) .sb-caret,
    body.g-sidenav-hidden #sidenav-main:not(:hover) .nav-link-text,
    body.g-sidenav-hidden #sidenav-main:not(:hover) .sb-label {
      display: none !important;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) .navbar-collapse {
      display: block !important;
      width: 100% !important;
      overflow: visible;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) .navbar-nav > .nav-item {
      margin: .35rem 0;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) .navbar-nav > .nav-item:has(> .sb-section:only-child) {
      display: none;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) .navbar-nav > .nav-item > .nav-link {
      width: 3.25rem;
      min-height: 3.25rem;
      justify-content: center;
      margin: 0 auto;
      padding: .35rem !important;
      overflow: visible;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) .navbar-nav > .nav-item > .nav-link .icon {
      width: 2.6rem;
      height: 2.6rem;
      margin: 0 !important;
      padding: 0 !important;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) .navbar-nav > .nav-item > .nav-link.active::before {
      left: -.6rem;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) .sb-submenu {
      margin: .1rem 0;
      padding: 0;
      border-left: 0;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) .sb-submenu .nav-link {
      width: 3.25rem;
      min-height: 2.75rem;
      justify-content: center;
      margin: .15rem auto;
      padding: .3rem !important;
      overflow: visible;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) .sb-submenu .sb-dot {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.15rem;
      height: 2.15rem;
      margin: 0;
      border-radius: .55rem;
      background: #f0f4fa;
      color: var(--sb-accent);
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) .sb-submenu .sb-dot i {
      display: inline-block;
      font-size: .78rem;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) .navbar-nav > .nav-item > .nav-link::after,
    body.g-sidenav-hidden #sidenav-main:not(:hover) .sb-submenu .nav-link::after {
      content: attr(data-sidebar-label) !important;
      display: block !important;
      position: absolute;
      z-index: 1080;
      left: calc(100% + .7rem);
      top: 50%;
      width: max-content;
      max-width: 12rem;
      padding: .42rem .65rem;
      border-radius: .45rem;
      background: #1f2937 !important;
      color: #fff;
      font-size: .75rem;
      font-weight: 600;
      line-height: 1.2;
      box-shadow: 0 5px 16px rgba(31, 41, 55, .18);
      opacity: 0;
      pointer-events: none;
      transform: translate(.2rem, -50%);
      transition: opacity .15s ease, transform .15s ease;
    }

    body.g-sidenav-hidden #sidenav-main:not(:hover) .navbar-nav > .nav-item > .nav-link:focus-visible::after {
      opacity: 1;
      transform: translate(0, -50%);
    }
  }