/* ============================================================
   APEX LEARNING — dashboard, Learning Path y reproductor de lección.

   Va DESPUÉS de news.css y ANTES de max.css (ver <link> en
   index.html): un feature nuevo más, no una capa de tema. Ningún
   color nuevo — reutiliza exactamente la paleta de base.css
   (--surface/--border/--text/--muted/--blue/--green/--amber), la
   tipografía y los radios/sombras ya definidos. Nada de esto necesita
   `html[data-tier="max"]`: APEX Learning es igual en Free, Pro y Max.
   ============================================================ */

.lrn-dashboard{display:flex;flex-direction:column;gap:var(--space-5);}

/* ---------- Activación opt-in ---------- */
.lrn-optin{
  max-width:440px;margin:var(--space-7) auto;text-align:center;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:var(--space-8) var(--space-7);box-shadow:var(--shadow-sm);
}
.lrn-optin-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto var(--space-5);
  border-radius:50%;background:var(--blue-soft);color:var(--blue);}
.lrn-optin-title{margin:0 0 var(--space-3);font-family:var(--font-display);font-size:var(--text-h2-size);font-weight:var(--text-h2-weight);letter-spacing:var(--text-h2-ls);}
.lrn-optin-sub{margin:0 0 var(--space-7);color:var(--muted);font-size:var(--text-body-size);line-height:var(--text-body-lh);}
.lrn-optin-actions{display:flex;flex-direction:column;gap:var(--space-3);}
.lrn-optin-actions .btn{width:100%;margin-top:0;}
@media(max-width:520px){.lrn-optin{padding:var(--space-6) var(--space-5);margin:var(--space-5) auto;}}

/* ---------- Hero: nivel + progreso general ---------- */
.lrn-hero{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--space-7);box-shadow:var(--shadow-sm);}
.lrn-hero-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;}
.lrn-hero-level-lbl{display:block;font-family:var(--font-mono);font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);}
.lrn-hero-level-val{display:block;font-family:var(--font-display);font-size:var(--text-h2-size);font-weight:var(--text-h2-weight);letter-spacing:var(--text-h2-ls);margin-top:2px;}
.lrn-hero-next{font-size:var(--text-caption-size);color:var(--muted);}
.lrn-hero-next.is-max{color:var(--green);}
.lrn-hero-bar{height:8px;border-radius:var(--r-pill);background:var(--surface3);overflow:hidden;margin-top:var(--space-5);}
.lrn-hero-bar-fill{height:100%;border-radius:var(--r-pill);background:var(--blue);transition:width .7s var(--ease-out);}
.lrn-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border-soft);}
.lrn-hero-stat{display:flex;flex-direction:column;gap:2px;}
.lrn-hero-stat .n{font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);}
.lrn-hero-stat .l{font-size:var(--text-caption-size);color:var(--muted);}

/* ---------- Recomendación: "Tu próximo objetivo" ---------- */
.lrn-reco{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--space-6) var(--space-7);box-shadow:var(--shadow-sm);}
.lrn-reco.is-done{color:var(--muted);}
.lrn-reco-eyebrow{display:block;font-family:var(--font-mono);font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:var(--space-2);}
.lrn-reco-context{color:var(--muted);font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh);margin:0 0 var(--space-4);}
.lrn-reco-lesson h3{margin:0 0 2px;font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);}
.lrn-reco-meta{font-size:var(--text-caption-size);color:var(--muted2);}
.lrn-reco .btn{max-width:280px;margin-top:var(--space-5);}

/* ---------- Conceptos a reforzar ---------- */
.lrn-weak{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--space-6) var(--space-7);box-shadow:var(--shadow-sm);}
.lrn-weak-eyebrow{display:block;font-family:var(--font-mono);font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:var(--space-4);}
.lrn-weak-list{display:flex;flex-direction:column;gap:1px;background:var(--border-soft);border-radius:var(--r-md);overflow:hidden;}
.lrn-weak-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);background:var(--surface);border:none;padding:var(--space-4);text-align:left;cursor:pointer;font-family:var(--font-body);transition:background var(--dur-fast) var(--ease-out);}
.lrn-weak-item:hover{background:var(--surface2);}
.lrn-weak-title{font-size:var(--text-body-sm-size);color:var(--text);}
.lrn-weak-pct{font-size:var(--text-caption-size);font-weight:600;white-space:nowrap;}
.lrn-tone-good{color:var(--green);}
.lrn-tone-warn{color:var(--amber);}
.lrn-tone-muted{color:var(--muted2);}

