/* cuenta.css — «Mi cuenta» (public/js/cuenta-shell.js): navegación por secciones, Inicio por tarea, Membresía en tarjetas, candados con acción, pasos para vincular la cédula y Pagos.
   One UI (docs/oneui-app.md): solo piezas y tokens del sistema (.tarjeta/.pila, .grupo, .btn-valor/.btn-ghost/.btn-texto, OLI.campo, .accion-fija, .contenido-angosto; --sp-*, --radio-*, --fs-*, --alto-*, --z-*, --surface-*, --text-*).
   Ningún color, px de radio ni tamaño de letra suelto, y ningún estilo en línea. Mobile primero. */
.cu-sec.section { border: none; padding-top: var(--sp-2); }
.cu-sec .lead { margin-bottom: var(--sp-4); }
/* Botones de una tarjeta: apilados a todo el ancho en el celular (el pulgar los alcanza), en fila desde 600 px. Uno principal, el resto secundario o de texto. */
.cu-btns { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.cu-btns > .btn, .cu-btns > .btn-texto { width: 100%; }
@media (min-width: 600px) { .cu-btns { display: flex; flex-wrap: wrap; align-items: center; } .cu-btns > .btn, .cu-btns > .btn-texto { width: auto; } }
.cu-sub { margin: var(--sp-1) 0 0; font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); color: var(--text-secondary); }
.cu-card { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.cu-card h3 { margin: 0; font-size: var(--fs-seccion); line-height: var(--lh-seccion); font-weight: 600; }
.cu-card h4 { margin: var(--sp-3) 0 0; font-size: var(--fs-cuerpo); line-height: var(--lh-cuerpo); }
.cu-card p { margin: 0; }
body.app .pila > .cu-card { margin-bottom: 0; }
.cu-sec > .tarjeta, .cu-sec > .cu-card { margin-bottom: var(--sp-3); }

/* Navegación: en el móvil la barra inferior lleva 4 secciones y «Más»; en escritorio la barra lateral lleva todas. */
body.cu-on .tab { position: relative; }
body.cu-on .cu-tab-lock { position: absolute; top: var(--sp-1); right: 18%; opacity: .75; }
body.cu-on .cu-tab-bloq { color: var(--text-secondary); }
body.cu-on.app .tab span.cu-l-corto { display: none; }
@media (max-width: 899px) {
  body.cu-on .tab.cu-resto { display: none; }
  /* el orden de la barra inferior (Inicio · Beneficios · Mi carnet · Puntos · Más) no es el de la barra lateral: lo da data-om */
  body.cu-on .tab[data-om="1"] { order: 1; } body.cu-on .tab[data-om="2"] { order: 2; } body.cu-on .tab[data-om="3"] { order: 3; } body.cu-on .tab[data-om="4"] { order: 4; } body.cu-on .tab[data-om="9"] { order: 9; }
  body.cu-on.app .tab span.cu-l-full { display: none; }
  body.cu-on.app .tab span.cu-l-corto { display: block; }   /* en la barra inferior «Pagos y recibos» no entra: dice «Pagos» */
}
@media (min-width: 900px) {
  body.cu-on .cu-mas-btn { display: none; }
  body.cu-on .cu-tab-lock { top: 50%; right: var(--sp-3); transform: translateY(-50%); }
}
.cu-mas-lista { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }

/* Inicio: #cuInicio vive dentro de la columna .ih de socio.js; con display: contents sus tarjetas se ordenan junto a las demás (estado de cuenta arriba de todo, después «Tus pendientes» y los accesos).
   El orden de abajo es el del celular; en escritorio ancho (≥ 1200 px) todo vuelve al orden del documento salvo el estado, que sigue primero. */
.cu-inicio { display: contents; }
.cu-inicio > .cu-estado, .cu-inicio > .cu-aviso { order: -1; margin-bottom: 0; }
.cu-inicio > .cu-pend { order: 0; }
.cu-inicio > .cu-grupos { order: 2; }
@media (min-width: 1200px) { .cu-inicio > .cu-grupos { order: 0; } }
.cu-estado { position: relative; display: grid; gap: var(--sp-2); padding: var(--sp-5) var(--sp-5); border-radius: var(--radio-tarjeta); background: var(--oli-900); color: var(--oli-00); border: 1px solid var(--border-default); }
.cu-eb { font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); font-weight: 600; opacity: .8; }
.cu-frase { margin: 0; font-size: var(--fs-seccion); line-height: var(--lh-seccion); font-weight: 700; }
.cu-frase-p { margin: 0; opacity: .85; }
.cu-e-mora { border-color: var(--aviso-fg); }   /* UX-S-18: un solo tono (ámbar) para Inactivo en el chip, el borde y el aviso */
.cu-e-pausa, .cu-e-baja, .cu-e-revision { border-color: var(--aviso-fg); }
.cu-e-al_dia, .cu-e-aprobada { border-color: var(--ok-fg); }   /* aprobada = su alta fue aprobada y falta pagar la primera cuota */
.cu-grupos, .cu-mas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.cu-grupo-li { display: grid; gap: var(--sp-2); }
.cu-grupo-h { margin: 0 var(--sp-2); font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
/* Accesos agrupados: lista de filas (.grupo); en pantalla ancha, las listas van en dos columnas. */
@media (min-width: 900px) { .cu-grupos:not(.cu-mas-lista) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.cu-ir-bloq { color: var(--text-secondary); }
.cu-ir-bloq .grupo-tx small { color: var(--text-tertiary); }
/* Pendientes: el ícono de la fila lleva el tono (aviso | info). */
.cu-fila-aviso .grupo-ic { background: var(--aviso-bg); color: var(--aviso-fg); }
.cu-fila-info .grupo-ic { background: var(--info-bg); color: var(--info-fg); }

/* Membresía */
.cu-nivel { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.cu-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 2px var(--sp-3); border-radius: var(--radio-full); border: 1px solid var(--border-default); font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); font-weight: 700; background: var(--overlay-soft); }
.cu-chip-plus, .cu-chip-junior, .cu-chip-socio, .cu-chip-pleno, .cu-chip-vitalicio, .cu-chip-adherente { border-color: var(--text-primary); }
.cu-est-al_dia { background: var(--ok-bg); border-color: var(--ok-fg); }
.cu-est-mora { background: var(--aviso-bg); border-color: var(--aviso-fg); }   /* Inactivo: aviso amable, sin alarma */
.cu-est-revision { background: var(--surface-card); border-color: var(--border-default); }
.cu-est-sub { margin: 0; font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); color: var(--text-secondary); }
.cu-est-pausa, .cu-est-baja { background: var(--aviso-bg); border-color: var(--aviso-fg); }
.cu-dl { display: grid; gap: var(--sp-2); margin: 0; }
.cu-dl > div { display: flex; justify-content: space-between; gap: var(--sp-3); min-height: var(--sp-6); align-items: center; }
.cu-dl dt { color: var(--text-secondary); }
.cu-dl dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.cu-como, .cu-gestion { margin-top: var(--sp-2); }
.cu-como summary, .cu-gestion summary { min-height: var(--alto-boton-ter); display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.cu-como p, .cu-gestion p { margin-bottom: var(--sp-2); }
.cu-detalle { margin-top: var(--sp-3); }
/* Subpestañas de Membresía: segmentado en píldora con scroll horizontal propio (la dirección lleva #cuotas | #plan | #gestionar). */
.cu-subtabs { display: flex; gap: var(--sp-1); padding: var(--sp-1); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--sp-3); background: var(--overlay-medium); }
.cu-subtabs::-webkit-scrollbar { display: none; }
.cu-subtab { flex: 1 0 auto; min-height: var(--alto-boton-sec); padding: 0 var(--sp-4); border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--fs-cuerpo); font-weight: 600; white-space: nowrap; cursor: pointer; }
.cu-subtab[aria-selected="true"] { background: var(--action-primary-bg); color: var(--action-primary-text); }
.cu-subtab:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }

