/* ============================================================
   COBROS.CSS — Inscripción, resultado del pago, registro con link,
   Mis pagos (alumno) y Cobros (admin). Módulo 7.

   Lectura de diseño: pantallas de trámite (pagar e inscribirse) para
   alumnos y el libro de cobros del admin, en el lenguaje del tema
   activo. Dial ENERGY 1 / RHYTHM 1 / MOTION 1: el usuario está
   pagando; nada compite con el dato ni con el botón que sigue.

   Razones:
   - Colores, fuentes, radios y sombras salen de los tokens del tema
     (--ax-*, --font-*, --radio-*), así cada uno de los 15 temas y el
     modo oscuro pintan estas pantallas sin reglas propias.
   - Motivo propio: el resumen es un COMPROBANTE (línea de corte punteada
     entre el detalle y el total, números tabulares alineados), porque
     es lo que el alumno está mirando: cuánto paga y por qué.
   - Un solo acento: el botón de la acción que sigue. Los estados
     (pagado, por confirmar, rechazado) usan ok/aviso/mal del tema
     porque son estados reales, no decoración.
   - Movimiento: solo el cambio de estado del botón al enviar (evita el
     doble clic) y la barra de "esperando a Mercado Pago".
   ============================================================ */

.co {
  --co-ancho: 1040px;
  --co-sep: clamp(20px, 3vw, 32px);
  max-width: var(--co-ancho);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 32px) clamp(48px, 8vw, 96px);
  font-family: var(--font-cuerpo);
  color: var(--ax-ink);
}
.co-angosto { --co-ancho: 640px; }
.co *, .co *::before, .co *::after { box-sizing: border-box; }
/* Los estilos viejos de register.php (capa legado) dan a todo botón ancho completo,
   margen y forma de píldora, y a todo label un margen: acá cada pieza define lo suyo */
.co button { width: auto; margin: 0; text-transform: none; letter-spacing: 0; }
.co label { margin: 0; }
/* Paneles de pestañas: el display de .co-form no puede ganarle a hidden */
.co [hidden] { display: none !important; }
.co input:not([type="checkbox"], [type="radio"]) { margin: 0; }

.co h1, .co h2, .co h3 {
  font-family: var(--font-titulos);
  color: var(--ax-ink);
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
.co h1 { font-size: clamp(1.55rem, 3.2vw, 2.1rem); line-height: 1.15; font-weight: var(--peso-titulo, 700); }
.co h2 { font-size: 1.15rem; line-height: 1.3; font-weight: 650; }
.co h3 { font-size: 1rem; line-height: 1.35; font-weight: 650; }
/* El ::after decorativo de títulos de algunos temas no va en un trámite */
.co h1::after, .co h2::after, .co h3::after { content: none !important; }
.co p { margin: 0; line-height: 1.6; }
.co a:not([class]) { color: var(--ax-accent-ink); text-underline-offset: .2em; }
.co-sub { color: var(--ax-ink-2); margin-top: .5rem !important; max-width: 60ch; }
.co-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Pasos del trámite (datos, pago, cuenta) ---------- */
.co-pasos {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0 0 var(--co-sep);
  padding: 0;
  counter-reset: co-paso;
  font-size: .86rem;
  color: var(--ax-ink-3);
}
.co-pasos li {
  counter-increment: co-paso;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 0;
  min-width: 0;
  padding: .65rem .2rem .65rem 0;
  border-top: 2px solid var(--ax-line);
}
.co-pasos li::before {
  content: counter(co-paso);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--ax-line-2);
  font-size: .78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.co-pasos .is-hecho { color: var(--ax-ink-2); border-top-color: var(--ax-ink-3); }
.co-pasos .is-hecho::before { content: '\2713'; border-color: var(--ax-ink-3); }
.co-pasos .is-actual { color: var(--ax-ink); font-weight: 600; border-top-color: var(--color-primario); }
.co-pasos .is-actual::before { background: var(--color-primario); border-color: var(--color-primario); color: var(--ax-on-accent); }

/* ---------- Checkout: formulario + comprobante ---------- */
.co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .85fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  margin-top: var(--co-sep);
}
.co-panel {
  background: var(--ax-surface);
  border: 1px solid var(--ax-line);
  border-radius: var(--radio-md);
  padding: clamp(20px, 3vw, 28px);
}

