/* La interfaz Colecciones mantiene el CSS/JS retail ya instalado. */
.collection-bar .collection-progress-0{width:0%}
.collection-bar .collection-progress-1{width:16.67%}
.collection-bar .collection-progress-2{width:33.33%}
.collection-bar .collection-progress-3{width:50%}
.collection-bar .collection-progress-4{width:66.67%}
.collection-bar .collection-progress-5{width:83.33%}
.collection-bar .collection-progress-6{width:100%}
.collection-legacy-nav{margin:0 auto 15px;max-width:1410px;padding:0 23px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.collection-legacy-nav a{font-size:12px;color:#b6c9dd}.collection-legacy-nav a[aria-current=page]{color:#f5ca7a}
.collection-legacy-nav a:hover{color:#ffe1a1}
.collection-wrap{margin-inline:auto}
@media(max-width:700px){.collection-legacy-nav{gap:12px}.collection-wrap{width:96%}}

/* Rakion Legacy / Colecciones: buscador integrado en la lista lateral.
   Afecta únicamente al explorador visual; filtros/selección de JS sin cambios. */
.collection-explorer {
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.collection-explorer > * { min-width: 0; }
.collection-set-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: min(82vh, 810px);
  position: sticky;
  top: 14px;
  overflow: hidden;
}
.collection-set-sidebar-head { flex: none; }
.collection-sidebar-controls {
  flex: none;
  min-width: 0;
  padding: 12px 12px 10px;
  display: grid;
  gap: 9px;
  border-bottom: 1px solid #303e50;
  background: #142031;
}
.collection-sidebar-controls .collection-search {
  display: flex;
  min-width: 0;
  max-width: none;
  width: 100%;
  flex: none;
  gap: 7px;
  padding: 0 9px;
  box-sizing: border-box;
  border: 1px solid #54637a;
  border-radius: 7px;
  background: #0d1726;
}
.collection-sidebar-controls .collection-search > span { font-size: 19px; flex: none; }
.collection-sidebar-controls .collection-search input {
  min-width: 0;
  width: 100%;
  height: 35px;
  box-sizing: border-box;
  font-size: 12px;
}
.collection-sidebar-controls .collection-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}
.collection-sidebar-controls .collection-filter {
  min-width: 0;
  width: 100%;
  padding: 7px 3px;
  font-size: 10px;
  line-height: 1.2;
  border-radius: 6px;
  text-align: center;
}
.collection-sidebar-controls .collection-result-count {
  min-height: 0;
  margin: 0;
  line-height: 1.4;
  font-size: 10px;
  color: #a9b8cb;
}
.collection-set-sidebar .collection-set-list {
  flex: 1 1 auto;
  min-height: 115px;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
.collection-set-sidebar-foot {
  flex: none;
  background: #151e2e;
}
@media (max-width: 920px) {
  .collection-explorer { grid-template-columns: minmax(0, 1fr); }
  .collection-set-sidebar { position: static; max-height: none; }
  .collection-set-sidebar .collection-set-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 330px;
    min-height: 0;
    overflow-y: auto;
  }
  .collection-sidebar-controls .collection-search { max-width: none; }
}
@media (max-width: 580px) {
  .collection-set-sidebar .collection-set-list {
    grid-template-columns: minmax(0, 1fr);
    max-height: 375px;
  }
}

/* FIX3: buscador sin desborde visual y más familias por página (15).
   El alto del lateral acompaña a la ficha derecha con scroll interno. */
@media(min-width:921px){
 .collection-explorer{grid-template-columns:305px minmax(0,1fr);align-items:start}
 .collection-set-sidebar{max-height:none;min-height:600px;height:auto;box-sizing:border-box}
 .collection-set-sidebar .collection-set-list{min-height:0;flex:1 1 auto;max-height:none;overflow-y:auto;overflow-x:hidden}
}
.collection-sidebar-controls{box-sizing:border-box;width:100%;min-width:0;overflow:hidden}
.collection-sidebar-controls label.collection-search{
 box-sizing:border-box;width:100%;min-width:0;max-width:100%;
 display:flex;align-items:center;gap:8px;overflow:hidden;
 padding:0 11px;height:40px;border:1px solid #52627b;
 background:#101b2a;border-radius:7px;box-shadow:none;
}
.collection-sidebar-controls label.collection-search:focus-within{
 border-color:#d7ad62;box-shadow:0 0 0 1px rgba(215,173,98,.35);
}
.collection-sidebar-controls label.collection-search > span{
 flex:0 0 16px;line-height:1;text-align:center;color:#a7b8d0;
}
.collection-sidebar-controls label.collection-search > input#collection-search{
 -webkit-appearance:none;appearance:none;flex:1 1 0%;
 box-sizing:border-box;display:block;min-width:0;width:0;max-width:100%;height:36px;
 margin:0;padding:0;border:0!important;outline:0!important;
 box-shadow:none!important;background:transparent!important;border-radius:0!important;
 color:#e5ecf7;font-size:12px;line-height:36px;
}
.collection-sidebar-controls label.collection-search > input#collection-search:focus,
.collection-sidebar-controls label.collection-search > input#collection-search:focus-visible{
 outline:0!important;border:0!important;box-shadow:none!important;
}
@media(max-width:920px){
 .collection-sidebar-controls{overflow:visible}
 .collection-set-sidebar{height:auto!important;max-height:none!important;min-height:0!important}
}

