/* DarkShoppe Promo 2026 — capa de estilo atractiva (no rompe el CSS existente) */

:root {
  --accent: #18d6a3;
  --accent-2: #0aa2c9;
  --ink: #05231c;
  --card: #ffffff;
  --line: #e3eaf2;
  --muted: #5b6b7f;
}

/* ── Fondo y tipografía general ── */
body { background: linear-gradient(180deg,#f7fafc 0%,#eef4f9 100%); }

/* ── Botones ── */
.ms-btn,
.ms-action-stack .ms-btn,
a.ms-btn {
  border-radius: 14px;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease;
  border: none;
}
.ms-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(10,162,201,.25); }
.ms-btn--primary,
.ms-btn--primary:hover {
  background: linear-gradient(135deg,#18d6a3 0%,#0aa2c9 100%);
  color: #05231c;
  box-shadow: 0 8px 20px rgba(24,214,163,.35);
}
.ms-btn--soft { background: #eef7fb; color: #0a5d75; }
.ms-btn--ghost { border: 1px solid var(--line); color: var(--muted); background: #fff; }

/* ── Cards del marketplace ── */
.ms-card {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(15,23,38,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  background: var(--card);
}
.ms-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15,23,38,.12); }
.ms-card__title { font-weight: 800; color: #0f1726; }
.ms-price { color: #0aa2c9; font-size: 1.25rem; }
.ms-category-pill {
  background: linear-gradient(135deg,#18d6a3,#0aa2c9);
  color: #05231c;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 12px;
}

/* ── Detalle de producto ── */
.ms-detail-card { border-radius: 20px; box-shadow: 0 10px 30px rgba(15,23,38,.08); }
.ms-price-panel {
  background: linear-gradient(135deg,#05231c 0%,#0a3d33 100%);
  color: #fff;
  border-radius: 16px;
  padding: 14px 18px;
}
.ms-price-panel small { color: #9fd8c7; }
.ms-price-panel strong { color: #18d6a3; font-size: 1.9rem; }

/* ── Contenido enriquecido de descripciones ── */
.ms-richtext h3 {
  color: #0f1726;
  border-left: 4px solid var(--accent);
  padding-left: 10px;
  margin: 26px 0 12px;
}
.ds-features {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap: 10px;
  margin: 14px 0;
}
.ds-feature {
  background: #f2f8f6;
  border: 1px solid #d8ece6;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14.5px;
}
.ds-steps { counter-reset: paso; margin: 12px 0; }
.ds-step {
  counter-increment: paso;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px 10px 46px;
  position: relative;
  margin-bottom: 8px;
}
.ds-step::before {
  content: counter(paso);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg,#18d6a3,#0aa2c9);
  color: #05231c;
  font-weight: 800;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-cta {
  margin: 22px 0 8px;
  background: linear-gradient(135deg,#05231c,#0a3d33);
  color: #eafaf5;
  border-radius: 18px;
  padding: 20px;
  text-align: center;
}
.ds-cta strong { color: #18d6a3; font-size: 1.15rem; }
.ds-badge {
  display: inline-block;
  background: #eef7fb;
  border: 1px solid #cde9f5;
  color: #0a5d75;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12.5px;
  font-weight: 700;
  margin: 2px 4px 2px 0;
}

/* ── Paneles owner / registrosprogramas ── */
.rp-panel, .rp-card, .ms-panel,
table.rp-table, .ds-table {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 6px 18px rgba(15,23,38,.05);
}
table { border-collapse: separate; border-spacing: 0; }
table th {
  background: #f2f7fa;
  color: #0f1726;
  font-weight: 700;
  text-align: left;
  padding: 10px 12px;
}
table td { padding: 10px 12px; border-top: 1px solid #edf2f7; }
.ms-hero {
  background: linear-gradient(135deg,#05231c 0%,#0a3d33 55%,#0aa2c9 160%);
  color: #eafaf5;
  border-radius: 20px;
  padding: 26px;
}
.ms-hero h1 { color: #fff; }
.ms-hero p { color: #b8d8cf; }
.ms-hero .ms-btn--primary { background: #18d6a3; }

/* Nav / header suave */
.ds-header, header.ms-topbar {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}


/* ── Fix: columna izquierda de anuncios como barra lateral real ── */
@media (min-width: 1381px) {
  .ds-page--marketplace.has-left.has-right { grid-template-columns: 250px minmax(0,1fr) 300px; }
  .ds-page--marketplace.has-left:not(.has-right) { grid-template-columns: 250px minmax(0,1fr); }
  .ds-page--marketplace .ds-left-column { grid-column: auto; order: 1; max-width: 250px; }
  .ds-page--marketplace .ds-main { order: 2; }
  .ds-page--marketplace .ds-right-column { order: 3; }
  .ds-left-column .ds-ad { padding: 14px; border-radius: 16px; }
  .ds-left-column .ds-ad h3 { font-size: 15px; }
  .ds-left-column .ds-ad p { font-size: 12px; overflow-wrap: anywhere; }
}