.co-form { display: grid; gap: 18px; }
.co-campo { display: grid; gap: 6px; }
.co-campo label, .co-campo .co-etq { font-weight: 600; font-size: .92rem; color: var(--ax-ink); }
.co-campo input[type="text"], .co-campo input[type="email"], .co-campo input[type="tel"],
.co-campo input[type="password"], .co-campo input[type="search"], .co-campo select, .co-campo textarea {
  width: 100%;
  min-height: 46px;
  padding: .7rem .85rem;
  border: 1px solid var(--ax-line-2);
  border-radius: var(--radio-sm);
  background: var(--ax-surface);
  color: var(--ax-ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.co-campo input:focus-visible, .co-campo select:focus-visible, .co-campo textarea:focus-visible {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: var(--ax-anillo);
}
.co-campo input[aria-invalid="true"] { border-color: var(--ax-bad); }
.co-ayuda { font-size: .84rem; color: var(--ax-ink-3); line-height: 1.5; }
.co-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.co label.co-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--ax-ink-2); line-height: 1.5; cursor: pointer; }
.co .co-check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--color-primario); }
.co .co-check input:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }

/* Bloque que se abre solo si el email de Mercado Pago es otro */
.co-extra { display: none; }
.co-extra.is-abierto { display: grid; }

/* Trampa para bots: fuera de pantalla, sin foco */
.co-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Botones: el principal ocupa el ancho del trámite ---------- */
.co-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }
.co .ax-btn, .co .ax-btn-sec { min-height: 46px; padding: .75rem 1.3rem; font-size: .98rem; }
.co .co-btn-lleno { width: 100%; }
.co .ax-btn:focus-visible, .co .ax-btn-sec:focus-visible, .co-link:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 3px;
}
.co .co-link {
  background: none; border: 0; border-radius: 0; padding: .4rem 0; cursor: pointer;
  font: inherit; font-size: .92rem; font-weight: 500;
  color: var(--ax-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--ax-line-2);
  text-underline-offset: .3em;
}
.co-link:hover { color: var(--ax-ink); text-decoration-color: currentColor; }
.co-link-mal { color: var(--ax-bad); }

/* Enviando: el botón avisa y no acepta un segundo clic */
.co [data-enviando="1"] { pointer-events: none; opacity: .75; }
.co [data-enviando="1"]::after {
  content: '';
  width: 1em; height: 1em; margin-left: .55rem;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: co-gira .8s linear infinite;
}
@keyframes co-gira { to { transform: rotate(360deg); } }

/* ---------- Comprobante (resumen de la compra) ---------- */
.co-comprobante {
  position: sticky;
  top: calc(var(--ax-top-h, 72px) + 16px);
  background: var(--ax-surface-2);
  border: 1px solid var(--ax-line);
  border-radius: var(--radio-md);
  padding: clamp(20px, 3vw, 26px);
  font-variant-numeric: tabular-nums;
}
.co-comp-tit { font-size: .82rem; font-weight: 600; color: var(--ax-ink-3); margin-bottom: .6rem !important; }
.co-comp-prod { font-family: var(--font-titulos); font-size: 1.15rem; font-weight: 650; line-height: 1.3; color: var(--ax-ink); }
.co-comp-meta { font-size: .88rem; color: var(--ax-ink-2); margin-top: .3rem !important; }
.co-comp-fila { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; color: var(--ax-ink-2); padding: .35rem 0; }
.co-comp-fila s { color: var(--ax-ink-3); }
/* La línea de corte del comprobante */
.co-corte { border: 0; border-top: 1px dashed var(--ax-line-2); margin: 1rem 0; }
.co-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.co-total-etq { font-size: .92rem; font-weight: 600; color: var(--ax-ink); }
.co-total-monto { font-family: var(--font-titulos); font-size: clamp(1.5rem, 3vw, 1.8rem); font-weight: 700; color: var(--ax-ink); line-height: 1.1; text-align: right; }
.co-total-per { display: block; font-family: var(--font-cuerpo); font-size: .82rem; font-weight: 500; color: var(--ax-ink-2); margin-top: .2rem; }
.co-equiv { font-size: .84rem; color: var(--ax-ink-3); margin-top: .5rem !important; text-align: right; }

