/* canasta cr · mi lista (ux-aaa, 2026-11). Built on ui.css (tokens + components) and chrome.css (header,
   tab bar, freshness). Calm data surfaces: one sticker card (the verdict), hairline cards for the rest.
   Drawn by lista.js; the data comes from lista-data.js (CCR.lista). */

#app{padding-top:16px;padding-bottom:8px}
.lz-band .wrap{padding-top:14px}
.lz-band p{margin-top:8px;max-width:46ch;font:500 15.5px/1.45 var(--font);color:#fff}
.lz-band .fresh-chip{margin-top:12px}
.lz-band .fresh-chip[hidden]{display:none}
.notice+.lz-grid,.notice+.notice{margin-top:12px}
.lz-drops{margin-bottom:14px}

/* ---------- verdict: the one sticker card on the page ---------- */
.verdict{display:block;padding:18px 16px 16px}
.verdict .sk{display:block}
.v-k{font:700 14px/1.3 var(--font);color:var(--ink-3)}
.v-store{margin-top:10px}
.v-store .store{font-size:18px}
.v-store .dot{width:12px;height:12px}
.verdict .price-xl{display:block;margin-top:10px}
.v-sub{margin-top:8px;font:600 15px/1.45 var(--font);color:var(--ink-2)}
.v-sub b{font-weight:800;color:var(--save-ink);font-variant-numeric:tabular-nums}
.v-note{margin-top:8px;font:500 13.5px/1.45 var(--font);color:var(--ink-3)}
.v-split{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font:500 14px/1.45 var(--font);color:var(--ink-3)}
.v-split b{color:var(--ink);font-variant-numeric:tabular-nums}
.v-acts{display:grid;gap:12px;margin-top:16px}

/* ---------- ranking: native <details>, complete stores first, the rest apart ---------- */
.rank{padding:0 16px}
.rank details{border-top:1px solid var(--line)}
.rank details:first-child{border-top:0}
.rank summary{display:grid;grid-template-columns:28px minmax(0,1fr) auto 20px;gap:2px 10px;align-items:center;min-height:64px;padding:10px 0;list-style:none;cursor:pointer}
.rank summary::-webkit-details-marker{display:none}
.rank summary:focus-visible{outline:3px solid var(--focus,#1A52AE);outline-offset:2px;border-radius:8px}
.rk{font:800 14px/1 var(--font);color:var(--ink-3);font-variant-numeric:tabular-nums}
.rank .win .rk{color:var(--save-ink)}
.r-mid{display:grid;gap:3px;min-width:0}
.r-mid .store{flex-wrap:wrap}
.r-cov{font:500 13px/1.3 var(--font);color:var(--ink-3)}
.r-right{display:grid;justify-items:end;gap:5px}
.rank summary>.ico{color:var(--ink-4);transition:transform var(--t-fast) var(--ease-out)}
.rank details[open] summary>.ico{transform:rotate(90deg)}
.r-items{display:grid;gap:4px;padding:0 0 12px 38px;list-style:none}
.r-items li{display:flex;justify-content:space-between;gap:12px;font:500 13.5px/1.4 var(--font);color:var(--ink-2)}
.r-items li span:first-child{min-width:0}
.r-items li span:last-child{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.r-items li.miss{color:var(--ink-4)}
.rank-sub{margin:18px 0 8px;font:800 15px/1.3 var(--font);color:var(--ink-2)}
.sk-row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.sk-row:first-child{border-top:0}

/* ---------- the items ---------- */
.items{padding:0 12px}
.item{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item-img{grid-row:1/3;display:block;width:52px;height:52px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md)}
.item-img img{width:100%;height:100%;object-fit:contain}
.item-t{min-width:0}
.item-t>a,.item-t>b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 14.5px/1.3 var(--font);color:var(--ink);text-decoration:none}
.item-t>a:hover{text-decoration:underline}
.item-t p{margin-top:4px;font:500 13px/1.35 var(--font);color:var(--ink-3)}
.item-t p b{font-weight:800;color:var(--save-ink);font-variant-numeric:tabular-nums}
.item-t .store{font-size:13px}
.item .tag{margin-top:6px}
.item-x{grid-row:1;grid-column:3;margin-right:-8px}
.step{grid-column:2/4;display:flex;align-items:center;justify-content:space-between;gap:10px}
.step .price{font-size:var(--fs-17,17px)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface)}
.qty button{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:var(--r-pill);color:var(--ink);cursor:pointer}
.qty button:active{background:var(--sunk)}
.qty button:disabled{color:var(--ink-4);cursor:default}
.qty output{min-width:24px;text-align:center;font:800 15px/1 var(--font);font-variant-numeric:tabular-nums}
.item-lack{grid-template-columns:minmax(0,1fr)}
.list-acts{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:8px}
.list-acts .link{min-height:44px}
.link-quiet{color:var(--ink-3)}

/* ---------- modo súper: big targets, the price at this store, a running total ---------- */
.shop-h{position:sticky;top:var(--c-hd-h);z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;
  margin:-16px calc(-1 * var(--gutter)) 0;padding:12px var(--gutter);background:rgba(251,247,239,.96);border-bottom:1px solid var(--line)}
.shop-h p{font:600 14px/1.4 var(--font);color:var(--ink-2)}
.shop-h b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.shop-note{margin-top:12px}
.shop-list{display:grid;gap:10px;margin-top:14px}
.shop-item{display:grid;grid-template-columns:44px 52px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:72px;padding:10px 14px 10px 10px;cursor:pointer;
  transition:background-color var(--t-fast) ease}
.shop-item input{appearance:none;-webkit-appearance:none;display:grid;place-items:center;width:44px;height:44px;margin:0;border-radius:12px;
  border:2px solid var(--line-ink);background:var(--surface);box-shadow:0 2px 0 var(--line-ink);cursor:pointer;
  transition:background-color var(--t-fast) ease,transform var(--t-press) var(--ease-out)}
.shop-item input:checked{background:var(--save-ink);border-color:var(--save-ink);box-shadow:none}
.shop-item input:checked::after{content:"";width:16px;height:9px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:translateY(-2px) rotate(-45deg)}
.shop-item input:active{transform:scale(.92)}
.shop-item input:focus-visible{outline:3px solid var(--focus,#1A52AE);outline-offset:2px}
.shop-item .item-img{grid-row:auto}
.shop-item.done{background:var(--surface-2)}
.shop-item.done .s-t{text-decoration:line-through;color:var(--ink-3)}
.s-t{min-width:0;font:700 15px/1.3 var(--font);color:var(--ink)}
.s-t small{display:block;margin-top:2px;font:500 13px/1.3 var(--font);color:var(--ink-3)}

/* ---------- empty ---------- */
.lz-try{justify-content:center;flex-wrap:wrap;margin:6px 0 0;padding:0}
.empty-acts{display:grid;gap:12px;width:100%;max-width:360px;margin-top:12px}

/* ---------- "buscá y agregá": results under the header, added straight to the list ---------- */
.lz-sr{position:fixed;left:0;right:0;top:var(--c-hd-h);bottom:0;z-index:90;overflow-y:auto;overscroll-behavior:contain;
  background:rgba(251,247,239,.98);border-top:1px solid var(--line);padding:12px 0 calc(var(--c-tab-h) + 24px)}
.lz-sr[hidden]{display:none}
.lz-sr-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.lz-sr-list{display:grid;gap:8px;list-style:none}
.lz-hit{display:grid;grid-template-columns:52px minmax(0,1fr) auto 44px;gap:10px;align-items:center;padding:10px 12px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg)}
.lz-hit .item-img{grid-row:auto}
.lz-hit-t{display:grid;gap:4px;min-width:0}
.lz-hit-t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 14px/1.3 var(--font);color:var(--ink)}
.lz-hit-t .store{font-size:12.5px}
.lz-hit-p{display:grid;justify-items:end;gap:2px}
.lz-hit-p small{font:600 12px/1.2 var(--font);color:var(--ink-3);white-space:nowrap}
.icon-btn.add.is-in{background:var(--save-bg);color:var(--save-ink);border-color:var(--save-ink)}

@media (min-width:900px){
  .lz-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:32px;align-items:start}
  .lz-left{position:sticky;top:calc(var(--c-hd-h) + 16px)}
  .lz-grid .sec:first-child{padding-top:0}
  .lz-sr .wrap{max-width:760px}
}
@media (max-width:359px){.lz-hit{grid-template-columns:44px minmax(0,1fr) 44px}.lz-hit .item-img{width:44px;height:44px}.lz-hit-p{grid-column:2;justify-items:start}}
.r-items li i{font-style:normal;font-weight:500;color:var(--ink-4)}
.lz-band[hidden]{display:none}