:root {
  /* Marketplace theme — aliased to shared WormShop Design System tokens (see /styles.css). Same variable names, values now unified across marketplace/seller/admin. */
  --m-bg: var(--ws-bg);
  --m-surface: var(--ws-surface);
  --m-surface-2: var(--ws-surface-2);
  --m-surface-hover: var(--ws-surface-hover);
  
  --m-border: var(--ws-border);
  --m-border-strong: var(--ws-border-strong);
  
  /* Brand Accents — negro + rojo; nombres legacy se conservan por compatibilidad. */
  --m-brand: var(--ws-brand);
  --m-brand-glow: var(--ws-glow-brand);
  --m-accent-purple: var(--ws-brand);
  --m-accent-pink: var(--ws-brand-strong);
  --m-accent-cyan: var(--ws-accent-cyan);
  
  /* Status */
  --m-success: var(--ws-success);
  --m-warning: var(--ws-warning);
  --m-danger: var(--ws-danger);
  --m-info: var(--ws-info);
  
  /* Text */
  --m-text: var(--ws-text);
  --m-muted: var(--ws-muted);
  --m-muted-2: var(--ws-muted-2);
  
  --m-font: var(--ws-font-body);
  --m-font-display: var(--ws-font-display);
  --m-font-mono: var(--ws-font-mono);
  
  /* Geometry */
  --m-radius-lg: var(--ws-radius-lg);
  --m-radius-md: var(--ws-radius-md);
  --m-radius-sm: var(--ws-radius-sm);
  
  --m-shadow-card: var(--ws-shadow-lg);
  --m-shadow-glass: var(--ws-shadow-lg);

  /* Bug fix (audit): embedded admin panel below referenced --a-accent2, previously undefined in this file */
  --a-accent2: var(--ws-info);
  --a-border: var(--ws-border);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

@property --ws-float-y { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --ws-cat-tilt { syntax: '<angle>'; inherits: true; initial-value: 0deg; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  background-color: var(--m-bg);
  color: var(--m-text);
  font-family: var(--m-font);
  font-size: 14px;
  min-height: 100vh;
  overflow-x: hidden; /* red de seguridad: ningún elemento suelto debería forzar scroll horizontal */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Background Noise */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Global media constraints */
img, svg { max-width: 100%; display: block; }
.a-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; }
.a-icon svg { width: 100%; height: 100%; }

a { color: var(--m-brand); text-decoration: none; cursor: pointer; transition: color 0.15s ease; }
a:hover { color: var(--ws-brand-strong); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
.hidden { display: none !important; }
.mono { font-family: var(--m-font-mono); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--m-bg); }
::-webkit-scrollbar-thumb { background: var(--m-surface-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--m-muted-2); }

/* Buttons & Inputs (Marketplace style) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--m-radius-md); font-size: 13.5px; font-weight: 600;
  background: var(--m-surface-2); color: var(--m-text); border: 1px solid var(--m-border);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; white-space: nowrap;
}
.btn:hover { background: var(--m-surface-hover); border-color: var(--m-border-strong); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--m-brand); outline-offset: 2px; }
.btn-primary {
  background: var(--m-text); color: var(--m-bg); border: 1px solid transparent;
}
.btn-primary:hover { background: #d4d4d8; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,255,255,0.15); }
.btn-brand {
  background: linear-gradient(135deg, var(--m-brand), var(--ws-brand-strong)); color: #fff; border: none;
}
.btn-brand:hover { background: linear-gradient(135deg, var(--ws-brand-strong), var(--m-brand)); box-shadow: 0 4px 20px var(--m-brand-glow); }
.btn-small { padding: 6px 12px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn-google { background: #fff; color: #000; border: none; }

input, textarea, select {
  width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--m-border);
  color: var(--m-text) !important; padding: 10px 14px; border-radius: var(--m-radius-md) !important;
  font-size: 13.5px; font-family: inherit; margin-bottom: 14px; transition: 0.2s !important;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--m-brand) !important; background: rgba(var(--ws-brand-rgb), 0.05);
  box-shadow: 0 0 0 3px rgba(var(--ws-brand-rgb), 0.14) !important;
}
/* Flecha custom para TODO <select> nativo del sitio (paneles seller/admin
   incluidos) — antes dependían 100% de la flecha del navegador porque no
   tenían appearance:none. Se usa "center" en vez de un offset en px para
   que funcione igual sin importar la altura de cada select (a diferencia
   de .toolbar-filters select, que sí puede fijar una altura propia). */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--m-muted) 50%),
    linear-gradient(135deg, var(--m-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) center,
    calc(100% - 14px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select:focus {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--m-brand) 50%),
    linear-gradient(135deg, var(--m-brand) 50%, transparent 50%);
}
label { font-size: 12px; color: var(--m-muted); display: block; margin-bottom: 6px; font-weight: 500; }

/* ================== PUBLIC STOREFRONT ================== */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media(min-width:1600px){ .wrap{ max-width:1440px; } }
@media(min-width:2000px){ .wrap{ max-width:1600px; } }
@media(min-width:3000px){ .wrap{ max-width:1760px; } }

header {
  position: sticky; top: 0; z-index: 50; background: var(--m-bg, #09090b); border-bottom: 1px solid var(--m-border);
}
.headbar { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font-family: var(--m-font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.5px; display: flex; align-items: center; gap: 8px; }
.brand .dot { color: var(--m-brand); }
.navlinks { display: flex; gap: 32px; font-size: 14px; font-weight: 500; color: var(--m-muted); }
.navlinks a:hover { color: var(--m-text); }
.headactions { display: flex; gap: 12px; align-items: center; }

/* Auditoría responsive: .navlinks se ocultaba en mobile (≤768px, más
   abajo) sin dejar NINGÚN reemplazo — Beneficios/Categorías/Productos/
   Afiliados quedaban inalcanzables desde el celular salvo scrolleando
   la página entera a mano. Este botón + panel son ese reemplazo,
   ocultos en desktop (donde .navlinks ya los muestra normal). */
.nav-mobile-toggle {
  display: none;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid var(--m-border); border-radius: 10px;
  background: var(--m-surface-2); color: var(--m-text); cursor: pointer;
  flex-shrink: 0;
}
.nav-mobile-toggle:hover { background: var(--m-surface-hover); border-color: var(--m-border-strong); }
.nav-mobile-toggle svg { width: 19px; height: 19px; }
.nav-mobile-panel {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  flex-direction: column; padding: 8px;
  background: var(--m-surface, #101012);
  border-bottom: 1px solid var(--m-border);
  box-shadow: 0 16px 32px rgba(0,0,0,0.35);
}
.nav-mobile-panel.open { display: flex; }
.nav-mobile-panel a {
  padding: 13px 14px; border-radius: 10px; font-size: 14.5px; font-weight: 500;
  color: var(--m-muted); transition: 0.15s;
}
.nav-mobile-panel a:hover, .nav-mobile-panel a:focus-visible { background: var(--m-surface-hover); color: var(--m-text); }
@media(min-width: 769px){ .nav-mobile-toggle, .nav-mobile-panel { display: none !important; } }

/* Hero Storefront */
.hero {
  position: relative; padding: 120px 24px 80px; text-align: center; min-height: 480px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--m-border); overflow: hidden;
}
.tunnel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.3; z-index: 1; }
.hero-content { position: relative; z-index: 2; max-width: 800px; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--m-brand); background: rgba(var(--ws-brand-rgb),0.1); border: 1px solid rgba(var(--ws-brand-rgb),0.2); padding: 6px 14px; border-radius: 20px; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.5px; }
.hero h1 { font-size: clamp(34px, 5vw + 1rem, 64px); line-height: 1.1; font-weight: 800; margin-bottom: 20px; letter-spacing: -1.5px; }
.hero h1 span { background: linear-gradient(120deg, var(--m-brand), var(--m-accent-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--m-muted); font-size: 18px; margin-bottom: 36px; line-height: 1.5; }
.hero-actions { display: flex; gap: 16px; justify-content: center; }

.stats { display: flex; justify-content: center; gap: 80px; padding: 40px 24px; background: var(--m-surface); border-bottom: 1px solid var(--m-border); flex-wrap: wrap; }
.stat b { display: block; font-family: var(--m-font-display); font-size: 32px; font-weight: 800; color: var(--m-text); }
.stat span { font-size: 13px; color: var(--m-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }

section.block { padding: 80px 0; }
.eyebrow { font-size: 12px; color: var(--m-brand); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; font-weight: 700; }
.blocktitle { font-family: var(--m-font-display); font-size: 36px; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.5px; }
.blocksub { color: var(--m-muted); font-size: 16px; margin-bottom: 40px; }

.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.benefit { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); padding: 32px 24px; transition: 0.2s; }
.benefit:hover { border-color: var(--m-border-strong); transform: translateY(-4px); background: var(--m-surface-hover); }
.benefit .icon { font-size: 32px; margin-bottom: 20px; }
.benefit h3 { font-size: 18px; margin-bottom: 8px; }
.benefit p { font-size: 14px; color: var(--m-muted); line-height: 1.6; }

/* Categories */
.cat-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.cat-chip {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 12px;
  background: var(--m-surface); border: 1px solid var(--m-border); font-size: 14px; font-weight: 500;
  color: var(--m-text); transition: 0.2s; cursor: pointer;
}
.cat-chip:hover { background: var(--m-surface-hover); border-color: var(--m-border-strong); }
.cat-chip {
  /* Antes se movía sola de lado a lado según el scroll (efecto
     "Premium Motion" que se quitó por completo) — ahora queda fija. */
  transition: transform .45s cubic-bezier(.22,1,.36,1), background 0.2s, border-color 0.2s;
}
.cat-chip.active { background: rgba(var(--ws-brand-rgb),0.1); border-color: var(--m-brand); color: var(--m-brand); }
.cat-chip-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; position: relative; }
.cat-chip-icon .a-icon { width: 14px; height: 14px; position: relative; z-index: 1; }
.cat-chip-icon {
  /* Animación de flote infinita quitada — los íconos de categoría se
     movían solos sin parar, nunca se pidió que hicieran eso. will-change
     también se quitó: sin esa animación infinita no hay razón para
     mantener esta capa de composición permanente en cada ícono. */
  transform: translateY(var(--ws-float-y));
  transition: box-shadow .3s ease, background .2s ease, border-color .2s ease;
}
.cat-chip:nth-child(3n+1) .cat-chip-icon { animation-delay: -.6s; }
.cat-chip:nth-child(3n+2) .cat-chip-icon { animation-delay: -1.8s; }
.cat-chip-icon::before {
  content: ''; position: absolute; inset: -6px; border-radius: inherit; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle 1.5px at 20% 25%, rgba(var(--ws-brand-rgb),.55), transparent 60%),
    radial-gradient(circle 1.5px at 82% 75%, rgba(var(--ws-brand-rgb),.5), transparent 60%),
    radial-gradient(circle 1px at 55% 15%, rgba(255,255,255,.4), transparent 60%);
  background-repeat: no-repeat; opacity: .5;
  /* Animación de partículas en movimiento infinito quitada — nada
     debe moverse solo, a pedido. */
}
.cat-chip:hover .cat-chip-icon {
  box-shadow: 0 0 0 1px rgba(var(--ws-brand-rgb),.3), 0 10px 24px rgba(var(--ws-brand-rgb),.18), 0 0 20px rgba(var(--ws-brand-rgb),.1);
}
.cat-chip-icon:has(img)::before {
  /* Si la categoría tiene foto real, no hace falta el decorado de
     partículas detrás — se ve más limpio mostrando solo la imagen. */
  display: none;
}

/* Product Cards (Marketplace High Density) */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.m-card {
  background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg);
  display: flex; flex-direction: column; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; position: relative;
}
.m-card:hover { transform: translateY(-4px); border-color: var(--m-border-strong); box-shadow: var(--m-shadow-card); }
.m-card-media {
  aspect-ratio: 1 / 1; position: relative; display: flex; align-items: center; justify-content: center;
  font-size: 48px; font-family: var(--m-font-display); font-weight: 800; color: #fff; overflow: hidden;
}
.m-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.m-badge {
  position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 800; padding: 5px 9px;
  border-radius: var(--m-radius-sm); text-transform: uppercase; letter-spacing: 0.6px; display: flex; align-items: center; gap: 4px; z-index: 2;
  /* Fondo en degradado + doble sombra (color + oscura) para que se lea
     bien sobre CUALQUIER foto de fondo, clara u oscura, sin depender
     de qué haya detrás — "se ajusta a la foto" en vez de mezclarse. */
  background-image: linear-gradient(135deg, var(--m-badge-c, #a855f7), color-mix(in srgb, var(--m-badge-c, #a855f7) 65%, #000));
  box-shadow: 0 3px 10px rgba(0,0,0,0.45), 0 0 16px -4px var(--m-badge-c, #a855f7), inset 0 0 0 1px rgba(255,255,255,0.18);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.m-badge .a-icon { width: 10px; height: 10px; }
.fav-btn {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
  color: #fff; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: 0.2s; z-index: 2;
}
.fav-btn:hover { background: rgba(var(--ws-brand-strong-rgb),0.2); border-color: var(--m-accent-pink); color: var(--m-accent-pink); transform: scale(1.05); }
.fav-btn.active { color: var(--m-accent-pink); background: rgba(var(--ws-brand-strong-rgb),0.15); border-color: var(--m-accent-pink); }
.fav-btn .a-icon { width: 16px; height: 16px; }

.m-card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.m-card-seller {
  font-size: 11px; color: var(--m-muted); display: flex; align-items: center; gap: 4px; margin-bottom: 8px; transition: color 0.15s; cursor: pointer;
}
.m-card-seller:hover { color: var(--m-text); }
.m-card-seller .a-icon { width: 12px; height: 12px; }
.m-seller-check { background: var(--m-brand); color: #000; width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 8px; font-weight: 800; margin-left: 2px; }
.m-card-title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--m-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
/* Personalización del nombre — elegida por el vendedor (mismo set de
   10 colores que badges/tienda/anuncio, para que todo el sitio use el
   mismo lenguaje visual). data-name-color solo define el color; el
   estilo (bold/gradient/glow) es una capa aparte y combinable. */
.m-card-title[data-name-color], #pd-name[data-name-color] { color: rgb(var(--m-name-c)); }
.m-card-title[data-name-style="bold"], #pd-name[data-name-style="bold"] { font-weight: 800; }
.m-card-title[data-name-style="gradient"], #pd-name[data-name-style="gradient"] { background-image: linear-gradient(90deg, rgb(var(--m-name-c)), color-mix(in srgb, rgb(var(--m-name-c)) 55%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.m-card-title[data-name-style="glow"], #pd-name[data-name-style="glow"] { text-shadow: 0 0 8px rgba(var(--m-name-c),0.85), 0 0 18px rgba(var(--m-name-c),0.5); font-weight: 700; }
.m-card-title[data-name-color="violet"],  #pd-name[data-name-color="violet"]  { --m-name-c: 168, 85, 247; }
.m-card-title[data-name-color="blue"],    #pd-name[data-name-color="blue"]    { --m-name-c: 59,130,246; }
.m-card-title[data-name-color="emerald"], #pd-name[data-name-color="emerald"] { --m-name-c: 16,185,129; }
.m-card-title[data-name-color="rose"],    #pd-name[data-name-color="rose"]    { --m-name-c: 244,63,94; }
.m-card-title[data-name-color="amber"],   #pd-name[data-name-color="amber"]   { --m-name-c: 245,158,11; }
.m-card-title[data-name-color="cyan"],    #pd-name[data-name-color="cyan"]    { --m-name-c: 0,229,255; }
.m-card-title[data-name-color="magenta"], #pd-name[data-name-color="magenta"] { --m-name-c: 255,47,208; }
.m-card-title[data-name-color="lime"],    #pd-name[data-name-color="lime"]    { --m-name-c: 132,255,43; }
.m-card-title[data-name-color="purple"],  #pd-name[data-name-color="purple"]  { --m-name-c: 168,85,247; }
.m-card-title[data-name-color="gold"],    #pd-name[data-name-color="gold"]    { --m-name-c: 255,204,0; }
.m-card-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--m-text); font-weight: 500; margin-bottom: 12px; }
.stars { display: flex; gap: 2px; color: var(--m-warning); }
.stars .a-icon { width: 12px; height: 12px; }
.stars .off { color: var(--m-border-strong); }
.m-sales { color: var(--m-muted); font-weight: 400; }
.m-card-price-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; margin-bottom: 16px; }
.m-card-price-col { display: flex; flex-direction: column; }
.m-old-price { font-size: 12px; color: var(--m-muted); text-decoration: line-through; margin-bottom: -2px; }
.m-price { font-family: var(--m-font-mono); font-size: 20px; font-weight: 700; color: var(--m-brand); }
.m-stock { font-size: 11px; color: var(--m-muted); font-weight: 500; }
.m-card-actions .btn { width: 100%; }

/* ================== CLIENT DASHBOARD ================== */
#dashboard { display: flex; min-height: 100vh; background: var(--m-bg); }
.dash-sidebar {
  width: 260px; flex-shrink: 0; background: var(--m-surface); border-right: 1px solid var(--m-border);
  padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.dash-user {
  background: var(--m-surface-2); border: 1px solid var(--m-border-strong); border-radius: 12px; padding: 12px;
  display: flex; gap: 12px; align-items: center;
}
.avatar {
  width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--m-accent-purple), var(--m-accent-pink));
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; color: #fff;
}
.dash-user-info b { font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-user-info span { font-size: 11px; color: var(--m-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.plan-badge { display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; text-transform: uppercase; background: var(--m-border); color: var(--m-text); }
.plan-badge.vip { background: rgba(245, 158, 11, 0.15); color: var(--m-warning); border: 1px solid rgba(245, 158, 11, 0.3); }

.dash-nav-group { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-header { font-size: 11px; font-weight: 700; color: var(--m-muted-2); text-transform: uppercase; letter-spacing: 0.5px; padding: 0 12px 8px; }
.dash-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
  color: var(--m-muted); cursor: pointer; transition: 0.15s;
}
.dash-nav-item:hover { background: var(--m-surface-hover); color: var(--m-text); }
.dash-nav-item.active { background: rgba(var(--ws-brand-rgb), 0.1); color: var(--m-brand); font-weight: 600; }
.dash-nav-item .a-icon { color: inherit; opacity: 0.8; }
.dash-nav-item.active .a-icon { opacity: 1; }

.dash-promo {
  margin-top: auto; padding: 16px; border-radius: 12px;
  background: linear-gradient(155deg, rgba(var(--ws-brand-rgb),0.1), rgba(var(--ws-brand-strong-rgb),0.05));
  border: 1px solid rgba(var(--ws-brand-rgb),0.2); text-align: center;
}
.dash-promo-icon { width: 32px; height: 32px; border-radius: 8px; margin: 0 auto 12px; background: rgba(var(--ws-brand-rgb),0.2); display: flex; align-items: center; justify-content: center; color: var(--m-accent-purple); }
.dash-promo b { display: block; font-size: 13px; margin-bottom: 4px; }
.dash-promo span { display: block; font-size: 11px; color: var(--m-muted); line-height: 1.4; margin-bottom: 12px; }

/* Content Area */
.dash-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-topbar {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 32px;
  border-bottom: 1px solid var(--m-border); background: var(--m-bg, #09090b); position: sticky; top: 0; z-index: 30; gap: 16px;
}
.dash-search {
  flex: 1; max-width: 400px; display: flex; align-items: center; gap: 10px;
  background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-md); padding: 8px 16px; transition: 0.2s;
}
.dash-search:focus-within { border-color: var(--m-muted-2); }
.dash-search input { margin: 0; padding: 0; border: none; background: transparent; box-shadow: none; }
.dash-topbar-actions { display: flex; gap: 12px; align-items: center; }
.round-btn {
  position: relative; width: 36px; height: 36px; border-radius: 8px; background: var(--m-surface); border: 1px solid var(--m-border);
  display: flex; align-items: center; justify-content: center; color: var(--m-text); transition: 0.15s;
}
.round-btn:hover { background: var(--m-surface-hover); border-color: var(--m-border-strong); }
.round-btn .notif-dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--m-danger); border: 2px solid var(--m-bg); }

/* ---- NOTIFICATIONS PANEL (comprador) ---- */
.notif-bell-wrap { position: relative; }
.notif-panel {
  position: absolute; top: 44px; right: 0; width: 320px; max-height: 400px; overflow-y: auto;
  background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4); z-index: 300; display: flex; flex-direction: column;
}
.notif-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--m-border); background: var(--m-surface-2); }
.notif-panel-head b { font-size: 12px; font-weight: 600; color: var(--m-text); }
.notif-mark-all { font-size: 11px; color: var(--m-muted); background: none; border: none; cursor: pointer; }
.notif-mark-all:hover { color: var(--m-text); }
#notif-list { display: flex; flex-direction: column; }
.notif-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--m-border); cursor: pointer; transition: 0.15s; }
.notif-item:hover { background: rgba(255,255,255,0.02); }
.notif-item.unread { background: rgba(var(--ws-brand-rgb), 0.05); }
.notif-item .a-icon { color: var(--m-muted-2); margin-top: 2px; }
.notif-text { font-size: 12px; color: var(--m-muted); line-height: 1.4; }
.notif-item.unread .notif-text { color: var(--m-text); }
.notif-time { display: block; font-size: 10px; color: var(--m-muted-2); margin-top: 4px; }
.notif-unread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--m-info, #3b82f6); margin-top: 6px; flex-shrink: 0; }
.notif-empty { padding: 24px; text-align: center; color: var(--m-muted); font-size: 12px; }