/* Candado con acción */
.cu-bloq-card { align-items: flex-start; }
.cu-lock { display: grid; place-items: center; width: var(--alto-boton); height: var(--alto-boton); border-radius: 50%; background: var(--overlay-soft); }
.cu-bloq-card .cu-btns { align-self: stretch; }

/* Vincular la cédula: paso a paso, con el botón principal fijo abajo (.accion-fija) */
.cu-resultado { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--radio-campo); background: var(--overlay-soft); }
.cu-ok { background: var(--ok-bg); }
.cu-info { background: var(--info-bg); }
.cu-err { background: var(--error-bg); }
.cu-link { align-self: center; }
.cu-mesa { line-height: var(--lh-cuerpo); }
.cu-host, .cu-datos-club { display: grid; gap: var(--sp-3); }
.cu-host:empty { display: none; }
.cu-paso-pie.cu-btns { margin-top: var(--sp-4); }
.cu-reenviar { align-self: flex-start; }
.cu-llamar { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }   /* UX-V-19: el teléfono es un botón */
.accion-fija .btn, .accion-fija .btn-texto { width: 100%; }

/* Aviso de estado (cuenta_aviso_*): es la pieza .nota del sistema; acá solo el aire entre avisos y tarjetas */
.cu-aviso { margin: 0 0 var(--sp-3); }

