/* asociarme.css — «Asociarme» (public/js/asociarme-socio.js): el alta de Socio nuevo dentro de Mi cuenta, pensada para 375 px. Solo tokens de styles.css; objetivos táctiles de 44 px; foco visible. */
.as-sec { display: grid; gap: var(--sp-4); }
.as-card { display: grid; gap: var(--sp-3); }
.as-card h3 { margin: 0; }
.as-card p { margin: 0; }
.as-paso-n { font-size: var(--t-12); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; }
.as-prueba { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-14); background: var(--aviso-bg); color: var(--aviso-fg); font-size: var(--t-13); }
.as-nota { font-size: var(--t-13); }
.as-h4 { margin: var(--sp-3) 0 0; font-size: var(--t-15); }

/* Los 5 pasos: segmentos de progreso (el paso actual y los hechos en dorado) con el aria-label «Paso n de 5»; el nombre del paso es el título de la tarjeta, no se repite. */
.as-pasos { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-2); }
.as-p { flex: 1; min-width: 0; }
.as-pn { display: block; width: 100%; height: 4px; border-radius: var(--radio-full, 999px); background: var(--overlay-medium); font-size: 0; line-height: 0; color: transparent; overflow: hidden; }
.as-actual .as-pn, .as-hecho .as-pn { background: var(--text-value); }
.as-pt { display: none; }
@media (max-width: 420px) { .as-pasos { gap: var(--sp-1); } }

/* Campos */
.as-campos { display: grid; gap: var(--sp-2); }
.as-campos input, .as-campos select, .as-card input[type="text"], .as-card input[type="tel"], .as-card input[type="date"] { min-height: 44px; width: 100%; box-sizing: border-box; }
.as-ok { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: var(--text-success); }
.as-sub { margin: var(--sp-3) 0 var(--sp-1); font-size: 1rem; font-weight: 700; }
.as-check { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: 44px; cursor: pointer; font-size: var(--t-15); }
.as-check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--text-primary); }
.as-btns { display: grid; gap: var(--sp-2); }
.as-btn, .as-card .btn { min-height: var(--touch, 48px); }
.as-cancelar { color: var(--error-fg); }   /* UX-O-12: «Cancelar la solicitud» es un terciario separado y en tono de error; siempre pide confirmación */
.as-card .btn:focus-visible, .as-check:focus-within, .as-subir:focus-within, .as-reg:focus-visible, .as-plan:focus-within, .as-priv summary:focus-visible, .as-card input:focus-visible, .as-card select:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.as-sep { margin-top: var(--sp-2); }
/* «Esa cédula ya figura en el Club»: la salida (vincular la cédula a la cuenta) en lugar de un callejón */
.as-guia-ced { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-4); border-radius: var(--radio-campo, 16px); background: var(--info-bg); color: var(--info-fg); }
.as-guia-ced p { margin: 0; font-size: var(--t-15); line-height: 1.5; }
.as-guia-ced:focus { outline: none; }