.dash-body { padding: 32px; flex: 1; max-width: 1400px; margin: 0 auto; width: 100%; }
@media(min-width:1700px){ .dash-body{ max-width:1600px; } }
@media(min-width:2200px){ .dash-body{ max-width:1880px; } }
@media(min-width:3000px){ .dash-body{ max-width:2080px; } }
.dash-section { margin-bottom: 32px; }
.dash-title { font-family: var(--m-font-display); font-size: 28px; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.5px; }
.dash-sub { color: var(--m-muted); font-size: 14px; }

/* Storefront slider */
.dhero { position: relative; border-radius: var(--m-radius-lg); overflow: hidden; min-height: 320px; margin-bottom: 32px; border: 1px solid var(--m-border); }
.dhero-slides { position: relative; min-height: 320px; }
.dhero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; background-size: cover; background-position: center; display: flex; align-items: center; pointer-events: none; }
.dhero-slide.active { opacity: 1; pointer-events: auto; }
.dhero-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,9,11,0.95) 0%, rgba(9,9,11,0.6) 50%, transparent 100%); }
.dhero-copy { position: relative; z-index: 2; padding: 40px 60px; max-width: 600px; }
.dhero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--m-brand); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.dhero-copy h2 { font-size: 36px; font-weight: 800; line-height: 1.1; margin-bottom: 16px; font-family: var(--m-font-display); letter-spacing: -1px; }
.dhero-copy p { color: var(--m-muted); font-size: 15px; margin-bottom: 24px; line-height: 1.5; }
.dhero-chips { display: flex; gap: 12px; margin-bottom: 24px; }
.dhero-chips .chip { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--m-muted); }
.dhero-chips .chip .a-icon { color: var(--m-brand); }
.dhero-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 8px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; z-index: 5; transition: 0.2s; }
.dhero-nav:hover { background: rgba(var(--ws-brand-rgb),0.2); border-color: var(--m-brand); color: var(--m-brand); }
.dhero-nav.prev { left: 16px; } .dhero-nav.next { right: 16px; transform: translateY(-50%) scaleX(-1); }
.dhero-dots { position: absolute; bottom: 20px; left: 60px; display: flex; gap: 8px; z-index: 5; }
.dhero-dot { width: 24px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); cursor: pointer; transition: 0.2s; }
.dhero-dot.active { background: var(--m-brand); width: 40px; }

/* Tools */
.catalog-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; background: var(--m-surface); padding: 16px; border-radius: var(--m-radius-md); border: 1px solid var(--m-border); }
.toolbar-filters { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.toolbar-filters select { margin: 0 !important; width: auto; min-width: 140px; padding: 8px 12px !important; }
.coupon-row { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; background: var(--m-surface); padding: 12px 16px; border-radius: var(--m-radius-md); border: 1px solid var(--m-border); }
.coupon-row input { max-width: 240px; margin: 0; }

/* Status & Layouts */
.empty-box { background: radial-gradient(circle at 50% 0%, var(--m-surface-hover), var(--m-surface) 70%); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); padding: 64px 24px; text-align: center; color: var(--m-muted); font-size: 14px; line-height: 1.6; }
.panel-box { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-md); padding: 24px; margin-bottom: 24px; }
.account-row { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-md); padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; transition: 0.15s; }
.account-row:hover { background: var(--m-surface-hover); }
.account-row .name { font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--m-text); }
.account-row .meta { font-size: 12px; color: var(--m-muted); }
/* Fila interna de Mis Cuentas (nombre/fecha a la izquierda, precio+estado+acción a la
   derecha) — antes era un <div style="..."> suelto sin protección, por eso en móvil
   el nombre del producto se aplastaba y la fecha se partía. Estructura nueva: ambos
   lados pueden encogerse/envolver de forma prolija en vez de pelear por el mismo ancho. */
.account-row-header { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; }
.account-row-main { min-width: 0; }
.account-row-main .name { overflow-wrap: break-word; }
.account-row-main .meta { overflow-wrap: break-word; }
.account-row-actions { display: flex; align-items: center; gap: 10px; }

/* ---- Tarjeta de compra en "Mis Cuentas" (auditoría UX/responsive) ----
   Todo lo de abajo va con el prefijo .account-row-purchase a propósito:
   .account-row/.account-row-header/.account-row-actions también los usan
   Wallet, Tickets y Perfil de Afiliado con OTRO contenido — escoparlo así
   evita que este rediseño les cambie el look sin querer. */
.account-row-purchase { display: flex; flex-direction: column; align-items: stretch; }
/* !important necesario: ws-archive.css trae una regla vieja con más
   especificidad (.ws-archive-dashboard .ws-archive-cuentas-list
   .account-row-header, 3 clases) que fuerza flex-direction:column acá
   abajo de 640px — eso hacía que .account-row-main heredara su
   "flex:1 1 180px" (pensado como ANCHO mínimo en fila) como ALTO
   mínimo en columna, e inflaba cada tarjeta ~180px de espacio vacío.
   Encontrado y confirmado en la auditoría de responsive (16 ago 2026). */
.account-row-purchase .account-row-header { align-items: flex-start !important; flex-direction: row !important; }
.account-row-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.account-row-price { font-size: 16px; font-weight: 700; color: var(--m-text); white-space: nowrap; }
.account-row-purchase .account-row-actions { margin-top: 12px; flex-wrap: wrap; }
.account-row-purchase .account-row-actions:empty { display: none; margin: 0; }

/* Antes cada dato (usuario, contraseña, botón de código) era su propia
   caja con fondo+padding+margen propios — "cajas dentro de cajas" que
   sumaban alto y espacio vacío de sobra. Ahora es UN contenedor con
   filas separadas por una línea fina en vez de fondo propio cada una. */
.cred-box { margin-top: 12px; background: linear-gradient(135deg, var(--m-brand)14, var(--m-brand)06); border: 1px solid var(--m-brand)3d; border-radius: 12px; padding: 12px 14px; }
.cred-box-head { font-size: 12px; font-weight: 700; color: var(--m-brand); display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.cred-box-head-split { justify-content: space-between; }
.cred-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.cred-row:last-child { border-bottom: none; padding-bottom: 2px; }
.cred-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cred-label { font-size: 10.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--m-muted); }

/* Cuenta bloqueada hasta verificar datos / revelado bajo demanda
   (31 ago 2026, pedido explícito con imágenes de referencia) */
.cred-box-locked { border-color: rgba(var(--ws-brand-rgb), 0.35); text-align: center; }
.cred-reveal-gate { text-align: center; padding: 4px 0 2px; }
.cred-reveal-hint { font-size: 12.5px; color: var(--m-muted); line-height: 1.55; margin: 6px 0 12px; }
.cred-reveal-gate .btn, .cred-box-locked .btn { display: inline-flex; }

/* Modal "Verifica tus datos" */
.viewer-info-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: linear-gradient(135deg, var(--m-brand), var(--ws-brand-strong));
  box-shadow: 0 4px 20px var(--m-brand-glow);
}

/* Categorías rápidas de Soporte */
.support-categories-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.support-cat-btn {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--m-border);
  background: var(--m-surface-2); color: var(--m-text); cursor: pointer; text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.support-cat-btn:hover { border-color: var(--m-brand); background: rgba(var(--ws-brand-rgb), 0.08); }
.support-cat-btn .a-icon { color: var(--m-brand); flex-shrink: 0; }
.cred-row-code { flex-wrap: wrap; }
.cred-row-code [id^="code-box-"] { width: 100%; }
.cred-value { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cred-note { font-size: 12px; color: var(--m-muted); line-height: 1.5; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.06); white-space: pre-wrap; }
.cred-note:first-of-type { margin-top: 2px; }
.cred-note strong { color: var(--m-text); font-weight: 600; }

.status-pill { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.status-pill.pending { background: rgba(245, 158, 11, 0.1); color: var(--m-warning); border: 1px solid rgba(245, 158, 11, 0.2); }
.status-pill.done { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); }
.status-pill.rejected { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }

/* Promo & VIP */
.promo-banner { border-radius: var(--m-radius-lg); padding: 40px; margin-bottom: 24px; background: linear-gradient(135deg, var(--m-bg), var(--m-brand)); border: 1px solid rgba(var(--ws-brand-rgb),0.35); box-shadow: var(--ws-shadow-lg); }
.promo-banner h3 { font-size: 28px; font-family: var(--m-font-display); margin-bottom: 8px; }
.promo-banner p { font-size: 15px; opacity: 0.9; margin-bottom: 20px; }
.vip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.vip-plan { border-radius: var(--m-radius-lg); padding: 32px 24px; border: 1px solid var(--m-border); text-align: center; }
.vip-plan h4 { font-size: 18px; margin-bottom: 12px; font-family: var(--m-font-display); }
.vip-plan .price { font-size: 32px; font-weight: 800; font-family: var(--m-font-mono); display: block; margin-bottom: 24px; }
.vip-plan ul { list-style: none; font-size: 13px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; text-align: left; color: var(--m-text); opacity: 0.9; }
.vip-plan li::before { content: "✓ "; color: inherit; font-weight: bold; margin-right: 6px; }

/* Profiles */
.seller-card { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-md); padding: 20px; display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.seller-avatar { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; flex-shrink: 0; }

/* Miniatura de la Mascota Virtual en el perfil público del vendedor —
   mismo dibujo que assets/js/pet-rig.js usa en el panel del vendedor,
   solo que acá es puramente decorativa (sin stats/cooldowns), un
   vistazo rápido para el comprador. Se balancea sola, sin necesidad de
   tocarla. */
.ws-pet-mini-box { text-align: center; flex-shrink: 0; }
.ws-pet-mini-stage { width: 54px; height: 54px; position: relative; }
.ws-pet-mini-rig { width: 100%; height: 100%; transform-origin: 50% 85%; }
.ws-pet-mini-label { font-size: 9px; color: var(--m-muted); margin-top: 3px; white-space: nowrap; }

.seller-info { flex: 1; min-width: 0; }
.seller-info .sname { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
/* Nombre del vendedor: antes era texto suelto dentro de .sname (flex row), por eso al
   apretarse contra el badge "Verificado" y los 2 botones de acción en móvil, el texto
   se aplastaba letra por letra (.seller-info tenía overflow-wrap:anywhere, que permite
   encoger el contenedor a casi 0px). Con .sname-text (mismo patrón ya usado en
   .ws-rank-name y .m-card-seller de este mismo proyecto) el nombre trunca con "…" en
   vez de romperse, y el badge puede bajar de línea si no entra. */
.sname-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.seller-card-actions { display: flex; gap: 16px; }
.verified-badge { font-size: 10px; background: rgba(16,185,129,0.1); color: #10b981; border: 1px solid rgba(16,185,129,0.2); padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Payments */
.pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.pay-card { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-md); padding: 24px; text-align: center; }
.pay-icon { width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.pay-card h4 { font-size: 16px; margin-bottom: 8px; }
.pay-qr { width: 100%; max-width: 180px; border-radius: 12px; margin: 16px auto 0; border: 1px solid var(--m-border); padding: 8px; background: #fff; }

/* Badges & Roles */
.role-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.role-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; border: 1px solid transparent; }
.role-badge.cliente { background: var(--m-surface-2); color: var(--m-muted); border-color: var(--m-border-strong); }
.role-badge.vip { background: rgba(245,158,11,0.1); color: var(--m-warning); border-color: rgba(245,158,11,0.3); }

/* Activity & Stats */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-md); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.stat-card-top { display: flex; align-items: center; justify-content: space-between; }
.stat-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.stat-value { font-size: 24px; font-weight: 700; font-family: var(--m-font-mono); }
.stat-label { font-size: 12px; color: var(--m-muted); font-weight: 500; }

.activity-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--m-border); padding-bottom: 12px; }
.activity-tab { font-size: 13px; font-weight: 500; padding: 8px 16px; border-radius: 8px; color: var(--m-muted); cursor: pointer; transition: 0.15s; display: inline-flex; align-items: center; gap: 8px; }
.activity-tab:hover { background: var(--m-surface); color: var(--m-text); }
.activity-tab.active { background: var(--m-text); color: var(--m-bg); }

.activity-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--m-border); }
.activity-dot { width: 36px; height: 36px; border-radius: 8px; background: var(--m-surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--m-brand); }
.activity-text { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.activity-time { font-size: 12px; color: var(--m-muted); }

/* Chat / Messaging */
.msg-layout { display: flex; height: calc(100vh - 240px); min-height: 480px; border: 1px solid var(--m-border); border-radius: var(--m-radius-md); overflow: hidden; background: var(--m-surface); }
.msg-list-pane { width: 280px; flex-shrink: 0; border-right: 1px solid var(--m-border); display: flex; flex-direction: column; background: var(--m-bg); }
.msg-list-items { flex: 1; overflow-y: auto; }
.msg-list-item { display: flex; gap: 12px; padding: 16px; border-bottom: 1px solid var(--m-border); cursor: pointer; transition: 0.15s; }
.msg-list-item:hover { background: var(--m-surface-hover); }
.msg-list-item.active { background: var(--m-surface-2); }
.msg-list-avatar { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; flex-shrink: 0; font-size: 14px; }
.msg-list-info { flex: 1; min-width: 0; }
.msg-list-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.msg-list-preview { font-size: 12px; color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-thread-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.msg-thread-head { padding: 16px 24px; border-bottom: 1px solid var(--m-border); font-weight: 600; font-size: 15px; background: var(--m-surface-2); }
.msg-thread-body { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.msg-bubble { max-width: 75%; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.msg-bubble.mine { align-self: flex-end; background: var(--m-surface-2); color: var(--m-text); border: 1px solid var(--m-border-strong); }
.msg-bubble.theirs { align-self: flex-start; background: transparent; border: 1px solid var(--m-border); color: var(--m-muted); }
.msg-bubble-time { font-size: 11px; color: var(--m-muted-2); margin-top: 6px; display: block; text-align: right; }
.msg-thread-input-row { display: flex; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--m-border); background: var(--m-surface-2); }
.msg-thread-input-row input { margin: 0; border-radius: 8px; }

/* Modals */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: ws-overlay-in 0.2s ease; }
@keyframes ws-overlay-in { from{ opacity:0; } to{ opacity:1; } }
@keyframes ws-modal-in { from{ opacity:0; transform:scale(0.96) translateY(6px); } to{ opacity:1; transform:none; } }

/* ---- Overlay de procesamiento de pago (no se puede cerrar mientras procesa) ---- */
.processing-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.88);
  z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}
.processing-spinner {
  width: 56px; height: 56px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.15); border-top-color: var(--m-brand, var(--ws-brand-strong));
  animation: processing-spin 0.9s linear infinite; margin-bottom: 24px;
}
@keyframes processing-spin { to { transform: rotate(360deg); } }
.processing-message { color: #fff; font-size: 16px; font-weight: 500; max-width: 340px; line-height: 1.5; transition: opacity 0.25s ease; }
.processing-result-icon { font-size: 48px; margin-bottom: 16px; }
.processing-subtext { color: rgba(255,255,255,0.5); font-size: 13px; margin-top: 10px; max-width: 320px; }

/* ---- Anuncio a pantalla completa (configurable por el admin) ----
   Rediseño: tarjeta con vidrio esmerilado, glow decorativo por
   esquinas, tipografía grande con peso 800, y 5 combinaciones de
   estilo (normal/neon/aurora/cyber/glass) × 10 colores de acento
   (mismos que la personalización de Store) = 50 combinaciones reales
   configurables desde el panel admin sin tocar código. */
.site-announcement-overlay {
  position: fixed; inset: 0; background: rgba(3,3,5,0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; cursor: pointer;
}
.site-announcement-card {
  --ann-c: var(--ws-brand-strong-rgb, 168, 85, 247);
  background: linear-gradient(180deg, rgba(22,22,28,0.92), rgba(14,14,18,0.96));
  border: 1px solid rgba(var(--ann-c), 0.28); border-radius: 26px;
  max-width: 500px; width: 100%; max-height: 88vh; overflow-y: auto; overflow-x: hidden;
  padding: 40px 32px 32px; text-align: center; cursor: default; position: relative;
  animation: announcement-pop 0.32s cubic-bezier(.2,.9,.25,1.15);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 30px 70px rgba(0,0,0,0.55), 0 0 60px -18px rgba(var(--ann-c),0.5);
}
@keyframes announcement-pop { from { transform: scale(0.92) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

/* Blobs de luz decorativos en las esquinas — puramente visual, no
   interactivo, siempre detrás del contenido real. */
.site-announcement-glow { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.site-announcement-glow::before, .site-announcement-glow::after {
  content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; filter: blur(60px); opacity: 0.35;
}
.site-announcement-glow::before { top: -80px; left: -60px; background: rgba(var(--ann-c), 0.9); }
.site-announcement-glow::after { bottom: -90px; right: -70px; background: rgba(var(--ann-c), 0.6); }

.site-announcement-card > *:not(.site-announcement-glow) { position: relative; z-index: 1; }

.site-announcement-close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; z-index: 2;
  background: rgba(255,255,255,0.06); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.12); color: var(--m-text);
  font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .15s ease;
}
.site-announcement-close:hover { background: rgba(var(--ann-c),0.22); border-color: rgba(var(--ann-c),0.5); transform: rotate(90deg); }

.site-announcement-card img { max-width: 100%; border-radius: 16px; margin-bottom: 18px; box-shadow: 0 12px 30px rgba(0,0,0,0.4); }

.site-announcement-badge {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
  color: rgb(var(--ann-c)); background: rgba(var(--ann-c),0.14); border: 1px solid rgba(var(--ann-c),0.35);
}

.site-announcement-card h2 {
  font-size: 27px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 14px; color: #fff;
}
.site-announcement-card p { color: var(--m-muted); font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; margin-bottom: 20px; }
.site-announcement-card .btn-primary { display: inline-block; text-decoration: none; }
.site-announcement-hint { font-size: 11px; color: var(--m-muted-2); margin-top: 16px; }

/* ---- Anuncio: múltiples botones ---- */
.announcement-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 4px; }
.announcement-buttons a {
  display: inline-block; text-decoration: none; padding: 12px 24px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, rgb(var(--ann-c)), rgba(var(--ann-c),0.72)); color: #fff;
  box-shadow: 0 8px 22px -6px rgba(var(--ann-c),0.65);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.15s ease;
}
.announcement-buttons a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -6px rgba(var(--ann-c),0.8); opacity: 0.96; }

/* ==== Colores de acento (10, mismos que Store) — definen --ann-c ==== */
.site-announcement-card[data-accent="violet"]  { --ann-c: 168, 85, 247; }
.site-announcement-card[data-accent="blue"]    { --ann-c: 59,130,246; }
.site-announcement-card[data-accent="emerald"] { --ann-c: 16,185,129; }
.site-announcement-card[data-accent="rose"]    { --ann-c: 244,63,94; }
.site-announcement-card[data-accent="amber"]   { --ann-c: 245,158,11; }
.site-announcement-card[data-accent="cyan"]    { --ann-c: 0,229,255; }
.site-announcement-card[data-accent="magenta"] { --ann-c: 255,47,208; }
.site-announcement-card[data-accent="lime"]    { --ann-c: 132,255,43; }
.site-announcement-card[data-accent="purple"]  { --ann-c: 168,85,247; }
.site-announcement-card[data-accent="gold"]    { --ann-c: 255,204,0; }

