/* Demo de cobranzas para la Argentina (/tesoreria/demo/). Suma a site.css y ar.css solo lo de esta página. */

/* los tres pasos, debajo del título: marcan dónde estás */
.dm-h .hero-txt{padding-bottom:clamp(36px,4vw,56px)}
.dm-h h1{max-width:16ch;font-size:clamp(40px,5.4vw,76px)}
.dm-ps{position:sticky;top:65px;z-index:20;border-bottom:1px solid var(--line);background:rgba(244,244,240,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dm-pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.dm-pasos a{display:grid;min-width:0;grid-template-columns:auto minmax(0,1fr);column-gap:12px;padding:16px clamp(16px,2.4vw,32px);border-left:1px solid var(--line);box-shadow:inset 0 2px 0 transparent;transition:background .2s,box-shadow .2s}
.dm-pasos a:first-child{border-left:0}
.dm-pasos a:hover{background:var(--white)}
.dm-pasos a.on{background:var(--white);box-shadow:inset 0 2px 0 var(--cobalt)}
.dm-n{grid-row:span 2;padding-top:2px;font-family:var(--mono);font-size:12px;color:var(--cobalt-d)}
.dm-pasos b{font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.dm-pasos small{font-size:13px;color:var(--muted)}

/* cada paso: el texto a la izquierda y la pantalla a la derecha */
.dm-v{scroll-margin-top:136px}
main>.dm-ps+section{border-top:0}
.dm-ir{margin-top:22px}
.dm-ir .lnk{padding:0;border:0;background:none;font:inherit;font-weight:500;cursor:pointer;text-align:left}
.dm-q[hidden]{display:none}
.dm-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.dm-t{padding:clamp(40px,5vw,72px) var(--pad)}
.dm-t .h2{font-size:clamp(30px,3.4vw,46px)}
.dm-t .lead{margin-top:18px}
.dm-a{display:flex;flex-direction:column;gap:18px;padding:clamp(28px,4vw,56px) clamp(14px,3vw,48px);border-left:1px solid var(--line);background-color:var(--paper-2);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
.dm-v.alt .dm-a{background-color:var(--ice)}
.dm-w{overflow:hidden}
.dm-w .win-h{flex-wrap:wrap;gap:10px}
.dm-w .sw{margin:0}
.dm-w .sw button{height:30px;padding:0 12px;font-size:13px}
.dm-l .li{width:100%}
.dm-l .li>div{min-width:0}
.dm-l .li small{display:block;overflow-wrap:anywhere}
.dm-x{margin-top:2px;color:var(--ink-2)!important}
.dm-r{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none;text-align:right}
.num.neg{color:var(--red)}
.dm-pie{padding:12px 18px 14px;border-top:1px solid var(--line-2);font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--muted)}

/* paso 1: los contadores y las filas que entran */
.dm-cnt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px;border-block:1px solid var(--line)}
.dm-cnt li{padding:14px 12px 16px 0}
.dm-cnt li+li{padding-left:14px;border-left:1px solid var(--line)}
.dm-cnt b{display:block;font-size:clamp(28px,3vw,38px);font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.dm-cnt span{display:block;margin-top:6px;font-size:13.5px;color:var(--muted);line-height:1.3}
.dm-k{margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.dm-esp .dm-l .li{opacity:0;transform:translateY(6px)}
.dm-lee .dm-l .li{animation:dmin .5s var(--ease) both}
.dm-lee .dm-l .li:nth-child(2){animation-delay:.12s}.dm-lee .dm-l .li:nth-child(3){animation-delay:.24s}
.dm-lee .dm-l .li:nth-child(4){animation-delay:.36s}.dm-lee .dm-l .li:nth-child(5){animation-delay:.48s}.dm-lee .dm-l .li:nth-child(6){animation-delay:.6s}
@keyframes dmin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* paso 2: cada cliente se abre y muestra sus facturas */
.dm-c{border-bottom:1px solid var(--line-2)}
.dm-c:last-child{border-bottom:0}
.dm-c .li{border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background .2s}
.dm-c .li:hover,.dm-c.on .li{background:var(--paper)}
.dm-det{padding:4px 18px 16px;background:var(--paper)}
.dm-f{display:grid;grid-template-columns:minmax(0,1.1fr) 48px 112px minmax(0,1.2fr);gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-2)}
.dm-f span:first-child{font-family:var(--mono);font-size:11.5px}
.dm-f span:nth-child(2){font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.dm-f .bad{color:var(--red)}.dm-f .ok{color:var(--green)}
.dm-det p{margin-top:8px;font-size:13px;color:var(--muted)}
.dm-q{margin-top:28px}
.dm-q .nt{box-shadow:var(--sh-float)}
.dm-q .nt>p{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.dm-q .nt.ok>p:first-child{margin-top:0}
.dm-q .nt.ok b{font-weight:500;color:var(--green)}
.dm-regla{font-size:13px!important;color:var(--muted)!important}

/* paso 3: el teléfono y el parte del viernes */
.dm-sw{margin:26px 0 0;max-width:100%;overflow-x:auto;scrollbar-width:none}
.dm-sw::-webkit-scrollbar{display:none}
.dm-sw button{flex:none}
.dm-a3{display:grid;grid-template-columns:minmax(0,318px) minmax(0,1fr);align-items:start;gap:clamp(18px,2.4vw,32px)}
.dm-tel{margin:0}
.dm-tel .pz-pan{height:540px}
.dm-parte{align-self:center}
.dm-kv div{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line-2);font-size:14px}
.dm-kv dt{color:var(--muted)}
.dm-kv dd{margin:0;font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dm-nojs{padding:16px var(--pad);text-align:center}

@media (max-width:1100px){
  .dm-a3{grid-template-columns:minmax(0,1fr)}
  .dm-tel{margin-inline:auto}
}
@media (max-width:960px){
  .dm-g{grid-template-columns:minmax(0,1fr)}
  .dm-a{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:720px){
  .dm-ps{position:static}
  /* en el celular, el monto arriba a la derecha y la etiqueta debajo del texto */
  .dm-l .li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:6px 12px;padding:12px 14px}
  .dm-l .li:has(time){grid-template-columns:38px minmax(0,1fr) auto}
  .dm-l .li time{width:auto;grid-row:1/3;padding-top:2px}
  .dm-l .li>div{grid-row:1}
  .dm-r{display:contents}
  .dm-r .num{grid-row:1;text-align:right}
  .dm-r .tag{grid-column:-3/-2;grid-row:2;justify-self:start}
  .dm-pasos a{grid-template-columns:minmax(0,1fr);padding:10px 10px 12px}
  .dm-n{grid-row:auto}
  .dm-pasos b{font-size:13px;line-height:1.2}
  .dm-pasos small{display:none}
  .dm-v{scroll-margin-top:120px}
  .dm-cnt span{font-size:12px}
  .dm-f{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
  .dm-f span:nth-child(2){display:none}
  .dm-f span:last-child{grid-column:1/-1}
  .dm-tel .pz-pan{height:500px}
}
@media (prefers-reduced-motion:reduce){
  .dm-lee .dm-l .li{animation:none}
}