/* Agregados de la página de pagos (la base es styles.css, igual al formulario) */
.main { max-width: 680px; }
.cuotas { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.cuota { display: flex; align-items: center; gap: .8rem; border: 1.5px solid var(--line); border-radius: 14px; padding: .75rem 1rem; cursor: pointer; font-weight: 400; }
.cuota input { width: 20px; height: 20px; accent-color: var(--indigo); margin: 0; flex: none; }
.cuota:has(input:checked) { border-color: var(--indigo); background: var(--indigo-1); }
.cuota.is-off { cursor: default; background: var(--bg); }
.cuota__mes { flex: 1; display: flex; flex-direction: column; }
.cuota__mes b { font-family: var(--f-title); }
.cuota__mes small { font-size: .82rem; color: var(--gray); }
.cuota__monto { font-family: var(--f-title); font-weight: 600; color: var(--ink); white-space: nowrap; }
.estado { font-size: .75rem; font-weight: 600; border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }
.estado--ok { background: var(--teal-1); color: #0F6B4E; }
.estado--rev { background: var(--amber-1); color: #9A5B07; }
.estado--venc { background: #FFF0F0; color: var(--red); }
.anual { display: flex; align-items: flex-start; gap: .8rem; border: 2px dashed var(--teal); background: var(--teal-1); border-radius: 16px; padding: .9rem 1rem; cursor: pointer; font-weight: 400; margin-bottom: 1rem; }
.anual input { width: 20px; height: 20px; accent-color: var(--teal); margin: .15rem 0 0; flex: none; }
.anual small { display: block; color: var(--gray); font-size: .85rem; margin-top: .15rem; }
.anual:has(input:checked) { border-style: solid; }
.total { display: flex; justify-content: space-between; align-items: baseline; background: var(--indigo-1); border-radius: 14px; padding: .9rem 1.1rem; }
.total strong { font-family: var(--f-title); font-size: 1.6rem; color: var(--indigo); }
.msg { border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: 1rem; color: var(--ink); }
.msg--ok { background: var(--teal-1); }
.msg--warn { background: var(--amber-1); border: 1px solid #F3D9A8; }
.msg--bad { background: #FFF0F0; border: 1px solid #F2CACA; }
.msg p { margin: .2rem 0 0; }
.pay dl { grid-template-columns: 1fr; }
.medios { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.2rem; }
.medio { position: relative; display: flex; align-items: flex-start; gap: .7rem; border: 2px solid var(--line); border-radius: 16px; padding: .9rem 1rem; cursor: pointer; font-weight: 400; }
.medio input { width: 20px; height: 20px; accent-color: var(--indigo); margin: .15rem 0 0; flex: none; }
.medio b { font-family: var(--f-title); display: block; }
.medio small { display: block; font-size: .85rem; color: var(--gray); }
.medio:has(input:checked) { border-color: var(--indigo); background: var(--indigo-1); }
.medio.is-off { cursor: not-allowed; opacity: .6; background: var(--bg); }
.pronto { position: absolute; top: -.6rem; right: .8rem; font-style: normal; font-size: .72rem; font-weight: 600; background: var(--amber); color: var(--ink); border-radius: 999px; padding: .1rem .55rem; }
.msg--mp { background: #E8F4FD; border: 1px solid #B9DDF7; }
@media (max-width: 540px) { .medios { grid-template-columns: 1fr; } }
.panel--done .btn { margin-top: .6rem; }