/* ==== Estilo: neon — título con glow fuerte, botones que flotan solos ==== */
.site-announcement-card[data-style="neon"] {
  border-color: rgba(var(--ann-c),0.5);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 30px 70px rgba(0,0,0,0.6), 0 0 90px -14px rgba(var(--ann-c),0.65);
}
.site-announcement-card[data-style="neon"] h2 {
  text-shadow: 0 0 6px rgba(var(--ann-c),0.95), 0 0 18px rgba(var(--ann-c),0.85), 0 0 36px rgba(var(--ann-c),0.6), 0 0 64px rgba(var(--ann-c),0.4);
}
.site-announcement-card[data-style="neon"] .announcement-buttons a { text-shadow: 0 0 8px rgba(255,255,255,0.55); animation: ann-float 2.6s ease-in-out infinite; }
.site-announcement-card[data-style="neon"] .announcement-buttons a:nth-child(2n) { animation-delay: -1.3s; }
@keyframes ann-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ==== Estilo: aurora — degradado suave difuminado tipo aurora boreal ==== */
.site-announcement-card[data-style="aurora"] { background: linear-gradient(160deg, rgba(20,16,30,0.94), rgba(10,10,16,0.97)); }
.site-announcement-card[data-style="aurora"] .site-announcement-glow::before { width: 320px; height: 320px; opacity: 0.4; background: radial-gradient(circle, rgba(var(--ann-c),0.9), transparent 70%); filter: blur(70px); }
.site-announcement-card[data-style="aurora"] .site-announcement-glow::after { width: 300px; height: 300px; opacity: 0.3; background: radial-gradient(circle, #00e5ff, transparent 70%); filter: blur(80px); }
.site-announcement-card[data-style="aurora"] h2 { background: linear-gradient(90deg, rgb(var(--ann-c)), #fff 60%, rgb(var(--ann-c))); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ==== Estilo: cyber — grid HUD + esquinas tipo interfaz de videojuego ==== */
.site-announcement-card[data-style="cyber"] {
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 26px),
              repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 26px),
              linear-gradient(180deg, rgba(10,12,14,0.95), rgba(6,7,9,0.98));
  border-radius: 14px; border-color: rgba(var(--ann-c),0.55);
}
.site-announcement-card[data-style="cyber"]::before, .site-announcement-card[data-style="cyber"]::after {
  content: ''; position: absolute; width: 22px; height: 22px; border: 2px solid rgb(var(--ann-c)); z-index: 2; opacity: 0.9;
}
.site-announcement-card[data-style="cyber"]::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: 12px; }
.site-announcement-card[data-style="cyber"]::after { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: 12px; }
.site-announcement-card[data-style="cyber"] h2 { text-transform: uppercase; letter-spacing: 0.04em; text-shadow: 0 0 12px rgba(var(--ann-c),0.7); }
.site-announcement-card[data-style="cyber"] .announcement-buttons a { border-radius: 6px; }

/* ==== Estilo: glass — minimalista, vidrio esmerilado, sin ruido ==== */
.site-announcement-card[data-style="glass"] {
  background: rgba(20,20,26,0.55); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.site-announcement-card[data-style="glass"] .site-announcement-glow { opacity: 0.5; }
.site-announcement-card[data-style="glass"] h2 { font-weight: 700; }



/* ---- Botones flotantes de comunidad (WhatsApp/Telegram) ---- */
.community-floating-buttons { position: fixed; right: 20px; bottom: 24px; z-index: 900; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.community-fab { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.35); transition: transform 0.15s ease; }
.community-fab:hover { transform: scale(1.08); }
.community-fab-whatsapp { background: #25D366; }
.community-fab-telegram { background: #229ED9; }
@media(max-width: 640px) {
  .community-floating-buttons { right: 14px; bottom: 18px; }
  .community-fab { width: 46px; height: 46px; }
}
/* En pantallas muy angostas (~300-380px) los botones de 46px pegados al
   borde tapaban buena parte de la imagen/precio de la tarjeta de producto
   que quedaba debajo. Un poco más chicos y más pegados a la esquina para
   estorbar menos, sin bajar de un tamaño cómodo para tocar con el dedo. */
@media(max-width: 380px) {
  .community-floating-buttons { right: 10px; bottom: 14px; gap: 8px; }
  .community-fab { width: 40px; height: 40px; }
}

.modal { background: var(--m-bg); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); padding: 32px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 48px rgba(0,0,0,0.6); animation: ws-modal-in 0.25s cubic-bezier(0.2,0.8,0.2,1); }
.modal h3 { font-size: 20px; margin-bottom: 8px; font-family: var(--m-font-display); }
.modal .sub { font-size: 13px; color: var(--m-muted); margin-bottom: 24px; line-height: 1.5; }
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--m-muted-2); font-size: 12px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--m-border); }
.switch-link { font-size: 13px; color: var(--m-muted); text-align: center; margin-top: 16px; }
.switch-link a { color: var(--m-text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Toast */
.toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 2000; opacity: 0;
  display: flex; align-items: center; gap: 12px; background: var(--m-surface-2); border: 1px solid var(--m-border-strong);
  padding: 14px 24px; border-radius: 100px; font-size: 14px; font-weight: 500; color: var(--m-text);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5); pointer-events: none; transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Reviews */
.review-summary { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--m-border); }
.review-summary .big { font-size: 48px; font-weight: 800; font-family: var(--m-font-mono); color: var(--m-text); }
.review-item { padding: 16px 0; border-bottom: 1px solid var(--m-border); }
.review-item:last-child { border-bottom: none; }
.review-item .rev-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.review-item .rev-name { font-weight: 600; font-size: 14px; color: var(--m-text); }
.review-item .rev-date { font-size: 11px; color: var(--m-muted); }
.review-item .rev-comment { font-size: 13.5px; color: var(--m-muted); line-height: 1.6; margin-top: 8px; }
.star-picker { display: flex; gap: 8px; margin: 12px 0; }
.star-picker span { width: 24px; height: 24px; cursor: pointer; color: var(--m-border-strong); transition: 0.15s; }
.star-picker span.on { color: var(--m-warning); }

/* Responsive adjustments */
@media(max-width: 1024px) {
  #dashboard { flex-direction: column; }
  .dash-sidebar { width: 100%; flex-direction: row; overflow-x: auto; align-items: center; height: auto; padding: 16px; z-index: 40; border-right: none; border-bottom: 1px solid var(--m-border); }
  .dash-user { display: none; }
  .dash-promo { display: none; }
  .dash-body { padding: 24px 16px; }
  .msg-layout { height: calc(100vh - 160px); }
  .msg-list-pane { width: 80px; }
  .msg-list-name, .msg-list-preview { display: none; }
  /* .dash-topbar metía la barra de búsqueda + 3 botones (uno con el
     texto "Tienda pública") en una sola fila sin ningún tratamiento
     móvil — era la causa exacta del scroll horizontal de la captura.
     Con flex-wrap, la fila nunca se desborda: si no entra todo junto,
     el contenido pasa a una segunda línea en vez de forzar overflow. */
  .dash-topbar { flex-wrap: wrap; padding: 12px 16px; row-gap: 10px; }
  .dash-search { max-width: none; flex: 1 1 100%; order: 3; }
  .dash-topbar-actions { flex-wrap: wrap; }
  /* .account-row se usa en Wallet, Mis Cuentas, Perfil de Afiliado y
     más — el mismo patrón sin flex-wrap que ya se corrigió en Admin/
     Seller. Con esto, un nombre/descripción largo pasa a su propia
     línea en vez de apretar o desbordar el pill de estado/monto. */
  .account-row { flex-wrap: wrap; gap: 8px; }
}
@media(max-width: 480px) {
  /* Perfil de Afiliado tiene divs con estilo en línea (los botones de
     copiar, y las 3 tarjetas de estadísticas) sin flex-wrap — en un
     teléfono angosto se apretaban o se salían. Se apunta por el
     contenedor padre para no tocar el HTML. */
  #dash-afiliados > .panel-box > div[style*="flex"] { flex-wrap: wrap; }
}
@media(max-width: 600px) {
  .hero h1 { font-size: 40px; }
  .stats { flex-direction: column; gap: 32px; text-align: center; }
  .prod-grid { grid-template-columns: 1fr; }
  .vip-grid, .pay-grid { grid-template-columns: 1fr; }
  .dhero-copy { padding: 32px 24px; }
  .dhero-copy h2 { font-size: 28px; }
  .dhero-nav { display: none; }
}
@media(max-width: 768px) {
  /* El header público solo tenía sentido con espacio de sobra: sin esto,
     las 4 anclas (Beneficios/Categorías/Productos/Afiliados) + los botones
     de auth se salían de la pantalla y forzaban scroll horizontal. */
  .navlinks { display: none; }
  .nav-mobile-toggle { display: flex; }
  .headbar { justify-content: space-between; }

  /* El header es "sticky" (se queda fijo mientras scrolleas) y tenía
     backdrop-filter:blur(16px) — el celular tiene que recalcular ese
     desenfoque en cada frame de scroll, y en teléfonos reales eso puede
     hacer que el navegador suelte un frame completamente negro a mitad
     de scroll (confirmado probando la web real). El fondo sólido que ya
     tenía se queda igual — solo se quita la parte del desenfoque, que es
     la que cuesta cara de calcular. */
  header, .dash-topbar, .dash-sidebar { }
}
@media(max-width: 480px) {
  .modal { padding: 20px; }
  .headactions { gap: 8px; }
  .brand { font-size: 18px; }
}

/* === WORMSHOP PARTE 1: DASHBOARD MOBILE PREMIUM === */
.dash-mobile-menu-btn,.dash-mobile-overlay,.dash-mobile-brand{display:none}
@media(max-width:1024px){
 #dashboard{display:block;min-height:100dvh;background:radial-gradient(circle at 10% 0%,rgba(var(--ws-brand-rgb),.055),transparent 30rem),radial-gradient(circle at 100% 12%,rgba(var(--ws-brand-rgb),.055),transparent 28rem),var(--m-bg)}
 #dashboard.hidden{display:none}
 .dash-sidebar{position:fixed;inset:0 auto 0 0;z-index:1100;width:min(86vw,320px);height:100dvh;padding:18px 14px 24px;display:flex;flex-direction:column;align-items:stretch;gap:16px;overflow-x:hidden;overflow-y:auto;background:rgba(7,8,12,.97);border:0;border-right:1px solid rgba(var(--ws-brand-rgb),.14);box-shadow:24px 0 70px rgba(0,0,0,.62);transform:translate3d(-105%,0,0);transition:transform .32s cubic-bezier(.22,1,.36,1)}
 #dashboard.mobile-nav-open .dash-sidebar{transform:translate3d(0,0,0)}
 .dash-mobile-brand{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 4px;font-family:var(--m-font-display);font-size:18px;font-weight:800}
 .dash-mobile-brand .accent{color:var(--m-brand)}
 .dash-mobile-close{width:36px;height:36px;border:1px solid var(--m-border);border-radius:10px;color:var(--m-muted);background:rgba(255,255,255,.025);font-size:23px}
 .dash-user{display:flex;background:linear-gradient(145deg,rgba(28,31,38,.92),rgba(15,17,22,.92))}
 .dash-nav-group{flex:none;gap:3px}
 .dash-nav-header{padding:7px 10px 6px;font-size:10px;letter-spacing:.9px}
 .dash-nav-item{min-height:42px;padding:10px 11px;border:1px solid transparent;border-radius:10px;font-size:13px}
 .dash-nav-item:active{transform:scale(.985)}
 .dash-nav-item.active{background:linear-gradient(90deg,rgba(var(--ws-brand-rgb),.105),rgba(var(--ws-brand-rgb),.055));border-color:rgba(var(--ws-brand-rgb),.13);box-shadow:inset 2px 0 0 var(--m-brand)}
 .dash-promo{display:block;flex:none;margin-top:4px}
 .dash-mobile-overlay{display:block;position:fixed;inset:0;z-index:1090;background:rgba(0,0,0,.62);opacity:0;visibility:hidden;transition:.25s}
 #dashboard.mobile-nav-open .dash-mobile-overlay{opacity:1;visibility:visible}
 .dash-content{width:100%;min-height:100dvh}
 .dash-topbar{min-height:62px;padding:10px 14px;flex-wrap:nowrap;gap:9px;background:rgba(9,9,11,.88);border-bottom:1px solid rgba(255,255,255,.065);}
 .dash-mobile-menu-btn{display:flex;flex:0 0 40px;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid rgba(var(--ws-brand-rgb),.16);border-radius:11px;color:var(--m-brand);background:rgba(var(--ws-brand-rgb),.055)}
 .dash-mobile-menu-btn svg{width:19px;height:19px}
 .dash-search{order:initial;flex:1 1 auto;width:auto;max-width:none;min-width:0;height:40px;padding:8px 11px;border-radius:11px}
 .dash-search input{min-width:0;font-size:13px;text-overflow:ellipsis}
 .dash-topbar-actions{flex:0 0 auto;flex-wrap:nowrap;gap:7px}
 .dash-topbar-actions .round-btn{width:40px;height:40px;border-radius:11px}
 .dash-topbar-actions .btn{width:40px;height:40px;min-width:40px;padding:0;border-radius:11px;font-size:0;overflow:hidden}
 .dash-topbar-actions .btn .a-icon{width:17px;height:17px}
 .dash-topbar-actions .btn:last-child:before{content:"↪";font-size:20px}
 .dash-body{padding:22px 14px 36px}
 .dash-title{font-size:25px}.dash-sub{font-size:13px;line-height:1.45}
 .dhero,.dhero-slides{min-height:285px}.dhero-copy{padding:28px 22px}.dhero-dots{left:22px}
 .catalog-toolbar{padding:12px}.toolbar-filters{width:100%;justify-content:flex-start}.toolbar-filters select{flex:1 1 145px;min-width:0}
}
@media(max-width:600px){
 .dash-topbar{padding:9px 10px;gap:7px}
 .dash-mobile-menu-btn,.dash-topbar-actions .round-btn,.dash-topbar-actions .btn{width:38px;height:38px;min-width:38px;flex-basis:38px}
 .dash-search{height:38px}.dash-topbar-actions .btn:first-of-type{display:none}.dash-body{padding:20px 12px 34px}
 .coupon-row{align-items:stretch;flex-wrap:wrap;gap:8px;padding:10px}.coupon-row input{max-width:none;flex:1 1 170px}
 .toolbar-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toolbar-filters select{width:100%;min-width:0}
 .price-range-filter{width:100%}.price-range-filter input{flex:1 1 0;width:auto;min-width:0}
.price-range-filter{display:flex;align-items:center;gap:4px}.price-range-filter input{width:70px;margin:0;min-width:0}
 .activity-tabs{overflow-x:auto;white-space:nowrap}.activity-tab{flex:0 0 auto;padding:8px 11px}
 .msg-layout{min-height:520px;height:calc(100dvh - 190px)}.msg-list-pane{width:64px}.msg-list-item{padding:12px;justify-content:center}
 .msg-thread-head,.msg-thread-body{padding-left:14px;padding-right:14px}.msg-thread-input-row{padding:12px;gap:8px}
}
@media(max-width:430px){
 .dash-search input::placeholder{color:transparent}.dash-body{padding-left:10px;padding-right:10px}.dash-title{font-size:23px}
 .dhero,.dhero-slides{min-height:260px}.dhero-copy h2{font-size:25px}.dhero-copy p{font-size:13px}.dhero-chips{gap:8px;flex-wrap:wrap}
}
@media(max-width:360px){.dash-topbar-actions .round-btn{display:none}.toolbar-filters{grid-template-columns:1fr}.dash-sidebar{width:min(90vw,300px)}}


/* =========================================================
   WORMSHOP — PARTE 2 · HERO / BANNERS PREMIUM
   Capa visual: conserva IDs, onclick y lógica del slider.
   ========================================================= */
.dhero{
  isolation:isolate;
  min-height:clamp(300px,28vw,390px);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.09);
  background:#08090c;
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    0 0 0 1px rgba(var(--ws-brand-rgb),.025),
    inset 0 1px 0 rgba(255,255,255,.035);
  overflow:hidden;
}
.dhero::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:4;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(115deg,rgba(var(--ws-brand-rgb),.10),transparent 18%,transparent 76%,rgba(var(--ws-brand-rgb),.10));
  opacity:.55;
  mix-blend-mode:screen;
}
.dhero::after{
  content:"";
  position:absolute;
  z-index:3;
  pointer-events:none;
  left:8%;
  right:8%;
  bottom:-28px;
  height:55px;
  background:linear-gradient(90deg,transparent,rgba(var(--ws-brand-rgb),.16),rgba(var(--ws-brand-rgb),.12),transparent);
  opacity:.75;
}
.dhero-slides{min-height:clamp(300px,28vw,390px);background:#08090c}
.dhero-slide{
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  transform:scale(1.018);
  transition:opacity .8s ease,transform 5.5s cubic-bezier(.2,.7,.2,1);
}
.dhero-slide.active{transform:scale(1)}
.dhero-slide::before{
  background:
    linear-gradient(90deg,rgba(5,6,9,.97) 0%,rgba(5,6,9,.82) 27%,rgba(5,6,9,.36) 55%,rgba(5,6,9,.06) 78%),
    linear-gradient(0deg,rgba(5,6,9,.42),transparent 45%);
}
.dhero-copy{
  width:min(58%,660px);
  max-width:660px;
  padding:46px 64px;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.dhero-eyebrow{
  padding:6px 10px;
  margin-bottom:14px;
  border:1px solid rgba(var(--ws-brand-rgb),.18);
  border-radius:999px;
  background:rgba(var(--ws-brand-rgb),.07);
  width:max-content;
  max-width:100%;
  box-shadow:0 0 22px rgba(var(--ws-brand-rgb),.05);
}
.dhero-copy h2{
  max-width:570px;
  font-size:clamp(30px,3vw,44px);
  line-height:1.02;
  letter-spacing:-1.6px;
  margin-bottom:14px;
}
.dhero-copy p{
  max-width:510px;
  color:rgba(228,228,231,.74);
  line-height:1.62;
  margin-bottom:20px;
}
.dhero-chips{flex-wrap:wrap;gap:9px 15px;margin-bottom:21px}
.dhero-chips .chip{
  padding:5px 8px;
  border-radius:8px;
  color:rgba(244,244,245,.72);
  background:rgba(0,0,0,.22);
}
.dhero-copy .btn{
  min-height:42px;
  padding:10px 18px;
  border-radius:11px;
  box-shadow:0 8px 28px rgba(0,0,0,.25);
}
.dhero-nav{
  width:42px;height:42px;
  border-radius:50%;
  background:rgba(7,8,11,.58);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.78);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.dhero-nav:hover{
  background:rgba(var(--ws-brand-rgb),.12);
  box-shadow:0 0 26px rgba(var(--ws-brand-rgb),.13);
}
.dhero-nav.prev{left:14px}.dhero-nav.next{right:14px}
.dhero-dots{
  left:64px;
  bottom:20px;
  gap:7px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  background:rgba(0,0,0,.24);
}
.dhero-dot{width:18px;height:3px;background:rgba(255,255,255,.24)}
.dhero-dot.active{
  width:34px;
  background:linear-gradient(90deg,var(--m-brand),var(--ws-brand-strong));
  box-shadow:0 0 12px rgba(var(--ws-brand-rgb),.35);
}

/* encabezado de catálogo más editorial */
#dash-catalogo>.dash-section{
  position:relative;
  margin-bottom:20px;
  padding-left:2px;
}
#dash-catalogo>.dash-section::before{
  content:"";
  position:absolute;
  left:0;
  top:-5px;
  width:42px;
  height:2px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--m-brand),var(--m-accent-purple));
  box-shadow:0 0 14px rgba(var(--ws-brand-rgb),.3);
}
#dash-catalogo>.dash-section .dash-title{padding-top:9px}

/* MOBILE: banner ancho, imagen protagonista y texto legible */
@media(max-width:768px){
  .dhero{
    min-height:0;
    height:clamp(245px,64vw,310px);
    margin-left:-2px;
    margin-right:-2px;
    margin-bottom:24px;
    border-radius:18px;
  }
  .dhero-slides{min-height:0;height:100%}
  .dhero-slide{
    background-size:cover;
    background-position:center;
  }
  .dhero-slide::before{
    background:
      linear-gradient(90deg,rgba(5,6,9,.91) 0%,rgba(5,6,9,.65) 42%,rgba(5,6,9,.14) 76%),
      linear-gradient(0deg,rgba(5,6,9,.68) 0%,transparent 55%);
  }
  .dhero-copy{
    width:74%;
    max-width:none;
    padding:24px 20px 44px;
  }
  .dhero-eyebrow{
    font-size:9px;
    letter-spacing:.7px;
    padding:5px 8px;
    margin-bottom:10px;
  }
  .dhero-copy h2{
    font-size:clamp(22px,6.5vw,30px);
    line-height:1.04;
    letter-spacing:-.8px;
    margin-bottom:9px;
  }
  .dhero-copy p{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:12px;
    line-height:1.45;
    margin-bottom:12px;
  }
  .dhero-chips{display:none}
  .dhero-copy .btn{
    min-height:36px;
    padding:8px 12px;
    font-size:11.5px;
    border-radius:9px;
  }
  .dhero-nav{display:none}
  .dhero-dots{
    left:20px;
    bottom:14px;
    padding:6px 8px;
  }
}
@media(max-width:430px){
  .dhero{
    height:clamp(225px,61vw,270px);
    border-radius:16px;
  }
  .dhero-copy{
    width:78%;
    padding:20px 16px 40px;
  }
  .dhero-copy h2{font-size:clamp(20px,6.3vw,27px)}
  .dhero-copy p{-webkit-line-clamp:2;font-size:11.5px}
  .dhero-dots{left:16px;bottom:11px}
}
@media(max-width:360px){
  .dhero{height:220px}
  .dhero-copy{width:82%;padding-left:14px}
  .dhero-eyebrow{display:none}
  .dhero-copy h2{font-size:21px}
}


