/* Pantalla Cuentas · deudores y súper factura */

/* --- resumen de lo que se debe --- */
.deuTot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--card);border:1.5px solid var(--line);border-radius:22px;
  padding:18px clamp(18px,2.4vw,24px);margin-bottom:18px}
.deuTot u{text-decoration:none;font:600 11px Inter;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.13em}
.deuTot .v{font:900 clamp(36px,5.4vw,54px)/1 Archivo;color:var(--k);letter-spacing:-.04em;margin-top:5px}
.deuTot .c{font:800 14px Inter;color:var(--ink-2)}

/* --- tarjetas de deudor: grandes, la cifra manda --- */
.deu{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(clamp(288px,30vw,400px),1fr))}
.d{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;
  background:var(--card);border:1.5px solid var(--line);border-radius:24px;
  padding:20px;cursor:pointer;text-align:left;color:var(--ink);width:100%;
  transition:border-color .18s}
.d:active{transform:scale(.985)}
.d:hover{border-color:var(--line2)}
.d .av{width:clamp(74px,8.5vw,92px);height:clamp(74px,8.5vw,92px)}
.d .nm{font:800 clamp(20px,2.3vw,25px) Inter;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d .mt{font:600 13px Inter;color:var(--ink-3);margin-top:5px}
.d .am{font:900 clamp(36px,4.8vw,52px)/1 Archivo;color:var(--k);letter-spacing:-.04em;
  grid-column:2;margin-top:9px}
.d.libre .am{color:var(--ok);font-size:clamp(19px,2.2vw,24px)}
.d.libre{opacity:.62}

/* ═══ SÚPER FACTURA · pantalla completa ═══ */
.cta{position:fixed;inset:0;z-index:120;background:var(--bg);
  display:grid;grid-template-rows:auto 1fr auto;
  transform:translateY(100%);transition:transform .34s cubic-bezier(.22,1,.3,1)}
.cta[data-on]{transform:none}
/* cabecera */
.cta .hd{background:#0a0a0ceb;backdrop-filter:blur(20px);border-bottom:1.5px solid var(--line);
  padding:14px clamp(14px,2.6vw,26px)}
.cta .hd .top{display:flex;align-items:center;gap:clamp(12px,2vw,20px);width:100%}
.cta .bk{background:var(--sub);border:0;color:var(--ink);width:52px;height:52px;
  border-radius:16px;font:700 24px Inter;cursor:pointer;flex:none;line-height:0}
.cta .bk:active{transform:scale(.94)}
.cta .hd .av{width:clamp(58px,7vw,76px);height:clamp(58px,7vw,76px);border-radius:22px}
.cta .who{flex:1;min-width:0}
.cta .who .nm{font:900 clamp(22px,3.2vw,34px) Inter;letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cta .who .mt{font:600 13px Inter;color:var(--ink-3);margin-top:3px}
.cta .amt{text-align:right;flex:none}
.cta .amt u{display:block;text-decoration:none;font:600 10px Inter;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.14em}
.cta .amt .v{font:900 clamp(30px,5.4vw,58px)/1 Archivo;color:var(--k);
  letter-spacing:-.04em;margin-top:4px}
/* cuerpo: dias en columnas, cada uno un bloque elevado */
.cta .bd{overflow:auto;padding:clamp(13px,2.2vw,24px) clamp(14px,2.6vw,26px) 20px}
.cta .wrap{width:100%;display:grid;gap:clamp(13px,1.8vw,22px);align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(clamp(300px,29vw,430px),1fr))}
.day{background:#101014;border:1.5px solid #25252f;border-radius:24px;
  padding:clamp(12px,1.6vw,18px);box-shadow:0 10px 26px #00000059,0 2px 6px #0000003d}
.day .dh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:0 2px 11px;border-bottom:2px solid #2a2a35;margin-bottom:13px}
.day .dh b{font:900 clamp(17px,2.1vw,23px) Inter;letter-spacing:-.02em}
.day .dh time{font:600 12px Inter;color:var(--ink-3);margin-left:8px}
.day .dh .ds{font:900 clamp(19px,2.4vw,26px) Archivo;color:var(--ink-2)}
.ped{background:var(--card);border:1.5px solid #26262f;border-radius:18px;
  padding:clamp(11px,1.5vw,16px);margin-bottom:10px;position:relative}
.ped:last-child{margin-bottom:0}
.ped .ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.ped .ph .hr{display:flex;align-items:center;gap:9px;font:800 14px Archivo;color:var(--ink-2)}
.ped .ph .hr b{background:var(--sub);color:var(--ink);font:800 12px Inter;
  padding:5px 11px;border-radius:99px}
.ped .ph .pt{font:900 clamp(20px,2.5vw,26px) Archivo;letter-spacing:-.03em}
.ped .del{background:0;border:0;color:var(--ink-3);cursor:pointer;font:700 19px Inter;
  padding:2px 6px;border-radius:8px;line-height:1}
.ped .del:hover{color:var(--bad);background:#ff5a5a1a}
.its{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(clamp(92px,9vw,116px),1fr))}
.it{position:relative;background:var(--card3);border:1.5px solid #33333f;border-radius:15px;
  padding:9px 9px 10px;display:grid;grid-template-rows:1fr auto auto;gap:3px;
  overflow:hidden;aspect-ratio:.8}
.it img{width:100%;height:100%;object-fit:contain;min-height:0}
.it .rb{position:absolute;top:0;right:0;width:58px;height:58px;
  background:linear-gradient(200deg,var(--k2),var(--k));clip-path:polygon(100% 0,18% 0,100% 82%)}
.it .rb b{position:absolute;top:0;right:6px;font:900 24px/1 Archivo;color:var(--kink)}
.it .pz{font:900 clamp(19px,2.3vw,23px)/1 Archivo;text-align:center;letter-spacing:-.03em}
.it .u{font:800 11px Archivo;color:var(--ink-3);text-align:center}
/* pie: slider a todo el ancho */
.cta .ft{background:#0a0a0ceb;backdrop-filter:blur(20px);border-top:1.5px solid var(--line);
  padding:13px clamp(14px,2.6vw,26px) calc(13px + env(safe-area-inset-bottom))}
.cta .ft .in{width:100%;display:grid;gap:10px}
.sl{position:relative;height:clamp(70px,8.5vw,86px);border-radius:22px;overflow:hidden;
  background:linear-gradient(100deg,#17171d,#20202a);border:1.5px solid #32323e;
  user-select:none;touch-action:none;cursor:grab}
.sl:active{cursor:grabbing}
.sl .fill{position:absolute;inset:0;width:0;
  background:linear-gradient(100deg,var(--ok),var(--ok2));transition:width .05s linear}
.sl .lbl{position:absolute;inset:0;display:grid;place-items:center;
  font:900 clamp(16px,2.1vw,21px) Inter;letter-spacing:-.01em;color:var(--ink-2);
  pointer-events:none;padding-left:clamp(70px,8.5vw,86px)}
.sl .kn{position:absolute;top:5px;left:5px;bottom:5px;width:clamp(60px,7.5vw,76px);
  background:var(--ok);border-radius:17px;display:grid;place-items:center;
  font:900 27px Inter;color:#04220f;box-shadow:0 6px 18px #0006;transition:left .05s linear}
.sl.done .kn{background:#fff}
.cta .alt{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ═══ PANTALLA VERDE DE PAGADO ═══ */
.pay{position:fixed;inset:0;z-index:200;background:linear-gradient(160deg,var(--ok),#12b566);
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s}
.pay[data-on]{opacity:1;pointer-events:auto}
.pay .box{text-align:center;color:#04240f;padding:24px}
.pay svg.big{width:clamp(120px,19vw,186px);height:clamp(120px,19vw,186px);margin-bottom:16px}
.pay .ck{stroke:#04240f;stroke-width:9;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100}
.pay[data-on] .ck{animation:draw .45s .18s cubic-bezier(.2,1,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pay .ring{stroke:#04240f;stroke-width:5;fill:none;opacity:.32;
  stroke-dasharray:283;stroke-dashoffset:283}
.pay[data-on] .ring{animation:draw .55s cubic-bezier(.2,1,.3,1) forwards}
.pay h2{font:900 clamp(44px,10vw,84px)/1 Fraunces;letter-spacing:-.04em}
.pay .who2{font:800 clamp(16px,2.4vw,23px) Inter;margin-top:12px;opacity:.72}
.pay .amt2{font:900 clamp(30px,6vw,52px) Archivo;margin-top:6px;letter-spacing:-.03em}
.pay .bts{display:flex;gap:11px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.pay .bts button{height:58px;padding:0 26px;border-radius:17px;border:0;cursor:pointer;
  font:800 16px Inter;background:#04240f;color:#eafff2}
.pay .bts button:active{transform:scale(.96)}
.pay .bts .w{background:#ffffffe6;color:#04240f}
.pay[data-on] .box{animation:up .4s cubic-bezier(.2,1,.3,1)}
@keyframes up{from{transform:translateY(18px);opacity:0}}
@media(max-width:560px){.cta .bk{width:46px;height:46px}}