/* ---------- Learning Path ---------- */
.lrn-path-heading{font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);margin:var(--space-3) 0 0;}
.lrn-path{display:flex;flex-direction:column;}
.lrn-stage-connector{width:1.5px;height:var(--space-6);background:var(--border);margin:0 0 0 calc(var(--space-7) + 15px);}
.lrn-stage{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;}
.lrn-stage.is-locked{opacity:.55;}
.lrn-stage-head{display:flex;align-items:baseline;gap:var(--space-3);padding:var(--space-5) var(--space-7);border-bottom:1px solid var(--border-soft);flex-wrap:wrap;}
.lrn-stage-num{font-family:var(--font-mono);font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);}
.lrn-stage-title{flex:1;margin:0;font-family:var(--font-display);font-size:var(--text-body-size);font-weight:650;min-width:160px;}
.lrn-stage-count{font-size:var(--text-caption-size);color:var(--muted2);font-variant-numeric:tabular-nums;}
.lrn-stage-lessons{display:flex;flex-direction:column;}
.lrn-path-lesson{
  display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;
  background:transparent;border:none;border-top:1px solid var(--border-soft);padding:var(--space-4) var(--space-7);
  font-family:var(--font-body);cursor:pointer;transition:background var(--dur-fast) var(--ease-out);
}
.lrn-stage-lessons .lrn-path-lesson:first-child{border-top:none;}
.lrn-path-lesson:not(:disabled):hover{background:var(--surface2);}
.lrn-path-lesson:disabled{cursor:default;}
.lrn-path-mark{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:var(--muted2);}
.lrn-path-completed .lrn-path-mark{color:var(--green);}
.lrn-path-locked .lrn-path-mark{color:var(--muted2);opacity:.7;}
.lrn-dot-open{width:7px;height:7px;border-radius:50%;background:var(--muted2);}
.lrn-path-current .lrn-dot-open,.lrn-path-available.is-current .lrn-dot-open{background:var(--blue);}
.lrn-path-title{flex:1;font-size:var(--text-body-sm-size);color:var(--text);}
.lrn-path-locked .lrn-path-title{color:var(--muted);}
.lrn-path-completed .lrn-path-title{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--border);text-decoration-thickness:1px;}
.lrn-path-tag{font-size:var(--text-caption-size);font-weight:600;color:var(--blue);background:var(--blue-soft);border:1px solid var(--blue-soft-border);border-radius:var(--r-pill);padding:2px 9px;flex-shrink:0;}

@media(max-width:640px){
  .lrn-hero-stats{grid-template-columns:1fr;gap:var(--space-3);}
  .lrn-stage-head,.lrn-path-lesson{padding-left:var(--space-5);padding-right:var(--space-5);}
}

/* ============================================================
   REPRODUCTOR DE LECCIÓN
   ============================================================ */
.lrn-lesson{max-width:640px;}
.lrn-back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-size:var(--text-body-sm-size);font-family:var(--font-body);cursor:pointer;padding:0;margin-bottom:var(--space-5);transition:color var(--dur-fast) var(--ease-out);}
.lrn-back:hover{color:var(--text);}

.lrn-lesson-head{margin-bottom:var(--space-6);}
.lrn-eyebrow{display:block;font-family:var(--font-mono);font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:var(--space-2);}
.lrn-lesson-title{margin:0 0 var(--space-2);font-family:var(--font-display);font-size:var(--text-h1-size);font-weight:var(--text-h1-weight);letter-spacing:var(--text-h1-ls);}
.lrn-lesson-meta{color:var(--muted);font-size:var(--text-body-sm-size);}
.lrn-dot{margin:0 6px;color:var(--muted2);}