/* =========================================================
   WORMSHOP — PARTE 3 · CATEGORÍAS + FILTROS PREMIUM
   Solo UI. Conserva IDs, onchange, búsqueda y lógica actual.
   ========================================================= */

/* Categorías del catálogo — carrusel de avatares redondos con scroll
   horizontal (mismo diseño en el panel logueado #dash-cat-grid y en la
   home pública #cat-grid — ambos llevan la clase compartida .ws-cat-rail).
   width:100% fuerza que ocupe su propia fila dentro de .catalog-toolbar
   (que es flex-wrap:wrap), así los filtros quedan siempre en la fila de
   abajo en vez de competir por espacio en la misma línea. */
.ws-cat-rail.cat-grid{
  /* !important en las propiedades de layout: index.html ya tenía otras
     reglas viejas con ID (ej. "#storefront #categorias .cat-grid { display:grid;
     grid-template-columns:repeat(4,...) }") apuntando a este mismo elemento —
     un ID siempre le gana a estas 2 clases sin !important, así que sin esto
     el carrusel se queda en la grilla vieja de 4 columnas. */
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:flex-start;
  gap:18px;
  width:100%;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:4px 2px 6px;
  /* UX de escritorio (auditoría): antes solo se movía con touch o con
     la barrita de progreso — ahora también se puede arrastrar con el
     mouse directo sobre las categorías (ver bindCatRailInteractions en
     assets/js/main-icons.js). cursor:grab avisa que es arrastrable,
     igual que cualquier carrusel de streaming. */
  cursor:grab;
}
.ws-cat-rail.cat-grid::-webkit-scrollbar{ display:none; }
.ws-cat-rail.cat-grid.ws-cat-rail-grabbing{
  cursor:grabbing;
  scroll-snap-type:none;
  user-select:none;
}
.ws-cat-rail.cat-grid.ws-cat-rail-grabbing .cat-chip{ pointer-events:none; }
.ws-cat-rail .cat-chip{
  position:relative;
  display:flex !important;
  flex-direction:column !important;
  align-items:center;
  justify-content:center !important;
  gap:8px;
  flex:0 0 auto !important;
  width:74px !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  border:none !important;
  background:none !important;
  box-shadow:none !important;
  color:rgba(244,244,245,.68);
  text-align:center;
  scroll-snap-align:start;
  cursor:pointer;
  transition:transform .18s ease,color .18s ease;
}
.ws-cat-rail .cat-chip:hover{ transform:translateY(-2px); color:#fff; }
.ws-cat-rail .cat-chip-icon{
  flex:0 0 64px !important;
  width:64px !important;
  height:64px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,.09);
  background:radial-gradient(circle at 30% 25%,rgba(168, 85, 247,.07),transparent 60%),#000;
  overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.ws-cat-rail .cat-chip-icon img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.ws-cat-rail .cat-chip:hover .cat-chip-icon{
  border-color:rgba(var(--ws-brand-rgb),.4);
  box-shadow:0 8px 20px rgba(0,0,0,.4), 0 0 16px rgba(var(--ws-brand-rgb),.15);
}
.ws-cat-rail .cat-chip.active{ color:var(--m-text); }
.ws-cat-rail .cat-chip.active .cat-chip-icon{
  border-color:var(--m-brand);
  box-shadow:0 0 0 3px rgba(var(--ws-brand-rgb),.18),0 8px 22px rgba(var(--ws-brand-rgb),.32),0 0 20px rgba(var(--ws-brand-rgb),.25);
}
.ws-cat-rail .cat-chip > span:last-child{
  font-size:11.5px;
  font-weight:600;
  max-width:78px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Barra que se llena a medida que se recorre el carrusel Y que también
   se puede arrastrar para mover el carrusel (ver bindCatRailProgress()
   en assets/js/main-icons.js — el arrastre real vive en JS, esto solo
   la hace agarrable). position:relative + el ::after de abajo agrandan
   el área donde el dedo/mouse puede "agarrarla" a ~19px de alto sin
   que la línea visible deje de verse fina — sin overflow:hidden a
   propósito, si no el navegador recorta el ::after también (pierde el
   área extra). touch-action:none evita que arrastrar en el celular
   también intente hacer scroll de la página. */
.catalog-toolbar:has(.ws-cat-rail:empty) .ws-cat-rail-progress {
  display: none;
}
/* Barrita más "dura y concisa" — negro OLED de verdad en vez del gris
   translúcido de antes, más gruesa (6px, era 3px) y con el relleno en
   el rojo de marca con resplandor, en vez del degradé marca→cian que
   no combinaba con el resto del sitio (31 ago 2026, pedido explícito:
   "mejora la barrita... mas dura y consisa... premium UX UI PRO OLED
   4K"). */
.ws-cat-rail-progress{
  position:relative;
  height:6px;
  width:100%;
  border-radius:6px;
  background:#000;
  border:1px solid rgba(var(--ws-brand-rgb),.16);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
  margin:6px 2px 0;
  cursor:pointer;
  touch-action:none;
  transition:border-color .18s ease;
}
.ws-cat-rail-progress::after{
  content:"";
  position:absolute;
  top:-8px; bottom:-8px; left:0; right:0;
}
.ws-cat-rail-progress:hover{ border-color:rgba(var(--ws-brand-rgb),.4); }
.ws-cat-rail-progress-fill{
  height:100%;
  width:20%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--ws-neon),var(--ws-neon-deep));
  box-shadow:0 0 14px rgba(var(--ws-brand-rgb),.6), 0 0 4px rgba(var(--ws-brand-rgb),.8);
  transform-origin:left;
  transition:transform .12s linear,width .12s linear;
  pointer-events:none;
}

/* Barra completa de categorías/filtros */
.catalog-toolbar{
  position:relative;
  align-items:center;
  padding:13px;
  gap:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.075);
  background:
    linear-gradient(145deg,rgba(18,18,23,.94),rgba(12,13,17,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 12px 36px rgba(0,0,0,.14);
}
.catalog-toolbar::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:-1px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--ws-brand-rgb),.18),rgba(var(--ws-brand-rgb),.14),transparent);
}
.toolbar-filters{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.toolbar-filters select{
  appearance:none;
  -webkit-appearance:none;
  min-width:145px;
  height:42px;
  margin:0!important;
  padding:0 34px 0 12px!important;
  border-radius:11px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background-color:rgba(8,9,12,.72)!important;
  background-image:
    linear-gradient(45deg,transparent 50%,#71717a 50%),
    linear-gradient(135deg,#71717a 50%,transparent 50%)!important;
  background-position:
    calc(100% - 15px) 18px,
    calc(100% - 10px) 18px!important;
  background-size:5px 5px,5px 5px!important;
  background-repeat:no-repeat!important;
  color:rgba(244,244,245,.82)!important;
  font-size:12px;
  font-weight:600;
  box-shadow:none!important;
  cursor:pointer;
}
.toolbar-filters select:hover{
  border-color:rgba(var(--ws-brand-rgb),.18)!important;
  background-color:rgba(var(--ws-brand-rgb),.025)!important;
}
.toolbar-filters select:focus{
  border-color:rgba(var(--ws-brand-rgb),.45)!important;
  box-shadow:0 0 0 3px rgba(var(--ws-brand-rgb),.07)!important;
}

/* Cupón: integrado visualmente con catálogo */
.coupon-row{
  position:relative;
  min-height:58px;
  padding:9px 10px;
  gap:9px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(135deg,rgba(var(--ws-brand-rgb),.045),rgba(var(--ws-brand-rgb),.025)),var(--m-surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.coupon-row input{
  height:38px;
  max-width:270px;
  padding:0 12px!important;
  border-radius:10px!important;
  background:rgba(0,0,0,.22)!important;
}
.coupon-row .btn{
  min-height:38px;
  border-radius:10px;
}

/* MOBILE — categorías horizontales tipo app */
@media(max-width:768px){
  .catalog-toolbar{
    display:block;
    padding:10px 0 11px;
    margin-left:-2px;
    margin-right:-2px;
    overflow:hidden;
    border-radius:15px;
  }
  .ws-cat-rail.cat-grid{
    gap:14px;
    padding:1px 10px 8px;
    scroll-padding:10px;
  }
  .ws-cat-rail .cat-chip{ width:64px !important; font-size:11px; }
  .ws-cat-rail .cat-chip-icon{ width:54px !important; height:54px !important; flex-basis:54px !important; }
  .ws-cat-rail-progress{ margin-left:10px; margin-right:10px; width:auto; }

  .toolbar-filters{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    padding:10px 10px 0;
    gap:8px;
    border-top:1px solid rgba(255,255,255,.055);
  }
  .toolbar-filters select{
    width:100%;
    min-width:0;
    height:40px;
    padding-left:10px!important;
    font-size:11px;
  }

  .coupon-row{
    min-height:0;
    padding:9px;
    margin-bottom:18px;
    border-radius:13px;
  }
  .coupon-row input{
    height:38px;
    max-width:none;
    min-width:0;
    flex:1 1 160px;
    font-size:12px!important;
  }
  .coupon-row .btn{
    flex:0 0 auto;
    padding-left:13px;
    padding-right:13px;
    font-size:12px;
  }
  #coupon-badge{
    flex:1 1 100%;
    width:max-content;
    margin-left:0!important;
  }
}

@media(max-width:430px){
  .catalog-toolbar{margin-bottom:18px}
  .ws-cat-rail.cat-grid{padding-left:8px;padding-right:8px}
  .toolbar-filters{padding-left:8px;padding-right:8px}
  .toolbar-filters select{height:39px;font-size:10.5px}
}

@media(max-width:360px){
  .toolbar-filters{grid-template-columns:1fr}
}


/* =========================================================
   WORMSHOP — PARTE 4 · PRODUCT CARDS PREMIUM
   Solo presentación. Mantiene .m-card, botones, IDs y eventos.
   ========================================================= */

#dash-prod-grid.prod-grid,
#ofertas-grid.prod-grid,
#actividad-fav-grid.prod-grid{
  grid-template-columns:repeat(auto-fill,minmax(225px,1fr));
  gap:18px;
  align-items:stretch;
}

.m-card{
  isolation:isolate;
  border-radius:var(--ws-radius-xl);
  border:1px solid rgba(255,255,255,.075);
  background:
    linear-gradient(155deg,rgba(23,25,31,.96),rgba(12,13,17,.985));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 34px rgba(0,0,0,.16);
  transition:
    transform .26s cubic-bezier(.2,.8,.2,1),
    border-color .26s ease,
    box-shadow .26s ease;
}
.m-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:linear-gradient(135deg,rgba(var(--ws-brand-rgb),.13),transparent 25%,transparent 72%,rgba(var(--ws-brand-rgb),.10));
  transition:opacity .25s ease;
}
.m-card:hover{
  transform:translateY(-6px);
  border-color:rgba(var(--ws-brand-rgb),.18);
  box-shadow:
    0 22px 50px rgba(0,0,0,.32),
    0 0 30px rgba(var(--ws-brand-rgb),.035);
}
.m-card:hover::before{opacity:1}

.m-card-media{
  z-index:1;
  aspect-ratio:1/1;
  background:
    radial-gradient(circle at 50% 20%,rgba(var(--ws-brand-rgb),.07),transparent 55%),
    #0b0c10;
}
.m-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent 58%,rgba(7,8,11,.38) 100%),
    linear-gradient(135deg,rgba(255,255,255,.035),transparent 32%);
}
.m-card-media img{
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.m-card:hover .m-card-media img{
  transform:scale(1.035);
}

.m-badge{
  top:10px;
  left:10px;
  min-height:24px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(8,9,12,.68);
  color:#fff;
  font-size:9px;
  letter-spacing:.55px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}

.fav-btn{
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(7,8,11,.8);
  border-color:rgba(255,255,255,.11);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.fav-btn:hover{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 0 20px rgba(var(--ws-brand-strong-rgb),.12);
}
.fav-btn.active{
  box-shadow:0 0 22px rgba(var(--ws-brand-strong-rgb),.11);
}

.m-card-body{
  position:relative;
  z-index:2;
  padding:15px 15px 14px;
}
.m-card-seller{
  width:max-content;
  max-width:100%;
  margin-bottom:7px;
  color:rgba(161,161,170,.82);
  font-size:10.5px;
  font-weight:600;
}
.m-card-seller:hover{color:var(--m-brand)}
.m-seller-check{
  width:13px;
  height:13px;
  box-shadow:0 0 10px rgba(168, 85, 247,.18);
}
.m-card-title{
  min-height:42px;
  margin-bottom:8px;
  font-family:var(--m-font-display);
  font-size:15px;
  font-weight:700;
  line-height:1.38;
  letter-spacing:-.2px;
  transition:color .18s ease;
}
.m-card:hover .m-card-title{color:var(--m-brand)}
.m-card-rating{
  min-height:18px;
  margin-bottom:11px;
  gap:5px;
  font-size:11px;
}
.stars{gap:1px}
.stars .a-icon{width:11px;height:11px}
.m-sales{font-size:10.5px}

.m-card-price-row{
  position:relative;
  align-items:flex-end;
  min-height:45px;
  padding-top:10px;
  margin-bottom:12px;
  border-top:1px solid rgba(255,255,255,.055);
}
.m-old-price{
  margin-bottom:0;
  font-size:10.5px;
}
.m-price{
  font-size:21px;
  line-height:1.05;
  letter-spacing:-.6px;
  text-shadow:0 0 20px rgba(168, 85, 247,.13);
}
.m-stock{
  max-width:44%;
  padding-bottom:2px;
  font-size:10px;
  text-align:right;
  line-height:1.25;
}
/* Botón "Comprar" — clase propia para no heredar el .btn-primary genérico
   (blanco, usado en decenas de otros contextos) ni chocar con ningún
   !important de ws-archive.css. Un solo box-shadow, transform/opacity
   únicamente en los estados — sin glow ni animación. */
.m-buy-btn{
  background:var(--m-brand);
  color:#fff;
  border:1px solid var(--m-brand);
  box-shadow:0 8px 20px rgba(168, 85, 247,.18);
}
.m-buy-btn:hover{
  background:var(--ws-brand-strong);
  border-color:var(--ws-brand-strong);
  transform:translateY(-1px);
}
.m-buy-btn:active{
  transform:translateY(0) scale(.97);
}
.m-buy-btn:focus-visible{
  outline:2px solid var(--ws-brand-strong);
  outline-offset:2px;
}
.m-buy-btn[disabled]{
  background:var(--m-surface-2);
  border-color:var(--m-border);
  color:var(--m-muted);
  box-shadow:none;
}
.m-card-actions .btn{
  min-height:40px;
  border-radius:var(--m-radius-md);
  font-size:12px;
  font-weight:700;
  transition:transform .16s ease,box-shadow .2s ease,background .2s ease;
}
.m-card-actions .btn:active{transform:scale(.985)}
.m-card-actions .btn-primary,
.m-card-actions .btn-brand{
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

/* pequeña luz inferior al hacer hover */
.m-card::after{
  content:"";
  position:absolute;
  z-index:0;
  left:18%;
  right:18%;
  bottom:-10px;
  height:20px;
  pointer-events:none;
  opacity:0;
  background:rgba(var(--ws-brand-rgb),.13);
  transition:opacity .25s ease;
}
.m-card:hover::after{opacity:.55}

/* MOBILE: 2 productos por fila, compactos pero legibles */
@media(max-width:600px){
  #dash-prod-grid.prod-grid,
  #ofertas-grid.prod-grid,
  #actividad-fav-grid.prod-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .m-card{
    min-width:0;
    border-radius:14px;
  }
  .m-card:hover{transform:none}
  .m-card:active{
    transform:scale(.992);
    border-color:rgba(var(--ws-brand-rgb),.16);
  }
  .m-card-media{aspect-ratio:1/1}
  .m-badge{
    top:7px;
    left:7px;
    max-width:calc(100% - 48px);
    padding:4px 6px;
    min-height:20px;
    border-radius:6px;
    font-size:7.5px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .fav-btn{
    top:7px;
    right:7px;
    width:29px;
    height:29px;
    border-radius:8px;
  }
  .fav-btn .a-icon{width:14px;height:14px}

  .m-card-body{padding:10px 9px 9px}
  .m-card-seller{
    margin-bottom:5px;
    font-size:8.5px;
    gap:3px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .m-card-seller .a-icon{width:10px;height:10px}
  .m-seller-check{width:10px;height:10px;font-size:6px}

  .m-card-title{
    min-height:34px;
    margin-bottom:5px;
    font-size:12px;
    line-height:1.34;
    letter-spacing:-.1px;
  }
  .m-card-rating{
    min-height:15px;
    margin-bottom:7px;
    gap:3px;
    font-size:9px;
    overflow:hidden;
    white-space:nowrap;
  }
  .stars{gap:0}
  .stars .a-icon{width:9px;height:9px}
  .m-sales{font-size:8px}

  .m-card-price-row{
    min-height:38px;
    padding-top:7px;
    margin-bottom:8px;
  }
  .m-old-price{font-size:8.5px}
  .m-price{font-size:16px;letter-spacing:-.4px}
  .m-stock{
    max-width:42%;
    font-size:8px;
    line-height:1.15;
  }
  .m-card-actions .btn{
    min-height:34px;
    padding:7px 6px;
    border-radius:8px;
    font-size:10px;
    gap:4px;
  }
  .m-card-actions .btn .a-icon{width:12px;height:12px}
}

@media(max-width:370px){
  #dash-prod-grid.prod-grid,
  #ofertas-grid.prod-grid,
  #actividad-fav-grid.prod-grid{gap:8px}
  .m-card-body{padding:9px 8px 8px}
  .m-card-title{font-size:11px}
  .m-price{font-size:15px}
  .m-stock{display:none}
}

/* Desktop ancho: más aire sin tarjetas gigantes */
@media(min-width:1280px){
  #dash-prod-grid.prod-grid,
  #ofertas-grid.prod-grid,
  #actividad-fav-grid.prod-grid{
    grid-template-columns:repeat(auto-fill,minmax(235px,1fr));
    gap:20px;
  }
}


/* =========================================================
   WORMSHOP — PARTE 5 · INTERNAL DASHBOARD PREMIUM
   Wallet, Cuentas, Actividad, Perfil, Afiliados, Pagos,
   Mensajes, Tickets, VIP y Modales.
   Capa visual: conserva IDs, onclick y lógica existente.
   ========================================================= */

/* ---- Superficies internas unificadas ---- */
.panel-box,
.account-row,
.stat-card,
.pay-card,
.seller-card{
  border-color:rgba(255,255,255,.075);
  background:
    linear-gradient(145deg,rgba(22,24,30,.95),rgba(12,13,17,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 12px 34px rgba(0,0,0,.13);
}
.panel-box{
  border-radius:16px;
  padding:22px;
}
.account-row{
  position:relative;
  border-radius:14px;
  padding:15px 17px;
  overflow:hidden;
}
.account-row::before{
  content:"";
  position:absolute;
  left:0;top:20%;bottom:20%;
  width:2px;
  border-radius:2px;
  background:linear-gradient(var(--m-brand),var(--m-accent-purple));
  opacity:.45;
}
.account-row:hover{
  border-color:rgba(var(--ws-brand-rgb),.13);
  background:linear-gradient(145deg,rgba(25,28,34,.98),rgba(14,15,20,.98));
  transform:translateY(-1px);
}

/* ---- Encabezados de secciones ---- */
#dash-wallet>.dash-section,
#dash-cuentas>.dash-section,
#dash-ofertas>.dash-section,
#dash-vip>.dash-section,
#dash-vendedores>.dash-section,
#dash-pagos>.dash-section,
#dash-afiliados>.dash-section,
#dash-actividad>.dash-section,
#dash-perfil>.dash-section,
#dash-mensajes>.dash-section,
#dash-tickets>.dash-section{
  position:relative;
  margin-bottom:24px;
}
#dash-wallet>.dash-section::after,
#dash-cuentas>.dash-section::after,
#dash-ofertas>.dash-section::after,
#dash-vip>.dash-section::after,
#dash-vendedores>.dash-section::after,
#dash-pagos>.dash-section::after,
#dash-afiliados>.dash-section::after,
#dash-actividad>.dash-section::after,
#dash-perfil>.dash-section::after,
#dash-mensajes>.dash-section::after,
#dash-tickets>.dash-section::after{
  content:"";
  position:absolute;
  left:0;bottom:-10px;
  width:52px;height:2px;
  border-radius:5px;
  background:linear-gradient(90deg,var(--m-brand),var(--m-accent-purple),transparent);
  box-shadow:0 0 15px rgba(var(--ws-brand-rgb),.22);
}

/* ---- WALLET ---- */
#dash-wallet>.panel-box{
  position:relative;
  overflow:hidden;
  max-width:390px!important;
  min-height:145px;
  padding:24px;
  border-color:rgba(var(--ws-brand-rgb),.14);
  background:
    radial-gradient(circle at 90% 10%,rgba(var(--ws-brand-rgb),.12),transparent 42%),
    radial-gradient(circle at 10% 110%,rgba(var(--ws-brand-rgb),.11),transparent 45%),
    linear-gradient(145deg,#171a20,#0c0d11);
}
#dash-wallet>.panel-box::after{
  content:"W";
  position:absolute;
  right:18px;bottom:-22px;
  font-family:var(--m-font-display);
  font-size:100px;
  font-weight:800;
  color:rgba(255,255,255,.025);
  pointer-events:none;
}
#wallet-balance-big{
  position:relative;
  z-index:1;
  font-size:38px!important;
  letter-spacing:-1.5px;
  text-shadow:0 0 28px rgba(var(--ws-brand-rgb),.12);
}

/* ---- Stats / Actividad ---- */
.stat-cards{
  gap:12px;
}
.stat-card{
  position:relative;
  min-height:120px;
  padding:17px;
  border-radius:14px;
  overflow:hidden;
}
.stat-card::after{
  content:"";
  position:absolute;
  width:70px;height:70px;
  right:-30px;top:-30px;
  border-radius:50%;
  background:rgba(var(--ws-brand-rgb),.055);
}
.stat-icon{
  width:38px;height:38px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.035);
}
.stat-value{font-size:23px;letter-spacing:-.7px}
.activity-tabs{
  gap:5px;
  padding:5px;
  margin-bottom:18px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(13,14,18,.72);
}
.activity-tab{
  border-radius:9px;
  padding:9px 13px;
}
.activity-tab.active{
  background:linear-gradient(135deg,rgba(var(--ws-brand-rgb),.15),rgba(var(--ws-brand-rgb),.10));
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(var(--ws-brand-rgb),.15);
}
.activity-item{
  padding:15px 4px;
  border-bottom-color:rgba(255,255,255,.055);
}
.activity-dot{
  border:1px solid rgba(var(--ws-brand-rgb),.10);
  background:rgba(var(--ws-brand-rgb),.055);
}