/* Navegación de Colecciones, subsección de Mi Cuenta (Etapa navegación FIX1). */
.collection-account-nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  max-width:1410px;margin:12px auto 16px;padding:0 23px;box-sizing:border-box;
}
.collection-account-nav a{
  display:inline-flex;align-items:center;min-height:35px;padding:8px 12px;
  color:#bbcadb;border:1px solid #34455c;background:#151e2d;
  border-radius:7px;font-size:11px;font-weight:700;text-decoration:none;
}
.collection-account-nav a:hover,.collection-account-nav a:focus-visible{
  border-color:#a78145;color:#ffe2a9;outline-offset:2px;
}
.collection-account-nav a.is-active{
  color:#ffe4a9;border-color:#b18746;background:#342a1b;
}
.collection-account-nav a.collection-account-home{color:#f0c779}
@media(max-width:640px){
  .collection-account-nav{gap:6px;padding:0 12px}
  .collection-account-nav a{flex:1 1 auto;justify-content:center;text-align:center}
}


/* DISTRIBUCION COLECCIONES FIX1 - CSS PURO */
/* Colecciones mantiene el ancho necesario para las seis piezas, pero
   se alinea al encabezado y deja el mismo espacio de inicio que el Mercado. */
body>.collection-wrap{
  box-sizing:border-box;max-width:var(--rk-inner);
  width:min(var(--rk-inner),calc(100% - 44px));
  margin:0 auto;padding-top:20px;padding-bottom:74px!important;
}
.collection-wrap .collection-hero{margin-bottom:18px;padding:31px 35px}
.collection-wrap .collection-character-panel{margin-bottom:16px}
.collection-wrap .collection-summary{gap:16px;margin-bottom:19px}
.collection-wrap .collection-catalog-head{margin-bottom:15px}
/* Colecciones compactas: preservar las tres columnas cuando hay espacio
   y bajar a dos/una antes de que se recorten los requisitos. */
@media(min-width:1180px){
  .collection-wrap .collection-explorer{grid-template-columns:290px minmax(0,1fr);gap:16px}
  .collection-wrap .collection-set-view .collection-pieces{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1179px) and (min-width:921px){
  .collection-wrap .collection-explorer{grid-template-columns:270px minmax(0,1fr);gap:14px}
  .collection-wrap .collection-set-view .collection-pieces{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:1000px){
  .container>.rk-market-portal .rk-account-layout{grid-template-columns:195px minmax(0,1fr);gap:13px}
  .container>.rk-market-portal .rk-account-panel{padding:18px}
  .container>.rk-market-portal .rk-market-section .rk-market-content{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
  .container>.rk-market-portal .rk-account-layout{grid-template-columns:minmax(0,1fr)}
  .container>.rk-market-portal .rk-account-sidebar{position:static}
  .collection-wrap .collection-summary{gap:9px}
  .collection-wrap .collection-hero{padding:23px}
}
@media(max-width:720px){
  .topbar{padding:18px 16px;gap:12px}
  .topbar nav{gap:14px}
  .container{padding-inline:16px}
  .container>.hero{padding:53px 0 52px}
  .container>.page-heading{padding:46px 0 23px}
  .container>.panel-grid{gap:12px}
  .container>.rk-market-portal.rk-market-full{padding-top:20px;padding-bottom:46px}
  .container>.rk-market-portal .rk-market-section{padding:16px 12px 19px}
  .container>.rk-market-portal .rk-account-panel{padding:16px}
  body>.collection-wrap{width:calc(100% - 28px);padding-top:14px}
  .collection-wrap .collection-summary{grid-template-columns:1fr}
  .collection-wrap .collection-hero{padding:18px}
  .footer{padding-inline:16px}
}


/* RAKION LEGACY | ALINEACION COLECCIONES FIX2 | solo presentacion
   Alinea cabecera y catalogo a la anchura util del portal.
*/
body > main.collection-wrap,
body > .collection-wrap {
  box-sizing:border-box; width:calc(100% - 44px);
  max-width:var(--rk-inner,1240px);
  margin-left:auto;margin-right:auto;
  padding-top:28px;
}
.collection-wrap .collection-hero,
.collection-wrap .collection-character-panel,
.collection-wrap .collection-summary,
.collection-wrap .collection-catalog-head,
.collection-wrap .collection-explorer{max-width:100%;box-sizing:border-box}
.collection-wrap .collection-explorer{min-width:0}
@media(max-width:720px){
 body > main.collection-wrap,body > .collection-wrap{width:calc(100% - 28px);padding-top:16px}
 .collection-wrap .collection-hero{padding:20px}
}

/* RAKION LEGACY - COLECCIONES - TARJETAS IGUALES FIX6
   Presentacion exclusivamente. Grilla retail 3x2 en escritorio.
   Reserva visual: encabezado + 4 atributos + 4 gemas/sockets.
   Los requisitos reales se conservan intactos y no se crean filas falsas. */
@media (min-width:1180px) {
  .collection-wrap .collection-set-view .collection-pieces {
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:minmax(565px,1fr);
    align-items:stretch;
    gap:12px;
  }
  .collection-wrap .collection-set-view .collection-pieces > .collection-piece {
    align-self:stretch;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(104px,auto) minmax(0,1fr);
    gap:12px;
    min-height:565px;
    height:auto;
    min-width:0;
  }
  .collection-wrap .collection-set-view .collection-piece > .collection-req-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(174px,0.85fr) minmax(225px,1fr);
    gap:10px;
    min-width:0;
    min-height:0;
    align-content:stretch;
  }
  /* El bloque de atributos siempre arriba y el de gemas siempre abajo,
     incluso si falta uno de ellos. */
  .collection-wrap .collection-set-view .collection-req-grid > .collection-req-section:has(.collection-option) {grid-row:1}
  .collection-wrap .collection-set-view .collection-req-grid > .collection-req-section:has(.collection-socket) {grid-row:2}
  .collection-wrap .collection-set-view .collection-req-grid > .collection-no-extra {
    align-self:start;
    margin:0;
    line-height:1.55;
  }
  .collection-wrap .collection-set-view .collection-req-grid > .collection-req-section {
    align-self:stretch;
    min-width:0;
  }
}
/* En tablets y telefonos: evitar tarjetas desmesuradas y permitir
   la reduccion responsiva que ya existe en Colecciones. */
@media (max-width:1179px) {
  .collection-wrap .collection-set-view .collection-pieces > .collection-piece {
    min-height:0;
    height:auto;
  }
}

/* RAKION LEGACY - COLECCIONES - REMATE VISUAL FIX7 (solo CSS)
   Mantener las 6 piezas uniformes 3x2; reducir ligeramente el alto
   sin perder capacidad para 4 atributos y 4 gemas/sockets.
   El estado pasa a la esquina superior, para que no parta los nombres. */
@media (min-width:1180px) {
  .collection-wrap .collection-set-view .collection-pieces {
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:minmax(535px,1fr);
    gap:12px;
    align-items:stretch;
  }
  .collection-wrap .collection-set-view .collection-pieces > .collection-piece {
    min-height:535px;
    grid-template-rows:minmax(92px,auto) minmax(0,1fr);
    gap:9px;
    padding:12px;
    overflow:visible;
  }
  .collection-wrap .collection-set-view .collection-piece > .collection-req-grid {
    grid-template-rows:minmax(158px,.8fr) minmax(217px,1fr);
    gap:8px;
  }
  .collection-wrap .collection-set-view .collection-piece-heading {
    position:relative;
    padding-top:21px;
    align-items:center;
    gap:9px;
    min-height:92px;
    min-width:0;
  }
  .collection-wrap .collection-set-view .collection-piece-heading .collection-item-state {
    position:absolute;
    right:0;
    top:0;
    margin:0;
    padding:3px 7px;
    font-size:9px;
    line-height:1.25;
  }
  .collection-wrap .collection-set-view .collection-piece-heading-content {
    min-width:0;
    flex:1 1 auto;
  }
  .collection-wrap .collection-set-view .collection-piece-heading-content > strong {
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
}

/* RAKION LEGACY - COLECCIONES - BUSCADOR COMPACTO FIX9
   La cuadrícula del listado se estiraba cuando el filtro dejaba pocas
   familias visibles: ahora todas las coincidencias empiezan arriba.
   Mantiene scroll propio, orden de familias y paginado existentes. */
.collection-explorer .collection-set-sidebar .collection-set-list {
  align-content: start;
  grid-auto-rows: max-content;
  align-items: stretch;
  justify-content: stretch;
}
/* Igual al filtrar en móvil, donde la lista puede tener dos columnas. */
@media (max-width: 920px) {
  .collection-explorer .collection-set-sidebar .collection-set-list {
    align-content: start;
    grid-auto-rows: max-content;
  }
}