/* =========================================================
   SHOP · AisinCoins (js/ui/shop.js) y saldo en la cabecera
========================================================= */
/* Moneda AisinCoin (assets/brand/aisin-coin-128.webp) */
.coin{display:block;flex:none;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
/* Icono SHOP del menú: dibujo de línea, como el resto de iconos */
.nav-coin .coin-o{fill:#0a0a0a;stroke:var(--red);stroke-width:2.6}
.nav-coin .coin-i{fill:none;stroke:var(--red-line);stroke-width:1.4}
.nav-coin .coin-h,.nav-coin .coin-a{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nav-coin{opacity:.75}
.nav-coin .coin-o{fill:none}

/* ---------- Cabecera: saldo a la izquierda del carrito (fuera del ancho de la fila de botones) ---------- */
.tl-row{display:flex;align-items:center;gap:8px}
.coin-box{
  position:absolute;right:calc(100% + 8px);top:0;white-space:nowrap;
  display:flex;align-items:center;gap:5px;height:var(--h-md);padding:0 6px 0 7px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-1);color:var(--text);text-decoration:none;transition:border-color .15s,box-shadow .2s;
}
.coin-box .coin{width:24px;height:24px}
.coin-box b{font:700 18px/1 var(--f-cond);letter-spacing:.02em;margin-left:2px;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis}
.coin-box small{font:600 10px/1 var(--f-cond);letter-spacing:.08em;color:var(--muted)}
.coin-plus{margin-left:4px;width:22px;height:22px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--red);color:#fff;font:700 16px/1 var(--f-cond)}
.coin-box:hover,.coin-box:focus-visible{border-color:var(--line-strong);box-shadow:0 0 12px rgba(224,36,36,.25)}
.coin-box.pop .coin{animation:coinPop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes coinPop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-12deg)}100%{transform:scale(1)}}

