/* ============================================================================
   AMF INGENIERÍA · Capa «por etapas» — v4
   ---------------------------------------------------------------------------
   Se carga DESPUÉS de amf.css y sólo agrega: la barra de progreso, los estados
   de cada tarjeta-etapa y las animaciones de entrada. No redefine nada del
   sistema base, así que la versión clásica y ésta comparten la misma hoja.
   ============================================================================ */

/* ---------- barra de progreso ---------- */
.rail{
  position:sticky;z-index:5;background:var(--paper);border-bottom:1px solid var(--ink-200);
  padding-inline:max(var(--gutter),calc((100% - var(--shell)) / 2));
}
.rail ol{
  list-style:none;margin:0;padding:11px 0 0;display:flex;gap:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
}
.rail ol::-webkit-scrollbar{display:none}
.rail .paso{
  display:flex;align-items:center;gap:9px;padding:0 20px 12px 0;margin-right:20px;
  position:relative;flex:none;cursor:default;background:none;border:0;
  font-family:var(--sans);text-align:left;
}
.rail .paso::after{               /* conector entre etapas */
  /* v4.2: pointer-events:none. Regla del proyecto desde la v3.21, cuando un
     pseudo-elemento decorativo absoluto se comio los clics de un control y las
     pruebas en jsdom no lo vieron: jsdom no calcula geometria. Aca no tapaba
     nada (elementFromPoint da 0 controles tapados a 375 y a 1280 px), pero la
     regla es que todo decorativo posicionado lo lleve, sin excepciones. */
  content:"";position:absolute;right:0;top:11px;width:20px;height:1px;background:var(--ink-200);
  pointer-events:none;
}
.rail .paso:last-child{margin-right:0;padding-right:0}
.rail .paso:last-child::after{display:none}
.rail .mrk{
  width:23px;height:23px;border-radius:50%;flex:none;display:inline-flex;
  align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;
  font-weight:600;border:1.5px solid var(--ink-300);color:var(--ink-400);
  background:var(--paper);transition:.28s var(--ease);
}
.rail .txt{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-400);white-space:nowrap;transition:.2s;
}
.rail .paso.espera{opacity:.6}
.rail .paso.hecha,.rail .paso.activa,.rail .paso.incompleta{cursor:pointer}
.rail .paso.hecha .mrk{background:var(--amf-green);border-color:var(--amf-green);color:#fff;font-size:0}
.rail .paso.hecha .mrk::before{content:"✓";font-size:12px;font-weight:700;line-height:1}
.rail .paso.hecha .txt{color:var(--ink-700)}
.rail .paso.incompleta .mrk{background:var(--amf-orange);border-color:var(--amf-orange);color:var(--ink-900)}
.rail .paso.incompleta .txt{color:var(--ink-700)}
.rail .paso.activa .mrk{
  background:var(--ink-900);border-color:var(--ink-900);color:#fff;
  box-shadow:0 0 0 4px rgba(253,153,5,.22);
}
.rail .paso.activa .txt{color:var(--ink-900);font-weight:600}
.rail .paso.hecha:hover .txt,.rail .paso.incompleta:hover .txt{color:var(--ink-900)}
.rail .barra{height:2px;background:var(--ink-100);position:relative;overflow:hidden}
.rail .barra i{
  display:block;height:100%;width:0;background:var(--amf-orange);
  transition:width .5s var(--ease);
}

/* ---------- etapas ----------
   El estado de la tarjeta NO viaja por opacidad: una transición de opacity que
   nace en una tarea posterior —la etapa 5 la abre un MutationObserver— se queda
   en su valor de partida si el reloj de animación no avanza. La etapa cerrada se
   distingue por el borde punteado y el encabezado atenuado, que no se animan. */
html.anima .etapa{transition:border-color .35s var(--ease)}
.etapa.cerrada{border-style:dashed}
/* El t\u00edtulo de la etapa cerrada mantiene --ink-500 (4,5:1 sobre blanco): la
   distinci\u00f3n ya la dan el borde punteado y el n\u00famero en gris, y bajar el texto a
   --ink-400 lo dejaba en ~3,0:1. El chip se aten\u00faa con color propio, no con
   opacidad, que reduc\u00eda su contraste a ~2,6:1. */
.etapa.cerrada>h2{background:var(--paper);color:var(--ink-500)}
.etapa.cerrada>h2 .num{background:var(--ink-300);color:var(--paper)}
.etapa.cerrada>h2 .chip{background:var(--ink-050);color:var(--ink-500);border-color:var(--ink-200)}
.etapa.activa{border-color:var(--ink-300);box-shadow:0 1px 3px rgba(14,17,22,.07)}
.etapa.activa>h2{background:var(--ink-050);border-bottom-color:var(--ink-300)}
.etapa.activa>h2 .num{background:var(--amf-orange);color:var(--ink-900)}
.etapa.hecha>h2 .num{background:var(--amf-green);color:#fff;font-size:0}
.etapa.hecha>h2 .num::before{content:"✓";font-size:11px;font-weight:700;line-height:1}
.etapa-cuerpo.oculta{display:none}

/* aviso de etapa cerrada */
.etapa-cta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-500);line-height:1.5;padding:2px 0 0;
}
.etapa-cta .abrir{
  background:none;border:0;padding:0;font-family:var(--sans);font-size:12.5px;
  color:var(--amf-blue-deep);text-decoration:underline;text-underline-offset:2px;
  cursor:pointer;min-height:auto;
}
.etapa-cta .abrir:hover{color:var(--ink-900)}

