/* La navegación comparte papel, tinta y tipografía con las tres superficies. */
@layer superficie {
  .recorrido { max-width: 52rem; margin-inline: auto; padding: var(--e5) 0; color: var(--color-texto); font-family: var(--fuente-texto); }
  .recorrido [hidden] { display: none !important; }
  .recorrido-cabecera { margin-bottom: var(--e7); }
  .recorrido-progreso { color: var(--color-texto-tenue); font-size: var(--t-2); margin: 0 0 var(--e2); font-variant-numeric: tabular-nums; }
  .recorrido-barra { width: 100%; height: var(--e1); accent-color: var(--color-marca); }
  .recorrido-escenario { min-height: 16rem; }
  .recorrido-titulo { font-family: var(--fuente-titulos); font-size: var(--t-6); line-height: 1.25; margin: 0 0 var(--e4); text-wrap: balance; overflow-wrap: anywhere; }
  .recorrido-descripcion { font-size: var(--t-4); line-height: 1.6; max-width: 65ch; }
  .recorrido-ayuda { color: var(--color-texto-tenue); line-height: 1.6; max-width: 70ch; }
  .recorrido-control.flex-campo { padding: 0; border: 0; margin: var(--e5) 0; background: transparent; }
  .recorrido-control.flex-campo > .flex-titulo, .recorrido-control.flex-campo > .flex-ayuda:first-of-type { display: none; }
  .recorrido-control.flex-campo[data-clave-captura^="doc:"] > .flex-ayuda { display: block; }
  .recorrido-acciones { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: center; padding-top: var(--e4); }
  .recorrido .c-boton { min-height: 44px; white-space: normal; }
  .recorrido-aviso { line-height: 1.5; margin-top: var(--e4); }
  .recorrido-error { color: var(--color-peligro); }
  .recorrido :focus-visible { outline: 3px solid var(--color-foco); outline-offset: 3px; }
  .recorrido-resumen { list-style: none; padding: 0; }
  .recorrido-resumen > li { padding: var(--e5) 0; border-bottom: 1px solid var(--color-borde); }
  .recorrido-respuesta { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; margin: var(--e2) 0; }
  .recorrido-estado { color: var(--color-texto-tenue); font-size: var(--t-2); margin-right: var(--e3); }
  @media (max-width: 640px) {
    .recorrido { padding: var(--e4) 0; }
    .recorrido-cabecera { margin-bottom: var(--e6); }
    .recorrido-titulo { font-size: var(--t-5); }
    .recorrido-acciones > .c-boton--primario { flex: 1 1 55%; }
    .recorrido-acciones { padding-bottom: max(var(--e4), env(safe-area-inset-bottom)); }
  }
}