/* ============================================================
   APEX LEARNING — MOTOR INTERACTIVO (LearningChart + DrawingLayer +
   ExercisePlayer)

   Va DESPUÉS de learning.css y ANTES de panel.css/max.css (ver <link>
   en index.html): mismo criterio que learning.css — ningún color
   nuevo, reutiliza exactamente la paleta y los tokens de base.css.
   El gráfico es el protagonista: la tarjeta que lo envuelve es la
   única "card" de la pantalla, sin anidar más contenedores de los
   necesarios.
   ============================================================ */

.lrn-ex{display:flex;flex-direction:column;gap:var(--space-5);max-width:920px;margin:0 auto;}

.lrn-ex-head{display:flex;flex-direction:column;gap:var(--space-2);}
.lrn-ex-title{margin:0;font-family:var(--font-display);font-size:var(--text-h2-size);font-weight:var(--text-h2-weight);letter-spacing:var(--text-h2-ls);}
.lrn-ex-instruction{margin:0;color:var(--muted);font-size:var(--text-body-size);line-height:var(--text-body-lh);}

/* ---------- Tarjeta del gráfico ---------- */
.lrn-ex-card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;
}

/* ---------- Toolbar ---------- */
.lrn-ex-toolbar{border-bottom:1px solid var(--border-soft);padding:var(--space-3) var(--space-4);}
.lrn-ex-tools-toggle{
  display:none;align-items:center;gap:6px;background:none;border:none;color:var(--muted);
  font-size:var(--text-caption-size);font-family:var(--font-body);cursor:pointer;padding:var(--space-1) 0;
}
.lrn-ex-tools-toggle .chev{transition:transform var(--dur-fast) var(--ease);}
.lrn-ex-tools-toggle[aria-expanded="true"] .chev{transform:rotate(180deg);}

.lrn-ex-tool-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;}
.lrn-ex-tool-group{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
.lrn-ex-tool-group-actions{border-left:1px solid var(--border-soft);padding-left:var(--space-3);}
.lrn-ex-tool-group-zoom{margin-left:auto;border-left:1px solid var(--border-soft);padding-left:var(--space-3);}

.lrn-ex-tool{
  display:flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border-soft);
  border-radius:var(--r-md);padding:6px 10px;color:var(--text);cursor:pointer;
  font-size:var(--text-caption-size);font-family:var(--font-body);transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.lrn-ex-tool:hover{background:var(--surface3);}
.lrn-ex-tool.is-active{background:var(--blue-soft);border-color:var(--blue);color:var(--blue);}
.lrn-ex-tool-lbl{display:inline;}

/* ---------- Área del gráfico ---------- */
.lrn-ex-chart-host{position:relative;width:100%;height:440px;}
.lrn-chart-canvas-wrap{position:relative;width:100%;height:100%;}
.lrn-chart-canvas{position:absolute;inset:0;display:block;touch-action:none;cursor:crosshair;}
.lrn-draw-canvas{position:absolute;inset:0;display:block;touch-action:none;}

/* ---------- Barra de replay ---------- */
.lrn-ex-playback{
  display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--border-soft);flex-wrap:wrap;
}
.lrn-ex-play-btn{
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  background:var(--surface2);border:1px solid var(--border-soft);border-radius:50%;color:var(--text);cursor:pointer;
}
.lrn-ex-play-btn:hover{background:var(--surface3);}
.lrn-ex-progress{flex:1;min-width:80px;height:6px;border-radius:var(--r-pill);background:var(--surface3);overflow:hidden;}
.lrn-ex-progress-fill{height:100%;border-radius:var(--r-pill);background:var(--blue);transition:width .2s linear;}
.lrn-ex-progress-lbl{font-family:var(--font-mono);font-size:var(--text-caption-size);color:var(--muted);white-space:nowrap;}
.lrn-ex-speed{display:flex;gap:4px;}
.lrn-ex-speed-btn{
  background:var(--surface2);border:1px solid var(--border-soft);border-radius:var(--r-2xs);
  padding:4px 8px;font-size:var(--text-caption-size);font-family:var(--font-mono);color:var(--muted);cursor:pointer;
}
.lrn-ex-speed-btn.is-active{background:var(--blue-soft);border-color:var(--blue);color:var(--blue);}

/* ---------- Acciones + feedback ---------- */
.lrn-ex-actions{display:flex;justify-content:center;}
.lrn-ex-actions .btn{min-width:220px;}

.lrn-ex-feedback{display:none;flex-direction:column;gap:var(--space-3);border-radius:var(--r-lg);padding:var(--space-6);border:1px solid var(--border-soft);background:var(--surface);}
.lrn-ex-feedback.is-visible{display:flex;}
.lrn-ex-feedback.is-correct{border-color:var(--green-soft-border);background:var(--green-soft);}
.lrn-ex-feedback.is-improve{border-color:var(--amber-soft-border);background:var(--amber-soft);}
.lrn-ex-feedback-tag{
  display:inline-block;font-family:var(--font-mono);font-size:var(--text-label-size);letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;
}
.lrn-ex-feedback.is-correct .lrn-ex-feedback-tag{color:var(--green);}
.lrn-ex-feedback.is-improve .lrn-ex-feedback-tag{color:var(--amber);}
.lrn-ex-feedback-msg{margin:0;font-size:var(--text-body-size);line-height:var(--text-body-lh);}
.lrn-ex-explain{border-top:1px solid var(--border-soft);padding-top:var(--space-3);}
.lrn-ex-explain h4{margin:0 0 4px;font-size:var(--text-body-sm-size);font-weight:600;}
.lrn-ex-explain p{margin:0;color:var(--muted);font-size:var(--text-body-sm-size);line-height:var(--text-body-lh);}
.lrn-ex-feedback-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;}

/* ---------- Tarjetas de entrada al entrenamiento (dashboard) ---------- */
.lrn-ex-cards{display:flex;flex-direction:column;gap:var(--space-3);}
.lrn-ex-card{
  text-align:left;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:var(--space-5) var(--space-6);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.lrn-ex-card:hover{border-color:var(--blue);background:var(--surface2);}
.lrn-ex-card-eyebrow{display:block;font-family:var(--font-mono);font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:4px;}
.lrn-ex-card h3{margin:0 0 4px;font-family:var(--font-display);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);}
.lrn-ex-card p{margin:0 0 var(--space-3);color:var(--muted);font-size:var(--text-body-sm-size);line-height:var(--text-body-lh);}
.lrn-ex-card-cta{font-size:var(--text-caption-size);color:var(--text);font-weight:600;}

@media(prefers-reduced-motion: reduce){
  .lrn-ex-progress-fill,.lrn-hero-bar-fill{transition:none;}
}

/* ---------- Mobile ---------- */
@media(max-width:640px){
  .lrn-ex-chart-host{height:320px;}
  .lrn-ex-tool-lbl{display:none;}
  .lrn-ex-tool{padding:8px;}
  .lrn-ex-tools-toggle{display:flex;}
  .lrn-ex-tool-row{display:none;}
  .lrn-ex-tool-row:not(.is-collapsed){display:flex;margin-top:var(--space-3);}
  .lrn-ex-tool-group-zoom{margin-left:0;border-left:none;padding-left:0;}
  .lrn-ex-actions .btn{min-width:0;width:100%;}
}