/* ══════════════════════════════════════════════════════════════════════
   PAGE: coming-soon (placeholder para features no publicadas)
   Prefijo: .coming-soon-*

   Cards mostradas cuando un usuario navega a una feature que aún no
   está disponible (tienda, desafíos, ligas, etc.).

   Usado por: js/config/features.js (genera el HTML con clases
   .coming-soon-page, .coming-soon-card, .coming-soon-icon, etc.)

   Extraído de learning.css en Round 6.2.

   NOTA: Las clases relacionadas .sidebar-link--coming-soon,
   .drawer-link--coming-soon, .sidebar-coming-soon-badge,
   .learn-side-card--coming-soon NO se incluyen aquí — son badges
   en navigation/learn-side y se moverán con shell/sidebar en Round 7.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Coming Soon — Full Page ── */
.coming-soon-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 20px;
}

.coming-soon-card {
  text-align: center;
  max-width: 440px;
  padding: 48px 36px;
  background: var(--bg-white, #fff);
  border-radius: 50%;
  border: 1px solid var(--border-subtle, #e5e7eb);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
}

.coming-soon-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(108, 43, 255, 0.1), rgba(108, 43, 255, 0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.coming-soon-icon {
  font-size: 40px;
  color: var(--violet, #6C2BFF);
}

.coming-soon-title {
  font-size: 1.5rem;
  font-weight: var(--fw-extra, 800);
  color: var(--text-primary, #1a1a2e);
  margin-bottom: 8px;
}

.coming-soon-desc {
  font-size: 0.95rem;
  color: var(--text-secondary, #6b7280);
  line-height: 1.5;
  margin-bottom: 24px;
}

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #F0EBFF, #E8E0FF);
  color: var(--violet, #6C2BFF);
  font-weight: var(--fw-bold, 700);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.coming-soon-sub {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 24px;
  line-height: 1.4;
}

.coming-soon-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--violet, #6C2BFF);
  color: white;
  font-weight: var(--fw-semi, 600);
  font-size: 0.9rem;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.coming-soon-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(108, 43, 255, 0.3);
}