/* ==========================================================================
   Mercado: sobres, ficha de set, sellado, radar, lista y simulador
   ========================================================================== */

.market-body { min-height: 100%; }
/* La columna de los paneles no crece con lo de dentro: en el móvil, las filas de chips (que se
   desplazan de lado) ensanchaban el panel más allá de la pantalla */
.market-body .panel { grid-template-columns: minmax(0, 1fr); }
.lbl { color: var(--muted); font-size: var(--fs-xs); font-weight: 650; display: inline-flex; align-items: center; gap: 3px; }
.field > .lbl { justify-self: start; gap: 6px; font-weight: inherit; }
.lbl-pair { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }

/* ---------- Tabla de sobres ---------- */
.ev-table td { padding-top: 11px; padding-bottom: 11px; }
.ev-table td.go { width: 28px; color: var(--muted); padding-left: 0; }
.ev-table td.go .i { width: 16px; height: 16px; transition: transform .2s var(--ease), color .2s; }
.ev-table tbody tr:hover td.go .i { transform: translateX(3px); color: var(--accent-2); }
.ev-table .td-card .t b { max-width: 300px; }
.ev-table em.tagx { font-style: normal; height: 17px; font-size: var(--fs-2xs); vertical-align: 1px; }
.ev-table:not(.anim) .rv, .ev-table:not(.anim) .ratio-track i { animation: none; }

.ratio { display: inline-grid; grid-template-columns: 96px 46px; align-items: center; gap: 8px; }
.ratio-track { position: relative; height: 6px; border-radius: var(--r-xs); background: var(--surface-3); overflow: visible; }
.ratio-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--viz-down); opacity: .85; transform-origin: left; animation: bar-grow .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms + 120ms); }
.ratio.gain .ratio-track i { background: var(--ok); opacity: 1; }
.ratio-even { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text-2); opacity: .55; }
.ratio-v { text-align: right; font-weight: 650; color: var(--text); }

.thumbs { display: inline-flex; padding-left: 10px; }
.thumbs img, .thumbs i { width: 28px; aspect-ratio: 63 / 88; margin-left: -10px; border-radius: var(--r-xs); object-fit: cover; background: var(--surface-3); box-shadow: 0 2px 8px rgba(0, 0, 0, .55), 0 0 0 1.5px var(--bg); transition: transform .2s var(--ease); }
.thumbs:hover img { transform: translateY(-2px); }
.thumbs:hover img:nth-child(2) { transform: translateY(-3px) rotate(2deg); }
.thumbs:hover img:nth-child(3) { transform: translateY(-2px) rotate(4deg); }

.presale-box { margin-top: 4px; }
.presale-box summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 2px; color: var(--text-2); font-weight: 650; font-size: var(--fs-sm); list-style: none; }
.presale-box summary::-webkit-details-marker { display: none; }
.presale-box summary .i { width: 16px; height: 16px; color: var(--accent); }
.presale-box .dtable-wrap { opacity: .8; }

