/* Renta 210 — la apertura del caso de a una pregunta.
   Solo tokens de styles.css. Se carga después de styles.css. */

/* El riel: mismas reglas que el índice de etapas, sin colores nuevos. */
.apw-riel {
  border-top: var(--borde-estructural);
  padding-top: var(--e-3);
  margin: var(--e-5) 0 var(--e-5);
  font-size: var(--t-aux);
}
.apw-riel .titulillo {
  font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinta-3); font-weight: 600; margin-bottom: var(--e-2);
}
.apw-conteo { font-family: var(--f-cifra); font-size: var(--t-h2); line-height: 1; margin-bottom: var(--e-2); }
.apw-conteo small { font-family: var(--f-texto); font-size: var(--t-aux); color: var(--tinta-3); }
.apw-riel ol { list-style: none; margin: var(--e-3) 0 0; padding: 0; border-top: var(--borde-fino); }
.apw-riel li { border-bottom: var(--borde-fino); }
.apw-riel li button {
  width: 100%; text-align: left; background: none; border: 0; padding: 7px 0;
  font: inherit; font-size: var(--t-min); cursor: pointer; color: var(--tinta-3);
  display: flex; gap: var(--e-2); align-items: center;
}
.apw-riel li button:hover { color: var(--tinta); }
.apw-riel li button.activo { color: var(--tinta); font-weight: 600; }
.apw-riel li button.hecho { color: var(--tinta-2); }
.apw-riel .cod { font-family: var(--f-cifra); color: var(--tinta-3); }
.apw-riel .punto { width: 8px; height: 8px; flex: none; border: 1.5px dotted var(--tinta-3); box-sizing: border-box; }
.apw-riel button.hecho .punto { background: var(--acento); border: 0; }
.apw-riel button.activo .punto { border: 1.5px solid var(--tinta); background: none; }

/* Con una sola pregunta en pantalla, el bloque no necesita el filete de
   arriba: ya no separa nada. */
.apertura-en-pasos .bloque-apertura h2.seccion { margin-top: var(--e-4); }

.apw-pie {
  display: flex; justify-content: flex-end; align-items: center; gap: var(--e-4);
  margin-top: var(--e-6); padding-top: var(--e-4); border-top: var(--borde-estructural);
}
.apw-pie .estado { font-size: var(--t-min); color: var(--tinta-3); margin-right: auto; }

/* Dos "Continuar" en pantalla confunden: mientras dure el sub-recorrido
   manda el del wizard. */
body.apertura-en-pasos #pie-nav { display: none; }

/* En pantalla ancha el riel va al lado, como el de las etapas. */
@media screen and (min-width: 1200px) {
  #paso-0 { display: grid; grid-template-columns: clamp(190px, 14%, 280px) minmax(0, 1fr); column-gap: var(--e-7); align-items: start; }
  #paso-0 > .titulo, #paso-0 > .lead, #paso-0 > .banda { grid-column: 1 / -1; }
  #paso-0 > .apw-riel { grid-column: 1; grid-row: 4 / span 9; position: sticky; top: var(--e-4); margin-top: 0; }
  #paso-0 > .apertura-rejilla, #paso-0 > .apw-pie { grid-column: 2; }
}

@media print {
  .apw-riel, .apw-pie { display: none !important; }
  body.apertura-en-pasos #pie-nav { display: none !important; }
}