/* Ficha de juego, listado de plataforma y migas de pan (usa las variables de styles.css) */
.catalog-page{max-width:980px;margin:0 auto;padding:20px 16px 60px;width:100%}
.crumbs{font-size:.85rem;color:var(--text-secondary)}
.crumbs-global{margin:16px 0 0;padding:0}
.catalog-page .crumbs{margin:0 0 16px;padding:0}
.crumbs a{color:var(--text-secondary);text-decoration:none}
.crumbs a:hover{color:var(--gold-mid)}
.crumbs .here{color:var(--text-primary)}

.cat-hero{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:center;background:var(--bg-medium);border:1px solid var(--bg-light);border-radius:var(--border-radius);padding:20px}
.cat-cover{display:flex;align-items:center;justify-content:center;min-height:150px}
.cat-cover img{max-width:100%;max-height:240px;display:block;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.cat-hero h1{margin:0 0 4px;font-size:1.9rem;line-height:1.2}
.cat-plat{font-weight:600;margin-bottom:12px}
.cat-plat a{color:var(--gold-mid);text-decoration:none}
.cat-range{font-size:1.15rem;margin:0 0 6px}
.cat-range strong{color:var(--gold-mid)}
.cat-meta{color:var(--text-secondary);font-size:.9rem}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 8px}
.cat-chip{padding:3px 10px;border:1px solid var(--bg-light);border-radius:999px;font-size:.82rem;background:var(--header-bg);color:var(--text-primary)}
.cat-chip:first-child{color:var(--text-secondary)}
.cat-chip.chip-new{background:rgba(232,195,126,.18);color:var(--gold-mid);border-color:transparent}
.cat-cta{display:inline-block;margin-top:14px;padding:9px 16px;border:2px solid var(--gold-mid);border-radius:var(--border-radius);color:var(--gold-mid);font-weight:700;text-decoration:none;background:transparent;cursor:pointer;font-family:inherit;font-size:1rem}
.cat-cta:hover{background:rgba(232,195,126,.12)}

