/*
 * Fase L — sidebar tree (sections, details/summary, links).
 *
 * Custom triangle on <details><summary> via a ::before pseudo-element —
 * the native disclosure marker is hidden with `list-style: none`. The
 * triangle rotates 90deg when the details open, smoothly via
 * `--transition-fast`.
 *
 * Section headers use --font-display + uppercase + tracked letter
 * spacing to read as "command-line" labels rather than prose. Active
 * link uses bg-subtle + link color + medium weight per spec.
 */

/* ---------- Section groups (collapsible <details>) ---------- */
.sidebar-group {
  margin: 0;
}

.sidebar-group__title {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-sidebar-section);
  border-radius: var(--radius-md);
}

.sidebar-group:first-child .sidebar-group__title {
  margin-top: 0;
}

.sidebar-group__title::-webkit-details-marker {
  display: none;
}

.sidebar-group__title::before {
  content: '\25B8'; /* black right-pointing small triangle */
  display: inline-block;
  color: var(--color-sidebar-icon);
  font-size: var(--text-xs);
  transition: transform var(--transition-fast);
}

.sidebar-group[open] > .sidebar-group__title::before {
  transform: rotate(90deg);
}

.sidebar-group__title:hover {
  background: var(--color-sidebar-item-hover);
  color: var(--color-sidebar-text-active);
}

/* Listas de ítems con scroll propio acotado (Primeros pasos / Guías /
   Conceptos), para que las secciones largas no empujen el resto. */
.sidebar-scroll {
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Indicador de "hay más contenido": fade en el borde con autohide.
     Capas 1-2 (cover, color del sidebar, attachment:local) se mueven con el
     contenido y tapan el fade al llegar al tope/fondo; capas 3-4 (el fade
     claro, attachment:scroll) quedan fijas al viewport del scroller. */
  background-image:
    linear-gradient(var(--color-bg-sidebar), rgba(10, 10, 10, 0)),
    linear-gradient(rgba(10, 10, 10, 0), var(--color-bg-sidebar)),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)),
    linear-gradient(to top, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  background-position: top, bottom, top, bottom;
  background-size: 100% 26px, 100% 26px, 100% 16px, 100% 16px;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-primary) 70%, white);
}

.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}

.sidebar-section {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-section > li {
  margin: 0;
}

.sidebar-section details {
  margin: var(--space-1) 0;
}

.sidebar-section details > summary {
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  font-weight: var(--weight-medium);
  color: var(--color-sidebar-text);
  border-radius: var(--radius-md);
  list-style: none;
  display: flex;
  align-items: center;
}

.sidebar-section details > summary::-webkit-details-marker {
  display: none;
}

.sidebar-section details > summary::before {
  content: '\25B8'; /* black right-pointing small triangle */
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--color-sidebar-icon);
  font-size: var(--text-xs);
  transition: transform var(--transition-fast);
}

.sidebar-section details[open] > summary::before {
  transform: rotate(90deg);
}

.sidebar-section details > summary:hover {
  background: var(--color-sidebar-item-hover);
  color: var(--color-sidebar-text-active);
}

.sidebar-section details > ul {
  list-style: none;
  padding: 0 0 0 var(--space-3);
  margin: var(--space-1) 0 var(--space-2) var(--space-4);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-section details > ul > li {
  margin: 1px 0;
}

/* Sub-ítems (enlaces dentro de una carpeta): más tenues que el summary
   padre, para que el nivel se note. Hover/activo vuelven a blanco. */
.sidebar-section details > ul a {
  color: var(--color-sidebar-subitem);
  font-size: var(--text-sm);
}

.sidebar-section details > ul a:hover,
.sidebar-section details > ul a[aria-current="page"] {
  color: var(--color-sidebar-text-active);
}

.sidebar a {
  display: block;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  color: var(--color-sidebar-text);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar a:hover {
  background: var(--color-sidebar-item-hover);
  color: var(--color-sidebar-text-active);
}

.sidebar a[aria-current="page"] {
  background: var(--color-sidebar-item-active);
  color: var(--color-sidebar-text-active);
  font-weight: var(--weight-medium);
  box-shadow: inset 2px 0 0 var(--color-primary);
}

.sidebar-concepts a {
  padding-left: var(--space-3);
}

/* ---------- How-to pillar ---------- */
.sidebar-how-to .is-scaffold > a {
  color: var(--color-sidebar-icon);
}

.sidebar-scaffold-badge {
  font-size: var(--text-xs);
  color: var(--color-sidebar-icon);
  font-style: italic;
  text-transform: lowercase;
}

/* ---------- Admin pillar sub-buckets ---------- */
.sidebar-admin-bucket {
  list-style: none;
  margin-top: var(--space-3);
}

.sidebar-admin-bucket h4 {
  margin: 0;
  padding: var(--space-1) 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-sidebar-section);
}

.sidebar-admin .sidebar-admin-bucket:first-child {
  margin-top: 0;
}

/* ---------- Custom scrollbar (WebKit) ---------- */
.layout-sidebar::-webkit-scrollbar {
  width: 8px;
}

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

.layout-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
}

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