.co-despues { margin: 1.1rem 0 0; padding: 0; list-style: none; counter-reset: co-desp; display: grid; gap: .6rem; }
.co-despues li { counter-increment: co-desp; display: grid; grid-template-columns: 1.4rem 1fr; gap: .5rem; font-size: .88rem; color: var(--ax-ink-2); line-height: 1.5; }
.co-despues li::before { content: counter(co-desp) '.'; font-weight: 600; color: var(--ax-ink-3); }
.co-comp-pie { font-size: .8rem; color: var(--ax-ink-3); margin-top: 1rem !important; line-height: 1.5; }

/* ---------- Avisos ---------- */
.co-aviso {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .85rem 1rem;
  border-radius: var(--radio-sm);
  border: 1px solid var(--ax-line);
  background: var(--ax-surface);
  font-size: .92rem; line-height: 1.5; color: var(--ax-ink-2);
}
.co-aviso svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; }
.co-aviso strong { color: var(--ax-ink); }
.co-aviso-ok   { background: var(--ax-ok-soft);   border-color: transparent; color: var(--ax-ink); }
.co-aviso-ok svg { color: var(--ax-ok); }
.co-aviso-aviso { background: var(--ax-warn-soft); border-color: transparent; color: var(--ax-ink); }
.co-aviso-aviso svg { color: var(--ax-warn); }
.co-aviso-mal  { background: var(--ax-bad-soft);  border-color: transparent; color: var(--ax-ink); }
.co-aviso-mal svg { color: var(--ax-bad); }

/* ---------- Resultado del pago / estado de un link ---------- */
.co-estado { display: grid; gap: 14px; justify-items: start; }
.co-marca {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--ax-surface-2);
  color: var(--ax-ink-2);
}
.co-marca svg { width: 1.45rem; height: 1.45rem; }
.co-marca-ok   { background: var(--ax-ok-soft);   color: var(--ax-ok); }
.co-marca-aviso { background: var(--ax-warn-soft); color: var(--ax-warn); }
.co-marca-mal  { background: var(--ax-bad-soft);  color: var(--ax-bad); }
.co-estado .co-acciones { margin-top: 8px; }
.co-datos { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; margin: .4rem 0 0; font-size: .92rem; font-variant-numeric: tabular-nums; }
.co-datos dt { color: var(--ax-ink-3); }
.co-datos dd { margin: 0; color: var(--ax-ink); overflow-wrap: anywhere; }

/* Esperando la confirmación de Mercado Pago */
.co-espera { width: 100%; max-width: 320px; height: 3px; border-radius: 3px; background: var(--ax-line); overflow: hidden; }
.co-espera span { display: block; width: 40%; height: 100%; background: var(--color-primario); animation: co-espera 1.6s var(--ax-curva, ease) infinite; }
@keyframes co-espera { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* Pestañas de registro: crear cuenta / ya tengo cuenta */
.co-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ax-line); margin-bottom: 20px; }
.co-tab {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0;
  padding: .7rem .9rem; min-height: 44px; cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--ax-ink-3);
}
.co-tab[aria-selected="true"] { color: var(--ax-ink); border-bottom-color: var(--color-primario); }
.co-tab:focus-visible { outline: 2px solid var(--color-primario); outline-offset: -2px; }

