/* Ajustes de inicio: banner de comunidad en verde, Servicios Destacados con hover morado
   (solo PC con mouse) y diseño fluido de 50px a 6000px de ancho. */

:root {
  --wsf-purple: #a855f7;
  --wsf-purple-strong: #c084fc;
  --wsf-green: #25d366;
}

/* Banner "Únete a la comunidad": verde siempre, sin rojo en hover */
.community-banner {
  background: linear-gradient(90deg, #25d366, #16a34a);
  border: 1px solid rgba(187, 247, 208, 0.45);
  color: #04140a;
  font-weight: 800;
  box-shadow: 0 10px 28px -12px rgba(37, 211, 102, 0.75);
  width: min(900px, calc(100% - 32px));
  box-sizing: border-box;
}
.community-banner-icon,
.community-banner-arrow { color: #04140a; }
.community-banner:hover { transform: translateY(-1px); filter: brightness(1.06); border-color: rgba(187, 247, 208, 0.7); }

/* Servicios Destacados: contenedor fluido, tope en pantallas muy anchas */
#destacados > .wrap {
  max-width: min(1600px, 100%);
  padding-left: clamp(16px, 3vw, 56px);
  padding-right: clamp(16px, 3vw, 56px);
  box-sizing: border-box;
}
#destacados .blocktitle { font-size: clamp(26px, 3.4vw, 56px); line-height: 1.1; }
#destacados .blocksub { font-size: clamp(14px, 1.2vw, 20px); }

#featured-grid.ws-archive-product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(130px, 11vw, 180px)), 1fr)) !important;
  gap: clamp(8px, 1vw, 16px) !important;
}

#featured-grid .m-card {
  border: 1px solid rgba(168, 85, 247, 0.22) !important;
  border-radius: clamp(12px, 1.2vw, 20px) !important;
  background: linear-gradient(180deg, #14101f, #0b0912) !important;
  box-shadow: none !important;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
/* Anatomía fija: todas las tarjetas tienen la misma altura interna y el precio + botón
   quedan anclados abajo, así nunca se ven unas más arriba que otras. */
#featured-grid .m-card { display: flex !important; flex-direction: column; }
/* Imagen de altura fija: todas las tarjetas miden igual aunque la imagen original varíe */
#featured-grid .m-card-media { height: clamp(96px, 9vw, 128px) !important; aspect-ratio: auto !important; flex: 0 0 auto; }
#featured-grid .m-card-media img { height: 100%; width: 100%; object-fit: cover; }
#featured-grid .m-card-actions .btn { height: 36px; font-size: 12px; padding: 0 10px; box-sizing: border-box; }
#featured-grid .m-card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
#featured-grid .m-card-title {
  font-size: clamp(13px, 1.1vw, 20px);
  line-height: 1.25;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 200ms ease;
}
#featured-grid .m-card-price-row { font-size: clamp(14px, 1.2vw, 22px); margin-top: 10px !important; min-height: 78px; }
#featured-grid .m-card-actions { margin-top: auto !important; padding-top: 10px; }

/* Hover morado: solo con mouse fino (PC). En celular y tablet no se activa. */
@media (hover: hover) and (pointer: fine) {
  /* Sin desplazamiento en hover: solo color y sombra, así la línea de tarjetas no se mueve */
  #featured-grid .m-card:hover {
    transform: none !important;
    border-color: var(--wsf-purple) !important;
    background: linear-gradient(180deg, #1c1433, #0d0a18) !important;
    box-shadow: 0 16px 36px -16px rgba(168, 85, 247, 0.7) !important;
  }
  #featured-grid .m-card:hover .m-card-title { color: var(--wsf-purple-strong); }
  #featured-grid .m-card:hover .m-card-price-row { color: var(--wsf-purple-strong); }
  #featured-grid .m-card:hover .m-card-media img { opacity: 1; transform: scale(1.04); }
}

/* Categorías (planeta): sombra siempre cian, nunca roja por el hover global de botones */
.ws-planet-tile,
.ws-planet-tile:hover,
.ws-planet-tile:focus,
.ws-planet-tile:active {
  box-shadow: none !important;
  background: transparent !important;
  filter: none !important;
}
.ws-planet-ring,
.ws-planet-tile:hover .ws-planet-ring,
.ws-planet-tile:focus-visible .ws-planet-ring {
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.4) !important;
}
.ws-planet-tile:hover .ws-planet-ring,
.ws-planet-tile:focus-visible .ws-planet-ring {
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.65) !important;
}

/* Pantallas muy angostas (celular chico) */
@media (max-width: 360px) {
  #featured-grid.ws-archive-product-grid { gap: 8px !important; }
  .community-banner { font-size: 12px; padding: 9px 12px; }
}

/* ---- Tarjetas iguales: cada fila del cuerpo tiene altura fija ----
   Precio, botón y título quedan en la misma línea en todas las tarjetas. */