.catalog-page h2{font-size:1.2rem;margin:32px 0 10px}
.cat-tablewrap{background:var(--bg-medium);border:1px solid var(--bg-light);border-radius:var(--border-radius);overflow:hidden}
.cat-table{width:100%;border-collapse:collapse}
.cat-table th,.cat-table td{padding:11px 12px;text-align:left;font-size:.93rem}
.cat-table th{background:var(--header-bg);color:var(--text-secondary);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.cat-table tr+tr td{border-top:1px solid var(--bg-light)}
.cat-table tbody tr:hover{background:rgba(255,255,255,.03)}
.cat-table td.cat-price{font-weight:700;white-space:nowrap}
.cat-table td.go{text-align:right;white-space:nowrap}
.cat-table a{color:var(--gold-mid);text-decoration:none}
.cat-table a:hover{text-decoration:underline}
.pill-new{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:600;background:rgba(232,195,126,.18);color:var(--gold-mid)}
.cat-conf{white-space:nowrap}

.cat-other{margin-top:14px;padding:14px 16px;background:var(--bg-medium);border:1px dashed var(--gold-dark);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.cat-other p{margin:0}
.cat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.cat-card{background:var(--bg-medium);border:1px solid var(--bg-light);border-radius:var(--border-radius);padding:10px;color:var(--text-primary);text-decoration:none;display:block}
.cat-card:hover{border-color:var(--gold-dark)}
.cat-thumb{height:110px;margin-bottom:8px;background:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cat-thumb img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.cat-card span{display:block;font-size:.88rem;line-height:1.25}
.cat-card small{color:var(--text-secondary)}
.cat-how{margin-top:32px;color:var(--text-secondary);font-size:.9rem}
.cat-more{margin-top:14px}
.cat-more a{color:var(--gold-mid)}

.cat-letters{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 18px}
.cat-letters a{padding:4px 9px;border:1px solid var(--bg-light);border-radius:6px;color:var(--text-secondary);font-size:.85rem;text-decoration:none}
.cat-letters a.on{background:var(--gold-mid);color:#000;border-color:var(--gold-mid);font-weight:700}
.cat-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.cat-lead{color:var(--text-secondary);margin:0 0 6px}
.game-list-platform a,.game-list-platform a:visited{color:var(--text-secondary);text-decoration:none}
.game-list-platform a:hover{color:var(--gold-mid);text-decoration:underline}

/* Módulo de plataformas (home): discreto */
.plat-strip{margin:0;padding:10px 14px;background:transparent;border:1px solid var(--bg-light);border-radius:var(--border-radius);font-size:.82rem}
.plat-strip-title{display:flex;align-items:center;gap:8px;color:var(--text-primary);margin-bottom:15px;font-size:1.1rem;font-weight:700}
.plat-strip-list{display:flex;flex-wrap:wrap;gap:4px 6px}
.plat-strip-list a{padding:2px 9px;border-radius:999px;color:var(--text-secondary);text-decoration:none;border:1px solid transparent;white-space:nowrap}
.plat-strip-list a:hover{color:var(--gold-mid);border-color:var(--gold-dark)}

/* Ficha de variante (/variant/<id>): paneles del mismo estilo que la ficha de juego */
.variant-page{max-width:1100px}
.variant-page .game-card{max-width:none;margin:0;padding:0;background:none;border:0;box-shadow:none;display:flex;flex-direction:column;gap:16px}
.vp-top,.vp-panel{background:var(--bg-medium);border:1px solid var(--bg-light);border-radius:var(--border-radius)}
.vp-top{display:grid;grid-template-columns:230px 1fr;gap:12px 28px;padding:24px;align-items:start}
.vp-cover{display:flex;align-items:center;justify-content:center;min-height:160px}
.vp-cover .game-cover{max-height:300px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.vp-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.vp-title{margin:0;flex:1 1 320px;min-width:0}
.vp-head .game-actions{margin:0;flex:0 0 auto}
.vp-main{min-width:0;display:flex;flex-direction:column;gap:14px}
.variant-page .game-title{margin:0;font-size:1.8rem;line-height:1.2;color:var(--text-primary)}
.vp-chips{margin:0;gap:8px}
.vp-chips .flag-price{background:var(--header-bg);border:1px solid var(--bg-light);padding:3px 10px;font-size:.82rem;border-radius:999px}
.vp-muted{color:var(--text-secondary)}

/* Estimación: panel sobrio, el precio en dorado */
.vp-estimation{flex:none;border-top:1px solid var(--bg-light);padding-top:14px}
.vp-estimation .estimation-box{background:none;box-shadow:none;padding:0;height:auto}
.vp-estimation .estimation-box h3{color:var(--text-secondary);text-align:left;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px}
.vp-estimation .price-display{text-align:left;margin:0}
.vp-estimation .price-main{justify-content:flex-start;margin-bottom:6px;flex-wrap:wrap;gap:12px}
.vp-estimation .price{font-size:2.5rem;line-height:1.1;color:var(--gold-mid)}
.vp-estimation .confidence-badge{box-shadow:none;padding:4px 10px;font-size:.8rem}
.vp-estimation .heatmap-container{margin:8px 0 0;max-width:520px}
.vp-estimation .heatmap-visual{height:12px;border-radius:999px}
.vp-estimation .range-labels{color:var(--text-secondary);font-size:.82rem}
.vp-estimation .price-min,.vp-estimation .price-max{color:var(--text-secondary);font-weight:600}
.vp-estimation .warning-banner{background:rgba(232,195,126,.08);border:1px solid rgba(217,161,84,.45);color:var(--gold-mid);text-align:left;font-weight:500;font-size:.85rem;padding:8px 12px;margin:0 0 12px}
.vp-estimation .currency-conversion .conversion-buttons{justify-content:flex-start;margin:10px 0 0;gap:6px}
.vp-estimation .currency-btn{background:var(--header-bg);color:var(--text-secondary);border:1px solid var(--bg-light);padding:4px 12px;min-width:0;font-size:.8rem;font-weight:600}
.vp-estimation .currency-btn:hover{transform:none;color:var(--text-primary)}
.vp-estimation .currency-btn.active{background:rgba(232,195,126,.15);color:var(--gold-mid);border-color:var(--gold-dark)}

/* Paneles */
.vp-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.vp-panel{padding:18px 20px}
.variant-page .vp-panel.game-history,.variant-page .vp-panel.game-explanation{margin:0;text-align:left}
.vp-panel h3,.variant-page .price-explanation h3{margin:0 0 12px;color:var(--text-secondary);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-align:left}
.variant-page .price-explanation{margin:0;padding:0;background:none}
.variant-page .price-explanation li{margin-bottom:8px;font-size:.92rem;line-height:1.4}
.variant-page .price-explanation-label{color:var(--text-secondary)}
.variant-page .history-chart-container{height:240px}
.vp-countries .features-grid{margin:0}
.variant-page .game-users-tabs{margin:0;padding:18px 20px;border:1px solid var(--bg-light);border-radius:var(--border-radius);background:var(--bg-medium)}
.variant-page .tab-btn{background:none;color:var(--text-secondary);padding:6px 14px;border:1px solid var(--bg-light);border-radius:999px;font-size:.88rem;flex:none;min-width:0}
.variant-page .tab-btn.active{background:rgba(232,195,126,.15);color:var(--gold-mid);border-color:var(--gold-dark);font-weight:600}
.variant-page .tabs-header{display:flex;gap:8px}
.variant-more{margin-top:16px}
/* Usuarios que lo tienen: mismos chips que el módulo de plataformas */
.variant-page .flag-user{background:none;border:1px solid transparent;color:var(--text-secondary);padding:2px 10px;border-radius:999px;font-size:.88rem}
.variant-page .flag-user-link:hover{transform:none;color:var(--gold-mid);border-color:var(--gold-dark)}
.variant-page .tab-panel{gap:4px 6px}

/* Acciones: añadir en verde, quitar en rojo, wishlist neutra con corazón */
.variant-page .game-actions{margin-top:2px}
.variant-page .game-actions .inline-form{gap:8px;flex-wrap:wrap}
.variant-page .game-actions .btn{padding:8px 14px;background:transparent;border:1.5px solid var(--bg-light);color:var(--text-primary);border-radius:var(--border-radius);font-weight:600;font-size:.88rem;box-shadow:none}
.variant-page .game-actions .btn[value="collection"]{border-color:#4caf7a;color:#6fcf97}
.variant-page .game-actions .btn[value="collection"]:hover{background:rgba(76,175,122,.14)}
.variant-page .game-actions .btn[value="wishlist"]{border-color:rgba(255,255,255,.65)}
.variant-page .game-actions .btn[value="wishlist"] i{color:#ff7eb6}
.variant-page .game-actions .btn[value="wishlist"]:hover{border-color:#ff7eb6;background:rgba(255,126,182,.12)}
.variant-page .collection-status{width:auto;align-items:center;flex-wrap:wrap}
.variant-page a.status-badge{text-decoration:none}
.variant-page a.status-badge:hover{background:rgba(106,167,255,.22)}
.variant-page .status-badge{background:rgba(106,167,255,.12);color:#8dbbff;border:1px solid rgba(106,167,255,.45);border-radius:999px;padding:6px 12px}
.variant-page .status-badge i{color:#8dbbff}
.variant-page .collection-status .btn-remove{border-color:#e5534b;color:#ff8a82}
.variant-page .collection-status .btn-remove:hover{background:rgba(229,83,75,.14)}
.variant-page .collection-status .btn-add{border-color:#4caf7a;color:#6fcf97}
.variant-page .collection-status .btn-add:hover{background:rgba(76,175,122,.14)}

.cat-table .lbl{display:none}
@media (max-width:720px){
  .vp-top{grid-template-columns:1fr;padding:16px;gap:16px}
  .vp-cover{min-height:0}
  .vp-cover .game-cover{max-height:220px}
  .vp-grid{grid-template-columns:1fr}
  .vp-head .game-actions{flex:1 1 100%}
  .variant-page .game-title{font-size:1.45rem}
  .vp-estimation .price{font-size:2.1rem}
  .plat-strip-list{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .cat-hero{grid-template-columns:1fr;gap:14px;padding:14px}
  .cat-hero h1{font-size:1.4rem}
  .cat-range{font-size:1rem}
  .cat-tablewrap{background:none;border:0;border-radius:0;overflow:visible}
  .cat-table thead{display:none}
  .cat-table,.cat-table tbody{display:block;width:100%}
  .cat-table tbody{display:flex;flex-direction:column;gap:12px}
  .cat-table tr,.cat-table tbody tr:hover{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;padding:14px;background:var(--bg-medium);border:1px solid var(--bg-light);border-radius:12px}
  .cat-table tr::after{content:"";order:1;flex:0 0 100%;height:0;margin:0}
  .cat-table td{display:block;width:auto;padding:0;border:0!important;font-size:.9rem}
  .cat-table td:nth-child(-n+4){order:0;margin-right:8px}
  .cat-table td:nth-child(1){font-size:1rem;color:var(--text-primary)}
  .cat-table td:nth-child(2){color:var(--text-secondary)}
  .cat-table td:nth-child(3),.cat-table td:nth-child(4){border:1px solid var(--bg-light)!important;border-radius:999px;padding:2px 10px;font-size:.78rem;color:var(--text-secondary)}
  .cat-table td:nth-child(3) .pill-new{padding:0;background:none}
  .cat-table td:nth-child(n+5):nth-child(-n+7){order:2;align-self:stretch;flex:1 1 28%;min-width:0;padding-top:10px!important;border-top:1px solid var(--bg-light)!important}
  .cat-table .lbl{display:block;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:2px}
  .cat-table td.cat-price{font-size:1.15rem;font-weight:700;color:var(--text-primary)}
  .cat-table td.cat-conf,.cat-table td:nth-child(7){font-size:.88rem;color:var(--text-primary)}
  .cat-table td.go{order:3;flex:0 0 100%;margin-top:2px}
  .cat-table td.go a{display:block;text-align:center;padding:8px;border:1px solid var(--gold-dark);border-radius:8px}
}

/* Novedades de la home: sale pegado a la izquierda, espera un instante y se desplaza hacia la izquierda */
@keyframes ticker-run{0%,6%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.news-ticker span{padding-right:100%;animation:ticker-run 40s linear infinite}


/* Pestañas "en colección / en lista de deseos": nunca se salen */
.variant-page .tabs-header{flex-direction:row;flex-wrap:nowrap;gap:8px}
.variant-page .tab-btn{width:auto;flex:1 1 0;min-width:0;white-space:normal;line-height:1.2;text-align:center}

/* Ficha de variante: acciones arriba a la derecha en escritorio, encima de la tarjeta en móvil */
.vp-hero{position:relative}
.vp-hero .vp-actions{position:absolute;top:24px;right:24px;z-index:1;margin:0}
.vp-hero.has-actions .vp-head{padding-right:370px}

@media (max-width:720px){
  .catalog-page{padding:12px 0 50px}
  .vp-top{grid-template-columns:104px 1fr;gap:12px;padding:14px;align-items:center}
  .vp-title{flex:1 1 100%}
  .vp-main{display:contents}
  .vp-chips{align-content:center}
  .vp-estimation{grid-column:1/-1}
  .vp-cover .game-cover{max-height:150px;width:100%;object-fit:contain}
  .vp-panel,.variant-page .game-users-tabs{padding:14px}
  .variant-page .tab-btn{padding:7px 6px;font-size:.8rem}
  .vp-hero .vp-actions{position:static;margin:0 0 10px}
  .vp-hero.has-actions .vp-head{padding-right:0}
  .variant-page .game-actions{display:block;width:100%;margin:0;padding:0}
  .variant-page .game-actions .inline-form,.variant-page .game-actions .collection-status{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:8px;width:100%;margin:0}
  .variant-page .game-actions .collection-status>*,.variant-page .game-actions .inline-form>*{flex:1 1 0;min-width:0}
  .variant-page .game-actions .btn,.variant-page .game-actions .status-badge{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 8px;font-size:.72rem;line-height:1.2;white-space:normal;text-align:center}
}