:root{
  --toc-offset-top: 80px;
  --toc-gradient: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
}

/* Caja TOC */
#table-of-contents.toc{
  position: sticky;
  top: calc(var(--toc-offset-top) + 20px);
  background: #f9f9fb;
  border: 1px solid #e5e7eb;
  border-radius: 0px;
  padding: 0;
  max-width: 100%;
  line-height: 2;
  font-size: .95rem;
  overflow: hidden;
}

/* Plegable con <details>/<summary> */
#table-of-contents .toc-summary{
  list-style: none;
  display: flex; align-items: center; width: 100%;
  padding: .9rem 1rem; cursor: pointer;
  background: #f3f5f8; border-bottom: 1px solid #e5e7eb;
  user-select: none;
}
#table-of-contents .toc-summary::-webkit-details-marker{ display: none; }

/* Título + chevron */
#table-of-contents .toc-title{
  font-weight: 700; font-size: 1.05rem;
}

/* Flecha */
#table-of-contents .toc-chevron{
  width: 1rem; height: 1rem; margin-right: .6rem; display: inline-block;
  border-right: 2px solid #64748b; border-bottom: 2px solid #64748b;
  transform-origin: 50% 50%;
  transition: transform .2s ease;
}
#table-of-contents .toc-acc:not([open]) .toc-chevron{ transform: rotate(0deg); }
#table-of-contents .toc-acc[open] .toc-chevron{ transform: rotate(90deg); }

/* Lista con animación (max-height) */
#table-of-contents nav{
  padding: .6rem 1rem 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
#table-of-contents .toc-acc[open] nav{
  max-height: 70vh;                  /* tope visual para animar */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Estructura de la lista */
#table-of-contents ul{ list-style: none; margin: 0; padding: 0; }
#table-of-contents li{ margin: .28rem 0; }
#table-of-contents li.toc-h2 > a{ font-weight: 600; text-decoration: none; }
#table-of-contents li.toc-h3{
  margin-left: 1rem;
  font-size: .92em;
  color: #555;          /* solo afecta texto no-enlace (p.ej., bullet custom si lo hubiera) */
}
#table-of-contents li.toc-h2 > ul{
  margin: .25rem 0 .35rem;
  padding-left: .75rem;
  border-left: 2px solid #ececec;
}

/* Enlaces */
#table-of-contents a{
  text-decoration: none;
}

/* Estado activo / hover */
#table-of-contents a:hover,
#table-of-contents a:focus,
#table-of-contents a.is-active{
  text-decoration: underline;
  outline: none;
  text-underline-offset: 2px;
}

/* === Degradado aplicado al texto del título y enlaces === */
#table-of-contents .toc-title,
#table-of-contents a{
  background: var(--toc-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Modo inline (móvil) */
#table-of-contents.is-inline{
  position: static;
  max-width: 100%;
  margin: 1rem 0;
  top: auto;
}

/* Accesibilidad visual al enfocar headings destino */
h2:focus, h3:focus{
  outline: 2px dashed #aaa;
  outline-offset: 4px;
}

/* Responsive */
@media (max-width: 767px){
  #table-of-contents .toc-summary{ padding: .8rem .9rem; }
  #table-of-contents .toc-title{ font-size: 1rem; }
}

/* (Opcional) selección de texto agradable con degradado */
#table-of-contents ::selection{
  background: rgba(59,130,246,.2);
  color: #0f172a;
}

/* === Bullets para los ítems del TOC === */
#table-of-contents li{
  position: relative;
  padding-left: 1.25rem; /* espacio para el bullet */
}
/* Bullet base (H3 por defecto) */
#table-of-contents li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;            /* centra verticalmente respecto a la línea */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--toc-gradient); /* usa tu gradiente */
  transform: translateY(-50%);
}
/* Bullet más grande para H2 */
#table-of-contents li.toc-h2::before{
  width: 8px;
  height: 8px;
  top: 0.95em;
}
/* “Pop” en hover/activo */
#table-of-contents li:hover::before{
  filter: brightness(1.1);
  box-shadow: 0 0 0 4px color-mix(in srgb, #3B82F6 12%, transparent);
}
/* (Compatibilidad dark mode) */
@media (prefers-color-scheme: dark){
  #table-of-contents li.toc-h2 > ul{ border-left-color: #2a2f37; }
  #table-of-contents li:hover::before{ box-shadow: 0 0 0 4px color-mix(in srgb, #8B5CF6 16%, transparent); }
}