/* Reactivar y pagar */
.cu-pasos { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.cu-paso { padding: var(--sp-4); border-radius: var(--radio-campo); border: 1px solid var(--border-default); display: grid; gap: var(--sp-2); }
.cu-paso h4 { margin: 0; }
.cu-paso-actual { border-color: var(--text-primary); }
.cu-paso-hecho { border-color: var(--ok-fg); background: var(--ok-bg); }

/* Mis datos: un formulario por grupos y UN «Guardar cambios» fijo abajo */
.cu-form .campo:last-of-type { margin-bottom: 0; }
.cu-guardado { font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); font-weight: 600; color: var(--ok-fg); }
.cu-guardado:not(:empty)::before { content: "✓ "; }
.cu-tj { display: grid; gap: var(--sp-3); }
.cu-guardar-barra { display: grid; gap: var(--sp-1); }
.cu-guardar-barra[hidden] { display: none; }
.cu-guardar-barra .cu-guardado { text-align: center; }

/* Pagos y recibos: filtros en píldora y el historial en listas agrupadas por día */
.cu-filtros { margin: var(--sp-1) 0 var(--sp-3); }
.cu-dias { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.cu-dia h4 { margin: 0 0 var(--sp-2) var(--sp-2); font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); color: var(--text-secondary); }
.cu-movs { list-style: none; margin: 0; padding: 0; background: var(--surface-grouped); }
.cu-mov { align-items: flex-start; cursor: default; }
.cu-mov-tx { min-width: 0; }
.cu-mov-tx small { overflow-wrap: anywhere; }
.cu-comps { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-1); }
.cu-comps .club-link, .cu-comps a { display: inline-flex; align-items: center; min-height: var(--alto-boton-ter); }
.cu-vacio { padding: var(--sp-4) 0; }

/* Socio y Plus son excluyentes: sin ofertas de Plus para quien ya es Socio */
body.cu-sin-plus [data-upsell-cta="premium"], body.cu-sin-plus [data-upsell-cta="plus"] { display: none; }

/* Recupero a la vista en Membresía (Socio en mora) */
.cu-recupero:empty { display: none; }
.cu-recupero { margin: var(--sp-3) 0; min-width: 0; }
.cu-recupero .mx-card { margin-bottom: 0; }
.mx-op-motivo { display: block; margin-top: var(--sp-1); }

