/* Tarjeta «Elige tu aporte» de /org/socio/ (maqueta de JAM, 30-10-2026). Archivo nuevo, hecho por Claude Code con los tokens de
   base.css; Codex puede afinarlo. Pastillas como radios reales: se usan con teclado y lector de pantalla. */
.aporte {
  background: var(--color-superficie, #fffdf8);
  border: 1px solid var(--color-linea, #ddd4c2);
  border-radius: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  max-width: 34rem;
}
.aporte-titulo { margin: 0 0 1.1rem; font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.1; }
.aporte input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.aporte-frecuencias, .aporte-montos { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.1rem; }
.aporte-frecuencias label, .aporte-montos label {
  flex: 1 1 auto; min-width: 5.5rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: .55rem 1rem; border: 1.5px solid var(--color-borde-control, #817765); border-radius: 999px;
  background: var(--color-superficie, #fffdf8); color: var(--color-texto, #27251f); font-size: 1.05rem; cursor: pointer;
}
.aporte input[type="radio"]:checked + label { background: var(--color-accion, #ffcc32); border-color: var(--color-texto, #27251f); font-weight: 600; }
.aporte input[type="radio"]:focus-visible + label,
.aporte input[type="checkbox"]:focus-visible,
.aporte-pagar:focus-visible { outline: 3px solid var(--color-foco, #142e46); outline-offset: 2px; box-shadow: 0 0 0 5px var(--color-foco-halo, #fff); }
.aporte-montos-titulo { margin: 0 0 .5rem; color: var(--color-texto-secundario, #5b564a); font-size: 1rem; }
.aporte-acepto { display: flex; gap: .65rem; align-items: flex-start; margin: .4rem 0 1.1rem; font-size: 1rem; }
.aporte-acepto input { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .15rem; accent-color: var(--color-texto, #27251f); }
.aporte-pagar {
  display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 56px; padding: .8rem 1.2rem;
  border-radius: 999px; background: var(--color-accion, #ffcc32); color: var(--color-texto, #27251f);
  font-size: 1.2rem; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
}
.aporte-pagar[href]:hover { background: var(--color-accion-hover, #f0ba22); }
.aporte-pagar[aria-disabled="true"] { background: var(--color-franja, #f1ecdf); color: var(--color-texto-secundario, #5b564a); cursor: not-allowed; border: 1.5px dashed var(--color-borde-control, #817765); }
.aporte-estado, .aporte-nota { margin: .8rem 0 0; text-align: center; font-size: .95rem; color: var(--color-texto-secundario, #5b564a); }
.aporte-nota { margin-top: .3rem; font-size: .85rem; }
@media (max-width: 480px) { .aporte-frecuencias label, .aporte-montos label { min-width: 4.5rem; padding-inline: .6rem; } }