/* ══════════════════════════════════════════════════════════════════════
   FEATURE: score-ring.css
   Anillo de puntuación gamificado (conic-gradient SVG-less).
   Elementos: .score-ring, .score-ring::after, .score-ring-content,
   .score-ring-value, .score-ring-total.

   Usado por:
   - views/dashboard.html (#global-score-ring con --score-deg dinámico)
   - js/controllers/dashboard.js (línea 447: ring.style.setProperty)

   Variable CSS: --score-deg (set por JS, 0-360deg para el progress).

   Extraído de learning.css y responsive.css en Round 2.3.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Desktop (from learning.css 964-1004) ──────────────────────── */
/* Gamification Elements */
.score-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--violet) var(--score-deg, 0deg), var(--border-subtle) var(--score-deg, 0deg));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.score-ring::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: var(--bg-white);
  border-radius: 50%;
}

.score-ring-content {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.score-ring-value {
  font-size: 1.8rem;
  font-weight: var(--fw-extra);
  color: var(--violet);
}

.score-ring-total {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: var(--fw-bold);
}

/* ─── 2. Mobile @media (max-width: 768px) (from responsive.css 758-775) ─ */
@media (max-width: 768px) {
  /* ── Score Ring — Optimized ── */
  .score-ring {
    width: 120px !important;
    height: 120px !important;
    margin: 16px auto 24px auto !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.02) !important;
  }

  .score-ring::after {
    width: 96px !important;
    height: 96px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  }

  .score-ring-value {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
  }
}