/* ============================================================
   KTONY STORE — Sistema de Diseño Global
   Estética dark blue/black, glassmorphism, neon glow premium
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ---- Tokens ---- */
:root {
  --bg-deep:     #06080f;
  --bg-base:     #090c17;
  --bg-elevated: #0d1424;
  --bg-raised:   #121a2e;
  --bg-glass:    rgba(13, 20, 36, 0.88);

  --blue-300: #66c8ff;
  --blue-400: #33b0ff;
  --blue-500: #0099ff;
  --blue-600: #0070cc;
  --blue-700: #004d99;
  --cyan-400: #00e5ff;
  --purple-500: #7c3aed;

  --text-100: #eef2ff;
  --text-200: #b0c4e8;
  --text-300: #6078a0;
  --text-400: #38496a;

  --border-100: rgba(0,153,255,0.09);
  --border-200: rgba(0,153,255,0.20);
  --border-300: rgba(0,153,255,0.42);
  --border-glow: rgba(0,153,255,0.70);

  --success: #00e87a;
  --warning: #ffaa00;
  --danger:  #ff3355;
  --foil:    #ffd700;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.55);
  --shadow-lg: 0 8px 48px rgba(0,0,0,0.65);
  --glow-sm:   0 0 16px rgba(0,153,255,0.3);
  --glow-md:   0 0 32px rgba(0,153,255,0.28);
  --glow-lg:   0 0 60px rgba(0,153,255,0.22);
  --glow-card: 0 8px 40px rgba(0,0,0,0.6), 0 0 20px rgba(0,153,255,0.10);

  --sp-1:0.25rem; --sp-2:0.5rem;  --sp-3:0.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem;  --sp-8:2rem;    --sp-10:2.5rem;
  --sp-12:3rem;   --sp-16:4rem;   --sp-20:5rem;   --sp-24:6rem;

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-2xl:32px; --r-full:9999px;
  --t-fast:0.15s ease; --t-base:0.25s ease; --t-slow:0.4s ease;
  --nav-h:68px; --container:1280px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-base);
  color: var(--text-100);
  font-family: 'Outfit', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.65;
}

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-500); }

/* ---- Typography ---- */
h1,h2,h3,h4,h5,h6 { line-height:1.2; font-weight:700; }
h1 { font-size: clamp(2rem,5vw,3.5rem); }
h2 { font-size: clamp(1.5rem,3vw,2.25rem); }
h3 { font-size: clamp(1.1rem,2vw,1.5rem); }
p  { color: var(--text-200); }
a  { text-decoration: none; }
button { font-family: 'Outfit', sans-serif; }
img { max-width: 100%; }

.font-display { font-family: 'Outfit', sans-serif; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  z-index: 1000;
  background: rgba(6,8,15,0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border-100);
  transition: var(--t-base);
}
.navbar.scrolled {
  background: rgba(6,8,15,0.96);
  border-bottom-color: var(--border-200);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}
.nav-container {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6);
  height: 100%; display: flex; align-items: center; gap: var(--sp-6);
}
.nav-logo {
  display: flex; align-items: center; gap: var(--sp-2);
  text-decoration: none; flex-shrink: 0;
}
.nav-logo img {
  height: 48px; width: 48px; object-fit: contain;
  border-radius: var(--r-sm);
  mix-blend-mode: screen;        /* hace el fondo negro transparente */
  filter: brightness(1.1) drop-shadow(0 0 6px rgba(0,153,255,0.5));
}
.nav-logo-text {
  font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 1.25rem;
  color: var(--blue-400); letter-spacing: 0.12em; text-shadow: var(--glow-sm);
}
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-link {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md);
  color: var(--text-300); font-weight: 500; font-size: 0.9rem;
  transition: var(--t-fast); position: relative; white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--blue-400); background: rgba(0,153,255,0.08); }
.nav-link.active::after {
  content: ''; position: absolute; bottom: 2px; left: 50%;
  transform: translateX(-50%); width: 16px; height: 2px;
  background: var(--blue-500); border-radius: 2px; box-shadow: var(--glow-sm);
}
.nav-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

/* Cart button */
.nav-cart-btn {
  position: relative; background: var(--border-100);
  border: 1px solid var(--border-200); border-radius: var(--r-md);
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--t-fast); color: var(--text-200);
}
.nav-cart-btn:hover { border-color: var(--blue-500); color: var(--blue-400); box-shadow: var(--glow-sm); }
.cart-badge {
  position: absolute; top: -7px; right: -7px;
  background: var(--blue-500); color: #fff; font-size: 0.62rem; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: var(--r-full);
  display: none; align-items: center; justify-content: center;
  box-shadow: var(--glow-sm); border: 2px solid var(--bg-deep);
}
.cart-badge.visible { display: flex; }

/* Admin icon */
.admin-btn {
  background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.28);
  border-radius: var(--r-md); width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--t-fast); color: #a78bfa; font-size: 1rem;
  text-decoration: none;
}
.admin-btn:hover { background: rgba(124,58,237,0.22); border-color: var(--purple-500); }

.nav-auth { display: flex; align-items: center; gap: var(--sp-2); }

/* User avatar */
.user-avatar {
  width: 36px; height: 36px; border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-400));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.8rem; cursor: pointer;
  border: 2px solid var(--border-200); transition: var(--t-fast); position: relative;
}
.user-avatar:hover { border-color: var(--blue-400); box-shadow: var(--glow-sm); }

/* Notification badge on avatar */
.notif-badge {
  position: absolute; top: -8px; right: -8px;
  background: var(--danger); color: #fff;
  font-size: 0.58rem; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px rgba(255,51,85,0.6); border: 2px solid var(--bg-deep);
  animation: notif-pop 0.3s cubic-bezier(.36,.07,.19,.97);
  pointer-events: none;
}
@keyframes notif-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}


.user-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--bg-elevated); border: 1px solid var(--border-200);
  border-radius: var(--r-lg); min-width: 180px; padding: var(--sp-2);
  box-shadow: var(--shadow-lg); z-index: 200;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: var(--t-fast);
}
.user-avatar:hover .user-dropdown,
.user-avatar-wrap:hover .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.user-avatar-wrap { position: relative; }

.dropdown-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3); border-radius: var(--r-md);
  color: var(--text-200); font-size: 0.875rem; cursor: pointer;
  transition: var(--t-fast); border: none; background: none; width: 100%; text-align: left;
}
.dropdown-item:hover { background: var(--border-100); color: var(--text-100); }
.dropdown-item.danger:hover { color: var(--danger); }

/* Mobile toggle */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: var(--sp-2);
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text-200); border-radius: 2px; transition: var(--t-base); }
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile nav */
.mobile-nav {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: rgba(6,8,15,0.98); backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-200); padding: var(--sp-4);
  z-index: 999; transform: translateY(-100%); opacity: 0; transition: var(--t-base);
}
.mobile-nav.open { transform: translateY(0); opacity: 1; }
.mobile-nav-links { display: flex; flex-direction: column; gap: var(--sp-1); }
.mobile-nav-link {
  padding: var(--sp-4) var(--sp-4); border-radius: var(--r-md);
  color: var(--text-200); font-weight: 500; font-size: 1rem;
  display: flex; align-items: center; gap: var(--sp-3); transition: var(--t-fast);
}
.mobile-nav-link:hover { background: var(--border-100); color: var(--blue-400); }

/* Demo banner */
.demo-banner {
  background: linear-gradient(135deg, rgba(255,170,0,0.08), rgba(255,100,0,0.05));
  border-bottom: 1px solid rgba(255,170,0,0.22);
  padding: var(--sp-2) var(--sp-6); text-align: center;
  font-size: 0.78rem; color: var(--warning);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-md);
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.9rem;
  cursor: pointer; transition: var(--t-fast); border: none; text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
  color: #fff; box-shadow: var(--glow-sm);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(0,153,255,0.5); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent; border: 1px solid var(--border-300);
  color: var(--blue-400);
}
.btn-secondary:hover { background: rgba(0,153,255,0.08); box-shadow: var(--glow-sm); }

.btn-ghost {
  background: transparent; border: 1px solid var(--border-200); color: var(--text-200);
}
.btn-ghost:hover { border-color: var(--blue-400); color: var(--blue-400); }

.btn-danger { background: rgba(255,50,80,0.15); border: 1px solid rgba(255,50,80,0.35); color: var(--danger); }
.btn-danger:hover { background: rgba(255,50,80,0.25); }

.btn-sm { padding: var(--sp-2) var(--sp-4); font-size: 0.8rem; }
.btn-lg { padding: var(--sp-4) var(--sp-8); font-size: 1rem; }
.btn-full { width: 100%; }

.btn-google {
  width: 100%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--border-200); background: var(--bg-raised);
  color: var(--text-200); font-family: 'Outfit', sans-serif; font-size: 0.9rem;
  font-weight: 600; cursor: pointer; transition: var(--t-fast);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
}
.btn-google:hover { border-color: rgba(255,255,255,0.2); background: var(--bg-elevated); }

