body {
      font-family: 'Inter', sans-serif;
      background: #0A0C0D;
      color: #E5E7EB;
      overflow-x: hidden;
    }
body.drawer-open {
  overflow: hidden;
  height: 100vh;
}
    /* Desktop Sidebar */
    .sidebar {
      position: fixed;
      top: 64px;                 /* altura REAL del navbar */
      left: 0;
      width: 260px;
      height: calc(100vh - 64px);
      padding: 24px 22px;
      background: #0B0D0F;
      border-right: 1px solid rgba(255,255,255,0.08);
 
      overflow-y: auto;
      display: none;
    }
    @media (min-width: 1024px) {
      .sidebar { display: block; }
    }

    .sidebar a {
      display: block;
      padding: 6px 10px;
      border-radius: 6px;
      color: #A1A1AA;
      font-size: 0.9rem;
    }

    .drawer a {
      display: block;
      padding: 6px 10px;
      border-radius: 6px;
      color: #A1A1AA;
      font-size: 0.9rem;
    }

    .sidebar a.active,
    .sidebar a:hover {
      background: rgba(255,255,255,0.05);
      color: #fff;
    }
    .drawer a.active,
    .drawer a:hover {
      background: rgba(255,255,255,0.05);
      color: #fff;
    }
    .sidebar h2 {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #6B7280;
      margin-bottom: 10px;
    }
    /* MOBILE TOC BUTTON */
    .mobile-toc-button {
      position: sticky;
      top: 60px;
      z-index: 50;
      width: 100%;
      background: #0A0C0D;
      padding: 12px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display: flex;
      justify-content: flex-start;
    }
    @media (min-width: 1024px) {
      .mobile-toc-button { display: none; }
    }

    /* Mobile Drawer */
    .drawer {
      position: fixed;
      top: 0;
      left: 0;
      width: 270px;
      height: 100%;
      background: #0B0D0F;
      padding: 28px 20px;
      border-right: 1px solid rgba(255,255,255,0.08);
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      z-index: 100;
    }
    .drawer.open {
      transform: translateX(0);
    }

    .drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(2px);
      display: none;
      z-index: 90;
    }
    .drawer-overlay.show {
      display: block;
    }

    main {
      max-width: 750px;
      margin: 0 auto;
      padding: 150px 20px 60px;
    }
    @media (min-width: 1024px) {
      main { margin-left: 260px; }
    }

    /* RIGHT–SIDE TOC */
    .toc {
      position: fixed;
      top: 140px;
      right: 30px;
      width: 220px;
      padding: 20px;
      background: #0E1318;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      font-size: 0.85rem;
      display: none;
    }
    @media (min-width: 1280px) {
      .toc { display: block; }
    }

    .toc nav a {
      display: block;
      padding: 6px 4px;
      color: #9CA3AF;
      border-radius: 6px;
      margin-bottom: 4px;
    }

    .toc nav a:hover {
      color: white;
      background: rgba(255,255,255,0.05);
    }

        /* === Custom scrollbar for dark UI === */
.sidebar {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}

/* Chrome, Edge, Safari */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.25);
  border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255,255,255,0.4);
}