/* Índice de las guías con índice (Criptografía, Networking y Videojuegos): en el celular, una tira que se queda debajo de la barra
   con la sección actual, que abre la lista; en el escritorio, una columna a la izquierda que acompaña al texto. Lo anima /js/toc.js.
   La tipografía (--common-font), el negro de «Índice» y el gris más claro de los temas son los mismos en todas las guías.
   Las líneas y los puntos también son iguales en todas (--common-line, y el negro para la sección actual).
   Cada guía puede cambiar el relleno lateral de su página con --pad (por defecto 16 px). --toc-inset suma el área segura de arriba (por defecto 0).
   La tira va debajo de la barra (--bar-height) y mide --strip-height, las dos de /css/common.css. */
.sidebar { font-family: var(--common-font); font-size: 1.0625rem; position: sticky; top: var(--bar-height); z-index: 10; margin-inline: calc(-1 * var(--pad, 16px)); background: var(--common-bg); border-bottom: 1px solid var(--common-ink); }
.toc > summary { display: flex; align-items: center; gap: 12px; min-height: var(--strip-height); padding: 0 16px; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 700; color: var(--common-ink); }
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after { content: ""; box-sizing: content-box; width: 8px; height: 8px; margin-left: auto; border: solid var(--common-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.toc[open] > summary::after { transform: rotate(-135deg); }
.strip-current { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; color: var(--common-ink-soft); min-width: 0; }
.strip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc nav { max-height: 65vh; overflow-y: auto; padding: 4px 16px 16px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc-ring + .toc-ring { margin-top: 12px; }
.toc-title { display: block; padding: 8px 0 4px; font-weight: 700; color: var(--common-ink); text-decoration: none; }
.toc a:not(.toc-title) { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 2px 0 2px 24px; position: relative; font-weight: 400; color: var(--common-ink-soft); text-decoration: none; }
.toc a[aria-current] { color: var(--common-ink); }
/* Cada parte es una línea con un punto por sección */
.toc-ring ol { position: relative; }
.toc-ring ol::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--common-line); }
.toc a:not(.toc-title)::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; box-sizing: border-box; border: 2px solid var(--common-line); border-radius: 50%; background: var(--common-bg); }
.toc a[aria-current]::before { border-color: var(--common-ink); background: var(--common-ink); }
@media (max-width: 1099px) {
  /* En el celular la tira va fija desde arriba de todo, como «Volver» y el foco, y la barra le deja su lugar */
  .sidebar { position: fixed; top: calc(var(--toc-inset, 0px) + var(--bar-height)); left: 0; right: 0; margin: 0; z-index: 30; }
  .bar, .topbar { margin-bottom: var(--strip-height); }
}
@media (min-width: 1100px) {
  /* El índice va contra el borde izquierdo y siempre abierto, sin la tira */
  .sidebar { align-self: start; top: calc(var(--bar-height) + 12px); margin: 0; max-height: calc(100vh - var(--bar-height) - 24px); overflow-y: auto; scrollbar-width: none; background: none; border: 0; }
  .sidebar::-webkit-scrollbar { display: none; }
  .js .toc > summary { display: none; }
  .toc nav { max-height: none; overflow: visible; padding: 0; }
  .toc-list { display: flex; flex-wrap: wrap; column-gap: 16px; }
  .toc-ring { flex: 1 0 100%; }
  .toc-ring + .toc-ring { margin-top: 4px; }
  .toc-extra { flex: none; }
  .toc a:not(.toc-title) { min-height: 26px; font-size: 1rem; }
  .toc-title { padding: 6px 0 2px; }
}
/* En pantallas táctiles, todos los enlaces del índice (también los títulos que son enlaces) se tocan cómodos */
@media (pointer: coarse) { a.toc-title, .toc a:not(.toc-title) { min-height: 44px; } }