#featured-grid .m-card-body {
  display: grid !important;
  grid-template-rows: 20px 58px 40px 18px 84px auto;
  row-gap: 8px;
  align-content: start;
}
#featured-grid .m-card-body > * { min-height: 0; overflow: hidden; }
#featured-grid .m-card-seller { height: 20px; }
#featured-grid .m-card-body > div:nth-child(2) { height: 58px; }
#featured-grid .m-card-price-row { margin-top: 0 !important; }
#featured-grid .m-card-actions { margin-top: 0 !important; }

/* ---- Texto sin rojo: títulos, precios y botones en blanco / morado ---- */
#featured-grid .m-card,
#featured-grid .m-card * {
  text-shadow: none !important;
}
#featured-grid .m-card-title,
#featured-grid .m-card-title * { color: #f5f3ff !important; }
#featured-grid .m-card-price-row,
#featured-grid .m-card-price-row * { color: #f5f3ff !important; }
#featured-grid .m-card-price-row .m-old-price,
#featured-grid .m-card-price-row .m-old-price * { color: #94a3b8 !important; }
#featured-grid .m-card-actions .btn {
  color: #e9d5ff !important;
  background: rgba(168, 85, 247, 0.12) !important;
  border: 1px solid rgba(168, 85, 247, 0.5) !important;
}
#featured-grid .m-card-actions .btn * { color: #e9d5ff !important; }
#featured-grid .m-card-rating,
#featured-grid .m-card-rating * { color: #c4b5fd !important; }
#featured-grid .review-link { color: #c4b5fd !important; text-decoration-color: #c4b5fd !important; }

/* ---- Paleta: color de marca morado (antes rojo). Se carga al final y sobreescribe las variables. ---- */
:root {
  --ws-brand: #a855f7;
  --ws-brand-strong: #c084fc;
  --ws-brand-rgb: 168, 85, 247;
  --ws-brand-strong-rgb: 192, 132, 252;
  --m-brand: #a855f7;
  --m-brand-glow: rgba(168, 85, 247, 0.45);
}