/* ---------- Ficha de set ---------- */
.set-hero { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: center; }
/* Las fotos de producto vienen sobre fondo blanco: se muestran en una tarjeta clara y se funden con ella */
.sh-art {
  position: relative;
  height: 280px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xl);
  background: radial-gradient(120% 90% at 50% 30%, #ffffff, #ecebe7 70%, #dcdad4);
  box-shadow: var(--e-3), inset 0 0 0 1px rgba(255, 255, 255, .6);
  overflow: hidden;
}
.sh-noimg { width: 72px; height: 72px; color: #a3a9b5; z-index: 1; }
.sh-img { width: 94%; max-height: 260px; object-fit: contain; mix-blend-mode: multiply; animation: float 6s ease-in-out infinite; position: relative; z-index: 1; }
.sh-glow { position: absolute; inset: auto 12% 8px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 11, 12, .28), transparent); filter: blur(6px); z-index: 0; }
@keyframes float { 50% { transform: translateY(-6px) rotate(-.5deg); } }
.td-card .box-img, .sealed-row img { background: #fff; border-radius: var(--r-md); padding: 3px; box-shadow: 0 3px 10px rgba(0, 0, 0, .4); filter: none; }
.sh-main { display: grid; gap: 6px; min-width: 0; }
.sh-main h1 { margin: 8px 0 0; font-family: var(--serif); font-size: var(--fs-4xl); font-weight: 450; letter-spacing: -.025em; line-height: 1.04; }
.sh-meta { margin: 2px 0 8px; color: var(--text-2); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sh-conf { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.sh-public { margin-left: 8px; white-space: nowrap; }
.sh-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sh-kpis .kpi { animation: rv-in .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }
.set-controls { justify-content: flex-start; }
.set-controls .grow { flex: 1; }

.hist-plot { min-height: 220px; }
.hist-legend, .fam-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-2); font-size: var(--fs-xs); }
.hist-legend span, .fam-legend span { display: inline-flex; align-items: center; gap: 7px; }
.fam-legend b { color: var(--text); font-variant-numeric: tabular-nums; }

.box-numbers { display: grid; gap: 2px; }
.bn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line-soft); }
.bn-row div { display: grid; gap: 1px; }
.bn-row b { font-size: var(--fs-sm); }
.bn-row span { color: var(--muted); font-size: var(--fs-xs); }
.bn-row strong { font-family: var(--serif); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; font-size: 22px; }
.bn-sep { height: 8px; }
.box-numbers h4 { margin: 4px 0 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 4px; }
.bn-odds { display: grid; gap: 7px; }
.bn-odd { display: grid; grid-template-columns: 64px minmax(0, 1fr) 54px; align-items: center; gap: 10px; font-size: var(--fs-xs); }
.bn-odd span { color: var(--text-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.bn-odd i { height: 6px; border-radius: var(--r-xs); background: var(--surface-3); overflow: hidden; }
.bn-odd i b { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--accent); transform-origin: left; animation: bar-grow .9s var(--ease) both; }
.bn-odd em { font-style: normal; text-align: right; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

.stackbar { display: flex; gap: 2px; border-radius: var(--r-sm); overflow: hidden; }
.stackbar i { display: block; height: 100%; min-width: 3px; transform-origin: left; animation: bar-grow .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); transition: filter .15s; }
.stackbar i:hover { filter: brightness(1.25); }

.tiers-table tr.edited td { background: var(--accent-glow); }
.tier-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.rate-btn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; transition: border-color .15s, background .15s; }
.rate-btn .i { width: 12px; height: 12px; color: var(--muted); }
.rate-btn:hover { border-color: var(--accent); background: var(--surface); }
.rate-btn:hover .i { color: var(--accent-2); }
.pop-actions { display: flex; justify-content: space-between; gap: 8px; }
.form-pop .note { font-size: var(--fs-xs); }

.tier-chip { display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: 600; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.tier-chip.f-sr { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }
.tier-chip.f-aa { background: rgba(25, 158, 112, .18); color: var(--ok-2); }
.tier-chip.f-sec { background: rgba(201, 133, 0, .2); color: #f1c26a; }
.tier-chip.f-sp { background: rgba(213, 81, 129, .2); color: #f29abb; }
.tier-chip.f-top { background: rgba(217, 89, 38, .22); color: #ffab85; }

.cards-table .td-card .tagx { margin-left: 4px; }
.cards-table tr[data-card] { cursor: pointer; }
.watch-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--r-md); background: transparent; color: var(--muted); transition: color .15s, background .15s, transform .15s; }
.watch-btn .i { width: 16px; height: 16px; }
.watch-btn:hover { color: var(--accent-2); background: var(--surface-3); }
.watch-btn.on { color: var(--accent); }
.watch-btn.on .i { fill: var(--accent); }
.watch-btn.pop { animation: star-pop .4s var(--ease); }
@keyframes star-pop { 40% { transform: scale(1.35) rotate(-12deg); } }

.sealed-list { display: grid; gap: 6px; }
/* El producto de un set puede ser muy largo: con su propio scroll, sin un gran hueco al lado */
@media (min-width: 901px) {
  .set-page .sealed-list { max-height: 520px; overflow-y: auto; padding-right: 6px; }
}
.sealed-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); color: inherit; text-decoration: none; transition: border-color .15s, background .15s, transform .15s var(--ease); }
.sealed-row:hover { border-color: var(--line-3); background: var(--surface-2); transform: translateX(2px); }
.sealed-row img, .sealed-row .ph { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
/* Sin foto, el hueco se ve (si no, el nombre parecía descolocado) */
.sealed-row .ph { border-radius: var(--r-md); background: var(--surface-3); }
.sr-t { display: grid; min-width: 0; }
.sr-t b { font-size: var(--fs-sm); }
.sr-t span { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-p { display: grid; text-align: right; }
.sr-p b { font-family: var(--serif); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; font-size: var(--fs-xl); }
.sr-p small { color: var(--muted); font-size: var(--fs-xs); }

.hist-sum { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--muted); font-size: var(--fs-xs); }
.hist-sum b { font-weight: 700; }
.sources-panel a { color: var(--accent-2); }

/* ---------- Gráficos ---------- */
.ck { position: relative; }
.ck-svg .ck-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ck-first .ck-svg .ck-line.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line 1.2s var(--ease) forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.ck-svg .ck-area { opacity: .1; }
.ck-first .ck-svg .ck-area { animation: rv-in .9s var(--ease) both; }
.ck-svg .ck-ref { stroke-width: 1.5; stroke-dasharray: 3 4; }
.ck-svg .ck-base { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; }
.hist-svg .hb { transform-box: fill-box; transform-origin: bottom; transition: filter .12s; }
.ck-first .hist-svg .hb { animation: hb-grow .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 14ms); }
.hist-svg .hb.loss { fill: var(--viz-quiet); }
.hist-svg .hb.gain { fill: var(--ok); }
.hist-svg .hb.over { opacity: .75; }
.hist-svg .hb.hot { filter: brightness(1.35); }
@keyframes hb-grow { from { transform: scaleY(0); } }
.hist-svg .hm { stroke-width: 1.5; }
.hist-svg .hm.cost { stroke: var(--accent-2); stroke-dasharray: 4 3; }
.hist-svg .hm.median { stroke: var(--text); }
.hist-svg .hm.mean { stroke: var(--muted); stroke-dasharray: 2 3; }
.hist-svg .hm-l { font-size: var(--fs-xs); }
.hist-svg .hm-l.cost { fill: var(--accent-2); }
.hist-svg .hm-l.median { fill: var(--text); }
.hist-svg .hm-l.mean { fill: var(--muted); }

