/* ============================================================
   SHOP — Tienda de items
   (grid, cards, precios, badges, preview de temas)
   ============================================================ */

.shop-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 8px;
}

/* ---------- TOPBAR ---------- */
.shop-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.shop-topbar h2 {
  font-size: 20px;
  color: var(--accent);
  letter-spacing: 1px;
}

.shop-balance {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 8px 14px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.shop-balance span {
  white-space: nowrap;
}

/* ---------- CATEGORÍAS ---------- */
.shop-categories {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}

.cat-btn {
  padding: 9px 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.cat-btn:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  border-color: var(--border-strong);
}

.cat-btn.active {
  background: rgba(128, 224, 255, .12);
  border-color: var(--accent-2);
  color: var(--accent-2);
  box-shadow: 0 0 0 2px rgba(128, 224, 255, .12);
}

/* ---------- GRID DE ITEMS ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

/* ---------- TARJETA DE ITEM ---------- */
.shop-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: all .2s;
  overflow: hidden;
}

.shop-item:hover:not(.owned) {
  border-color: var(--accent-2);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4), 0 0 0 1px rgba(128, 224, 255, .15);
}

.shop-item.owned {
  opacity: .85;
  border-color: rgba(64, 208, 144, .4);
  background: linear-gradient(135deg, rgba(64, 208, 144, .05) 0%, var(--bg-1) 100%);
}

.shop-item.owned::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green), transparent);
}

/* Icono grande del item (cuando no hay preview de tema) */
.shop-item-icon {
  font-size: 56px;
  line-height: 1;
  text-align: center;
  padding: 14px 0;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .3));
}

/* Preview de tema: viene de themes.css (.shop-theme-preview) pero forzamos tamaño consistente */
.shop-item .shop-theme-preview {
  height: 110px;
  margin-bottom: 0;
}

.shop-item-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .3px;
  line-height: 1.3;
}

.shop-item-desc {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
  min-height: 32px;
  flex: 1;
}

/* ---------- PRECIOS ---------- */
.shop-item-prices {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}

.price-btn {
  flex: 1;
  min-width: 90px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
  cursor: pointer;
  transition: all .15s;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.price-btn.coins {
  background: rgba(255, 204, 68, .12);
  border-color: rgba(255, 204, 68, .4);
  color: var(--gold);
}

.price-btn.coins:hover {
  background: rgba(255, 204, 68, .22);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(255, 204, 68, .3);
}

.price-btn.usdt {
  background: rgba(64, 208, 144, .1);
  border-color: rgba(64, 208, 144, .4);
  color: var(--green);
}

.price-btn.usdt:hover {
  background: rgba(64, 208, 144, .22);
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(64, 208, 144, .3);
}

.price-btn:active {
  transform: scale(.97);
}

.price-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- BADGE "YA LO TIENES" ---------- */
.owned-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(64, 208, 144, .12);
  border: 1px solid rgba(64, 208, 144, .4);
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  margin-top: auto;
  text-align: center;
}

/* ---------- EMPTY STATE ---------- */
#shop-items-grid .empty-state {
  grid-column: 1 / -1;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
  }
  .shop-item-icon { font-size: 44px; padding: 10px 0; }
  .shop-item-name { font-size: 13px; }
}

@media (max-width: 700px) {
  .shop-layout { padding: 0 4px; gap: 12px; }
  .shop-topbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .shop-balance { width: 100%; justify-content: space-between; font-size: 12px; }
  .shop-categories { gap: 4px; }
  .cat-btn { padding: 8px 12px; font-size: 11px; min-height: 36px; }
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .shop-item { padding: 10px; gap: 8px; }
  .shop-item-icon { font-size: 38px; padding: 6px 0; }
  .shop-item-name { font-size: 12px; }
  .shop-item-desc { font-size: 10px; min-height: 26px; }
  .shop-item .shop-theme-preview { height: 80px; }
  .price-btn { padding: 8px 8px; font-size: 11px; min-width: 70px; }
  .owned-badge { padding: 7px 10px; font-size: 11px; }
}