/* Fotos: visor con marco guía */
.as-visor { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-14); overflow: hidden; background: var(--surface-input); }
.as-visor[hidden], .as-sec [hidden] { display: none !important; }   /* también los botones que pasaron a la barra fija (el display de .btn le ganaba a hidden) */
.as-selfie { aspect-ratio: 3 / 4; max-height: 52vh; margin-inline: auto; }
.as-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-espejo { transform: scaleX(-1); }
.as-guia { position: absolute; pointer-events: none; border: 3px dashed var(--text-primary); opacity: .85; }
.as-guia-doc { inset: 10% 4%; border-radius: var(--r-14); aspect-ratio: 1.586; margin: auto; }
.as-guia-cara { inset: 8% 18%; border-radius: 50%; }
.as-guia-txt { font-size: var(--t-13); text-align: center; }
.as-prev { border-radius: var(--r-14); overflow: hidden; background: var(--surface-input); }
.as-prev img { display: block; width: 100%; max-height: 52vh; object-fit: contain; }
.as-subir { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.as-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.as-sub { margin: 0 0 var(--sp-2); font-size: var(--t-16, 16px); font-weight: 700; }
.as-gesto-txt { margin: var(--sp-3) 0; min-height: 2.6em; text-align: center; font-size: var(--t-18, 18px); font-weight: 700; line-height: 1.3; }

/* Plan y reglamento */
.as-planes { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.as-planes legend { font-weight: 700; padding: 0; margin-bottom: var(--sp-2); }
.as-plan { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-3); border: 1px solid var(--linea); border-radius: var(--r-14); cursor: pointer; }
.as-plan input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--text-primary); }
.as-plan-t { display: grid; gap: 2px; }
.as-plan-t small { color: var(--text-secondary); font-size: var(--t-12); }
.as-reg { max-height: 220px; overflow-y: auto; padding: var(--sp-3); border: 1px solid var(--linea); border-radius: var(--r-14); background: var(--surface-input); }
.as-reg-abierto { max-height: none; }
.as-reg-t { margin: 0; white-space: pre-wrap; font-family: inherit; font-size: var(--t-14, 14px); line-height: 1.5; overflow-wrap: anywhere; }

/* Resultado */
.as-estado { font-size: var(--t-16, 16px); line-height: 1.45; }
.as-dato { font-size: var(--t-16, 16px); }
.as-aviso { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-14); background: var(--aviso-bg); color: var(--aviso-fg); font-size: var(--t-13); }
.as-priv { border-top: 1px solid var(--linea); padding-top: var(--sp-3); }
.as-priv summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; font-size: var(--t-13); }

@media (min-width: 720px) { .as-btns { display: flex; flex-wrap: wrap; } .as-btns .btn { min-width: 160px; } }
@media (prefers-reduced-motion: reduce) { .as-card * { animation: none !important; transition: none !important; } }
.as-guardado { margin: 0 0 var(--sp-2); padding-left: 1.2em; font-size: var(--t-13); }
.as-guardado li { margin: 4px 0; }
.as-nro { margin: var(--sp-2) 0 0; font-size: var(--t-13); }