/* ---------- Cómo se calcula ---------- */
.method-doc { display: grid; gap: 10px; font-size: var(--fs-md); line-height: 1.65; color: var(--text-2); }
.method-doc h3 { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-family: var(--serif); font-size: var(--fs-xl); font-weight: 500; color: var(--text); }
.method-doc h3:first-child { margin-top: 0; }
.method-doc h3 .i { color: var(--accent-2); }
.method-doc p, .method-doc ul { margin: 0; }
.method-doc ul { padding-left: 20px; display: grid; gap: 6px; }
.method-doc b { color: var(--text); }
.formula { padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-sm); color: var(--accent-2); }

@media (max-width: 1100px) {
  .sh-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .set-hero { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sh-art { height: 170px; }
  .sh-img { max-height: 170px; width: auto; }
  .sh-main h1 { font-size: 32px; }
  .sh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La tabla de sobres pasa a tarjetas */
  .ev-table thead { display: none; }
  .ev-table, .ev-table tbody { display: block; }
  .ev-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 14px; border-bottom: 1px solid var(--line); }
  .ev-table td { display: grid; gap: 3px; padding: 0; border: 0; text-align: left; white-space: normal; }
  .ev-table td::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-2xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
  .ev-table td.c-set { grid-column: 1 / -1; }
  .ev-table td.c-set::before, .ev-table td.go { display: none; }
  .ev-table .ratio { grid-template-columns: minmax(0, 1fr) 44px; }
  .dtable-wrap { margin: 0 -4px; }
}