/* Inicio por tarea: carnet y estado arriba con UNA acción primaria, «Tus pendientes» y los accesos agrupados por tarea. */
.cu-carnet { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.cu-carnet .cu-chip { min-height: 28px; }
.cu-estado .btn-ghost { background: transparent; color: var(--oli-00); border-color: var(--text-tertiary); }   /* la tarjeta de estado es siempre oscura: el secundario usa texto claro también en tema claro */
.cu-estado .btn-ghost:hover { border-color: var(--oli-00); }
.cu-estado .cu-btns { margin-top: var(--sp-3); }
@media (max-width: 599px) { .section .cu-estado .cu-frase { font-size: var(--fs-seccion); line-height: var(--lh-seccion); } }
.cu-pend { display: grid; gap: var(--sp-2); }
.section .cu-pend .cu-pend-h { margin: 0 var(--sp-2); font-size: var(--fs-seccion); line-height: var(--lh-seccion); }
.cu-pend-lista { min-width: 0; }
.cu-pend-nada { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--radio-campo); background: var(--overlay-soft); color: var(--text-secondary); font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); }
@media (max-width: 899px) { .cu-inicio > .cu-grupos { display: none; } }   /* UX-O-07: en el móvil la barra y «Más» ya llevan los accesos: Inicio no los repite */
.cu-frase-det { margin: 0; min-height: 1.2em; font-size: var(--fs-cuerpo); line-height: var(--lh-cuerpo); font-weight: 600; }   /* UX-S-03: monto vencido / próxima cuota (el alto queda reservado: no salta al llegar el dato) */
.cu-frase-det:empty { min-height: 0; }
.cu-pagos-pagar { margin: 0 0 var(--sp-3); }   /* UX-S-07: «Pagar mis cuotas» arriba del historial (el único botón principal) */

/* Cargando sin «Cargando…» suelto: mientras un bloque de Mi cuenta espera su respuesta (aria-busy="true" y vacío) se ve una tarjeta-esqueleto. No cambia la lógica de carga. */
.cu-host[aria-busy="true"]:empty { display: block; min-height: 112px; border-radius: var(--radio-tarjeta); background: var(--card2); animation: esqPulso 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cu-host[aria-busy="true"]:empty { animation: none; } }

/* ── Ola UX «una sola app» ── */
.cn2-qr-tenue { opacity: .4; }   /* UX-S-14: el QR de un Socio que no está al día se ve atenuado */
.cn2-estado .cn2-ico { color: var(--aviso-fg, var(--text-secondary)); }
.cn2-estado-baja .cn2-ico { color: var(--error-fg); }
.cn2-mas { margin-top: var(--sp-3); }
.cn2-mas > summary { min-height: var(--alto-boton-ter); display: flex; align-items: center; cursor: pointer; font-weight: 600; }
button.ed-ubic { background: none; border: 0; padding: 0; min-height: var(--touch); font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }   /* UX-O-17 */