@media (max-width: 380px) {
  .shop-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TEMA MARBLE / SAKURA (fondos claros) — ajustar contraste
   ============================================================ */
[data-theme="marble"] .shop-item,
[data-theme="sakura"] .shop-item {
  background: rgba(255, 255, 255, .95);
  border-color: rgba(0, 0, 0, .12);
}

[data-theme="marble"] .shop-item-name,
[data-theme="sakura"] .shop-item-name {
  color: var(--text);
}

[data-theme="marble"] .shop-balance,
[data-theme="sakura"] .shop-balance {
  background: rgba(0, 0, 0, .04);
}

[data-theme="marble"] .cat-btn,
[data-theme="sakura"] .cat-btn {
  background: rgba(0, 0, 0, .04);
}

/* ============================================================
   🆕 FASE 4 — TIENDA PREMIUM
   ============================================================ */

.shop-sections-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.shop-section-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}

.shop-section-btn:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--text);
}

.shop-section-btn.active {
  background: rgba(128, 224, 255, .12);
  border-color: var(--accent-2);
  color: var(--accent-2);
  box-shadow: 0 0 0 2px rgba(128, 224, 255, .12);
}

.ssb-icon { font-size: 14px; }
.ssb-count {
  font-size: 9px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
}

.shop-section-btn.active .ssb-count {
  background: rgba(128, 224, 255, .2);
}

/* Especiales (ruleta, fondos) */
.shop-specials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.shop-special-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(187,136,255,.08) 0%, rgba(128,224,255,.04) 100%);
  border: 2px solid rgba(187,136,255,.35);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all .2s;
}

.shop-special-card:hover {
  border-color: var(--purple);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(187,136,255,.2);
}

.ssc-icon { font-size: 34px; line-height: 1; }
.ssc-info { flex: 1; min-width: 0; }
.ssc-titulo {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 2px;
}
.ssc-desc {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Item destacado / agotado / stock */
.shop-item .item-destacado {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #ffd166, #ffaa00);
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .5px;
  padding: 3px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(255,170,0,.5);
  z-index: 2;
}

.shop-item.agotado {
  opacity: .55;
  filter: grayscale(.5);
}

.shop-item-stock {
  font-size: 10px;
  color: var(--gold);
  font-weight: 700;
  text-align: center;
  margin-top: 2px;
}

/* Subheader (volver, info) */
.shop-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.subheader-info {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 700;
}

/* ============================================================
   FONDOS
   ============================================================ */
.fondos-panel {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
}

.fondos-panel h3 {
  font-size: 15px;
  color: var(--accent);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.fondos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.fondo-card {
  background: rgba(0, 0, 0, .25);
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all .2s;
}

.fondo-card.equipado {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(64, 208, 144, .15);
}

.fondo-preview {
  height: 100px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.fondo-badge-equipado {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--green);
  color: #04100a;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 8px;
}

.fondo-info {
  padding: 8px 10px;
}

.fondo-nombre {
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fondo-meta {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

.fondo-actions {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}

.fondo-actions .btn { flex: 1; }

/* Selector de fondos en settings */
.fondos-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.fondo-mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: rgba(0, 0, 0, .25);
  border: 2px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
}

.fondo-mini-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.fondo-mini-card.active {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(128, 224, 255, .2);
}

.fondo-mini-preview {
  width: 100%;
  height: 60px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}

.fondo-mini-nombre {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* Fondo global aplicado */
body.has-custom-fund::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: -1;
  pointer-events: none;
}

/* ============================================================
   RULETA
   ============================================================ */
.ruleta-panel {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}

.ruleta-panel h3 {
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.ruleta-wheel {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 20px auto;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ff5566 0deg 45deg,
    #ffd166 45deg 90deg,
    #40d090 90deg 135deg,
    #80e0ff 135deg 180deg,
    #bb88ff 180deg 225deg,
    #ff8a5c 225deg 270deg,
    #ffb84d 270deg 315deg,
    #5080ff 315deg 360deg
  );
  box-shadow: 0 0 0 6px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 209, 102, .3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ruleta-spinner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.ruleta-segmento {
  position: absolute;
  left: 50%;
  top: 50%;
  transform:
    translate(-50%, -50%)
    rotate(calc(360deg / var(--total) * var(--i)))
    translateY(-95px);
  font-size: 22px;
}

.ruleta-centro {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(10, 14, 20, .95);
  border: 3px solid #ffd166;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.ruleta-girar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffd166, #ffaa00);
  border: none;
  border-radius: 50%;
  width: 76px;
  height: 76px;
  color: #1a1a1a;
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: all .2s;
  gap: 2px;
  box-shadow: 0 0 20px rgba(255, 209, 102, .5);
}

.ruleta-girar-btn:hover:not(:disabled) {
  transform: scale(1.08);
  box-shadow: 0 0 30px rgba(255, 209, 102, .8);
}

.ruleta-girar-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.5);
}

.ruleta-premios-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  max-width: 600px;
  margin: 0 auto;
}

.ruleta-premio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}