.lrn-steps{display:flex;gap:2px;background:var(--surface2);border-radius:var(--r-pill);padding:3px;margin-bottom:var(--space-7);}
.lrn-step{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;background:none;border:none;border-radius:var(--r-pill);padding:9px var(--space-3);font-family:var(--font-body);font-size:var(--text-caption-size);font-weight:600;color:var(--muted2);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
.lrn-step-num{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--surface3);font-size:11px;flex-shrink:0;}
.lrn-step-current{background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs);}
.lrn-step-current .lrn-step-num{background:var(--blue);color:#fff;}
.lrn-step-done{color:var(--text);}
.lrn-step-done .lrn-step-num{background:var(--green-soft);color:var(--green);}
.lrn-step-done .lrn-step-num svg{width:10px;height:10px;}
.lrn-step-reachable{color:var(--muted);}
.lrn-step-skipped{color:var(--muted);}
.lrn-step-skipped .lrn-step-num{background:var(--surface3);}
.lrn-step-disabled{color:var(--muted2);opacity:.55;cursor:default;}
@media(max-width:520px){.lrn-step-label{display:none;}.lrn-step{padding:9px;}}

.lrn-lesson-body{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--space-7);box-shadow:var(--shadow-sm);}
.lrn-lead{font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text);margin:0 0 var(--space-6);}
.lrn-section{margin-bottom:var(--space-6);animation:fadein var(--dur-med) var(--ease-out) both;}
.lrn-section:last-of-type{margin-bottom:0;}
.lrn-section h3{margin:0 0 var(--space-3);font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);}
.lrn-section p{margin:0 0 var(--space-3);color:var(--text);font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh);}
.lrn-bullets{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:8px;}
.lrn-bullets li{font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh);color:var(--muted);}
.lrn-section:nth-of-type(2){animation-delay:.08s;}
.lrn-section:nth-of-type(3){animation-delay:.16s;}
/* La última sección de "Entiende" es siempre "¿Qué NO significa?":
   se marca aparte para que el ojo la distinga de la explicación
   principal sin necesidad de leer el encabezado primero. */
.lrn-section-caveat{background:var(--amber-soft);border:1px solid var(--amber-soft-border);border-radius:var(--r-md);padding:var(--space-5);margin-bottom:0 !important;}
.lrn-section-caveat h3{color:var(--amber);font-size:var(--text-body-size);}

.lrn-continue{max-width:320px;margin-top:var(--space-7);}

.lrn-observe-caption{font-size:var(--text-body-size);font-weight:560;color:var(--text);margin:0 0 var(--space-5);}
.lrn-chart{background:var(--surface2);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:var(--space-4);margin-bottom:var(--space-5);}
.lrn-chart-svg{display:block;width:100%;height:auto;}
/* Referencia visual dentro de "Entiende" (mismo diagrama de Velo en
   acción, sin animación): más pequeña y silenciosa, apoya el texto sin
   competir con él. */
.lrn-chart-ref{max-width:340px;padding:var(--space-3);margin:var(--space-3) 0 var(--space-4);}
.lrn-chart-ref .lrn-chart-svg.lrn-chart-animate *{animation:none !important;opacity:1 !important;transform:none !important;stroke-dashoffset:0 !important;}
/* Cada frase del narrative es su propio bloque corto (ver
   splitNarrativeBeats en lesson.js) en vez de un párrafo corrido: el
   mismo texto, escaneable en dos golpes de vista, no leído de un tirón. */
.lrn-observe-beats{display:flex;flex-direction:column;gap:var(--space-3);}
.lrn-observe-beat{
  position:relative;margin:0;padding:var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 10px);
  font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh);color:var(--text);
  background:var(--surface2);border-radius:var(--r-sm);
  animation:fadein var(--dur-med) var(--ease-out) both;animation-delay:calc(.55s + var(--i,0) * .15s);
}
.lrn-observe-beat::before{content:'';position:absolute;left:var(--space-3);top:15px;width:5px;height:5px;border-radius:50%;background:var(--blue);}

