/* Demo 6 · Pagos pendientes: la ficha de pagos del cliente (resumen, plan fraccionado, factura e historial) + el justificante en el chat */
.d-pag .dg-ficha{ flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; padding:12px 18px 10px; overflow:hidden; }
.dg-cab{ display:flex; align-items:center; gap:12px; }
.dg-cab .fi-avatar{ width:40px; height:40px; font-size:13px; }
.dg-quien{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dg-quien b{ font-size:15px; font-weight:600; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dg-quien em{ font-style:normal; font-size:12px; color:var(--tinta-60); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dg-estado{ flex:none; display:flex; }
.dg-st{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.dg-st .ico{ width:12px; height:12px; stroke-width:2.6; }
.dg-st.atr{ background:#fdecec; color:#c23a3a; }
.dg-st.ok{ background:var(--verde-agua); color:var(--verde-osc); }
.dg-st.ok.off{ display:none; }
.dg-st.atr:has(~ .dg-st.ok:not(.off)){ display:none; }

.dg-resumen{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.dg-r{ display:flex; flex-direction:column; gap:2px; padding:7px 10px; border-radius:8px; background:var(--nieve); }
.dg-r span{ font-size:11px; color:var(--tinta-60); }
.dg-r b{ font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--tinta); border-radius:4px; }
.dg-r.verde b{ color:var(--verde-osc); }
.dg-r.rojo b{ color:#c23a3a; }

.dg-plan{ display:flex; flex-direction:column; gap:6px; }
.dg-forma{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--tinta-60); white-space:nowrap; }
.dg-forma .ico{ width:12px; height:12px; }
.dg-cuotas{ display:flex; flex-direction:column; gap:3px; margin:0; padding:0; list-style:none; }
.dg-cuota{ display:grid; grid-template-columns:22px 1fr auto 128px; align-items:center; gap:10px; padding:5px 10px; min-height:34px; border-radius:7px; border:1px solid var(--linea); background:#fff; transition:background .5s, border-color .5s; }
.dg-n{ width:20px; height:20px; border-radius:50%; background:var(--nieve-2); color:var(--tinta-60); font-size:11px; font-weight:600; display:grid; place-items:center; }
.dg-cuota.hecha .dg-n{ background:var(--verde-agua); color:var(--verde-osc); }
.dg-con{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; row-gap:1px; min-width:0; }
.dg-con b{ font-size:12.4px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dg-con em{ font-style:normal; font-size:10.8px; color:var(--tinta-60); }
.dg-con .dg-prom{ flex-basis:100%; display:inline-flex; align-items:center; gap:4px; margin-top:1px; font-weight:500; color:#8a5a00; }
.dg-con .dg-prom .ico{ width:11px; height:11px; }
.dg-imp{ font-size:12.6px; font-weight:600; color:var(--tinta); text-align:right; white-space:nowrap; }
.dg-est{ display:flex; justify-content:flex-end; }
.dg-chip{ display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:999px; font-size:10.8px; font-weight:600; white-space:nowrap; }
.dg-chip .ico{ width:11px; height:11px; stroke-width:2.6; }
.dg-chip.ok{ background:var(--verde-agua); color:var(--verde-osc); }
.dg-chip.pend{ background:var(--nieve); color:var(--tinta-45); font-weight:500; }
.dg-chip.atr{ background:#d93c3c; color:#fff; }
/* la cuota atrasada: roja hasta que se paga */
.dg-cuota.dg-atr{ border:1.5px solid rgba(217,60,60,.5); background:#fff6f6; }
.dg-cuota.dg-atr .dg-n{ background:#d93c3c; color:#fff; }
.dg-cuota.dg-atr .dg-chip.ok{ display:none; }
.dg-cuota.dg-atr.pagada{ border:1.5px solid rgba(60,193,160,.55); background:var(--verde-agua); animation:dg-cobra 1.4s ease-out; }
.dg-cuota.dg-atr.pagada .dg-n{ background:var(--verde); color:var(--tinta); }
.dg-cuota.dg-atr.pagada .dg-chip.ok{ display:inline-flex; }
.dg-cuota.dg-atr.pagada .dg-chip.atr{ display:none; }
.dg-cuota.dg-atr.pagada .dg-prom{ display:none; }
@keyframes dg-cobra{ 0%{ box-shadow:0 0 0 0 rgba(60,193,160,.6); } 100%{ box-shadow:0 0 0 12px rgba(60,193,160,0); } }

.dg-fac{ display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:8px; border:1px dashed var(--linea-fuerte, rgba(10,10,10,.18)); }
.dg-fac > .ico{ width:18px; height:18px; color:var(--tinta-45); flex:none; }
.dg-fac > span:nth-child(2){ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.dg-fac b{ font-size:12.4px; font-weight:600; }
.dg-fac em{ font-style:normal; font-size:10.8px; color:var(--tinta-60); }
.dg-fac-est{ flex:none; border-radius:999px; }

.dg-pie{ flex:1; min-height:0; display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--linea); padding-top:8px; }
.dg-recu{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:11.5px; font-weight:500; color:#8a5a00; background:#fdf3e1; padding:4px 10px; border-radius:999px; }
.dg-recu .ico{ width:12px; height:12px; }
.dg-hist{ flex:1; min-height:0; overflow:hidden; position:relative; }
.dg-hist .fi-hist li{ grid-template-columns:40px 1fr; font-size:11.6px; }

/* El justificante que manda el cliente (captura de Bizum, transferencia o pago con tarjeta) */
.dg-foto{ width:226px; padding:5px 5px 6px; }
.dg-rec{ display:flex; flex-direction:column; gap:3px; padding:10px 12px 11px; border-radius:6px; background:linear-gradient(160deg, #f7fbfa, #e9f5f1); border:1px solid rgba(47,163,135,.2); }
.dg-rec-cab{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--verde-osc); text-transform:uppercase; letter-spacing:.05em; }
.dg-rec-cab .ico{ width:13px; height:13px; }
.dg-rec b{ font-size:22px; font-weight:600; letter-spacing:-.02em; color:#111b21; margin:2px 0; }
.dg-rec em{ font-style:normal; font-size:11.2px; color:#54656f; line-height:1.35; }
.dg-rec-ok{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-size:10.8px; font-weight:600; color:var(--verde-osc); }
.dg-rec-ok .ico{ width:11px; height:11px; stroke-width:2.8; }
.dg-foto p{ display:block; margin-top:5px; }

/* El salto de tiempo, encima del chat (no encima de la app) */
.d-pag .dmb-salto{ left:103px; right:auto; width:200px; justify-content:center; top:238px; font-size:13.5px; padding:9px 14px; }

/* El salto de tiempo se ve un momento y se va (no tapa la conversación) */
.d-pag .dmb-salto:not(.off){ animation:dmx-salto 3.6s ease both; }
@keyframes dmx-salto{ 0%{ opacity:0; transform:translateY(8px) scale(.96); } 12%{ opacity:1; transform:none; } 78%{ opacity:1; transform:none; } 100%{ opacity:0; visibility:hidden; transform:translateY(-6px); } }