.rp-icono { font-size: 18px; }
.rp-label { font-weight: 700; }

@media (max-width: 600px) {
  .shop-sections-bar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .shop-sections-bar::-webkit-scrollbar { display: none; }
  .ruleta-wheel { width: 200px; height: 200px; }
  .ruleta-segmento { transform: translate(-50%, -50%) rotate(calc(360deg / var(--total) * var(--i))) translateY(-80px); }
  .ruleta-centro { width: 76px; height: 76px; }
  .ruleta-girar-btn { width: 62px; height: 62px; }
  .fondos-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* ============================================================
   🆕 FASE 8 — VIP
   ============================================================ */

.vip-active-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(255,204,68,.15) 0%, rgba(255,204,68,.04) 100%);
  border: 2px solid rgba(255,204,68,.5);
  border-radius: 14px;
  margin-bottom: 16px;
  box-shadow: 0 0 30px rgba(255,204,68,.15);
}

.vac-icon {
  font-size: 40px;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(255,204,68,.6));
}

.vac-info { flex: 1; }
.vac-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 3px;
}
.vac-meta {
  font-size: 12px;
  color: var(--text-dim);
}

.vip-packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.vip-pack-card {
  position: relative;
  padding: 20px 16px;
  background: var(--bg-1);
  border: 2px solid var(--border);
  border-radius: 14px;
  text-align: center;
  transition: all .25s;
}

.vip-pack-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(255,204,68,.2);
}

.vip-pack-card.destacado {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(255,204,68,.08) 0%, var(--bg-1) 100%);
  box-shadow: 0 0 24px rgba(255,204,68,.2);
}

.vip-pack-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), #ffaa00);
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: .5px;
  box-shadow: 0 2px 8px rgba(255,170,0,.4);
  white-space: nowrap;
}

.vip-pack-desc {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--green);
  color: #04100a;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 8px;
}

.vip-pack-icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 12px rgba(255,204,68,.3));
}

.vip-pack-label {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 3px;
}

.vip-pack-dias {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.vip-pack-price {
  font-size: 20px;
  font-weight: 900;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}

.vip-pack-btn {
  width: 100%;
}

.vip-benefits-panel {
  padding: 20px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.vip-benefits-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.vip-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,.2);
  border-radius: 10px;
  border-left: 3px solid var(--gold);
}

.vb-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
.vb-info { flex: 1; min-width: 0; }
.vb-title { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.vb-desc { font-size: 11px; color: var(--text-dim); line-height: 1.4; }

/* Badge VIP en nombres */
.vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .vip-packs-grid { grid-template-columns: 1fr; }
  .vip-pack-card { padding: 16px; }
  .vip-pack-icon { font-size: 40px; }
  .vip-benefits-list { grid-template-columns: 1fr; }
}