/* ================================================================
   TCGo — Componentes compartidos v1.0 (usa design-tokens.css)
   Todas las páginas del prototipo importan este archivo.
   ================================================================ */
*{box-sizing:border-box;margin:0;padding:0}
/* fondo con naipes sutiles (mismo patrón del home — pedido Omar 07-12) */
body{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23F2F5FA' stroke-opacity='.030' stroke-width='1.4'%3E%3Crect x='20' y='24' width='34' height='46' rx='5' transform='rotate(-8 37 47)'/%3E%3Crect x='100' y='96' width='34' height='46' rx='5' transform='rotate(10 117 119)'/%3E%3C/g%3E%3Cg fill='%23F2F5FA' fill-opacity='.030'%3E%3Ccircle cx='118' cy='42' r='3.4'/%3E%3Ccircle cx='42' cy='124' r='3.4'/%3E%3C/g%3E%3C/svg%3E"),
  radial-gradient(1100px 520px at 78% -10%, rgba(189,160,96,.13), transparent 62%),
  radial-gradient(760px 420px at 2% 40%, rgba(110,135,184,.08), transparent 55%),
  var(--bg-canvas);
  color:var(--text-1);font-family:var(--font-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;position:relative;min-height:100vh;display:flex;flex-direction:column}
[data-theme="light"] body{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%230F2037' stroke-opacity='.045' stroke-width='1.4'%3E%3Crect x='20' y='24' width='34' height='46' rx='5' transform='rotate(-8 37 47)'/%3E%3Crect x='100' y='96' width='34' height='46' rx='5' transform='rotate(10 117 119)'/%3E%3C/g%3E%3Cg fill='%230F2037' fill-opacity='.045'%3E%3Ccircle cx='118' cy='42' r='3.4'/%3E%3Ccircle cx='42' cy='124' r='3.4'/%3E%3C/g%3E%3C/svg%3E"),
  radial-gradient(1100px 520px at 78% -10%, rgba(189,160,96,.10), transparent 62%),
  radial-gradient(760px 420px at 2% 40%, rgba(110,135,184,.06), transparent 55%),
  var(--bg-canvas)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(600px 380px at 12% -5%, rgba(189,160,96,.06), transparent 65%),
             radial-gradient(520px 340px at 88% 8%, rgba(91,141,217,.05), transparent 65%),
             radial-gradient(700px 500px at 50% 110%, rgba(29,48,85,.35), transparent 60%)}
header,.page,footer{position:relative;z-index:1}
/* sticky footer: el pie se pega al fondo aunque el contenido sea corto (body = flex column, arriba) */
body>footer,body>.ark-foot{margin-top:auto;flex-shrink:0}
/* en flex-column, un hijo con margin:0 auto se encoge a su contenido; forzar ancho completo
   para que .page/main mantengan su layout de siempre (max-width + centrado) */
body>.page,body>main,body>header{width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:50;background:var(--bg-header);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
/* SIN PARPADEO (Omar, 25-sep-2026): cada pagina trae una cabecera vieja en su HTML
   ("Vender" en el menu, "+ Subastar carta") y tcgo.js la corrige al cargar; mientras,
   se veia la vieja. Ahora el contenido espera a tcgo.js (clase hdr-listo en <html>).
   Si tcgo.js no llegara, a los 1,5 s se muestra igual: nunca queda vacia. */
html:not(.hdr-listo) header .header-in{visibility:hidden;animation:hdrSalida 0s linear 1.5s forwards}
@keyframes hdrSalida{to{visibility:visible}}
.header-in{max-width:1360px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:24px}
/* wordmark sigue al EMBLEMA (logo Gemini): "Ark" dorado + "Cards" tinta */
.wordmark{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.5px;display:flex;align-items:baseline;color:var(--accent)}
.wordmark .o{color:var(--text-1)}
/* emblema del navbar: SIN fondo (pedido Omar), protagonista, variante por tema */
.wordmark .bm{width:38px;height:38px;margin-right:10px;align-self:center;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.wordmark .bm-d{display:none}
[data-theme="light"] .wordmark .bm-n{display:none}
[data-theme="light"] .wordmark .bm-d{display:block}
.wordmark .pe{font-size:9.5px;font-weight:600;color:var(--text-3);letter-spacing:.12em;margin-left:6px}
.wordmark .pips{display:inline-flex;gap:3px;margin-left:8px;align-self:center}
.wordmark .pips i{width:5px;height:5px;border-radius:99px;display:block;opacity:.75}
nav{display:flex;gap:4px}
.nav-tab{display:inline-block;padding:7px 13px;border-radius:var(--r-sm);border:none;background:transparent;color:var(--text-2);font-size:13.5px;font-weight:500;transition:all .15s}
.nav-tab:hover{color:var(--text-1);background:var(--bg-surface-2)}
.nav-tab.active{color:var(--text-1);background:var(--bg-surface-3)}
.nav-tab .n{display:inline-block;min-width:16px;padding:0 4px;margin-left:6px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:600;border-radius:99px;text-align:center;line-height:16px}
.search{flex:1 1 150px;min-width:0;max-width:400px;display:flex;align-items:center;gap:8px;background:var(--bg-surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:8px 12px;color:var(--text-3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search input{min-width:0;flex:1}
.header-in nav{display:flex;flex:none;align-items:center}
.header-in .wordmark{flex:none}
.search kbd{margin-left:auto;font-family:var(--font-mono);font-size:10px;background:var(--bg-surface-3);border:1px solid var(--border-strong);border-radius:4px;padding:1px 5px;color:var(--text-3)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none;flex-wrap:nowrap;white-space:nowrap}
/* 6-oct: el botón lleva icono (Escanear) */
.btn-sell svg{width:16px;height:16px;flex:none}
.btn-sell{align-items:center;gap:7px;background:var(--btn-bg);color:var(--btn-fg);border:none;border-radius:var(--r-md);padding:8px 16px;font-size:13.5px;font-weight:600;transition:background .15s;box-shadow:0 0 20px -6px rgba(189,160,96,.45);display:inline-flex}
.btn-sell:hover{background:var(--accent-hover)}
.avatar{width:32px;height:32px;border-radius:99px;background:linear-gradient(135deg,var(--accent),#4A90D9);display:grid;place-items:center;font-size:12px;font-weight:700}
.avatar.guest{background:var(--bg-surface-2);border:1px solid var(--border-strong);color:var(--text-3)}
.avatar.guest svg{width:18px;height:18px}
/* toggle día/noche (lo inyecta tcgo.js en .header-right) */
.theme-toggle{flex:none}
.theme-toggle:hover{transform:rotate(18deg) scale(1.08)}
/* ===== Header acciones — Variante 1 (iconos ghost · propuesta Alejandro 07-27) =====
   notificaciones · carrito · cuenta · tema, todos con el mismo trazo SVG. */
.hicon{position:relative;width:38px;height:38px;border-radius:99px;display:grid;place-items:center;color:var(--text-2);background:transparent;border:1px solid transparent;transition:background .15s,color .15s,border-color .15s;flex:none;cursor:pointer}
.hicon:hover{color:var(--text-1);background:var(--bg-surface-2)}
.hicon svg{width:20px;height:20px}
.hicon .hb{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--accent);color:#1A1305;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:var(--font-body);border:2px solid var(--bg-header)}
.hdr-div{width:1px;height:26px;background:var(--border-strong);flex:none}
/* menú Usuario (reemplaza al avatar suelto — decisión Omar+Alejandro 22-jul):
   Mi Arca · Perfil y cuenta · Mis pedidos. Mismo lenguaje que .fdrop/.hgsel. */
.usr-menu{position:relative;display:inline-flex;align-items:center;flex:none}
.usr-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0;margin:0;cursor:pointer;border-radius:99px;transition:box-shadow .15s}
.usr-btn:hover{box-shadow:0 0 0 2px var(--accent-dim)}
.usr-btn .avatar{flex:none}
.usr-chev{width:11px;height:11px;flex:none;color:var(--text-3);transition:transform .2s ease,color .15s}
.usr-menu.on .usr-chev{transform:rotate(180deg);color:var(--text-2)}
.usr-pop{position:absolute;top:calc(100% + 10px);right:0;z-index:60;display:none;flex-direction:column;gap:1px;min-width:212px;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:12px;padding:6px;box-shadow:var(--sh-modal)}
.usr-menu.on .usr-pop{display:flex}
.usr-pop a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--text-1);font-size:13px;font-weight:500;text-decoration:none;transition:background .15s,color .15s}
.usr-pop a:hover{background:var(--bg-surface-2);color:var(--accent-hover)}
.usr-pop a svg{width:17px;height:17px;flex:none;color:var(--text-2);transition:color .15s}
.usr-pop a:hover svg{color:var(--accent-hover)}
.usr-div{height:1px;background:var(--border);margin:5px 6px}
.usr-pop a .usr-sub{margin-left:5px;font-size:12px;font-weight:400;color:var(--text-3)}
.usr-pop a:hover .usr-sub{color:var(--text-2)}
/* Invitado (Card Kingdom / TCGplayer): personita SIEMPRE + "Ingresar" al lado, en el slot de la cuenta */
.usr-login{display:inline-flex;align-items:center;gap:8px;text-decoration:none;flex:none;cursor:pointer;padding:3px 11px 3px 3px;border-radius:99px;transition:box-shadow .15s}
.usr-login:hover{box-shadow:0 0 0 2px var(--accent-dim)}
.usr-login .avatar.guest{width:32px;height:32px}
.usr-login .usr-login-tx{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;transition:color .15s}
.usr-login:hover .usr-login-tx{color:var(--accent-hover)}
.usr-login:hover .avatar.guest{border-color:var(--accent);color:var(--accent-hover)}
.usr-pop a.usr-adm{color:var(--accent-hover);font-weight:600}
.usr-pop a.usr-adm svg{color:var(--accent)}
.usr-pop a.usr-adm:hover{background:var(--accent-dim)}
.usr-pop a.usr-adm:hover svg{color:var(--accent-hover)}
.usr-pop a.usr-out svg{color:var(--text-3)}
.usr-pop a.usr-out:hover{background:var(--danger-dim);color:var(--danger)}
.usr-pop a.usr-out:hover svg{color:var(--danger)}
@media(max-width:760px){
  .usr-pop{right:-4px;min-width:184px}
}

/* ===== VIDA: animaciones de entrada y hover (pedido Omar 2026-07-10) ===== */
@keyframes ac-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.grid>.card,.grid>article,.panel{animation:ac-rise .45s ease-out backwards}
.grid>*:nth-child(1){animation-delay:.03s}.grid>*:nth-child(2){animation-delay:.08s}
.grid>*:nth-child(3){animation-delay:.13s}.grid>*:nth-child(4){animation-delay:.18s}
.grid>*:nth-child(5){animation-delay:.23s}.grid>*:nth-child(6){animation-delay:.28s}
.grid>*:nth-child(7){animation-delay:.33s}.grid>*:nth-child(8){animation-delay:.38s}
.grid>.card{transition:transform .25s ease, box-shadow .25s ease}
.grid>.card:hover{transform:translateY(-5px)}
.btn-sell,.btn-primary{transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.btn-sell:hover,.btn-primary:hover{transform:translateY(-1.5px);box-shadow:0 6px 22px -6px rgba(189,160,96,.5)}
.btn-sell:active,.btn-primary:active{transform:translateY(0) scale(.98)}
@keyframes ac-heartbeat{0%,100%{transform:scale(1)}12%{transform:scale(1.045)}24%{transform:scale(1)}}
.t.hot{animation:ac-heartbeat 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- LAYOUT ---------- */
.page{max-width:1360px;margin:0 auto;padding:28px 24px 56px;display:grid;grid-template-columns:1fr 316px;gap:28px}
.page.one-col{grid-template-columns:1fr}
@media(max-width:1080px){.page{grid-template-columns:1fr}}
/* móvil: header en DOS FILAS (logo+acciones arriba, nav abajo a todo lo ancho) */
/* franja 761-1100: el buscador es lo primero que sobra (medido: a 820px la cabecera
   desbordaba 97-129px). Subido de 900 a 1100 el 25-jul: con el menú Usuario (chevron)
   el header seguía solapando el buscador con el botón dorado hasta ~1080px. La página
   tiene su propio buscador grande, así que ocultar el del header no quita función. */
@media(max-width:1100px) and (min-width:761px){
  .search{display:none}
  .header-in{gap:12px;padding:0 14px}
  .nav-tab{padding:7px 8px;font-size:13px}
  .header-right{gap:9px}
  .btn-sell{padding:8px 12px;font-size:13px}
}
@media(max-width:760px){
  .header-in{flex-wrap:wrap;gap:8px 10px;padding:9px 14px;height:auto}
  .search{display:none}
  .wordmark{font-size:19px}
  .wordmark .pips{display:none}
  nav{order:10;flex-basis:100%;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -14px;padding:0 14px}
  nav::-webkit-scrollbar{display:none}
  .nav-tab{padding:6px 7px;font-size:12px;white-space:nowrap;flex:none}
  .btn-sell{padding:7px 11px;font-size:12.5px;white-space:nowrap}
  .header-right{gap:8px;margin-left:auto}
  /* stats del encabezado: compactos y sin pelearse */
  .page-head{gap:10px}
  .live-stats{gap:16px}
  .stat .v{font-size:17px}
  .stat .l{font-size:9.5px}
  h1{font-size:22px}
}
.page-head{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
h1{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
.sub{color:var(--text-3);font-size:13.5px;margin-top:4px}
.sub b{color:var(--text-2);font-weight:600}
.crumb{grid-column:1/-1;font-size:12.5px;color:var(--text-3)}
.crumb a:hover{color:var(--accent-hover)}
.crumb .sep{margin:0 7px;color:var(--border-strong)}
.live-stats{display:flex;gap:28px}
.stat{text-align:right}
.stat .v{font-family:var(--font-display);font-size:22px;font-weight:700;font-feature-settings:"tnum";letter-spacing:-.3px}
.stat .v.acc{color:var(--accent-hover)}
.stat .l{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;font-weight:500;margin-top:1px}
.stat .v.nada .live{display:none}
.v.nada .raya{display:inline-block;transform:translateY(-.08em);letter-spacing:0}   /* la raya a media altura, como una cifra */   /* sin subastas no hay nada "en vivo" que latir */
.stat .v .live{display:inline-block;width:7px;height:7px;border-radius:99px;background:var(--success);margin-right:6px;vertical-align:2px;animation:tcgo-pulse 1.6s ease-in-out infinite}

/* ---------- FILTERS / CHIPS ---------- */
.filters{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 0 10px;border-bottom:1px solid var(--border)}
/* toolbar: chips a la izquierda (wrapean) + Ordenar fijo arriba a la derecha, sin descolocarse */
.filterbar{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px 20px;flex-wrap:wrap;padding:2px 0 10px;border-bottom:1px solid var(--border)}
.filterbar>.filters{grid-column:auto;flex:1 1 320px;min-width:0;padding:0;border-bottom:0}
.filterbar>.sort{flex:none;margin-left:auto;align-self:flex-start;padding-top:6px;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-full);border:1px solid var(--border);background:transparent;color:var(--text-2);font-size:12.5px;font-weight:500;transition:all .15s}
.chip:hover{border-color:var(--border-strong);color:var(--text-1)}
.chip.on{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-hover)}
.chip .dot{width:8px;height:8px;border-radius:99px;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.chip-sep{width:1px;height:20px;background:var(--border);margin:0 4px}
.sort{margin-left:auto;color:var(--text-3);font-size:12.5px}
.sort b{color:var(--text-2);font-weight:600}

/* ---------- CARDS DE SUBASTA / SINGLE ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;align-content:start}
/* con sidebar (subastas): SIEMPRE 4 por fila, mismo ancho — como el rail del home */
.page:not(.one-col) .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
/* singles: cartas compactas (formato single, sin countdown/puja) del tamaño de subastas
   -> entran ~5 por fila en vez de 4 (pedido Omar 07-12) */
.page:not(.one-col) .grid.grid-singles{grid-template-columns:repeat(auto-fill,minmax(214px,1fr))}
.card{position:relative;background:var(--bg-surface);border-radius:var(--r-md);box-shadow:var(--sh-card);padding:10px;display:flex;flex-direction:column;transition:transform .15s ease-out, box-shadow .15s ease-out;cursor:pointer}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-card-hover)}
/* marcos SIN color por rareza (Omar 07-13): neutro para todas; SOLO el foil (fd-foil) brilla */
.card.rare,.card.mythic{box-shadow:var(--sh-card)}
.card.rare:hover,.card.mythic:hover{box-shadow:var(--sh-card-hover)}
.imgwrap{position:relative;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:5/7;background:var(--bg-surface-2)}
.imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
/* BRILLO foil sobre la carta: tinte arcoíris que se DESLIZA continuo (fluido y VISIBLE con
   'screen' sobre cartas oscuras). Omar 07-13 */
/* barrido diagonal iridiscente unificado (Omar 07-18). Se usa 'screen' (NO color-dodge)
   para que TODAS las cartas brillen parejo: color-dodge explota sobre artes claros y
   apenas se ve en artes oscuros; screen es uniforme sin importar el brillo del arte. */
.imgwrap .foil-shimmer{position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit;
  background:linear-gradient(115deg,transparent 16%,rgba(120,180,255,.5) 33%,rgba(190,120,255,.5) 45%,
    rgba(120,255,190,.5) 55%,rgba(255,210,120,.5) 67%,transparent 84%);
  background-size:250% 250%;mix-blend-mode:screen;opacity:.6;animation:foilshine 5s ease-in-out infinite}
/* reflejo iridiscente que recorre la carta en DIAGONAL, ida y vuelta suave (elegido por Omar 07-13, vitrina foil opcion C+D) */
@keyframes foilshine{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
/* glare que SIGUE EL CURSOR — solo al pasar el mouse (reflejo foil real, Omar 07-13) */
.imgwrap .foil-glare{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.5), rgba(190,225,255,.22) 30%, transparent 55%);
  mix-blend-mode:screen}
.card:hover .foil-glare{opacity:1}
/* al pasar el mouse el barrido NO se detiene ni atenúa — se intensifica como el hero
   de carta-detalle (Omar 07-18: "el foil no se detiene cuando pasas el cursor") */
.card:hover .foil-shimmer{opacity:.82}
.tag-rarity{position:absolute;top:8px;left:8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:var(--r-full);backdrop-filter:blur(6px)}
.tag-rarity.mythic{background:rgba(35,14,4,.72);color:#FF8B55;box-shadow:inset 0 0 0 1px rgba(255,106,43,.4)}
.tag-rarity.rare{background:rgba(32,26,8,.72);color:#E5C56A;box-shadow:inset 0 0 0 1px rgba(217,178,76,.4)}
.tag-rarity.foil{background:rgba(20,12,44,.72);color:#A78BFF;box-shadow:inset 0 0 0 1px rgba(124,92,255,.45)}
.tag-rarity.common{background:rgba(14,16,22,.72);color:var(--text-2);box-shadow:inset 0 0 0 1px rgba(166,173,187,.25)}
.mana{position:absolute;top:9px;right:8px;display:flex;gap:4px}
.mana i{width:9px;height:9px;border-radius:99px;display:block;box-shadow:0 0 0 1.5px rgba(0,0,0,.45)}
/* NOMBRE: hasta 2 líneas, espacio de 2 líneas RESERVADO en todas (alinea la grilla), … si excede (Omar 07-13) */
.cname{font-size:15px;font-weight:600;color:var(--text-1);margin-top:10px;line-height:1.28;min-height:2.56em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;-webkit-box-pack:center;overflow:hidden}
/* VARIANTE en 2ª fila, dorado, inglés (Art Series, Borderless, Showcase…) */
/* la fila de variante SIEMPRE reserva su altura (vacía en cartas normales) → todas las cards igual de altas, grilla ordenada */
.fd-vrow{color:#E5C56A;font-weight:600;font-size:12.5px;margin-top:3px;line-height:1.3;min-height:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 2.5: en el tema claro el oro pálido sobre blanco daba 1,7:1 */
[data-theme="light"] .fd-vrow,[data-theme="light"] .ico-chip.auc{color:var(--accent)}
/* contador de listings (solo singles): "N disponibles" a la derecha del precio */
.stock-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--text-2);
  background:var(--bg-surface-3);border:1px solid var(--border);border-radius:var(--r-full);padding:4px 10px;white-space:nowrap}
.stock-badge .dot{width:6px;height:6px;border-radius:99px;background:var(--success)}
/* ===== RESULTADOS DE BÚSQUEDA: iconos de estado junto al precio (martillo=subasta, cartas=compra directa) ===== */
.card{position:relative}
.card:hover{z-index:30}  /* al pasar el mouse la card se eleva -> el globito no queda tapado por la vecina */
.ico-flags{display:flex;gap:10px;align-self:flex-end;padding-bottom:2px}
.ico-chip{position:relative;display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:700;font-feature-settings:'tnum';cursor:pointer;padding:3px 4px;border-radius:8px;transition:transform .15s ease}
.ico-chip svg{width:18px;height:18px;flex:none}
.ico-chip.auc{color:#E5C56A}
/* mazo de subasta junto al monto (Puja actual S/X 🔨) — inline, sin agrandar el prow */
.prow .price:has(.ico-chip.auc){display:inline-flex;align-items:center;gap:4px}
.prow .price .ico-chip.auc{padding:0;cursor:default}
.prow .price .ico-chip.auc svg{width:19px;height:19px}
.prow .price .ico-chip.auc:hover{transform:none}
.ico-chip.dir{color:#6FE0A6}
.ico-chip:hover{transform:translateY(-2px) scale(1.05)}
.ico-chip:hover .tip{opacity:1;transform:translate(-50%,0)}
.ico-chip .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);white-space:nowrap;background:var(--bg-canvas);color:var(--text-1);border:1px solid var(--border-strong);border-radius:7px;padding:5px 9px;font-size:10.5px;font-weight:500;opacity:0;pointer-events:none;transition:all .15s ease;box-shadow:0 6px 18px rgba(0,0,0,.4);z-index:10}
.nostock-flag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--danger,#ff5a5a);background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.32);border-radius:99px;padding:5px 12px;align-self:flex-end;white-space:nowrap}
.nostock-flag svg{width:16px;height:16px;flex:none}
/* 7-oct · LA APP PARA ANDROID (beta): recuadro flotante (elegido por Omar). En PC lleva el código QR
   para apuntarle con el celular; en un Android es una pastilla sobre la barra de abajo. Tocar = descargar. */
.app-flot{position:fixed;right:22px;bottom:22px;z-index:390;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;
  border-radius:16px;background:var(--bg-surface);border:1px solid rgba(210,184,120,.45);box-shadow:0 14px 40px rgba(0,0,0,.45);
  text-decoration:none;color:inherit;max-width:340px}
.app-flot:hover{border-color:var(--accent)}
.app-flot .qr{width:64px;height:64px;border-radius:8px;background:#fff;padding:4px;flex:none}
.app-flot .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(210,184,120,.14);color:var(--accent-hover);flex:none}
.app-flot .ic svg{width:20px;height:20px}
.app-flot .tt{font-family:var(--font-display);font-size:13.5px;font-weight:700;color:var(--text-1);line-height:1.25}
.app-flot .ss{font-size:11.5px;color:var(--text-3);margin-top:2px;line-height:1.35}
.app-beta{font-family:var(--font-display);font-size:9.5px;font-weight:700;letter-spacing:.08em;padding:2px 7px;border-radius:99px;
  background:rgba(210,184,120,.18);color:var(--accent-hover);margin-left:6px;vertical-align:2px;white-space:nowrap}
.app-flot .x{flex:none;align-self:flex-start;width:32px;height:32px;margin:-4px -6px 0 0;border:0;border-radius:8px;background:none;color:var(--text-3);
  font-size:16px;line-height:1;cursor:pointer}
.app-flot .x:hover{color:var(--text-1);background:var(--bg-surface-2)}
.app-flot .go{flex:none;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:99px;background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-display);font-size:12.5px;font-weight:700}
/* en el celular: franja arriba, bajo la cabecera */
.app-arriba{display:flex;align-items:center;gap:11px;padding:9px 8px 9px 14px;background:var(--bg-surface-2);border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit}
.app-arriba .em{width:34px;height:34px;border-radius:9px;background:var(--bg-canvas);padding:3px;flex:none}
.app-arriba .tt{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--text-1)}
.app-arriba .ss{font-size:11.5px;color:var(--text-3)}
.app-arriba .go{flex:none;display:inline-flex;align-items:center;min-height:34px;padding:0 15px;border-radius:99px;background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--font-display);font-size:12.5px;font-weight:700}
.app-arriba .x{flex:none;width:34px;height:34px;border:0;border-radius:8px;background:none;color:var(--text-3);font-size:16px;line-height:1;cursor:pointer}
/* 7-oct: el rojo de marca sobre su propio fondo rojizo daba 4,0-4,4:1 (el mínimo es 4,5:1). Solo el
   TEXTO de esta etiqueta va un tono más claro (oscuro) o más oscuro (día); el borde y el fondo no cambian */
.nostock-flag{color:#EE7F7F}
[data-theme="light"] .nostock-flag{color:#B03535}
.price-none{color:var(--text-3)}
.cset{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.prow{display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px;margin-bottom:4px}
/* el bloque del precio (label+monto) se ancla al tope del prow → el precio queda a la MISMA altura en compra directa y en subasta (el countdown más alto ya no lo empuja abajo) */
.prow>div:first-child{align-self:flex-start}
.plabel{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;font-weight:500}
.price{font-family:var(--font-display);font-size:21px;font-weight:700;font-feature-settings:"tnum";letter-spacing:-.3px;line-height:1.1;margin-top:2px}
.price .cur{font-size:13px;font-weight:600;color:var(--text-2);margin-right:2px}
.usd{font-size:11.5px;color:var(--text-3);font-feature-settings:"tnum";margin-top:2px}
.cd{text-align:right}
.cd .t{font-family:var(--font-mono);font-size:14px;font-weight:600;font-feature-settings:"tnum";color:var(--text-2)}
/* 3.3b (1-oct): el reloj "por terminar" parpadeaba bajando la opacidad al 65 %: en ese
   instante el contraste caía bajo 4,5:1 y la prueba axe fallaba SOLO a veces. Ahora late
   creciendo (como .t.hot de arriba): el contraste no cambia nunca. Rojo del claro, legible. */
.cd .t.hot{color:var(--danger);animation:ac-heartbeat 1.2s ease-in-out infinite}
[data-theme="light"] .cd .t.hot{color:#A83232}
/* buscador en el tema claro: la cabecera es translúcida y el gris --text-3 quedaba en 4,34-4,47:1
   según lo que pasara por detrás (axe intermitente en el celular). Con --text-2 pasa siempre. */
[data-theme="light"] .search{color:var(--text-2)}
.cd .l{font-size:10.5px;color:var(--text-3);margin-top:1px}
.chip-ext{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:10.5px;font-weight:600;color:var(--warning);background:var(--warning-dim);border-radius:var(--r-full);padding:3px 9px;align-self:flex-start}
.state{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;font-weight:600}
.state .sd{width:6px;height:6px;border-radius:99px}
.state.win{color:var(--success)} .state.win .sd{background:var(--success)}
.state.lose{color:var(--danger)} .state.lose .sd{background:var(--danger)}
.proxy{margin-top:10px;display:flex;align-items:center;gap:7px;background:var(--accent-dim);border-radius:var(--r-sm);padding:6px 10px;font-size:11.5px;font-weight:600;color:var(--accent-hover)}
.proxy svg{flex:none}
.proxy .max{margin-left:auto;font-feature-settings:"tnum";color:var(--text-1);font-weight:600}
.proxy-cta{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 10px;font-size:11.5px;font-weight:500;color:var(--text-2);width:100%;transition:all .15s}
.proxy-cta:hover{border-color:var(--accent);color:var(--accent-hover);background:var(--accent-dim)}
.cfoot{display:flex;align-items:center;gap:5px;margin-top:9px;padding-top:9px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-3)}
/* alineación de grid: el bloque de puja se ancla abajo — pies parejos aunque el contenido varíe */
.card .proxy,.card .proxy-cta,.card .buy-cta{margin-top:auto}
.card .proxy~.cfoot,.card .proxy-cta~.cfoot,.card .buy-cta~.cfoot{margin-top:9px}
.cfoot .sep{color:var(--border-strong)}
/* mismo estilo que el botón de puja (.fd-bid) — Omar 07-14: letra negra, dorado bonito, más redondeado */
.buy-cta{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:7px;background:var(--btn-bg);border:none;border-radius:10px;padding:9px;font-size:12.5px;font-weight:700;color:var(--btn-fg);width:100%;font-family:var(--font-body);cursor:pointer;transition:filter .2s}
.buy-cta:hover{filter:brightness(1.06)}
.cond{display:inline-block;font-size:10px;font-weight:600;padding:2px 7px;border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.04em}
.cond.nm{background:var(--success-dim);color:var(--success)}
.cond.lp{background:var(--warning-dim);color:var(--warning)}
.cond.mp{background:rgba(166,173,187,.12);color:var(--text-2)}

/* ---------- PANELES / RAIL ---------- */
.rail{display:flex;flex-direction:column;gap:16px}
/* 2.4 (1-oct): el panel de la derecha terminaba en la 1.ª fila y dejaba ~3.000 px vacíos: ahora acompaña al bajar */
@media(min-width:1081px){aside.rail-fija{position:sticky;top:84px;align-self:start}}
/* 2.4: carta SIN stock — el botón dorado invitaba a comprar lo que no hay */
.buy-cta.sin-stock{background:transparent;color:var(--text-2);border:1px solid var(--border-strong);box-shadow:none}
.buy-cta.sin-stock:hover{color:var(--accent-hover);border-color:var(--accent);filter:none}
.panel{background:var(--bg-surface);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:18px}
.panel.hero-proxy{background:linear-gradient(160deg, rgba(124,92,255,.14), var(--bg-surface) 55%);box-shadow:0 0 0 1px rgba(124,92,255,.3), 0 0 32px -12px rgba(124,92,255,.35)}
/* feature futuro: badge PRONTO + panel en tono "en preparación" (mismo lenguaje que el rail de juegos) */
.soon-badge{background:var(--warning-dim);border:1px solid color-mix(in srgb,var(--warning) 45%,transparent);color:var(--warning);font-size:8.5px;font-weight:800;letter-spacing:.08em;border-radius:99px;padding:3px 8px;font-family:var(--font-body);flex:none}
.panel.hero-proxy.is-soon{background:var(--bg-surface);box-shadow:var(--sh-card);border:1px dashed color-mix(in srgb,var(--warning) 32%,transparent)}
.panel.hero-proxy.is-soon .desc,.panel.hero-proxy.is-soon .steps{opacity:.7}
.panel.hero-proxy.is-soon .step .n{background:var(--warning-dim);color:var(--warning)}
.panel.hero-proxy.is-soon .mini-quote{background:var(--warning-dim);border-color:color-mix(in srgb,var(--warning) 30%,transparent);color:var(--text-2)}
.panel.hero-proxy.is-soon .mini-quote b{color:var(--warning)}
/* barra de filtros en modo preview (juego PRONTO): se ven los iconos pero no filtra */
.filters.is-preview{opacity:.5;pointer-events:none}
/* dropdowns de filtro (Rareza▾ / Color▾ — elegido por Omar 07-12): barra en 1 línea */
.fdrop{position:relative;display:inline-flex}
.fdrop-btn{gap:5px}
.fdrop-btn.has{border-color:var(--accent);color:var(--accent-hover);background:var(--accent-dim)}
.fdrop-btn .fcount{font-weight:700;color:var(--accent-hover)}
.fchev{width:11px;height:11px;transition:transform .2s ease;opacity:.7}
.fdrop.open .fchev{transform:rotate(180deg)}
.fdrop-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;display:none;flex-direction:column;gap:2px;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:12px;padding:6px;box-shadow:var(--sh-modal);min-width:172px}
.fdrop.open .fdrop-menu{display:flex}
.fitem{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;background:none;border:0;color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer;text-align:left;width:100%}
.fitem:hover{background:var(--bg-surface-2)}
.fitem.on{background:var(--accent-dim);color:var(--text-1)}
.fitem.on::after{content:"✓";margin-left:6px;color:var(--accent-hover);font-weight:800}
.fitem .ci{flex:none}
/* código de idioma en los filtros (EN/ES/JP/PT) — acrónimo para que entre en el chip */
.fi-code{flex:none;display:inline-grid;place-items:center;min-width:22px;height:15px;padding:0 4px;border-radius:4px;background:var(--bg-surface-2);color:var(--text-3);font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:.03em}
.chip.on .fi-code,.fitem.on .fi-code{background:var(--gold-dim);color:var(--gold)}
/* (i) de ayuda: explica la nomenclatura de estado en español al pasar el mouse */
.fitem .fi-info{margin-left:auto;width:15px;height:15px;border-radius:99px;border:1px solid var(--border-strong);color:var(--text-3);font-size:10px;font-weight:700;font-style:italic;font-family:Georgia,serif;display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:help}
.fitem .fi-info:hover{border-color:var(--accent);color:var(--accent-hover);background:var(--accent-dim)}
/* dropdown de precio: rangos rápidos + campo personalizado Desde/Hasta */
.fdrop-precio .fdrop-menu{min-width:214px}
.fp-sep{height:1px;background:var(--border);margin:5px 6px}
.fp-custom{display:flex;align-items:center;gap:5px;padding:4px 8px 6px}
.fp-cur{font-size:11px;color:var(--text-3)}
.fp-in{width:56px;min-width:0;background:var(--bg-surface-2);border:1px solid var(--border-strong);border-radius:7px;padding:6px 8px;color:var(--text-1);font-family:inherit;font-size:12px;outline:none}
.fp-in:focus{border-color:var(--accent)}
.fp-dash{color:var(--text-3);font-size:12px}
.fp-ok{margin-left:auto;background:var(--btn-bg);color:var(--btn-fg);border:none;border-radius:7px;padding:6px 13px;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
/* estado vacío cuando el filtro no deja ninguna carta */
.filtro-vacio{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--text-3)}
.filtro-vacio .fv-t{font-family:var(--font-display);font-size:16px;color:var(--text-2);font-weight:700}
.filtro-vacio .fv-s{font-size:12.5px;margin-top:6px}
.filtro-vacio .fv-btn{margin-top:16px;background:var(--accent-dim);border:1px solid rgba(189,160,96,.4);color:var(--accent-hover);border-radius:10px;padding:8px 18px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
/* botón Limpiar filtros: aparece solo con filtros activos (acción de quitar, tono rojizo suave) */
.chip-limpiar{gap:5px;border-color:rgba(217,82,74,.42);color:#E0908A;font-weight:600}
.chip-limpiar:hover{background:rgba(217,82,74,.12);border-color:rgba(217,82,74,.65);color:#EDA6A0}
/* ── Easter eggs / celebraciones (elegidos por Omar 07-13) ── */
#ark-fx{position:fixed;inset:0;pointer-events:none;z-index:900;overflow:hidden}
.ark-conf{position:absolute;top:50%;left:50%;width:9px;height:14px;border-radius:2px;animation:ark-conff 1.1s ease-out forwards}
@keyframes ark-conff{to{transform:translate(var(--cx),var(--cy)) rotate(var(--cr));opacity:0}}
.ark-vend{position:fixed;inset:0;z-index:902;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none}
.ark-vend .mar{width:112px;height:112px;color:var(--accent-hover);filter:drop-shadow(0 8px 20px rgba(0,0,0,.5));animation:ark-marhit .7s ease-in-out}
@keyframes ark-marhit{0%{transform:rotate(-40deg) translateY(-30px);opacity:0}40%{transform:rotate(8deg);opacity:1}55%{transform:rotate(-4deg)}70%{transform:rotate(0)}100%{transform:rotate(0);opacity:1}}
.ark-vend .txt{font-family:var(--font-display);font-size:clamp(38px,7vw,56px);font-weight:700;letter-spacing:2px;background:linear-gradient(135deg,#E2C98B,#A98B4C);-webkit-background-clip:text;background-clip:text;color:transparent;animation:ark-vpop .5s .35s both cubic-bezier(.2,.9,.3,1.4)}
@keyframes ark-vpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.wordmark .bm{transform-style:preserve-3d}
.panel h2{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.2px;display:flex;align-items:center;gap:8px}
.panel h2 .ic{width:26px;height:26px;border-radius:8px;background:var(--accent-dim);display:grid;place-items:center;color:var(--accent-hover);flex:none}
.panel h2 .ic.ic-vault{background:linear-gradient(150deg,color-mix(in srgb,var(--success) 34%,transparent),var(--success-dim));color:var(--success);box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 2px 6px -2px rgba(0,0,0,.35)}
.panel p.desc{color:var(--text-2);font-size:12.5px;margin-top:8px;line-height:1.55}
.panel p.desc b{color:var(--text-1)}
.steps{margin-top:14px;display:flex;flex-direction:column}
.step{display:flex;gap:10px;position:relative;padding-bottom:14px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:10px;top:23px;bottom:3px;width:1px;background:var(--border-strong)}
.step:last-child::before{display:none}
.step .n{flex:none;width:21px;height:21px;border-radius:99px;background:var(--bg-surface-3);border:1px solid var(--border-strong);display:grid;place-items:center;font-size:10.5px;font-weight:600;color:var(--text-2)}
.step.done .n{background:var(--success-dim);border-color:var(--success);color:var(--success)}
.step .tx{font-size:12.5px;color:var(--text-2);padding-top:1px}
.step .tx b{color:var(--text-1);font-weight:600}
.mini-quote{margin-top:14px;background:var(--bg-surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;font-size:12px;color:var(--text-2);line-height:1.5}
.mini-quote b{color:var(--accent-hover)}
.badge{font-size:10px;font-weight:600;padding:2px 7px;border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.04em}
.badge.win{background:var(--success-dim);color:var(--success)}
.badge.lose{background:var(--danger-dim);color:var(--danger)}
.badge.auto{background:var(--accent-dim);color:var(--accent-hover)}
.badge.wait{background:var(--warning-dim);color:var(--warning)}
.trust{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.trust-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-2)}
.trust-row .tic{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 2px 6px -2px rgba(0,0,0,.35);position:relative}
.trust-row .tic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
.tic.yape{background:linear-gradient(150deg,rgba(155,79,176,.42),rgba(116,32,169,.22));color:#D9A6FF;font-weight:700;font-size:9px;font-family:var(--font-display);letter-spacing:.02em}
.tic.lock{background:linear-gradient(150deg,color-mix(in srgb,var(--success) 32%,transparent),var(--success-dim));color:var(--success)}
.tic.store{background:linear-gradient(150deg,color-mix(in srgb,var(--warning) 30%,transparent),var(--warning-dim));color:var(--warning)}
.tic.pay{background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 34%,transparent),var(--accent-dim));color:var(--accent-hover)}
/* icono favoritos en el header */
.hdr-fav{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:var(--text-2);border:1px solid var(--border-strong);text-decoration:none;transition:color .15s,border-color .15s}
.hdr-fav:hover{color:var(--accent-hover);border-color:var(--accent)}
.hdr-fav.has{color:#E0908A}
.hdr-fav .hf-n{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--accent);color:#1A1305;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:var(--font-body)}
.trust-row b{color:var(--text-1);font-weight:600}
.bid-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.bid-item:last-child{border-bottom:none;padding-bottom:0}
.bid-item img{width:34px;height:48px;object-fit:cover;border-radius:4px;flex:none}
.bid-item .bi-name{font-size:12.5px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.bid-item .bi-sub{font-size:11px;color:var(--text-3);font-feature-settings:"tnum"}
.bid-item .bi-right{margin-left:auto;text-align:right;flex:none}
.bid-item .bi-price{font-size:12.5px;font-weight:600;font-feature-settings:"tnum"}

/* ---------- FORMULARIOS ---------- */
.field{margin-top:14px}
.field label{display:block;font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.input{display:flex;align-items:center;gap:8px;background:var(--bg-surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;transition:box-shadow .15s,border-color .15s}
.input:focus-within{border-color:var(--accent);box-shadow:var(--sh-focus)}
.input .pre{color:var(--text-3);font-weight:600;font-size:14px}
.input input,.input select{flex:1;background:transparent;border:none;outline:none;color:var(--text-1);font-family:var(--font-body);font-size:15px;font-feature-settings:"tnum";font-weight:600}
.input select option{background:var(--bg-surface-2)}
.hint{font-size:11.5px;color:var(--text-3);margin-top:6px;line-height:1.5}
.hint b{color:var(--text-2)}
.btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--btn-bg);color:var(--btn-fg);border:none;border-radius:var(--r-md);padding:12px;font-size:14px;font-weight:600;margin-top:14px;transition:background .15s;box-shadow:0 0 24px -8px rgba(189,160,96,.5)}
/* 2.3 (1-oct): el botón principal medía 41, 43, 47 o 50 px según la página: una sola altura */
.btn-primary{min-height:44px;box-sizing:border-box}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:transparent;color:var(--text-2);border:1px solid var(--border);border-radius:var(--r-md);padding:10px;font-size:13px;font-weight:500;margin-top:10px;transition:all .15s}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-hover)}
.seg{display:flex;background:var(--bg-surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:3px;gap:3px;margin-top:6px}
.seg button{flex:1;padding:8px;border:none;border-radius:7px;background:transparent;color:var(--text-2);font-size:12.5px;font-weight:600;transition:all .15s}
.seg button.on{background:var(--accent);color:#fff}

/* ---------- TABLA HISTORIAL ---------- */
.tbl{width:100%;border-collapse:collapse;margin-top:10px}
.tbl td{padding:9px 4px;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--text-2)}
.tbl tr:last-child td{border-bottom:none}
.tbl .who{font-weight:600;color:var(--text-1)}
.tbl .amt{font-feature-settings:"tnum";font-weight:600;color:var(--text-1);text-align:right}
.tbl .when{color:var(--text-3);text-align:right;font-size:11.5px}

/* ---------- TABS ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-top:6px}
.tab{padding:9px 14px;border:none;background:transparent;color:var(--text-2);font-size:13px;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s}
.tab:hover{color:var(--text-1)}
.tab.on{color:var(--accent-hover);border-bottom-color:var(--accent)}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--border)}
.foot-in{max-width:1360px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;gap:16px;color:var(--text-3);font-size:12px}
.foot-in .wordmark{font-size:15px}
/* footer v2 (rediseño 07-12): marca izquierda, links derecha, legal abajo */
.foot-in2{max-width:1360px;margin:0 auto;padding:30px 24px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap}
.foot-in2 .f-brand .wordmark{font-size:17px}
.foot-in2 .f-brand p{color:var(--text-3);font-size:12px;line-height:1.65;margin-top:8px}
.foot-in2 .f-links{display:flex;gap:22px;flex-wrap:wrap;padding-top:4px}
.foot-in2 .f-links a{color:var(--text-3);text-decoration:none;font-size:12.5px;font-weight:500;transition:color .15s ease}
.foot-in2 .f-links a:hover{color:var(--accent-hover)}
.f-legal{max-width:1360px;margin:0 auto;padding:14px 24px 20px;color:var(--text-3);font-size:11px;border-top:1px solid var(--border)}
/* columna derecha del footer: links arriba, sociales debajo, alineados a la derecha */
.foot-in2 .f-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
/* sociales del footer (propuesta Alejandro 07-27) — aún sin enlazar */
.foot-in2 .f-social{display:flex;gap:10px}
@media(max-width:640px){ .foot-in2 .f-right{align-items:flex-start} }
.f-soc{width:34px;height:34px;border-radius:99px;display:grid;place-items:center;color:var(--text-3);border:1px solid var(--border);transition:color .15s,border-color .15s,background .15s;cursor:pointer;text-decoration:none}
.f-soc:hover{color:var(--accent-hover);border-color:var(--accent);background:var(--bg-surface-2)}
.f-soc svg{width:17px;height:17px}
/* 2.5: las redes aún no existen: no son enlaces (axe: aria-label en <a> sin href) ni deben parecer clicables */
span.f-soc{cursor:default}


/* móvil: grid 2 columnas (al final del archivo para ganar la cascada) */
@media(max-width:760px){
  /* misma especificidad que la regla de 4 columnas (linea ~136), si no, esa gana
     aunque estemos en movil y las cartas quedan en 4 columnas de 78px (bug 07-20). */
  .page:not(.one-col) .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .page:not(.one-col) .grid.grid-singles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding:9px;min-width:0}
  .cname{font-size:13px;line-height:1.25}
  .cset{font-size:11px}
  .price .amt,.price{font-size:17px}
  .t{font-size:11px}
  .cfoot{font-size:10px;gap:4px;flex-wrap:wrap}
  .proxy,.proxy-cta{font-size:10.5px;padding:7px 8px;min-height:38px}
  /* sin variante -> sin hueco vacio entre nombre y edicion (regla Omar: vacio=feo) */
  .fd-vrow:empty{display:none;margin:0}
  /* el boton de accion no cabe en una linea en movil: que envuelva, no que corte.
     Especificidad 0-2-0 para ganarle a la regla base .fd-bid (0-1-0, mas abajo en
     el archivo, que si no gana por orden de fuente y recorta con ellipsis). */
  .fd-acts .fd-bid{white-space:normal;overflow:visible;text-overflow:clip;flex-wrap:wrap;
    line-height:1.18;height:auto;min-height:42px;padding-top:8px;padding-bottom:8px;text-align:center}
  .fd-acts{gap:7px;align-items:stretch}
  /* estado+idioma+rareza: envolver en vez de cortar con "..." */
  .fd-idl,.fd-meta{flex-wrap:wrap}
}

/* iconitos finos de los chips de filtro (pedido Omar 07-10) */
.chip{display:inline-flex;align-items:center;gap:6px}
.chip .ci{opacity:.75;flex:none}

/* tracker de orden (5 pasos) — compartido: admin, mis-compras (comprador) y mis-ventas (vendedor) */
.flujo{display:flex;align-items:center;gap:0;margin-top:8px;max-width:520px}
.fdot{width:20px;height:20px;border-radius:99px;display:grid;place-items:center;font-size:10px;flex:none;border:1.5px solid var(--border-strong);background:var(--bg-surface-2);color:var(--text-3)}
.fdot.ok{background:var(--success);border-color:var(--success);color:#04150D;font-weight:800}
.fdot.now{background:var(--warning-dim);border-color:var(--warning);color:var(--warning);animation:tcgo-pulse 1.4s infinite}
.fbar{flex:1;height:2px;background:var(--border-strong);min-width:10px}
.fbar.ok{background:var(--success)}
.flbl{font-size:8.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.03em;text-align:center;margin-top:3px;white-space:nowrap}
.fcol{display:flex;flex-direction:column;align-items:center;flex:none}

/* móvil: objetivos táctiles — chips y botones chicos suben a ≥36px de alto */
@media(max-width:760px){
  .chip{padding:9px 14px;min-height:36px;font-size:12.5px}
  .frow .edit,button.abtn{min-height:36px}
  .tab{min-height:38px}
  .buy-cta,.proxy,.proxy-cta{min-height:36px}
}
.chip.on .ci{opacity:1}

/* ═══ FICHA V1 (Card Lab — decisión 2026-07-12): nombre+estado / precio+tiempo; resto al hover ═══ */
.cname{display:flex;align-items:center;gap:7px}
.est-chip{font-size:9px;font-weight:800;letter-spacing:.08em;border-radius:99px;padding:2px 8px;flex:none}
.est-chip.nm{background:var(--success-dim);color:var(--success);border:1px solid rgba(63,191,140,.4)}
.est-chip.lp{background:var(--warning-dim);color:var(--warning);border:1px solid rgba(224,166,63,.4)}
.est-chip.mp{background:var(--warning-dim);color:var(--warning);border:1px solid rgba(224,166,63,.5)}
.est-chip.hp,.est-chip.dmg{background:var(--danger-dim);color:var(--danger);border:1px solid rgba(227,101,101,.4)}
.card-extra{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .3s ease;font-size:10.5px;color:var(--text-3);line-height:1.5}
.card:hover .card-extra{max-height:40px;opacity:1;margin-top:8px}
/* countdown: pastilla en el número (mismo largo las 3) + "termina..." debajo siempre */
.cd-far .t,.cd-mid .t,.cd-hot .t{display:inline-block;min-width:92px;box-sizing:border-box;text-align:center;border-radius:99px;padding:4px 11px}
.cd-hot .t{color:var(--danger);background:var(--danger-dim);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);animation:tcgo-pulse 1.6s infinite}

/* ═══ FICHA DEFINITIVA (Card Lab, decisión Omar 2026-07-12) ═══
   Nombre (variante) → Edición (tamaño título) → SET #CN + estado·rareza·foil
   en texto plano → precio + semáforo de tiempo → botones existentes. */
.fd-edn{font-size:13.5px;font-weight:600;color:var(--text-2);margin-top:4px}
.fd-idl{display:flex;align-items:center;gap:6px;margin-top:6px;min-width:0;overflow:hidden;white-space:nowrap}
.fd-setc{font-family:var(--font-body);font-weight:700;font-size:9.5px;letter-spacing:.04em;color:var(--accent-hover);background:var(--accent-dim);border:1px solid rgba(189,160,96,.3);border-radius:6px;padding:2px 7px;flex:none}
.fd-meta{font-size:12px;font-weight:400;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;min-width:0}
.fd-meta .fd-sep{color:var(--text-3);opacity:.6;margin:0 3px}
/* semáforo del countdown: lejos verde · hoy naranja · <1h rojo latiendo (cd-hot ya definido) */
.cd-far .t{color:var(--success);background:var(--success-dim);border:1px solid color-mix(in srgb,var(--success) 35%,transparent)}
.cd-mid .t{color:var(--warning);background:var(--warning-dim);border:1px solid color-mix(in srgb,var(--warning) 35%,transparent)}
/* fila de acciones: puja + favorito — anclada al fondo para nivelar todas las cartas */
.fd-acts{display:flex;gap:8px;align-items:stretch;margin-top:auto;padding-top:10px}
.fd-acts .proxy-cta{flex:1;margin-top:0}
.fd-bid{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--btn-bg);color:var(--btn-fg);border:none;border-radius:10px;padding:9px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--font-body);white-space:nowrap;transition:filter .2s}
.fd-bid svg{width:13px;height:13px;flex:none}
.fd-bid:hover{filter:brightness(1.06)}
/* el botón habla el estado de TU puja (Omar 07-12): verde ganando · rojo superado */
.fd-bid.fd-bid-win{background:linear-gradient(135deg,#7ED6AE,#3E9E74);color:#06281A}
.fd-bid.fd-bid-out{background:linear-gradient(135deg,#E58585,#B84A4A);color:#2A0D0D;font-size:11.5px;gap:5px;padding:9px 6px}
.fd-bid.fd-bid-out svg{display:none}
.fd-fav{flex:none;background:var(--bg-surface-2);border:1px solid var(--border-strong);border-radius:10px;padding:8px 12px;font-size:13px;cursor:pointer;color:var(--text-2);font-family:inherit;transition:color .2s,border-color .2s}
.fd-fav:hover,.fd-fav.on{color:var(--danger);border-color:var(--danger)}
/* campanita "Seguir subasta" (reemplaza el ♡ en list cards de subasta) */
.fd-follow{flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-surface-2);border:1px solid var(--border-strong);border-radius:10px;padding:8px 11px;cursor:pointer;color:var(--text-2);transition:color .2s,border-color .2s}
.fd-follow svg{width:15px;height:15px;flex:none}
.fd-follow:hover,.fd-follow.on{color:var(--accent-hover);border-color:var(--accent)}
.fd-follow.on svg{fill:currentColor}

/* ── Selector de juego (idea Omar + Ale 07-12): el TCG como filtro principal ── */
.game-rail{grid-column:1/-1;display:flex;gap:10px;align-items:stretch;margin:2px 0 14px;flex-wrap:wrap}
.gr-item{position:relative;display:flex;align-items:center;gap:9px;background:var(--bg-surface);border:1.5px solid var(--border-strong);border-radius:14px;padding:9px 18px;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--text-2);transition:border-color .2s, transform .2s, background .2s}
.gr-item img{height:30px;max-width:104px;object-fit:contain;filter:saturate(.3) brightness(.85);transition:filter .25s}
.gr-item:hover{transform:translateY(-2px);border-color:rgba(189,160,96,.45)}
.gr-item:hover img{filter:none}
.gr-item.on{border-color:var(--accent);color:var(--text-1);background:var(--accent-dim)}
.gr-item.on img{filter:none}
/* PRONTO = pildorita sobre el borde (Omar prefirió la versión original 07-12) */
.gr-b{position:absolute;top:-8px;right:10px;background:var(--warning-dim);border:1px solid color-mix(in srgb,var(--warning) 45%,transparent);color:var(--warning);font-size:8.5px;font-weight:800;letter-spacing:.08em;border-radius:99px;padding:2px 7px;font-family:var(--font-body);backdrop-filter:blur(4px)}
/* aurora de color por juego (mismos colores de los tiles del home) */
.game-rail{--game-mtg:#BDA060;--game-pkm:#F2C744;--game-ygo:#8B5CF6;--game-op:#E36565;--game-dbs:#E07038}
[data-theme="light"] .game-rail{--game-pkm:#B8901A;--game-ygo:#6D3DC8;--game-op:#C24848;--game-dbs:#C05010}
.gr-item[data-g="magic"]{--gc:var(--game-mtg)}
.gr-item[data-g="pokemon"]{--gc:var(--game-pkm)}
.gr-item[data-g="yugioh"]{--gc:var(--game-ygo)}
.gr-item[data-g="onepiece"]{--gc:var(--game-op)}
.gr-item[data-g="dbs"]{--gc:var(--game-dbs)}
.gr-item[data-g]:not([data-g="all"]){background:
  radial-gradient(130px 70px at 86% 0%, color-mix(in srgb,var(--gc) 16%, transparent), transparent 70%),
  radial-gradient(110px 60px at 0% 112%, color-mix(in srgb,var(--gc) 8%, transparent), transparent 68%),
  var(--bg-surface)}
.gr-item[data-g]:not([data-g="all"]):hover,.gr-item[data-g]:not([data-g="all"]).on{background:
  radial-gradient(130px 70px at 86% 0%, color-mix(in srgb,var(--gc) 26%, transparent), transparent 70%),
  radial-gradient(110px 60px at 0% 112%, color-mix(in srgb,var(--gc) 13%, transparent), transparent 68%),
  var(--bg-surface)}
/* emblema del botón "Todos": swap noche/día igual que la cabecera */
.gr-item .gr-d{display:none}
[data-theme="light"] .gr-item .gr-n{display:none}
[data-theme="light"] .gr-item .gr-d{display:block}
/* logos oscuros (One Piece) se invierten en modo noche — misma solución que el home */
.gr-item img.inv{filter:invert(1) brightness(.8)}
.gr-item:hover img.inv,.gr-item.on img.inv{filter:invert(1) brightness(1)}
#g-empty img.inv{filter:invert(1) brightness(.95)}
[data-theme="light"] .gr-item img.inv{filter:saturate(.3) brightness(.85)}
[data-theme="light"] .gr-item:hover img.inv,[data-theme="light"] .gr-item.on img.inv{filter:none}
[data-theme="light"] #g-empty img.inv{filter:none}
/* estado vacío: juego PRONTO seleccionado -> lista de espera */
#g-empty{display:none;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:54px 20px;background:var(--bg-surface);border-radius:var(--r-lg);box-shadow:var(--sh-card);align-self:start}
.one-col #g-empty{grid-column:1/-1}
#g-empty img{height:58px;object-fit:contain}
#g-empty .ge-t{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.3px}
#g-empty .ge-s{font-size:13px;color:var(--text-3)}
#g-empty .ge-btn{display:inline-flex;align-items:center;gap:8px;background:var(--btn-bg);color:var(--btn-fg);border:none;border-radius:10px;padding:10px 22px;font-weight:700;font-size:13px;cursor:pointer;font-family:var(--font-body);margin-top:4px}
#g-empty .ge-btn:hover{filter:brightness(1.06)}
#g-empty .ge-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#g-empty .ge-c{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
#g-empty .ge-c svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
/* contador de resultados dinámico (Subastas/Singles) — cambia con búsqueda/filtros */
.res-count{grid-column:1/-1;font-size:12.5px;color:var(--text-3);margin:0 0 14px;font-variant-numeric:tabular-nums}
.res-count b{color:var(--text-1);font-weight:700}
/* buscador interno (Singles/Subastas) — tras el game-rail, antes de los filtros. Márgenes negativos
   para meterse entre los gaps de 28px del grid sin abrir espacio (Omar 07-14: compacto como Subastas) */
.cat-search-wrap{grid-column:1/-1;position:relative;margin:-16px 0 -14px;max-width:560px}
.cat-search{display:flex;align-items:center;gap:9px;background:var(--bg-surface-2);border:1px solid var(--border-strong);border-radius:10px;padding:9px 13px;transition:border-color .15s}
.cat-search:focus-within{border-color:var(--accent)}
.cat-search .csi{width:15px;height:15px;color:var(--text-3);flex:none}
.cat-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text-1);font-family:inherit;font-size:13.5px}
.cat-search input::placeholder{color:var(--text-3)}
.cat-x{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:16px;line-height:1;padding:0 2px;display:none}
.cat-x:hover{color:var(--text-1)}
.cat-ac{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--sh-modal);z-index:60;overflow:hidden;display:none}
.cat-ac .ac-i{display:flex;align-items:center;gap:10px;padding:9px 13px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border);color:var(--text-1)}
.cat-ac .ac-i:last-child{border-bottom:none}
.cat-ac .ac-i.on,.cat-ac .ac-i:hover{background:var(--bg-surface-2)}
.cat-ac .ac-i .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-ac .ac-i .cnt{flex:none;font-family:var(--font-mono);font-size:10px;color:var(--text-3)}

/* ── Selector de TCG pegado al buscador del header (idea Omar, estilo TCGplayer 07-14) ── */
.hgsel-wrap{position:relative;display:inline-flex;align-items:center;flex:none}
.hgsel{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:600;padding:0;flex:none;white-space:nowrap}
.hgsel:hover{color:var(--text-1)}
.hgsel-logo{width:18px;height:18px;object-fit:contain;flex:none}
.hgsel-logo.inv{filter:invert(1) brightness(.95)}
[data-theme="light"] .hgsel-logo.inv{filter:none}
.hgsel-chev{width:11px;height:11px;transition:transform .15s;flex:none;opacity:.7}
.hgsel-wrap.open .hgsel-chev{transform:rotate(180deg)}
.hgsel-div{width:1px;height:17px;background:var(--border-strong);flex:none;margin:0 10px 0 11px}
.hgsel-menu{position:absolute;top:calc(100% + 9px);left:-4px;z-index:99;display:none;flex-direction:column;gap:1px;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:12px;padding:6px;box-shadow:var(--sh-modal);min-width:196px}
.hgsel-wrap.open .hgsel-menu{display:flex}
.hgsel-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-1);background:none;border:none;font-family:inherit;text-align:left;width:100%}
.hgsel-i:hover:not(:disabled){background:var(--bg-surface-2)}
.hgsel-i{min-height:38px}
.hgsel-i .hgsel-em{width:22px;height:22px;object-fit:contain;flex:none}
.hgsel-i .hgsel-lg{height:26px;width:auto;max-width:128px;object-fit:contain;flex:none}
.hgsel-i .hgsel-lg.inv{filter:invert(1) brightness(.95)}
[data-theme="light"] .hgsel-i .hgsel-lg.inv{filter:none}
.hgsel-i.sel{color:var(--accent-hover)}
.hgsel-i:disabled{cursor:default;opacity:.55}
.hgsel-i .soon{margin-left:auto;font-size:8px;font-weight:800;letter-spacing:.03em;color:var(--rarity-rare,#d4a53a);border:1px solid currentColor;border-radius:99px;padding:1px 6px;flex:none}

/* ── Títulos de rail con vida (fusiones FO/FS elegidas por Omar 07-12) ── */
.hic{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-dim);position:relative;flex:none;overflow:visible}
.hic .mart{width:20px;height:20px;color:var(--accent-hover);transform-origin:80% 75%;animation:hic-golpe 2.6s ease-in-out infinite}
@keyframes hic-golpe{0%,55%,100%{transform:rotate(0)}65%{transform:rotate(-28deg)}75%{transform:rotate(6deg)}80%{transform:rotate(-3deg)}85%{transform:rotate(0)}}
.hic .badge-esq{position:absolute;right:-6px;bottom:-6px;width:16px;height:16px;background:var(--bg-surface);border:1px solid rgba(189,160,96,.45);border-radius:6px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.hic .badge-esq svg{width:10px;height:10px;animation:hic-volteo 2.6s ease-in-out infinite}
@keyframes hic-volteo{0%,74%{transform:rotate(0)}88%,100%{transform:rotate(180deg)}}
.hic .minicarta{width:16px;height:22px;border:1.7px solid var(--accent-hover);border-radius:3.5px;position:relative;overflow:hidden;background:color-mix(in srgb,var(--accent-hover) 10%,transparent);display:flex;align-items:center;justify-content:center}
.hic .minicarta img{width:10px;height:10px;object-fit:contain}
.hic .minicarta .em-d{display:none}
[data-theme="light"] .hic .minicarta .em-n{display:none}
[data-theme="light"] .hic .minicarta .em-d{display:block}
.hic .minicarta::after{content:"";position:absolute;inset:-5px;background:linear-gradient(115deg,transparent 32%,rgba(242,219,154,.9) 48%,transparent 62%);transform:translateX(-130%);animation:hic-sweep 2.8s ease-in-out infinite}
@keyframes hic-sweep{0%,55%{transform:translateX(-130%)}78%,100%{transform:translateX(130%)}}
.hic .badge-dia{perspective:70px}
.hic .badge-dia svg{animation:hic-vitrina 3s ease-in-out infinite}
@keyframes hic-vitrina{0%,55%{transform:rotateY(0)}80%,100%{transform:rotateY(360deg)}}
.hic .tagp{width:20px;height:20px;color:var(--accent-hover);transform-origin:22% 18%;animation:hic-balanceo 2.8s ease-in-out infinite}
@keyframes hic-balanceo{0%,55%,100%{transform:rotate(0)}65%{transform:rotate(12deg)}75%{transform:rotate(-9deg)}85%{transform:rotate(5deg)}92%{transform:rotate(-2deg)}}
.hic .badge-sol{position:absolute;right:-7px;bottom:-7px;width:16px;height:16px;border-radius:99px;background:linear-gradient(135deg,#E2C98B,#A98B4C);color:#1A1305;font-size:6.5px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.35);animation:hic-vitrina 3s ease-in-out infinite;letter-spacing:-.02em}
.hic-sub{color:var(--text-3);font-weight:500;font-size:14px}

/* ── G elegida (Omar 07-12): tablilla del 4to árbitro +5′ + esquina doblada ── */
.fd-tabl{position:relative;display:inline-block}
.fd-tabl .fd-board{position:absolute;top:-13px;right:-9px;background:#0B1626;border:1px solid color-mix(in srgb,var(--warning) 50%,transparent);color:var(--warning);font-family:var(--font-mono);font-weight:700;font-size:10px;border-radius:5px;padding:1px 6px;box-shadow:0 4px 10px rgba(0,0,0,.45);z-index:2}
[data-theme="light"] .fd-tabl .fd-board{background:#FFF7E6}
/* esquina doblada = estado de TU puja: verde ganando · roja superado */
.fd-ear-tip{position:absolute;top:0;right:0;width:30px;height:30px;border-top-right-radius:var(--r-md);z-index:2;pointer-events:none}
.fd-ear-win .fd-ear-tip{background:linear-gradient(225deg,var(--success) 50%,transparent 50%)}
.fd-ear-out .fd-ear-tip{background:linear-gradient(225deg,var(--danger) 50%,transparent 50%)}

/* marco FOIL iridiscente RETIRADO (Omar 07-13): foil = BRILLO .foil-shimmer sobre la carta,
   marco NEUTRO como el resto. Regla neutra por si quedara la clase. */
.card.fd-foil{}

/* red de seguridad movil (Omar 07-20): ningun bloque puede empujar la pagina
   a lo ancho. Medido con auditar_responsive.py en 6 anchos. */
@media(max-width:760px){
  html,body{overflow-x:hidden}
  .tip,.shiptip,.etip{max-width:calc(100vw - 24px)}
  .ticker{overflow:hidden;max-width:100%}
  img,svg,video{max-width:100%}
  .cd,.cd-far,.cd-mid,.cd-hot{max-width:100%}
}

/* el ticker de actividad mide ~4900px de contenido: se recorta a la pantalla
   en cualquier ancho (medido con auditar_responsive.py) */
.ticker{overflow:hidden;max-width:100%}

/* tooltips de los chips: no pueden empujar la pagina hacia la derecha */
.ico-chip .tip{max-width:min(240px,calc(100vw - 28px));white-space:normal;text-align:center}

/* ═══ CELULAR · camino C (parte 8, elegido por Omar 29-sep) ═══════════════════
   Antes: la cabecera se partía en 3 filas (~280 px, un tercio de la pantalla,
   pegada arriba) y los botones medían 30-38 px. Ahora, por debajo de 760 px:
   · cabecera de UNA fila: logo · campanita · carrito (44 px, el mínimo de Apple)
   · debajo, el buscador de siempre (autocompletado y español) a todo lo ancho
   · la navegación baja a la barra de pestañas (#tabbar, la inyecta tcgo.js)
   · al bajar la página la cabecera se esconde; al subir, vuelve
   Todo con body.con-tabbar delante: el admin y el escáner no lo reciben. */
#tabbar,#tb-hoja{display:none}
@media(max-width:760px){
  :root{--tabbar:64px}
  /* overflow-x:hidden en html+body (red de seguridad de arriba) vuelve al body un
     contenedor de scroll y la cabecera dejaba de quedarse arriba (medido: a 900 px
     de scroll su borde estaba en -900). clip recorta igual sin romper el sticky. */
  @supports (overflow:clip){ html,body{overflow-x:clip} }
  body.con-tabbar header{transition:transform .22s ease}
  html.hdr-oculta body.con-tabbar header{transform:translateY(-100%)}
  body.con-tabbar .header-in{flex-wrap:wrap;height:auto;padding:2px 8px 10px 14px;gap:0 2px}
  body.con-tabbar .header-in nav,
  body.con-tabbar .header-right .btn-sell,body.con-tabbar .header-right .hdr-div,
  body.con-tabbar .header-right .usr-menu,body.con-tabbar .header-right .usr-login,
  body.con-tabbar .header-right .theme-toggle{display:none}
  body.con-tabbar .wordmark{font-size:19px;min-height:50px;margin-right:auto;align-items:center}
  body.con-tabbar .wordmark .bm{width:32px;height:32px;margin-right:8px}
  body.con-tabbar .wordmark .pe{display:none}
  body.con-tabbar .header-right{gap:2px;margin-left:auto}
  body.con-tabbar .header-right .hicon{width:44px;height:44px;border-radius:12px}
  body.con-tabbar .header-right .hicon svg{width:22px;height:22px}
  body.con-tabbar .header-right .hicon .hb{top:4px;right:3px}
  body.con-tabbar #bell-badge{top:5px!important;right:4px!important}
  body.con-tabbar .search{display:flex;order:10;flex:1 1 100%;max-width:none;height:44px;margin-right:6px;
    padding:0 14px 0 12px;font-size:14px;border-color:var(--border-strong);border-radius:12px}
  body.con-tabbar .search svg{width:16px;height:16px;flex:none}
  body.con-tabbar .search kbd,body.con-tabbar .search .hgsel-wrap,body.con-tabbar .search .hgsel-div{display:none}
  /* 16 px en el campo: con menos, el iPhone hace zoom a la página al tocarlo */
  body.con-tabbar .search input{font-size:16px!important}

  /* la barra de pestañas */
  body.con-tabbar{padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom))}
  #tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    height:calc(var(--tabbar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:var(--bg-header);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);
    /* la regla vieja "nav{margin:0 -14px;padding:0 14px;overflow-x:auto}" (cabecera
       de 3 filas) también caía en esta barra: la corría 14 px a cada lado */
    margin:0;padding-left:0;padding-right:0;gap:0;overflow:visible;order:0;flex-basis:auto}
  #tabbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--text-3);font-size:11px;font-weight:500;text-decoration:none;-webkit-tap-highlight-color:transparent}
  #tabbar a svg{width:22px;height:22px}
  #tabbar a.on{color:var(--accent-hover)}
  #tabbar a:active{transform:scale(.96)}
  #tabbar a.tb-vender{color:var(--accent-hover)}
  #tabbar .tb-mas{width:46px;height:32px;border-radius:12px;background:var(--btn-bg);color:var(--btn-fg);
    display:grid;place-items:center;box-shadow:var(--btn-glow)}
  #tabbar .tb-mas svg{width:20px;height:20px;stroke-width:2.2}

  /* tarjeta de subasta a 2 columnas (~170 px): precio y reloj no caben lado a
     lado (el reloj se montaba sobre "Puja actual"); el reloj baja debajo */
  .card .prow{flex-direction:column;align-items:stretch;gap:6px}
  .card .prow .cd{text-align:left;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
  .card .prow .cd .l{margin-top:0}

  /* 8.5 · letra mínima 11 px en lo que se repite en CADA tarjeta (medido: el
     código de edición iba a 9,5 px y "Puja actual"/"termina hoy" a 10,5) */
  .fd-setc,.plabel,.card .cd .l,.ej-marca,.badge-soon,.badge-live,.gr-b,.soon-badge,.tag-rarity{font-size:11px}
  /* los enlaces del pie (en TODAS las páginas) medían 17-19 px de alto */
  .ark-foot a:not(.f-soc){min-height:40px;display:inline-flex;align-items:center}

  /* lo que flota abajo sube por encima de la barra */
  body.con-tabbar #tcgo-toasts{bottom:calc(var(--tabbar) + 12px + env(safe-area-inset-bottom))!important;right:12px!important;left:12px;max-width:none!important}
  body.con-tabbar .bulkbar{bottom:calc(var(--tabbar) + 12px + env(safe-area-inset-bottom))}
  body.con-tabbar #toast{bottom:calc(var(--tabbar) + 14px + env(safe-area-inset-bottom))}
  body.con-tabbar .cbar{bottom:calc(var(--tabbar) + env(safe-area-inset-bottom))}

  /* la hoja "Yo" (sube desde abajo) */
  #tb-hoja.on{display:block;position:fixed;inset:0;z-index:320}
  #tb-hoja .tb-velo{position:absolute;inset:0;background:rgba(3,8,16,.6)}
  #tb-hoja .tb-panel{position:absolute;left:0;right:0;bottom:0;max-height:85vh;overflow-y:auto;background:var(--bg-surface);
    border-top:1px solid var(--border-strong);border-radius:20px 20px 0 0;box-shadow:var(--sh-modal);
    padding:10px 12px calc(16px + env(safe-area-inset-bottom));animation:tbSube .22s ease-out}
  #tb-hoja .tb-asa{width:40px;height:4px;border-radius:2px;background:var(--border-strong);margin:0 auto 8px}
  #tb-hoja .tb-quien{font-size:13px;font-weight:600;color:var(--text-3);padding:2px 10px 6px}
  #tb-hoja .tb-links a,#tb-hoja .tb-links button{display:flex;align-items:center;gap:14px;width:100%;min-height:50px;padding:0 10px;
    border:none;border-radius:12px;background:none;color:var(--text-1);font:500 15px var(--font-body);text-align:left;text-decoration:none;cursor:pointer}
  #tb-hoja .tb-links a:active,#tb-hoja .tb-links button:active{background:var(--bg-surface-2)}
  #tb-hoja .tb-links svg{width:20px;height:20px;color:var(--text-2);flex:none}
  #tb-hoja .tb-links .usr-sub{color:var(--text-3);font-size:13px;margin-left:4px}
  #tb-hoja .tb-links .usr-div{height:1px;background:var(--border);margin:6px 4px}
  #tb-hoja .tb-links a.usr-out,#tb-hoja .tb-links a.usr-out svg{color:var(--danger)}
  #tb-hoja .tb-links a.usr-adm svg{color:var(--accent-hover)}
  #tb-hoja .tb-links a.tb-entrar{justify-content:center;background:var(--btn-bg);color:var(--btn-fg);font-weight:600;margin:4px 0 6px}
}
@keyframes tbSube{from{transform:translateY(100%)}to{transform:none}}

/* ═══ 8.4 · lo de EJEMPLO se dice (escaparate.js; decisión de Omar 30-sep:
   "reales + ejemplo marcado"). Etiqueta sobre la imagen, legible en los dos temas. */
.ej-marca{position:absolute;left:8px;bottom:8px;z-index:3;pointer-events:none;
  font:700 10.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;
  color:#F2F5FA;background:rgba(10,24,40,.84);border:1px dashed var(--accent);
  border-radius:99px;padding:5px 9px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ej-nota{color:var(--text-3);font-weight:400}
/* 6-oct: ESTADO VACÍO de Subastas y de los carriles de la portada (cuando no haya ejemplos ni nada real) */
.arca-vacia{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:38px 24px 34px;border:1px dashed var(--border-strong);border-radius:16px;background:var(--bg-surface)}
.arca-vacia .av-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:4px;
  background:var(--accent-dim);color:var(--accent-hover);border:1px solid rgba(189,160,96,.35)}
.arca-vacia .av-ic svg{width:26px;height:26px}
.arca-vacia b{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--text-1);line-height:1.2}
.arca-vacia .av-tx{font-size:13.5px;color:var(--text-2);max-width:460px;line-height:1.5}
.arca-vacia .btn-sell{margin-top:10px}
@media(max-width:760px){.arca-vacia{padding:28px 16px 26px}.arca-vacia b{font-size:17px}}
/* la "puja automática" se quitó el 27-sep: los ejemplos no la muestran */
.es-ejemplo .proxy{display:none}

/* ═══ parte 9 · barra fija de acción (carrito, pago) — arkBarraFija en tcgo.js ═══ */
#barraFija{display:none}
@media(max-width:760px){
  body.con-barra-fija #barraFija{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:61;align-items:center;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bg-header);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border-strong)}
  body.con-barra-fija #tabbar{display:none}
  body.con-barra-fija{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  #barraFija .bf-p{min-width:0;flex:none;max-width:44%}
  #barraFija .bf-v{font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.05;white-space:nowrap}
  #barraFija .bf-s{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #barraFija button{flex:1;min-height:48px;border:none;border-radius:12px;background:var(--btn-bg);color:var(--btn-fg);
    font:700 15px var(--font-body);cursor:pointer;padding:0 12px}
  #barraFija button:disabled{opacity:.45;cursor:default}
  body.con-barra-fija #tcgo-toasts{bottom:calc(88px + env(safe-area-inset-bottom))!important}
}

/* 30-sep: en el celular .page crecía a lo que pidiera su contenido (body es flex en
   columna → el ancho del hijo sale de su contenido mínimo): tienda medía 400 px y el
   panel del admin 1327 px en una pantalla de 390, y el sobrante se cortaba en silencio
   (overflow-x:clip). Dependía de qué fuente había cargado: por eso la prueba daba
   verde en una corrida y rojo en otra */
@media(max-width:760px){
  body > .page{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  /* y su columna tampoco crece con el contenido (Mis ventas medía 387 en 358: F4, 30-sep) */
  body > .page.one-col{grid-template-columns:minmax(0,1fr)!important}
}

/* 30-sep (Alejandro): Subastas y Singles en el celular — juegos en UNA fila deslizable y
   filtros en una hoja (botón "Filtros" junto al buscador), como Mi Arca. En computadora
   no cambia nada (el botón y el velo solo se ven en el celular) */
#hojaFiltrosBtn,#hojaVelo{display:none}
.busca-fila{display:contents}
@media(max-width:760px){
  .game-rail{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin:0 -16px 10px!important;padding:2px 16px 4px;gap:8px!important}
  .game-rail::-webkit-scrollbar{display:none}
  .game-rail .gr-item{flex:0 0 auto;min-height:44px;padding:6px 14px}
  .busca-fila{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-bottom:8px}
  .busca-fila .cat-search-wrap{margin:0!important;grid-column:auto!important;min-width:0}
  /* con los filtros en la hoja, la barra queda solo con "Ordenar": sin el hueco */
  .filterbar{padding:0 0 8px!important;gap:0!important;min-height:0!important;align-items:center}
  .filterbar .sort{margin:0!important}
  #hojaFiltrosBtn{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 14px;border-radius:10px;
    border:1px solid var(--border-strong);background:var(--bg-surface-2);color:var(--text-1);font:600 14px var(--font-body)}
  #hojaFiltrosBtn svg{width:17px;height:17px}
  #hojaFiltrosBtn.activo{border-color:var(--accent);color:var(--accent-hover)}
  #hojaFiltrosBtn .n{min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:var(--btn-fg);font:700 11px var(--font-mono);display:grid;place-items:center;padding:0 4px}
  #hojaFiltrosBtn .n:empty{display:none}
  .filters.hoja-filtros{position:fixed!important;left:0;right:0;bottom:0;z-index:330;margin:0!important;max-height:80vh;overflow-y:auto;
    background:var(--bg-surface);border-top:1px solid var(--border-strong);border-radius:18px 18px 0 0;box-shadow:var(--sh-modal);
    padding:0 16px calc(12px + env(safe-area-inset-bottom))!important;transform:translateY(105%);transition:transform .24s ease;
    display:flex!important;flex-wrap:wrap;gap:8px;align-content:flex-start;visibility:hidden}
  body.hoja-f .filters.hoja-filtros{transform:none;visibility:visible}
  body.hoja-f{overflow:hidden}
  #hojaVelo{position:fixed;inset:0;z-index:320;background:rgba(3,8,16,.6)}
  body.hoja-f #hojaVelo{display:block}
  .filters.hoja-filtros .hoja-cab{flex:1 1 100%;display:flex;align-items:center;position:sticky;top:0;background:var(--bg-surface);padding:10px 0;z-index:2}
  .filters.hoja-filtros .hoja-cab::before{content:"";position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--border-strong)}
  .filters.hoja-filtros .hoja-cab b{font:700 17px var(--font-display);margin-top:10px}
  .filters.hoja-filtros .fdrop{position:static}
  .filters.hoja-filtros .fdrop.open{flex:1 1 100%;display:flex;flex-direction:column;align-items:flex-start}
  .filters.hoja-filtros .fdrop .fdrop-menu{position:static!important;box-shadow:none;margin-top:6px;width:100%}
  .filters.hoja-filtros .hoja-pie{flex:1 1 100%;position:sticky;bottom:0;background:var(--bg-surface);padding:10px 0 0}
  .filters.hoja-filtros .hoja-pie button{width:100%;min-height:48px;border:none;border-radius:12px;background:var(--btn-bg);color:var(--btn-fg);font:700 15px var(--font-body)}
  /* Singles: 2 cartas por fila, como Subastas (antes 1: minmax(214px) no cabía dos veces) */
  .res-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important}
}

/* ══ NOTIFICACIONES (7-oct-2026, Omar) — el panel de la campana y notificaciones.html ══ */
.nt-panel{position:absolute;top:42px;right:0;width:384px;max-width:92vw;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:16px;
  box-shadow:var(--sh-modal);z-index:99;overflow:hidden;text-align:left;cursor:default;white-space:normal;font-family:var(--font-body)}
.nt-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border)}
.nt-cab b{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text-1)}
.nt-cab b em{font-style:normal;margin-left:7px;background:var(--danger,#E36565);color:#fff;border-radius:99px;font-size:11px;padding:1px 7px;vertical-align:1px;font-family:var(--font-body)}
.nt-lista{max-height:min(70vh,560px);overflow-y:auto}
.nt-sec{padding:9px 16px 5px;font-family:var(--font-mono,ui-monospace,Consolas,monospace);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.nt-fila{display:grid;grid-template-columns:36px minmax(0,1fr) 10px;gap:11px;align-items:start;padding:11px 16px;border-top:1px solid var(--border);
  text-decoration:none;color:inherit;cursor:pointer;white-space:normal}
.nt-fila:hover{background:var(--bg-surface-2)}
.nt-fila.nuevo{background:var(--accent-dim)}
.nt-fila.nuevo:hover{background:var(--bg-surface-2)}
.nt-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--bg-surface-3);color:var(--text-2)}
.nt-ic svg{width:18px;height:18px}
.nt-ic.v{background:rgba(84,200,146,.14);color:var(--success,#54C892)}
.nt-ic.c{background:rgba(111,168,255,.14);color:#6FA8FF}
.nt-ic.s{background:rgba(232,176,75,.15);color:var(--warning,#E8B04B)}
.nt-ic.p{background:var(--accent-dim);color:var(--accent-hover)}
.nt-cu{display:block;min-width:0}
.nt-tt{display:block;font-weight:650;font-size:13.5px;line-height:1.3;color:var(--text-1)}
.nt-tx{display:block;font-size:12.8px;color:var(--text-2);line-height:1.42;margin-top:2px;overflow-wrap:anywhere}
.nt-tx b{color:var(--text-1);font-weight:600}
.nt-mt{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:11.5px;color:var(--text-3)}
.nt-chip{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;border-radius:99px;border:1px solid currentColor}
.nt-chip.v{color:var(--success,#54C892)} .nt-chip.c{color:#6FA8FF} .nt-chip.s{color:var(--warning,#E8B04B)}
[data-theme="light"] .nt-chip.v,[data-theme="light"] .nt-ic.v{color:#157a4d} [data-theme="light"] .nt-chip.c,[data-theme="light"] .nt-ic.c{color:#1f5fbf}
[data-theme="light"] .nt-chip.s,[data-theme="light"] .nt-ic.s{color:#8a5a00}
.nt-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;background:transparent}
.nt-fila.nuevo .nt-dot{background:var(--accent)}
.nt-pie{padding:12px 16px;text-align:center;font-size:13px;font-weight:650;color:var(--accent-hover);border-top:1px solid var(--border);background:var(--bg-surface-2);cursor:pointer}
/* la página */
.nt-pag{max-width:860px;margin:0 auto;width:100%}
.nt-pcab{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.nt-pcab h1{font-family:var(--font-display);font-size:26px;line-height:1.15;margin:0;color:var(--text-1)}
.nt-pcab p{margin:3px 0 0;color:var(--text-2);font-size:13.5px}
.nt-btn{border:1px solid var(--border-strong);background:transparent;color:var(--text-1);border-radius:10px;padding:9px 14px;font:600 13px var(--font-body);cursor:pointer;min-height:38px}
.nt-btn:hover{border-color:var(--accent)} .nt-btn[disabled]{opacity:.5;cursor:default}
.nt-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.nt-tabs button{padding:7px 14px;min-height:36px;border-radius:99px;border:1px solid var(--border-strong);background:transparent;font:600 13px var(--font-body);color:var(--text-2);cursor:pointer}
.nt-tabs button.on{background:var(--btn-bg,var(--accent));border-color:transparent;color:var(--btn-fg,#1A1305)}
.nt-tabs button em{font-style:normal;opacity:.75;margin-left:5px}
.nt-caja{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.nt-caja .nt-sec:first-child{padding-top:12px}
.nt-fila.ancha{grid-template-columns:40px minmax(0,1fr) auto;padding:14px 18px}
.nt-fila.ancha .nt-ic{width:40px;height:40px}
.nt-ir{align-self:center;font-size:12.5px;font-weight:650;color:var(--accent-hover);white-space:nowrap}
.nt-nada{padding:44px 20px;text-align:center;color:var(--text-2);font-size:14px}
.nt-nada b{display:block;font-family:var(--font-display);font-size:18px;color:var(--text-1);margin-bottom:4px}
@media (max-width:640px){ .nt-fila.ancha{grid-template-columns:36px minmax(0,1fr);padding:12px 14px} .nt-fila.ancha .nt-ic{width:36px;height:36px} .nt-ir{display:none}
  .nt-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:0 16px} .nt-tabs button{flex:none} .nt-pcab h1{font-size:22px} }