.lrn-decide-scenario{font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text);margin:0 0 var(--space-6);}
.lrn-decide-opts{display:flex;flex-direction:column;gap:var(--space-3);}
.lrn-decide-opt{
  display:flex;align-items:flex-start;gap:var(--space-3);width:100%;text-align:left;
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--space-4);font-family:var(--font-body);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.lrn-decide-opt:not(:disabled):hover{background:var(--surface3);}
.lrn-decide-opt:disabled{cursor:default;}
.lrn-decide-letter{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--surface3);display:flex;align-items:center;justify-content:center;font-size:var(--text-caption-size);font-weight:700;}
.lrn-decide-text{flex:1;font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh);color:var(--text);}
.lrn-decide-mark{flex-shrink:0;color:var(--green);display:flex;align-items:center;}
.lrn-decide-opt.is-correct{background:var(--green-soft);border-color:var(--green-soft-border);}
.lrn-decide-opt.is-wrong{background:var(--red-soft);border-color:var(--red-soft-border);}
.lrn-decide-opt.is-correct-muted{opacity:.7;}
.lrn-decide-explain{font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh);color:var(--muted);margin:calc(var(--space-3) * -1) 0 0 0;padding:0 var(--space-4) var(--space-1);}
.lrn-decide-opt + .lrn-decide-explain{margin-top:2px;margin-bottom:var(--space-1);}

.lrn-quiz-intro{font-size:var(--text-body-sm-size);color:var(--muted);margin:0 0 var(--space-6);}
.lrn-quiz-q{margin-bottom:var(--space-7);}
.lrn-quiz-q:last-of-type{margin-bottom:0;}
.lrn-quiz-q-text{font-size:var(--text-body-size);font-weight:560;color:var(--text);margin:0 0 var(--space-4);}
.lrn-quiz-opts{display:flex;flex-direction:column;gap:var(--space-2);}
.lrn-quiz-opt{
  width:100%;text-align:left;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:11px var(--space-4);font-family:var(--font-body);font-size:var(--text-body-sm-size);color:var(--text);
  cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.lrn-quiz-opt:not(:disabled):hover{background:var(--surface3);}
.lrn-quiz-opt:disabled{cursor:default;}
.lrn-quiz-opt.is-picked{border-color:var(--blue);background:var(--blue-soft);}
.lrn-quiz-opt.is-correct{background:var(--green-soft);border-color:var(--green-soft-border);}
.lrn-quiz-opt.is-wrong{background:var(--red-soft);border-color:var(--red-soft-border);}
.lrn-quiz-opt.is-correct-muted{opacity:.65;}
.lrn-quiz-explain{font-size:var(--text-caption-size);line-height:var(--text-body-sm-lh);color:var(--muted);margin:var(--space-2) 0 0;padding:0 var(--space-1);}

.lrn-quiz-result{border-radius:var(--r-md);padding:var(--space-5);margin-top:var(--space-2);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;}
.lrn-quiz-result.is-pass{background:var(--green-soft);border:1px solid var(--green-soft-border);}
.lrn-quiz-result.is-warm{background:var(--amber-soft);border:1px solid var(--amber-soft-border);}
.lrn-quiz-result-title{font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:700;letter-spacing:-0.01em;}
.lrn-quiz-result.is-pass .lrn-quiz-result-title{color:var(--green);}
.lrn-quiz-result.is-warm .lrn-quiz-result-title{color:var(--amber);}
.lrn-quiz-result-score{font-size:var(--text-body-sm-size);color:var(--muted);}
.lrn-quiz-actions{display:flex;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap;}
.lrn-quiz-actions .btn{width:auto;margin-top:0;flex:1;min-width:160px;}
.lrn-quiz-back{width:auto;margin-top:0;}

@media(max-width:640px){
  .lrn-lesson-body{padding:var(--space-5);}
  .lrn-quiz-actions .btn{flex:1 1 100%;}
}

/* ---------- 01+02 Descubre + Velo en acción ---------- */
.lrn-part-discover-hook{text-align:center;max-width:480px;margin:0 auto;}
.lrn-discover-eyebrow{display:block;font-family:var(--font-mono);font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:var(--space-4);}
.lrn-discover-statement{margin:0 0 var(--space-6);font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);line-height:1.4;color:var(--text);}
.lrn-chart-teaser{filter:grayscale(1) opacity(.5);}
.lrn-discover-question{margin:var(--space-6) 0 var(--space-6);font-size:var(--text-body-size);font-weight:560;color:var(--blue);}
.lrn-part-discover-hook .lrn-continue{margin-left:auto;margin-right:auto;}

