@charset "utf-8";
/* =============================================================================
   Tienda virtual (ItemShop/Avatar.aspx, ItemShop/Items.aspx) dentro del marco clasico: blanco y naranja del portal,
   con las vitrinas en el lila de la tienda del juego. Todo bajo #tienda (y .ts-modal para la ventana).
   ========================================================================== */
#tienda,.ts-modal-bg{--c:#fe7e00;--c2:#ff9d3a;--c3:#fff3e6;--l:#efe9fb;--l2:#ddd2f5;--l3:#7a5bc0;--t:#434343;--t2:#707070;--t3:#9a9a9a;
  --cash:#1e7fd8;--oro:#d79a00;--gcoin:#21a36b;--epoin:#7b45d6;--borde:#e3dccf;--ok:#3d9a2f}
#tienda{clear:both;margin:14px 0 30px;color:var(--t);font:12px/1.5 Tahoma,Verdana,Geneva,sans-serif}
#tienda *{box-sizing:border-box}
#tienda h3,#tienda h4{margin:0;font-family:Tahoma,Verdana,sans-serif}
#tienda p{margin:0}
.gb-av{display:block;image-rendering:pixelated;image-rendering:crisp-edges}

/* cabecera */
.ts-cab{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 16px;border:1px solid #f5d29a;border-radius:6px;
  background:linear-gradient(180deg,#fffaf2,#fff3e2)}
.ts-cab h3{font-size:16px;color:#d96a00;margin-bottom:3px}
.ts-cab p{color:var(--t2);max-width:560px}
.ts-saldos{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ts-saldo{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:16px;background:#fff;border:1px solid var(--borde)}
.ts-saldo i{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 4px;border-radius:11px;color:#fff;font:bold 10px Tahoma,sans-serif;font-style:normal}
.ts-saldo b{font:bold 14px Tahoma,sans-serif;color:var(--t)}
.ts-saldo small{color:var(--t3)}
.ts-recargar{display:flex;align-items:center;padding:5px 12px;border-radius:16px;background:var(--epoin);color:#fff!important;font:bold 11px Tahoma,sans-serif;text-decoration:none}
.ts-m-cash i{background:var(--cash)} .ts-m-oro i{background:var(--oro)} .ts-m-gcoin i{background:var(--gcoin)} .ts-m-epoin i{background:var(--epoin)}

/* secciones y pestanas */
.ts-secciones{display:flex;gap:4px;margin-top:14px;border-bottom:2px solid var(--c)}
.ts-secciones a{padding:9px 26px;border-radius:6px 6px 0 0;background:#f1f1f1;color:var(--t2);font:bold 13px Tahoma,sans-serif;text-decoration:none;border:1px solid #e1e1e1;border-bottom:0}
.ts-secciones a.es-activa{background:linear-gradient(180deg,var(--c2),var(--c));color:#fff;border-color:var(--c)}
.ts-barra{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 0}
.ts-pestanas{display:flex;flex-wrap:wrap;gap:5px}
.ts-pestanas a{padding:5px 11px;border-radius:14px;border:1px solid var(--borde);background:#fff;color:var(--t);font-weight:bold;text-decoration:none}
.ts-pestanas a small{color:var(--t3);font-weight:normal}
.ts-pestanas a:hover{border-color:var(--c)}
.ts-pestanas a.es-activa{background:var(--c);border-color:var(--c);color:#fff}
.ts-pestanas a.es-activa small{color:#ffe1c2}
.ts-busca{display:flex;margin-left:auto}
.ts-busca input{width:190px;height:28px;padding:0 9px;border:1px solid #ccc;border-right:0;border-radius:14px 0 0 14px;font:12px Tahoma,sans-serif}
.ts-busca button{height:28px;padding:0 10px;border:1px solid var(--c);border-radius:0 14px 14px 0;background:var(--c);color:#fff;cursor:pointer}

/* filtros de moneda y orden + buscador */
.ts-filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;margin:-2px 0 12px}
.ts-filtros label{display:flex;align-items:center;gap:6px;color:var(--t2);font-weight:bold}
.ts-filtros select{height:28px;padding:0 6px;border:1px solid #ccc;border-radius:14px;background:#fff;font:12px Tahoma,sans-serif;color:var(--t)}

/* rejilla */
.ts-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ts-carta{position:relative;display:flex;flex-direction:column;padding:8px;border:1px solid var(--borde);border-radius:8px;background:#fff;cursor:pointer;
  transition:transform .12s,box-shadow .12s,border-color .12s;outline:0}
.ts-carta:hover,.ts-carta:focus{transform:translateY(-2px);border-color:var(--c);box-shadow:0 6px 16px rgba(254,126,0,.18)}
.ts-carta h4{font-size:12px;font-weight:bold;color:var(--t);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 6px;padding:0 4px}
.ts-carta.es-destacada{border-color:var(--c2);box-shadow:0 0 0 1px rgba(254,126,0,.25)}
.ts-carta.es-tuya{opacity:.72}
.ts-carta.es-agotada{opacity:.55;cursor:default}
.ts-foto{position:relative;height:130px;display:flex;align-items:center;justify-content:center;border-radius:6px;overflow:hidden;
  background:radial-gradient(circle at 50% 55%,#fff 0%,var(--l) 55%,var(--l2) 100%)}
.ts-foto img{max-width:84px;max-height:84px}
.ts-etiqueta{position:absolute;left:6px;bottom:6px;padding:1px 7px;border-radius:9px;background:rgba(122,91,192,.85);color:#fff;font-size:10px;font-weight:bold}
.ts-cinta{position:absolute;top:30px;left:-4px;z-index:2;padding:1px 8px;background:var(--c);color:#fff;font-size:10px;font-weight:bold;border-radius:0 3px 3px 0}
.ts-nuevo{position:absolute;top:30px;right:12px;z-index:2;padding:0 6px;border-radius:3px;background:#e03030;color:#fff;font:bold 10px/16px Tahoma,sans-serif}
.ts-stock{position:relative;height:14px;margin-top:6px;border-radius:7px;background:#eee;overflow:hidden}
.ts-stock i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#ffb04d,var(--c))}
.ts-stock span{position:relative;display:block;text-align:center;font-size:9px;line-height:14px;font-weight:bold;color:#5a2a00}
.ts-stock.es-agotado{background:#ccc}
.ts-stock.es-agotado span{color:#555}
.ts-precios{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;margin-top:7px;min-height:20px}
.ts-precios small{flex-basis:100%;text-align:center;color:var(--t3);font-size:10px;line-height:12px}
.ts-precios span{display:inline-flex;align-items:center;gap:3px;font:bold 12px Tahoma,sans-serif}
.ts-precios i{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 3px;border-radius:8px;color:#fff;font:bold 9px Tahoma,sans-serif;font-style:normal}
.ts-precios .ts-m-cash{color:var(--cash)} .ts-precios .ts-m-oro{color:var(--oro)} .ts-precios .ts-m-gcoin{color:var(--gcoin)} .ts-precios .ts-m-epoin{color:var(--epoin)}
.ts-tuya{position:absolute;left:8px;right:8px;top:92px;padding:3px 0;text-align:center;background:rgba(61,154,47,.92);color:#fff;font-weight:bold;font-size:11px;border-radius:4px}
.ts-vacio{padding:30px;text-align:center;color:var(--t2)}

/* las 8 medidas en la tarjeta: a los lados del avatar, como la ficha de la tienda del juego (4 a la izquierda, 4 a la
   derecha), en chapitas que se apagan con 0 y se ponen rojas si restan */
.ts-st{position:absolute;inset:24px 5px 24px;display:flex;justify-content:space-between;pointer-events:none}
.ts-st ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:space-between}
.ts-st li{display:flex;align-items:center;gap:2px;height:18px;padding:0 5px 0 3px;border-radius:9px;background:rgba(255,255,255,.88);
  box-shadow:0 1px 2px rgba(80,50,140,.25);transition:transform .12s}
.ts-st ul.es-der li{flex-direction:row-reverse;padding:0 3px 0 5px}
.ts-st b{font:bold 11px/1 Tahoma,Verdana,sans-serif;color:#3b2a66;font-variant-numeric:tabular-nums}
.ts-st li.es-menos{background:rgba(255,232,232,.92)}
.ts-st li.es-menos b{color:#c0262a}
.ts-st li.es-cero{opacity:.38;box-shadow:none}
.ts-carta:hover .ts-st li:not(.es-cero){transform:scale(1.06)}
.ts-st i,.ts-barras i{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 15px;width:15px;height:15px}
.ts-st img,.ts-barras img{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.ts-st .ts-signo,.ts-barras .ts-signo{position:absolute;left:-3px;top:-2px}
.ts-foto .ts-etiqueta{z-index:1}

/* las 8 medidas en la ventana de compra: una barra por medida */
.ts-barras{padding:9px 11px;border:1px solid #e4dbf5;border-radius:8px;background:linear-gradient(180deg,#fbf9ff,#f3eefc)}
.ts-barras-cab{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px!important}
.ts-barras-cab span{font:bold 11px Tahoma,sans-serif;color:#7a5bc0;text-transform:uppercase;letter-spacing:.5px}
.ts-barras-cab b{padding:1px 8px;border-radius:9px;background:#7a5bc0;color:#fff;font:bold 11px Tahoma,sans-serif}
.ts-barras-cab b.es-menos{background:#c0262a}
.ts-barras ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.ts-barras li{display:grid;grid-template-columns:16px 104px 1fr 38px;align-items:center;gap:6px;font-size:11px;color:#555}
.ts-barras em{position:relative;height:8px;border-radius:4px;background:#e6def5;overflow:hidden}
.ts-barras u{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#a678f0,#7b45d6)}
.ts-barras li b{text-align:right;font:bold 12px Tahoma,sans-serif;color:#3b2a66;font-variant-numeric:tabular-nums}
.ts-barras li.es-menos u{background:linear-gradient(90deg,#f08080,#c0262a)}
.ts-barras li.es-menos b{color:#c0262a}
.ts-barras li.es-cero{opacity:.45}

/* paginas */
.ts-paginas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin-top:16px}
.ts-paginas a{min-width:28px;padding:4px 8px;border:1px solid var(--borde);border-radius:4px;background:#fff;color:var(--t);text-align:center;text-decoration:none;font-weight:bold}
.ts-paginas a.es-activa,.ts-paginas a:hover{background:var(--c);border-color:var(--c);color:#fff}
.ts-paginas span{margin-left:8px;color:var(--t3)}

.ts-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px 16px;border:1px solid #d96a00;border-radius:4px;cursor:pointer;
  font:bold 12px Tahoma,Verdana,sans-serif;color:#fff!important;text-decoration:none!important;background:linear-gradient(180deg,var(--c2),var(--c))}
.ts-btn:hover{filter:brightness(1.07)}
.ts-btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}

/* ventana de compra */
.ts-modal-bg{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,12,30,.6);animation:ts-entra .15s}
.ts-modal{position:relative;width:720px;max-width:100%;max-height:calc(100vh - 32px);overflow:auto;border-radius:10px;background:#fff;color:var(--t,#434343);
  font:12px/1.5 Tahoma,Verdana,sans-serif;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.ts-modal-cab{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(180deg,#ff9d3a,#fe7e00);color:#fff}
.ts-modal-cab h4{flex:1;margin:0;font-size:15px}
.ts-modal-cab small{opacity:.9}
.ts-cerrar{border:0;background:rgba(255,255,255,.2);color:#fff;width:28px;height:28px;border-radius:50%;font-size:16px;cursor:pointer}
.ts-modal-cuerpo{display:flex;gap:16px;padding:16px}
.ts-modal-izq{flex:0 0 270px;display:flex;flex-direction:column;gap:8px}
.ts-modal-foto{height:260px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:radial-gradient(circle at 50% 55%,#fff 0%,#efe9fb 55%,#ddd2f5 100%)}
.ts-modal-foto img{max-width:120px;max-height:120px}
.ts-vista{display:flex;gap:4px}
.ts-vista button{flex:1;padding:5px;border:1px solid #ddd2f5;border-radius:14px;background:#fff;color:#7a5bc0;font:bold 11px Tahoma,sans-serif;cursor:pointer}
.ts-vista button.es-activa{background:#7a5bc0;border-color:#7a5bc0;color:#fff}
.ts-modal-der{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.ts-tabla{width:100%;border-collapse:collapse;font-size:12px}
.ts-tabla th,.ts-tabla td{padding:6px 8px;border:1px solid #eee;text-align:center}
.ts-tabla th{background:#faf6ef;color:#707070;font-size:11px}
.ts-tabla td.ts-m{text-align:left;font-weight:bold}
.ts-tabla td.es-elegida{background:#fff3e6;font-weight:bold}
.ts-duraciones{display:flex;flex-wrap:wrap;gap:6px}
.ts-duraciones button{padding:7px 14px;border:1px solid #e3dccf;border-radius:16px;background:#fff;color:#434343;font:bold 12px Tahoma,sans-serif;cursor:pointer}
.ts-duraciones button.es-activa{background:#fe7e00;border-color:#fe7e00;color:#fff}
.ts-pagar{display:flex;flex-direction:column;gap:6px}
.ts-pagar .ts-btn{justify-content:space-between;width:100%;padding:10px 14px}
.ts-pagar .ts-btn.ts-m-cash{background:linear-gradient(180deg,#4aa0ec,#1e7fd8);border-color:#1667b3}
.ts-pagar .ts-btn.ts-m-oro{background:linear-gradient(180deg,#f0c040,#d79a00);border-color:#b88300}
.ts-pagar .ts-btn.ts-m-gcoin{background:linear-gradient(180deg,#43c48b,#21a36b);border-color:#1a8456}
.ts-pagar .ts-btn.ts-m-epoin{background:linear-gradient(180deg,#a678f0,#7b45d6);border-color:#6234b3}
.ts-aviso{padding:8px 10px;border-radius:6px;background:#fff3e6;border:1px solid #f5d29a;color:#8a5a00}
.ts-aviso.es-mal{background:#fdecec;border-color:#f3b4b4;color:#a12a2a}
.ts-aviso.es-bien{background:#eaf7e6;border-color:#b7e0ad;color:#2c6e22}
.ts-nota{color:#9a9a9a;font-size:11px}
.ts-desc{color:#555;font-size:12px;line-height:1.45}
.ts-incluye{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.ts-incluye li{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:6px;background:#faf6ef;font-size:12px}
.ts-incluye img{width:28px;height:28px;object-fit:contain}
.ts-para{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid #eee;border-radius:8px;background:#fcfcfc}
.ts-para-modo{display:flex;gap:4px}
.ts-para-modo button{flex:1;padding:6px;border:1px solid #e3dccf;border-radius:14px;background:#fff;color:#434343;font:bold 12px Tahoma,sans-serif;cursor:pointer}
.ts-para-modo button.es-activa{background:#7a5bc0;border-color:#7a5bc0;color:#fff}
.ts-para input{height:30px;padding:0 10px;border:1px solid #ccc;border-radius:15px;font:12px Tahoma,sans-serif}
.ts-para-quien{font-size:12px;min-height:16px}
.ts-para-quien.es-bien{color:#2c6e22;font-weight:bold}
.ts-para-quien.es-mal{color:#a12a2a}
.ts-confirma{display:flex;gap:6px}
.ts-confirma .ts-btn{flex:1}
.ts-btn-gris{background:#eee!important;color:#555!important;border-color:#ccc!important}
@keyframes ts-entra{from{opacity:0}to{opacity:1}}
@media (max-width:900px){.ts-rejilla{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){
  .ts-rejilla{grid-template-columns:repeat(2,1fr)}
  .ts-cab,.ts-modal-cuerpo{flex-direction:column;align-items:stretch}
  .ts-modal-izq{flex-basis:auto}
}