/* ---------- Estados como etiqueta (real, no decoración) ---------- */
.co-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .55rem;
  border-radius: var(--radio-xs, 4px);
  font-size: .8rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: var(--ax-surface-2); color: var(--ax-ink-2);
}
.co-chip-ok    { background: var(--ax-ok-soft);   color: var(--ax-ok); }
.co-chip-aviso { background: var(--ax-warn-soft); color: var(--ax-warn); }
.co-chip-mal   { background: var(--ax-bad-soft);  color: var(--ax-bad); }

/* ============================================================
   PANEL COBROS (admin) y MIS PAGOS (alumno)
   ============================================================ */
.co-ancho { --co-ancho: 1180px; }
.co-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: var(--co-sep); }

/* Estado de la integración: una fila de datos, no tarjetas */
.co-config { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: 1px solid var(--ax-line); border-radius: var(--radio-md); background: var(--ax-surface); overflow: hidden; }
.co-config > div { padding: 14px 18px; border-right: 1px solid var(--ax-line); border-bottom: 1px solid var(--ax-line); margin: 0 -1px -1px 0; min-width: 0; }
.co-config dt { font-size: .8rem; color: var(--ax-ink-3); margin-bottom: .25rem; }
.co-config dd { margin: 0; font-size: .95rem; font-weight: 600; color: var(--ax-ink); overflow-wrap: anywhere; }
.co-config dd small { display: block; font-weight: 400; font-size: .82rem; color: var(--ax-ink-2); margin-top: .15rem; }
.co-config-pie { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin: 12px 0 var(--co-sep); font-size: .86rem; color: var(--ax-ink-3); }

.co-copiar { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.co-copiar input { flex: 1 1 260px; min-width: 0; min-height: 40px; padding: .5rem .7rem; border: 1px solid var(--ax-line-2); border-radius: var(--radio-sm); background: var(--ax-surface-2); color: var(--ax-ink); font: inherit; font-size: .88rem; }

.co-filtros { display: flex; flex-wrap: wrap; gap: 6px 4px; border-bottom: 1px solid var(--ax-line); margin-bottom: 16px; }
.co .co-filtros a {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .55rem .8rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ax-ink-3); font-weight: 600; font-size: .92rem; text-decoration: none;
}
.co .co-filtros a[aria-current="page"] { color: var(--ax-ink); border-bottom-color: var(--color-primario); }
.co .co-filtros a:hover { color: var(--ax-ink); }
.co-filtros a:focus-visible { outline: 2px solid var(--color-primario); outline-offset: -2px; }
.co-num { font-variant-numeric: tabular-nums; font-size: .78rem; padding: 0 .4rem; border-radius: var(--radio-xs, 4px); background: var(--ax-surface-2); color: var(--ax-ink-2); }

.co-buscar { display: flex; gap: 8px; margin-bottom: 16px; max-width: 480px; }
.co-buscar input { flex: 1; min-width: 0; min-height: 44px; padding: .55rem .8rem; border: 1px solid var(--ax-line-2); border-radius: var(--radio-sm); background: var(--ax-surface); color: var(--ax-ink); font: inherit; }
.co-buscar input:focus-visible { outline: none; border-color: var(--color-primario); box-shadow: var(--ax-anillo); }

/* Libro de cobros */
.co-tabla-caja { border: 1px solid var(--ax-line); border-radius: var(--radio-md); background: var(--ax-surface); overflow-x: auto; }
.co-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.co-tabla th { text-align: left; font-size: .8rem; font-weight: 600; color: var(--ax-ink-3); padding: .75rem 1rem; border-bottom: 1px solid var(--ax-line); white-space: nowrap; background: var(--ax-surface-2); }
.co-tabla td { padding: .8rem 1rem; border-bottom: 1px solid var(--ax-line); vertical-align: top; color: var(--ax-ink); }
.co-tabla tr:last-child td { border-bottom: 0; }
.co-tabla tbody tr { transition: background var(--transicion); }
.co-tabla tbody tr:hover { background: var(--ax-surface-2); }
.co-tabla .co-der { text-align: right; white-space: nowrap; }
.co-tabla small { display: block; color: var(--ax-ink-3); font-size: .82rem; margin-top: .15rem; }
.co-tabla a.co-fila-link { color: var(--ax-ink); font-weight: 600; text-decoration: none; }
.co-tabla a.co-fila-link:hover { text-decoration: underline; }
.co-tabla a.co-fila-link:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }

.co-vacio { padding: clamp(28px, 5vw, 48px) 20px; text-align: center; color: var(--ax-ink-2); }
.co-vacio p + p { margin-top: .4rem !important; font-size: .9rem; color: var(--ax-ink-3); }

/* Detalle de un cobro */
.co-detalle { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
.co-bloque + .co-bloque { margin-top: 20px; }
.co-bloque > h2 { margin-bottom: 12px; }
.co-lista-acc { display: grid; gap: 10px; }
.co-lista-acc form { margin: 0; }
.co-lista-acc .ax-btn, .co-lista-acc .ax-btn-sec { width: 100%; }
.co-acc-nota { font-size: .82rem; color: var(--ax-ink-3); line-height: 1.5; margin-top: -2px !important; }

.co-historial { list-style: none; margin: 0; padding: 0; }
.co-historial li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; padding: .6rem 0; border-top: 1px solid var(--ax-line); font-size: .88rem; }
.co-historial li:first-child { border-top: 0; }
.co-historial time { color: var(--ax-ink-3); font-variant-numeric: tabular-nums; }
.co-historial b { font-weight: 600; color: var(--ax-ink); }
.co-historial span { color: var(--ax-ink-2); overflow-wrap: anywhere; }

/* Confirmación de acciones que no se deshacen (dar de baja, rechazar) */
.co-dialogo { border: 1px solid var(--ax-line); border-radius: var(--radio-md); padding: 0; max-width: min(460px, calc(100vw - 32px)); background: var(--ax-surface); color: var(--ax-ink); box-shadow: var(--ax-sombra-flotante); }
.co-dialogo::backdrop { background: rgba(10, 14, 22, .5); }
.co-dialogo form { padding: 24px; display: grid; gap: 14px; }
.co-dialogo h2 { font-size: 1.1rem; }
.co-dialogo p { color: var(--ax-ink-2); font-size: .94rem; }
.co-dialogo .co-acciones { justify-content: flex-end; }
.co .ax-btn.co-btn-mal, .co-dialogo .ax-btn.co-btn-mal { background: var(--ax-bad); border-color: var(--ax-bad); color: #fff; }

/* Mis pagos: una fila por compra */
.co-compras { display: grid; gap: 12px; }
.co-compra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: start; }
.co-compra-der { text-align: right; font-variant-numeric: tabular-nums; }
.co-compra-der strong { display: block; font-size: 1.05rem; }
.co-compra-pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-top: 12px; border-top: 1px dashed var(--ax-line-2); font-size: .88rem; color: var(--ax-ink-2); }
.co-compra-pie .co-link { margin-left: auto; }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .co-grid, .co-detalle { grid-template-columns: 1fr; }
  /* En celular el comprobante va primero: se ve qué se paga antes de completar */
  .co-grid .co-comprobante { order: -1; position: static; }
}
@media (max-width: 560px) {
  .co-dos { grid-template-columns: 1fr; }
  .co-pasos { font-size: .78rem; }
  .co-pasos li { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .co-acciones > .ax-btn, .co-acciones > .ax-btn-sec { width: 100%; }
  .co-datos { grid-template-columns: 1fr; gap: .1rem; }
  .co-datos dd { margin-bottom: .5rem; }
  .co-historial li { grid-template-columns: 1fr; gap: 2px; }
  .co-compra { grid-template-columns: 1fr; }
  .co-compra-der { text-align: left; }
  .co-compra-pie .co-link { margin-left: 0; }
  /* Libro de cobros: cada fila pasa a ficha */
  .co-tabla thead { display: none; }
  .co-tabla, .co-tabla tbody, .co-tabla tr, .co-tabla td { display: block; width: 100%; }
  .co-tabla tr { padding: .6rem 0; border-bottom: 1px solid var(--ax-line); }
  .co-tabla tr:last-child { border-bottom: 0; }
  .co-tabla td { border: 0; padding: .2rem 1rem; }
  .co-tabla .co-der { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .co-espera span, .co [data-enviando="1"]::after { animation: none; }
  .co-espera span { width: 100%; opacity: .5; }
}

/* Tema 12 (Burbuja) dibuja los campos como vidrio con un filo tenue: sobre la tarjeta
   blanca del trámite el campo casi no se ve. Una línea interior le devuelve el borde
   (contraste mínimo de un campo de formulario) sin cambiar la estética del tema. */
html[data-tema="12"] .co .co-campo :is(input:not([type="checkbox"], [type="radio"]), select, textarea),
html[data-tema="12"] .co .co-buscar input { box-shadow: inset 0 0 0 1px var(--ax-line-2); }

/* ---------- Selector "Precios en: Pesos / Dólares" (editores del catálogo y Cobros) ----------
   Una decisión de toda la academia, arriba de donde se cargan los precios: dos opciones con
   su consecuencia escrita al lado, sin tener que tocar brand.php. */
.co-moneda {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: end;
  margin: 0 0 24px; padding: 18px 20px;
  background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: var(--radio-md);
  font-family: var(--font-cuerpo); color: var(--ax-ink);
}
.co-moneda fieldset { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.co-moneda legend { width: 100%; padding: 0; margin: 0 0 10px; font-size: .9rem; font-weight: 600; color: var(--ax-ink); }
.co-moneda label.co-opcion {
  flex: 1 1 260px; display: flex; gap: 10px; align-items: flex-start; margin: 0;
  padding: 12px 14px; border: 1px solid var(--ax-line-2); border-radius: var(--radio-sm);
  cursor: pointer; font-weight: 400; color: var(--ax-ink); background: var(--ax-surface);
  transition: border-color var(--transicion), background var(--transicion);
}
.co-moneda label.co-opcion:has(input:checked) { border-color: var(--color-primario); background: var(--ax-accent-soft); }
.co-moneda .co-opcion input[type="radio"] { flex: none; width: 1.1rem; height: 1.1rem; margin: .15rem 0 0; accent-color: var(--color-primario); }
.co-moneda .co-opcion input:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.co-moneda .co-opcion b { display: block; font-size: .95rem; }
.co-moneda .co-opcion small { display: block; margin-top: 2px; font-size: .84rem; line-height: 1.5; color: var(--ax-ink-2); }
.co-moneda select { display: inline-block; width: auto; min-height: 30px; padding: 2px 28px 2px 8px; margin: 0 2px; font-size: .84rem; }
.co-moneda label.co-check { display: flex; gap: .5rem; align-items: center; margin: 0; font-size: .88rem; font-weight: 400; color: var(--ax-ink-2); }
.co-moneda .co-check input { width: 1rem; height: 1rem; margin: 0; }
.co-moneda .btn { margin: 0; width: auto; grid-column: 2; justify-self: end; }
.co-moneda-flash { margin: 0 0 16px; }
.co-moneda [hidden] { display: none !important; }
@media (max-width: 560px) {
  .co-moneda { grid-template-columns: 1fr; }
  .co-moneda .btn { width: 100%; grid-column: 1; }
}

/* Medios de pago debajo del botón: el alumno ve que no necesita cuenta de Mercado Pago */
.co .co-medios { margin-top: -6px !important; text-align: center; }
/* Editores del catálogo: el campo de cuotas se oculta con "Pago único" */
[data-solo-mensual][hidden] { display: none !important; }