/* ---------- 03 Entiende ---------- */
.lrn-understand-eyebrow{display:block;font-family:var(--font-mono);font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:var(--space-3);}

/* ---------- 04 Ponlo a prueba (opcional) ---------- */
.lrn-part-test-intro{text-align:center;max-width:440px;margin:0 auto;padding:var(--space-4) 0;}
.lrn-test-eyebrow{display:block;font-family:var(--font-mono);font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:var(--space-4);}
.lrn-test-lead{margin:0 0 var(--space-7);font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);line-height:1.35;color:var(--text);}
.lrn-test-intro-actions{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;}
.lrn-test-intro-actions .btn{width:auto;margin-top:0;min-width:190px;}

/* ---------- Recompensa: concepto dominado ----------
   Aparece una vez, en el instante exacto de completar la lección (ver
   LP.justCompleted en lesson.js). Nada de confeti ni de gamificación
   infantil: una estrella que entra con una escala suave y un texto que
   sube detrás, la misma curva de easing que el resto de APEX. */
.lrn-reward{
  text-align:center;padding:var(--space-6) var(--space-5);margin-bottom:var(--space-6);
  border-bottom:1px solid var(--border-soft);
}
.lrn-reward-star{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 auto var(--space-3);
  border-radius:50%;background:var(--amber-soft);color:var(--amber);
  animation:lrnRewardStar .55s var(--ease-out) both;
}
.lrn-reward-star svg{width:18px;height:18px;}
.lrn-reward-label{display:block;font-family:var(--font-mono);font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--amber);
  animation:fadein var(--dur-med) var(--ease-out) both;animation-delay:.2s;}
.lrn-reward-concept{display:block;margin-top:2px;font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);letter-spacing:.01em;color:var(--text);
  animation:fadein var(--dur-med) var(--ease-out) both;animation-delay:.28s;}
.lrn-reward-sub{margin:var(--space-2) 0 0;font-size:var(--text-body-sm-size);color:var(--muted);
  animation:fadein var(--dur-med) var(--ease-out) both;animation-delay:.36s;}
@keyframes lrnRewardStar{from{opacity:0;transform:scale(.4) rotate(-12deg);}to{opacity:1;transform:scale(1) rotate(0);}}
@media(prefers-reduced-motion:reduce){
  .lrn-reward-star,.lrn-reward-label,.lrn-reward-concept,.lrn-reward-sub{animation:none;}
}

/* Variante de etapa completada: mismo bloque, con un anillo alrededor
   de la estrella para distinguir "cerraste un curso" de "cerraste una
   lección" sin introducir ningún color nuevo (paleta ya existente). */
.lrn-reward-stage .lrn-reward-star{box-shadow:0 0 0 3px var(--amber-soft);}

/* ---------- Estrellas de progreso (hero + Learning Path) ---------- */
.lrn-star-row{display:flex;align-items:center;gap:3px;margin-top:6px;}
.lrn-star{display:flex;color:var(--amber);animation:fadein var(--dur-med) var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms);}
.lrn-star svg{width:12px;height:12px;}
.lrn-star-rest{font-size:var(--text-caption-size);color:var(--muted2);margin-left:2px;}
.lrn-path-completed .lrn-path-mark{color:var(--amber);}

/* ---------- 05 Momento APEX + 06 Misión ---------- */
.lrn-moment-block{
  background:linear-gradient(135deg,var(--blue-soft) 0%,var(--surface2) 100%);
  border:1px solid var(--blue-soft-border);border-radius:var(--r-lg);
  padding:var(--space-7);text-align:center;
}
.lrn-moment-badge{display:inline-block;font-family:var(--font-mono);font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:var(--space-4);}
.lrn-moment-text{margin:0;font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);line-height:1.35;color:var(--text);}
.lrn-moment-rule{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--blue-soft-border);}
.lrn-moment-rule-lbl{display:block;font-size:var(--text-caption-size);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.lrn-moment-rule p{margin:0;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text);font-weight:560;}

