/* =====================================================================
   IMPERIO RP - tema de la tienda publica (tienda.php)
   Se carga DESPUES de los estilos de la pagina y los sobrescribe.
   ===================================================================== */
:root{
  --primary:#38bdf8; --secondary:#3b82f6; --accent:#ef4444;
  --bg:#050813; --bg2:#0b1222; --bg3:#111a2e;
  --border:rgba(148,163,184,.14); --text2:rgba(226,232,240,.74); --text3:rgba(148,163,184,.7);
  --success:#22c55e; --warning:#fbbf24; --danger:#f43f5e;
  --radius:18px; --sw:264px;
  --sidebar-bg:rgba(7,11,22,.98); --card-bg:rgba(255,255,255,.035);
}
body{background:#050813;font-size:15px}
.bg-fx{background:
  radial-gradient(1000px 600px at 6% -8%,rgba(37,99,235,.28),transparent 62%),
  radial-gradient(900px 600px at 104% 108%,rgba(220,38,38,.20),transparent 62%),
  radial-gradient(700px 420px at 50% 40%,rgba(14,165,233,.07),transparent 70%),
  linear-gradient(180deg,#050813,#070a16)!important}
.bg-fx::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(148,163,184,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.045) 1px,transparent 1px);
  background-size:72px 72px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}

/* ---------- barra superior (visitantes) ---------- */
.pub-top{padding:16px clamp(18px,4vw,56px)!important;background:rgba(5,8,19,.78)!important;border-bottom:1px solid var(--border)!important;
  row-gap:14px!important;align-items:center}
.pub-brand{font-family:'Orbitron',sans-serif!important;font-weight:800!important;font-size:clamp(22px,2.4vw,30px)!important;
  letter-spacing:.2em!important;color:#fff!important;text-shadow:0 2px 24px rgba(56,189,248,.35)!important;line-height:1;order:1}
.pub-brand i{font-style:normal;color:#38bdf8!important}
.pub-links{order:2;margin-left:auto}
.pub-top .filters{order:3;flex:1 1 100%!important;justify-content:center;gap:10px!important;padding-top:2px}
.pub-cta{font-family:'Roboto',sans-serif!important;font-weight:700!important;font-size:12.5px!important;letter-spacing:1.3px!important;
  padding:12px 22px!important;border-radius:12px!important;color:#fff!important;
  background:linear-gradient(180deg,#f0524f,#dc2626)!important;border:1px solid rgba(254,202,202,.25);
  box-shadow:0 12px 32px -12px rgba(239,68,68,.9)!important;display:inline-flex;align-items:center;gap:9px}
.pub-cta:hover{transform:translateY(-2px)!important;box-shadow:0 18px 38px -12px rgba(239,68,68,1)!important}
.pub-link{font-size:12px!important}
.pub-link:hover{color:#fff!important;background:rgba(148,163,184,.1)!important}

/* ---------- filtros / pestanas ---------- */
.chip{font-size:13px!important;font-weight:600!important;padding:10px 18px!important;border-radius:999px!important;
  background:rgba(148,163,184,.07)!important;border:1px solid rgba(148,163,184,.16)!important;color:#cbd5e1!important;gap:9px!important}
.chip b{font-weight:700;background:rgba(148,163,184,.16);border-radius:999px;padding:1px 8px;font-size:11px;color:#e2e8f0}
.chip:hover{border-color:rgba(56,189,248,.5)!important;color:#fff!important;background:rgba(56,189,248,.08)!important}
.chip.on{background:linear-gradient(180deg,#4f9bff,#2f6df0)!important;border-color:rgba(147,197,253,.5)!important;color:#fff!important;
  box-shadow:0 10px 26px -10px rgba(59,130,246,1)}
.chip.on b{background:rgba(255,255,255,.25);color:#fff}
.tab{font-size:13.5px!important;padding:12px 22px!important;border-radius:12px!important}
.tab.on{background:rgba(56,189,248,.13)!important;border-color:rgba(56,189,248,.45)!important;color:#7dd3fc!important}

/* ---------- encabezado de la tienda ---------- */
.shop-hero{text-align:center;padding:clamp(18px,3.4vw,40px) 10px clamp(22px,3.4vw,38px)}
.shop-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:#7dd3fc;padding:7px 16px;border:1px solid rgba(56,189,248,.28);border-radius:999px;background:rgba(56,189,248,.07)}
.shop-hero h1{font-family:'Orbitron',sans-serif;font-weight:800;font-size:clamp(30px,4.6vw,54px);letter-spacing:.06em;line-height:1.08;
  margin:18px 0 12px;color:#fff;text-shadow:0 4px 40px rgba(56,189,248,.28)}
.shop-hero h1 span{background:linear-gradient(135deg,#38bdf8,#3b82f6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.shop-hero p{max-width:60ch;margin:0 auto;color:#94a3b8;font-size:clamp(14px,1.5vw,17px);line-height:1.65}

/* ---------- catalogo ---------- */
.wrap{max-width:1640px!important}
.main{padding:clamp(20px,3vw,40px) clamp(18px,4vw,56px) 80px!important}
.grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))!important;gap:26px!important}
.card{background:linear-gradient(180deg,#0f172a,#0a1020)!important;border:1px solid rgba(148,163,184,.14)!important;border-radius:20px!important;
  box-shadow:0 20px 50px -30px rgba(0,0,0,.9)}
.card:hover{transform:translateY(-7px)!important;border-color:rgba(56,189,248,.5)!important;
  box-shadow:0 30px 70px -26px rgba(56,189,248,.35),0 0 0 1px rgba(56,189,248,.14)!important}
.card-img{height:230px!important;background:linear-gradient(135deg,#0f1c3a,#1a1440 60%,#2a1030)!important}
.card-img::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(10,16,32,.92))}
.card-img .ph{font-size:64px!important;color:rgba(148,163,184,.32)!important;
  background:radial-gradient(60% 60% at 50% 45%,rgba(56,189,248,.14),transparent 70%)}
.cat-badge{top:14px!important;left:14px!important;background:rgba(5,8,19,.72)!important;border:1px solid rgba(56,189,248,.35)!important;
  color:#7dd3fc!important;font-size:10.5px!important;padding:6px 12px!important;z-index:2}
.hot-badge{top:14px!important;right:14px!important;background:linear-gradient(135deg,#fbbf24,#f59e0b)!important;color:#1c1200!important;
  font-size:10.5px!important;padding:6px 12px!important;z-index:2;box-shadow:0 8px 20px -8px rgba(245,158,11,.8)}
.card-body{padding:20px 22px 22px!important}
.card-name{font-size:18px!important;font-weight:700!important;margin-bottom:8px!important;color:#fff;letter-spacing:.1px}
.card-desc{font-size:13.5px!important;line-height:1.6!important;color:#94a3b8!important;margin-bottom:14px!important}
.meta span{font-size:11px!important;padding:5px 10px!important;border-radius:8px!important;background:rgba(148,163,184,.08)!important;color:#94a3b8!important}
.card-foot{border-top:1px solid rgba(148,163,184,.14)!important;padding-top:16px!important;margin-top:4px}
.price{font-size:27px!important;color:#fff!important;font-weight:800!important}
.price small{font-size:10.5px!important;color:#64748b!important}
.btn-buy{background:linear-gradient(180deg,#4f9bff,#2f6df0)!important;color:#fff!important;border-radius:12px!important;
  padding:12px 20px!important;font-size:13.5px!important;font-weight:700!important;letter-spacing:.3px;
  box-shadow:0 12px 28px -12px rgba(59,130,246,1)}
.btn-buy:hover{transform:translateY(-2px)!important;box-shadow:0 18px 34px -12px rgba(59,130,246,1)!important}
.btn-buy.ghost{background:rgba(56,189,248,.07)!important;border:1px solid rgba(56,189,248,.3)!important;color:#7dd3fc!important;box-shadow:none!important;
  justify-content:center}
.btn-buy.ghost:hover{background:rgba(56,189,248,.16)!important;color:#e0f2fe!important;transform:none!important;box-shadow:none!important}
.empty i{color:#38bdf8}

/* ---------- barra lateral (usuario con sesion) ---------- */
.sidebar{border-right:1px solid rgba(148,163,184,.14)!important;background:linear-gradient(180deg,#0b1122,#070b16)!important}
.sb-topline{background:linear-gradient(90deg,#38bdf8,#3b82f6,#ef4444)!important;height:3px!important}
.sl-avatar{border-color:rgba(56,189,248,.5)!important;box-shadow:0 0 22px rgba(56,189,248,.25)!important}
.sl-avatar .av-init{background:linear-gradient(135deg,#3b82f6,#38bdf8)!important}
.online-dot{background:#22c55e!important;box-shadow:0 0 8px #22c55e!important}
.sl-name{font-size:14px!important}
.sl-gameid{background:rgba(56,189,248,.09)!important;border-color:rgba(56,189,248,.3)!important;color:#7dd3fc!important;font-size:10.5px!important}
.nav-section{font-size:10px!important;color:#5b6b85!important;letter-spacing:.24em!important}
.nav-item{font-size:14px!important;font-weight:600!important;padding:12px 14px!important;border-radius:12px!important;gap:13px!important}
.nav-item i{width:32px!important;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
  background:rgba(56,189,248,.09);color:#7dd3fc;font-size:14px!important}
.nav-item:hover{background:rgba(148,163,184,.09)!important}
.nav-item.active{background:linear-gradient(90deg,rgba(59,130,246,.3),rgba(59,130,246,.05))!important;color:#fff!important;border-color:rgba(96,165,250,.38)!important}
.nav-item.active i{background:linear-gradient(135deg,#3b82f6,#38bdf8);color:#fff}
.nav-item.logout-btn i{background:rgba(244,63,94,.1);color:#fb7185}
.hamburger{background:rgba(56,189,248,.12)!important;border-color:rgba(56,189,248,.3)!important;color:#7dd3fc!important}

/* ---------- modal de compra / descripcion ---------- */
.overlay{background:rgba(3,6,14,.82)!important}
.modal{background:linear-gradient(180deg,#0c1424,#080d1a)!important;border:1px solid rgba(148,163,184,.2)!important;border-radius:22px!important}
.modal-hd{background:#0c1424!important}
.modal-hd-title{font-size:18px!important}
.modal-hd-title i{color:#38bdf8}
.prod-box{background:rgba(255,255,255,.035)!important;border-radius:14px!important}
.pb-price{color:#fff!important}
.metodo-item{border-radius:12px!important}
.metodo-item:hover{border-color:rgba(56,189,248,.45)!important}
.metodo-item.sel{border-color:#38bdf8!important;background:rgba(56,189,248,.08)!important}
.mi-icon.id{background:rgba(56,189,248,.15)!important;color:#38bdf8!important}
.mi-chk{color:#38bdf8!important}
.form-inp:focus{border-color:#38bdf8!important;box-shadow:0 0 0 3px rgba(56,189,248,.15)}
.file-drop:hover,.file-drop.has-file{border-color:#38bdf8!important;background:rgba(56,189,248,.05)!important}
.btn-sub{background:linear-gradient(180deg,#4f9bff,#2f6df0)!important;color:#fff!important;border-radius:12px!important;
  box-shadow:0 14px 30px -12px rgba(59,130,246,1)!important;font-size:14.5px!important}
.btn-sub:hover{transform:translateY(-2px)!important;box-shadow:0 20px 36px -12px rgba(59,130,246,1)!important}
.success-box i{color:#22c55e!important}
.compra{border-radius:16px!important;background:linear-gradient(180deg,#0f172a,#0a1020)!important}
.admin-note{background:rgba(59,130,246,.09)!important;border-color:rgba(59,130,246,.3)!important}
.admin-note i{color:#60a5fa!important}
.admin-note a{color:#7dd3fc!important}

@media(max-width:900px){.pub-top .filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap!important}.chip{white-space:nowrap}}
@media(max-width:560px){.grid{grid-template-columns:1fr!important}.card-img{height:210px!important}}