.btn-icon {
  width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--border-200);
  background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; transition: var(--t-fast); color: var(--text-300);
}
.btn-icon:hover { background: var(--border-100); color: var(--text-100); }
.btn-icon.edit:hover { border-color: var(--blue-400); color: var(--blue-400); }
.btn-icon.delete:hover { border-color: var(--danger); color: var(--danger); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  position: relative; overflow: hidden; padding-top: var(--nav-h);
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,100,200,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 85% 50%, rgba(0,60,130,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 5% 80%, rgba(0,70,150,0.10) 0%, transparent 55%),
    var(--bg-deep);
}
.hero-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(0,153,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,153,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
}
.hero-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.particle {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,153,255,0.6), transparent);
  animation: particle-float linear infinite;
  pointer-events: none;
}
@keyframes particle-float {
  0%   { transform: translateY(100vh) translateX(0) scale(0); opacity:0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-10vh) translateX(var(--drift,0px)) scale(1.2); opacity:0; }
}

.hero-content { position: relative; z-index: 1; width: 100%; }
.hero-inner {
  max-width: var(--container); margin: 0 auto; padding: var(--sp-20) var(--sp-6);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full);
  background: rgba(0,153,255,0.10); border: 1px solid var(--border-200);
  color: var(--blue-400); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--sp-5);
}
.hero-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue-500);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(.75);} }

.hero-title { font-family: 'Outfit', sans-serif; font-weight: 900; margin-bottom: var(--sp-5); line-height: 1.05; }
.hero-title .highlight { color: var(--blue-400); text-shadow: 0 0 40px rgba(0,153,255,0.5); }
.hero-desc { color: var(--text-200); font-size: 1.05rem; margin-bottom: var(--sp-8); max-width: 480px; }

.hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.hero-stats { display: flex; gap: var(--sp-8); margin-top: var(--sp-10); }
.stat-num {
  font-family: 'Outfit', sans-serif; font-size: 1.8rem; font-weight: 900;
  color: var(--blue-400); display: block; line-height: 1;
}
.stat-lbl { font-size: 0.75rem; color: var(--text-200); text-transform: uppercase; letter-spacing: 0.08em; }

/* Hero visual - floating cards */
.hero-visual { display: flex; justify-content: center; align-items: center; position: relative; }
.hero-cards-wrap { position: relative; width: 330px; height: 460px; }
.hero-card-float {
  position: absolute; border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-lg); transition: var(--t-slow);
}
.hero-card-float img { width: 100%; height: auto; display: block; }
.hero-card-float:nth-child(1) { width: 175px; top:0; left:0; transform:rotate(-9deg); z-index:1; animation:hf1 4s ease-in-out infinite; }
.hero-card-float:nth-child(2) { width: 185px; top:45px; right:0; transform:rotate(6deg); z-index:2; animation:hf2 5.2s ease-in-out infinite; }
.hero-card-float:nth-child(3) { width: 170px; bottom:0; left:55px; transform:rotate(-3deg); z-index:3; animation:hf3 3.7s ease-in-out infinite; }
@keyframes hf1 { 0%,100%{transform:rotate(-9deg) translateY(0);} 50%{transform:rotate(-9deg) translateY(-14px);} }
@keyframes hf2 { 0%,100%{transform:rotate(6deg) translateY(0);} 50%{transform:rotate(6deg) translateY(-10px);} }
@keyframes hf3 { 0%,100%{transform:rotate(-3deg) translateY(0);} 50%{transform:rotate(-3deg) translateY(-18px);} }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: var(--sp-20) 0; }
.section-dark { background: var(--bg-elevated); }
.section-header { text-align: center; margin-bottom: var(--sp-12); }
.section-tag {
  display: inline-block; padding: 3px var(--sp-4); border-radius: var(--r-full);
  background: rgba(0,153,255,0.10); border: 1px solid var(--border-200);
  color: var(--blue-400); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: var(--sp-4);
}
.section-title { font-family: 'Outfit', sans-serif; margin-bottom: var(--sp-3); }
.section-sub { color: var(--text-200); max-width: 580px; margin: 0 auto; }

/* Divider */
.divider-line { height:1px; background:linear-gradient(90deg,transparent,var(--border-200),transparent); margin:var(--sp-8) 0; }
.divider { display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-5) 0; color:var(--text-400); font-size:.8rem; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border-100); }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px var(--sp-2); border-radius: var(--r-sm);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.badge-foil {
  background: linear-gradient(135deg, rgba(255,215,0,.28), rgba(255,165,0,.18));
  border: 1px solid rgba(255,215,0,.55); color: var(--foil);
  animation: foil-glow 3s ease-in-out infinite;
}
@keyframes foil-glow { 0%,100%{box-shadow:0 0 5px rgba(255,215,0,.3);} 50%{box-shadow:0 0 14px rgba(255,215,0,.65);} }
.badge-etched { background:rgba(180,180,255,.12); border:1px solid rgba(180,180,255,.38); color:#c0c0ff; }
.badge-normal { background:rgba(0,153,255,.08); border:1px solid var(--border-200); color:var(--blue-400); }
.badge-promo  { background:rgba(255,50,50,.14); border:1px solid rgba(255,50,50,.38); color:#ff6677; }
.badge-new    { background:rgba(0,232,122,.13); border:1px solid rgba(0,232,122,.38); color:var(--success); }
.badge-sold   { background:rgba(80,80,100,.28); border:1px solid rgba(80,80,100,.38); color:var(--text-400); }
.badge-reserved { background:rgba(255,170,0,.14); border:1px solid rgba(255,170,0,.38); color:var(--warning); }

/* ============================================================
   TCG CARD COMPONENT
   ============================================================ */
.tcg-card {
  background: var(--bg-elevated); border: 1px solid var(--border-100);
  border-radius: var(--r-lg); overflow: hidden; transition: var(--t-base);
  display: flex; flex-direction: column; position: relative;
}
.tcg-card:hover {
  border-color: var(--border-300); box-shadow: var(--glow-card);
  transform: translateY(-6px);
}
.tcg-img-wrap {
  position: relative; aspect-ratio: 5/7; overflow: hidden; background: var(--bg-raised);
  cursor: pointer;
  border-radius: var(--r-lg);
  margin: var(--sp-3) var(--sp-3) 0 var(--sp-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-100);
}
.tcg-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; transition: var(--t-slow);
  display: block;
}
/* Cuando tcg-img-wrap también tiene card-hover-wrap, el popup debe salir del clip */
.tcg-img-wrap.card-hover-wrap { overflow: visible; }
.tcg-img-wrap.card-hover-wrap > img:first-child { position: relative; z-index: 1; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.tcg-card:hover .tcg-img-wrap img { transform: scale(1.06); }
.tcg-img-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; color:var(--text-400);
}
.tcg-badges {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  display: flex; flex-direction: column; gap: 4px;
}
.tcg-body {
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1;
}
.tcg-name { font-weight: 700; font-size: 0.9rem; color: var(--text-100); line-height: 1.3; }
.tcg-set  { font-size: 0.72rem; color: var(--text-400); display:flex; align-items:center; gap:4px; }
.tcg-prices { display:flex; justify-content:space-between; align-items:flex-end; margin-top:auto; }
.price-label { font-size:.68rem; color:var(--text-400); display:block; }
.price-store  { font-family:'Outfit',sans-serif; font-size:1.05rem; font-weight:700; color:var(--blue-400); }
.price-market { font-size:.78rem; color:var(--text-400); }
.price-trend-up { color:var(--success); }
.price-trend-dn { color:var(--danger); }
.tcg-stock {
  font-size:.72rem; padding:2px var(--sp-2); border-radius:var(--r-sm);
  display:inline-flex; align-items:center; gap:3px;
}
.stock-ok  { color:var(--success); }
.stock-low { color:var(--warning); }
.stock-out { color:var(--text-400); }
.tcg-footer { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-100); display: flex; gap: var(--sp-2); align-items: center; }
.btn-reserve {
  width:100%; padding:var(--sp-3); border-radius:var(--r-md); border:1px solid var(--border-200);
  background:transparent; color:var(--blue-400); font-weight:600; font-size:.85rem;
  cursor:pointer; transition:var(--t-fast); display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
}
.btn-reserve:hover { background:rgba(0,153,255,.10); border-color:var(--blue-500); box-shadow:var(--glow-sm); }
.btn-reserve:disabled { opacity:.45; cursor:not-allowed; }

/* Cards Grid */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:var(--sp-5); }
.cards-grid-lg { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--sp-6); }

/* ============================================================
   FILTERS BAR
   ============================================================ */