.lrn-quiz-prompt{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--border-soft);text-align:center;}
.lrn-quiz-prompt p{margin:0 0 var(--space-4);font-size:var(--text-body-sm-size);color:var(--muted);}
.lrn-quiz-prompt-actions{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;}
.lrn-quiz-prompt-actions .btn{width:auto;margin-top:0;min-width:140px;}
.lrn-quiz-prompt-done .btn{width:auto;margin-top:0;}

.lrn-mission{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--border-soft);text-align:center;}
.lrn-mission-badge{display:block;font-family:var(--font-mono);font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:var(--space-3);}
.lrn-mission-context{margin:0 0 var(--space-4);font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh);color:var(--muted);max-width:440px;margin-left:auto;margin-right:auto;}
.lrn-mission-text{margin:0 0 var(--space-5);font-size:var(--text-body-sm-size);line-height:var(--text-body-sm-lh);color:var(--text);max-width:440px;margin-left:auto;margin-right:auto;}
.lrn-mission-btn{width:auto;margin:0 auto;min-width:220px;}

.lrn-insight-actions{display:flex;gap:var(--space-3);margin-top:var(--space-7);flex-wrap:wrap;}
.lrn-insight-actions .btn{width:auto;margin-top:0;flex:1;min-width:160px;}

@media(max-width:640px){
  .lrn-moment-block{padding:var(--space-6) var(--space-5);}
  .lrn-insight-actions .btn,.lrn-quiz-prompt-actions .btn,.lrn-test-intro-actions .btn{flex:1 1 100%;}
}

/* ============================================================
   DIAGRAMAS (ver public/js/learning/charts.js) — SVG con
   currentColor + variables de tema, sin ninguna regla de color
   propia por tema claro/oscuro.
   ============================================================ */
.lrn-chart-svg{color:var(--muted2);}
.lrn-chart-wick{stroke-width:1.3;}
.lrn-chart-body.lrn-chart-up{fill:var(--green);stroke:var(--green);}
.lrn-chart-body.lrn-chart-down{fill:var(--red);stroke:var(--red);}
.lrn-chart-wick.lrn-chart-up{stroke:var(--green);}
.lrn-chart-wick.lrn-chart-down{stroke:var(--red);}
.lrn-chart-volbar.lrn-chart-up{fill:var(--green);opacity:.55;}
.lrn-chart-volbar.lrn-chart-down{fill:var(--red);opacity:.55;}
.lrn-chart-zone{fill:var(--amber);opacity:.12;stroke:var(--amber);stroke-opacity:.3;stroke-width:1;}
.lrn-chart-zone-support{fill:var(--green);stroke:var(--green);}
.lrn-chart-zone-resistance{fill:var(--red);stroke:var(--red);}
.lrn-chart-zone-neutral{fill:var(--muted2);stroke:var(--muted2);}
.lrn-chart-marker-line{stroke:var(--text);stroke-width:1;stroke-dasharray:3 3;opacity:.5;}
.lrn-chart-marker-label{fill:var(--text);font-size:10px;font-family:var(--font-body);font-weight:600;}
.lrn-chart-bar{fill:var(--muted2);opacity:.55;}
.lrn-chart-bar-highlight{fill:var(--red);opacity:.85;}
.lrn-chart-bar-up{fill:var(--green);opacity:.75;}
.lrn-chart-bar-down{fill:var(--red);opacity:.75;}
.lrn-chart-bar-neutral{fill:var(--muted2);opacity:.55;}
.lrn-chart-bar-label{fill:var(--muted2);font-size:9px;font-family:var(--font-body);}
.lrn-chart-avg{stroke:var(--muted2);stroke-width:1;stroke-dasharray:2 3;}
.lrn-chart-avg-label{fill:var(--muted2);font-size:9px;font-family:var(--font-body);}
.lrn-chart-baseline{stroke:var(--border);stroke-width:1;}
.lrn-chart-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.lrn-chart-line-a{stroke:var(--blue);}
.lrn-chart-line-b{stroke:var(--muted2);}
.lrn-chart-line.is-dashed{stroke-dasharray:5 4;}
.lrn-chart-legend-label{fill:var(--muted);font-size:10px;font-family:var(--font-body);}