/* ---- Pagos ---- */
.pay-grid{gap:14px}
.pay-card{
  position:relative;
  border-radius:16px;
  padding:22px 18px;
  overflow:hidden;
  transition:.22s ease;
}
.pay-card:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--ws-brand-rgb),.14);
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}
.pay-icon{
  width:52px;height:52px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}
.pay-logo{
  width:52px;height:52px;
  border-radius:14px;
  object-fit:contain;
  background:#fff;
  padding:6px;
  margin:0 auto 16px;
  display:block;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}
.pay-qr{
  border-radius:14px;
  border:6px solid #fff;
  padding:0;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}

/* ---- Afiliados / perfil ---- */
#dash-afiliados>.panel-box,
#dash-perfil>.panel-box{
  border-radius:18px;
}
#my-aff-code{
  border-radius:11px!important;
  background:
    linear-gradient(135deg,rgba(var(--ws-brand-rgb),.08),rgba(var(--ws-brand-rgb),.055))!important;
  box-shadow:inset 0 0 0 1px rgba(var(--ws-brand-rgb),.05);
}
#dash-afiliados>.panel-box div[style*="background:var(--m-surface-2)"]{
  border-color:rgba(255,255,255,.065)!important;
  background:rgba(8,9,12,.45)!important;
}
#dash-perfil input{
  min-height:43px;
  border-radius:11px!important;
}

/* ---- Vendedores ---- */
.seller-card{
  border-radius:15px;
  transition:.2s ease;
}
.seller-card:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--ws-brand-rgb),.13);
}
.seller-card:active{
  transform:translateY(0) scale(.99);
}
@media (prefers-reduced-motion: reduce){
  .seller-card, .seller-card:hover, .seller-card:active{ transform:none; transition:none; }
}
.seller-avatar{
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.verified-badge{
  border-radius:999px;
}

/* ---- VIP (4 sep 2026: tarjetas con relieve 3D real — perspectiva,
   brillo que barre al pasar el mouse, insignia de corona por nivel —
   antes eran planas, sin nada que las distinguiera de una tarjeta
   común) ---- */
.vip-grid{ gap:20px; perspective:1400px; }
.vip-plan{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  border-color:rgba(255,255,255,.08);
  background:linear-gradient(155deg,rgba(24,26,33,.96),rgba(11,12,16,.99));
  box-shadow:0 14px 38px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease, border-color .35s ease;
  transform-style:preserve-3d;
}
.vip-plan::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% -10%,rgba(var(--ws-brand-rgb),.12),transparent 42%);
}
.vip-plan::after{
  /* brillo diagonal que barre la tarjeta al pasar el mouse — efecto
     "vidrio premium" en vez de solo levantarse */
  content:"";
  position:absolute; top:-60%; left:-60%; width:60%; height:220%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.09) 45%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.09) 55%, transparent);
  transform:rotate(18deg) translateX(-40%);
  transition:transform .7s ease;
  pointer-events:none;
}
.vip-plan:hover::after{ transform:rotate(18deg) translateX(220%); }
.vip-plan:hover{
  transform:translateY(-8px) rotateX(4deg) scale(1.015);
  border-color:rgba(var(--ws-brand-rgb),.3);
  box-shadow:0 30px 60px rgba(0,0,0,.35), 0 0 40px rgba(var(--ws-brand-rgb),.08), inset 0 1px 0 rgba(255,255,255,.08);
}
.vip-plan .price{
  letter-spacing:-1.2px;
  text-shadow:0 0 25px rgba(var(--ws-brand-rgb),.12);
}
.vip-badge{
  width:52px; height:52px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
  font-size:24px; position:relative; z-index:1;
  box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.25);
}
.vip-plan-popular{
  position:absolute; top:14px; right:-32px; transform:rotate(40deg); background:linear-gradient(135deg,#ffd700,#ff9d00);
  color:#1a1300; font-size:10px; font-weight:800; padding:4px 38px; letter-spacing:.05em; box-shadow:0 4px 10px rgba(0,0,0,.3); z-index:2;
}
.promo-banner{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}

/* ---- Mensajería ---- */
.msg-layout{
  border-radius:17px;
  border-color:rgba(255,255,255,.075);
  background:linear-gradient(145deg,rgba(17,18,23,.97),rgba(9,10,13,.99));
  box-shadow:0 18px 46px rgba(0,0,0,.18);
}
.msg-list-pane{
  background:rgba(7,8,11,.76);
  border-right-color:rgba(255,255,255,.065);
}
.msg-list-item{
  border-bottom-color:rgba(255,255,255,.05);
}
.msg-list-item:hover{background:rgba(255,255,255,.025)}
.msg-list-item.active{
  background:linear-gradient(90deg,rgba(var(--ws-brand-rgb),.08),rgba(var(--ws-brand-rgb),.035));
  box-shadow:inset 2px 0 0 var(--m-brand);
}
.msg-list-avatar{
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.msg-thread-head{
  background:rgba(18,20,25,.88);
  border-bottom-color:rgba(255,255,255,.06);
}
.msg-thread-body{
  background:
    radial-gradient(circle at 100% 0%,rgba(var(--ws-brand-rgb),.025),transparent 30%),
    transparent;
}
.msg-bubble{
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.msg-bubble.mine{
  background:linear-gradient(135deg,rgba(var(--ws-brand-rgb),.105),rgba(var(--ws-brand-rgb),.075));
  border-color:rgba(var(--ws-brand-rgb),.12);
}
.msg-bubble.theirs{
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.07);
}
.msg-thread-input-row{
  background:rgba(15,16,21,.94);
  border-top-color:rgba(255,255,255,.06);
}
.msg-thread-input-row input{
  min-height:42px;
  background:rgba(0,0,0,.24)!important;
}

/* ---- Tickets ---- */
#dash-tickets>.panel-box{
  overflow:hidden;
  border-radius:16px;
}
#tickets-list .account-row:last-child{margin-bottom:0}

/* ---- Status pills ---- */
.status-pill{
  border-radius:999px;
  padding:5px 9px;
  font-size:9.5px;
  letter-spacing:.55px;
}

/* ---- MODALES ---- */
.overlay{
  background:rgba(2,3,5,.78);
}
.modal{
  position:relative;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.095);
  background:
    radial-gradient(circle at 100% 0%,rgba(var(--ws-brand-rgb),.055),transparent 34%),
    radial-gradient(circle at 0% 100%,rgba(var(--ws-brand-rgb),.055),transparent 36%),
    #0b0c10;
  box-shadow:
    0 32px 90px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.035);
}
.modal::before{
  content:"";
  position:absolute;
  left:22px;right:22px;top:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--ws-brand-rgb),.28),rgba(var(--ws-brand-rgb),.20),transparent);
}
.modal h3{
  font-size:22px;
  letter-spacing:-.45px;
}
.modal .sub{line-height:1.6}
.modal input,.modal textarea,.modal select{
  background:rgba(0,0,0,.25)!important;
  border-color:rgba(255,255,255,.08)!important;
}
.modal .btn{min-height:41px;border-radius:10px}

/* ---- Toast ---- */
.toast{
  border-color:rgba(var(--ws-brand-rgb),.13);
  background:rgba(20,22,27,.94);
  box-shadow:0 16px 46px rgba(0,0,0,.42);
}

/* ================= MOBILE INTERNAL ================= */
@media(max-width:600px){
  .panel-box{padding:15px;border-radius:14px}
  .account-row{
    padding:13px 13px 13px 15px;
    border-radius:12px;
    gap:8px;
  }
  .account-row-header{flex-wrap:wrap}
  .account-row-main{flex:1 1 180px}
  .account-row-actions{flex-wrap:wrap;justify-content:flex-end}
  .account-row .name{font-size:12px}
  .account-row .meta{font-size:10.5px;line-height:1.4}

  /* Mis Cuentas en móvil: nombre/fecha ocupan todo el ancho arriba,
     precio+estado bajan como una fila propia debajo (en vez de
     apretarse a la derecha de un nombre largo) — mismo dato, mucho
     menos altura desperdiciada que antes. */
  .account-row-purchase .account-row-header{ flex-wrap: wrap; }
  .account-row-summary{ flex-direction: row-reverse; align-items: center; width: 100%; justify-content: space-between; }
  .account-row-price{ font-size: 15px; }
  .account-row-purchase .account-row-actions{ justify-content: flex-start; margin-top: 10px; }
  .account-row-purchase .account-row-actions .btn{ flex: 1 1 auto; }
  .cred-box{ padding: 11px 12px; }
  .cred-row{ padding: 8px 0; }
  .cred-value{ font-size: 12px; }

  #dash-wallet>.panel-box{
    max-width:none!important;
    width:100%;
    min-height:125px;
    padding:19px;
  }
  #wallet-balance-big{font-size:31px!important}

  .stat-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .stat-card{
    min-width:0;
    min-height:105px;
    padding:13px;
    border-radius:12px;
  }
  .stat-value{font-size:19px}
  .stat-label{font-size:10px}

  .activity-tabs{
    margin-left:-2px;
    margin-right:-2px;
    padding:4px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .activity-tabs::-webkit-scrollbar{display:none}
  .activity-tab{
    padding:8px 10px;
    font-size:10.5px;
  }

  .pay-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .pay-card{
    min-width:0;
    padding:15px 10px;
    border-radius:13px;
  }
  .pay-icon{width:42px;height:42px;border-radius:11px}
  .pay-card h4{font-size:13px}
  .pay-qr{max-width:130px}

  #dash-afiliados>.panel-box,
  #dash-perfil>.panel-box{max-width:none!important;width:100%}
  #my-aff-code{
    max-width:100%;
    font-size:18px!important;
    overflow-wrap:anywhere;
  }

  .seller-card{
    padding:13px;
    gap:11px;
    flex-wrap:wrap;
  }
  .seller-avatar{width:46px;height:46px;border-radius:11px}
  .seller-info .sname{font-size:13px;flex-wrap:wrap;min-width:0}
  .sname-text{max-width:100%}
  .seller-card-actions{flex:1 1 100%;flex-wrap:wrap;gap:8px}

  .vip-grid{grid-template-columns:1fr;gap:12px}
  .vip-plan{padding:23px 18px;border-radius:15px}
  .vip-plan .price{font-size:28px}

  .promo-banner{padding:25px 18px;border-radius:15px}
  .promo-banner h3{font-size:22px}

  .msg-layout{
    height:calc(100dvh - 175px);
    min-height:500px;
    border-radius:14px;
  }
  .msg-list-pane{width:58px}
  .msg-list-item{padding:10px}
  .msg-list-avatar{width:36px;height:36px;border-radius:9px}
  .msg-thread-head{padding:12px;font-size:12px}
  .msg-thread-body{padding:13px;gap:9px}
  .msg-bubble{max-width:88%;padding:9px 11px;font-size:12px}
  .msg-thread-input-row{padding:9px;gap:6px}
  .msg-thread-input-row input{min-height:38px;font-size:12px!important}
  .msg-thread-input-row .btn{padding:8px 10px;font-size:11px}

  .modal{
    max-height:92dvh;
    padding:20px 16px;
    border-radius:17px;
  }
  .modal h3{font-size:19px}
  .modal .sub{font-size:12px;margin-bottom:18px}

  .toast{
    bottom:18px;
    width:calc(100% - 24px);
    max-width:420px;
    padding:12px 15px;
    border-radius:14px;
    font-size:12px;
  }
}

@media(max-width:370px){
  .stat-cards{grid-template-columns:1fr 1fr}
  .pay-grid{grid-template-columns:1fr}
  .msg-list-pane{width:52px}
}


/* =========================================================
   WORMSHOP — PARTE 6 · FINAL POLISH / RESPONSIVE QA
   Capa final visual. No cambia endpoints, IDs ni lógica.
   ========================================================= */

/* Ritmo y selección */
::selection{background:rgba(var(--ws-brand-rgb),.22);color:#fff}
html{scroll-behavior:smooth}
button,a,.cat-chip,.dash-nav-item,.activity-tab,.m-card{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,.cat-chip:focus-visible,.dash-nav-item:focus-visible{
  outline:2px solid rgba(var(--ws-brand-rgb),.7);
  outline-offset:2px;
}

/* Tipografía / jerarquía */
.dash-title{
  line-height:1.08;
  text-wrap:balance;
}
.dash-sub{
  max-width:720px;
  color:rgba(161,161,170,.86);
}
.dash-body{
  padding-bottom:max(42px,env(safe-area-inset-bottom));
}

/* Botones: interacción consistente */
.btn:active,.round-btn:active{
  transform:scale(.975);
}
.btn-primary{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-brand{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 24px rgba(168, 85, 247,.1);
}

/* Inputs más refinados */
input,textarea,select{
  caret-color:var(--m-brand);
}
input::placeholder,textarea::placeholder{
  color:rgba(113,113,122,.82);
}

/* Scroll interno del sidebar */
.dash-sidebar{
  scrollbar-width:thin;
  scrollbar-color:rgba(113,113,122,.35) transparent;
}

/* Transiciones de secciones sin alterar .hidden */
.dash-body > div:not(.hidden){
  animation:wormSectionIn .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes wormSectionIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

/* Desktop: contenido mejor proporcionado */
@media(min-width:1025px){
  .dash-body{
    padding:34px clamp(24px,3vw,44px) 54px;
  }
  .dash-topbar{
    padding-left:clamp(24px,3vw,44px);
    padding-right:clamp(24px,3vw,44px);
  }
  .dash-sidebar{
    width:268px;
    padding-top:22px;
  }
}

/* Tablet */
@media(min-width:769px) and (max-width:1024px){
  .dash-body{padding:26px 20px 46px}
  .dhero{margin-bottom:26px}
  #dash-prod-grid.prod-grid,
  #ofertas-grid.prod-grid,
  #actividad-fav-grid.prod-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }
}

/* Mobile global */
@media(max-width:768px){
  body{font-size:13px}
  .dash-topbar{
    padding-top:max(9px,env(safe-area-inset-top));
  }
  .dash-sidebar{
    padding-top:max(16px,env(safe-area-inset-top));
    padding-bottom:max(22px,env(safe-area-inset-bottom));
  }
  .dash-body{
    width:100%;
    max-width:none;
  }
  .dash-section{margin-bottom:20px}
  .dash-title{letter-spacing:-.65px}
  .empty-box{
    padding:42px 16px;
    border-radius:13px;
    font-size:12px;
  }
  .btn{min-height:38px}
}

/* 430 px: tamaño objetivo principal */
@media(max-width:430px){
  .dash-body{padding-top:17px}
  .dash-section{margin-bottom:18px}
  .dash-sub{font-size:11.5px}
  .panel-box{margin-bottom:16px}
  .account-row{margin-bottom:9px}
  .status-pill{font-size:8.5px}
}

/* 390 / 375 */
@media(max-width:390px){
  .dash-topbar{gap:6px;padding-left:8px;padding-right:8px}
  .dash-mobile-menu-btn,
  .dash-topbar-actions .round-btn,
  .dash-topbar-actions .btn{
    width:36px;height:36px;min-width:36px;flex-basis:36px;
  }
  .dash-search{height:36px}
  .dash-body{padding-left:9px;padding-right:9px}
  #dash-prod-grid.prod-grid,
  #ofertas-grid.prod-grid,
  #actividad-fav-grid.prod-grid{gap:8px}
}

/* 360 / 320: máxima protección contra overflow */
@media(max-width:360px){
  .dash-body{padding-left:8px;padding-right:8px}
  .dash-title{font-size:21px}
  .dash-sub{font-size:11px}
  .btn{white-space:normal;text-align:center}
  .panel-box{padding:13px}
  .account-row{padding:12px 11px 12px 14px}
  .modal{padding-left:13px;padding-right:13px}
}
@media(max-width:330px){
  .dash-topbar-actions{display:none}
  .dash-search input::placeholder{color:rgba(113,113,122,.7)}
  #dash-prod-grid.prod-grid,
  #ofertas-grid.prod-grid,
  #actividad-fav-grid.prod-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  .m-card-body{padding:8px 7px}
  .m-card-title{font-size:10.5px}
  .m-price{font-size:14px}
}

/* Evita que contenido dinámico largo rompa layout */
.dash-content,
.dash-body,
.panel-box,
.account-row,
.seller-card,
.m-card,
.msg-thread-pane,
.msg-list-info{
  min-width:0;
}
.dash-body p,
.activity-text,
.msg-bubble{
  overflow-wrap:anywhere;
}
/* .account-row .meta y .seller-info salieron de este grupo a propósito:
   overflow-wrap:anywhere le permitía a flexbox encoger esos contenedores
   a casi 0px (dejaba que el texto se partiera letra por letra cuando los
   botones/badges vecinos no cedían espacio). Ahora usan overflow-wrap:break-word
   (rompe por palabra, nunca por letra) + flex-wrap en sus filas — ver las
   reglas .account-row-main .meta y .sname-text más arriba, y las reglas
   de @media(max-width:600px) más abajo para el comportamiento en móvil. */

/* Safe-area para móviles con notch */
@supports(padding:max(0px)){
  .toast{bottom:max(18px,env(safe-area-inset-bottom))}
}

/* Accesibilidad: no forzar animación */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


/* =========================================================
   WORMSHOP — PUBLIC HOME · ORBIT PREMIUM
   SOLO STOREFRONT PÚBLICO. Dashboard / APIs / auth intactos.
   ========================================================= */
#storefront{
  background:
    radial-gradient(circle at 72% 8%,rgba(var(--ws-brand-rgb),.11),transparent 26%),
    radial-gradient(circle at 30% 20%,rgba(var(--ws-brand-rgb),.055),transparent 24%),
    #050609;
}
#storefront header{
  background:rgba(5,6,9,.76);
  border-bottom:1px solid rgba(255,255,255,.065);
}
#storefront .headbar{height:72px}
#storefront .brand{
  font-size:23px;
  letter-spacing:-.8px;
  text-shadow:0 0 24px rgba(var(--ws-brand-rgb),.13);
}
#storefront .navlinks{gap:28px;font-size:12px}
#storefront .navlinks a{position:relative}
#storefront .navlinks a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:-8px;height:1px;
  background:linear-gradient(90deg,var(--ws-brand),var(--ws-brand-strong));
  transition:.22s ease;
}
#storefront .navlinks a:hover::after{left:0;right:0}

