/* =====================================================
   ws-premium.css — capa visual "premium neón" de las tarjetas
   -----------------------------------------------------
   Se carga SIEMPRE al final, después del resto de hojas, y solo
   añade estilo: no cambia estructura, ni clases existentes, ni
   comportamiento. Todo cuelga de .ws-card-pro (clase nueva que
   productCardHTML() agrega junto a .m-card), así que si esta hoja
   no se carga, la tarjeta sigue viéndose exactamente como antes.

   Incluye:
   - Realce oscuro/neón de la tarjeta (borde vivo, glow al pasar).
   - Cinta ♻️ RENOVABLE.
   - Píldoras 🟢 Proveedor en línea / 🔒 Proveedor no disponible.
   - Estado bloqueado cuando el proveedor está fuera de línea.
   - Ajustes de nitidez para pantallas 2K/4K.
   ===================================================== */

/* Variables locales — derivadas de los tokens que ya usa la tienda,
   con respaldo por si alguna no existiera en algún tema. */
.ws-card-pro {
  --ws-neon: var(--m-brand, #7c5cff);
  --ws-neon-2: #22d3ee;
  --ws-renew: #34d399;
  --ws-off: #f43f5e;
}

/* ---------- Tarjeta ---------- */
.ws-card-pro {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--ws-neon) 22%, transparent);
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--ws-neon) 12%, transparent) 0%, transparent 60%),
    var(--m-surface, #0f1117);
  box-shadow:
    0 1px 0 color-mix(in srgb, #ffffff 6%, transparent) inset,
    0 10px 30px -18px rgba(0, 0, 0, 0.9);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Filo de luz superior: un solo pixel de neón, nada estridente. */
.ws-card-pro::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ws-neon), var(--ws-neon-2), transparent);
  opacity: .55;
  pointer-events: none;
  z-index: 3;
}

@media (hover: hover) {
  .ws-card-pro:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--ws-neon) 55%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--ws-neon) 30%, transparent),
      0 18px 44px -20px color-mix(in srgb, var(--ws-neon) 60%, transparent),
      0 12px 34px -22px rgba(0, 0, 0, 0.95);
  }
  .ws-card-pro:hover::before { opacity: 1; }
}

/* Retroalimentación táctil al presionar (touch/click) — un settle
   rápido hacia adentro, no un "salto", para que se sienta sólida en
   móvil donde no existe :hover. */
.ws-card-pro:active {
  transform: scale(0.985);
  transition: transform .08s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ws-card-pro,
  .ws-card-pro:hover,
  .ws-card-pro:active { transform: none; transition: none; }
}

.ws-card-pro .m-card-media {
  border-radius: 15px 15px 0 0;
  overflow: hidden;
}

.ws-card-pro .m-price {
  text-shadow: 0 0 18px color-mix(in srgb, var(--ws-neon) 45%, transparent);
}

/* ---------- Cinta ♻️ RENOVABLE ---------- */
.ws-ribbon-renew {
  position: absolute;
  top: 10px;
  left: -34px;
  z-index: 4;
  transform: rotate(-45deg);
  width: 132px;
  text-align: center;
  padding: 4px 0;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #04150e;
  background: linear-gradient(135deg, var(--ws-renew), #a7f3d0);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--ws-renew) 90%, transparent);
  pointer-events: none;
  animation: wsRenewGlow 2.6s ease-in-out infinite;
}

@keyframes wsRenewGlow {
  0%, 100% { box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--ws-renew) 90%, transparent); }
  50% { box-shadow: 0 6px 22px -4px color-mix(in srgb, var(--ws-renew) 95%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .ws-ribbon-renew { animation: none; }
}

/* ---------- Cinta ⚡ AUTOMÁTICO (esquina superior derecha) ---------- */
.ws-ribbon-auto {
  position: absolute;
  top: 10px;
  right: -34px;
  z-index: 4;
  transform: rotate(45deg);
  width: 132px;
  text-align: center;
  padding: 4px 0;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #1a1300;
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
  box-shadow: 0 6px 18px -8px rgba(245, 158, 11, .8);
  pointer-events: none;
}

/* Botón Comprar con color propio (disponible) */
.ws-cta-buy {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  border-color: transparent !important;
  color: #fff !important;
}

@media (max-width: 380px) {
  .ws-ribbon-auto { font-size: 8.5px; width: 116px; right: -30px; }
}

.ws-card-pro.is-renewable {
  border-color: color-mix(in srgb, var(--ws-renew) 30%, transparent);
}

/* La cinta diagonal barre la misma esquina que .m-badge (bestseller,
   destacado, etc.) — si un producto renovable también tiene badge, se
   empujan uno contra otro. Bajamos el badge fuera del área que barre
   la cinta en vez de competir por el mismo rincón. */
.ws-card-pro.is-renewable .m-badge {
  top: auto;
  bottom: 12px;
}

/* ---------- Píldoras de estado ---------- */
.ws-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.5;
}

.ws-pill-on {
  color: #10b981;
  background: rgba(16, 185, 129, .13);
  border: 1px solid rgba(16, 185, 129, .38);
  box-shadow: 0 0 14px -6px rgba(16, 185, 129, .9);
}

.ws-pill-off {
  color: #fb7185;
  background: rgba(244, 63, 94, .13);
  border: 1px solid rgba(244, 63, 94, .38);
}

.ws-pill-renew {
  color: #34d399;
  background: rgba(52, 211, 153, .12);
  border: 1px solid rgba(52, 211, 153, .35);
}

/* ---------- Proveedor fuera de línea ---------- */
.ws-card-pro.is-provider-off {
  border-color: color-mix(in srgb, var(--ws-off) 32%, transparent);
}

.ws-card-pro.is-provider-off .m-card-media > img {
  filter: grayscale(.75) brightness(.6);
}

.ws-card-blocked {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 14, .62);
  backdrop-filter: blur(1.5px);
  pointer-events: none;
}

.ws-card-blocked-in {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 90%;
  text-align: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #ffe4e6;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(244, 63, 94, .2);
  border: 1px solid rgba(244, 63, 94, .5);
}

.ws-card-blocked-in svg,
.ws-card-blocked-in .a-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.ws-btn-blocked,
.ws-btn-blocked:disabled {
  opacity: 1;
  cursor: not-allowed;
  color: #fb7185;
  background: rgba(244, 63, 94, .1);
  border: 1px solid rgba(244, 63, 94, .4);
}