/* pie de etapa con el paso siguiente */
.etapa-pie{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:20px -20px -20px;padding:14px 20px;
  background:var(--ink-050);border-top:1px solid var(--ink-200);
}
.etapa-pie .btn{min-width:170px}
.etapa-pie .btn[disabled]{opacity:.45;cursor:not-allowed}
.etapa-pie .nota{font-size:12.5px;color:var(--ink-500);line-height:1.45;flex:1 1 220px}
.etapa-pie .salto{
  background:none;border:0;padding:0;font-family:var(--sans);font-size:12.5px;
  color:var(--ink-500);text-decoration:underline;text-underline-offset:2px;cursor:pointer;min-height:auto;
}
.etapa-pie .salto:hover{color:var(--ink-900)}
.etapa-pie .atras{margin-left:auto}

/* nota de un botón de acción condicionado (Calcular, Enviar la solicitud) */
.gate-nota{
  font-size:12.5px;color:var(--amf-orange-deep);line-height:1.45;flex:1 1 240px;
  align-self:center;
}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- cierre del flujo ----------
   El último paso: pedir la memoria o enviar la solicitud. Filete tricolor arriba
   para marcar que acá termina el recorrido. */
.etapa-cierre{
  margin:22px -20px -20px;padding:20px;background:var(--ink-050);
  border-top:1px solid var(--ink-200);position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 28px;align-items:center;
}
.etapa-cierre::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:3px;
  pointer-events:none;
  background:linear-gradient(to right,
    var(--amf-orange) 0 25%,var(--amf-green) 25% 45%,var(--amf-blue) 45% 70%,var(--ink-900) 70%);
}
.etapa-cierre .cierre-txt h3.mini{margin:0 0 7px}
.etapa-cierre .cierre-p{margin:0;font-size:13px;color:var(--ink-500);line-height:1.55;max-width:62ch}
/* Un solo texto a la vez: el de \u00abte vamos a pedir los datos\u00bb o el de \u00abya est\u00e1s
   identificado\u00bb. Sin esto el cierre prometer\u00eda un formulario que no aparece. */
.etapa-cierre .cierre-hecho{display:none}
.etapa-cierre.identificado .cierre-p{display:none}
.etapa-cierre.identificado .cierre-hecho{display:block}
.etapa-cierre .cierre-acc{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.etapa-cierre .fila-btns{margin:0;flex-direction:column;align-items:stretch;gap:8px}
.etapa-cierre .btn-cierre{
  font-size:15.5px;padding:14px 30px;min-height:52px;
  background:var(--amf-orange);border-color:var(--amf-orange);color:var(--ink-900);font-weight:600;
}
.etapa-cierre .btn-cierre:hover{background:var(--amf-orange-deep);border-color:var(--amf-orange-deep);color:#fff}
.etapa-cierre .btn-cierre[disabled]{background:var(--ink-200);border-color:var(--ink-200);color:var(--ink-400)}
.etapa-cierre .hint{align-self:center;margin:0}

/* ---------- entradas al hacer scroll ----------
   Ni el estado oculto ni la transición existen hasta que etapas.js confirma que
   el reloj de animación del navegador realmente avanza (clase `anima` en <html>).
   Con un reloj congelado —iframe en segundo plano, pestaña oculta, throttling—
   una propiedad animada se queda en su fotograma 0 %, así que apoyar la
   visibilidad en una animación dejaría el formulario invisible para siempre.
   Sin la clase no hay opacidad 0 ni transición: la página se ve completa. */
html.anima .aparece{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
html.anima .aparece.vista{opacity:1;transform:none}
html.anima .aparece.d1{transition-delay:.06s}
html.anima .aparece.d2{transition-delay:.12s}
html.anima .aparece.d3{transition-delay:.18s}

@media (max-width:760px){
  .rail ol{padding-top:9px}
  .rail .paso{padding:0 13px 10px 0;margin-right:13px;gap:7px}
  .rail .paso::after{width:13px;top:10px}
  .rail .mrk{width:21px;height:21px;font-size:10px}
  .rail .txt{font-size:9.5px;letter-spacing:.08em}
  .etapa-pie{margin:16px -15px -16px;padding:12px 15px}
  .etapa-pie .btn{flex:1 1 100%;min-width:0}
  .etapa-pie .atras{margin-left:0}
  .etapa-cierre{margin:18px -15px -16px;padding:16px 15px;grid-template-columns:1fr;gap:14px}
  .etapa-cierre .btn-cierre{font-size:15px;padding:13px 20px}
}
@media (prefers-reduced-motion:reduce){
  html.anima .aparece{opacity:1;transform:none;transition:none}
  .rail .barra i{transition:none}
}
@media print{
  .rail{display:none !important}
  .etapa,.etapa.cerrada{border-style:solid}
  .etapa-cuerpo.oculta{display:block !important}
  .etapa-cta,.etapa-pie{display:none !important}
  .etapa-cierre{display:none !important}
  html.anima .aparece{opacity:1;transform:none}
}