/* HERO */
#storefront .orbit-hero{
  min-height:min(790px,calc(100svh - 72px));
  padding:0;
  text-align:left;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
  isolation:isolate;
  background:
    radial-gradient(ellipse at 69% 48%,rgba(var(--ws-brand-rgb),.12),transparent 31%),
    radial-gradient(ellipse at 65% 50%,rgba(var(--ws-brand-rgb),.07),transparent 43%),
    linear-gradient(180deg,#050609 0%,#06070b 100%);
}
.orbit-stars{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.65;
  background-image:
    radial-gradient(circle at 12% 24%,var(--ws-brand-strong) 0 1px,transparent 1.6px),
    radial-gradient(circle at 82% 16%,var(--ws-brand) 0 1px,transparent 1.5px),
    radial-gradient(circle at 67% 74%,var(--ws-brand-strong) 0 1px,transparent 1.5px),
    radial-gradient(circle at 91% 54%,#fff 0 1px,transparent 1.3px),
    radial-gradient(circle at 44% 18%,#fff 0 1px,transparent 1.2px);
  background-size:210px 180px,260px 220px,310px 270px,190px 240px,280px 190px;
}
.orbit-grid{
  position:absolute;inset:auto 0 0;height:46%;z-index:0;opacity:.12;
  background:
    linear-gradient(rgba(var(--ws-brand-rgb),.2) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--ws-brand-rgb),.2) 1px,transparent 1px);
  background-size:54px 54px;
  transform:perspective(500px) rotateX(67deg) scale(1.35);
  transform-origin:center bottom;
  mask-image:linear-gradient(to top,#000,transparent 85%);
}
.orbit-shell{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:minmax(330px,.82fr) minmax(520px,1.18fr);
  align-items:center;gap:28px;
  padding-top:52px;padding-bottom:72px;
}
#storefront .orbit-copy{
  max-width:570px;
  text-align:left;
  justify-self:start;
}
#storefront .orbit-copy .hero-tag{
  margin:0 0 24px;
  padding:7px 13px;
  border-color:rgba(var(--ws-brand-rgb),.22);
  background:rgba(var(--ws-brand-rgb),.055);
  box-shadow:inset 0 0 20px rgba(var(--ws-brand-rgb),.025);
  font-size:10px;letter-spacing:1.25px;
}
.hero-tag-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--ws-brand);box-shadow:0 0 12px var(--ws-brand);
}
#storefront .orbit-copy h1{
  max-width:610px;
  font-size:clamp(52px,5.2vw,82px);
  line-height:.94;
  letter-spacing:-4.2px;
  margin:0 0 26px;
  text-wrap:balance;
}
#storefront .orbit-copy h1::first-line{color:#fff}
#storefront .orbit-copy p{
  max-width:500px;
  margin:0 0 30px;
  font-size:16px;line-height:1.72;color:rgba(212,212,216,.72);
}
#storefront .orbit-copy .hero-actions{
  justify-content:flex-start;gap:11px;
}
#storefront .orbit-primary{
  min-height:48px;padding:0 22px;
  background:linear-gradient(100deg,var(--ws-brand-strong) 0%,var(--ws-brand) 52%,var(--ws-brand-strong) 100%);
  color:white;border:0;
  box-shadow:0 12px 40px rgba(var(--ws-brand-rgb),.22),0 0 28px rgba(var(--ws-brand-rgb),.10);
}
#storefront .orbit-primary:hover{transform:translateY(-2px);box-shadow:0 16px 46px rgba(var(--ws-brand-rgb),.3)}
#storefront .orbit-secondary{
  min-height:48px;padding:0 22px;background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.11);
}
.orbit-trust{
  display:flex;flex-wrap:wrap;gap:17px;margin-top:25px;
  font-size:10px;letter-spacing:.35px;color:rgba(161,161,170,.7);
}
.orbit-trust span{display:flex;align-items:center;gap:6px}
.orbit-trust i{
  width:5px;height:5px;border-radius:50%;background:var(--ws-brand);
  box-shadow:0 0 8px rgba(var(--ws-brand-rgb),.8);
}

/* CSS 3D orbital object — no dependency, no API changes */
.orbit-stage{
  position:relative;width:min(660px,48vw);aspect-ratio:1/1;
  justify-self:center;perspective:1100px;
}
.orbit-aura{
  position:absolute;inset:9%;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--ws-brand-rgb),.18),rgba(var(--ws-brand-rgb),.07) 38%,transparent 68%);
}
.orbit-planet{
  position:absolute;left:22%;top:19%;width:57%;aspect-ratio:1;border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.18),transparent 8%),
    radial-gradient(circle at 68% 64%,rgba(var(--ws-brand-strong-rgb),.42),transparent 24%),
    radial-gradient(circle at 38% 46%,rgba(var(--ws-brand-rgb),.25),transparent 28%),
    radial-gradient(circle at 50% 50%,#11183c 0%,#080b1c 58%,#020309 100%);
  border:1px solid rgba(var(--ws-brand-strong-rgb),.65);
  box-shadow:
    inset -28px -18px 70px rgba(0,0,0,.78),
    inset 12px 5px 34px rgba(var(--ws-brand-rgb),.13),
    0 0 10px rgba(var(--ws-brand-rgb),.55),
    0 0 45px rgba(var(--ws-brand-rgb),.28),
    0 0 100px rgba(var(--ws-brand-strong-rgb),.16);
}
.planet-grid{
  position:absolute;inset:-15%;
  border-radius:50%;
  background:
    repeating-linear-gradient(0deg,transparent 0 15px,rgba(var(--ws-brand-rgb),.12) 16px 17px),
    repeating-linear-gradient(90deg,transparent 0 22px,rgba(var(--ws-brand-strong-rgb),.11) 23px 24px);
  transform:rotate(-14deg);
  mask-image:radial-gradient(circle,#000 0 66%,transparent 72%);
}
.planet-glow{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(ellipse at 65% 24%,transparent 0 40%,rgba(168, 85, 247,.14) 42%,transparent 48%),
    radial-gradient(ellipse at 32% 72%,transparent 0 45%,rgba(255,120,135,.12) 47%,transparent 52%);
}
.planet-mark{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--m-font-display);font-size:clamp(70px,8vw,122px);font-weight:800;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.9);
  text-shadow:0 0 8px #fff,0 0 18px var(--ws-brand),0 0 38px var(--ws-brand),0 0 55px var(--ws-brand-strong);
  transform:skewX(-5deg);
}
.orbit-ring{
  position:absolute;left:8%;top:42%;width:84%;height:20%;
  border:2px solid rgba(var(--ws-brand-rgb),.62);border-radius:50%;
  box-shadow:0 0 10px rgba(var(--ws-brand-rgb),.5),inset 0 0 9px rgba(var(--ws-brand-rgb),.25);
  transform:rotate(-10deg);
}
.orbit-ring-b{
  top:39%;border-color:rgba(var(--ws-brand-strong-rgb),.72);
  box-shadow:0 0 12px rgba(var(--ws-brand-strong-rgb),.55);
  transform:rotate(13deg) scale(.92);
}
.orbit-ring-c{
  left:17%;top:30%;width:66%;height:40%;
  border-color:rgba(var(--ws-brand-strong-rgb),.42);
  transform:rotate(66deg);
}
.orbit-node{
  position:absolute;z-index:6;display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:9px;font-weight:700;letter-spacing:.9px;color:rgba(255,255,255,.75);
}
.node-icon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(8,14,30,.94),rgba(21,12,45,.92));
  border:1px solid rgba(var(--ws-brand-rgb),.4);color:var(--ws-brand);font-size:18px;
  box-shadow:inset 0 0 20px rgba(var(--ws-brand-rgb),.08),0 0 24px rgba(var(--ws-brand-rgb),.11);
}
.node-stream{left:12%;top:16%}
.node-game{left:8%;bottom:19%;animation-delay:-1s}
.node-code{right:6%;top:18%;animation-delay:-2s}
.node-learn{right:10%;bottom:17%;animation-delay:-3s}
.node-code .node-icon,.node-learn .node-icon{border-color:rgba(var(--ws-brand-strong-rgb),.45);color:var(--ws-brand-strong)}
.orbit-platform{
  position:absolute;left:25%;right:20%;bottom:10%;height:12%;transform:perspective(400px) rotateX(66deg);
}
.orbit-platform div{
  position:absolute;inset:0;border-radius:50%;border:1px solid rgba(var(--ws-brand-rgb),.45);
  box-shadow:0 0 18px rgba(var(--ws-brand-rgb),.12);
}
.orbit-platform div:nth-child(2){inset:16%;border-color:rgba(var(--ws-brand-strong-rgb),.55)}
.orbit-platform div:nth-child(3){inset:32%;background:rgba(var(--ws-brand-rgb),.06)}
.orbit-scroll{
  position:absolute;bottom:27px;right:32px;z-index:4;
  font-size:8px;letter-spacing:1.3px;color:rgba(161,161,170,.5);
}
.orbit-scroll span{color:var(--ws-brand);margin-left:5px}

/* Stats become premium HUD cards */
#storefront > .stats{
  position:relative;z-index:5;
  max-width:1180px;margin:-25px auto 0;
  padding:0 18px 56px;
  background:transparent;border:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
#storefront > .stats .stat{
  position:relative;padding:20px 22px;border-radius:16px;
  background:linear-gradient(145deg,rgba(15,17,25,.88),rgba(8,9,14,.92));
  border:1px solid rgba(255,255,255,.085);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 18px 45px rgba(0,0,0,.18);
  overflow:hidden;
}
#storefront > .stats .stat::before{
  content:"";position:absolute;left:0;top:20%;bottom:20%;width:2px;
  background:linear-gradient(var(--ws-brand),var(--ws-brand-strong));
  box-shadow:0 0 12px var(--ws-brand);
}
#storefront > .stats .stat b{font-size:26px}
#storefront > .stats .stat span{font-size:9px;letter-spacing:.8px}

/* Public sections */
#storefront section.block{padding:66px 0}
#storefront section.block .wrap{position:relative}
#storefront .eyebrow{font-size:9px;letter-spacing:1.8px}
#storefront .blocktitle{font-size:clamp(30px,3.2vw,44px);letter-spacing:-1.4px}
#storefront .blocksub{font-size:13px;color:rgba(161,161,170,.72)}
#storefront #beneficios{
  background:linear-gradient(180deg,transparent,rgba(11,12,18,.72),transparent);
}
#storefront .premium-benefits{
  grid-template-columns:repeat(4,1fr);gap:12px;
}
#storefront .premium-benefits .benefit{
  position:relative;min-height:190px;padding:25px 22px;
  background:linear-gradient(145deg,rgba(17,19,28,.86),rgba(9,10,15,.94));
  border-color:rgba(255,255,255,.08);overflow:hidden;
}
#storefront .premium-benefits .benefit::after{
  content:"";position:absolute;width:90px;height:90px;right:-35px;top:-35px;border-radius:50%;
  background:rgba(var(--ws-brand-rgb),.055);
}
#storefront .premium-benefits .benefit:nth-child(even)::after{background:rgba(var(--ws-brand-strong-rgb),.07)}
#storefront .premium-benefits .premium-icon{
  width:43px;height:43px;border-radius:13px;display:grid;place-items:center;
  font-size:20px;color:var(--ws-brand);
  background:rgba(var(--ws-brand-rgb),.06);border:1px solid rgba(var(--ws-brand-rgb),.22);
  box-shadow:inset 0 0 18px rgba(var(--ws-brand-rgb),.045);
}
#storefront .premium-benefits .benefit:nth-child(even) .premium-icon{
  color:var(--ws-brand-strong);border-color:rgba(var(--ws-brand-strong-rgb),.25);background:rgba(var(--ws-brand-strong-rgb),.055);
}
#storefront .premium-benefits h3{font-size:15px}
#storefront .premium-benefits p{font-size:12px;color:rgba(161,161,170,.72)}

/* Categories look like orbital modules */
#storefront #categorias{background:rgba(10,11,16,.72)!important;border-block:1px solid rgba(255,255,255,.055)}
#storefront #categorias .cat-grid{gap:10px}
#storefront #categorias .cat-chip{
  min-height:54px;padding:9px 15px 9px 9px;border-radius:15px;
  background:linear-gradient(145deg,rgba(16,18,27,.92),rgba(8,9,14,.96));
  border-color:rgba(255,255,255,.08);
}
#storefront #categorias .cat-chip:hover{
  transform:translateY(-2px);border-color:rgba(var(--ws-brand-rgb),.35);
  box-shadow:0 12px 28px rgba(0,0,0,.2),0 0 20px rgba(var(--ws-brand-rgb),.05);
}

/* Existing API products become the premium featured-products row automatically */
#storefront #productos .prod-grid{gap:14px}
#storefront #productos .m-card{
  background:linear-gradient(155deg,rgba(16,18,27,.94),rgba(7,8,12,.98));
  border-color:rgba(255,255,255,.085);
}
#storefront #productos .m-card:hover{
  transform:translateY(-6px);
  border-color:rgba(var(--ws-brand-rgb),.28);
  box-shadow:0 22px 45px rgba(0,0,0,.3),0 0 30px rgba(var(--ws-brand-rgb),.05);
}

/* VIP conversion strip — banner 3D (4 sep 2026): la esfera pasa a
   tener relieve real (luz/sombra propias, no solo un radial-gradient
   plano) con una rotación ambiente lenta, y el fondo del cartel tiene
   un barrido de brillo continuo — antes era un panel estático plano. */
.public-vip-strip{
  position:relative;min-height:150px;margin-top:38px;margin-bottom:70px;padding:28px 34px;
  display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:24px;
  border:1px solid rgba(var(--ws-brand-rgb),.3);border-radius:20px;overflow:hidden;
  background:
    radial-gradient(circle at 10% 50%,rgba(var(--ws-brand-rgb),.17),transparent 24%),
    linear-gradient(105deg,rgba(21,9,29,.94),rgba(11,10,18,.96) 48%,rgba(20,7,29,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 24px 70px rgba(0,0,0,.22);
}
.public-vip-strip::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.025) 50%,transparent 70%);
}
.public-vip-strip::before{
  content:""; position:absolute; top:0; left:-30%; width:35%; height:100%; pointer-events:none; z-index:1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.06) 45%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.06) 55%, transparent);
  animation:vipStripSheen 6s ease-in-out infinite;
}
@keyframes vipStripSheen{ 0%{ left:-30%; } 45%,100%{ left:120%; } }
.vip-orb{
  width:76px;height:76px;border-radius:50%;position:relative;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,var(--ws-brand-strong) 0%,var(--ws-brand) 45%,#1a0508 78%);
  box-shadow:0 0 20px rgba(var(--ws-brand-strong-rgb),.45),0 0 60px rgba(var(--ws-brand-rgb),.2),
    inset 0 4px 8px rgba(255,255,255,.35), inset 0 -8px 14px rgba(0,0,0,.5);
  animation:vipOrbFloat 3.2s ease-in-out infinite;
}
.vip-orb::after{
  /* punto de brillo especular fijo — vende la ilusión de esfera real
     con una sola fuente de luz, en vez de un círculo liso */
  content:""; position:absolute; top:14%; left:24%; width:26%; height:18%; border-radius:50%;
  background:rgba(255,255,255,.75); filter:blur(3px);
}
@keyframes vipOrbFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.vip-orb span{font-size:32px;font-weight:900;font-style:italic;text-shadow:0 0 12px #fff; position:relative; z-index:1;}
.public-vip-copy .eyebrow{margin-bottom:7px!important;color:var(--ws-brand-strong)!important}
.public-vip-copy h2{font-size:22px;margin-bottom:6px}
.public-vip-copy p{font-size:12px;color:rgba(161,161,170,.72)}
.public-vip-btn{
  position:relative;z-index:2;border-color:rgba(var(--ws-brand-strong-rgb),.38)!important;
  color:var(--ws-brand-strong)!important;background:rgba(var(--ws-brand-rgb),.055)!important;
}
.public-vip-btn:hover{background:rgba(var(--ws-brand-rgb),.12)!important;transform:translateY(-2px)}

/* Animations */









@media(max-width:900px){
  .orbit-shell{ display:flex; flex-direction:column; gap:2px; padding:0 18px; }
}
/* Mobile — designed to preserve the approved logged-in dashboard untouched */
@media(max-width:768px){
  #storefront .headbar{height:62px;padding:0 14px}
  #storefront .brand{font-size:19px}
  #storefront .navlinks{display:none}
  #storefront .orbit-hero{
    min-height:auto;padding:34px 0 58px;
    background:
      radial-gradient(circle at 50% 52%,rgba(var(--ws-brand-rgb),.16),transparent 32%),
      linear-gradient(180deg,#050609,#06070b);
  }
  #storefront .orbit-copy{
    width:100%;max-width:520px;text-align:center;display:flex;flex-direction:column;align-items:center;
  }
  #storefront .orbit-copy .hero-tag{margin-bottom:16px;font-size:8px}
  #storefront .orbit-copy h1{
    font-size:clamp(37px,11.2vw,52px);line-height:.96;letter-spacing:-2.3px;
    max-width:420px;margin-bottom:17px;
  }
  #storefront .orbit-copy p{
    font-size:12.5px;line-height:1.58;max-width:350px;margin-bottom:21px;
  }
  #storefront .orbit-copy .hero-actions{justify-content:center;width:100%}
  #storefront .orbit-copy .hero-actions .btn{min-height:43px;font-size:11px}
  .orbit-trust{justify-content:center;margin-top:17px;gap:10px;font-size:8px}
  .orbit-stage{
    width:min(390px,96vw);margin-top:-2px;margin-bottom:-15px;
  }
  .node-icon{width:42px;height:42px;border-radius:13px;font-size:14px}
  .orbit-node{font-size:7px}
  .node-stream{left:7%;top:20%}.node-game{left:5%;bottom:20%}
  .node-code{right:4%;top:21%}.node-learn{right:6%;bottom:19%}
  .planet-mark{font-size:72px}
  .orbit-scroll{display:none}
  #storefront > .stats{
    margin:0;padding:14px 14px 38px;grid-template-columns:1fr;gap:8px;
  }
  #storefront > .stats .stat{padding:14px 17px}
  #storefront > .stats .stat b{font-size:21px}
  #storefront .premium-benefits{grid-template-columns:1fr 1fr;gap:9px}
  #storefront .premium-benefits .benefit{min-height:160px;padding:18px 15px}
  #storefront section.block{padding:46px 14px}
  #storefront .blocktitle{font-size:29px}
  #storefront .blocksub{font-size:11.5px;margin-bottom:25px}
  .public-vip-strip{
    margin:16px 14px 48px;padding:22px 18px;min-height:0;
    grid-template-columns:58px 1fr;gap:14px;
  }
  .vip-orb{width:55px;height:55px}.vip-orb span{font-size:24px}
  .public-vip-copy h2{font-size:16px}.public-vip-copy p{font-size:10px}
  .public-vip-btn{grid-column:1/-1;width:100%}
}
@media(max-width:390px){
  #storefront .orbit-copy h1{font-size:38px}
  #storefront .orbit-secondary{display:none}
  .orbit-stage{width:355px;max-width:100vw}
  #storefront .premium-benefits{grid-template-columns:1fr 1fr}
  #storefront .premium-benefits .benefit{padding:16px 13px}
  #storefront .premium-benefits h3{font-size:13px}
  #storefront .premium-benefits p{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .orbit-stars,.orbit-planet,.planet-grid,.orbit-ring,.orbit-node,.orbit-aura{animation:none!important}
}

/* === Premium Motion & Interaction pass (audit) === */
.benefit, .m-card, .stat-card, .account-row, .pay-card, .vip-plan, .seller-card {
  transition: transform .22s cubic-bezier(.22,1,.36,1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.benefit:hover, .m-card:hover, .stat-card:hover, .account-row:hover, .pay-card:hover, .vip-plan:hover, .seller-card:hover {
  box-shadow: 0 0 0 1px rgba(var(--ws-brand-rgb),.2), 0 18px 40px rgba(var(--ws-brand-rgb),.12), 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.m-card:active, .benefit:active { transform: translateY(-2px) scale(.995); }

.btn-primary:focus-visible, .btn-brand:focus-visible {
  outline: 2px solid var(--m-brand); outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--ws-brand-rgb),.22), 0 6px 20px rgba(var(--ws-brand-rgb),.22);
}
.btn:not(.btn-primary):not(.btn-brand):focus-visible {
  outline: 2px solid var(--m-accent-cyan); outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--ws-brand-rgb),.16);
}
.btn:not(.btn-primary):not(.btn-brand):hover { box-shadow: 0 4px 16px rgba(var(--ws-brand-rgb),.08); }
.dash-nav-item:hover .a-icon, .activity-tab:hover .a-icon { transform: scale(1.08); transition: transform .18s ease; }
.status-pill, .role-badge, .m-badge, .plan-badge { transition: transform .15s ease; }
.status-pill:hover, .role-badge:hover { transform: translateY(-1px); }

/* Affiliate section — ambient aurora */
#afiliados { position: relative; overflow: hidden; }
#afiliados::before {
  content: ''; position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle 2px at 12% 20%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(circle 1.5px at 32% 68%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(circle 2px at 68% 30%, rgba(var(--ws-brand-rgb),.5), transparent 60%),
    radial-gradient(circle 1.5px at 85% 75%, rgba(var(--ws-brand-rgb),.5), transparent 60%),
    radial-gradient(circle 1px at 50% 85%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(var(--ws-brand-rgb),.16), transparent 70%),
    radial-gradient(ellipse 50% 35% at 80% 70%, rgba(var(--ws-brand-rgb),.14), transparent 70%);
}
#afiliados::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.05) 45%, rgba(var(--ws-brand-rgb),.08) 50%, transparent 60%);
}
#afiliados .wrap { position: relative; z-index: 1; }