/* ---------- Interruptor "Proveedor en línea" (panel Seller) ---------- */
.ws-online-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  min-height: 60px;
  padding: 10px 13px;
  border-radius: 12px;
  border: 1px solid rgba(48, 113, 87, .42);
  background: linear-gradient(90deg, rgba(1, 24, 17, .96), rgba(0, 20, 14, .88));
  box-shadow: inset 0 0 0 1px rgba(30, 168, 113, .04), 0 0 24px rgba(0, 214, 137, .06);
}
.ws-online-card.is-off {
  border-color: rgba(244, 63, 94, .38);
  background: linear-gradient(90deg, rgba(30, 7, 16, .96), rgba(20, 4, 11, .9));
  box-shadow: inset 0 0 0 1px rgba(244, 63, 94, .04), 0 0 24px rgba(244, 63, 94, .06);
}
.ws-online-card.is-unknown {
  border-color: rgba(245, 158, 11, .45);
  background: linear-gradient(90deg, rgba(31, 21, 3, .96), rgba(20, 13, 2, .9));
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .04), 0 0 24px rgba(245, 158, 11, .06);
}
.ws-online-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #37de9f;
  background: radial-gradient(circle at 35% 30%, rgba(31, 240, 164, .28), rgba(7, 92, 63, .5));
  box-shadow: 0 0 20px rgba(0, 214, 137, .22), inset 0 0 0 1px rgba(65, 255, 179, .12);
}
.ws-online-signal { width: 20px; height: 20px; display: block; }
.ws-online-card.is-off .ws-online-icon { color: #fb7185; background: radial-gradient(circle at 35% 30%, rgba(244, 63, 94, .26), rgba(104, 18, 39, .48)); box-shadow: 0 0 20px rgba(244, 63, 94, .18), inset 0 0 0 1px rgba(255, 115, 137, .12); }
.ws-online-card.is-unknown .ws-online-icon { color: #fbbf24; background: radial-gradient(circle at 35% 30%, rgba(245, 158, 11, .26), rgba(110, 64, 5, .48)); box-shadow: 0 0 20px rgba(245, 158, 11, .18), inset 0 0 0 1px rgba(255, 196, 80, .12); }
.ws-online-card.is-unknown .ws-online-title { color: #fbbf24; }
.ws-online-card.is-unknown .ws-switch { opacity: .55; cursor: not-allowed; }
.ws-online-retry { margin-top: 4px; color: #fbbf24; border-color: rgba(245, 158, 11, .42); }
.ws-online-card .ws-online-text { min-width: 0; flex: 1 1 auto; }
.ws-online-card .ws-online-title {
  color: #80f1bd;
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.ws-online-card .ws-online-sub {
  color: rgba(165, 204, 189, .68);
  font-size: 9.5px;
  line-height: 1.25;
  opacity: 1;
  margin-top: 3px;
}
.ws-online-card.is-off .ws-online-title { color: #fb7185; }
.ws-online-card.is-off .ws-online-sub { color: rgba(251, 113, 133, .62); }
.ws-switch {
  position: relative;
  width: 50px;
  height: 26px;
  flex: 0 0 50px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ws-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d4d9d7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.ws-switch[aria-checked="true"] {
  background: #0bd98d;
  border-color: #1af2a3;
  box-shadow: 0 0 18px rgba(31, 240, 164, .42), inset 0 0 10px rgba(255, 255, 255, .13);
}
.ws-switch[aria-checked="true"]::after {
  transform: translateX(22px);
  background: #f6fffb;
  box-shadow: 0 0 7px rgba(255, 255, 255, .75), 0 1px 3px rgba(0, 0, 0, .35);
}
.ws-switch:disabled { opacity: .6; cursor: wait; }
@media (max-width: 480px) {
  .ws-online-card { gap: 9px; padding-inline: 10px; }
  .ws-online-icon { width: 32px; height: 32px; }
  .ws-online-signal { width: 18px; height: 18px; }
  .ws-online-card .ws-online-title { font-size: 10.5px; }
  .ws-online-card .ws-online-sub { font-size: 9px; }
  .ws-switch { transform: scale(.92); transform-origin: right center; }
}

/* ---------- Pantallas grandes: más aire y bordes más finos ---------- */
@media (min-width: 1800px) {
  .ws-card-pro { border-radius: 20px; }
  .ws-card-pro .m-card-media { border-radius: 19px 19px 0 0; }
  .ws-ribbon-renew { font-size: 11px; width: 150px; left: -38px; }
}

/* ---------- Barra de progreso del carril de categorías (rediseño) ----------
   Antes era una línea gris plana y estática. Se mantiene fuera de la
   familia roja (ese color queda exclusivo del chip activo, ver
   ws-polish.css) para no repetir la confusión ya resuelta antes, pero
   ahora tiene forma de píldora, un degradé propio y un brillo que
   recorre la barra MUY lento (4.5s) — un detalle vivo sin ser
   distractor. prefers-reduced-motion lo desactiva por accesibilidad. */
.ws-cat-rail-progress {
  height: 5px !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05) !important;
  overflow: hidden;
}
.ws-cat-rail-progress-fill {
  border-radius: 999px;
  background: linear-gradient(90deg, #6d5bff, #00d4ff) !important;
  background-size: 200% 100%;
  box-shadow: 0 0 10px -1px rgba(109, 91, 255, 0.55) !important;
  animation: wsRailShimmer 4.5s ease-in-out infinite;
}
.ws-cat-rail-progress:hover .ws-cat-rail-progress-fill {
  box-shadow: 0 0 14px -1px rgba(0, 212, 255, 0.65);
}
@keyframes wsRailShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-cat-rail-progress-fill { animation: none; }
}

/* ---------- Perfil de Afiliado (tarjeta de código) ---------- */
.ws-aff-hero {
  position: relative;
  overflow: hidden;
}
.ws-aff-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--m-brand, #a855f7), transparent);
  opacity: .5;
}
.ws-aff-hero-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--m-muted);
  font-weight: 600;
}
.ws-aff-hero-label .a-icon { width: 15px; height: 15px; }
.ws-aff-code {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--m-brand);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--m-brand, #a855f7) 10%, transparent), transparent 60%),
    rgba(var(--ws-brand-rgb), 0.05);
  border: 1px solid rgba(var(--ws-brand-rgb), 0.28);
  border-radius: 14px;
  padding: 18px 22px;
  display: block;
  margin: 14px 0 20px;
  text-shadow: 0 0 22px rgba(var(--ws-brand-rgb), 0.35);
  word-break: break-word;
}
.ws-aff-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ws-aff-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ws-aff-stat {
  flex: 1 1 120px;
  background: var(--m-surface-2);
  border: 1px solid var(--m-border);
  border-radius: 14px;
  padding: 16px;
  transition: border-color .2s ease, transform .2s ease;
}
.ws-aff-stat:hover { border-color: rgba(var(--ws-brand-rgb), .3); transform: translateY(-2px); }
.ws-aff-stat-icon { width: 16px; height: 16px; color: var(--m-muted); display: block; margin-bottom: 8px; }
.ws-aff-stat b { display: block; font-size: 22px; font-family: var(--m-font-mono); font-weight: 800; }
.ws-aff-stat-label { font-size: 11.5px; color: var(--m-muted); }
.ws-aff-stat-highlight {
  border-color: rgba(16, 185, 129, .3);
  background: linear-gradient(160deg, rgba(16, 185, 129, .08), var(--m-surface-2) 60%);
}
.ws-aff-stat-highlight .ws-aff-stat-icon { color: #10b981; }
.ws-aff-stat-highlight b { color: #10b981; }
.ws-aff-rate {
  font-size: 12.5px;
  color: var(--m-muted);
  line-height: 1.6;
}
.ws-aff-rate b { color: var(--m-text); }
@media (prefers-reduced-motion: reduce) {
  .ws-aff-stat, .ws-aff-stat:hover { transform: none; transition: none; }
}

/* ---------- Mensajería en móvil/tablet: lista O hilo a pantalla
   completa, nunca los dos apretados ----------
   Antes había DOS comportamientos móviles compitiendo, ninguno bueno:
   (a) ws-storefront.css achicaba .msg-list-pane hasta 52-80px según el
       ancho y ocultaba nombre/preview — quedaba una columna de círculos
       sin forma de saber con quién era cada conversación.
   (b) ws-archive.css (mayor especificidad: .ws-archive-dashboard
       .ws-archive-messages-layout .msg-list-pane) convertía el layout
       en un grid de 2 filas —lista arriba en ~28vh, hilo abajo— con
       ambos visibles pero muy apretados.
   Selectores calcados de ambos archivos a propósito, y este archivo se
   carga AL FINAL del bundle — con eso gana por especificidad+orden sin
   tener que tocar ninguno de los dos. En desktop no cambia nada. */
.msg-back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--m-border);
  background: transparent;
  color: var(--m-text);
  flex-shrink: 0;
  cursor: pointer;
}
.msg-back-btn:hover { background: var(--m-surface-hover); }
.msg-back-btn .a-icon { width: 16px; height: 16px; }
.msg-thread-head { display: flex; align-items: center; gap: 10px; }
@media (max-width: 1024px) {
  .msg-layout,
  .ws-archive-dashboard .ws-archive-messages-layout {
    display: flex;
  }
  .msg-list-pane,
  .ws-archive-dashboard .ws-archive-messages-layout .msg-list-pane {
    width: 100%;
    min-height: 0;
  }
  .msg-list-name, .msg-list-preview { display: block; }
  .msg-thread-pane,
  .ws-archive-dashboard .ws-archive-messages-layout .msg-thread-pane {
    display: none;
    min-height: 0;
  }
  .msg-layout.msg-thread-active .msg-list-pane,
  .ws-archive-dashboard .ws-archive-messages-layout.msg-thread-active .msg-list-pane {
    display: none;
  }
  .msg-layout.msg-thread-active .msg-thread-pane,
  .ws-archive-dashboard .ws-archive-messages-layout.msg-thread-active .msg-thread-pane {
    display: flex;
    width: 100%;
  }
  .msg-back-btn { display: inline-flex; }
}

/* ---------- Buscador de categorías ---------- */
.ws-cat-search-wrap {
  position: relative;
  max-width: 420px;
  margin: 4px 0 18px;
}
.ws-cat-search-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--m-muted);
  pointer-events: none;
}
.ws-cat-search-icon svg { width: 100%; height: 100%; }
.ws-cat-search-input {
  width: 100%;
  background: var(--m-surface-2, #16181f);
  border: 1px solid var(--m-border);
  border-radius: 999px;
  padding: 10px 16px 10px 38px;
  color: var(--m-text);
  font-size: 13.5px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ws-cat-search-input::placeholder { color: var(--m-muted); }
.ws-cat-search-input:focus {
  border-color: color-mix(in srgb, var(--ws-neon, #6d5bff) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-neon, #6d5bff) 18%, transparent);
}

/* ---------- Servicios Destacados: barra "Populares" + efecto hover ----------
   Eyebrow con estilo de pill (como en la referencia) en vez de texto
   suelto, y un barrido de luz diagonal al pasar el mouse sobre cada
   card destacada — sutil, una sola pasada, no un loop. */
.ws-featured-kicker {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ws-neon, #a855f7) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ws-neon, #a855f7) 30%, transparent);
  color: var(--ws-neon, #a855f7);
  font-weight: 700;
  letter-spacing: .04em;
}
#destacados .ws-card-pro { position: relative; }
#destacados .ws-card-pro::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.10) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: -120% -120%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
#destacados .ws-card-pro:hover::after {
  opacity: 1;
  animation: wsFeaturedSweep 1.1s ease forwards;
}
@keyframes wsFeaturedSweep {
  from { background-position: -120% -120%; }
  to { background-position: 120% 120%; }
}
@media (prefers-reduced-motion: reduce) {
  #destacados .ws-card-pro:hover::after { animation: none; opacity: 0; }
}