.pi-fondo{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:var(--bg-primary)}.pi-tarjeta{width:520px;max-width:100%;display:flex;flex-direction:column;gap:14px;padding:28px 26px;border:1px solid var(--border-primary);border-radius:12px;background:var(--bg-secondary, var(--bg-primary));color:var(--text-primary)}.pi-eyebrow{font-size:12px;color:var(--text-muted);letter-spacing:.02em}.pi-tarjeta h1{margin:0;font-size:22px;font-weight:600}.pi-texto,.pi-nota{margin:0;font-size:14px;color:var(--text-secondary, var(--text-muted))}.pi-nota{font-size:12px;color:var(--text-muted)}.pi-renglones{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--border-primary);border-radius:8px}.pi-renglones>div{display:flex;justify-content:space-between;gap:12px;font-size:14px}.pi-total{border-top:1px solid var(--border-primary);padding-top:8px;font-size:16px}.pi-acciones{display:flex;flex-direction:column;gap:10px}.pi-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;color:var(--text-primary);background:transparent;border:1px solid rgba(6,182,212,.55)}.pi-btn:hover{background:#06b6d414}.pi-btn--sec{border-color:var(--border-primary);font-weight:500}.pi-compra{display:flex;flex-direction:column;gap:12px}.pi-aviso{margin:0;font-size:13px;color:#f59e0b}.pi-error{margin:0;font-size:13px;color:#ef4444}.pi-procesando{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-muted)}.pi-gira{animation:pi-gira .9s linear infinite}@keyframes pi-gira{to{transform:rotate(360deg)}}.pi-salir{align-self:center;display:inline-flex;align-items:center;gap:6px;margin-top:4px;background:transparent;border:none;color:var(--text-muted);font-size:12px;cursor:pointer}.pi-fondo .hp-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;font-size:13px;font-weight:500;font-family:inherit;line-height:1;border-radius:8px;background:transparent;color:var(--text-secondary, #C8C8C8);border:1px solid var(--border-primary, #333333);cursor:pointer;white-space:nowrap}.pi-fondo .hp-btn:hover:not(:disabled){border-color:var(--text-secondary, #C8C8C8);color:var(--text-primary, #ECECEC)}.pi-fondo .hp-btn:disabled{opacity:.45;cursor:not-allowed}.aviso-pago__giro{animation:aviso-pago-giro 1s linear infinite}@keyframes aviso-pago-giro{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.aviso-pago__giro{animation:none}}