.filters-bar {
  background:var(--bg-elevated); border:1px solid var(--border-100);
  border-radius:var(--r-xl); padding:var(--sp-5) var(--sp-6);
  display:flex; gap:var(--sp-4); flex-wrap:wrap; align-items:flex-end;
  margin-bottom:var(--sp-8);
}
.filter-group {
  display:flex; flex-direction:column; gap:6px; flex:1 1 140px;
}
.filter-group.filter-group-pills {
  flex:2 1 auto;
  min-width:250px;
}
.filter-label { font-size:.68rem; font-weight:700; color:var(--text-400); text-transform:uppercase; letter-spacing:.1em; }
.filter-select, .filter-input {
  background:var(--bg-raised); border:1px solid var(--border-200);
  border-radius:var(--r-md); color:var(--text-100);
  font-family:'Outfit',sans-serif; font-size:.875rem;
  padding:var(--sp-2) var(--sp-3); transition:var(--t-fast); width:100%;
  box-sizing:border-box;
}
.filter-select:focus,.filter-input:focus { outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(0,153,255,.12); }
.filter-select option { background:var(--bg-raised); }
.search-wrap { flex:2 1 200px; position:relative; }
.search-wrap .search-icon { position:absolute; left:var(--sp-3); top:50%; transform:translateY(-50%); color:var(--text-400); font-size:.9rem; }
.search-wrap .filter-input { padding-left:var(--sp-8); }
.filter-pills { display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
.pill {
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-full);
  border:1px solid var(--border-200); background:transparent;
  color:var(--text-300); font-size:.8rem; font-weight:500; cursor:pointer; transition:var(--t-fast);
  white-space:nowrap;
}
.pill:hover { border-color:var(--blue-400); color:var(--blue-400); background:rgba(0,153,255,0.04); }
.pill.active { background:rgba(0,153,255,.14); border-color:var(--blue-400); color:var(--blue-400); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6); position:relative;
}
.steps-grid::before {
  content:''; position:absolute; top:27px; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg,transparent,var(--border-200),var(--blue-500),var(--border-200),transparent);
  z-index:0;
}
.step-item { text-align:center; position:relative; z-index:1; }
.step-icon-wrap {
  width:56px; height:56px; border-radius:var(--r-full); background:var(--bg-elevated);
  border:2px solid var(--border-200); display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin:0 auto var(--sp-4); transition:var(--t-base); position:relative;
  box-shadow:var(--shadow-md);
}
.step-item:hover .step-icon-wrap { border-color:var(--blue-500); box-shadow:var(--glow-md); transform:scale(1.08); }
.step-num {
  position:absolute; top:-8px; right:-8px; width:20px; height:20px;
  background:var(--blue-500); border-radius:50%; font-size:.62rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:var(--glow-sm);
}
.step-title { font-size:.9rem; font-weight:700; color:var(--text-100); margin-bottom:var(--sp-2); }
.step-desc  { font-size:.78rem; color:var(--text-200); }

/* ============================================================
   PROMO CARDS
   ============================================================ */
.promo-card {
  background:var(--bg-elevated); border:1px solid var(--border-100);
  border-radius:var(--r-xl); overflow:hidden; transition:var(--t-base);
}
.promo-card:hover { transform:translateY(-5px); border-color:var(--border-300); box-shadow:var(--glow-card); }
.promo-header {
  padding:var(--sp-6); position:relative;
  background:linear-gradient(135deg,rgba(0,100,200,.18),rgba(0,153,255,.04));
  border-bottom:1px solid var(--border-100);
}
.promo-discount {
  position:absolute; top:var(--sp-4); right:var(--sp-4);
  background:linear-gradient(135deg,#e01040,#cc0033); color:#fff;
  font-family:'Outfit',sans-serif; font-size:1.15rem; font-weight:900;
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-lg);
  box-shadow:0 0 20px rgba(255,0,60,.4);
}
.promo-type {
  display:inline-block; padding:2px var(--sp-3); border-radius:var(--r-full);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  margin-bottom:var(--sp-3);
}
.promo-flash  { background:rgba(255,80,50,.18); color:#ff7755; border:1px solid rgba(255,80,50,.35); }
.promo-bundle { background:rgba(0,153,255,.15); color:var(--blue-400); border:1px solid var(--border-200); }
.promo-weekly { background:rgba(0,232,122,.12); color:var(--success); border:1px solid rgba(0,232,122,.28); }
.promo-title { font-size:1.05rem; font-weight:700; color:var(--text-100); margin-bottom:var(--sp-2); }
.promo-desc  { font-size:.83rem; color:var(--text-300); }
.promo-footer {
  padding:var(--sp-4) var(--sp-6); display:flex; justify-content:space-between; align-items:center;
}
.countdown { display:flex; align-items:center; gap:var(--sp-3); }
.countdown-label { font-size:.68rem; color:var(--text-400); white-space:nowrap; }
.countdown-time { display:flex; gap:var(--sp-2); }
.countdown-unit { text-align:center; }
.countdown-val {
  display:block; font-family:'Outfit',sans-serif; font-size:.92rem; font-weight:700;
  color:var(--blue-400); background:var(--bg-raised); border-radius:var(--r-sm);
  padding:2px var(--sp-2); min-width:30px; border:1px solid var(--border-200);
}
.countdown-lbl { font-size:.58rem; color:var(--text-400); text-transform:uppercase; }

/* ============================================================
   DECK CARDS
   ============================================================ */
.deck-card {
  background:var(--bg-elevated); border:1px solid var(--border-100);
  border-radius:var(--r-xl); overflow:hidden; transition:var(--t-base);
}
.deck-card:hover { transform:translateY(-6px); border-color:var(--border-300); box-shadow:var(--glow-card); }
.deck-card-hd { padding:var(--sp-5); display:flex; align-items:center; gap:var(--sp-4); }
.cmd-avatar {
  width:76px; height:76px; border-radius:var(--r-lg); overflow:hidden;
  flex-shrink:0; border:2px solid var(--border-200); box-shadow:var(--shadow-md);
}
.cmd-avatar img { width:100%; height:100%; object-fit:cover; object-position:top; }
.deck-name { font-weight:700; font-size:.95rem; color:var(--text-100); margin-bottom:3px; }
.deck-commander-lbl { font-size:.75rem; color:var(--text-400); margin-bottom:var(--sp-2); }
.color-pips { display:inline-flex; gap:4px; align-items:center; }
.pip {
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.3);
  flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.pip svg { width:70%; height:70%; display:block; }
.pip-W{background:#f3f4f6;color:#374151;} .pip-U{background:#0070cc;color:#fff;}
.pip-B{background:#1e293b;color:#fff;}    .pip-R{background:#dc2626;color:#fff;}
.pip-G{background:#15803d;color:#fff;}    .pip-C{background:#6b7280;color:#fff;}

/* Brackets badges styling */
.badge.bracket-1 { background: rgba(0, 232, 122, 0.15); border: 1px solid var(--success); color: var(--success); }
.badge.bracket-2 { background: rgba(0, 153, 255, 0.15); border: 1px solid var(--blue-400); color: var(--blue-400); }
.badge.bracket-3 { background: rgba(124, 58, 237, 0.15); border: 1px solid #c084fc; color: #c084fc; }
.badge.bracket-4 { background: rgba(255, 170, 0, 0.15); border: 1px solid var(--warning); color: var(--warning); }
.badge.bracket-5 { background: rgba(255, 51, 85, 0.15); border: 1px solid var(--danger); color: var(--danger); }

/* Set icon styling */
.set-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  filter: invert(1) brightness(1.5);
  margin-right: 6px;
  flex-shrink: 0;
}
.deck-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border-100); }
.deck-stat { padding:var(--sp-3) var(--sp-2); text-align:center; border-right:1px solid var(--border-100); }
.deck-stat:last-child { border-right:none; }
.deck-stat-val { font-family:'Outfit',sans-serif; font-size:1.05rem; font-weight:700; color:var(--blue-400); display:block; }
.deck-stat-lbl { font-size:.62rem; color:var(--text-400); text-transform:uppercase; letter-spacing:.04em; }
.completeness-bar { height:4px; background:var(--bg-raised); border-radius:2px; overflow:hidden; margin:0 var(--sp-5) var(--sp-1); }
.completeness-fill {
  height:100%; background:linear-gradient(90deg,var(--blue-600),var(--cyan-400));
  border-radius:2px; transition:width .6s ease; position:relative;
}
.completeness-fill::after {
  content:''; position:absolute; right:0; top:0; bottom:0; width:18px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3));
  animation:shimr 2s ease-in-out infinite;
}
@keyframes shimr { 0%,100%{opacity:.3;} 50%{opacity:1;} }
.deck-card-ft { padding:var(--sp-4) var(--sp-5); display:flex; gap:var(--sp-3); border-top:1px solid var(--border-100); align-items:center; }
.deck-card-ft .btn { white-space:nowrap; }

/* ============================================================
   PREMIUM 3D COMMANDER DECKBOX
   ============================================================ */
