/* =====================================================================
   Ruta de aprendizaje: portada, tira de pasos, «siguiente paso» y menú.
   ===================================================================== */

/* Tarjeta «Tu siguiente paso» */
.sig-paso {
  display: grid; gap: 6px; justify-items: start; width: 100%; padding: 18px 20px;
  border: 1px solid var(--borde-fuerte); border-left: 4px solid var(--acento); border-radius: 10px; background: var(--superficie);
}
.sig-paso.hecho { border-left-color: var(--verde); }
.sig-et { font: 700 12px var(--titulos); letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
:root:not([data-theme="light"]) .sig-et { color: #6f9bff; }
.sig-paso.hecho .sig-et { color: var(--verde); }
.sig-meta { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--mono); color: var(--suave); }
.sig-meta svg { width: 15px; height: 15px; }
.sig-paso strong { font: 600 19px/1.3 var(--titulos); }
.sig-paso .btn { margin-top: 6px; }
.fin-tema { flex-direction: column; align-items: flex-start; }
#resultado .sig-paso { margin-top: 14px; }
.quiz .sig-paso { margin-top: 18px; }

/* Tira de pasos del módulo: un punto por tema, ejercicio y test */
.riel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; }
.riel-txt { font: 600 13px var(--mono); color: var(--suave); }
.riel-txt small { font-weight: 500; }
.riel ol { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
.riel-p { position: relative; display: block; width: 22px; height: 10px; border-radius: 3px; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borde-fuerte); transition: transform .12s; }
.riel-p.ejercicio { border-radius: 50%; width: 10px; }
.riel-p.test { width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg); }
.riel-p.hecho { background: var(--verde); box-shadow: none; }
.riel-p.actual { background: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.riel-p:hover { transform: scale(1.25); }
.riel-p.test:hover { transform: rotate(45deg) scale(1.25); }

/* Portada: la ruta */
.bloque-sub { margin: -6px 0 16px; }
.ruta-etapa { margin-top: 22px; }
.ruta-etapa-cab { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ruta-etapa-cab h3 { margin: 0; font: 700 15px var(--titulos); letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.ruta-etapa-cab p { margin: 0; font-size: 14px; color: var(--suave); }
.ruta-mods { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ruta-mod {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 18px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie);
}
.ruta-mod.aqui { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.ruta-mod.completo { border-color: color-mix(in srgb, var(--verde) 45%, var(--borde)); }
.ruta-num {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  font: 700 18px var(--titulos); color: var(--suave); background: var(--superficie-2); box-shadow: inset 0 0 0 2px var(--borde-fuerte);
}
.ruta-mod.aqui .ruta-num { background: var(--acento); color: #fff; box-shadow: none; }
.ruta-mod.completo .ruta-num { background: var(--verde); color: #fff; box-shadow: none; }
/* Línea que une los módulos de una etapa */
.ruta-mod:not(:last-child)::after { content: ""; position: absolute; left: 38px; top: calc(50% + 21px); height: calc(50% - 11px); width: 2px; background: var(--borde-fuerte); }
.ruta-mod:not(:first-child)::before { content: ""; position: absolute; left: 38px; top: -11px; height: calc(50% - 10px); width: 2px; background: var(--borde-fuerte); }
.ruta-cuerpo { display: grid; gap: 6px; min-width: 0; }
.ruta-tit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ruta-tit a { font: 600 18px/1.3 var(--titulos); color: var(--texto); text-decoration: none; }
.ruta-tit a:hover { text-decoration: underline; }
.ruta-cuerpo p { margin: 0; font-size: 15px; color: var(--suave); }
.ruta-meta { font: 500 12.5px var(--mono); color: var(--suave); }
.chip.aqui { background: var(--acento); color: #fff; }
@media (max-width: 640px) {
  .ruta-mod { grid-template-columns: auto minmax(0, 1fr); padding: 14px; gap: 12px; }
  .ruta-accion { grid-column: 1 / -1; }
  .ruta-accion .btn { width: 100%; }
  .ruta-mod::before, .ruta-mod::after { display: none; }
}

/* Página de módulo: pasos numerados */
.paso-n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 50%;
  font: 700 15px var(--titulos); color: #fff; background: var(--acento); vertical-align: 3px;
}

/* Menú lateral: siguiente paso y etapas */
.side-siguiente {
  display: grid; gap: 2px; margin: 0 0 14px; padding: 12px 14px; border-radius: 8px;
  background: var(--acento); color: #fff; text-decoration: none;
}
.side-siguiente small { font: 700 11px var(--titulos); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.side-siguiente strong { font: 600 15px/1.3 var(--titulos); }
.side-siguiente span { font-size: 12.5px; opacity: .85; }
.side-siguiente:hover { filter: brightness(1.1); }
.side-etapa { margin: 14px 8px 4px; font: 700 11px var(--titulos); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }