/* ============================================================================
   VISION ENGLISH — REPRODUCTOR DE ACTIVIDADES
   Una pregunta por pantalla. Barra que se llena arriba, la pregunta en medio,
   y abajo la barra de resultado con el botón para continuar.
   ========================================================================= */

.act-app {
  margin-top: 18px;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 430px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .42));
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .7),
    inset -1px -1px 0 rgba(30, 35, 60, .07),
    0 4px 16px rgba(20, 24, 45, .09),
    0 16px 46px rgba(45, 54, 88, .1);
}

body.dark .act-app {
  background: linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  border-color: rgba(255, 255, 255, .1);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .12),
    inset -1px -1px 0 rgba(0, 0, 0, .3),
    0 4px 18px rgba(0, 0, 0, .32),
    0 16px 46px rgba(0, 0, 0, .35);
}

/* ── UN COLOR POR TIPO DE ACTIVIDAD ──────────────────────────────────────────
   Antes todo era blanco con el neón del nivel: ocho actividades distintas se
   veían iguales. Ahora cada tipo trae su propio color, así el alumno reconoce
   de un vistazo qué le tocó antes de leer la instrucción.

   La barra de avance NO cambia: esa conserva el color del nivel, porque es
   identidad del curso y no de la pregunta.
   ------------------------------------------------------------------------- */

.act-app {
  --act:      var(--neon, hsl(272, 100%, 68%));
  --act-2:    var(--neon-2, hsl(187, 100%, 55%));
  --act-soft: var(--neon-soft, rgba(124, 58, 237, .14));
}

.act-app[data-tipo="significados"] { --act: hsl(174, 72%, 42%); --act-2: hsl(160, 70%, 45%); --act-soft: hsla(174, 72%, 42%, .14); }
.act-app[data-tipo="opcion"]       { --act: hsl(266, 85%, 62%); --act-2: hsl(286, 80%, 62%); --act-soft: hsla(266, 85%, 62%, .14); }
.act-app[data-tipo="vf"]           { --act: hsl(38, 95%, 52%);  --act-2: hsl(26, 95%, 56%);  --act-soft: hsla(38, 95%, 52%, .16); }
.act-app[data-tipo="escucha"]      { --act: hsl(206, 90%, 52%); --act-2: hsl(192, 88%, 48%); --act-soft: hsla(206, 90%, 52%, .14); }
.act-app[data-tipo="huecos"]       { --act: hsl(330, 82%, 58%); --act-2: hsl(348, 85%, 60%); --act-soft: hsla(330, 82%, 58%, .13); }
.act-app[data-tipo="oracion"]      { --act: hsl(146, 65%, 42%); --act-2: hsl(166, 68%, 42%); --act-soft: hsla(146, 65%, 42%, .14); }
.act-app[data-tipo="habla"]        { --act: hsl(14, 88%, 58%);  --act-2: hsl(30, 92%, 58%);  --act-soft: hsla(14, 88%, 58%, .14); }
.act-app[data-tipo="completa"]     { --act: hsl(238, 78%, 62%); --act-2: hsl(256, 80%, 64%); --act-soft: hsla(238, 78%, 62%, .14); }
.act-app[data-tipo="traduce"]      { --act: hsl(300, 70%, 56%); --act-2: hsl(318, 75%, 58%); --act-soft: hsla(300, 70%, 56%, .14); }
.act-app[data-tipo="escribe"]      { --act: hsl(258, 82%, 60%); --act-2: hsl(276, 78%, 62%); --act-soft: hsla(258, 82%, 60%, .14); }

/* La instrucción se tiñe del color de su actividad: es la primera pista. */
.act-instruccion { color: var(--act); }

/* ── Método V.I.A. — etiqueta de fase sobre cada actividad ─────────────────── */
.act-fase {
  margin: 0 0 8px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--act);
  opacity: .85;
  display: flex;
  align-items: center;
  gap: 8px;
}
.act-fase::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: var(--act);
}
body.dark .act-fase { opacity: 1; }

/* ── Arriba: avance y racha ──────────────────────────────────────────────── */
.act-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px 0;
}

.act-barra {
  flex: 1;
  display: flex;
  gap: 4px;
  height: 12px;
  padding: 0;
  background: none;
}