.deckbox-3d-wrap {
  perspective: 1000px;
  width: 100%;
}
.deckbox-3d-card {
  position: relative;
  background: linear-gradient(135deg, #1c273e 0%, #0d1527 100%);
  border: 1px solid var(--border-100);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s, border-color 0.4s;
  box-shadow: var(--shadow-lg), 0 8px 24px rgba(0, 0, 0, 0.3);
  transform-style: preserve-3d;
}
.deckbox-3d-card:hover {
  transform: rotateY(6deg) rotateX(4deg) translateY(-8px);
  border-color: var(--blue-400);
  box-shadow: 0 15px 30px rgba(0, 153, 255, 0.2), var(--glow-card);
}
.deckbox-3d-header {
  position: relative;
  height: 200px;
  background: var(--bg-deep);
  overflow: hidden;
  border-bottom: 1px solid var(--border-200);
  display: flex;
  align-items: center;
  justify-content: center;
}
.deckbox-casing {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 24px;
  right: 24px;
  border: 3px solid rgba(212, 175, 55, 0.8); /* Borde dorado premium */
  border-radius: var(--r-md);
  box-shadow: inset 0 0 15px rgba(0,0,0,0.85), 0 0 10px rgba(212,175,55,0.25);
  overflow: hidden;
  background: #0a0e1a;
  z-index: 1;
}
.deckbox-commander-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: contrast(1.05) saturate(1.05);
  transition: transform 0.5s ease;
}
.deckbox-3d-card:hover .deckbox-commander-img {
  transform: scale(1.08);
}
.deckbox-plastic-window {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.06) 100%);
  pointer-events: none;
  z-index: 2;
  box-shadow: inset 0 0 12px rgba(0, 153, 255, 0.08);
}
.deckbox-commander-name {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 75%, transparent 100%);
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
  z-index: 3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.deckbox-badge-top {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.deckbox-badge-left {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* ============================================================
   FORMS & AUTH
   ============================================================ */
.auth-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg-deep); padding:var(--sp-6); position:relative; overflow:hidden;
}
.auth-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,100,200,.11) 0%, transparent 65%);
}
.auth-card {
  background:var(--bg-glass); backdrop-filter:blur(22px);
  border:1px solid var(--border-200); border-radius:var(--r-2xl);
  padding:var(--sp-10); width:100%; max-width:470px; position:relative; z-index:1;
  box-shadow:0 24px 64px rgba(0,0,0,.55), 0 0 40px rgba(0,153,255,.06);
}
.auth-logo {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; margin-bottom:var(--sp-8); gap:var(--sp-3);
}
.auth-logo img { height:64px; border-radius:var(--r-sm); }
.auth-logo .nav-logo-text, .auth-logo-text {
  font-family:'Outfit',sans-serif; font-size:1.75rem; font-weight:900;
  color:var(--blue-400); text-shadow:var(--glow-md); letter-spacing:.2em;
  display:block;
}
.auth-tabs {
  display:flex; background:var(--bg-deep); border-radius:var(--r-md);
  padding:3px; margin-bottom:var(--sp-10); border:1px solid var(--border-100);
}
.auth-tab {
  flex:1; padding:var(--sp-3); border-radius:var(--r-sm); border:none;
  background:transparent; color:var(--text-300); font-weight:600; font-size:.88rem;
  cursor:pointer; transition:var(--t-fast); font-family:'Outfit',sans-serif;
}
.auth-tab.active { background:var(--bg-elevated); color:var(--blue-400); border:1px solid var(--border-200); }
.form-group { margin-bottom:var(--sp-5); }
.form-label { display:block; font-size:.83rem; font-weight:600; color:var(--text-200); margin-bottom:var(--sp-2); }
.form-input {
  width:100%; background:rgba(6,8,15,.8); border:1px solid var(--border-200);
  border-radius:var(--r-md); color:var(--text-100); font-family:'Outfit',sans-serif;
  font-size:.93rem; padding:var(--sp-3) var(--sp-4); transition:var(--t-fast);
}
.form-input:focus { outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(0,153,255,.12); }
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover, 
.form-input:-webkit-autofill:focus, 
.form-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #06080f inset !important;
  -webkit-text-fill-color: var(--text-100) !important;
  transition: background-color 5000s ease-in-out 0s;
}
.form-input::placeholder { color:var(--text-400); }
.form-input.error { border-color:var(--danger); }
.form-error { font-size:.75rem; color:var(--danger); margin-top:4px; }
.form-select {
  width:100%; background:var(--bg-raised); border:1px solid var(--border-200);
  border-radius:var(--r-md); color:var(--text-100); font-family:'Outfit',sans-serif;
  font-size:.9rem; padding:var(--sp-3) var(--sp-4); transition:var(--t-fast); cursor:pointer;
}
.form-select:focus { outline:none; border-color:var(--blue-500); }
.form-select option { background:var(--bg-raised); }
.form-textarea {
  width:100%; background:rgba(6,8,15,.8); border:1px solid var(--border-200);
  border-radius:var(--r-md); color:var(--text-100); font-family:'Outfit',sans-serif;
  font-size:.9rem; padding:var(--sp-3) var(--sp-4); resize:vertical; min-height:90px; transition:var(--t-fast);
}
.form-textarea:focus { outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(0,153,255,.12); }

/* ─── Toggle Switch (iOS-style) ─── */
.toggle-switch { position:relative; display:inline-block; width:48px; height:26px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; cursor:pointer; inset:0;
  background:var(--bg-raised); border:1px solid var(--border-300);
  border-radius:13px; transition:var(--t-base);
}
.toggle-slider::before {
  content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px;
  background:var(--text-400); border-radius:50%; transition:var(--t-base);
}
.toggle-switch input:checked + .toggle-slider { background:var(--blue-600); border-color:var(--blue-500); box-shadow:var(--glow-sm); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(22px); background:#fff; }
.form-help { font-size:.75rem; color:var(--text-400); margin-top:4px; }

/* Verification code inputs */
.code-inputs { display:flex; gap:var(--sp-3); justify-content:center; margin:var(--sp-6) 0; }
.code-input {
  width:48px; height:56px; text-align:center; font-size:1.4rem; font-weight:800;
  font-family:'Outfit',sans-serif; background:var(--bg-deep);
  border:2px solid var(--border-200); border-radius:var(--r-md); color:var(--blue-400);
  transition:var(--t-fast);
}
.code-input:focus { outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(0,153,255,.15); }

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-layout {
  display:grid; grid-template-columns:255px 1fr;
  min-height:calc(100vh - var(--nav-h)); margin-top:var(--nav-h);
}
.admin-sidebar {
  background:var(--bg-elevated); border-right:1px solid var(--border-100);
  padding:var(--sp-6) var(--sp-3); position:sticky; top:var(--nav-h);
  height:calc(100vh - var(--nav-h)); overflow-y:auto;
}
.sidebar-section-lbl {
  font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.18em;
  color:var(--text-400); padding:var(--sp-2) var(--sp-3); margin-top:var(--sp-5);
  margin-bottom:var(--sp-1);
}
.sidebar-section-lbl:first-child { margin-top:0; }
.admin-nav-item {
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md); cursor:pointer; transition:var(--t-fast); color:var(--text-300);
  font-weight:500; font-size:.875rem; border:none; background:none; width:100%; text-align:left;
}
.admin-nav-item:hover { background:var(--border-100); color:var(--text-100); }
.admin-nav-item.active { background:rgba(0,153,255,.11); color:var(--blue-400); border:1px solid rgba(0,153,255,.15); }
.admin-nav-icon { font-size:1rem; flex-shrink:0; }
.admin-nav-badge {
  margin-left:auto; background:var(--blue-500); color:#fff;
  font-size:.62rem; font-weight:800; padding:1px var(--sp-2);
  border-radius:var(--r-full); min-width:18px; text-align:center;
}
.admin-nav-badge.warn { background:var(--warning); }

.admin-content { padding:var(--sp-8); overflow-y:auto; background:var(--bg-base); }
.admin-section { display:none; animation:fadeIn .25s ease; }
.admin-section.active { display:block; }

.admin-page-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--sp-8); flex-wrap:wrap; gap:var(--sp-4);
}
.admin-page-title { font-family:'Outfit',sans-serif; font-size:1.4rem; font-weight:700; }
.admin-subtitle { font-size:.85rem; color:var(--text-400); margin-top:2px; }

/* Admin KPI cards */
.admin-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); margin-bottom:var(--sp-8); }
.admin-kpi {
  background:var(--bg-elevated); border:1px solid var(--border-100);
  border-radius:var(--r-lg); padding:var(--sp-5); transition:var(--t-base);
}
.admin-kpi:hover { border-color:var(--border-200); box-shadow:var(--shadow-md); }
.kpi-icon { font-size:1.6rem; margin-bottom:var(--sp-3); }
.kpi-val { font-family:'Outfit',sans-serif; font-size:1.75rem; font-weight:900; color:var(--blue-400); display:block; }
.kpi-lbl { font-size:.75rem; color:var(--text-400); text-transform:uppercase; letter-spacing:.08em; }

/* Tables */
.table-wrap { background:var(--bg-elevated); border:1px solid var(--border-100); border-radius:var(--r-lg); overflow:hidden; }
.data-table { width:100%; border-collapse:collapse; font-size:.855rem; }
.data-table th {
  background:var(--bg-raised); padding:var(--sp-3) var(--sp-4); text-align:left;
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-400); border-bottom:1px solid var(--border-200); white-space:nowrap;
}
.data-table td {
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border-100);
  color:var(--text-200); vertical-align:middle;
}
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(0,153,255,.025); }
.table-img { width:34px; height:47px; border-radius:4px; object-fit:cover; border:1px solid var(--border-100); }
.table-actions { display:flex; gap:var(--sp-2); }

