/* ============================================================
   ÍNDICE DE CONTENIDO · rail vertical a la derecha del curso.
   Compartida: la usan los talleres (ywriter, mapa-brujula) y cualquier página
   que declare el hueco [data-indice-rail] dentro de .curso__cuerpo.
   NO es una barra pegada arriba: es una columna. Por eso no lleva
   data-barra-secundaria ni depende de las reglas de capa0.css para eso.
   ============================================================ */

:root{
  /* Ancho del rail. Se usa también para recentrar las franjas a sangre. */
  --rail-ancho:15rem;
  /* La regla trazada a mano del sistema, girada 90°. Mismo trazo, en vertical. */
  --regla-trazo-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='120' preserveAspectRatio='none'%3E%3Cpath d='M2.2 0C1 20 3.4 40 2.2 60S1 100 2.2 120' stroke='%23000' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
}

/* ---------------------------------------------- La fila del curso
   El rail acompaña a TODO el cuerpo (secciones y franjas intercaladas), no a un
   contenedor suelto. Con align-items:flex-start el rail mide lo que mide su
   contenido y su position:sticky viaja dentro de la altura de la fila entera. */
.curso{ display:flex; gap:var(--space-6); align-items:flex-start; }
.curso__cuerpo{ flex:1 1 auto; min-width:0; }

/* Cada sección trae su .contenedor con width:min(88rem,92vw). Dentro de una
   columna más estrecha que la ventana ese ancho fijo desborda y se mete debajo
   del rail. Aquí pasa a ser un máximo, que es lo que siempre quiso ser. */
.curso__cuerpo .contenedor{ width:100%; max-width:var(--contenedor); margin-inline:auto; }

/* Sin hueco declarado por la página, el rail no existe. Tampoco por debajo del
   ancho en que cabe: ahí el temario de arriba ya hace el trabajo y no se pierde
   nada. No hay versión horizontal de reemplazo. */
.curso__rail{ display:none; }

@media (min-width:80rem){
  /* La columna de contenido y el carril son un bloque, y el bloque se centra.
     Antes el carril se pegaba al borde de la VENTANA mientras el contenido se
     centraba en el contenedor: el texto quedaba a 987 px del índice que lo
     navega, con medio papel vacío en medio. El ancho es el del contenido más el
     carril más la separación, así que el carril cae justo al lado. */
  .curso{ width:min(77rem, 92vw); margin-inline:auto; }
  .curso__rail{
    display:block;
    flex:0 0 var(--rail-ancho);
    position:sticky;
    top:calc(var(--alto-barra) + var(--space-4));
  }

  /* La franja alterna de los módulos se pinta a sangre desde .mod--franja::before,
     centrada en el propio .mod. Al meter el contenido en una columna, ese centro se
     corre media columna a la izquierda y la franja dejaría de llegar al borde derecho.
     Se devuelve el centro a la ventana. */
  .curso__cuerpo .mod--franja::before{
    margin-left:calc(-50vw + (var(--rail-ancho) + var(--space-6)) / 2);
  }
}

/* ---------------------------------------------- El rail */
.indice-curso{
  max-height:calc(100vh - var(--alto-barra) - var(--space-6));
  /* Sólo se desplaza en vertical, y sólo si de verdad no cabe. Nunca en horizontal:
     las etiquetas parten de línea. */
  overflow-y:auto;
  scrollbar-width:thin;
  padding-left:var(--space-4);
}

/* El rail NO se esconde al bajar. Es position:sticky dentro de .curso, así que él solo
   aparece cuando llegas a la zona, se queda mientras dura el curso y se va cuando el
   curso termina. Antes colgaba de body.chrome-oculto y por eso sólo volvía subiendo;
   eso no es una navegación, es un premio. */

/* La regla trazada a mano, vertical, sobre el borde del rail. Va en el hueco (que no
   se desplaza) y no dentro del nav, para que no se mueva al desplazar la lista. */
.curso__rail::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0.25rem;
  background-color:var(--tinta-regla, var(--sello-acento));
  -webkit-mask-image:var(--regla-trazo-v); mask-image:var(--regla-trazo-v);
  -webkit-mask-repeat:repeat-y; mask-repeat:repeat-y;
  -webkit-mask-size:0.25rem 7.5rem; mask-size:0.25rem 7.5rem;
  pointer-events:none;
}

.indice-curso__rotulo{
  font-family:var(--fuente-mono); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:0.09em;
  color:var(--color-texto-secundario);
  padding-bottom:var(--space-2); margin-bottom:var(--space-3);
  border-bottom:var(--linea) solid var(--color-linea);
}

.indice-curso__lista{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--space-2);
}
.indice-curso__lista li{ min-width:0; }

.indice-curso__lista a{
  display:flex; align-items:baseline; gap:var(--space-2);
  font-family:var(--fuente-cuerpo); font-size:var(--fs-sm); line-height:1.35;
  color:var(--color-texto-secundario);
  /* La marca del activo es una regla vertical, no un cambio de color. */
  border-left:0.125rem solid transparent;
  padding:0.1rem 0 0.1rem var(--space-2);
}
.indice-curso__lista a:hover{ color:var(--color-texto); }
.indice-curso__lista a:focus-visible{
  outline:0.1875rem solid var(--sello-acento);
  outline-offset:0.1rem;
}
.indice-curso__lista a[aria-current="true"]{
  color:var(--color-texto);
  border-left-color:var(--sello-acento);
}

.indice-curso__n{
  flex:0 0 auto;
  font-family:var(--fuente-mono); font-size:var(--fs-xs);
  color:var(--sello-acento);
}
.indice-curso__lista a[aria-current="true"] .indice-curso__n{ font-weight:700; }

@media print{
  .curso__rail{ display:none; }
  .curso__cuerpo .contenedor{ max-width:none; }
}