/* Un tramo por actividad. Vacío = gris; hecho = color del nivel. */
.act-seg {
  flex: 1;
  min-width: 6px;
  border-radius: 999px;
  background: var(--line, rgba(111, 122, 157, .22));
  transition: background .35s ease, box-shadow .35s ease;
}
.act-seg.hecho {
  background: linear-gradient(90deg, var(--act, hsl(266,85%,62%)), var(--act-2, hsl(286,80%,62%)));
  box-shadow: 0 0 10px -3px var(--act, hsl(266,85%,62%));
}

/* Todos los tramos completos: la barra entera se pone dorada y brilla. */
.act-barra.completa .act-seg {
  background: linear-gradient(90deg, hsl(43, 96%, 56%), hsl(35, 96%, 52%));
  box-shadow: 0 0 12px -2px hsl(43, 96%, 56%);
  animation: act-barra-dorada .5s ease;
}
@keyframes act-barra-dorada {
  from { transform: scaleY(.4); opacity: .5; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Botón "Finalizar" del pie: dorado y llamativo cuando se activa. */
.act-cta.act-cta-finalizar {
  background: linear-gradient(135deg, hsl(43, 96%, 54%), hsl(33, 95%, 50%));
  color: #3a2a05;
  box-shadow: 0 8px 22px -6px hsl(40, 95%, 50%);
}

@media (prefers-reduced-motion: reduce) {
  .act-seg, .act-barra.completa .act-seg { transition: none; animation: none; }
}

.act-racha {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: hsla(24, 100%, 58%, .16);
  color: hsl(20, 90%, 44%);
  font-size: .84rem;
  font-weight: 800;
  animation: actPop .3s cubic-bezier(.34, 1.56, .64, 1);
}
body.dark .act-racha { color: hsl(30, 100%, 68%); }

@keyframes actPop {
  from { transform: scale(.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ── En medio: la pregunta ───────────────────────────────────────────────── */
.act-cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 30px 26px;
  gap: 18px;
}

.act-instruccion {
  margin: 0;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  /* El color NO se declara aquí: lo pone la regla de arriba con var(--act),
     que le da a cada tipo de actividad el suyo. Antes había un
     `color: var(--muted)` en esta línea que, por ir después, pisaba aquella
     y dejaba la instrucción siempre gris. */
}

.act-escena {
  animation: actEntrar .28s cubic-bezier(.16, 1, .3, 1);
}

@keyframes actEntrar {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

.act-pregunta {
  margin: 0 0 20px;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -.015em;
}

.act-contexto {
  margin: 0 0 16px;
  padding: 12px 15px;
  border-radius: 12px;
  background: var(--act-soft, rgba(124, 58, 237, .1));
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text-secondary, var(--muted));
}

/* ── Opciones ────────────────────────────────────────────────────────────── */
.act-opciones { display: grid; gap: 10px; }

.act-opcion {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px 18px;
  border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 15px;
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .6),
    inset -1px -1px 0 rgba(30, 35, 60, .05),
    0 2px 8px rgba(20, 24, 45, .05);
  color: inherit;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
body.dark .act-opcion { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); box-shadow: inset 1px 1px 0 rgba(255,255,255,.1), inset -1px -1px 0 rgba(0,0,0,.25); }

.act-opcion:hover:not(:disabled) { border-color: var(--act, var(--purple)); }
.act-opcion:active:not(:disabled) { transform: scale(.99); }
.act-opcion:disabled { cursor: default; }

.act-opcion.sel {
  border-color: var(--act, var(--purple));
  background: var(--act-soft, rgba(124, 58, 237, .12));
}
.act-opcion.sel .act-radio {
  border-color: var(--act, var(--purple));
  background: var(--act, var(--purple)) radial-gradient(circle, #fff 30%, transparent 32%);
}

.act-radio {
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 2px solid var(--line, rgba(111, 122, 157, .38));
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}

.act-opcion.correcta {
  border-color: hsl(150, 62%, 44%);
  background: hsla(150, 62%, 44%, .13);
}
.act-opcion.correcta .act-radio {
  border-color: hsl(150, 62%, 40%);
  background: hsl(150, 62%, 42%) radial-gradient(circle, #fff 30%, transparent 32%);
}
.act-opcion.incorrecta {
  border-color: hsl(354, 78%, 58%);
  background: hsla(354, 78%, 58%, .1);
}
.act-opcion.incorrecta .act-radio {
  border-color: hsl(354, 72%, 52%);
  background: hsl(354, 78%, 58%);
}

/* ── Unir palabras ───────────────────────────────────────────────────────── */
.act-unir { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.act-col { display: grid; gap: 9px; align-content: start; }

.act-chip {
  padding: 13px 14px;
  border: 2px solid var(--line, rgba(111, 122, 157, .22));
  border-radius: 13px;
  background: var(--surface-strong, #fff);
  color: inherit;
  font: inherit;
  font-size: .96rem;
  cursor: pointer;
  transition: all .15s;
}
body.dark .act-chip { background: rgba(255, 255, 255, .05); }

.act-chip:hover:not(.ok) { border-color: var(--act, var(--purple)); }
.act-chip.sel {
  border-color: var(--act, var(--purple));
  background: var(--act-soft, rgba(124, 58, 237, .16));
  transform: scale(1.03);
}
.act-chip.ok {
  border-color: hsl(150, 62%, 44%);
  background: hsla(150, 62%, 44%, .13);
  color: hsl(150, 62%, 28%);
  cursor: default;
  opacity: .8;
}
body.dark .act-chip.ok { color: hsl(150, 65%, 70%); }
.act-chip.error {
  border-color: hsl(354, 78%, 58%);
  background: hsla(354, 78%, 58%, .12);
  animation: actTemblor .3s;
}

@keyframes actTemblor {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ── Huecos ──────────────────────────────────────────────────────────────── */
.act-texto-huecos {
  font-size: 1.02rem;
  line-height: 2.6;
}

.act-select {
  padding: 7px 11px;
  border: 2px solid var(--line, rgba(111, 122, 157, .3));
  border-radius: 10px;
  background: var(--surface-strong, #fff);
  color: inherit;
  font: inherit;
  font-size: .94rem;
  cursor: pointer;
  min-width: 135px;
}
body.dark .act-select { background: rgba(255, 255, 255, .09); }
.act-select:focus { outline: none; border-color: var(--act, var(--purple)); }
.act-select.correcta { border-color: hsl(150, 62%, 44%); background: hsla(150, 62%, 44%, .14); }
.act-select.incorrecta { border-color: hsl(354, 78%, 58%); background: hsla(354, 78%, 58%, .12); }

/* ── Armar oración ───────────────────────────────────────────────────────── */
.act-espanol {
  margin: 0 0 16px;
  font-size: 1.16rem;
  font-weight: 700;
}

.act-linea {
  min-height: 58px;
  padding: 11px;
  margin-bottom: 18px;
  border-bottom: 3px dashed var(--line, rgba(111, 122, 157, .3));
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}

.act-banco { display: flex; flex-wrap: wrap; gap: 8px; }

.act-palabra {
  padding: 11px 16px;
  border: 2px solid var(--line, rgba(111, 122, 157, .22));
  border-radius: 12px;
  background: var(--surface-strong, #fff);
  color: inherit;
  font: inherit;
  font-size: .98rem;
  cursor: pointer;
  transition: all .14s;
}
body.dark .act-palabra { background: rgba(255, 255, 255, .06); }
.act-palabra:hover:not(:disabled) { border-color: var(--act, var(--purple)); transform: translateY(-2px); }
.act-palabra:disabled { opacity: .25; cursor: default; }
.act-palabra.puesta {
  background: var(--act-soft, rgba(124, 58, 237, .18));
  border-color: transparent;
  opacity: 1;
}

/* ── Hablar ──────────────────────────────────────────────────────────────── */
.act-habla { text-align: center; }

.act-frase-modelo {
  margin: 0 0 8px;
  font-size: 1.55rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--act-2, var(--purple));
}
.act-frase-es { margin: 0 0 20px; font-size: .96rem; color: var(--muted); }

.act-audio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  margin-bottom: 18px;
  border: 2px solid var(--act, var(--purple));
  border-radius: 999px;
  background: var(--act-soft, rgba(124, 58, 237, .1));
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: .94rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.act-audio:hover { background: var(--act, var(--purple)); color: #fff; }
.act-audio.sonando { animation: vcPulso 1.1s ease-in-out infinite; }

.act-textarea {
  width: 100%;
  padding: 14px;
  border: 2px solid var(--line, rgba(111, 122, 157, .22));
  border-radius: 14px;
  background: var(--surface-strong, #fff);
  color: inherit;
  font: inherit;
  resize: vertical;
}
body.dark .act-textarea { background: rgba(255, 255, 255, .05); }

/* ── Escribir la respuesta (completar / traducir) ─────────────────────────── */
.act-input {
  width: 100%;
  padding: 15px 18px;
  border: 2px solid var(--line, rgba(111, 122, 157, .22));
  border-radius: 15px;
  background: var(--surface-strong, #fff);
  color: inherit;
  font: inherit;
  font-size: 1.08rem;
  transition: border-color .15s, background .15s;
}
body.dark .act-input { background: rgba(255, 255, 255, .05); }
.act-input:focus { outline: none; border-color: var(--act, var(--purple)); }
.act-input.correcta { border-color: hsl(150, 62%, 44%); background: hsla(150, 62%, 44%, .12); }
.act-input.incorrecta { border-color: hsl(354, 78%, 58%); background: hsla(354, 78%, 58%, .1); }
.act-input:disabled { opacity: 1; }

/* ── Abajo: resultado y botón ────────────────────────────────────────────── */
.act-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 22px;
  border-top: 2px solid var(--line, rgba(111, 122, 157, .14));
  background: rgba(255, 255, 255, .38);
  transition: background .25s, border-color .25s;
}
body.dark .act-pie { background: rgba(0, 0, 0, .18); }

.act-pie.bien {
  background: hsla(150, 62%, 44%, .16);
  border-color: hsla(150, 62%, 44%, .45);
}
.act-pie.mal {
  background: hsla(354, 78%, 58%, .13);
  border-color: hsla(354, 78%, 58%, .4);
}
.act-pie.act-pie-fin { justify-content: center; }

.act-resultado {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .9rem;
  line-height: 1.45;
  animation: actAsomar .22s ease;
}
.act-resultado strong { font-size: 1rem; font-weight: 800; }
.act-resultado span { color: var(--text-secondary, var(--muted)); }

.act-pie.bien .act-resultado strong { color: hsl(150, 62%, 30%); }
.act-pie.mal .act-resultado strong { color: hsl(354, 68%, 46%); }
body.dark .act-pie.bien .act-resultado strong { color: hsl(150, 65%, 68%); }
body.dark .act-pie.mal .act-resultado strong { color: hsl(354, 90%, 74%); }

@keyframes actAsomar {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.act-cta {
  flex-shrink: 0;
  padding: 14px 34px;
  border: 0;
  border-radius: 14px;
  background: var(--line, rgba(111, 122, 157, .2));
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .14s, box-shadow .18s;
}
.act-cta:disabled { cursor: default; }

.act-cta-on {
  background: linear-gradient(135deg, var(--act, var(--purple)), var(--act-2, var(--purple-2)));
  color: #fff;
  box-shadow: 0 9px 22px -6px var(--act, rgba(124, 58, 237, .55));
}
.act-cta-on:hover { transform: translateY(-2px); }
.act-cta-on:active { transform: translateY(0); }

/* ── Pantalla final ──────────────────────────────────────────────────────── */
.act-fin { text-align: center; }
.act-fin-icono { font-size: 3.4rem; margin-bottom: 8px; }
.act-fin-titulo { margin: 0 0 8px; font-size: 1.5rem; letter-spacing: -.02em; }
.act-fin-texto { margin: 0 0 20px; font-size: 1.02rem; color: var(--text-secondary, var(--muted)); }

.act-boton-suave {
  padding: 12px 22px;
  border: 2px solid var(--line, rgba(111, 122, 157, .25));
  border-radius: 13px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: .94rem;
  cursor: pointer;
}
.act-boton-suave:hover { background: var(--act-soft, rgba(124, 58, 237, .1)); }

/* ── Teléfono ────────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .act-app { min-height: 400px; }
  .act-cuerpo { padding: 18px 18px 22px; }
  .act-top { padding: 14px 18px 0; }
  .act-pregunta { font-size: 1.1rem; }
  .act-frase-modelo { font-size: 1.25rem; }
  .act-unir { gap: 8px; }
  .act-chip { font-size: .88rem; padding: 11px 9px; }
  .act-texto-huecos { font-size: .95rem; line-height: 2.7; }
  .act-select { min-width: 115px; }
  .act-pie { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 18px; }
  .act-cta { width: 100%; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .act-escena, .act-resultado, .act-racha, .act-chip.error { animation: none; }
  .act-barra-fill { transition: none; }
  .act-cta-on:hover, .act-palabra:hover:not(:disabled) { transform: none; }
}

/* ============================================================================
   MESAS DE JUEGO V2
   Cada tipo conserva su contenido y su logica, pero cambia de escenario para
   que escuchar, unir, ordenar y escribir no parezcan la misma actividad.
   ========================================================================= */

.lesson-detail-view .act-app {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 520px;
  background:
    linear-gradient(125deg, color-mix(in srgb, var(--act) 12%, rgba(255, 255, 255, .68)), rgba(255, 255, 255, .52) 42%, color-mix(in srgb, var(--act-2) 10%, rgba(255, 255, 255, .48)));
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 20px;
  box-shadow: 0 22px 56px rgba(35, 44, 76, .14), inset 0 1px 0 rgba(255, 255, 255, .86);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  transition: background .35s ease, box-shadow .35s ease;
}

.lesson-detail-view .act-top {
  flex: 0 0 auto;
  padding: 16px 20px;
}

.lesson-detail-view .act-cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 20px 20px;
}

.lesson-detail-view .act-pie {
  flex: 0 0 auto;
  padding: 12px 20px;
}

.lesson-detail-view .act-botones {
  flex: 0 0 auto;
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.lesson-detail-view .act-ollie {
  flex: 0 0 auto;
  padding: 16px 20px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  background: rgba(116, 57, 246, .06);
  border-radius: 0 0 20px 20px;
}

body.dark .lesson-detail-view .act-app {
  background:
    linear-gradient(125deg, color-mix(in srgb, var(--act) 12%, rgba(20, 25, 40, .82)), rgba(20, 25, 40, .72) 46%, color-mix(in srgb, var(--act-2) 9%, rgba(20, 25, 40, .72)));
  border-color: rgba(255, 255, 255, .12);
}

body.dark .lesson-detail-view .act-botones {
  border-top-color: rgba(255, 255, 255, .08);
}

body.dark .lesson-detail-view .act-ollie {
  border-top-color: rgba(255, 255, 255, .08);
  background: rgba(116, 57, 246, .12);
}

.lesson-detail-view .act-top {
  padding: 22px 26px 0;
}

.lesson-detail-view .act-barra {
  height: 11px;
  background: none;
  border: 0;
  box-shadow: none;
}
.lesson-detail-view .act-seg:not(.hecho) { background: rgba(40, 48, 78, .14); }
body.dark .lesson-detail-view .act-seg:not(.hecho) { background: rgba(255, 255, 255, .12); }

.lesson-detail-view .act-cuerpo {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
  align-items: stretch;
  justify-content: initial;
  gap: 20px;
  padding: 24px 28px 30px;
}

.lesson-detail-view .act-instruccion {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  margin: 0;
  padding: 22px;
  color: #172033;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--act) 28%, rgba(255, 255, 255, .82)), color-mix(in srgb, var(--act-2) 15%, rgba(255, 255, 255, .54)));
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 32px color-mix(in srgb, var(--act) 13%, rgba(30, 38, 68, .08));
  font-size: .8rem;
  line-height: 1.5;
  letter-spacing: .06em;
  overflow: hidden;
}

.lesson-detail-view .act-instruccion::before {
  content: "";
  position: absolute;
  width: 86px;
  height: 86px;
  top: 20px;
  left: 20px;
  border: 12px solid color-mix(in srgb, var(--act) 38%, transparent);
  border-right-color: color-mix(in srgb, var(--act-2) 56%, transparent);
  border-radius: 50%;
  transform: rotate(-18deg);
  opacity: .72;
}

.lesson-detail-view .act-instruccion::after {
  content: "";
  position: absolute;
  top: 124px;
  left: 22px;
  width: 64px;
  height: 5px;
  background: linear-gradient(90deg, var(--act), var(--act-2));
  border-radius: 999px;
  box-shadow: 0 12px 0 color-mix(in srgb, var(--act) 22%, transparent);
}

body.dark .lesson-detail-view .act-instruccion { color: #f5f7ff; border-color: rgba(255, 255, 255, .13); }

.lesson-detail-view .act-escena {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 300px;
  align-content: center;
  padding: clamp(22px, 4vw, 42px);
  background: rgba(255, 255, 255, .56);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 34px rgba(36, 45, 76, .08);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  animation: actBoardIn .36s cubic-bezier(.2, .8, .2, 1);
}

body.dark .lesson-detail-view .act-escena { background: rgba(12, 17, 30, .5); border-color: rgba(255, 255, 255, .09); }

@keyframes actBoardIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.lesson-detail-view .act-pregunta,
.lesson-detail-view .act-frase-modelo,
.lesson-detail-view .act-fin-titulo { letter-spacing: 0; }

.lesson-detail-view .act-opcion,
.lesson-detail-view .act-chip,
.lesson-detail-view .act-palabra,
.lesson-detail-view .act-input,
.lesson-detail-view .act-textarea,
.lesson-detail-view .act-select {
  box-shadow: 0 7px 16px rgba(38, 47, 78, .07), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.lesson-detail-view .act-opcion:hover:not(:disabled),
.lesson-detail-view .act-chip:hover:not(.ok),
.lesson-detail-view .act-palabra:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 13px 24px color-mix(in srgb, var(--act) 14%, rgba(38, 47, 78, .08));
}

.lesson-detail-view .act-opcion:active:not(:disabled),
.lesson-detail-view .act-chip:active:not(.ok),
.lesson-detail-view .act-palabra:active:not(:disabled),
.lesson-detail-view .act-cta-on:active {
  transform: translateY(1px) scale(.985);
}

/* Unir: dos tableros claramente rotulados, ingles a la izquierda y espanol a la derecha. */
.lesson-detail-view .act-app[data-tipo="significados"] .act-unir { gap: 18px; }
.lesson-detail-view .act-app[data-tipo="significados"] .act-col {
  position: relative;
  padding: 48px 12px 12px;
  border: 1px dashed color-mix(in srgb, var(--act) 38%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--act) 7%, rgba(255, 255, 255, .44));
}
.lesson-detail-view .act-app[data-tipo="significados"] .act-col::before {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--act);
}
.lesson-detail-view .act-app[data-tipo="significados"] .act-col:first-child::before { content: "EN · ENGLISH"; }
.lesson-detail-view .act-app[data-tipo="significados"] .act-col:last-child::before { content: "ES · ESPAÑOL"; }

/* Verdadero o falso: decision binaria con dos zonas visuales. */
.lesson-detail-view .act-app[data-tipo="vf"] .act-opciones {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lesson-detail-view .act-app[data-tipo="vf"] .act-opcion {
  min-height: 100px;
  justify-content: center;
  font-size: 1.08rem;
  font-weight: 800;
  text-align: center;
}
.lesson-detail-view .act-app[data-tipo="vf"] .act-opcion:first-child { background: rgba(32, 201, 151, .12); border-color: rgba(32, 201, 151, .32); }
.lesson-detail-view .act-app[data-tipo="vf"] .act-opcion:last-child { background: rgba(239, 71, 111, .1); border-color: rgba(239, 71, 111, .3); }

/* Escucha: una pequena pista visual de audio sin cambiar el reproductor. */
.lesson-detail-view .act-app[data-tipo="escucha"] .act-escena {
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, color-mix(in srgb, var(--act) 8%, transparent) 17px 20px),
    rgba(255, 255, 255, .58);
}
.lesson-detail-view .act-app[data-tipo="escucha"] .act-audio {
  min-height: 58px;
  padding-inline: 26px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--act) 22%, transparent);
}

/* Ordenar: la linea de armado se convierte en una mesa de piezas. */
.lesson-detail-view .act-app[data-tipo="oracion"] .act-linea {
  min-height: 86px;
  padding: 18px;
  border: 2px dashed color-mix(in srgb, var(--act) 45%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--act) 7%, rgba(255, 255, 255, .44));
}
.lesson-detail-view .act-app[data-tipo="oracion"] .act-banco {
  padding: 16px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .4);
}

/* Hablar: escenario central con el modelo como protagonista. */
.lesson-detail-view .act-app[data-tipo="habla"] .act-habla {
  display: grid;
  place-items: center;
  min-height: 240px;
}
.lesson-detail-view .act-app[data-tipo="habla"] .act-frase-modelo {
  max-width: 720px;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
}
.lesson-detail-view .act-app[data-tipo="habla"] .act-audio.sonando {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--act) 12%, transparent), 0 0 0 16px color-mix(in srgb, var(--act) 7%, transparent);
}

/* Completar y traducir: foco limpio en una sola respuesta. */
.lesson-detail-view .act-app[data-tipo="completa"] .act-input,
.lesson-detail-view .act-app[data-tipo="traduce"] .act-input {
  min-height: 62px;
  font-size: 1.18rem;
  border-color: color-mix(in srgb, var(--act) 30%, rgba(120, 130, 155, .22));
}

/* Escritura: superficie de cuaderno, aun dentro del vidrio. */
.lesson-detail-view .act-app[data-tipo="escribe"] .act-escena {
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(92, 112, 170, .09) 31px 32px),
    rgba(255, 255, 255, .64);
}

body.dark .lesson-detail-view .act-app[data-tipo="escucha"] .act-escena,
body.dark .lesson-detail-view .act-app[data-tipo="escribe"] .act-escena { background-color: rgba(12, 17, 30, .58); }

.lesson-detail-view .act-pie {
  min-height: 82px;
  padding: 16px 28px;
  background: rgba(255, 255, 255, .48);
  border-top-color: rgba(255, 255, 255, .68);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.lesson-detail-view .act-cta {
  min-width: 150px;
  border-radius: 12px;
}

@media (max-width: 900px) {
  .lesson-detail-view .act-cuerpo { grid-template-columns: 150px minmax(0, 1fr); padding-inline: 20px; }
  .lesson-detail-view .act-instruccion { min-height: 270px; padding: 18px; }
  .lesson-detail-view .act-escena { min-height: 270px; padding: 24px; }
}

@media (max-width: 700px) {
  .lesson-detail-view .act-app { min-height: 0; border-radius: 16px; }
  .lesson-detail-view .act-cuerpo { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .lesson-detail-view .act-instruccion {
    min-height: 92px;
    align-items: flex-end;
    padding: 18px 18px 16px 116px;
  }
  .lesson-detail-view .act-instruccion::before { width: 58px; height: 58px; top: 14px; left: 20px; border-width: 8px; }
  .lesson-detail-view .act-instruccion::after { top: 76px; left: 22px; width: 48px; height: 4px; box-shadow: none; }
  .lesson-detail-view .act-escena { min-height: 300px; padding: 20px 16px; }
  .lesson-detail-view .act-app[data-tipo="significados"] .act-unir { gap: 8px; }
  .lesson-detail-view .act-app[data-tipo="significados"] .act-col { padding: 42px 7px 7px; }
  .lesson-detail-view .act-app[data-tipo="vf"] .act-opciones { grid-template-columns: 1fr; }
  .lesson-detail-view .act-app[data-tipo="vf"] .act-opcion { min-height: 72px; }
  .lesson-detail-view .act-pie { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-detail-view .act-escena { animation: none; }
  .lesson-detail-view .act-opcion:hover:not(:disabled),
  .lesson-detail-view .act-chip:hover:not(.ok),
  .lesson-detail-view .act-palabra:hover:not(:disabled) { transform: none; }
}

/* ── ZONA APARTE PARA LA RULETA ──────────────────────────────────────────────
   Vive justo debajo de la barra de racha, separada del cuadro de ejercicio
   normal: más grande, con su propio fondo saturado y borroso (glassmorphism
   reforzado), para que el reto final se sienta como su propio módulo. */
.act-ruleta-zona[hidden] {
  display: none;
}

.act-ruleta-zona {
  margin: 4px 18px 0;
  padding: 28px 22px 24px;
  border-radius: 20px;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .22));
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .6),
    inset -1px -1px 0 rgba(30, 35, 60, .06),
    0 18px 46px rgba(45, 54, 88, .14);
}

/* Ruleta INDEPENDIENTE (11/09/2026): módulo aparte, no gated por terminar
   la racha. No tiene sentido de progreso "16 pasos" aquí, así que se oculta
   la barra/racha de arriba — su propio texto interno ("Gira y completa las
   6 estaciones") ya explica qué hacer. */
.act-app-ruleta-standalone > .act-top {
  display: none;
}
.act-app-ruleta-standalone .act-ruleta-zona {
  margin-top: 18px;
}

/* Las reglas de layout no deben anular el atributo hidden del reproductor. */
.act-ruleta-zona[hidden],
.act-cuerpo[hidden],
.act-fase[hidden],
.act-racha[hidden] {
  display: none !important;
}

body.dark .act-ruleta-zona {
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  border-color: rgba(255, 255, 255, .12);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .1),
    inset -1px -1px 0 rgba(0, 0, 0, .3),
    0 18px 46px rgba(0, 0, 0, .35);
}

/* #actInstruccion se reutiliza aquí adentro (se reparenta el mismo nodo,
   no se clona), pero la tarjeta decorativa grande de Codex para esta clase
   (fondo, min-height, ícono ::before/::after) no aplica a este contexto
   compacto — se anula explícitamente. */
.act-ruleta-zona #actInstruccion {
  display: block;
  position: static;
  min-height: 0;
  margin: 0 0 10px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: inherit;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: normal;
  text-transform: none;
  overflow: visible;
}

.act-ruleta-zona #actInstruccion::before,
.act-ruleta-zona #actInstruccion::after {
  content: none;
  display: none;
}

@media (max-width: 640px) {
  .act-ruleta-zona { margin: 4px 10px 0; padding: 20px 14px 18px; min-height: 400px; }
}

/* Ruleta dentro del reproductor */
.act-escena.tipo-ruleta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#ruleta-host {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* La ruleta (ruleta.js) viene pensada para pantalla completa (480px, overlay
   de cuenta regresiva a pantalla completa). Aquí va dentro de la tarjeta de
   la lección, mucho más angosta — se reduce a un tamaño que quepa. */