/* ---- Chip de confianza del vendedor (ventas y reseña, solo si hay datos) ---- */
.ws-trust-chip {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  color: #e9d5ff;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Botón principal (Registrarse, Comprar, etc.) y planeta del hero: colores que venían fijos en rojo */
.btn-primary {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 22px -8px rgba(168, 85, 247, 0.6);
}
.ws-archive-hero-stage { filter: hue-rotate(-75deg); }

/* Botón de marca (Registrarse del header) en morado */
.btn-brand {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 22px -8px rgba(168, 85, 247, 0.6) !important;
}
.btn-brand:hover:not(:disabled) { filter: brightness(1.08); }

/* Detalle de producto: nombre en morado (antes venía azul/rojo del vendedor) */
#pd-name, #pd-name * { color: #f5f3ff !important; text-shadow: none !important; }

/* ---- Dashboard: acentos que venían en rojo de error, ahora morado ---- */
.dash-nav-item.active,
.dash-user,
.ws-archive-user-card,
.plan-badge,
.dash-promo,
.dash-mobile-menu-btn,
.dash-mobile-close {
  border-color: rgba(168, 85, 247, 0.4) !important;
}
.dash-nav-item.active { color: #e9d5ff !important; background: rgba(168, 85, 247, 0.1) !important; }
.avatar, .ws-archive-user-avatar { color: #e9d5ff !important; border-color: rgba(168, 85, 247, 0.5) !important; background: rgba(168, 85, 247, 0.12) !important; }
.plan-badge { color: #e9d5ff !important; background: rgba(168, 85, 247, 0.12) !important; }
.notif-dot { background: #a855f7 !important; }
button[onclick="logoutUser()"] { color: #e9d5ff !important; border-color: rgba(168, 85, 247, 0.35) !important; }

/* ---- Instrucciones del método de pago: sin líneas vacías de más ---- */
div[style*="pre-wrap"] { white-space: pre-line !important; }

/* ---- Tarjetas: entrega en una sola línea (máximo 2 etiquetas) ---- */
#featured-grid .m-card-body > div:nth-child(2) {
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  gap: 6px;
  align-items: center;
}
#featured-grid .m-card-body > div:nth-child(2) > :nth-child(n+3) { display: none !important; }

/* ---- Auditoría de anchos: barra superior y avisos flotantes sin salirse de la pantalla ---- */
.dash-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 480px) {
  .dash-topbar-actions .btn { padding: 4px 8px; font-size: 12px; }
  .dash-topbar-actions .ws-pill { font-size: 10px; }
}
@media (max-width: 260px) {
  .dash-topbar-actions { flex-direction: column; align-items: flex-end; }
}
.ws-archive-toast-surface { max-width: calc(100vw - 24px) !important; box-sizing: border-box; }

/* Chips de estado: se ajustan al ancho de la pantalla en vez de salirse (200px-260px) */
.ws-pill { max-width: 100%; white-space: normal; box-sizing: border-box; }
@media (max-width: 300px) {
  .dash-topbar, .dash-topbar > *, .dash-topbar-actions { flex-wrap: wrap !important; min-width: 0; }
  .ws-pill { font-size: 10px; padding: 2px 6px; }
}

/* Header sin sesión: Entrar / Registrarse se ajustan en pantallas muy angostas (no se salen) */
.ws-archive-header-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 100%; }
@media (max-width: 300px) {
  .ws-archive-header-actions .btn { padding: 4px 8px; font-size: 11px; }
  .ws-archive-header-actions { gap: 4px; }
}

/* Barra del header en pantallas angostas: logo y botones en dos filas si no caben */
@media (max-width: 420px) {
  .ws-archive-header-inner { flex-wrap: wrap; row-gap: 8px; }
  .ws-archive-header-actions { margin-left: auto; }
}

/* ---- Categorías dentro del login: mismo diseño que el inicio sin sesión (círculos cian),
   estático, sin movimiento ni transiciones ---- */
.ws-archive-category-rail .cat-chip {
  flex: 0 0 auto;
  width: 96px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: none !important;
  transform: none !important;
  animation: none !important;
  cursor: pointer;
}
.ws-archive-category-rail .cat-chip::after { display: none !important; }
.ws-archive-category-rail .cat-chip-icon {
  width: 78px !important;
  height: 78px !important;
  border-radius: 50% !important;
  padding: 3px;
  display: grid !important;
  place-items: center;
  background: linear-gradient(135deg, #67e8f9, #0ea5e9 45%, #1e3a8a) !important;
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.35) !important;
  border: 0 !important;
  flex: 0 0 auto;
}
.ws-archive-category-rail .cat-chip-icon img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  object-fit: cover;
  background: #0b1220;
}
.ws-archive-category-rail .cat-chip > span:last-child {
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e0f2fe;
}
.ws-archive-category-rail .cat-chip.active .cat-chip-icon,
.ws-archive-category-rail .cat-chip:focus-visible .cat-chip-icon {
  box-shadow: 0 0 0 3px #22d3ee, 0 0 26px rgba(34, 211, 238, 0.6) !important;
}
@media (hover: hover) and (pointer: fine) {
  .ws-archive-category-rail .cat-chip:hover .cat-chip-icon { box-shadow: 0 0 30px rgba(34, 211, 238, 0.6) !important; }
}
@media (max-width: 520px) {
  .ws-archive-category-rail .cat-chip { width: 80px; }
  .ws-archive-category-rail .cat-chip-icon { width: 66px !important; height: 66px !important; }
  .ws-archive-category-rail .cat-chip > span:last-child { font-size: 11px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ws-archive-category-rail .cat-chip { animation: none !important; }
}

/* ---- Botones de compra premium: una luz cruza el botón y se va, cada pocos segundos ---- */
.btn-primary,
.ws-cta-buy,
.m-buy-btn,
#pd-buy-btn,
#buy-confirm-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after,
.ws-cta-buy::after,
.m-buy-btn::after,
#pd-buy-btn::after,
#buy-confirm-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -90%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 2;
  animation: wsShinePass 4.2s ease-in-out infinite;
}
@keyframes wsShinePass {
  0%, 45% { left: -90%; }
  75%, 100% { left: 140%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .ws-cta-buy::after, .m-buy-btn::after, #pd-buy-btn::after, #buy-confirm-btn::after { animation: none; display: none; }
}

/* Brillo de compra más visible: una luz blanca cruza el botón de izquierda a derecha cada pocos segundos */
.btn-primary::after,
.ws-cta-buy::after,
.m-buy-btn::after,
#pd-buy-btn::after,
#buy-confirm-btn::after,
.m-card-actions .btn::after {
  width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%) !important;
}
.m-card-actions .btn { position: relative; overflow: hidden; isolation: isolate; }
.m-card-actions .btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -90%;
  height: 100%;
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 2;
  animation: wsShinePass 3.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .m-card-actions .btn::after { animation: none; display: none; } }

/* ---- Mis cuentas del comprador: tarjetas de compra más claras y bonitas ---- */
#dash-cuentas .ws-archive-cuentas-section,
#dash-cuentas { color: var(--m-text, #f5f3ff); }
#cuentas-list { display: grid; gap: 14px; }
#cuentas-list > * {
  position: relative;
  background: linear-gradient(180deg, #161027 0%, #0d0a18 100%);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px -18px rgba(124, 58, 237, 0.55);
  transition: border-color .2s ease, box-shadow .2s ease;
  content-visibility: auto;
  contain-intrinsic-size: 260px;
}
#cuentas-list > *:hover { border-color: rgba(168, 85, 247, 0.55); box-shadow: 0 14px 36px -16px rgba(168, 85, 247, 0.6); }
#cuentas-list .btn { min-height: 40px; border-radius: 12px; }
#cuentas-list .btn-primary, #cuentas-list .btn-brand {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  border-color: transparent !important;
}
#cuentas-list .btn-small { font-size: 12.5px; }
#cuentas-list [class*="cred"] {
  background: rgba(168, 85, 247, 0.07) !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
  border-radius: 12px !important;
}
@media (max-width: 480px) {
  #cuentas-list > * { padding: 14px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { #cuentas-list > * { transition: none; } }

/* Fluidez general: listas y tarjetas no pintan lo que está fuera de pantalla */
#featured-grid .m-card, .ws-archive-product-grid .m-card { content-visibility: auto; contain-intrinsic-size: 320px; }