/* Status badges */
.status { display:inline-flex; align-items:center; gap:4px; padding:2px var(--sp-3); border-radius:var(--r-full); font-size:.7rem; font-weight:700; }
.status::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-pending   { background:rgba(255,170,0,.14); color:var(--warning); border:1px solid rgba(255,170,0,.3); }
.status-preparing { background:rgba(0,153,255,.13); color:var(--blue-400); border:1px solid var(--border-200); }
.status-ready     { background:rgba(0,232,122,.13); color:var(--success); border:1px solid rgba(0,232,122,.3); }
.status-delivered { background:rgba(90,90,110,.2);  color:var(--text-400); border:1px solid var(--border-100); }
.status-cancelled { background:rgba(255,50,80,.13); color:var(--danger); border:1px solid rgba(255,50,80,.3); }

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(4, 6, 12, 0.9);
  z-index:2000;
  display:flex; align-items:center; justify-content:center; padding:var(--sp-6);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
  will-change: opacity, visibility;
}
.modal-overlay.active { opacity:1; visibility:visible; }
.modal {
  background:var(--bg-elevated); border:1px solid var(--border-200);
  border-radius:var(--r-2xl); max-width:540px; width:100%; max-height:85vh; overflow-y:auto;
  transform:scale(.95) translateY(18px); transition:var(--t-base);
  box-shadow:0 24px 64px rgba(0,0,0,.55), 0 0 40px rgba(0,153,255,.06);
}
.modal-overlay.active .modal { transform:scale(1) translateY(0); }
.modal-header {
  padding:var(--sp-6); border-bottom:1px solid var(--border-100);
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0;
  background:var(--bg-elevated); z-index:1;
}
.modal-title { font-size:1.05rem; font-weight:700; color:var(--text-100); }
.modal-close {
  width:32px; height:32px; border-radius:var(--r-md); border:1px solid var(--border-200);
  background:transparent; color:var(--text-300); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1rem; transition:var(--t-fast);
}
.modal-close:hover { border-color:var(--danger); color:var(--danger); }
.modal-body { padding:var(--sp-6); }
.modal-footer {
  padding:var(--sp-5) var(--sp-6); border-top:1px solid var(--border-100);
  display:flex; gap:var(--sp-3); justify-content:flex-end;
}
.modal-lg { max-width:780px; }

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1499; opacity:0; visibility:hidden; transition:var(--t-base); }
.cart-backdrop.active { opacity:1; visibility:visible; }
.cart-drawer {
  position:fixed; top:0; right:-420px; width:420px; height:100vh;
  background:var(--bg-elevated); border-left:1px solid var(--border-200);
  z-index:1500; transition:right .35s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; box-shadow:-12px 0 50px rgba(0,0,0,.45);
}
.cart-drawer.open { right:0; }
.cart-drawer-hd {
  padding:var(--sp-6); border-bottom:1px solid var(--border-100);
  display:flex; align-items:center; justify-content:space-between;
}
.cart-drawer-title { font-weight:700; font-size:1.05rem; }
.cart-items { flex:1; overflow-y:auto; padding:var(--sp-4); }
.cart-item {
  display:flex; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--r-md);
  border:1px solid var(--border-100); margin-bottom:var(--sp-3); background:var(--bg-raised);
}
.cart-item-img-wrap { width:46px; height:64px; border-radius:4px; flex-shrink:0; border:1px solid var(--border-100); position:relative; overflow:hidden; }
.cart-item-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.cart-item-info { flex:1; }
.cart-item-name { font-weight:600; font-size:.875rem; color:var(--text-100); margin-bottom:2px; }
.cart-item-set { font-size:.72rem; color:var(--text-400); margin-bottom:var(--sp-2); }
.cart-item-price { font-family:'Outfit',sans-serif; font-size:.88rem; color:var(--blue-400); font-weight:700; }
.cart-item-rm { background:none; border:none; cursor:pointer; color:var(--text-400); font-size:.9rem; padding:3px; transition:var(--t-fast); align-self:flex-start; }
.cart-item-rm:hover { color:var(--danger); }
.cart-drawer-ft { padding:var(--sp-6); border-top:1px solid var(--border-100); }
.cart-total { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-5); }
.cart-total-lbl { font-weight:600; color:var(--text-200); }
.cart-total-val { font-family:'Outfit',sans-serif; font-size:1.35rem; font-weight:900; color:var(--blue-400); }
.cart-empty { text-align:center; padding:var(--sp-12) var(--sp-6); color:var(--text-400); }
.cart-empty-icon { font-size:2.5rem; display:block; margin-bottom:var(--sp-4); }

/* ============================================================
   TOASTS
   ============================================================ */
.toast-container { position:fixed; bottom:var(--sp-6); right:var(--sp-6); z-index:3000; display:flex; flex-direction:column; gap:var(--sp-3); }
.toast {
  background:var(--bg-elevated); border:1px solid var(--border-200); border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5); display:flex; align-items:center; gap:var(--sp-3);
  min-width:270px; max-width:360px; box-shadow:var(--shadow-lg); animation:toastIn .3s ease;
}
@keyframes toastIn { from{transform:translateX(100%);opacity:0;} to{transform:translateX(0);opacity:1;} }
.toast.out { animation:toastOut .3s ease forwards; }
@keyframes toastOut { to{transform:translateX(100%);opacity:0;} }
.toast-icon { font-size:1.15rem; flex-shrink:0; }
.toast-msg { flex:1; font-size:.86rem; color:var(--text-200); }
.toast-x { background:none; border:none; cursor:pointer; color:var(--text-400); font-size:.88rem; padding:2px; transition:var(--t-fast); }
.toast-x:hover { color:var(--text-100); }
.toast-success { border-left:3px solid var(--success); }
.toast-error   { border-left:3px solid var(--danger); }
.toast-info    { border-left:3px solid var(--blue-500); }
.toast-warn    { border-left:3px solid var(--warning); }

/* ============================================================
   SKELETON LOADER
   ============================================================ */
.skeleton {
  background:linear-gradient(90deg,var(--bg-raised) 25%,var(--bg-elevated) 50%,var(--bg-raised) 75%);
  background-size:200% 100%; animation:skel 1.6s ease-in-out infinite; border-radius:var(--r-sm);
}
@keyframes skel { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.profile-header {
  background:linear-gradient(135deg,var(--bg-elevated),var(--bg-raised));
  border:1px solid var(--border-100); border-radius:var(--r-2xl);
  padding:var(--sp-8); display:flex; align-items:center; gap:var(--sp-6);
  margin-bottom:var(--sp-8);
}
.profile-avatar {
  width:80px; height:80px; border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--blue-600),var(--cyan-400));
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:2rem; border:3px solid var(--border-200);
  flex-shrink:0; box-shadow:var(--glow-md);
}
.profile-name { font-size:1.4rem; font-weight:700; margin-bottom:3px; }
.profile-email { font-size:.875rem; color:var(--text-300); margin-bottom:var(--sp-3); }
.verified-tag {
  display:inline-flex; align-items:center; gap:4px; padding:2px var(--sp-3);
  background:rgba(0,232,122,.10); border:1px solid rgba(0,232,122,.28);
  border-radius:var(--r-full); font-size:.72rem; color:var(--success); font-weight:700;
}
.reservation-card {
  background:var(--bg-elevated); border:1px solid var(--border-100);
  border-radius:var(--r-lg); padding:var(--sp-5); display:flex;
  align-items:flex-start; gap:var(--sp-4); transition:var(--t-base); margin-bottom:var(--sp-4);
}
.reservation-card:hover { border-color:var(--border-200); }
.reservation-icon { font-size:1.8rem; flex-shrink:0; }
.reservation-info { flex:1; }
.reservation-id { font-size:.72rem; color:var(--text-400); margin-bottom:2px; }
.reservation-name { font-weight:700; font-size:.95rem; margin-bottom:var(--sp-2); }
.reservation-meta { font-size:.8rem; color:var(--text-400); }

/* ============================================================
   DECK BUILDER
   ============================================================ */
.builder-layout { display:grid; grid-template-columns:1fr 370px; gap:var(--sp-8); align-items:start; }

.commander-search-box {
  background:var(--bg-elevated); border:2px dashed var(--border-200);
  border-radius:var(--r-2xl); padding:var(--sp-10); text-align:center;
  transition:var(--t-base); margin-bottom:var(--sp-8);
}
.commander-search-box:hover { border-color:var(--blue-500); box-shadow:var(--glow-lg); border-style:solid; }
.builder-title { font-family:'Outfit',sans-serif; font-size:1.25rem; margin-bottom:var(--sp-3); }
.builder-desc { color:var(--text-400); font-size:.9rem; margin-bottom:var(--sp-6); }

.search-input-wrap { position:relative; max-width:460px; margin:0 auto; }
.search-input-wrap .filter-input { padding-left:var(--sp-8); font-size:1rem; }
.search-icon-abs { position:absolute; left:var(--sp-3); top:50%; transform:translateY(-50%); color:var(--text-400); }
.search-suggestions {
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:var(--bg-elevated); border:1px solid var(--border-200); border-radius:var(--r-lg);
  z-index:20; max-height:310px; overflow-y:auto; box-shadow:var(--shadow-lg);
}
.sugg-item {
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  cursor:pointer; transition:var(--t-fast); border-bottom:1px solid var(--border-100);
}
.sugg-item:last-child { border-bottom:none; }
.sugg-item:hover { background:rgba(0,153,255,.08); }
.sugg-img { width:30px; height:42px; border-radius:3px; object-fit:cover; flex-shrink:0; }
.sugg-name { font-weight:600; font-size:.88rem; }
.sugg-type { font-size:.72rem; color:var(--text-400); }

/* Deck list categories */
.deck-categories { display:flex; flex-direction:column; gap:var(--sp-3); }
.deck-cat {
  background:var(--bg-elevated); border:1px solid var(--border-100);
  border-radius:var(--r-lg); overflow:hidden;
}
.deck-cat-hd {
  padding:var(--sp-3) var(--sp-5); display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-raised); cursor:pointer; user-select:none;
}
.deck-cat-title { font-weight:700; font-size:.88rem; display:flex; align-items:center; gap:var(--sp-2); }
.deck-cat-count {
  font-size:.72rem; color:var(--text-400); background:var(--bg-deep);
  padding:1px var(--sp-2); border-radius:var(--r-full); border:1px solid var(--border-100);
}
.deck-cat-body { padding:var(--sp-3); }
.deck-card-row {
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm); transition:var(--t-fast);
}
.deck-card-row:hover { background:rgba(0,153,255,.05); }
.row-qty { width:20px; text-align:center; font-size:.82rem; font-weight:700; color:var(--blue-400); flex-shrink:0; }
.row-thumb { width:26px; height:36px; border-radius:3px; object-fit:cover; flex-shrink:0; border:1px solid var(--border-100); }
.row-info { flex:1; }
.row-name { font-size:.83rem; color:var(--text-100); }
.row-set  { font-size:.68rem; color:var(--text-400); }
.row-price { font-size:.83rem; color:var(--text-300); flex-shrink:0; }