/* ---------- Página ---------- */
.shop{display:flex;flex-direction:column;gap:20px;margin-bottom:48px}
.shop-tabs{display:flex;align-self:center;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.shop-tabs button{height:var(--h-md);padding:0 28px;font:600 14px/1 var(--f-cond);letter-spacing:.14em;color:var(--muted);background:var(--black);transition:color .15s,background-color .15s}
.shop-tabs button + button{border-left:1px solid var(--line)}
.shop-tabs button:hover{color:var(--text)}
.shop-tabs button.on{color:var(--text);background:var(--red-tint);box-shadow:inset 0 -2px 0 var(--red)}
#shopBody{display:flex;flex-direction:column;gap:16px}

.shop-test{padding:10px 14px;border:1px dashed var(--desire);border-radius:var(--r);color:var(--text-2);font-size:13px}
.shop-test b{color:var(--desire);font:600 13px/1 var(--f-cond);letter-spacing:.12em;margin-right:8px}

.shop-wallet{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-lg)}
.shop-wallet .coin{width:52px;height:52px}
.shop-wallet > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.shop-wallet small{font:600 11px/1 var(--f-cond);letter-spacing:var(--ls-label);color:var(--muted)}
.shop-wallet b{font:400 28px/1 var(--f-display);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.shop-wallet b i{font:600 13px/1 var(--f-cond);font-style:normal;letter-spacing:.1em;color:var(--red)}
.shop-wallet b.shop-guest{font:500 15px/1.3 var(--f-body);letter-spacing:0;color:var(--text-2)}
.shop-wallet .btn{height:var(--h-sm);padding:0 16px;font-size:13px}

.shop-hist{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-lg);max-height:320px;overflow:auto}
.shop-hist ul{list-style:none;margin:0;padding:0}
.shop-hist li{display:grid;grid-template-columns:1fr auto 80px;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line-soft);font-size:14px}
.shop-hist li:last-child{border-bottom:0}
.shop-hist li span{min-width:0;color:var(--text-2)}
.shop-hist li small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.shop-hist li b{font:700 16px/1 var(--f-cond);font-variant-numeric:tabular-nums}
.shop-hist li b.up{color:#4ade80}.shop-hist li b.down{color:var(--danger)}
.shop-hist li em{font-style:normal;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.shop-hist .shop-note{padding:16px}

/* ---------- Paquetes ---------- */
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.pack{
  position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--surface-1);
  border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .2s,transform .2s,box-shadow .2s;
}
.pack:hover{border-color:var(--red-line);transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.6),0 0 18px rgba(224,36,36,.12)}
.pack.best{border-color:var(--red)}
.pack-flag{position:absolute;top:0;left:0;right:0;z-index:1;padding:6px 0;text-align:center;background:var(--red);color:#fff;font:600 12px/1 var(--f-cond);letter-spacing:.2em}
.pack-art{aspect-ratio:5/3.4;padding-top:20px;border-bottom:1px solid var(--line-soft);background:radial-gradient(120% 90% at 50% 100%,#160707,#050505)}
.pack-coins{position:relative;height:100%}
.pack-coins img{
  position:absolute;left:50%;top:50%;width:54%;max-width:112px;aspect-ratio:1;
  transform:translate(calc(-50% + var(--o) * min(17%, 30px)), -46%) rotate(calc(var(--o) * 9deg));
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.75));transition:transform .3s cubic-bezier(.3,1.4,.5,1)
}
.pack:hover .pack-coins img{transform:translate(calc(-50% + var(--o) * min(21%, 37px)), -52%) rotate(calc(var(--o) * 12deg))}
.pack-amt{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 12px 6px}
.pack-bonus + .pack-buy{margin-top:12px}
.pack-amt .coin{width:34px;height:34px}
.pack-amt b{display:block;font:400 26px/1 var(--f-display);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.pack-amt small{display:block;margin-top:4px;font:600 10px/1 var(--f-cond);letter-spacing:.24em;color:var(--muted)}
.pack-bonus{min-height:20px;margin-top:2px;padding:0 12px;text-align:center;font:600 13px/1.5 var(--f-cond);letter-spacing:.04em;color:var(--text-2)}
.pack-bonus em{font-style:normal;color:var(--desire)}
.pack-buy{
  margin:auto 14px 14px;height:var(--h-md);border-radius:var(--r);background:var(--red);color:#fff;
  font:700 18px/1 var(--f-cond);letter-spacing:.04em;font-variant-numeric:tabular-nums;transition:filter .15s
}
.pack-buy:hover{filter:brightness(1.12)}
.pack-buy:disabled{filter:none;opacity:.6;cursor:default}

/* ---------- Próximamente (CARDS / BUNDLES) ---------- */
.shop-soon{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 16px 32px;text-align:center;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-lg)}
.shop-soon .pack-svg{width:min(320px,80%);height:auto}
.shop-soon-tag{padding:5px 10px;border:1px solid var(--red-line);border-radius:var(--r-sm);color:var(--red);font:600 12px/1 var(--f-cond);letter-spacing:.2em}
.shop-soon h3{font:400 28px/1.1 var(--f-display);letter-spacing:.02em;text-transform:uppercase}
.shop-soon p{max-width:52ch;color:var(--text-2)}

.shop-note{color:var(--muted)}
.shop-fine{color:var(--muted);font-size:12px;text-align:center}

@media (max-width:980px){
  .coin-box{display:none}   /* el saldo se ve en la tienda */
}
@media (max-width:760px){
  .shop-tabs{align-self:stretch}
  .shop-tabs button{flex:1;padding:0 8px;letter-spacing:.08em}
  .packs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pack-amt{flex-direction:column;gap:6px;padding-top:12px}
  .pack-amt b{font-size:22px;text-align:center}
  .pack-amt small{text-align:center}
  .pack-buy{margin:10px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){ .pack:hover{transform:none} }

/* ---------- CARDS: cada set con sus 3 tiers ---------- */
.shop-lead{color:var(--text-2);text-align:center}
.shop-sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:12px}
.shop-set{padding:14px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-lg)}
.shop-set header{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.shop-set header b{font:400 22px/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase}
.shop-set header span{font:600 12px/1 var(--f-cond);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.shop-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.shop-tier{display:flex;flex-direction:column;gap:8px}
.shop-card{position:relative;display:block;aspect-ratio:8/11;overflow:hidden;border-radius:var(--r)}
.shop-card.t-pure{border-color:var(--pure)}.shop-card.t-desire{border-color:var(--desire)}.shop-card.t-forbidden{border-color:var(--forbidden)}
.shop-card .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shop-card .mono{position:absolute;inset:0;display:grid;place-items:center;font:400 28px/1 var(--f-display);color:rgba(255,255,255,.5)}
.shop-card.nsfw .art{filter:blur(10px);transform:scale(1.12)}
.shop-card .badge{display:none}   /* el arte ya lleva el tier */
.shop-add{display:flex;align-items:center;justify-content:center;gap:6px;height:var(--h-sm);border-radius:var(--r);background:var(--red);color:#fff;font:700 15px/1 var(--f-cond);letter-spacing:.03em;font-variant-numeric:tabular-nums;transition:filter .15s}
.shop-add:hover{filter:brightness(1.12)}
.shop-add .coin{width:20px;height:20px}
/* ---------- BUNDLES: set completo ---------- */
.shop-bundles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:12px}
.shop-bundle{display:grid;grid-template-columns:170px 1fr auto;align-items:center;gap:16px;padding:14px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .2s}
.shop-bundle:hover{border-color:var(--red-line)}
.bundle-fan{position:relative;height:120px}
.bundle-fan .shop-card{position:absolute;top:6px;width:72px;box-shadow:0 6px 16px rgba(0,0,0,.6)}
.bundle-fan .shop-card:nth-child(1){left:0;transform:rotate(-8deg)}
.bundle-fan .shop-card:nth-child(2){left:46px;top:0;z-index:1}
.bundle-fan .shop-card:nth-child(3){left:92px;transform:rotate(8deg)}
.bundle-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.bundle-info b{font:400 22px/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase}
.bundle-info span{font:600 12px/1.3 var(--f-cond);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.bundle-info p{font-size:13px;color:var(--text-2)}
.bundle-info s{color:var(--muted)}
.bundle-info em{font-style:normal;color:var(--desire);font:600 13px/1 var(--f-cond);letter-spacing:.06em}
.shop-add.big{height:var(--h-md);padding:0 16px;font-size:18px}
.shop-add.big .coin{width:24px;height:24px}
/* ---------- Pedidos del miembro ---------- */
.shop-orders .ord-id{font:700 14px/1 var(--f-cond);color:var(--text);margin-right:4px}
.ord-st{font:600 12px/1 var(--f-cond)!important;letter-spacing:.08em;text-transform:uppercase}
.ord-st.s-pending{color:var(--desire)}.ord-st.s-processing{color:#60a5fa}.ord-st.s-shipped,.ord-st.s-delivered{color:#4ade80}.ord-st.s-cancelled{color:var(--danger)}
.shop-orders li{grid-template-columns:1fr auto 90px}
/* ---------- Carrito en AC y checkout ---------- */
.cart-price i,.subtotal b i{font:600 12px/1 var(--f-cond);font-style:normal;letter-spacing:.1em;color:var(--red)}
.cart-bal{margin:-8px 0 14px;text-align:right;font-size:13px;color:var(--muted)}
.cart-bal b{color:var(--text)}
.cart-bal:empty{display:none}
.badge.t-set{background:var(--complete);color:#fff}
.cart-thumb.cart-set{position:relative;border:0;background:none}
.cart-thumb.cart-set > span{position:absolute;top:0;width:70%;aspect-ratio:8/11;overflow:hidden;border-radius:var(--r-sm)}
.cart-thumb.cart-set > span:nth-child(1){left:0}.cart-thumb.cart-set > span:nth-child(2){left:15%;z-index:1}.cart-thumb.cart-set > span:nth-child(3){left:30%;z-index:2}
.cart-thumb.cart-set .art{width:100%;height:100%;object-fit:cover}
.cart-thumb.cart-set .nsfw .art{filter:blur(4px)}
.ship{display:flex;flex-direction:column;gap:12px}
.ship-h{font:600 13px/1 var(--f-cond);letter-spacing:var(--ls-label);color:var(--muted);margin-top:4px}
.ship-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.ship .field{margin:0}
.ship-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.ship-items li{display:flex;justify-content:space-between;gap:12px;color:var(--text-2)}
.ship-items b{font:600 15px/1.2 var(--f-cond);color:var(--text);white-space:nowrap}
.ship-note{font-size:12px;color:var(--muted)}
.ship-short{padding:10px 12px;border:1px solid var(--red-line);border-radius:var(--r);background:var(--red-tint);font-size:13px;color:var(--text-2)}
.ship-short b{color:var(--text)}
@media (max-width:760px){
  .shop-bundle{grid-template-columns:120px 1fr;gap:12px}
  .shop-bundle .shop-add.big{grid-column:1/-1}
  .bundle-fan{height:96px}.bundle-fan .shop-card{width:56px}
  .bundle-fan .shop-card:nth-child(2){left:32px}.bundle-fan .shop-card:nth-child(3){left:64px}
  .shop-add{font-size:13px;gap:4px}
}