/* ---------- Sellado ---------- */
a.kpi { color: inherit; text-decoration: none; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.pcard {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--hairline-top);
  transition: border-color .2s, transform .25s var(--ease), box-shadow .25s;
}
.pcard:hover { border-color: var(--line-3); transform: translateY(-2px); box-shadow: var(--e-2); }
.pcard-top { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.pimg { width: 74px; height: 74px; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 35%, #fff, #e8e6e1); display: grid; place-items: center; overflow: hidden; box-shadow: 0 8px 18px rgba(0, 0, 0, .4); }
.pimg img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s var(--ease); }
.pcard:hover .pimg img { transform: scale(1.08) rotate(-2deg); }
.pt { display: grid; gap: 2px; min-width: 0; }
.pk { font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--accent-2); }
.pk em { font-style: normal; color: var(--text-2); }
.pt b { font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd { color: var(--muted); font-size: var(--fs-xs); }
.pprice { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pprice > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pprice b { font-family: var(--serif); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; font-size: 32px; font-weight: 450; letter-spacing: -.02em; }
.pprice small { color: var(--muted); font-size: var(--fs-xs); }
.chg { display: inline-flex; align-items: center; height: 21px; padding: 0 6px; border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: 600; background: var(--surface-3); color: var(--text-2); font-variant-numeric: tabular-nums; }
.chg.up { background: var(--ok-soft); }
.chg.down { background: var(--bad-soft); }
.pspark { min-width: 120px; height: 36px; display: grid; place-items: center end; }
.spark.draw path { stroke: var(--viz-1); stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line 1.1s var(--ease) forwards; }
.spark.draw.neg path { stroke: var(--viz-down); }
.skel-line { display: block; width: 110px; height: 10px; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skel-dot { display: inline-block; width: 36px; height: 12px; border-radius: var(--r-sm); background: var(--surface-3); animation: shimmer 1.3s linear infinite; }
.pm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 11px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.pm > div { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.pm span { color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; white-space: nowrap; }
.pm b, .pm .chg { white-space: nowrap; }
.kpi-s .calc { display: inline-flex; align-items: center; gap: 6px; }
.kpi-s .calc .i { width: 13px; height: 13px; }
.pm b { font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.pm .chg { height: 20px; font-size: var(--fs-xs); }
.pc-foot { display: flex; align-items: center; gap: 8px; }
.pc-foot .grow { flex: 1; }
.pcard-actions { display: flex; align-items: center; gap: 12px; }
.pcard-actions .link-btn { font-size: var(--fs-sm); margin-left: auto; }
.cmp-check { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--text-2); cursor: pointer; }
.cmp-check input, .dtable input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.cmp-panel { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.sealed-chart { min-height: 300px; }
.sig-rules { display: grid; gap: 8px; }
.sig-rule { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 10px; border-radius: var(--r-md); border: 1px solid transparent; opacity: .7; }
.sig-rule p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.sig-rule.on { opacity: 1; border-color: var(--line-2); background: var(--surface); }
@media (max-width: 900px) {
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .sig-rule { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ---------- Radar ---------- */
.radar-table td { padding-top: 8px; padding-bottom: 8px; }
/* Muchas columnas que no se parten: sin un ancho mínimo, la de la carta se quedaba en «Co…» */
@media (min-width: 901px) {
  .radar-table th, .radar-table td { padding-inline: 8px; }
  .radar-table .td-card { min-width: 230px; }
  .radar-table .td-card .t b { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
.radar-table tr[data-card] { cursor: pointer; }
.radar-table .td-card .tagx { margin-left: 6px; }
.set-link { color: var(--text-2); text-decoration: none; }
.set-link:hover { color: var(--accent-2); text-decoration: underline; }
.score { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; }
.score svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.score .sc-track { fill: none; stroke: var(--surface-4); stroke-width: 3; }
.score .sc-val { fill: none; stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .6s var(--ease); }
.score b { font-family: var(--serif); font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.mom { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; }
.mom .i { width: 14px; height: 14px; }
.mom.up { color: var(--ok); }
.mom.down { color: var(--bad); }
.num-in { width: 76px; height: 30px; display: inline-block; text-align: right; }
.input.sm { height: 30px; font-size: var(--fs-sm); }
#radar-plot { min-height: 300px; }
.sc-svg .sc-dot { opacity: .62; stroke: rgba(11, 11, 12, .7); stroke-width: 1; transition: opacity .15s; }
.sc-svg .sc-dot.hl { opacity: 1; stroke: #fff; stroke-width: 1.5; }
.sc-svg .sc-fit { stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .75; }
.sc-svg .sc-ring { fill: none; stroke-width: 2.5; }
.ck-first .sc-svg .sc-dot { animation: dot-in .5s var(--ease) both; }
@keyframes dot-in { from { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; } }

/* ---------- Mi lista ---------- */
.wl-list { display: grid; gap: 8px; }
.wl-row { display: grid; grid-template-columns: 52px minmax(0, 1.4fr) 120px 150px minmax(0, 1fr) 110px auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.wl-row:hover { border-color: var(--line-2); }
.wl-row.hit { border-color: color-mix(in srgb, var(--ok) 50%, transparent); box-shadow: inset 2px 0 0 var(--ok); }
.wl-img { width: 52px; display: grid; place-items: center; }
.wl-img img { width: 46px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: var(--r-xs); box-shadow: 0 4px 10px rgba(0, 0, 0, .45); }
.wl-img.k-sealed img { width: 52px; aspect-ratio: 1; object-fit: contain; background: #fff; padding: 3px; border-radius: var(--r-md); }
.wl-t { display: grid; gap: 1px; min-width: 0; }
.wl-t b { font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-t span { color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-t small { color: var(--muted); font-size: var(--fs-xs); }
.wl-price { display: grid; gap: 1px; }
.wl-price span, .wl-target > span { color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: var(--label-track); text-transform: uppercase; display: flex; align-items: center; gap: 3px; }
.wl-price b { font-family: var(--serif); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; font-size: 22px; }
.wl-price small { font-size: var(--fs-xs); font-weight: 650; }
.wl-target { display: grid; gap: 4px; }
.wl-target .input { height: 34px; }
.wl-status { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.wl-status small { color: var(--muted); font-size: var(--fs-xs); }
.wl-hit { animation: hit-pulse 1.8s ease-in-out infinite; }
@keyframes hit-pulse { 50% { box-shadow: 0 0 0 4px var(--ok-soft); } }
.wl-spark { display: grid; place-items: center; }
.wl-actions { display: flex; align-items: center; gap: 4px; }
@media (max-width: 1100px) {
  .wl-row { grid-template-columns: 52px minmax(0, 1fr) 120px 140px; }
  .wl-status, .wl-spark { display: none; }
  .wl-actions { grid-column: 2 / -1; }
}
@media (max-width: 700px) {
  .wl-row { grid-template-columns: 46px minmax(0, 1fr); }
  .wl-price, .wl-target, .wl-actions { grid-column: 2; }
}

/* ---------- Simulador ---------- */
.sim-sets { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.sim-set { flex: none; width: 116px; display: grid; justify-items: center; gap: 5px; padding: 10px 8px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); color: inherit; scroll-snap-align: center; transition: border-color .15s, transform .18s var(--ease), background .15s; }
.sim-set:hover { border-color: var(--line-2); transform: translateY(-2px); }
.sim-set.on { border-color: var(--accent-line); background: var(--accent-soft); }
.ss-img { width: 76px; height: 76px; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 35%, #fff, #e8e6e1); display: grid; place-items: center; overflow: hidden; }
.ss-img img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.sim-set b { font-size: var(--fs-sm); font-weight: 600; }
.sim-set small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.25; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sim-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.sim-left { padding: 0; overflow: hidden; }
.sim-stage { display: grid; }
.sim-table {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: 26px 20px 18px;
  background:
    radial-gradient(600px 300px at 50% 40%, rgba(255, 255, 255, .045), transparent 70%),
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 6px),
    var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.sim-table.flash::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 236, 170, .35), transparent 65%); animation: sim-flash .7s ease-out forwards; pointer-events: none; }
@keyframes sim-flash { from { opacity: 1; } to { opacity: 0; } }
.sim-pack { grid-area: 1 / 1; position: relative; width: 190px; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .6)); animation: pack-float 4s ease-in-out infinite; transition: opacity .3s, transform .4s var(--ease); }
.sim-pack img { display: block; width: 100%; border-radius: var(--r-md); }
.sim-pack-ph { display: grid; place-items: center; width: 190px; height: 300px; border-radius: var(--r-md); background: linear-gradient(160deg, var(--surface-4), var(--bg)); font-family: var(--serif); font-size: var(--fs-2xl); color: var(--accent-2); }
.sim-pack-shine { position: absolute; inset: 0; border-radius: var(--r-md); background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); background-size: 250% 100%; animation: shine 3.2s ease-in-out infinite; mix-blend-mode: overlay; pointer-events: none; }
@keyframes shine { 0%, 40% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
@keyframes pack-float { 50% { transform: translateY(-8px) rotate(-1deg); } }
.sim-pack.shake { animation: pack-shake .42s linear; }
@keyframes pack-shake { 20% { transform: translateX(-6px) rotate(-3deg); } 40% { transform: translateX(6px) rotate(3deg); } 60% { transform: translateX(-4px) rotate(-2deg) scale(1.04); } 80% { transform: translateX(4px) rotate(2deg) scale(1.06); } }
.sim-pack.tear { animation: pack-tear .38s ease-in forwards; }
@keyframes pack-tear { to { transform: translateY(-40px) scale(1.15) rotate(6deg); opacity: 0; filter: blur(2px) brightness(1.6); } }
.sim-pack.gone { opacity: 0; transform: scale(.8); pointer-events: none; animation: none; }
.sim-cards { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(6, minmax(0, 92px)); gap: 30px 12px; justify-content: center; perspective: 1100px; z-index: 2; }
.sim-card { position: relative; width: 100%; aspect-ratio: 63 / 88; animation: deal .45s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes deal { from { opacity: 0; transform: translateY(-60px) scale(.6) rotate(calc(var(--i) * 7deg - 30deg)); } }
.sc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, .9, .3, 1.15); }
.sim-card.flip .sc-inner { transform: rotateY(180deg); }
.sc-back, .sc-front { position: absolute; inset: 0; border-radius: var(--r-sm); backface-visibility: hidden; overflow: hidden; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
.sc-back { background: #24215b; }
.sc-back img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-front { transform: rotateY(180deg); background: var(--surface-3); }
.sc-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-name { display: grid; place-items: center; height: 100%; padding: 6px; font-size: var(--fs-xs); text-align: center; color: var(--text-2); }
.sim-card.suspense { animation: suspense .45s ease-in-out infinite; }
.sim-card.suspense .sc-back { box-shadow: 0 0 0 2px rgba(255, 255, 255, .4), 0 0 26px 6px rgba(255, 230, 150, .55); }
@keyframes suspense { 25% { transform: translateY(-4px) rotate(-1.5deg); } 75% { transform: translateY(-4px) rotate(1.5deg); } }
.sim-card.hit { z-index: 3; }
.sim-card.hit .sc-front { box-shadow: 0 0 0 2px var(--glow), 0 0 28px 6px color-mix(in srgb, var(--glow) 55%, transparent), 0 10px 24px rgba(0, 0, 0, .6); }
.sim-card.hit .sc-inner { animation: hit-pop .6s var(--ease) .25s; }
@keyframes hit-pop { 50% { transform: rotateY(180deg) scale(1.12); } }
.sc-price { position: absolute; left: 50%; bottom: -24px; transform: translate(-50%, 4px); padding: 2px 7px; border-radius: var(--r-xs); background: rgba(11, 11, 12, .9); border: 1px solid var(--line-2); font-size: var(--fs-xs); font-weight: 650; white-space: nowrap; opacity: 0; transition: opacity .25s .25s, transform .25s .25s; font-variant-numeric: tabular-nums; }
.sc-price.show { opacity: 1; transform: translate(-50%, 0); }
.sim-card.hit .sc-price { border-color: var(--glow); color: #fff; }
/* Las chispas son <i>: las minigráficas (svg.spark, price-chart.js) no son esto */
i.spark { position: absolute; z-index: 4; width: 7px; height: 7px; margin: -3px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: spark .9s cubic-bezier(.2, .7, .3, 1) forwards; pointer-events: none; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.sim-hint { grid-area: 1 / 1; align-self: end; margin-bottom: -6px; color: var(--text-2); font-size: var(--fs-sm); text-align: center; z-index: 3; }
.sim-hint b { color: var(--accent-2); }
.sim-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; }
.sim-controls .grow { flex: 1; }
.sim-boxbar { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; padding: 0 18px 4px; }
.sim-boxbar i { height: 8px; border-radius: var(--r-xs); background: var(--surface-3); transition: background .3s; }
.sim-boxbar i.done { background: var(--accent); }
.sim-boxbar i.next { background: var(--surface-4); box-shadow: 0 0 0 1px var(--accent); }
.sim-stage > .note { padding: 6px 18px 16px; }
.sim-side { position: sticky; top: 64px; gap: 14px; }
.sim-ledger { display: grid; gap: 8px; }
.sl-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-md); color: var(--text-2); }
.sl-row b { font-family: var(--serif); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; font-size: 22px; color: var(--text); }
.sl-bal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); }
.sl-bal span { color: var(--text-2); font-weight: 650; }
.sl-bal b { font-family: var(--serif); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; font-size: 32px; font-weight: 450; letter-spacing: -.02em; }
.sl-bal em { grid-column: 2; text-align: right; font-style: normal; font-weight: 700; font-size: var(--fs-sm); }
.sl-bal.up { background: var(--ok-soft); }
.sl-bal.up b, .sl-bal.up em { color: var(--ok); }
.sl-bal.down { background: var(--bad-soft); }
.sl-bal.down b, .sl-bal.down em { color: var(--bad); }
.sl-meta { color: var(--muted); font-size: var(--fs-xs); text-align: right; }
.sl-sub { margin-top: -6px; color: var(--muted); font-size: var(--fs-xs); text-align: right; }
.sim-h4 { margin: 4px 0 0; display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-2); }
.sim-h4 .i { width: 15px; height: 15px; color: var(--accent-2); }
.sim-hits { display: grid; gap: 6px; max-height: 420px; overflow: auto; }
.sim-hit { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--r-md); border: 1px solid var(--line); border-left: 2px solid var(--k); background: var(--bg-2); color: inherit; text-align: left; animation: basket-in .4s var(--ease); }
.sim-hit:hover { background: var(--surface-2); }
.sim-hit img, .sim-hit .ph { width: 34px; aspect-ratio: 63 / 88; border-radius: var(--r-xs); object-fit: cover; background: var(--surface-3); }
.sim-hit span { display: grid; min-width: 0; }
.sim-hit b { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-hit small { color: var(--muted); font-size: var(--fs-xs); }
.sim-hit em { font-style: normal; font-weight: 650; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.sim-many .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sim-hist { min-height: 220px; }
@media (max-width: 1100px) {
  .sim-main { grid-template-columns: minmax(0, 1fr); }
  .sim-side { position: static; }
}
@media (max-width: 700px) {
  .sim-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 8px; width: 100%; justify-self: stretch; }
  .sim-table { min-height: 380px; padding: 18px 10px; }
  .sim-pack { width: 140px; }
  .sim-boxbar { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sim-many .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Lo que te falta en tus álbumes (Radar y Mi lista) ---------- */
.miss-where, .wl-src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.miss-l, .wl-src-l { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.miss-l .i, .wl-src-l .i { width: 12px; height: 12px; }
.miss-in { display: inline-flex; align-items: center; gap: 5px; height: 22px; max-width: 180px; padding: 0 8px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-xs); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: border-color .15s, color .15s; }
.miss-in:hover { border-color: var(--accent); color: var(--text); }
.miss-in .mv-dot { flex: none; width: 8px; height: 8px; }
.miss-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miss-in b { flex: none; color: var(--text); font-weight: 650; }
.miss-where .tagx, .wl-src .tagx { height: 22px; }
tr.is-missing td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.score.na { width: 38px; height: 38px; border-radius: 50%; border: 2px dashed var(--line-2); }
.score.na b { color: var(--muted); }
.wl-auto { display: inline-grid; place-items: center; width: 30px; height: 30px; color: var(--muted); }
.wl-auto .i { width: 15px; height: 15px; }

/* Casillas "según tus álbumes" */
.show-row { padding-top: 10px; border-top: 1px dashed var(--line); }
.show-row .sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 4px; }
.show-check { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 8px; border-radius: var(--r-sm); border: 1px solid var(--line-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 650; cursor: pointer; user-select: none; transition: color .15s, border-color .15s, background .15s; }
.show-check input { position: absolute; opacity: 0; pointer-events: none; }
.show-check .sc-box { display: grid; place-items: center; width: 16px; height: 16px; border-radius: var(--r-xs); border: 1.5px solid var(--line-2); transition: background .15s, border-color .15s; }
.show-check .sc-box .i { width: 11px; height: 11px; stroke-width: 3; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s var(--ease); color: var(--accent-ink); }
.show-check.on { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.show-check.on .sc-box { background: var(--accent); border-color: var(--accent); }
.show-check.on .sc-box .i { opacity: 1; transform: none; }
.show-check:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.show-check small { color: var(--muted); font-weight: 700; }
.pill.sm { height: 26px; padding: 0 10px; font-size: var(--fs-xs); }
.pill .mv-dot { width: 9px; height: 9px; }
.wl-sug { justify-self: start; font-size: var(--fs-xs); margin-top: 3px; }

/* ---------- Navegación: «Atrás», migas y lo último que has mirado ---------- */
.mk-topnav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-height: 30px; }
.mk-back {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 30px; padding: 0 11px 0 6px;
  border-radius: var(--r-md); border: 1px solid var(--line-2); background: transparent; color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.mk-back .i { flex: none; width: 16px; height: 16px; color: var(--accent-2); transition: transform var(--dur-2) var(--ease); }
.mk-back:hover { border-color: var(--line-3); background: var(--surface-2); color: var(--text); }
.mk-back:hover .i { transform: translateX(-2px); }
.mk-back-to { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-weight: 560; }
.mk-back-to::before { content: "·"; margin-right: 6px; color: var(--faint); }

/* Lo último que has abierto, marcado en su lista al volver */
.seen-tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-xs); background: var(--accent-soft); color: var(--accent-2); font-size: var(--fs-2xs); font-weight: 650; letter-spacing: .02em; white-space: nowrap; }
.seen-tag .i { width: 12px; height: 12px; }
/* En la tarjeta, sobre el filete de arriba (no tapa nada de dentro) */
.pcard .seen-tag { position: absolute; top: -10px; right: 14px; z-index: 1; border: 1px solid var(--accent-line); background: var(--surface-2); box-shadow: var(--e-1); }
.pcard.is-seen { border-color: var(--accent-line); box-shadow: var(--hairline-top), 0 0 0 1px var(--accent-line), 0 10px 30px var(--accent-glow); }
.dtable tr.is-seen td { background: var(--accent-glow); }
.dtable tr.is-seen td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.td-card .seen-tag { flex: none; justify-self: start; }
.row-link { display: block; min-width: 0; color: inherit; text-decoration: none; }
.row-link b { display: block; }
.row-link:hover b { color: var(--accent-2); }

/* La tira de productos del set en la ficha: el que estás viendo, en su sitio y marcado */
.sealed-row.on, .sealed-row.is-seen { border-color: var(--accent-line); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.sealed-row.on { cursor: default; }
.sealed-row.on:hover { transform: none; }
.sr-t .sr-now { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: var(--r-xs); background: var(--accent); color: var(--accent-ink); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; vertical-align: 1px; }

/* ---------- Buscadores (Sellado y simulador) ---------- */
.mk-find { gap: 10px 14px; }
.mk-search { flex: 1 1 320px; max-width: 460px; }
.mk-search .input { height: 38px; padding-right: 64px; font-size: var(--fs-md); }
.mk-search .input::-webkit-search-cancel-button { display: none; }
.mk-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; color: var(--muted); pointer-events: none; transition: opacity var(--dur-1); }
.mk-search:focus-within .mk-kbd, .mk-search:has(.mk-clear:not([hidden])) .mk-kbd { opacity: 0; }
.mk-clear { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); }
.mk-clear[hidden] { display: none; }
.mk-search .mk-clear .i { position: static; transform: none; width: 15px; height: 15px; color: currentColor; }
.mk-clear:hover { background: var(--surface-3); color: var(--text); }
.mk-more { display: flex; margin: 14px auto 2px; }
.mk-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-empty .empty-state { padding-block: 34px; }
.mk-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Simulador: buscador de expansiones (combobox) y la elegida en la tira */
.sim-find { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: -4px; }
.sim-find .mk-search .input { padding-right: 40px; }
.sim-now { color: var(--text-2); }
.sim-options {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(460px, 100%); max-height: 360px; overflow: auto;
  margin: 0; padding: 6px; list-style: none; border-radius: var(--r-lg); border: 1px solid var(--line-2);
  background: var(--overlay); box-shadow: var(--e-2); backdrop-filter: blur(14px);
}
.sim-opt { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-md); cursor: pointer; }
.sim-opt .ss-img { width: 40px; height: 40px; border-radius: var(--r-md); }
.sim-opt:hover { background: var(--surface-3); }
.sim-opt.active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.so-t { display: grid; min-width: 0; }
.so-t b { font-size: var(--fs-sm); font-weight: 650; }
.so-t span { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-opt small { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.so-on { display: grid; place-items: center; color: var(--accent-2); }
.so-on .i { width: 15px; height: 15px; }
.sim-opt-none { padding: 14px 10px; color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.sim-set { position: relative; }
.sim-set.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line), 0 8px 22px var(--accent-glow); }
.sim-set.on b { color: var(--accent-2); }
.ss-on { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.ss-on .i { width: 11px; height: 11px; stroke-width: 3; }

@media (max-width: 600px) {
  .mk-topnav:has(.mk-back) .crumbs { display: none; }
  .mk-search { flex-basis: 100%; max-width: none; }
  .mk-kbd { display: none; }
  .sim-find .sim-now { display: none; }
}

/* «Cartas de este set» (market/set-cards.js) */
.setc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.setc-search { flex: 1 1 220px; min-width: 0; }
.setc-tools .select { flex: 0 1 auto; width: auto; max-width: 100%; }
.setc-view button { display: inline-grid; place-items: center; min-width: 38px; }
.setc-view .i { width: 16px; height: 16px; }
.setc-grid { padding: 0; overflow: visible; max-height: none; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.setc-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
.setc-scroll { overflow-x: auto; }
.setc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.setc-table th { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-align: left; white-space: nowrap; }
.setc-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.setc-table tbody tr { cursor: pointer; transition: background .12s; }
.setc-table tbody tr:hover { background: var(--surface-2); }
.setc-table tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.setc-img { width: 44px; }
.setc-img img { display: block; width: 36px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: var(--r-xs); }
.setc-name { min-width: 150px; overflow-wrap: anywhere; }
.setc-name b { font-weight: 560; }
.setc-num { color: var(--text-2); white-space: nowrap; }
.setc-table .setc-price { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.setc-more { display: flex; margin: 16px auto 0; }
@media (max-width: 700px) {
  .setc-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  /* El buscador y la rareza a todo el ancho; debajo, el orden junto a la vista (los dos desplegables a
     medias cortaban el texto) */
  .setc-search, .setc-tools [data-sc-rarity] { flex: 1 1 100%; }
  .setc-tools [data-sc-sort] { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 701px) {
  /* Una zona de buen tamaño, con su propio scroll: lo demás de la página sigue a mano */
  .setc-list { max-height: min(760px, 80vh); overflow-y: auto; padding: 4px 6px 4px 4px; }
}