/* Hoja «Más»: estilo Ajustes. Título de sección chico (no el h3 grande de la hoja) y cada grupo en su contenedor redondeado, un tono más claro que la hoja. */
body.app .oli-modal .cu-grupo-h { margin: var(--sp-2) var(--sp-2) 0; font: 700 var(--fs-apoyo) / var(--lh-apoyo) var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
body.app .oli-modal .cu-mas-sub.grupo { background: var(--surface-campo); }

/* Con el teclado abierto (o una pantalla muy baja) la barra fija dejaría de ser fija: taparía el campo que se está escribiendo. El botón queda debajo y Enter («Enviar» / «Listo» del teclado) igual envía. */
@media (max-height: 560px) { .cu-paso-pie.accion-fija, .cu-guardar-barra.accion-fija { position: static; background: none; } }

/* ═══ Ola 3 (o3a) · Inicio, Mi plan y Socio ═══ */
/* Inicio sin hero: el aviso urgente (deudas) va primero, después la tarjeta de estado, los accesos rápidos y «Tus pendientes» si hay. */
.ih .ih-main > .ih-deudas { order: -2; }
.cu-inicio > .cu-rapidos { order: 0; }
@media (min-width: 900px) { .cu-inicio > .cu-rapidos { display: none; } }   /* en escritorio la barra lateral y la lista agrupada ya llevan los mismos destinos: no se repiten */
.cu-inicio > .cu-pend { order: 1; }
/* Accesos rápidos: cuadrícula de 4 con ícono en círculo y etiqueta (el mismo patrón que los destinos de la barra); cada tarjeta de 72 px o más. */
.cu-rapidos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.cu-rapidos.cu-rap-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* Beneficios cerca + Invitar: el QR ya está en el carnet y en el botón dorado */
.cu-rapidos.cu-rap-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* sin «Pagar»: tres círculos bien repartidos */
.cu-rap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--sp-1); min-width: 0; min-height: 76px; padding: var(--sp-1); border: 0; border-radius: var(--radio-campo); background: transparent; color: var(--text-primary); font: inherit; cursor: pointer; }
.cu-rap:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cu-rap-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--overlay-soft); }
.cu-rap-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-apoyo); line-height: 1.2; font-weight: 600; }
.cu-rap-bloq { color: var(--text-secondary); }
.cu-rap-lock { position: absolute; top: var(--sp-2); right: var(--sp-2); opacity: .7; }
.cu-ya-socio { justify-self: center; }
.cu-estado .cu-btns { justify-items: stretch; }
.cu-estado .btn-texto { color: var(--oli-00); }
/* Mi plan: la escalera de tres peldaños y la regla en una frase */
.cu-peldano h3 { margin-bottom: var(--sp-1); }
.cu-chip-actual { background: var(--ok-bg, var(--overlay-soft)); color: var(--ok-fg, inherit); }
.cu-precio { font-weight: 700; }
.cu-regla { margin: var(--sp-2) var(--sp-2) 0; font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); color: var(--text-secondary); }
.cu-incluye { margin: 0; font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); color: var(--text-secondary); }
#cuPlanPagos:empty { display: none; }
/* ── o3b · X-08: «Mis datos» como lista agrupada con subpantallas ── */
.cu-datos-lista { gap: var(--sp-4); }
.cu-dato { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; background: transparent; border: 0; }
.cu-dato .grupo-tx { min-width: 0; flex: 1; }
.cu-dato .grupo-tx small { display: block; overflow-wrap: anywhere; }
.cu-dato .grupo-val { flex: 0 1 auto; max-width: 40%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.cu-falta { color: var(--aviso-fg); }
.cu-foto { display: grid; place-items: center; padding: var(--sp-5) var(--sp-4); }
.cu-foto-btn { display: grid; justify-items: center; gap: var(--sp-2); min-width: var(--touch); min-height: var(--touch); padding: 0; border: 0; background: transparent; color: var(--text-primary); font: inherit; cursor: pointer; border-radius: var(--radio-tarjeta); }
.cu-avatar { display: grid; place-items: center; width: 96px; height: 96px; overflow: hidden; border-radius: 50%; background: var(--surface-campo); color: var(--text-secondary); border: 1px solid var(--border-default); }
.cu-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cu-foto-tx { font-size: var(--fs-cuerpo); line-height: var(--lh-cuerpo); font-weight: 600; }
.cu-foto-btn:focus-visible { outline: var(--focus-outline); outline-offset: 4px; }
.cu-ubic { display: block; }
.cu-host[hidden] { display: none; }

/* ═══ Inicio móvil nuevo · carnet compacto, accesos livianos, fila de Puntos y Ahorro, invitación discreta ═══
   Hasta 899 px: carnet compacto (protagonista) + botón principal solo si hay algo pendiente + círculos + dos tarjetas chicas. Escritorio: todo igual que antes (el bloque «cu-m» no se dibuja y «cu-d» no agrega caja). */
.cu-m { display: none; }
.cu-estado > .cu-d { display: contents; }
.ih-mini, .ih-pf-fila { display: none; }
.ih-side > .ih-mini { order: 2; }
.ih-main > .ih-inv { order: 9; }
@media (max-width: 899px) {
  .cu-estado.cu-con-mov { gap: var(--sp-3); padding: 0; border: 0; border-radius: 0; background: none; color: var(--text-primary); }
  .cu-estado.cu-con-mov > .cu-d { display: none; }   /* la frase larga del estado queda para escritorio (el aria-labelledby sigue apuntando a ella) */
  .cu-estado.cu-con-mov .btn-ghost { color: var(--text-primary); border-color: currentColor; }
  .cu-estado.cu-con-mov .btn-texto { color: var(--text-primary); }
  .cu-estado.cu-con-mov .cu-btns { margin-top: 0; }
  .cu-m { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: 96px; padding: var(--sp-4); border-radius: var(--radio-tarjeta); background: var(--oli-900); color: var(--oli-00); border: 1px solid var(--border-default); }
  .cu-cm-ir { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
  .cu-cm-ir:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
  .cu-cm-foto { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--oli-00) 16%, transparent); font: 700 var(--fs-seccion) / 1 var(--display); }
  .cu-cm-foto img { width: 100%; height: 100%; object-fit: cover; }
  .cu-cm-datos { display: grid; gap: var(--sp-1); min-width: 0; flex: 1; justify-items: start; }
  .cu-cm-nomfila { display: flex; align-items: center; gap: var(--sp-1); max-width: 100%; }
  .cu-cm-nom { min-width: 0; font: 700 var(--fs-cuerpo) / 1.25 var(--display); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }   /* nombres largos: hasta tres líneas, sin cortar */
  .cu-m .sello { --sello-c: var(--oli-00); --sello-t: var(--oli-900); }
  .cu-m .sello-btn { position: relative; z-index: 2; width: 44px; height: 44px; margin: -12px -10px -12px -8px; }
  .cu-cm-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); margin: 0; font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); color: var(--oli-00); }
  .cu-cm-nro { opacity: .85; }
  .cu-cm-nro:not(:last-child)::after { content: " ·"; }   /* el punto queda pegado al número: si el estado baja de renglón, no abre el renglón con un punto */
  .cu-cm-est { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; }
  .cu-cm-punto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
  .cu-cm-est-mora .cu-cm-punto, .cu-cm-est-pausa .cu-cm-punto, .cu-cm-est-revision .cu-cm-punto { background: var(--aviso-fg); }
  .cu-cm-est-baja .cu-cm-punto { background: var(--danger-bg); box-shadow: 0 0 0 1.5px var(--oli-00); }
  .cu-cm-det { margin: 0; font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); opacity: .85; }
  .cu-cm-det:empty { display: none; }
  .ih-cuenta .ih-rail .bx-ban::before { display: none; }   /* sin la franja punteada de «ticket» sobre cada beneficio */
  /* accesos: sin tarjetas ni bordes grandes */
  .cu-inicio > .cu-rapidos { padding: 0 var(--sp-1); }
  /* una fila de dos tarjetas chicas */
  .ih-cuenta .ih-res, .ih-cuenta .ih-pf .progreso { display: none; }
  .ih-mini { display: block; }
  .wm-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .wm-fila > .wm:only-child { grid-column: 1 / -1; }
  .wm { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); min-width: 0; min-height: 96px; padding: var(--sp-4); border: 0; border-radius: var(--radio-tarjeta); background: var(--surface-card); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
  .wm:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .wm-cab { font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); font-weight: 600; color: var(--text-secondary); }
  .wm-num { max-width: 100%; font: 700 1.5rem / 1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .wm-sub { font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); color: var(--text-secondary); }
  /* fila discreta: completar el perfil (solo si falta) e invitar a un amigo (al final) */
  .ih-cuenta .ih-pf-fila, .ih-inv { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-4); border: 0; border-radius: var(--radio-campo); background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
  .ih-pf-fila:focus-visible, .ih-inv:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .ih-pf-t, .ih-inv-t { flex: 1; min-width: 0; font-size: var(--fs-cuerpo); line-height: var(--lh-cuerpo); }
  .ih-inv-go { flex: none; color: var(--text-secondary); font-size: var(--fs-seccion); }
}
@media (min-width: 900px) { .ih-inv { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-4); border: 0; border-radius: var(--radio-campo); background: var(--surface-card); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; } .ih-inv-t { flex: 1; } }