/* ═══ One UI (ola 2, S3): paso a paso con la acción principal fija abajo, secciones plegables, terciarios separados y pantalla de resultado con la plantilla de estado ═══ */
.as-sec { gap: var(--sp-3); }
.as-card h3 { font-size: var(--fs-seccion); line-height: var(--lh-seccion); }
.as-accion .btn, .as-accion .as-subir { width: 100%; }
.as-terc { display: grid; justify-items: center; gap: var(--sp-1); padding: 0 0 var(--sp-3); }
.as-terc .btn-texto { min-height: var(--alto-boton-ter, 44px); }
/* secciones plegables del paso 1 */
.as-fold { border-top: 1px solid var(--sep); }
.as-fold:first-of-type { border-top: 0; }
.as-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--alto-fila, 56px); list-style: none; cursor: pointer; font-size: var(--fs-cuerpo); font-weight: 700; border-radius: var(--radio-campo, 16px); }
.as-fold > summary::-webkit-details-marker { display: none; }
.as-fold > summary:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.as-fold-ch { flex: none; color: var(--text-tertiary); transition: transform var(--t-toque) var(--ease); }
.as-fold:not([open]) .as-fold-ch { transform: rotate(-90deg); }
.as-fold > .as-campos { padding-bottom: var(--sp-3); gap: var(--sp-1); }
.as-campos .campo { margin: 0 0 var(--sp-3); }
.as-campos .campo:last-child { margin-bottom: 0; }
/* plantilla de estado (pantalla de resultado): ícono en círculo, título, motivo y una acción */
.as-final { text-align: center; justify-items: center; }
.as-ic { margin: var(--sp-2) 0 0; }
.as-final-ok .as-ic { background: var(--ok-bg); color: var(--ok-fg); }
.as-final-aviso .as-ic { background: var(--aviso-bg); color: var(--aviso-fg); }
.as-final-error .as-ic { background: var(--error-bg); color: var(--error-fg); }
.as-final .as-priv, .as-final .as-guardado { text-align: left; justify-self: stretch; }
/* marco guía de la cámara: el cuadro claro se ve, afuera se oscurece un poco */
.as-guia { border: 3px solid var(--oli-00); opacity: 1; box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--oli-900) 45%, transparent); }
.as-visor { border-radius: var(--radio-tarjeta, 24px); isolation: isolate; }
.as-prev { border-radius: var(--radio-tarjeta, 24px); }
.as-guia-txt { color: var(--text-secondary); }
/* plan y reglamento: filas de 56 px con radio de campo; el elegido lleva anillo */
.as-plan { border: 0; border-radius: var(--radio-campo, 16px); background: var(--surface-campo, var(--card2)); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--t-toque) var(--ease); }
.as-plan:has(input:checked) { box-shadow: inset 0 0 0 2px var(--text-value); }
.as-reg { border: 0; border-radius: var(--radio-campo, 16px); background: var(--surface-campo, var(--surface-input)); }
.as-check { min-height: var(--alto-boton-ter, 44px); }
.as-prueba, .as-aviso { border-radius: var(--radio-campo, 16px); }
@media (prefers-reduced-motion: reduce) { .as-fold-ch, .as-plan { transition: none; } }
#asT:focus, #asT:focus-visible { outline: none; }   /* el título recibe el foco al cambiar de paso (lector de pantalla), pero no es un control: sin anillo */
/* en los pasos con barra fija, el botón flotante de Atención (58 px) taparía la acción: la ayuda sigue siendo «Hacerlo en el Centro de Atención» */
body.app:has(.as-accion) .atc-fab { display: none; }

/* <pagos-ux> portada: planes y precio antes de empezar */
.as-pt-lista { list-style: none; margin: var(--sp-2) 0; padding: 0; display: grid; gap: var(--sp-2); }
.as-pt-lista li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-default); border-radius: var(--radio-campo); background: var(--surface-card); }
.as-pt-desde { margin: 0 0 var(--sp-2); }
.as-pg-dl { margin: 0 0 var(--sp-3); display: grid; gap: var(--sp-2); text-align: left; }
.as-pg-f { display: grid; gap: 2px; }
.as-pg-f dt { font-size: var(--t-13); color: var(--text-secondary); }
.as-pg-f dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--t-16, 16px); }
.as-pg-f dd .btn { min-height: 44px; }
.as-pg-op { text-align: left; margin: 0 0 var(--sp-3); }
.as-pg-despues { text-align: left; }
.as-pg-otras { margin-top: var(--sp-3); text-align: left; }
.as-pg-online .btn { min-height: 48px; }

/* <categorias> paso 4 con la ficha de cada categoría (public/js/club-categorias-ficha.js + css/club-categorias.css) */
.as-plan-ficha { display: block; padding: 0; cursor: default; }
.as-plan-hd { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-3); cursor: pointer; }
.as-plan-hd input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--text-primary); }
.as-plan-hd:focus-within { outline: var(--focus-outline); outline-offset: 2px; border-radius: var(--radio-campo, 16px); }
.as-plan-det { padding: 0 var(--sp-3) var(--sp-3); }
.as-ficha.cat-card { padding: 0; background: transparent; box-shadow: none; }
.as-otras { margin: var(--sp-3) 0; }
.as-otras > summary { display: flex; align-items: center; min-height: var(--touch); font-weight: 700; cursor: pointer; }
.as-otras > summary:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.as-otras-lista { margin-top: var(--sp-3); }
.as-otras-lista .as-ficha.cat-card { padding: var(--sp-4); background: var(--surface-card); box-shadow: var(--elev-1); }
.as-otras-lista .cat-grilla, .as-otras .cat-grilla { grid-template-columns: 1fr; }