/* ---------- Revelación (paso "Velo en acción", ver lesson.js) ----------
   El SVG lleva la clase .lrn-chart-animate desde que se genera (ver
   charts.js/svgWrap); el botón "Reproducir" solo la quita y la vuelve
   a poner para reiniciarla. Cada vela/barra/línea trae su propio
   índice en `--i` (también desde charts.js) para el escalonado.
   .lrn-chart-teaser (paso "Descubre") congela el mismo SVG en su
   fotograma final: es la silueta en gris de ANTES de entenderlo, no
   una animación en marcha. */
.lrn-chart-svg.lrn-chart-animate .lrn-chart-wick,
.lrn-chart-svg.lrn-chart-animate .lrn-chart-body,
.lrn-chart-svg.lrn-chart-animate .lrn-chart-volbar{
  animation:lrnChartRise .5s var(--ease-out) both;
  animation-delay:calc(var(--i,0) * 55ms);
}
.lrn-chart-svg.lrn-chart-animate .lrn-chart-bar{
  transform-box:fill-box;transform-origin:bottom;
  animation:lrnChartGrow .45s var(--ease-out) both;
  animation-delay:calc(var(--i,0) * 70ms);
}
.lrn-chart-svg.lrn-chart-animate polyline.lrn-chart-line:not(.is-dashed){
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:lrnChartDraw 1.1s var(--ease-out) forwards;
  animation-delay:calc(.1s + var(--i,0) * .15s);
}
.lrn-chart-svg.lrn-chart-animate polyline.lrn-chart-line.is-dashed{
  opacity:0;
  animation:fadein .6s var(--ease-out) forwards;
  animation-delay:calc(.35s + var(--i,0) * .15s);
}
.lrn-chart-svg.lrn-chart-animate .lrn-chart-zone{
  animation:fadein .6s var(--ease-out) both;
  animation-delay:.9s;
}
.lrn-chart-svg.lrn-chart-animate .lrn-chart-marker-line,
.lrn-chart-svg.lrn-chart-animate .lrn-chart-marker-label{
  animation:fadein .5s var(--ease-out) both;
  animation-delay:1.05s;
}
@keyframes lrnChartRise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes lrnChartGrow{from{transform:scaleY(0);opacity:0;}to{transform:scaleY(1);opacity:1;}}
@keyframes lrnChartDraw{to{stroke-dashoffset:0;}}

/* .lrn-chart-teaser: misma escena, en gris y sin movimiento — el
   diagrama "de antes" del paso Descubre. Se fuerza el fotograma final
   de cada animación en vez de desactivarla sin más, para que las velas
   se vean todas colocadas (no a medio aparecer) bajo el filtro gris. */
.lrn-chart-teaser .lrn-chart-svg{color:var(--muted2);}
.lrn-chart-teaser .lrn-chart-wick,
.lrn-chart-teaser .lrn-chart-body,
.lrn-chart-teaser .lrn-chart-volbar,
.lrn-chart-teaser .lrn-chart-bar,
.lrn-chart-teaser polyline.lrn-chart-line{
  animation:none !important;opacity:1 !important;transform:none !important;
  stroke-dasharray:none !important;stroke-dashoffset:0 !important;
}
.lrn-chart-teaser .lrn-chart-zone,
.lrn-chart-teaser .lrn-chart-marker-line,
.lrn-chart-teaser .lrn-chart-marker-label{animation:none !important;opacity:1 !important;}

@media(prefers-reduced-motion:reduce){
  .lrn-chart-svg.lrn-chart-animate *{animation:none !important;opacity:1 !important;transform:none !important;stroke-dashoffset:0 !important;}
}