/* ═══════════════════════════════════════════════════════
   MediRecord — Portal: pestaña «Pagos»
   (Se apaga solo si la persona activó «reducir movimiento».)
═══════════════════════════════════════════════════════ */
.tab { position: relative; }
.tab.pg-alerta::after, .tab.pg-aviso::after {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: .45rem; vertical-align: middle;
  background: var(--bad); box-shadow: 0 0 0 0 rgba(185, 28, 28, .5); animation: pgpLate 1.8s ease-out infinite;
}
.tab.pg-aviso::after { background: #d97706; box-shadow: 0 0 0 0 rgba(217, 119, 6, .5); }
@keyframes pgpLate { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

#sec-pagos { animation: pgpSube .4s var(--ease, ease) both; }
@keyframes pgpSube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.pgp-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.pgp-cab h2 { font-size: 1.5rem; }
.pgp-cab p { margin: .2rem 0 0; }
.pgp-vivo { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 700; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); padding: .3rem .75rem; border-radius: 999px; }
.pgp-vivo i { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.pgp-vivo.on { color: var(--ok); border-color: #86efac; background: #f0fdf4; }
.pgp-vivo.on i { background: #22c55e; animation: pgpLateV 1.6s ease-in-out infinite; }
@keyframes pgpLateV { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .35; } }

/* Tarjeta principal */
.pgp-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; align-items: center;
  padding: 1.6rem 1.75rem; border-radius: 18px; border: 1px solid var(--line); background: #fff; box-shadow: var(--sombra);
}
.pgp-hero::before { content: ""; position: absolute; inset: 0; opacity: .9; pointer-events: none; }
.pgp-hero.est-ok::before { background: radial-gradient(120% 140% at 0 0, #dcfce7 0, transparent 60%); }
.pgp-hero.est-warn::before { background: radial-gradient(120% 140% at 0 0, #fef3c7 0, transparent 60%); }
.pgp-hero.est-bad::before { background: radial-gradient(120% 140% at 0 0, #fee2e2 0, transparent 60%); }
.pgp-hero.est-info::before { background: radial-gradient(120% 140% at 0 0, #dbeafe 0, transparent 60%); }
.pgp-hero > * { position: relative; }
.pgp-hero.pulso { animation: pgpPulso 1.4s ease-out 2; }
@keyframes pgpPulso { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 100% { box-shadow: 0 0 0 26px rgba(34, 197, 94, 0); } }
.pgp-chip { display: inline-flex; align-items: center; gap: .45rem; font: 800 .8rem var(--f-titulo); letter-spacing: .03em; text-transform: uppercase; padding: .3rem .8rem .3rem .65rem; border-radius: 999px; border: 1px solid currentColor; }
.pgp-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pgpLateV 1.6s ease-in-out infinite; }
.pgp-chip.ok { color: var(--ok); background: #f0fdf4; }
.pgp-chip.warn { color: var(--warn); background: #fffbeb; }
.pgp-chip.bad { color: var(--bad); background: #fef2f2; }
.pgp-chip.info { color: var(--primary-dark); background: var(--primary-light); }
.pgp-lbl { margin-top: 1rem; font-weight: 700; color: var(--ink-soft); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.pgp-monto { font: 800 clamp(2.6rem, 6vw, 3.6rem)/1.1 var(--f-titulo); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.est-ok .pgp-monto { color: var(--ok); }
.est-bad .pgp-monto { color: var(--bad); }
.est-warn .pgp-monto { color: var(--warn); }
.pgp-frase { margin: .35rem 0 0; font-size: 1.05rem; max-width: 46ch; }
.pgp-desg { margin: .5rem 0 0; color: var(--ink-soft); font-size: .95rem; }
.pgp-h-der { display: grid; gap: 1rem; }
.pgp-prox { background: rgba(255, 255, 255, .85); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; backdrop-filter: blur(4px); }
.pgp-prox small { display: block; color: var(--ink-soft); font-weight: 600; }
.pgp-prox strong { display: block; font: 800 1.3rem var(--f-titulo); margin: .1rem 0; }
.pgp-prox span { color: var(--ink-soft); font-size: .95rem; }
.pgp-barra { height: 8px; border-radius: 99px; background: var(--line); margin-top: .7rem; overflow: hidden; }
.pgp-barra i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, #60a5fa, var(--primary)); animation: pgpLlena 1s .2s var(--ease, ease) both; transform-origin: 0 50%; }
.est-ok .pgp-barra i { background: linear-gradient(90deg, #4ade80, #16a34a); }
.est-bad .pgp-barra i { background: linear-gradient(90deg, #f87171, var(--bad)); }
.est-warn .pgp-barra i { background: linear-gradient(90deg, #fbbf24, #d97706); }
@keyframes pgpLlena { from { transform: scaleX(0); } }
.pgp-pagar { min-height: 50px; font-size: 1.05rem; }
.pgp-pagar svg { width: 22px; height: 22px; }
.pgp-hero .pgp-pagar.btn-prim { box-shadow: 0 8px 20px rgba(37, 99, 235, .35); }

/* Indicadores */
.pgp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; margin: 1rem 0; }
.pgp-k { display: flex; align-items: center; gap: .85rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .95rem 1.05rem; box-shadow: var(--sombra); animation: pgpSube .5s var(--ease, ease) both; transition: transform .2s, border-color .2s; }
.pgp-k:nth-child(2) { animation-delay: .06s; } .pgp-k:nth-child(3) { animation-delay: .12s; } .pgp-k:nth-child(4) { animation-delay: .18s; }
.pgp-k:hover { transform: translateY(-3px); border-color: var(--primary-300); }
.pgp-k .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--primary-100); color: var(--primary-dark); }
.pgp-k .ico svg { width: 22px; height: 22px; }
.pgp-k small { display: block; color: var(--ink-soft); font-weight: 600; font-size: .85rem; }
.pgp-k strong { display: block; font: 800 1.15rem/1.25 var(--f-titulo); }
.pgp-k em { display: block; font-style: normal; color: var(--ink-soft); font-size: .85rem; }

/* Bloques */
.pgp-bloque { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.15rem 1.25rem; margin-top: 1rem; box-shadow: var(--sombra); }
.pgp-bloque h3 { font-size: 1.15rem; }
.pgp-h3 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }
.pgp-filtros { display: flex; flex-wrap: wrap; gap: .4rem; }
.pgp-f { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .85rem; font-weight: 600; font-size: .9rem; cursor: pointer; color: var(--ink-soft); transition: all .15s; }
.pgp-f span { background: var(--paper); border-radius: 99px; padding: 0 .45rem; margin-left: .2rem; font-size: .8rem; }
.pgp-f:hover { border-color: var(--primary-300); color: var(--ink); }
.pgp-f.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.pgp-f.on span { background: rgba(255, 255, 255, .25); color: #fff; }

.pgp-cargos { list-style: none; margin: .7rem 0 0; padding: 0; }
.pgp-cargos li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem .25rem; border-bottom: 1px solid var(--line); }
.pgp-cargos li:last-child { border-bottom: 0; }
.pgp-cargos small { display: block; color: var(--ink-soft); }
.pgp-cargos .venc small { color: var(--bad); font-weight: 600; }

.pgp-tabla { overflow-x: auto; }
.pgp-tabla table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pgp-tabla th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: .5rem .6rem; border-bottom: 2px solid var(--line); white-space: nowrap; }
.pgp-tabla td { padding: .75rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.pgp-tabla tbody tr { animation: pgpSube .4s var(--ease, ease) both; transition: background .15s; }
.pgp-tabla tbody tr:hover { background: var(--primary-light); }
.pgp-tabla tbody tr.nuevo { animation: pgpNuevo 2.4s ease-out both; }
@keyframes pgpNuevo { 0% { background: #bbf7d0; transform: scale(1.01); } 100% { background: transparent; transform: none; } }
.pgp-tabla .der { text-align: right; }
.pgp-est { display: inline-block; font-weight: 700; font-size: .8rem; padding: .15rem .6rem; border-radius: 99px; }
.pgp-est.ok { background: var(--ok-bg); color: var(--ok); }
.pgp-est.warn { background: var(--warn-bg); color: var(--warn); }
.pgp-est.bad { background: var(--bad-bg); color: var(--bad); }
.pgp-est.gris { background: #e2e8f0; color: #475569; }

.pgp-vacio { text-align: center; padding: 2.5rem 1rem; color: var(--ink-soft); background: #fff; border: 1px dashed var(--line); border-radius: 16px; }
.pgp-vacio.chico { padding: 1.5rem 1rem; border: 0; }
.pgp-vacio p { margin: 0 0 .8rem; }
.pgp-esq { display: grid; gap: .9rem; }
.pgp-esq div { height: 120px; border-radius: 16px; background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 50%, #eef2f7 75%); background-size: 200% 100%; animation: pgpBrilla 1.3s linear infinite; }
.pgp-esq div:first-child { height: 190px; }
@keyframes pgpBrilla { to { background-position: -200% 0; } }

.pgp-confeti { position: fixed; inset: 0; pointer-events: none; z-index: 400; overflow: hidden; }
.pgp-confeti i { position: absolute; top: -14px; width: 9px; height: 15px; border-radius: 2px; opacity: 0; animation: pgpCae var(--d) var(--t) cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes pgpCae { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 1; transform: translateY(105vh) translateX(var(--x)) rotate(var(--r)); } }

@media (max-width: 760px) {
  .pgp-hero { grid-template-columns: 1fr; padding: 1.25rem 1.1rem; }
  .pgp-tabla table, .pgp-tabla tbody, .pgp-tabla tr, .pgp-tabla td { display: block; width: 100%; }
  .pgp-tabla thead { display: none; }
  .pgp-tabla tr { border: 1px solid var(--line); border-radius: 12px; padding: .5rem .8rem; margin-bottom: .7rem; }
  .pgp-tabla td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3rem 0; text-align: right; }
  .pgp-tabla td::before { content: attr(data-l); color: var(--ink-soft); font-weight: 600; text-align: left; flex: none; }
  .pgp-tabla .der { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  #sec-pagos *, .pgp-confeti i, .tab.pg-alerta::after, .tab.pg-aviso::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .pgp-confeti { display: none; }
}