/* Asistente de afiliación: índice de pasos a la izquierda y hoja del paso actual.
   En el teléfono el índice se reduce a una línea de avance sobre la hoja. */
.asistente{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start;padding-block:36px 0}

.progreso__movil{display:none}
.progreso__lista{position:sticky;top:20px;margin:0;padding:0;list-style:none;border-top:2px solid var(--texto)}
.progreso__lista li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--linea);color:var(--texto-3)}
.progreso__lista .n{display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--linea-2);border-radius:50%;font:700 13px/1 var(--mono);color:var(--texto-3)}
.progreso__lista b{display:block;font-size:15px;color:inherit}
.progreso__lista small{display:block;font-size:12.5px;line-height:1.4}
.progreso__lista li[aria-current="step"]{color:var(--texto)}
.progreso__lista li[aria-current="step"] .n{background:var(--verde-profundo);border-color:var(--verde-profundo);color:#fff}
.progreso__lista li.hecho .n{border-color:var(--verde);color:var(--verde)}
.progreso__lista li.hecho .n::after{content:"✓";font-family:var(--fuente);font-size:14px}
.progreso__lista li.hecho .n{font-size:0}
.progreso__lista li.omitido{opacity:.55}

.hoja{min-width:0;padding:32px 36px 28px;background:var(--superficie);border:1px solid var(--linea);border-top:2px solid var(--texto)}
.paso{display:flex;flex-direction:column;gap:22px}
.paso .titulo:focus{outline:none}
.acciones{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:22px;border-top:1px solid var(--linea)}
.acciones .boton{min-width:150px}
.opcional{font-weight:400;color:var(--texto-3)}
.campo--separado{margin-top:4px}
.otro{max-width:220px;margin-top:8px}
.error{color:var(--error);font-weight:600;font-size:14px}

/* Código de la tarjeta, en el lenguaje del propio plástico: mono, espaciado, legible. */
.tarjeta-cuf{display:flex;flex-direction:column;gap:6px;padding:16px 0;border-top:2px solid var(--texto);border-bottom:1px solid var(--linea)}
.tarjeta-cuf__valor{font-size:clamp(19px,5.2vw,26px);font-weight:700;letter-spacing:.08em;color:var(--texto);overflow-wrap:anywhere}
.tarjeta-cuf__estado{font-size:14.5px;font-weight:600;color:var(--texto-2)}
.tarjeta-cuf__estado[data-tono="ok"]{color:var(--verde)}
.tarjeta-cuf__estado[data-tono="error"]{color:var(--error)}

.equivalencia{font-size:14px;color:var(--texto-3)}

/* Resumen previo a la firma y resumen final: pares rótulo · valor alineados. */
.resumen{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);margin:0;border-top:2px solid var(--texto)}
.resumen dt,.resumen dd{margin:0;padding:10px 0;border-bottom:1px solid var(--linea);font-size:14.5px}
.resumen dt{color:var(--texto-3);padding-right:16px}
.resumen dd{color:var(--texto);font-weight:600;overflow-wrap:anywhere}
@media (max-width:420px){.resumen{grid-template-columns:minmax(0,1fr)}.resumen dt{padding-bottom:0;border-bottom:0}.resumen dd{padding-top:2px}}

.documento{padding:20px 22px;border:1px solid var(--linea-2);background:var(--fondo);font-size:14.5px;color:var(--texto-2);max-height:340px;overflow:auto}
.documento__ref{font-size:12.5px;color:var(--aviso);font-weight:600;margin-bottom:10px}
.documento h3{font-size:16px;margin-bottom:10px;color:var(--texto)}
.documento ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.documento b{color:var(--texto)}

.firma{position:relative;height:170px;border:1px dashed var(--linea-2);background:var(--superficie);touch-action:none}
.firma canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.firma__linea{position:absolute;left:24px;right:24px;bottom:38px;border-bottom:1px solid var(--linea-2);pointer-events:none}
.firma__pie{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px}

.otp-campo{max-width:280px}
.otp{font-size:28px;letter-spacing:.5em;text-align:center;padding-inline:8px}

.paso--final .titulo{color:var(--verde)}
.pie-final{font-size:14.5px;color:var(--texto-2)}

@media (max-width:860px){
  .asistente{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0}
  .progreso__lista{display:none}
  .progreso__movil{display:flex;flex-direction:column;gap:8px;margin:0;padding:16px 0 14px;font-size:14px;font-weight:600;color:var(--texto-2)}
  .progreso__barra{display:block;height:4px;background:var(--linea)}
  .progreso__barra span{display:block;height:100%;width:100%;background:var(--verde);transform-origin:left;transform:scaleX(var(--avance,.16));transition:transform .25s ease}
  .hoja{padding:24px 20px 22px;margin-inline:-20px;border-left:0;border-right:0}
}
@media (max-width:420px){
  .hoja{margin-inline:-16px;padding-inline:16px}
  .acciones .boton{min-width:0;flex:1}
}

/* Anulación */
.boton--peligro{background:var(--error);color:#fff}
.boton--peligro:hover{background:color-mix(in srgb,var(--error) 85%,#000)}
:root[data-theme="dark"] .boton--peligro{color:#1A0705}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .boton--peligro{color:#1A0705}}
.progreso__barra .mitad{--avance:.5}
.progreso__barra .completo{--avance:1}