/* ============================================
   DICTADO — Práctica de comprensión oral
   ============================================ */

.dictation-header {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 2rem 0 1.5rem;
  margin-bottom: 2.5rem;
}
.dictation-title { font-size: clamp(1.5rem,3vw,2rem); margin:.5rem 0; }
.dictation-sub { color:var(--color-text-muted); font-size:.9375rem; line-height:1.6; max-width:520px; }

/* ── Selector de nivel ── */
.dictation-level-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.dictation-level-label { font-size:.875rem; font-weight:var(--weight-semi); color:var(--color-text-muted); }
.dictation-level-btns  { display:flex; gap:.4rem; flex-wrap:wrap; }
.d-level-btn {
  padding:.4rem 1rem;
  border-radius:var(--radius-full);
  border:1.5px solid var(--color-border);
  background:var(--color-surface);
  font-size:.8125rem;
  font-weight:var(--weight-semi);
  color:var(--color-text-muted);
  cursor:pointer;
  transition:all var(--transition);
}
.d-level-btn:hover { border-color:var(--color-primary); color:var(--color-primary); }
.d-level-btn.active { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }

/* ── Tarjeta de dictado ── */
.dictation-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  max-width: 680px;
  margin: 0 auto 2rem;
}
.dc-topic {
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-text-muted);
  margin-bottom:1.25rem;
}
.dc-counter {
  float:right;
  font-size:.8125rem;
  color:var(--color-text-light);
  font-weight:normal;
  letter-spacing:0;
  text-transform:none;
}

/* ── Zona de audio ── */
.dc-audio-zone {
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.25rem;
  background:var(--color-bg-alt);
  border-radius:var(--radius-lg);
  margin-bottom:1.5rem;
}
.dc-play-btn {
  width:3rem; height:3rem;
  border-radius:50%;
  background:var(--color-primary);
  color:#fff;
  border:none;
  font-size:1.2rem;
  cursor:pointer;
  flex-shrink:0;
  transition:background var(--transition);
  display:flex; align-items:center; justify-content:center;
}
.dc-play-btn:hover { background:var(--color-primary-dk); }
.dc-audio-hint { font-size:.875rem; color:var(--color-text-muted); line-height:1.5; }
.dc-speed-btns { display:flex; gap:.4rem; margin-top:.4rem; }
.dc-speed-btn {
  font-size:.75rem; padding:.2rem .6rem;
  border-radius:var(--radius-full);
  border:1px solid var(--color-border);
  background:none; cursor:pointer;
  color:var(--color-text-muted);
  transition:all var(--transition);
}
.dc-speed-btn.active, .dc-speed-btn:hover { background:var(--color-primary-lt); border-color:var(--color-primary); color:var(--color-primary); }

/* ── Zona de grabación ── */
.dc-record-zone { text-align:center; margin-bottom:1.5rem; }
.dc-record-btn {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.75rem 2rem;
  border-radius:var(--radius-full);
  border:2px solid var(--color-border);
  background:var(--color-surface);
  font-size:1rem;
  font-weight:var(--weight-semi);
  cursor:pointer;
  transition:all var(--transition);
  color:var(--color-text);
}
.dc-record-btn:hover { border-color:#ef4444; color:#ef4444; }
.dc-record-btn.recording {
  background:#fef2f2;
  border-color:#ef4444;
  color:#ef4444;
  animation:pulse-record 1s infinite;
}
@keyframes pulse-record {
  0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,.3); }
  50%      { box-shadow:0 0 0 8px rgba(239,68,68,0); }
}
.dc-record-hint { font-size:.8125rem; color:var(--color-text-muted); margin-top:.6rem; }

/* ── Resultado ── */
.dc-result { display:none; }
.dc-result.show { display:block; }
.dc-result-label {
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-text-muted);
  margin-bottom:.6rem;
}
.dc-transcript {
  font-size:1.0625rem;
  line-height:1.8;
  margin-bottom:1.25rem;
  padding:.875rem 1rem;
  background:var(--color-bg-alt);
  border-radius:var(--radius-md);
}
.dc-word-correct { color:#059669; font-weight:var(--weight-semi); }
.dc-word-wrong   { color:#ef4444; font-weight:var(--weight-semi); text-decoration:underline; }
.dc-word-missing { color:#f59e0b; font-style:italic; }

.dc-original {
  font-size:.9375rem;
  color:var(--color-text-muted);
  padding:.75rem 1rem;
  background:#f0fdf4;
  border-radius:var(--radius-md);
  border-left:3px solid #059669;
  margin-bottom:1.25rem;
  line-height:1.7;
}
.dc-score-row {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.25rem;
  flex-wrap:wrap;
}
.dc-score-badge {
  font-size:1.5rem;
  font-weight:700;
  padding:.4rem 1.25rem;
  border-radius:var(--radius-full);
}
.dc-score-great { background:#dcfce7; color:#166534; }
.dc-score-good  { background:#fef3c7; color:#92400e; }
.dc-score-retry { background:#fef2f2; color:#991b1b; }
.dc-score-msg   { font-size:.9375rem; color:var(--color-text-muted); }

/* ── Stats globales ── */
.dictation-stats {
  display:flex;
  gap:1.5rem;
  max-width:680px;
  margin:0 auto 2rem;
  flex-wrap:wrap;
}
.ds-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:.75rem 1.5rem;
  flex:1;
  min-width:100px;
}
.ds-num   { font-size:1.5rem; font-weight:700; color:var(--color-primary); line-height:1; }
.ds-label { font-size:.75rem; color:var(--color-text-muted); }

/* ── No soportado ── */
.dc-unsupported {
  text-align:center;
  max-width:480px;
  margin:4rem auto;
  padding:2rem;
  background:var(--color-bg-alt);
  border-radius:var(--radius-xl);
  border:1px solid var(--color-border);
}
.dc-unsupported h2 { font-size:1.25rem; margin-bottom:.75rem; }
.dc-unsupported p  { color:var(--color-text-muted); font-size:.9375rem; line-height:1.6; }