/* Fase 8.4 · Trazabilidad de pasos: verde con ✓ = completo, rojo = paso actual, gris = pendiente.
   El estado nunca depende solo del color: cada paso muestra ícono o texto y un texto para lectores de pantalla. */
:root {
  --step-done: var(--green);
  --step-done-bg: var(--green-light);
  --step-now: var(--brand);
  --step-now-ink: var(--brand-dark);
  --step-wait: var(--muted);
  --step-wait-bar: #cdd5e0;
}
:root[data-theme="dark"] {
  --step-now-ink: var(--red);
  --step-wait-bar: #4a5263;
}

/* Línea de progreso: «3 de 7 pasos completos» y un segmento por paso con su color. */
.step-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 22px 0 0; }
.step-progress-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.step-progress-text strong { color: var(--ink); font-weight: 700; }
.step-progress-bar { display: flex; gap: 4px; flex: 1 1 180px; max-width: 360px; margin: 0; padding: 0; list-style: none; }
.step-progress-bar li { flex: 1; height: 7px; border-radius: 4px; background: var(--line); }
.step-progress-bar .is-complete { background: var(--step-done); }
.step-progress-bar .is-current { background: var(--step-now); }
.step-progress-bar :is(.is-skipped, .is-partial) { background: var(--step-wait-bar); }
.step-progress + .step-trail { margin-top: 12px; }

/* Texto de cada paso: nombre y estado breve. */
.step-trail button > .step-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.step-trail .step-name { overflow-wrap: anywhere; }
.step-trail .step-state { font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--step-wait); }
.step-trail .step-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.step-trail button > .step-mark { color: var(--ink); }
.step-trail button > .step-mark svg { width: 15px; height: 15px; stroke-width: 2.6; }

/* Completo: verde de éxito con ✓. */
.step-trail button.is-complete { border-color: var(--step-done); background: var(--step-done-bg); color: var(--ink); }
.step-trail button.is-complete > .step-mark { background: var(--step-done); color: var(--surface); }
.step-trail button.is-complete .step-state { color: var(--step-done); }

/* Actual: rojo corporativo (el fondo, borde y círculo vienen de la señal común del paso activo). */
.step-trail button[aria-current] .step-state { color: var(--step-now-ink); }

/* Quedó atrás con datos pendientes: gris con borde discontinuo, distinto de «sin empezar». */
.step-trail button.is-skipped { border-style: dashed; border-color: var(--step-wait); }
.step-trail button.is-skipped > .step-mark { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--step-wait); }
.step-trail button.is-skipped .step-state { color: var(--ink); }

.step-trail button:is(.is-complete, .is-skipped):hover { border-color: var(--accent); }

@media (max-width: 950px) {
  /* En celular la evaluación usa el selector de pasos; la barra conserva los colores de cada paso. */
  .p4-page .step-progress { margin-top: 18px; }
  .p4-page .step-progress-bar { max-width: none; flex-basis: 100%; }
  .p4-page .step-progress-bar li { height: 9px; }
}
@container (max-width: 560px) {
  .step-progress-bar { max-width: none; flex-basis: 100%; }
}