/* Builder sidebar */
.builder-sidebar {
  background:var(--bg-elevated); border:1px solid var(--border-200);
  border-radius:var(--r-2xl); padding:var(--sp-6);
  position:sticky; top:calc(var(--nav-h) + var(--sp-4));
}
.builder-cmd {
  text-align:center; margin-bottom:var(--sp-6);
  padding-bottom:var(--sp-6); border-bottom:1px solid var(--border-100);
}
.builder-cmd img {
  width:130px; height:182px; border-radius:12px; object-fit:cover;
  margin-bottom:var(--sp-4); box-shadow:var(--shadow-lg),var(--glow-sm);
  border:2px solid var(--border-300);
}
.builder-cmd-name { font-weight:700; font-size:.95rem; margin-bottom:4px; }
.builder-cmd-type { font-size:.78rem; color:var(--text-400); }

.completeness-sec { margin-bottom:var(--sp-5); }
.completeness-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-2); }
.completeness-lbl { font-size:.82rem; color:var(--text-300); }
.completeness-pct { font-family:'Outfit',sans-serif; font-size:1.15rem; font-weight:900; color:var(--blue-400); }

.price-breakdown {
  background:var(--bg-raised); border-radius:var(--r-lg); padding:var(--sp-4);
  margin-bottom:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3);
}
.price-row { display:flex; justify-content:space-between; align-items:center; font-size:.875rem; }
.price-row .lbl { color:var(--text-300); }
.price-row .val { color:var(--text-100); font-weight:600; }
.price-row.total .lbl { font-weight:700; color:var(--text-100); }
.price-row.total .val { font-family:'Outfit',sans-serif; font-size:1.05rem; color:var(--blue-400); }

.extra-options { display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.extra-opt {
  background:var(--bg-raised); border:1px solid var(--border-100);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4);
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; transition:var(--t-fast); user-select:none;
}
.extra-opt:hover { border-color:var(--border-200); }
.extra-opt.sel { border-color:var(--blue-500); background:rgba(0,153,255,.08); }
.extra-opt-lbl { font-size:.855rem; font-weight:600; }
.extra-opt-price { font-size:.78rem; color:var(--text-400); }
.extra-check {
  width:20px; height:20px; border-radius:4px; border:2px solid var(--border-300);
  display:flex; align-items:center; justify-content:center; font-size:.72rem;
  color:#fff; transition:var(--t-fast); flex-shrink:0;
}
.extra-opt.sel .extra-check { background:var(--blue-500); border-color:var(--blue-500); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background:var(--bg-elevated); border-top:1px solid var(--border-100);
  padding:var(--sp-16) 0 var(--sp-8); margin-top:var(--sp-20);
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--sp-12); margin-bottom:var(--sp-10); }
.footer-logo { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.footer-logo img { height:34px; border-radius:4px; }
.footer-logo-text { font-family:'Outfit',sans-serif; font-size:1.15rem; font-weight:900; color:var(--blue-400); letter-spacing:.12em; }
.footer-desc { color:var(--text-300); font-size:.855rem; max-width:265px; margin-bottom:var(--sp-5); }
.social-links { display:flex; gap:var(--sp-3); }
.social-link {
  width:36px; height:36px; border-radius:var(--r-md); border:1px solid var(--border-200);
  background:var(--bg-raised); display:flex; align-items:center; justify-content:center;
  font-size:.9rem; color:var(--text-300); transition:var(--t-fast);
}
.social-link:hover { border-color:var(--blue-400); color:var(--blue-400); box-shadow:var(--glow-sm); }
.footer-col-title { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text-300); margin-bottom:var(--sp-5); }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-links a { color:var(--text-400); font-size:.855rem; transition:var(--t-fast); }
.footer-links a:hover { color:var(--blue-400); }
.footer-info { font-size:.855rem; color:var(--text-400); display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-info-row { display:flex; align-items:flex-start; gap:var(--sp-2); }
.footer-bottom {
  border-top:1px solid var(--border-100); padding-top:var(--sp-8);
  display:flex; justify-content:space-between; align-items:center;
  font-size:.78rem; color:var(--text-400); flex-wrap:wrap; gap:var(--sp-4);
}

/* ============================================================
   UTILITIES & ANIMATIONS
   ============================================================ */
.fade-in { opacity:0; animation:fadeIn .45s ease forwards; }
@keyframes fadeIn { to{opacity:1;} }

.slide-up { opacity:0; transform:translateY(28px); animation:slideUp .45s ease forwards; }
@keyframes slideUp { to{opacity:1;transform:translateY(0);} }

.glow-text { color:var(--blue-400); text-shadow:var(--glow-md); }
.glass { background:var(--bg-glass); backdrop-filter:blur(12px); border:1px solid var(--border-100); }
.text-muted { color:var(--text-400); }
.text-sm { font-size:.855rem; }

/* Tooltip */
[data-tip] { position:relative; cursor:help; }
[data-tip]::after {
  content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%); background:var(--bg-raised); border:1px solid var(--border-200);
  border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3);
  font-size:.72rem; white-space:nowrap; color:var(--text-200);
  pointer-events:none; opacity:0; transition:var(--t-fast); z-index:50;
}
[data-tip]:hover::after { opacity:1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-visual { display:none; }
  .steps-grid { grid-template-columns:repeat(2,1fr); }
  .steps-grid::before { display:none; }
  .admin-kpi-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:var(--sp-8); }
  .builder-layout { grid-template-columns:1fr; }
  .builder-sidebar { position:static; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  
  /* Optimizaciones de Navbar Móvil */
  .nav-container {
    gap: var(--sp-2) !important;
    padding: 0 var(--sp-3) !important;
  }
  .nav-logo img {
    height: 40px !important;
    width: 40px !important;
  }
  .nav-logo-text {
    font-size: 1.1rem !important;
    letter-spacing: 0.06em !important;
  }
  .nav-actions {
    gap: var(--sp-2) !important;
  }
  .nav-cart-btn, .admin-btn {
    width: 36px !important;
    height: 36px !important;
  }
  
  /* Esconder botón de verificación de email en cabeceras móviles */
  #headerVerifyBtn {
    display: none !important;
  }
  
  /* Hacer compactos los botones de Login/Registro */
  .nav-auth a.btn-primary {
    display: none !important; /* Escondemos Registrarse en el header (ya está en el menú móvil) */
  }
  .nav-auth a.btn-ghost {
    font-size: 0.8rem !important;
    padding: 0 !important;
    background: rgba(0, 153, 255, 0.1) !important;
    color: transparent !important; /* Esconder el texto largo "Iniciar sesión" */
    border: 1px solid rgba(0, 153, 255, 0.25) !important;
    border-radius: var(--r-md) !important;
    width: 68px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transition: var(--t-fast) !important;
  }
  .nav-auth a.btn-ghost::before {
    content: "Entrar";
    color: var(--blue-400);
    position: absolute;
    font-weight: 700;
    font-size: 0.8rem;
  }
  .nav-auth a.btn-ghost:hover {
    background: rgba(0, 153, 255, 0.18) !important;
    border-color: var(--blue-500) !important;
  }
  
  /* Ocultar texto del logo en pantallas móviles para liberar espacio horizontal */
  @media (max-width: 600px) {
    .nav-logo-text {
      display: none !important;
    }
  }

  .cards-grid { grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
  .admin-layout { grid-template-columns:1fr; }
  .admin-sidebar { display:none; }
  .cart-drawer { width:100%; right:-100%; }
  .footer-grid { grid-template-columns:1fr; }
  .filters-bar {
    padding: var(--sp-4);
    gap: var(--sp-3);
    flex-direction: column;
    align-items: stretch;
  }
  .search-wrap {
    flex: 1 1 auto;
  }
  .filter-group {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
  .filter-group.filter-group-pills {
    min-width: 0;
  }
  .filter-pills {
    justify-content: flex-start;
  }
}
@media (max-width:480px) {
  .container { padding:0 var(--sp-4); }
  .cards-grid { grid-template-columns:1fr; }
  .auth-card { padding:var(--sp-6); }
  .hero-stats { gap:var(--sp-5); }
}

/* ============================================================
   FOIL SHINE EFFECT (ManaBox Style)
   ============================================================ */
.foil-shine-effect {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}
.foil-shine-effect::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.12) 40%,
    rgba(255, 0, 128, 0.08) 45%,
    rgba(0, 255, 255, 0.08) 50%,
    rgba(255, 255, 0, 0.08) 55%,
    rgba(255, 255, 255, 0.12) 60%,
    rgba(255, 255, 255, 0) 70%
  );
  background-size: 200% 200%;
  background-position: -120% -120%;
  mix-blend-mode: color-dodge;
  animation: foil-glimmer 6s linear infinite;
  opacity: 0.85;
}

@keyframes foil-glimmer {
  0% { background-position: -120% -120%; }
  50% { background-position: 80% 80%; }
  100% { background-position: 200% 200%; }
}

/* ============================================================
   LIST VIEW STYLING
   ============================================================ */