#afiliados .btn-primary {
  background: linear-gradient(135deg, var(--m-brand), var(--ws-brand-strong)); color: #fff; border: none;
  box-shadow: 0 8px 28px rgba(var(--ws-brand-rgb),.3);
}
#afiliados .btn-primary:hover { box-shadow: 0 10px 34px rgba(var(--ws-brand-rgb),.42); transform: translateY(-2px); }

/* =========================================================
   WORMSHOP — MARKETPLACE RESPONSIVE/PERFORMANCE PASS
   Mantiene las secciones/rankings existentes. Solo compacta el
   layout, reduce trabajo de pintura y evita grids gigantes.
   ========================================================= */
#dash-sections .dash-section,
#dash-rankings .dash-section,
#dash-bundles .dash-section{
  content-visibility:auto;
  contain:layout paint style;
  contain-intrinsic-size: 420px;
}

#dash-sections .prod-grid,
#dash-rankings .prod-grid,
#dash-bundles .prod-grid,
#ofertas-grid.prod-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}

#dash-sections .dash-section,
#dash-rankings .dash-section{
  max-width:100%;
  margin-top:22px !important;
  margin-bottom:22px;
}

#dash-sections .dash-section > div:first-child,
#dash-rankings .dash-section > div:first-child{
  margin-bottom:11px !important;
}

#dash-sections .dash-section h3,
#dash-rankings .dash-section h3{
  font-size:17px !important;
  letter-spacing:-.2px;
}

.m-card-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:1 / 1;
}

@media(min-width:1400px){
  .dash-body{max-width:1500px;}
}

@media(min-width:769px) and (max-width:1250px){
  #dash-sections .prod-grid,
  #dash-rankings .prod-grid,
  #dash-bundles .prod-grid,
  #ofertas-grid.prod-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
  }
}

@media(max-width:768px){
  #dash-sections .prod-grid,
  #dash-rankings .prod-grid,
  #dash-bundles .prod-grid,
  #ofertas-grid.prod-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  #dash-sections .dash-section,
  #dash-rankings .dash-section{
    margin-top:16px !important;
    margin-bottom:16px;
  }

  #dash-sections .dash-section > div:first-child,
  #dash-rankings .dash-section > div:first-child{
    margin-bottom:9px !important;
  }

  #dash-sections .dash-section h3,
  #dash-rankings .dash-section h3{
    font-size:15px !important;
  }

  #dash-sections .m-card:hover,
  #dash-rankings .m-card:hover{
    transform:none;
    box-shadow:var(--m-shadow-card);
  }

  .m-card-media{
    aspect-ratio:1 / 1;
  }

  .m-card-body{
    padding:9px 9px 10px;
  }
}

/* Render diferido: las secciones lejanas no crean tarjetas/imágenes hasta
   acercarse al viewport. El placeholder conserva el ritmo visual sin
   descargar imágenes ni construir cientos de nodos al entrar. */
.ws-deferred-section .ws-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:11px;
}
.ws-deferred-section .ws-section-head h3{
  margin:0;
  font-size:17px !important;
  letter-spacing:-.2px;
}
.ws-deferred-grid{
  min-height:0;
}
.ws-section-placeholder{
  grid-column:1/-1;
  min-height:8px;
}
@media(max-width:768px){
  .ws-deferred-section .ws-section-head{margin-bottom:9px;}
  .ws-deferred-section .ws-section-head h3{font-size:15px !important;}
}

/* Filtros: en móvil ocupan poco espacio y se despliegan al tocar
   el bloque. No se cambia ningún ID ni handler existente. */
@media(max-width:600px){
  .catalog-toolbar{
    padding:10px;
  }
  .toolbar-filters{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-4px);
    pointer-events:none;
    transition:max-height .22s ease,opacity .18s ease,transform .18s ease;
  }
  .catalog-toolbar.filters-open .toolbar-filters{
    max-height:600px;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .toolbar-filters select,
  .price-range-filter{
    min-width:0 !important;
    width:100%;
  }
  .price-range-filter{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 14px 1fr;
    align-items:center;
    gap:5px;
  }
  .price-range-filter input{
    width:100% !important;
    min-width:0 !important;
  }
}

@media(max-width:430px){
  #dash-sections .prod-grid,
  #dash-rankings .prod-grid,
  #dash-bundles .prod-grid,
  #ofertas-grid.prod-grid{
    gap:8px;
  }
  .m-card-body{padding:8px 8px 9px;}
  .m-card-title{font-size:11.5px;}
  .m-card-rating{font-size:9px;}
  .m-price{font-size:16px;}
  .m-card-actions .btn{min-height:36px;font-size:11px;}
}

.mobile-filter-toggle{display:none;}
@media(max-width:600px){
  .mobile-filter-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    width:100%;
    margin-top:8px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    background:rgba(8,9,12,.72);
    color:var(--m-text);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
  }
  .mobile-filter-toggle[aria-expanded="true"]{
    border-color:rgba(var(--ws-brand-rgb),.35);
    color:var(--m-brand);
  }
  .catalog-toolbar.filters-open .toolbar-filters{
    max-height:420px;
    opacity:1;
    transform:none;
    pointer-events:auto;
    margin-top:8px;
  }
}

/* =========================================================
   WORMSHOP — RESPONSIVE ALL DEVICES V3
   Final override layer. Does not change application logic.
   Targets phones, phablets, tablets, laptops and wide monitors.
   ========================================================= */

/* Never let dynamic marketplace content create horizontal scrolling. */
#dash-sections, #dash-rankings, #dash-bundles, #prod-grid,
#ofertas-grid, .dash-body, .dash-content {
  min-width: 0;
  max-width: 100%;
}
.dash-body { overflow-x: clip; }

/* Keep the desktop marketplace visually contained on very wide screens. */
@media (min-width: 1200px) {
  .dash-body {
    width: min(100% - 40px, 1500px);
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (min-width: 1800px) {
  .dash-body {
    width: min(100% - 64px, 1560px);
  }
}

/* Product grids: deliberate breakpoints instead of stretched cards. */
#dash-sections .prod-grid,
#dash-rankings .prod-grid,
#dash-bundles .prod-grid,
#ofertas-grid.prod-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.15vw, 18px);
}

/* 1024–1199: four comfortable columns. */
@media (min-width: 1024px) and (max-width: 1199px) {
  #dash-sections .prod-grid,
  #dash-rankings .prod-grid,
  #dash-bundles .prod-grid,
  #ofertas-grid.prod-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}

/* 900–1023: three columns for tablets/small laptops. */
@media (min-width: 900px) and (max-width: 1023px) {
  #dash-sections .prod-grid,
  #dash-rankings .prod-grid,
  #dash-bundles .prod-grid,
  #ofertas-grid.prod-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

/* 768–899: tablet landscape/large tablet. */
@media (min-width: 768px) and (max-width: 899px) {
  #dash-sections .prod-grid,
  #dash-rankings .prod-grid,
  #dash-bundles .prod-grid,
  #ofertas-grid.prod-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .dash-body {
    padding-left: clamp(12px, 2vw, 20px);
    padding-right: clamp(12px, 2vw, 20px);
  }
}

/* Phones: always two columns, with fluid spacing. */
@media (max-width: 767px) {
  .dash-body {
    padding-left: clamp(8px, 3.2vw, 14px);
    padding-right: clamp(8px, 3.2vw, 14px);
  }

  #dash-sections .prod-grid,
  #dash-rankings .prod-grid,
  #dash-bundles .prod-grid,
  #ofertas-grid.prod-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(7px, 2.2vw, 11px);
  }

  .m-card {
    min-width: 0;
    width: 100%;
    border-radius: clamp(10px, 2.8vw, 14px);
  }

  .m-card-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
  }

  .m-card-media img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
  }

  .m-card-body {
    padding: clamp(7px, 2.4vw, 10px);
  }

  .m-card-title {
    font-size: clamp(10.5px, 3vw, 12px);
    line-height: 1.25;
  }

  .m-price {
    font-size: clamp(14px, 4vw, 17px);
  }

  .m-card-actions {
    gap: clamp(4px, 1.4vw, 7px);
  }

  .m-card-actions .btn {
    min-height: clamp(34px, 9.5vw, 40px);
    font-size: clamp(9.5px, 2.7vw, 11px);
    padding-inline: clamp(6px, 2vw, 10px);
  }

  .fav-btn {
    width: clamp(28px, 8vw, 32px);
    height: clamp(28px, 8vw, 32px);
  }

  .m-badge {
    max-width: calc(100% - 48px);
  }
}

/* Small phones: preserve two columns without making text microscopic. */
@media (max-width: 359px) {
  #dash-sections .prod-grid,
  #dash-rankings .prod-grid,
  #dash-bundles .prod-grid,
  #ofertas-grid.prod-grid {
    gap: 6px;
  }

  .m-card-body {
    padding: 7px;
  }

  .m-card-seller {
    font-size: 8px;
  }

  .m-card-title {
    font-size: 10px;
  }

  .m-price {
    font-size: 13.5px;
  }

  .m-card-actions .btn {
    min-height: 32px;
    font-size: 9px;
  }
}

/* 360–479px: comfortable two-column phones. */
@media (min-width: 360px) and (max-width: 479px) {
  .m-card-body {
    padding: clamp(7px, 2.1vw, 9px);
  }
}

/* 480–767px: larger phones/phablets get a little more breathing room. */
@media (min-width: 480px) and (max-width: 767px) {
  #dash-sections .prod-grid,
  #dash-rankings .prod-grid,
  #dash-bundles .prod-grid,
  #ofertas-grid.prod-grid {
    gap: 10px;
  }
}

/* Filter panel scales with the screen instead of using one fixed height. */
@media (max-width: 600px) {
  .catalog-toolbar {
    width: 100%;
    min-width: 0;
  }

  .toolbar-filters {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar-filters > * {
    min-width: 0;
  }

  .toolbar-filters select,
  .toolbar-filters input,
  .price-range-filter {
    max-width: 100%;
  }
}

/* Prevent wide buttons/search controls from forcing overflow on tiny phones. */
@media (max-width: 430px) {
  .dash-topbar,
  .dash-topbar-actions,
  .catalog-toolbar,
  .catalog-toolbar > *,
  .toolbar-filters {
    min-width: 0;
    max-width: 100%;
  }

  .dash-search,
  .dash-search input {
    min-width: 0;
    max-width: 100%;
  }
}

/* Wide screens: keep section cards readable instead of giant. */
@media (min-width: 1600px) {
  #dash-sections .prod-grid,
  #dash-rankings .prod-grid,
  #dash-bundles .prod-grid,
  #ofertas-grid.prod-grid {
    max-width: 100%;
    gap: 18px;
  }
}

/* Respect reduced-motion users and avoid expensive card animations on touch. */
@media (hover: none), (pointer: coarse) {
  .m-card:hover,
  #storefront #productos .m-card:hover {
    transform: none !important;
  }

  .m-card-media img {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-card,
  .m-card-media img,
  .toolbar-filters {
    transition: none !important;
  }
}


/* =========================================================
   WORMSHOP V4 — HOME SUPREME RESPONSIVE/PERFORMANCE LAYER
   Solo UI/rendering. No endpoints, auth, checkout or business logic.
   ========================================================= */

/* Public home: keep expensive lower sections out of the first paint. */
#storefront #beneficios,
#storefront .public-vip-strip,
#storefront #afiliados {
  content-visibility: auto;
  contain-intrinsic-size: 1px 520px;
}

/* Stable page width on every desktop size. */
#storefront .wrap {
  width: min(100% - 32px, 1440px);
  margin-inline: auto;
}

/* Header: compact but still premium. */
#storefront .headbar {
  min-width: 0;
  gap: 16px;
}
#storefront .brand { flex: 0 0 auto; }
#storefront .navlinks { flex: 0 1 auto; min-width: 0; }
#storefront .headactions { flex: 0 0 auto; min-width: 0; }
#storefront .headactions .btn { white-space: nowrap; }

/* Hero: desktop stays dramatic, but avoids absurd growth on ultrawide screens. */
@media (min-width: 1200px) {
  #storefront .orbit-shell { width: min(100% - 48px, 1380px); }
  #storefront .orbit-stage { width: min(620px, 44vw); }
}
@media (min-width: 1800px) {
  #storefront .orbit-hero { min-height: min(760px, 82svh); }
  #storefront .orbit-shell { width: min(100% - 80px, 1500px); }
  #storefront .orbit-stage { width: min(650px, 42vw); }
}

/* Category modules: dense on small screens instead of giant pills. */
#storefront #categorias .cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
#storefront #categorias .cat-chip {
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 8px 12px 8px 8px;
  justify-content: flex-start;
}
#storefront #categorias .cat-chip > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#storefront #categorias .cat-chip-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

/* Product wall: consistent cards and bounded image cost. */
#storefront #productos .prod-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
}
#storefront #productos .m-card {
  min-width: 0;
  overflow: hidden;
}
#storefront #productos .m-card-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
#storefront #productos .m-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Remove unnecessary paint-heavy effects from touch devices. */
@media (hover: none), (pointer: coarse) {
  /* En táctil apagamos solo las capas de fondo (repintan mucha superficie).
     El planeta, los anillos y los nodos siguen animando: son transform/opacity
     puros sobre elementos pequeños, prácticamente gratis para el compositor. */
  #storefront .orbit-stars,
  #storefront .orbit-grid,
  #storefront .orbit-aura {
    animation: none !important;
  }
  #storefront .cat-chip:hover,
  #storefront #productos .m-card:hover,
  #storefront .benefit:hover {
    transform: none !important;
  }
}

/* Tablet / phablet. */
@media (max-width: 1199px) {
  #storefront #productos .prod-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #storefront #categorias .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  #storefront .wrap { width: min(100% - 28px, 720px); }
  #storefront #productos .prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #storefront #categorias .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #storefront section.block { padding: 54px 0; }
}

/* Phones: compact, fluid and intentionally dense. */
@media (max-width: 768px) {
  #storefront .wrap { width: min(100% - 24px, 680px); }
  #storefront .headbar { height: 58px; gap: 8px; padding-inline: 10px; }
  #storefront .brand { font-size: clamp(17px, 5vw, 20px); }
  #storefront .headactions { gap: 6px; }
  #storefront .headactions .btn {
    min-height: 38px;
    padding: 8px 11px;
    border-radius: 10px;
    font-size: 11px;
  }

  #storefront .orbit-hero {
    padding: 26px 0 42px;
  }
  #storefront .orbit-shell {
    width: min(100% - 20px, 560px);
    padding: 0;
  }
  #storefront .orbit-copy { max-width: 100%; }
  #storefront .orbit-copy h1 {
    font-size: clamp(32px, 9.5vw, 48px);
    letter-spacing: -2px;
    max-width: 430px;
  }
  #storefront .orbit-copy p { max-width: 390px; }
  #storefront .orbit-stage {
    width: min(330px, 82vw);
    margin-top: 0;
    margin-bottom: -10px;
  }

  #storefront > .stats {
    width: min(100% - 24px, 680px);
    padding: 10px 0 30px;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 7px;
  }
  #storefront > .stats .stat {
    padding: 12px 9px;
    text-align: center;
  }
  #storefront > .stats .stat b { font-size: 18px; }
  #storefront > .stats .stat span { font-size: 7.5px; }

  #storefront section.block { padding: 38px 0; }
  #storefront .eyebrow { margin-bottom: 8px; }
  #storefront .blocktitle {
    font-size: clamp(25px, 7.8vw, 34px);
    margin-bottom: 8px;
  }
  #storefront .blocksub {
    font-size: 11.5px;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  #storefront #beneficios .premium-benefits {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
  }
  #storefront .premium-benefits .benefit {
    min-height: 0;
    padding: 14px 12px;
  }
  #storefront .premium-benefits .premium-icon { font-size: 24px; margin-bottom: 11px; }
  #storefront .premium-benefits h3 { font-size: 12px; }
  #storefront .premium-benefits p { font-size: 9.5px; line-height: 1.45; }

  /* Categories become compact 2-column modules. */
  #storefront #categorias .cat-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
  }
  #storefront #categorias .cat-chip {
    min-height: 62px;
    padding: 7px 9px;
    border-radius: 13px;
    font-size: clamp(11px, 3.1vw, 14px);
  }
  #storefront #categorias .cat-chip-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  /* Featured products: two columns drastically reduce scroll and image work. */
  #storefront #productos .prod-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: clamp(7px, 2.2vw, 11px);
  }
  #storefront #productos .m-card { border-radius: 13px; }
  #storefront #productos .m-card-media { aspect-ratio: 1 / 1; }
  #storefront #productos .m-card-body { padding: 8px; }
  #storefront #productos .m-card-seller { font-size: 8px; margin-bottom: 4px; }
  #storefront #productos .m-card-title {
    min-height: 31px;
    font-size: clamp(10px, 2.9vw, 12px);
    line-height: 1.28;
  }
  #storefront #productos .m-card-rating { font-size: 8.5px; gap: 2px; }
  #storefront #productos .m-card-rating .review-link { font-size: 8px !important; }
  #storefront #productos .m-card-price-row { min-height: 34px; padding-top: 6px; margin-bottom: 6px; }
  #storefront #productos .m-price { font-size: clamp(14px, 4vw, 17px); }
  #storefront #productos .m-old-price { font-size: 7.5px; }
  #storefront #productos .m-stock { font-size: 7.5px; }
  #storefront #productos .m-card-actions .btn {
    min-height: 34px;
    padding: 6px;
    border-radius: 8px;
    font-size: 9.5px;
  }
  #storefront #productos .fav-btn { width: 29px; height: 29px; top: 6px; right: 6px; }
  #storefront #productos .m-badge { top: 6px; left: 6px; font-size: 7px; padding: 3px 5px; }

  /* Filters: collapsed by default, never creates a giant blank block. */
  #storefront #productos .catalog-toolbar {
    padding: 8px;
    margin-bottom: 14px;
    border-radius: 13px;
  }
  #storefront #productos .toolbar-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 7px;
  }
  #storefront #productos .toolbar-filters select,
  #storefront #productos .toolbar-filters input {
    min-width: 0;
    width: 100%;
    height: 38px;
    font-size: 10px;
  }

  .public-vip-strip {
    width: min(100% - 24px, 680px);
    margin: 14px auto 34px;
    padding: 18px 15px;
    min-height: 0;
    border-radius: 16px;
  }
}

@media (max-width: 420px) {
  #storefront .headbar { padding-inline: 7px; }
  #storefront .brand { font-size: 17px; }
  #storefront .headactions .btn { padding-inline: 9px; font-size: 10px; }
  #storefront .orbit-hero { padding-top: 22px; }
  #storefront .orbit-stage { width: min(285px, 78vw); }
  #storefront > .stats { grid-template-columns: 1fr 1fr 1fr; }
  #storefront > .stats .stat { padding: 10px 6px; }
  #storefront > .stats .stat b { font-size: 16px; }
  #storefront > .stats .stat span { font-size: 6.8px; }
  #storefront #categorias .cat-chip { min-height: 57px; }
  #storefront #categorias .cat-chip-icon { width: 30px; height: 30px; flex-basis: 30px; }
}

@media (max-width: 359px) {
  #storefront .wrap { width: calc(100% - 16px); }
  #storefront .headbar { gap: 5px; }
  #storefront .brand { font-size: 16px; }
  #storefront .headactions { gap: 4px; }
  #storefront .headactions .btn { min-height: 34px; padding: 7px; font-size: 9px; }
  #storefront .orbit-copy h1 { font-size: 30px; letter-spacing: -1.6px; }
  #storefront .orbit-copy p { font-size: 11px; }
  #storefront .orbit-stage { width: 245px; }
  #storefront #productos .prod-grid { gap: 6px; }
  #storefront #productos .m-card-body { padding: 7px; }
  #storefront #productos .m-card-title { font-size: 9.5px; }
  #storefront #productos .m-card-rating { font-size: 7.5px; }
  #storefront #productos .m-price { font-size: 13px; }
  #storefront #productos .m-card-actions .btn { font-size: 8.5px; min-height: 31px; }
}

/* Data saver / low-power devices: keep the same design, less motion/paint. */
@media (prefers-reduced-data: reduce), (prefers-reduced-motion: reduce) {
  #storefront .orbit-stars,
  #storefront .orbit-grid,
  #storefront .orbit-aura,
  #storefront .orbit-ring,
  #storefront .orbit-node,
  #storefront .orbit-planet,
  #storefront #afiliados::before,
  #storefront #afiliados::after {
    animation: none !important;
  }
}



/* =========================================================
   WORMSHOP V5 — PERFORMANCE / DENSITY / MOBILE POLISH
   Capa no destructiva: no cambia IDs, endpoints ni contratos JS.
   ========================================================= */
