/* ui-pagos.css — estilos del módulo "pagos" (perfil Residente). Prefijo de clases: cs-pagos-*  ·  usa solo tokens --cs-* (claro y oscuro). */

/* ---- Pantalla Pagos ---- */
.cs-pagos-heroe .cs-heroe-monto { font-variant-numeric: tabular-nums; }
.cs-pagos-heroe-chip { display: inline-flex; align-items: center; padding: .25rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: rgba(255,255,255,.18); color: #fff; }
.cs-pagos-heroe-chip--alerta { background: #FEE2E2; color: #991B1B; }
.cs-pagos-atajos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.cs-pagos-atajos .cs-atajo { min-height: 84px; font-size: .92rem; }
.cs-pagos-nota { font-size: .85rem; color: var(--cs-muted); display: flex; gap: .35rem; align-items: flex-start; line-height: 1.4; }
.cs-pagos-nota--centro { justify-content: center; text-align: center; }
.cs-pagos-nota--alerta { color: var(--cs-error, #b91c1c); font-weight: 600; }
.cs-pagos-etiqueta { color: var(--cs-primario, #0f766e); font-weight: 600; }
.cs-pagos-select { font: inherit; padding: .4rem .6rem; border: 1px solid var(--cs-borde, #cbd5e1); border-radius: .5rem; background: var(--cs-fondo, #fff); color: inherit; min-width: 7.5rem; }
.cs-pagos-enlace { background: none; border: 0; padding: .5rem 0; color: var(--cs-primary); font-weight: 700; font-size: .85rem; cursor: pointer; min-height: 44px; }

.cs-pagos-adeudo { cursor: pointer; }
.cs-pagos-adeudo--vencido { box-shadow: inset 4px 0 0 var(--cs-err); }
.cs-pagos-check { width: 24px; height: 24px; flex: none; accent-color: var(--cs-primary); margin: 0; cursor: pointer; }
.cs-pagos-adeudo .cs-fila-der { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }

.cs-pagos-barra {
    position: sticky; z-index: 25; width: 100%; margin-top: .25rem;
    bottom: calc(78px + var(--cs-safe-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .65rem .65rem .65rem 1.1rem; border-radius: 20px; background: var(--cs-ink); color: var(--cs-surface); box-shadow: var(--cs-shadow-lg);
}
.cs-pagos-barra-txt { display: flex; flex-direction: column; line-height: 1.15; }
.cs-pagos-barra-txt small { opacity: .75; font-weight: 600; font-size: .75rem; }
.cs-pagos-barra-txt strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.cs-pagos-barra .cs-btn { min-width: 112px; }
.cs-pagos-barra--vacia { opacity: .92; }

/* ---- Pagar ---- */
.cs-pagos-resumen { display: flex; flex-direction: column; gap: .5rem; }
.cs-pagos-resumen-fila { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.cs-pagos-resumen-fila span { color: var(--cs-text); min-width: 0; }
.cs-pagos-resumen-fila strong { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--cs-ink); }
.cs-pagos-resumen-total { border-top: 1px dashed var(--cs-line); padding-top: .6rem; margin-top: .2rem; font-size: 1rem; }
.cs-pagos-opciones { display: flex; flex-direction: column; gap: .6rem; }
.cs-pagos-opcion {
    display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; min-height: 64px; cursor: pointer;
    border-radius: var(--cs-radius); background: var(--cs-surface); border: 2px solid var(--cs-line); transition: border-color .15s, background .15s;
}
.cs-pagos-opcion input[type=radio] { width: 22px; height: 22px; accent-color: var(--cs-primary); flex: none; margin: 0; }
.cs-pagos-opcion--sel { border-color: var(--cs-primary); background: color-mix(in srgb, var(--cs-primary-soft) 55%, var(--cs-surface)); }
.cs-pagos-opcion--off { opacity: .55; cursor: not-allowed; }
.cs-pagos-opcion--chica { min-height: 52px; padding: .6rem .85rem; border-radius: var(--cs-radius-sm); }
.cs-pagos-opcion-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cs-pagos-opcion-txt strong { color: var(--cs-ink); font-size: .98rem; }
.cs-pagos-opcion-txt small { color: var(--cs-muted); font-size: .8rem; }
.cs-pagos-opcion-monto { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cs-ink); }
.cs-pagos-sub { display: flex; flex-direction: column; gap: .5rem; margin: -.1rem 0 .3rem 1.2rem; }
.cs-pagos-cta { min-height: 54px; font-size: 1.05rem; }
.cs-pagos-guardar { display: flex; align-items: center; gap: .65rem; margin-top: .9rem; font-size: .92rem; cursor: pointer; min-height: 44px; }

/* ---- Captura de tarjeta ---- */
.cs-pagos-captura { display: flex; flex-direction: column; gap: .9rem; }
.cs-pagos-iframe { min-height: 250px; border-radius: var(--cs-radius-sm); overflow: hidden; }
.cs-pagos-iframe iframe { width: 100%; border: 0; }
.cs-pagos-seguro { display: flex; gap: .4rem; align-items: flex-start; font-size: .8rem; color: var(--cs-muted); line-height: 1.35; }
.cs-pagos-simulada { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem; border-radius: var(--cs-radius-sm); background: var(--cs-warn-bg); color: var(--cs-warn); font-size: .85rem; }

/* ---- Orden / resultado ---- */
.cs-pagos-exito, .cs-pagos-fallo, .cs-pagos-ref { display: flex; flex-direction: column; gap: .85rem; }
.cs-pagos-exito { align-items: center; text-align: center; }
.cs-pagos-exito h2, .cs-pagos-fallo h2 { font-size: 1.35rem; margin: 0; }
.cs-pagos-exito-icono, .cs-pagos-fallo-icono { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-ok-bg); color: var(--cs-ok); animation: cs-pagos-pop .45s cubic-bezier(.2,1.4,.4,1) both; }
.cs-pagos-fallo { align-items: center; text-align: center; }
.cs-pagos-fallo-icono { background: var(--cs-err-bg); color: var(--cs-err); }
@keyframes cs-pagos-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.cs-pagos-datos { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; width: 100%; font-size: .9rem; text-align: left; }
.cs-pagos-datos dt { color: var(--cs-muted); }
.cs-pagos-datos dd { margin: 0; text-align: right; font-weight: 600; color: var(--cs-ink); overflow-wrap: anywhere; }
.cs-pagos-espera { display: inline-flex; align-items: center; gap: .55rem; align-self: flex-start; padding: .3rem .8rem; border-radius: 999px; background: var(--cs-warn-bg); color: var(--cs-warn); font-weight: 700; font-size: .82rem; }
.cs-pagos-exito .cs-pagos-espera { align-self: center; }
.cs-pagos-pulso { width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: cs-pagos-latido 1.4s ease-in-out infinite; }
@keyframes cs-pagos-latido { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }
.cs-pagos-monto-exacto { font-size: .95rem; color: var(--cs-text); }
.cs-pagos-referencia { display: flex; flex-direction: column; gap: .15rem; align-items: center; padding: .9rem; border-radius: var(--cs-radius-sm); background: var(--cs-surface-2); border: 1px dashed var(--cs-line); }
.cs-pagos-referencia small { color: var(--cs-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; }
.cs-pagos-numero { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.35rem; letter-spacing: .04em; color: var(--cs-ink); overflow-wrap: anywhere; text-align: center; font-variant-numeric: tabular-nums; }
.cs-pagos-barras { background: #fff; padding: .6rem .75rem; border-radius: var(--cs-radius-sm); border: 1px solid var(--cs-line); }
.cs-pagos-barras svg { display: block; width: 100%; height: 76px; }

/* ---- Tarjetas y cargo automático ---- */
.cs-pagos-chips { display: flex; flex-direction: column; gap: .25rem; align-items: flex-end; }
.cs-pagos-peligro { color: var(--cs-err); box-shadow: inset 0 0 0 1.5px var(--cs-err); }
.cs-btn--borde.cs-pagos-peligro { color: var(--cs-err); }
.cs-pagos-auto { display: flex; flex-direction: column; gap: .85rem; }
.cs-pagos-auto-enc { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cs-pagos-lista-ayuda { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .4rem; color: var(--cs-text); font-size: .92rem; }
.cs-pagos-autorizacion { padding: .85rem 1rem; border-radius: var(--cs-radius-sm); background: var(--cs-surface-2); border: 1px solid var(--cs-line); font-size: .85rem; line-height: 1.5; color: var(--cs-text); max-height: 14rem; overflow: auto; }
.cs-pagos-detalle { font-size: .9rem; color: var(--cs-muted); }
.cs-pagos-detalle summary { cursor: pointer; padding: .5rem 0; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

/* ---- Estado de cuenta e historial ---- */
.cs-pagos-filtros { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .1rem; }
.cs-pagos-filtro { flex: none; min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--cs-line); background: var(--cs-surface); color: var(--cs-text); font-weight: 700; font-size: .85rem; cursor: pointer; }
.cs-pagos-filtro--sel { background: var(--cs-primary); border-color: var(--cs-primary); color: #fff; }
.cs-pagos-totales { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cs-pagos-totales > div { background: var(--cs-surface); border-radius: var(--cs-radius-sm); padding: .75rem 1rem; box-shadow: var(--cs-shadow); display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--cs-line) 70%, transparent); }
.cs-pagos-totales small { color: var(--cs-muted); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.cs-pagos-totales strong { font-size: 1.2rem; color: var(--cs-ink); font-variant-numeric: tabular-nums; }
.cs-pagos-totales--alerta strong { color: var(--cs-err); }
.cs-pagos-totales--favor strong { color: var(--cs-ok); }
.cs-pagos-totales--3 { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.cs-pagos-totales--3 > div { padding: .6rem .7rem; min-width: 0; }
.cs-pagos-totales--3 strong { font-size: 1rem; }
.cs-pagos-filtro--chico { min-height: 34px; padding: 0 .85rem; font-size: .8rem; }
.cs-pagos-mov-ini { background: var(--cs-surface-2); }
.cs-pagos-cargo-monto { color: var(--cs-ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-pagos-abono-monto { color: var(--cs-ok); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-pagos-saldo-corrido { color: var(--cs-muted); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* cierre del estado de cuenta: adeudo (rojo), saldo a favor (verde) o al corriente */
.cs-pagos-final { display: flex; flex-direction: column; gap: .75rem; border-left: 4px solid var(--cs-line); }
.cs-pagos-final--adeudo { border-left-color: var(--cs-err); }
.cs-pagos-final--favor { border-left-color: var(--cs-ok); }
.cs-pagos-final--cero { border-left-color: var(--cs-ok); }
.cs-pagos-final-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .75rem; border-top: 1px dashed var(--cs-line); }
.cs-pagos-final-total span { font-weight: 800; color: var(--cs-ink); }
.cs-pagos-final-total strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--cs-ink); }
.cs-pagos-final--adeudo .cs-pagos-final-total strong { color: var(--cs-err); }
.cs-pagos-final--favor .cs-pagos-final-total strong, .cs-pagos-final--cero .cs-pagos-final-total strong { color: var(--cs-ok); }
.cs-pagos-final-nota { color: var(--cs-muted); }
.cs-pagos-cargo { cursor: default; align-items: flex-start; }
.cs-pagos-cargo .cs-fila-der { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.cs-pagos-recibo { display: flex; flex-direction: column; gap: 1rem; }
.cs-pagos-recibo-enc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding-bottom: .75rem; border-bottom: 1px dashed var(--cs-line); }
.cs-pagos-recibo-enc strong { color: var(--cs-ink); font-size: 1.05rem; }
.cs-pagos-recibo-enc span { color: var(--cs-muted); font-size: .85rem; }
.cs-pagos-recibo-enc .cs-pagos-numero { font-size: 1.1rem; color: var(--cs-primary); margin-top: .2rem; }

@media (min-width: 560px) { .cs-pagos-atajos { grid-template-columns: repeat(4, 1fr); } }
.cs-pagos-exito .cs-acciones { width: 100%; }
.cs-pagos-exito .cs-acciones > .cs-btn { white-space: nowrap; padding: 0 .75rem; }

/* Corrección compartida (ver PEDIDOS-INTEGRACION.md): con animation-fill-mode:both el contenedor conserva un contexto de apilamiento y la hoja inferior
   (CsHoja, z-index 61) queda DEBAJO de la barra de pestañas (z-index 30). Al terminar la entrada ya no debe retener nada. */
.cs-contenido { animation-fill-mode: backwards; }