/* =====================================================
   VISTES DE LLIÇÓ I PRÀCTICA — stub Fase 1
   ===================================================== */

/* Text de pràctica */
.practice-text {
  font-family: var(--font-mono);
  font-size: var(--practice-font-size, 1.4rem);
  line-height: 2;
  letter-spacing: .02em;
  word-break: break-all;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
}

.practice-char {
  position: relative;
  display: inline;
}

.practice-char.done    { color: var(--success); }
/* I-05: error char usa variable de color per funcionar bé en mode fosc */
.practice-char.error   { color: var(--error); background: rgba(239,68,68,.15); border-radius: 2px; }
.practice-char.current { background: var(--primary); color: #fff; border-radius: 2px;
                          animation: blink .9s step-end infinite; }
.practice-char.pending { color: var(--text-light); }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* I-04: respectar prefers-reduced-motion — substituir l'animació per un contorn fix */
@media (prefers-reduced-motion: reduce) {
  .practice-char.current {
    animation: none;
    box-shadow: 0 0 0 2px var(--primary);
  }
}

/* Barra de stats en temps real */
.practice-stats {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
  line-height: 1;
}

.stat-label {
  font-size: .7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: .2rem;
}

/* Barra de progrés de la lliçó */
.lesson-progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.lesson-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width .3s ease;
}

/* Llista de lliçons */
.lesson-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.lesson-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.lesson-item:hover:not(.locked) {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.lesson-item.locked {
  opacity: .5;
  cursor: not-allowed;
}

.lesson-item.completed .lesson-num {
  background: var(--success);
  color: #fff;
}

.lesson-item.active .lesson-num {
  background: var(--primary);
  color: #fff;
}

.lesson-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}

.lesson-info { flex: 1; }
.lesson-title { font-weight: 600; font-size: .95rem; }
.lesson-desc  { font-size: .8rem; color: var(--text-muted); margin-top: .15rem; }

.lesson-badge {
  font-size: .75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: .2rem .65rem;
  color: var(--text-muted);
}