.cards-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
}
.tcg-list-row {
  display: flex;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-100);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  gap: var(--sp-4);
  transition: var(--t-base);
  width: 100%;
  box-sizing: border-box;
}
.tcg-list-row:hover {
  border-color: var(--border-300);
  box-shadow: var(--glow-card);
  transform: translateY(-2px);
}
.tcg-list-img-wrap {
  width: 52px;
  height: 72px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border-100);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tcg-list-img-wrap:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.tcg-list-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tcg-list-info {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 1;
}
.tcg-list-name-set {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 150px;
}
.tcg-list-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-100);
  transition: var(--t-fast);
}
.tcg-list-name:hover {
  color: var(--blue-400);
}
.tcg-list-set {
  font-size: 0.72rem;
  color: var(--text-400);
  display: flex;
  align-items: center;
  gap: 4px;
}
.tcg-list-details {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-shrink: 0;
}
.tcg-list-finish {
  width: 85px;
  text-align: left;
}
.tcg-list-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 110px;
  justify-content: center;
}
.tcg-list-price-store {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue-400);
}
.tcg-list-stock {
  width: 90px;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 600;
}
.tcg-list-action {
  flex-shrink: 0;
  width: 120px;
}
.tcg-list-action .btn-reserve {
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.82rem;
  width: 100%;
}

/* Responsiveness for List View */
@media (max-width: 768px) {
  .tcg-list-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4);
    position: relative;
  }
  .tcg-list-img-wrap {
    position: static;
    width: 64px;
    height: 90px;
  }
  .tcg-list-info {
    padding-left: 0;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    flex: 1;
    min-width: 0;
  }
  .tcg-list-name-set {
    width: 100%;
  }
  .tcg-list-details {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    border-top: none;
    padding-top: 0;
    gap: var(--sp-4);
  }
  .tcg-list-finish {
    text-align: left;
    width: auto;
  }
  .tcg-list-prices {
    align-items: flex-start;
    width: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .tcg-list-stock {
    text-align: left;
    width: auto;
  }
  .tcg-list-action {
    width: 100%;
  }
}

/* ============================================================
   TOURNAMENT STATUS BADGES (global)
   ============================================================ */
:root {
  --t-normal: 0.25s ease;
  --shadow-xl: 0 20px 60px rgba(0,0,0,.7), 0 0 30px rgba(0,153,255,.08);
  --purple-600: #7c3aed;
}

.tournament-card-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: .72rem; font-weight: 700;
}

/* Reuse same names as used in tournaments.html / admin.html */
.status-upcoming    { background:rgba(59,130,246,.2);  border:1px solid rgba(59,130,246,.4);  color:#93c5fd; }
.status-open        { background:rgba(34,197,94,.2);   border:1px solid rgba(34,197,94,.4);   color:#86efac; }
.status-in-progress { background:rgba(239,68,68,.2);   border:1px solid rgba(239,68,68,.4);   color:#fca5a5; }
.status-finished    { background:rgba(168,85,247,.2);  border:1px solid rgba(168,85,247,.4);  color:#d8b4fe; }
.status-cancelled   { background:rgba(107,114,128,.2); border:1px solid rgba(107,114,128,.4); color:#9ca3af; }

/* skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-raised) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
}
@keyframes skeleton-shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* verified tag */
.verified-tag {
  background: rgba(0,232,122,.13); border: 1px solid rgba(0,232,122,.3); color: var(--success);
  padding: 2px var(--sp-3); border-radius: var(--r-full); font-size:.75rem; font-weight:700;
}

/* Upcoming Tournament Grid */
.ut-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  width: 100%;
}
.ut-main-col {
  display: flex;
  gap: var(--sp-6);
  flex-direction: column;
}
.ut-side-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  border-top: 1px solid var(--border-200);
  padding-top: var(--sp-4);
}
.ut-img-wrap {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-200);
  position: relative;
}

@media (min-width: 768px) {
  .ut-grid {
    grid-template-columns: 1.25fr 1fr;
  }
  .ut-main-col {
    flex-direction: row;
  }
  .ut-side-col {
    border-top: none;
    border-left: 1px solid var(--border-200);
    padding-top: 0;
    padding-left: var(--sp-6);
  }
  .ut-img-wrap {
    width: 180px;
    aspect-ratio: 3/4;
  }
}
/* ─── Mana pill icons (catalog color filter) ────────────── */
.mana-pill-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
}
.pill.pill-color {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--sp-2) var(--sp-3);
}
.pill.pill-color span {
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .03em;
}

/* ─── Color pips using real MTG SVG images ───────────────── */
.pip-img {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 22px !important;
  height: 22px !important;
}
.pip-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}


/* ============================================================
   NOTICIAS / ANUNCIOS
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-6);
}
.news-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-100);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: var(--t-base);
  display: flex;
  flex-direction: column;
}
.news-card:hover {
  border-color: var(--border-200);
  transform: translateY(-3px);
  box-shadow: var(--glow-card);
}
.news-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.news-card-img-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--bg-raised), var(--bg-elevated));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--text-400);
}
.news-card-body {
  padding: var(--sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.news-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.news-tag {
  padding: 2px var(--sp-3);
  border-radius: var(--r-full);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(0,153,255,.10);
  border: 1px solid var(--border-200);
  color: var(--blue-400);
}
.news-tag.torneo    { background:rgba(124,58,237,.12); border-color:rgba(124,58,237,.3); color:#a78bfa; }
.news-tag.oferta    { background:rgba(255,170,0,.10);  border-color:rgba(255,170,0,.3);  color:var(--warning); }
.news-tag.aviso     { background:rgba(255,50,80,.10);  border-color:rgba(255,50,80,.3);  color:var(--danger); }
.news-tag.expansion { background:rgba(0,232,122,.10);  border-color:rgba(0,232,122,.3);  color:var(--success); }
.news-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-100);
  line-height: 1.3;
}
.news-card-content {
  font-size: .875rem;
  color: var(--text-300);
  line-height: 1.6;
  flex: 1;
}
.news-card-date {
  font-size: .72rem;
  color: var(--text-400);
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border-100);
}
.news-pinned-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--warning);
  background: rgba(255,170,0,.10);
  border: 1px solid rgba(255,170,0,.25);
  border-radius: var(--r-full);
  padding: 2px var(--sp-3);
}

/* News home widget */
.news-widget-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.news-widget-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--bg-elevated);
  border: 1px solid var(--border-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  transition: var(--t-fast);
  text-decoration: none;
  color: inherit;
}
.news-widget-item:hover { border-color: var(--border-200); background: var(--bg-raised); }
.news-widget-thumb {
  width: 72px;
  height: 52px;
  border-radius: var(--r-md);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text-400);
}

/* ============================================================
   RANKING GLOBAL
   ============================================================ */
.ranking-table { width:100%; border-collapse:collapse; }
.ranking-table th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-400);
  border-bottom: 1px solid var(--border-100);
  white-space: nowrap;
}
.ranking-table td {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border-100);
  font-size: .9rem;
  vertical-align: middle;
}
.ranking-table tr:last-child td { border-bottom: none; }
.ranking-table tbody tr:hover { background: rgba(0,153,255,.04); }
.rank-pos {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .85rem;
  background: var(--bg-raised);
  color: var(--text-300);
}
.rank-pos.gold   { background:rgba(255,215,0,.15); color:#ffd700; border:1px solid rgba(255,215,0,.3); }
.rank-pos.silver { background:rgba(192,192,192,.12); color:#c0c0c0; border:1px solid rgba(192,192,192,.3); }
.rank-pos.bronze { background:rgba(205,127,50,.12); color:#cd7f32; border:1px solid rgba(205,127,50,.3); }
.rank-self td { background: rgba(0,153,255,.06) !important; }
.rank-pts { font-weight:900; font-size:1.1rem; color:var(--blue-400); }
.rank-winrate { font-size:.8rem; color:var(--text-400); }

/* ============================================================
   HISTORIAL TORNEOS (PERFIL)
   ============================================================ */
.tournament-history-item {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  transition: var(--t-fast);
}
.tournament-history-item:hover { border-color: var(--border-200); }
.th-format-badge {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  background: rgba(0,153,255,.08);
  border: 1px solid var(--border-100);
  flex-shrink: 0;
}
.th-info { flex: 1; min-width: 0; }
.th-name { font-weight: 700; font-size: .95rem; color: var(--text-100); }
.th-meta { font-size: .75rem; color: var(--text-400); margin-top: 2px; }
.th-result { text-align: right; flex-shrink: 0; }
.th-pos { font-weight: 900; font-size: 1.2rem; }
.th-pts { font-size: .75rem; color: var(--text-400); }

/* =====================================================================
   PREMIUM DECK CARD — Diseño moderno tipo póster para mazos
   ===================================================================== */

.deck-premium-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-200);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  height: 100%;
}

.deck-premium-card:hover {
  transform: translateY(-6px);
  border-color: var(--blue-400);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 153, 255, 0.2);
}

.deck-premium-banner {
  position: relative;
  height: 160px;
  background-size: cover;
  background-position: center 20%;
  overflow: hidden;
}

.deck-premium-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(9, 12, 23, 0.1) 0%,
    rgba(13, 20, 36, 0.95) 100%
  );
}

.deck-premium-bracket {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 153, 255, 0.2);
  border: 1px solid var(--blue-400);
  color: var(--blue-300);
  backdrop-filter: blur(8px);
  padding: 4px 8px;
  border-radius: var(--r-md);
  font-size: 0.72rem;
  font-weight: 700;
  z-index: 2;
  text-shadow: 0 0 4px rgba(0, 153, 255, 0.4);
}