/* ═══ Revisión UX · Inicio en orden de uso, tarjeta de mora única, subasta chica (D4/D5/U7/U10) ═══
   Móvil, de arriba abajo: estado con UNA acción · 3 accesos · Puntos y Ahorro · Para vos hoy · Completá tu perfil · Invitar · Novedades · reto · Cierra pronto · Tienda. */
@media (max-width: 899px) {
  .ih-cuenta .ih-side > .ih-mini { order: 2; }
  .ih-cuenta .ih-main > .ih-rail { order: 3; }
  .ih-cuenta .ih-side > .ih-pf { order: 4; }
  .ih-cuenta .ih-main > .ih-inv { order: 5; }
  .ih-cuenta .ih-main > .ih-nov { order: 6; }
  .ih-cuenta .ih-side > .ih-reto { order: 7; }
  .ih-cuenta .ih-main > .ih-vivo { order: 8; }
  .ih-cuenta .ih-main > .ih-tienda { order: 9; }
}
.cu-rapidos.cu-rap-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ih-vivo .ini-vivo-ch { min-height: 56px; }
.ini-vivo-ch .ini-nov-tx small { display: block; margin-top: 2px; color: var(--text-secondary); font-size: var(--fs-apoyo); }
.cu-estado .cu-ya-pague { justify-self: center; }
.cu-validando { margin-top: var(--sp-2); }
.cu-validando .nota-tx { display: grid; gap: 2px; }
.aj .aj-ayuda { margin-top: var(--sp-3); }
.cu-rapidos .cu-rap-t { white-space: normal; text-align: center; overflow-wrap: anywhere; }   /* «Beneficios cerca» baja de renglón en 360 px en vez de cortarse */
/* <pagos-ux> Pagos (Cuotas · Recibos · Tarjetas), Seguridad, cierre de Vincular y Puntos (plegables y «Canje en curso») */
.cu-subpanel > .pila { display: grid; gap: var(--sp-3); }
.cu-subpanel[hidden] { display: none; }
.cu-pagos-pagar[hidden] { display: none; }
.cu-seg-id .pill { vertical-align: middle; }
.cu-seg-cuenta { margin-bottom: var(--sp-6); }
.cu-seg-peligro b, .cu-seg-peligro .grupo-ic { color: var(--error-fg); }
.cu-cierre { padding-top: var(--sp-6); }
.cu-ver-pagos { margin-top: var(--sp-3); }
.pts-plegable { margin-top: var(--sp-3); border: 1px solid var(--border-default); border-radius: var(--radio-campo); background: var(--surface-card); }
.pts-plegable > summary { display: flex; align-items: center; min-height: 48px; padding: 0 var(--sp-3); font-size: var(--fs-cuerpo); font-weight: 700; cursor: pointer; }
.pts-plegable > .grupo, .pts-plegable > details, .pts-plegable > .btn-texto { margin: 0 var(--sp-2) var(--sp-2); }
.pts-plegable summary:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.pts-canje-curso { margin: var(--sp-2) 0; align-items: flex-start; }
.pts-encuesta { width: 100%; margin-top: var(--sp-3); }