#ruleta-host .ruleta-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
#ruleta-host .ruleta-container {
  width: min(300px, 72vw);
  height: min(300px, 72vw);
  margin: 0 auto 14px;
}
#ruleta-host .ruleta-pointer {
  top: -18px;
  border-left-width: 14px;
  border-right-width: 14px;
  border-top-width: 26px;
}
#ruleta-host .ruleta-btn {
  padding: 12px 28px;
  font-size: 1rem;
}
#ruleta-host .ruleta-resultado {
  font-size: 1.1rem;
  min-height: 34px;
}

/* Estación activa: al caer la ruleta en un color, la tarjeta se tiñe de ese
   color y "aparece" con una pequeña animación — así se siente que abriste
   un cuadro específico, no que solo cambió el ejercicio de siempre. */
.act-escena.ruleta-estacion-activa {
  border: 2.5px solid var(--station-color, #7439f6);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--station-color, #7439f6) 16%, transparent),
              0 14px 32px color-mix(in srgb, var(--station-color, #7439f6) 24%, transparent);
  background: color-mix(in srgb, var(--station-color, #7439f6) 7%, var(--surface, #fff));
  animation: ruletaEstacionAbrir .38s cubic-bezier(.2, .9, .3, 1.3) both;
}

@keyframes ruletaEstacionAbrir {
  0% { opacity: 0; transform: scale(.9) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

body.dark .act-escena.ruleta-estacion-activa {
  background: color-mix(in srgb, var(--station-color, #7439f6) 14%, #12162a);
}

/* Celebración al completar las 6 estaciones */
.ruleta-fin-anim {
  animation: ruletaFinPop .5s cubic-bezier(.2, .9, .3, 1.3) both;
}
.ruleta-fin-anim .act-fin-icono { animation: ruletaFinGiro 1s ease .1s 1; }

@keyframes ruletaFinPop {
  0% { opacity: 0; transform: scale(.85); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ruletaFinGiro {
  0% { transform: rotate(0deg) scale(1); }
  40% { transform: rotate(-12deg) scale(1.15); }
  70% { transform: rotate(10deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .act-escena.ruleta-estacion-activa, .ruleta-fin-anim, .ruleta-fin-anim .act-fin-icono { animation: none; }
}