.deck-premium-colors {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  background: rgba(9, 12, 23, 0.75);
  padding: 4px 8px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.deck-premium-details {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: linear-gradient(180deg, rgba(13, 20, 36, 0.3) 0%, rgba(9, 12, 23, 0.5) 100%);
}

.deck-premium-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-100);
  margin: 0 0 6px 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-premium-commander {
  font-size: 0.82rem;
  color: var(--text-200);
  margin-bottom: var(--sp-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.deck-premium-seller-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-400);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.deck-premium-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-3);
}

.deck-premium-price {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--blue-400);
  text-shadow: 0 0 10px rgba(0, 153, 255, 0.2);
}

.deck-premium-btn-view {
  background: rgba(0, 153, 255, 0.1);
  border: 1px solid rgba(0, 153, 255, 0.3);
  color: var(--blue-300);
  padding: 6px 14px;
  border-radius: var(--r-md);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.deck-premium-card:hover .deck-premium-btn-view {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 153, 255, 0.3);
}

/* =====================================================================
   COMMANDER CARD DISPLAY — Vista en modal del comandante premium
   ===================================================================== */

.commander-card-display {
  position: relative;
  width: 100%;
  aspect-ratio: 2.5 / 3.5;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-lg), 0 0 25px rgba(0, 153, 255, 0.15);
  background-size: cover;
  background-position: center top;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.commander-card-display:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-xl), 0 0 35px rgba(0, 153, 255, 0.3);
  border-color: var(--blue-400);
}

.commander-card-glass-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(9, 12, 23, 0.85);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--sp-3);
  text-align: center;
}

.commander-card-glass-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-100);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .deck-modal-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
   LOADING OVERLAY — Bloqueador y spinner global premium
   ===================================================================== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 6, 12, 0.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.loading-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.loading-overlay-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-200);
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), var(--glow-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  max-width: 90%;
  width: 360px;
  animation: loadingPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.loading-spinner-circle {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(0, 153, 255, 0.15);
  border-left-color: var(--blue-500);
  border-radius: 50%;
  animation: loadingSpin 0.8s linear infinite;
  box-shadow: 0 0 10px rgba(0, 153, 255, 0.1);
}

.loading-overlay-text {
  font-family: 'Outfit', sans-serif;
  color: var(--text-100);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

@keyframes loadingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes loadingPop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* =====================================================================
   SELLER RATING & POWERSELLER STYLES
   ===================================================================== */
.rating-star-btn {
  user-select: none;
  display: inline-block;
  transition: transform 0.15s ease, color 0.15s ease;
}
.rating-star-btn:hover {
  transform: scale(1.25);
  text-shadow: 0 0 10px rgba(255, 170, 0, 0.4);
}

.seller-stars {
  color: var(--warning);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.badge-powerseller {
  background: linear-gradient(135deg, #ffd700, #ff8800);
  color: #000 !important;
  font-weight: 800;
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}



/* ─── MODAL DE OFERTAS CARDMARKET ────────────────────────── */
.offers-modal-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-6);
  align-items: start;
}

.offers-card-preview {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
  position: sticky;
  top: 0;
}

.offers-card-img-wrap {
  width: 100%;
  max-width: 220px;
  border-radius: var(--r-lg);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-200);
  transition: transform var(--t-normal);
  position: relative;
  overflow: hidden;
  display: flex;
}

.offers-card-img-wrap:hover {
  transform: translateY(-4px) scale(1.02);
}

.offers-card-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.offers-card-meta {
  width: 100%;
  background: var(--bg-deep);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-100);
  font-size: 0.8rem;
  color: var(--text-300);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.offers-list-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-height: 480px;
  overflow-y: auto;
  padding-right: var(--sp-2);
}

.offer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-100);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  transition: transform var(--t-fast), border-color var(--t-fast);
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.offer-row:hover {
  transform: translateX(4px);
  border-color: var(--border-200);
}

.offer-seller-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 180px;
}

.offer-seller-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.offer-seller-name {
  font-weight: 700;
  color: var(--text-100);
  font-size: 0.875rem;
}

.offer-meta-tags {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 4px;
  flex-wrap: wrap;
}

.offer-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

.offer-badge-condition {
  background: rgba(96, 120, 160, 0.12);
  color: var(--text-200);
  border: 1px solid rgba(96, 120, 160, 0.25);
}

.offer-badge-lang {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
  text-transform: uppercase;
}

.offer-price-buy {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.offer-price-lbl {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--blue-400);
  text-align: right;
  min-width: 75px;
}

.offer-buy-control {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.offer-qty-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-200);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-deep);
  height: 30px;
}

.offer-qty-selector button {
  background: none;
  border: none;
  color: var(--text-200);
  padding: 0 10px;
  cursor: pointer;
  font-weight: bold;
  height: 100%;
  transition: background var(--t-fast), color var(--t-fast);
}

.offer-qty-selector button:hover {
  background: var(--bg-raised);
  color: #fff;
}

.offer-qty-selector span {
  font-size: 0.85rem;
  font-weight: bold;
  padding: 0 4px;
  min-width: 20px;
  text-align: center;
  color: var(--text-100);
}

.offer-buy-btn {
  background: var(--blue-600);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 0.8rem;
  height: 30px;
  padding: 0 14px;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
  display: flex;
  align-items: center;
  gap: 4px;
}

.offer-buy-btn:hover:not(:disabled) {
  background: var(--blue-500);
  transform: translateY(-1px);
}

.offer-buy-btn:disabled {
  background: var(--bg-deep);
  color: var(--text-500);
  cursor: not-allowed;
  border: 1px solid var(--border-100);
}

@media (max-width: 768px) {
  .offers-modal-body {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  
  .offers-card-preview {
    position: static;
    flex-direction: row;
    justify-content: center;
    gap: var(--sp-4);
  }
  
  .offers-card-img-wrap {
    max-width: 120px;
  }
  
  .offers-card-meta {
    flex: 1;
    height: 100%;
  }
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border: 0.15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: loadingSpin 0.75s linear infinite;
  vertical-align: text-bottom;
  margin-right: 8px;
}

/* =====================================================================
   ADDITIONAL MOBILE RESPONSIVENESS AND UX IMPROVEMENTS (EXCLUSIVELY FOR MOBILE)
   ===================================================================== */
#navWishlistBtn {
  position: relative !important;
  background: var(--border-100) !important;
  border: 1px solid var(--border-200) !important;
  border-radius: var(--r-md) !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: var(--t-fast) !important;
  color: var(--text-200) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}
#navWishlistBtn:hover {
  border-color: var(--blue-500) !important;
  color: var(--blue-400) !important;
  box-shadow: var(--glow-sm) !important;
}
#wishBadge {
  position: absolute !important;
  top: -7px !important;
  right: -7px !important;
  background: var(--blue-500) !important;
  color: #fff !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: var(--r-full) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--glow-sm) !important;
  border: 2px solid var(--bg-deep) !important;
  padding: 0 !important;
  z-index: 2 !important;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.profile-stats-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.profile-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.modal-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-6);
}
.deck-modal-summary-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--sp-6);
}
.deck-modal-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.deck-modal-extras-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

@media (max-width: 768px) {
  /* Profile layout improvements */
  .profile-header {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: var(--sp-6);
    gap: var(--sp-4);
  }
  .profile-header > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .profile-header > div:last-child {
    margin-left: 0 !important;
    justify-content: center;
    width: 100%;
    margin-top: var(--sp-2);
  }
  .profile-stats-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4) !important;
  }
  .profile-stats-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-3) !important;
  }
  .profile-form-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-3) !important;
  }
  
  /* Modal structure improvements on mobile */
  .modal-grid {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
    gap: var(--sp-4) !important;
  }
  #modalCardImgWrap {
    width: 100% !important;
    max-width: 160px !important;
    margin: 0 auto;
  }
  
  /* Deck modal and lists */
  .deck-modal-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4) !important;
  }
  .deck-modal-grid > div:first-child {
    max-width: 200px;
    margin: 0 auto;
    width: 100%;
    position: static !important; /* Disable sticky on mobile stack */
  }
  
  .deck-modal-summary-grid {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
    gap: var(--sp-4) !important;
  }
  .deck-modal-summary-grid > div:first-child {
    margin: 0 auto;
  }
  .deck-modal-stats-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-2) !important;
  }
  .deck-modal-extras-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-2) !important;
  }
  
  .offers-card-flip {
    max-width: 160px;
    margin: 0 auto;
  }

  /* Spacing between action items in mobile navbar */
  .nav-actions {
    gap: 14px !important;
  }
  #navWishlistBtn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 480px) {
  .modal {
    max-height: 92vh !important;
    border-radius: var(--r-xl) !important;
  }
  .modal-header {
    padding: var(--sp-4) !important;
  }
  .modal-body {
    padding: var(--sp-4) !important;
  }
  .modal-footer {
    padding: var(--sp-4) !important;
    flex-direction: column;
    gap: var(--sp-2) !important;
  }
  .modal-footer .btn {
    width: 100% !important;
  }
}

.profile-email {
  word-break: break-all !important;
}

/* Ocultar barra de desplazamiento en los contenedores de pestañas */
.profile-tabs-scroll {
  scrollbar-width: none !important;
}
.profile-tabs-scroll::-webkit-scrollbar {
  display: none !important;
}

.profile-header-actions {
  margin-left: auto;
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .profile-header-actions {
    margin-left: 0 !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: var(--sp-2) !important;
  }
  .profile-header-actions .btn {
    flex: 1;
    min-width: 130px;
    justify-content: center;
  }
}