.ws-catalog-sentinel{grid-column:1/-1;width:1px;height:1px;overflow:hidden;pointer-events:none}
.prod-grid .m-card{
  content-visibility:auto;
  contain-intrinsic-size: 0 520px;
}
.prod-grid .m-card-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (min-width: 1200px){
  .prod-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
}
@media (min-width: 900px) and (max-width:1199px){
  .prod-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (min-width: 600px) and (max-width:899px){
  .prod-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:599px){
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .prod-grid .m-card{min-width:0;border-radius:14px;}
  .prod-grid .m-card-media{aspect-ratio:1/1;}
  .prod-grid .m-card-body{padding:9px;}
  .prod-grid .m-card-title{font-size:12px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .prod-grid .m-card-rating{font-size:9.5px;gap:2px;}
  .prod-grid .m-card-price-row{gap:4px;align-items:flex-end;}
  .prod-grid .m-price{font-size:18px;}
  .prod-grid .m-stock{font-size:9px;white-space:nowrap;}
  .prod-grid .m-card-actions .btn{min-height:38px;font-size:11px;padding:8px 7px;}
}
@media (max-width:380px){
  .prod-grid{gap:8px;}
  .prod-grid .m-card-body{padding:8px;}
  .prod-grid .m-card-seller{font-size:9px;}
  .prod-grid .m-card-title{font-size:11px;}
  .prod-grid .m-price{font-size:16px;}
  .prod-grid .m-card-actions .btn{min-height:36px;font-size:10px;}
}
@media (prefers-reduced-data: reduce){
  .prod-grid .m-card-media img{content-visibility:auto;}
}
@media (hover:none),(pointer:coarse){
  .prod-grid .m-card:hover{transform:none!important;}
}


/* ============================================================
   FASE 6 — UX interactiva: feedback visual ligero
   Sin filtros, blur ni animaciones infinitas.
   ============================================================ */

/* Títulos de producto: feedback de lectura sin mover el layout. */
.m-card-title{
  position:relative;
  transition:color .18s ease;
}
.m-card-title::after{
  content:"";
  display:block;
  width:0;
  height:1px;
  margin-top:3px;
  background:var(--m-brand);
  transition:width .22s ease;
}
.m-card:hover .m-card-title,
.m-card-title:focus-visible{
  color:var(--m-brand);
}
.m-card:hover .m-card-title::after,
.m-card-title:focus-visible::after{
  width:32px;
}

/* Precio: pequeño feedback al interactuar con la tarjeta. */
.m-card:hover .m-price{
  text-shadow:0 0 14px rgba(168, 85, 247,.18);
}

/* Seller: interacción textual sin desplazamiento. */
.m-card-seller{
  transition:color .18s ease;
}
.m-card:hover .m-card-seller{
  color:var(--m-text);
}

/* Categorías: estado activo más claro y micro-feedback. */
.cat-chip{
  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}
.cat-chip:hover{
  transform:translateY(-1px);
}
.cat-chip.active{
  box-shadow:inset 0 0 0 1px rgba(var(--ws-brand-rgb),.14),
             0 4px 14px rgba(var(--ws-brand-rgb),.08);
}
.cat-chip:active{
  transform:translateY(0) scale(.985);
}

/* Botones: respuesta táctil consistente y contenida. */
.m-card-actions .btn,
.m-buy-btn,
.btn-brand,
.btn-primary{
  -webkit-tap-highlight-color:transparent;
}
.m-card-actions .btn:hover,
.m-buy-btn:hover,
.btn-brand:hover,
.btn-primary:hover{
  box-shadow:0 7px 18px rgba(var(--ws-brand-rgb),.12);
}

/* Enlaces de texto: underline animado sin alterar el flujo. */
a:not(.btn):not(.cat-chip):not(.m-card):not(.nav-link){
  text-decoration-color:transparent;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:
    color .18s ease,
    text-decoration-color .18s ease;
}
a:not(.btn):not(.cat-chip):not(.m-card):not(.nav-link):hover{
  text-decoration-color:currentColor;
}

/* Focus visible uniforme para navegación por teclado. */
:where(button,input,select,textarea,a):focus-visible{
  outline:2px solid var(--m-brand);
  outline-offset:2px;
}
:where(button,input,select,textarea,a):focus:not(:focus-visible){
  outline:none;
}

/* El movimiento UX se desactiva por completo si el usuario lo pide. */
@media (prefers-reduced-motion:reduce){
  .m-card-title,
  .m-card-title::after,
  .m-card-seller,
  .cat-chip,
  .m-card-actions .btn,
  .m-buy-btn,
  .btn-brand,
  .btn-primary,
  a:not(.btn):not(.cat-chip):not(.m-card):not(.nav-link){
    transition:none !important;
  }
  .m-card:hover .m-card-title::after{
    width:0;
  }
}

/* Accesibilidad táctil mobile: no altera el flujo de escritorio. */
@media (max-width: 768px){
  #storefront .m-card-actions .btn,
  #storefront .m-buy-btn,
  #storefront .btn-brand,
  #storefront .btn-primary,
  #storefront .headactions .btn,
  #storefront .round-btn{
    min-height:40px;
    touch-action:manipulation;
  }
  #storefront .round-btn{
    width:40px !important;
    height:40px !important;
  }
}

/* Rendimiento táctil en TODO el sitio (no solo #storefront): sin esto,
   algunos navegadores móviles esperan ~300ms tras el toque por si viene
   un segundo toque (zoom), lo que se siente como que el botón "no
   respondió". Solo cambia el comportamiento del toque, no el tamaño,
   color ni posición de nada — cero impacto visual. */
.btn, .round-btn, .icon-btn, .dash-nav-item, .fav-btn, .cat-chip,
.m-buy-btn, .msg-back-btn, .seller-card, .m-card, a.btn-google {
  touch-action: manipulation;
}

/* Botón "Avísame cuando haya stock" (30 ago 2026, pedido explícito:
   "color rojo intenso led" → luego "mas rojo y gordo asi como el de
   conprar") — se monta SOBRE .btn-primary (el mismo rojo sólido en
   degradé #a855f7→#b00d22 que ya usa "Comprar", ver ws-neon.css), esto
   solo le agrega el resplandor pulsante encima para que se sienta
   urgente. Nunca redefine fondo/color/borde — así queda IDÉNTICO de
   grosor y color al botón de comprar, no una versión aparte más chica. */
@keyframes ws-led-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(168, 85, 247,.22), inset 0 1px 0 rgba(255,255,255,.16), 0 0 8px rgba(168, 85, 247,.3); }
  50% { box-shadow: 0 6px 18px rgba(168, 85, 247,.22), inset 0 1px 0 rgba(255,255,255,.16), 0 0 26px rgba(168, 85, 247,.75), 0 0 8px rgba(168, 85, 247,.5); }
}
.ws-led-red { animation: ws-led-pulse 1.8s ease-in-out infinite; }

/* Pill "N esperando stock" del panel vendedor (mismo pedido, luego "mar
   gordito aslo, un poco" el 31 ago 2026) — acá SÍ se redefine el fondo,
   porque un status-pill normal de este sitio es siempre un tinte suave
   (nunca sólido) y "gordo" pedía romper esa regla a propósito para que
   resalte de verdad; el tamaño/padding también se agrandó un poco sobre
   el .status-pill base (10px/2px 6px) para que no se vea flaca al lado
   del botón "Comprar". Nota: este selector vive también en
   wormshop-seller.html (inline) porque el panel vendedor no carga este
   archivo — mantener ambos sincronizados. */
.status-pill.ws-led-red {
  background: linear-gradient(135deg, #a855f7 0%, #b00d22 100%) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 800;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 7px;
}

/* Avatar 3D con movimiento + banner con brillo tipo tarjeta (31 ago
   2026, pedido explícito: "avatares 3d con movimiento, igual en
   banner") — el avatar (#sp-avatar-frame en el modal de perfil
   público) rota siguiendo el mouse (perspective + rotateX/rotateY)
   con un brillo radial que sigue el cursor; el banner (#sp-banner) es
   más plano (fondo con texto encima) así que solo tiene el brillo,
   sin rotación, para no desalinear nada. Mismo par de clases en
   wormshop-seller.html (lado vendedor, su propia vista previa). */
.ws-tilt-avatar { transition: transform .12s ease-out; will-change: transform; }
.ws-tilt-glare { position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .18s ease; pointer-events: none; mix-blend-mode: overlay; z-index: 3; }
.ws-shine-glare { position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease; pointer-events: none; z-index: 1; }

/* Rediseño OLED del modal de perfil público (31 ago 2026, pedido
   explícito: "metele mas UX UI, diseño color OLED") — negro puro
   (mejor en pantallas OLED, se siente más premium) con acentos del
   rojo de marca en vez del gris oscuro genérico que usa cualquier
   otro modal del sitio. Escrito con selector con ID a propósito para
   que gane sin necesitar !important — solo afecta a ESTE modal, el
   resto del sitio sigue igual. */
#seller-profile-overlay .modal {
  background: #000;
  border: 1px solid rgba(168, 85, 247, 0.18);
  box-shadow: 0 0 60px rgba(168, 85, 247, 0.08), 0 25px 60px rgba(0, 0, 0, 0.6);
}
#sp-banner { background: #000; }
#sp-avatar-frame { box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.14), 0 0 24px rgba(168, 85, 247, 0.16); }

/* Tarjeta de campos con iconos de color (31 ago 2026, pedido explícito:
   "los diseños bonitos q isiste en el perfil seller de conectar sus
   redes... quiero q lo apliques cuando alguien ve el perfil de un
   seller") — misma receta que .ws-config-card en wormshop-seller.html
   (nació ahí con la renovación, después "Redes y contacto"), copiada acá
   porque el panel del vendedor y esta página no comparten hoja de estilos.
   Ver wsInfoFieldHTML() en main-seller-profile.js. */
.ws-config-card { position: relative; isolation: isolate; margin: 4px 0 4px; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(59,130,246,.08)); border: 1px solid rgba(139,92,246,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.28); }
.ws-config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ws-config-field { display: flex; align-items: flex-start; gap: 11px; }
.ws-config-field-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.ws-config-field-icon .a-icon { width: 18px; height: 18px; display: flex; }
.ws-config-field-body { flex: 1; min-width: 0; }
.ws-config-field-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--m-muted); margin-bottom: 3px; }
.ws-config-field-value { display: block; font-size: 13.5px; font-weight: 700; color: var(--m-text); line-height: 1.35; word-break: break-word; }
@media (max-width: 480px) { .ws-config-grid { grid-template-columns: 1fr; } }

/* Base real de .chip (31 ago 2026) — encontrado mientras revisaba esta
   misma tarjeta: .chip nunca tuvo una regla base en ninguna hoja de
   estilos (solo existía .dhero-chips .chip, para el banner de
   bienvenida). Cada uso fuera de ahí (especialidades acá mismo, el
   rango del vendedor, las mini-stats del vendedor en la ficha de
   producto) mandaba background/border-color por style inline pero sin
   padding/border-radius/border-width propios — se veía texto plano
   sin ninguna píldora detrás. Esta regla les da la forma; los colores
   por instancia (inline) se mantienen igual que siempre. */
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--m-surface-2); border: 1px solid var(--m-border); color: var(--m-text); }

/* Etiqueta de oferta flash con temporizador real (31 ago 2026,
   reactivada — ver routes/products.js y main-products-core.js
   wsFlashRemainingLabel/wsUpdateFlashCountdowns). Abajo-izquierda para
   nunca chocar con .m-badge (arriba-izquierda) ni .fav-btn
   (arriba-derecha) si un producto tiene ambas cosas a la vez. */
.ws-flash-badge {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; padding: 5px 9px;
  border-radius: var(--m-radius-sm); text-transform: uppercase; letter-spacing: 0.5px;
  background-image: linear-gradient(135deg, #ff2fd0, #b0209a);
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35);
  box-shadow: 0 3px 10px rgba(0,0,0,.45), 0 0 16px -4px #ff2fd0, inset 0 0 0 1px rgba(255,255,255,.18);
  animation: ws-flash-badge-pulse 1.8s ease-in-out infinite;
}
.ws-flash-badge .a-icon { width: 10px; height: 10px; }
@keyframes ws-flash-badge-pulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,.45), 0 0 16px -4px #ff2fd0, inset 0 0 0 1px rgba(255,255,255,.18); }
  50% { box-shadow: 0 3px 10px rgba(0,0,0,.45), 0 0 24px -2px #ff2fd0, inset 0 0 0 1px rgba(255,255,255,.28); }
}

/* BANNER DE COMUNIDAD — barra angosta clicable, arriba del catálogo. */
.community-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 900px; margin: 0 auto 18px; padding: 12px 20px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(37,211,102,0.16), rgba(34,158,217,0.16));
  border: 1px solid rgba(37,211,102,0.3); cursor: pointer; transition: .15s ease;
  font-size: 14px; font-weight: 700; color: var(--m-text);
}
.community-banner:hover { transform: translateY(-1px); border-color: rgba(37,211,102,0.55); }
.community-banner-icon { font-size: 17px; }
.community-banner-arrow { opacity: 0.6; transition: transform .15s ease; }
.community-banner:hover .community-banner-arrow { transform: translateX(3px); opacity: 1; }
@media (max-width: 600px) { .community-banner { font-size: 13px; padding: 10px 16px; margin-bottom: 14px; } }

/* POPUP DE COMUNIDAD — mismo patrón visual que site-announcement, clases
   propias para no interferir con Admin > Anuncios del sitio. */
.community-popup-overlay {
  position: fixed; inset: 0; background: rgba(3,3,5,0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; cursor: pointer;
}
.community-popup-card {
  --ann-c: 37,211,102;
  background: linear-gradient(180deg, rgba(22,22,28,0.92), rgba(14,14,18,0.96));
  border: 1px solid rgba(var(--ann-c), 0.28); border-radius: 26px;
  max-width: 440px; width: 100%; max-height: 88vh; overflow-y: auto; overflow-x: hidden;
  padding: 40px 32px 32px; text-align: center; cursor: default; position: relative;
  animation: announcement-pop 0.32s cubic-bezier(.2,.9,.25,1.15);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 30px 70px rgba(0,0,0,0.55), 0 0 60px -18px rgba(var(--ann-c),0.5);
}
.community-popup-card h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 14px; color: #fff; }
.community-popup-card p { color: var(--m-muted); font-size: 14.5px; line-height: 1.7; margin-bottom: 22px; }
.community-popup-buttons { display: flex; flex-direction: column; gap: 10px; }
.community-popup-buttons a {
  display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  padding: 13px 20px; border-radius: 12px; font-weight: 700; font-size: 14.5px; color: #fff; transition: .15s ease;
}
.community-popup-buttons a:hover { transform: translateY(-1px); filter: brightness(1.1); }
.community-popup-buttons a.cp-whatsapp { background: #25D366; }
.community-popup-buttons a.cp-telegram { background: #229ED9; }

/* REDISEÑO SIDEBAR CLIENTE (pedido Liasnow, ítem 7) — más pulido visual:
   avatar con anillo/glow, badges de plan con más peso, ítems de nav con
   badge de ícono (mismo patrón .ws-config-card usado en el resto del
   sitio) y barra de acento en el item activo. Todo por especificidad,
   no se tocan las reglas base de arriba. */
.dash-user {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(var(--ws-brand-rgb), 0.18);
  transition: border-color .2s ease;
}
.dash-user:hover { border-color: rgba(var(--ws-brand-rgb), 0.35); }
.dash-user .avatar {
  box-shadow: 0 0 0 2px rgba(var(--ws-brand-rgb), 0.35), 0 4px 14px rgba(0,0,0,0.35);
}
.dash-user #dash-username { font-size: 14.5px; font-weight: 700; }
.dash-user #dash-useremail { opacity: 0.75; }

.plan-badge {
  padding: 3px 9px; border-radius: 999px; font-size: 9.5px; letter-spacing: 0.06em;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
}
.plan-badge.vip {
  background: linear-gradient(90deg, rgba(245,158,11,0.2), rgba(245,158,11,0.08));
  box-shadow: 0 0 14px -4px rgba(245,158,11,0.5);
}

.dash-nav-group + .dash-nav-group { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; }

.dash-nav-item {
  position: relative; padding-left: 10px; border-radius: 10px;
}
.dash-nav-item::before {
  content: ''; position: absolute; left: -6px; top: 50%; translate: 0 -50%;
  width: 3px; height: 0; border-radius: 3px; background: var(--m-brand); transition: height .18s ease;
}
.dash-nav-item.active::before { height: 60%; }
.dash-nav-item .a-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,0.04); transition: background .15s ease, color .15s ease;
}
.dash-nav-item:hover .a-icon { background: rgba(255,255,255,0.08); }
.dash-nav-item.active .a-icon {
  background: rgba(var(--ws-brand-rgb), 0.16); color: var(--m-brand);
  box-shadow: 0 0 12px -3px rgba(var(--ws-brand-rgb), 0.6);
}

.dash-promo {
  position: relative; overflow: hidden;
}
.dash-promo::after {
  content: ''; position: absolute; top: -40%; left: -20%; width: 60%; height: 180%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: rotate(12deg); animation: dash-promo-shine 5s ease-in-out infinite;
}
@keyframes dash-promo-shine {
  0%, 100% { transform: translateX(-40px) rotate(12deg); opacity: 0; }
  50% { transform: translateX(220px) rotate(12deg); opacity: 1; }
}
.dash-promo-icon {
  background: linear-gradient(135deg, rgba(var(--ws-brand-rgb),0.35), rgba(var(--ws-brand-strong-rgb),0.15));
  box-shadow: 0 0 16px -4px rgba(var(--ws-brand-rgb), 0.6);
}

/* ===== AUDIT ESTÉTICO 16 sep 2026: clases usadas en JS/HTML sin CSS + icono VIP ===== */
.vip-badge .a-icon{ width:26px; height:26px; color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

.ws-pill{ font-size:10px; padding:2px 7px; border-radius:20px; border:1px solid; display:inline-flex; align-items:center; gap:3px; }
.ws-pill-off{ background:rgba(239,68,68,0.15); color:#ef4444; border-color:#ef444455; }
.ws-pill-on{ background:rgba(16,185,129,0.15); color:#10b981; border-color:#10b98155; }

.ws-result-row{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:10px; margin-bottom:8px; border:1px solid var(--m-border); background:var(--m-surface-2); font-size:13px; line-height:1.5; }
.ws-result-ico{ flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; }
.ws-result-row.is-ok{ border-color:#10b98155; }
.ws-result-row.is-ok .ws-result-ico{ background:rgba(16,185,129,0.18); }
.ws-result-row.is-partial{ border-color:#f59e0b55; }
.ws-result-row.is-partial .ws-result-ico{ background:rgba(245,158,11,0.18); }
.ws-result-row.is-fail{ border-color:#ef444455; }
.ws-result-row.is-fail .ws-result-ico{ background:rgba(239,68,68,0.18); }

/* ===== Sidebar: color por categoría en los íconos del menú (16 sep 2026) =====
   Antes todos los íconos del sidebar eran gris neutro y solo se coloreaban
   en rojo al estar activos/hover — la idea es dar vida sin romper el
   estado activo (rojo de marca) ni el hover existente. */
.dash-nav-item:not(.active) .a-icon[data-icon="help"] { background: rgba(100,116,139,0.16); color: #94a3b8; }
.dash-nav-item:not(.active) .a-icon[data-icon="gamepad"] { background: rgba(139,92,246,0.16); color: #a78bfa; box-shadow: 0 0 12px -4px rgba(139,92,246,0.5); }
.dash-nav-item:not(.active) .a-icon[data-icon="trending"] { background: rgba(16,185,129,0.16); color: #34d399; box-shadow: 0 0 12px -4px rgba(16,185,129,0.5); }
.dash-nav-item:not(.active) .a-icon[data-icon="package"] { background: rgba(245,158,11,0.16); color: #fbbf24; box-shadow: 0 0 12px -4px rgba(245,158,11,0.5); }
.dash-nav-item:not(.active) .a-icon[data-icon="clock"] { background: rgba(6,182,212,0.16); color: #22d3ee; box-shadow: 0 0 12px -4px rgba(6,182,212,0.5); }
.dash-nav-item:not(.active) .a-icon[data-icon="dollar"] { background: rgba(34,197,94,0.18); color: #4ade80; box-shadow: 0 0 12px -4px rgba(34,197,94,0.55); }
.dash-nav-item:not(.active) .a-icon[data-icon="link"] { background: rgba(59,130,246,0.16); color: #60a5fa; box-shadow: 0 0 12px -4px rgba(59,130,246,0.5); }
.dash-nav-item:not(.active) .a-icon[data-icon="support"] { background: rgba(20,184,166,0.16); color: #2dd4bf; box-shadow: 0 0 12px -4px rgba(20,184,166,0.5); }
.dash-nav-item:not(.active) .a-icon[data-icon="crown"] { background: rgba(234,179,8,0.18); color: #facc15; box-shadow: 0 0 12px -4px rgba(234,179,8,0.55); }