/* ============================================================================
   VISION ENGLISH — LECCIÓN: GLASSMORPHISM NEÓN
   ----------------------------------------------------------------------------
   Rediseño minimalista de la vista de lección y de las secciones de nivel.
   Cada nivel central tiene su propio neón:
       Basic (A1/A2)  → ámbar/dorado
       Intermediate   → rojo/rosa
       Advanced       → violeta/cian

   Vive en su propio archivo A PROPÓSITO: las figuras geométricas del camino
   (cubo/rombo/esfera) las trabaja Codex dentro de styles.css. Manteniendo el
   rediseño de la lección aquí, los dos podemos editar sin pisarnos.
   Ver QUIEN-TOCA-QUE.md.
   ========================================================================= */

/* ── Paleta neón por nivel ───────────────────────────────────────────────── */
.lesson-detail-view,
#level-basic {
  --neon: hsl(38, 100%, 58%);
  --neon-2: hsl(24, 100%, 62%);
  --neon-soft: hsla(38, 100%, 58%, .16);
}

#level-intermediate {
  --neon: hsl(348, 100%, 62%);
  --neon-2: hsl(320, 95%, 60%);
  --neon-soft: hsla(348, 100%, 62%, .16);
}

#level-advanced {
  --neon: hsl(272, 100%, 68%);
  --neon-2: hsl(187, 100%, 55%);
  --neon-soft: hsla(272, 100%, 68%, .18);
}

/* La lección hereda el neón del nivel al que pertenece. */
.lesson-detail-view[data-nivel="A1"],
.lesson-detail-view[data-nivel="A2"] {
  --neon: hsl(38, 100%, 58%); --neon-2: hsl(24, 100%, 62%);
  --neon-soft: hsla(38, 100%, 58%, .16);
}
.lesson-detail-view[data-nivel="B1"],
.lesson-detail-view[data-nivel="B2"] {
  --neon: hsl(348, 100%, 62%); --neon-2: hsl(320, 95%, 60%);
  --neon-soft: hsla(348, 100%, 62%, .16);
}
.lesson-detail-view[data-nivel="C1"],
.lesson-detail-view[data-nivel="C2"] {
  --neon: hsl(272, 100%, 68%); --neon-2: hsl(187, 100%, 55%);
  --neon-soft: hsla(272, 100%, 68%, .18);
}

/* ── Superficie de cristal ───────────────────────────────────────────────── */
.lesson-detail-view .lesson-section,
.lesson-detail-view .lesson-header {
  background: linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,.4));
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 22px;
  /* Mismo principio que la ficha: luz arriba, grosor de cristal abajo,
     y una sombra exterior gris que lo separa del fondo. */
  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 14px 40px rgba(45,54,88,.08);
  transition: border-color .25s, box-shadow .25s;
}

body.dark .lesson-detail-view .lesson-section,
body.dark .lesson-detail-view .lesson-header {
  background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.13),
    inset -1px -1px 0 rgba(0,0,0,.28),
    0 4px 18px rgba(0,0,0,.3),
    0 14px 40px rgba(0,0,0,.32);
}

/* Un hilo de neón al borde superior: marca el nivel sin ensuciar el diseño. */
.lesson-detail-view .lesson-section {
  position: relative;
  overflow: hidden;
}
.lesson-detail-view .lesson-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon), var(--neon-2), transparent);
  opacity: .38;
}

.lesson-detail-view .lesson-section:hover {
  border-color: var(--neon-soft);
  box-shadow: 0 12px 40px rgba(45,54,88,.13), 0 0 0 1px var(--neon-soft);
}
body.dark .lesson-detail-view .lesson-section:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 22px -6px var(--neon);
}

/* ── Títulos minimalistas ────────────────────────────────────────────────── */
.lesson-detail-view .lesson-section h2 {
  font-size: 1.06rem;
  letter-spacing: -.01em;
  margin-bottom: 12px;
}

.lesson-detail-view .lesson-header h1 {
  letter-spacing: -.02em;
}

/* La cinta de meta datos (tiempo / nivel / XP) como píldoras de cristal. */
.lesson-detail-view .lesson-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--neon-soft);
  border: 1px solid transparent;
  font-size: .82rem;
  font-weight: 700;
  opacity: .82;
}

/* ── Recorrido de la lección (Descubre / Practica / Demuestra) ───────────── */
.lesson-detail-view .lesson-session-roadmap {
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,.7), rgba(255,255,255,.45));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.6);
}
body.dark .lesson-detail-view .lesson-session-roadmap {
  background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.1);
}

.lesson-detail-view .lesson-roadmap-step.active {
  background: var(--neon-soft);
  box-shadow: inset 3px 0 0 var(--neon);
}

.lesson-detail-view .lesson-roadmap-number {
  background: linear-gradient(135deg, var(--neon), var(--neon-2));
  color: #fff;
  border: 0;
}

/* ── Caja de explicación ─────────────────────────────────────────────────── */
.lesson-detail-view .explanation-box {
  border-left: 3px solid var(--neon);
  background: var(--neon-soft);
  border-radius: 0 14px 14px 0;
  padding: 14px 16px;
}

/* ── Botones del taller ──────────────────────────────────────────────────── */
.lesson-detail-view .lesson-lab-primary,
.lesson-detail-view .lesson-lab-tab.active {
  background: linear-gradient(135deg, var(--neon), var(--neon-2));
  border: 0;
  color: #fff;
  box-shadow: 0 8px 22px -6px var(--neon);
}

.lesson-detail-view .lesson-lab-tab {
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* ============================================================================
   SALPICADURAS DE FONDO
   ----------------------------------------------------------------------------
   El glassmorphism necesita ALGO detrás que desenfocar. Sobre un fondo blanco
   liso el vidrio no se lee como vidrio: se lee como papel. Estas manchas de
   color van por debajo de todo, en posiciones y tamaños irregulares a
   propósito, y son lo que el desenfoque convierte en reflejo.

   No se ven directamente: se ven A TRAVÉS de las tarjetas.
   ========================================================================= */

.lesson-detail-view {
  position: relative;
  isolation: isolate;
}

.lesson-detail-view::before {
  content: "";
  position: absolute;
  inset: -40px -20px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle 240px at 8% 4%,    hsla(38, 96%, 62%, .22), transparent 68%),
    radial-gradient(circle 170px at 92% 13%,  hsla(266, 88%, 66%, .18), transparent 70%),
    radial-gradient(circle 130px at 24% 31%,  hsla(330, 84%, 62%, .13), transparent 72%),
    radial-gradient(circle 300px at 78% 44%,  hsla(196, 92%, 58%, .15), transparent 70%),
    radial-gradient(circle 110px at 5% 57%,   hsla(160, 70%, 50%, .16), transparent 70%),
    radial-gradient(circle 200px at 61% 69%,  hsla(24, 94%, 60%, .14), transparent 72%),
    radial-gradient(circle 150px at 15% 82%,  hsla(286, 80%, 64%, .15), transparent 70%),
    radial-gradient(circle 240px at 95% 91%,  hsla(206, 90%, 58%, .13), transparent 70%);
  background-repeat: no-repeat;
  filter: blur(6px);
}

body.dark .lesson-detail-view::before { opacity: .55; }

/* Las tarjetas van por encima de las manchas. */
.lesson-detail-view .lesson-section,
.lesson-detail-view .lesson-header,
.lesson-detail-view .lesson-session-roadmap,
.lesson-detail-view .act-app {
  position: relative;
  z-index: 1;
}

/* ============================================================================
   FICHA DE ESTUDIO
   ----------------------------------------------------------------------------
   Misma información en todas las lecciones, pero NO con la misma forma: si
   los cinco bloques fueran rectángulos apilados del mismo ancho, la ficha se
   leería como una lista infinita. Aquí la forma va cambiando:

       ancho completo   →  "al terminar vas a poder"
       dos columnas     →  la idea | cuidado con esto
       rejilla interna  →  cómo se forma (tabla a dos columnas)
       tarjetas         →  palabras clave

   Los colores van difuminados a propósito: el neón del nivel se usa como un
   velo suave detrás del vidrio, no como fondo sólido. Antes brillaba tanto
   que cansaba leerlo.
   ========================================================================= */

.ficha-leccion {
  padding: 0 !important;
  overflow: hidden;
  display: grid;
  gap: 1px;
  background: var(--line, rgba(111, 122, 157, .1));
}

.ficha-bloque {
  padding: 20px 22px;
  background: var(--surface-strong, #fff);
}
body.dark .ficha-bloque { background: rgba(22, 24, 38, .92); }

/* El vidrio va SOLO en dos bloques: los que hay que mirar dos veces. */
.ficha-vidrio {
  position: relative;
  background:
    linear-gradient(135deg, var(--velo-a, transparent), var(--velo-b, transparent)),
    rgba(255, 255, 255, .42);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);

  /* El borde del vidrio: luz arriba-izquierda (donde pega la luz), sombra
     gris abajo-derecha (el grosor del cristal), y una sombra exterior corta
     que lo despega del fondo. Sin esto se ve plano, no de vidrio. */
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, .72),
    inset -1.5px -1.5px 0 rgba(30, 35, 60, .09),
    inset 0 0 22px rgba(255, 255, 255, .28),
    0 3px 14px rgba(20, 24, 45, .11);
}

/* El delineado va en un pseudo-elemento para poder degradarlo: más marcado
   arriba, casi invisible abajo. Un borde plano no se ve como cristal. */
.ficha-vidrio::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(150deg,
      rgba(255, 255, 255, .85),
      rgba(255, 255, 255, .12) 42%,
      rgba(40, 45, 70, .10) 100%) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

body.dark .ficha-vidrio {
  background:
    linear-gradient(135deg, var(--velo-a, transparent), var(--velo-b, transparent)),
    rgba(255, 255, 255, .05);
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, .16),
    inset -1.5px -1.5px 0 rgba(0, 0, 0, .3),
    inset 0 0 22px rgba(255, 255, 255, .04),
    0 3px 16px rgba(0, 0, 0, .35);
}
body.dark .ficha-vidrio::after {
  background: linear-gradient(150deg,
      rgba(255, 255, 255, .3),
      rgba(255, 255, 255, .05) 42%,
      rgba(0, 0, 0, .35) 100%) border-box;
}

.ficha-etiqueta {
  display: block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .75;
  margin-bottom: 10px;
}

/* ── Ancho completo: lo que vas a poder hacer ────────────────────────────── */
/* La etiqueta se va al COSTADO, no encima: rompe la columna central y hace
   que el ojo entre por la izquierda en vez de bajar en línea recta. */
.ficha-puedo {
  --velo-a: rgba(128, 128, 128, .06);
  --velo-a: color-mix(in srgb, var(--neon) 10%, transparent);
  --velo-b: transparent;
  display: grid;
  grid-template-columns: minmax(104px, 148px) 1fr;
  gap: 22px;
  align-items: center;
}
.ficha-puedo .ficha-etiqueta {
  margin-bottom: 0;
  line-height: 1.5;
  text-align: right;
  border-right: 2px solid;
  border-image: linear-gradient(180deg, transparent, currentColor, transparent) 1;
  padding-right: 14px;
}

/* La tabla también: rótulo al lado, contenido a la derecha. */
.ficha-patron-caja {
  display: grid;
  grid-template-columns: minmax(104px, 148px) 1fr;
  gap: 22px;
  align-items: start;
}
.ficha-patron-caja .ficha-etiqueta {
  margin-bottom: 0;
  text-align: right;
  padding-top: 4px;
}
.ficha-puedo .ficha-etiqueta {
  color: var(--neon);
  opacity: .85;
}
.ficha-puedo-texto {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
}

/* ── Dos columnas: la idea junto al error ────────────────────────────────── */
.ficha-doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}

.ficha-idea {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--text);
}

.ficha-cuidado {
  --velo-a: hsla(354, 70%, 58%, .06);
  --velo-b: transparent;
}
.ficha-cuidado .ficha-etiqueta { color: hsl(354, 55%, 52%); opacity: .8; }

.ficha-mal, .ficha-bien {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 6px;
  font-size: .95rem;
  font-weight: 600;
}
.ficha-mal {
  color: hsl(354, 45%, 50%);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: .85;
}
.ficha-bien { color: hsl(155, 45%, 38%); }
body.dark .ficha-mal { color: hsl(354, 65%, 74%); }
body.dark .ficha-bien { color: hsl(155, 55%, 64%); }

.ficha-mal span, .ficha-bien span {
  font-weight: 800;
  text-decoration: none;
  flex-shrink: 0;
  opacity: .7;
}

.ficha-porque {
  margin: 10px 0 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--text-secondary, var(--muted));
}

/* ── Rejilla interna: la tabla se parte en dos columnas ──────────────────── */
.ficha-patron {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ficha-fila {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(128, 128, 128, .05);
  border: 1px solid rgba(128, 128, 128, .12);
  background: color-mix(in srgb, var(--neon) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--neon) 12%, transparent);
}

.ficha-forma {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  opacity: .92;
}

.ficha-uso {
  font-size: .84rem;
  line-height: 1.45;
  color: var(--text-secondary, var(--muted));
}

/* ── Tarjetas cuadradas: el vocabulario ──────────────────────────────────── */
.ficha-palabras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
}

.ficha-palabra {
  position: relative;
  padding: 13px 14px;
  border-radius: 14px;
  background: rgba(128, 128, 128, .06);
  border: 1px solid rgba(128, 128, 128, .13);
  background: color-mix(in srgb, var(--neon) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--neon) 13%, transparent);
  transition: border-color .18s, transform .18s;
}
.ficha-palabra:hover {
  border-color: color-mix(in srgb, var(--neon) 32%, transparent);
  transform: translateY(-2px);
}

.ficha-palabra strong {
  display: block;
  font-size: 1rem;
  padding-right: 26px;
}

.ficha-palabra-es {
  display: block;
  font-size: .86rem;
  color: var(--text-secondary, var(--muted));
  margin-top: 1px;
}

.ficha-oir {
  position: absolute;
  top: 9px; right: 9px;
  width: 26px; height: 26px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  font-size: .8rem;
  line-height: 1;
  opacity: .45;
  transition: opacity .15s, background .15s;
}
.ficha-palabra:hover .ficha-oir { opacity: 1; }
.ficha-oir:hover { background: color-mix(in srgb, var(--neon) 16%, transparent); }
.ficha-oir.sonando { opacity: 1; animation: vcPulso 1.1s ease-in-out infinite; }

.ficha-nota {
  display: block;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(128, 128, 128, .14);
  border-top: 1px solid color-mix(in srgb, var(--neon) 12%, transparent);
  font-size: .79rem;
  line-height: 1.45;
  color: var(--text-secondary, var(--muted));
  opacity: .9;
}

/* ── Teléfono: todo vuelve a una sola columna ────────────────────────────── */
@media (max-width: 760px) {
  .ficha-doble { grid-template-columns: 1fr; }
  .ficha-puedo, .ficha-patron-caja { grid-template-columns: 1fr; gap: 10px; }
  .ficha-puedo .ficha-etiqueta,
  .ficha-patron-caja .ficha-etiqueta {
    text-align: left; border-right: 0; padding-right: 0; margin-bottom: 8px;
  }
  .ficha-patron { grid-template-columns: 1fr; }
  .ficha-bloque { padding: 16px 17px; }
  .ficha-puedo-texto { font-size: 1.06rem; }
  .ficha-palabras { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .ficha-palabra:hover { transform: none; }
  .ficha-oir.sonando { animation: none; }
}

/* ============================================================================
   EXPERIENCIA DE LECCION V2 — COMPOSICION ABIERTA Y BILINGUE
   ----------------------------------------------------------------------------
   Solo cambia presentacion. La ficha, sus textos y el reproductor conservan
   la estructura y los datos existentes.
   ========================================================================= */

.lesson-detail-view.active {
  --lesson-glass: rgba(255, 255, 255, .58);
  --lesson-glass-strong: rgba(255, 255, 255, .76);
  --lesson-glass-line: rgba(255, 255, 255, .82);
  --lesson-shadow: 0 18px 50px rgba(34, 42, 72, .12);
  min-height: 100vh;
  padding: clamp(16px, 2.4vw, 34px) clamp(14px, 3vw, 42px) 72px;
  background-color: #f7f9ff;
  background-image:
    linear-gradient(118deg, color-mix(in srgb, var(--neon) 13%, transparent) 0 18%, transparent 18% 66%, color-mix(in srgb, var(--neon-2) 12%, transparent) 66% 100%),
    repeating-linear-gradient(90deg, rgba(92, 105, 150, .035) 0 1px, transparent 1px 88px),
    linear-gradient(180deg, #fbfcff 0%, #f4f7ff 52%, #f8fbff 100%);
  overflow-x: clip;
}

.lesson-detail-view.active::before {
  inset: 0;
  filter: none;
  opacity: 1;
  background:
    linear-gradient(152deg, transparent 0 34%, color-mix(in srgb, var(--neon) 8%, transparent) 34% 49%, transparent 49% 100%),
    linear-gradient(24deg, transparent 0 70%, color-mix(in srgb, var(--neon-2) 8%, transparent) 70% 82%, transparent 82% 100%);
}

.lesson-detail-view[data-nivel="B1"].active,
.lesson-detail-view[data-nivel="B2"].active {
  background-color: #fff8fb;
  background-image:
    linear-gradient(118deg, rgba(239, 71, 111, .11) 0 18%, transparent 18% 68%, rgba(24, 201, 160, .09) 68% 100%),
    repeating-linear-gradient(90deg, rgba(112, 64, 92, .035) 0 1px, transparent 1px 88px),
    linear-gradient(180deg, #fffafb, #f9f8ff 55%, #f7fcfb);
}

.lesson-detail-view[data-nivel="C1"].active,
.lesson-detail-view[data-nivel="C2"].active {
  background-color: #f8f7ff;
  background-image:
    linear-gradient(118deg, rgba(145, 77, 255, .12) 0 18%, transparent 18% 68%, rgba(0, 198, 214, .11) 68% 100%),
    repeating-linear-gradient(90deg, rgba(74, 65, 130, .04) 0 1px, transparent 1px 88px),
    linear-gradient(180deg, #fbfaff, #f5f9ff 54%, #f6fffd);
}

body.dark .lesson-detail-view.active {
  --lesson-glass: rgba(22, 27, 42, .62);
  --lesson-glass-strong: rgba(26, 31, 49, .82);
  --lesson-glass-line: rgba(255, 255, 255, .12);
  --lesson-shadow: 0 20px 58px rgba(0, 0, 0, .35);
  background-color: #111522;
  background-image:
    linear-gradient(118deg, color-mix(in srgb, var(--neon) 13%, transparent) 0 18%, transparent 18% 68%, color-mix(in srgb, var(--neon-2) 12%, transparent) 68% 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 88px),
    linear-gradient(180deg, #111522, #151a2a 58%, #101722);
}

.lesson-detail-view .lesson-header,
.lesson-detail-view .lesson-session-roadmap,
.lesson-detail-view .ficha-leccion,
.lesson-detail-view #actividadesLeccion {
  width: min(100%, 1180px);
  margin-left: auto;
  margin-right: auto;
}

.lesson-detail-view .lesson-header {
  position: sticky;
  top: 12px;
  z-index: 20;
  min-height: 112px;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--lesson-glass-strong), var(--lesson-glass));
  border: 1px solid var(--lesson-glass-line);
  border-radius: 20px;
  box-shadow: var(--lesson-shadow), inset 0 1px 0 rgba(255, 255, 255, .72);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
}

.lesson-detail-view .lesson-header::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--neon), var(--neon-2), transparent 82%);
  border-radius: 999px;
  opacity: .72;
}

.lesson-detail-view .lesson-info h1,
.lesson-detail-view .lesson-section h2,
.lesson-detail-view .ficha-puedo-texto {
  letter-spacing: 0;
}

.lesson-detail-view .lesson-info h1 {
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.lesson-detail-view .lesson-meta span {
  background: rgba(255, 255, 255, .46);
  border-color: color-mix(in srgb, var(--neon) 24%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.dark .lesson-detail-view .lesson-meta span { background: rgba(255, 255, 255, .06); }

.lesson-detail-view .lesson-progress-ring {
  background: linear-gradient(135deg, var(--neon), var(--neon-2));
  color: #151827;
  border: 1px solid rgba(255, 255, 255, .66);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--neon) 32%, transparent);
}

.lesson-detail-view .lesson-session-roadmap {
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 8px;
  gap: 8px;
  background: rgba(255, 255, 255, .4);
  border: 1px solid var(--lesson-glass-line);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(42, 52, 82, .08);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

body.dark .lesson-detail-view .lesson-session-roadmap { background: rgba(18, 23, 38, .54); }

.lesson-detail-view .lesson-roadmap-step {
  min-height: 74px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.lesson-detail-view .lesson-roadmap-step:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--neon) 26%, transparent);
  background: rgba(255, 255, 255, .44);
}

.lesson-detail-view .lesson-roadmap-step.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon) 17%, white), rgba(255, 255, 255, .58));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neon) 28%, transparent), 0 8px 20px color-mix(in srgb, var(--neon) 12%, transparent);
}

/* La ficha deja de ser un rectangulo apilado: usa una reticula de 12 columnas. */
.lesson-detail-view .ficha-leccion {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  overflow: visible;
  padding: 0 !important;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.lesson-detail-view .ficha-leccion::before { display: none; }

.lesson-detail-view .ficha-bloque,
.lesson-detail-view .ficha-doble {
  min-width: 0;
  border-radius: 18px;
}

.lesson-detail-view .ficha-bloque {
  position: relative;
  overflow: hidden;
  padding: 24px;
  background: linear-gradient(145deg, var(--lesson-glass-strong), var(--lesson-glass));
  border: 1px solid var(--lesson-glass-line);
  box-shadow: var(--lesson-shadow), inset 0 1px 0 rgba(255, 255, 255, .72);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

body.dark .lesson-detail-view .ficha-bloque {
  background: linear-gradient(145deg, var(--lesson-glass-strong), var(--lesson-glass));
  box-shadow: var(--lesson-shadow), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.lesson-detail-view .ficha-bloque::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--neon), var(--neon-2));
  opacity: .72;
}

.lesson-detail-view .ficha-puedo {
  grid-column: 1 / -1;
  min-height: 116px;
  padding: 26px 32px;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--neon) 17%, var(--lesson-glass-strong)), var(--lesson-glass) 56%, color-mix(in srgb, var(--neon-2) 11%, var(--lesson-glass)));
  animation: lessonGlassIn .5s cubic-bezier(.2, .8, .2, 1) both;
}

.lesson-detail-view .ficha-doble {
  grid-column: 1 / 8;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  background: transparent;
}

.lesson-detail-view .ficha-patron-caja {
  grid-column: 8 / -1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lesson-detail-view .ficha-palabras-caja { grid-column: 1 / -1; }

/* Intermediate invierte el peso visual; Advanced equilibra ambos lados. */
.lesson-detail-view[data-nivel="B1"] .ficha-doble,
.lesson-detail-view[data-nivel="B2"] .ficha-doble {
  grid-column: 6 / -1;
  grid-row: 2;
}

.lesson-detail-view[data-nivel="B1"] .ficha-patron-caja,
.lesson-detail-view[data-nivel="B2"] .ficha-patron-caja {
  grid-column: 1 / 6;
  grid-row: 2;
}

.lesson-detail-view[data-nivel="C1"] .ficha-doble,
.lesson-detail-view[data-nivel="C2"] .ficha-doble { grid-column: 1 / 7; }
.lesson-detail-view[data-nivel="C1"] .ficha-patron-caja,
.lesson-detail-view[data-nivel="C2"] .ficha-patron-caja { grid-column: 7 / -1; }

.lesson-detail-view .ficha-puedo .ficha-etiqueta,
.lesson-detail-view .ficha-patron-caja .ficha-etiqueta {
  text-align: left;
  border: 0;
  padding: 0;
}

.lesson-detail-view .ficha-puedo-texto {
  max-width: 820px;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
}

.lesson-detail-view .ficha-etiqueta {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 14px;
  padding: 6px 10px;
  color: color-mix(in srgb, var(--neon) 70%, #20263a);
  background: color-mix(in srgb, var(--neon) 11%, rgba(255, 255, 255, .58));
  border: 1px solid color-mix(in srgb, var(--neon) 22%, transparent);
  border-radius: 999px;
  opacity: 1;
  letter-spacing: .06em;
}

.lesson-detail-view .ficha-cuidado::before { background: linear-gradient(180deg, #ef476f, #ff8a5b); }
.lesson-detail-view .ficha-idea-caja::before { background: linear-gradient(180deg, #20c997, #22b8cf); }

.lesson-detail-view .ficha-patron {
  grid-template-columns: 1fr;
  gap: 10px;
}

.lesson-detail-view .ficha-fila {
  padding: 14px;
  background: rgba(255, 255, 255, .46);
  border-color: color-mix(in srgb, var(--neon) 18%, rgba(90, 100, 130, .12));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.dark .lesson-detail-view .ficha-fila { background: rgba(255, 255, 255, .045); }

.lesson-detail-view .ficha-fila:hover {
  transform: translateX(4px);
  border-color: color-mix(in srgb, var(--neon) 45%, transparent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--neon) 10%, transparent);
}

.lesson-detail-view .ficha-palabras {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.lesson-detail-view .ficha-palabra {
  min-height: 126px;
  padding: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .7), color-mix(in srgb, var(--neon) 8%, rgba(255, 255, 255, .42)));
  border-color: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 24px rgba(34, 42, 72, .08);
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, border-color .25s ease;
}

body.dark .lesson-detail-view .ficha-palabra { background: rgba(255, 255, 255, .055); }

.lesson-detail-view .ficha-palabra:hover {
  transform: perspective(700px) translateY(-5px) rotateX(2deg);
  box-shadow: 0 18px 32px color-mix(in srgb, var(--neon) 15%, rgba(34, 42, 72, .1));
}

.lesson-detail-view .ficha-oir {
  width: 34px;
  height: 34px;
  background: color-mix(in srgb, var(--neon) 12%, rgba(255, 255, 255, .7));
  border: 1px solid color-mix(in srgb, var(--neon) 18%, transparent);
  opacity: .78;
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
}

.lesson-detail-view .ficha-oir:hover {
  transform: scale(1.08);
  background: color-mix(in srgb, var(--neon) 24%, rgba(255, 255, 255, .72));
}

@keyframes lessonGlassIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .lesson-detail-view .ficha-doble,
  .lesson-detail-view .ficha-patron-caja,
  .lesson-detail-view[data-nivel] .ficha-doble,
  .lesson-detail-view[data-nivel] .ficha-patron-caja {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .lesson-detail-view .ficha-palabras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .lesson-detail-view.active { padding: 10px 10px 90px; }
  .lesson-detail-view .lesson-header {
    top: 8px;
    min-height: 0;
    padding: 14px;
    border-radius: 16px;
  }
  .lesson-detail-view .lesson-session-roadmap {
    margin-top: 14px;
    grid-template-columns: 1fr 1fr 1fr;
    overflow-x: auto;
  }
  .lesson-detail-view .lesson-roadmap-step {
    min-width: 150px;
    min-height: 68px;
    border-bottom: 0;
  }
  .lesson-detail-view .ficha-leccion { grid-template-columns: 1fr; gap: 12px; }
  .lesson-detail-view .ficha-puedo,
  .lesson-detail-view .ficha-doble,
  .lesson-detail-view .ficha-patron-caja,
  .lesson-detail-view .ficha-palabras-caja,
  .lesson-detail-view[data-nivel] .ficha-doble,
  .lesson-detail-view[data-nivel] .ficha-patron-caja { grid-column: 1; }
  .lesson-detail-view .ficha-bloque { padding: 18px; border-radius: 15px; }
  .lesson-detail-view .ficha-puedo { display: block; min-height: 0; }
  .lesson-detail-view .ficha-palabras { grid-template-columns: 1fr 1fr; gap: 9px; }
  .lesson-detail-view .ficha-palabra { min-height: 112px; padding: 14px; }
}

@media (max-width: 460px) {
  .lesson-detail-view .ficha-palabras { grid-template-columns: 1fr; }
  .lesson-detail-view .ficha-palabra { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-detail-view .ficha-puedo { animation: none; }
  .lesson-detail-view .ficha-fila:hover,
  .lesson-detail-view .ficha-palabra:hover,
  .lesson-detail-view .lesson-roadmap-step:hover { transform: none; }
}

/* ── OLLIE DE APOYO (pequeño, a un lado, sin estorbar) ───────────────────── */
/* Iker: "que aparezca Ollie a un lado en pequeña para cualquier cosa, que no
   estorbe en la página". Va pegado al costado de la lección, colapsado; solo
   crece cuando el alumno lo toca. */
.ollie-ayuda {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.ollie-ayuda > * { pointer-events: auto; }

.ollie-ayuda-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(150deg, rgba(255,255,255,.75), rgba(255,255,255,.5));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 8px 24px rgba(45,54,88,.16), 0 0 18px -8px var(--neon, hsl(272,100%,68%));
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
body.dark .ollie-ayuda-btn {
  background: linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 22px -6px var(--neon, hsl(272,100%,68%));
}
.ollie-ayuda-btn:hover { transform: scale(1.08); }

.ollie-ayuda-panel {
  width: min(280px, calc(100vw - 48px));
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(255,255,255,.85), rgba(255,255,255,.62));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 16px 44px rgba(45,54,88,.18);
  font-size: .9rem;
  line-height: 1.55;
}
body.dark .ollie-ayuda-panel {
  background: linear-gradient(150deg, rgba(28,28,42,.92), rgba(28,28,42,.78));
  border-color: rgba(255,255,255,.14);
  color: var(--text);
}
.ollie-ayuda-panel[hidden] { display: none; }

.ollie-ayuda-titulo {
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--neon, var(--purple));
  margin-bottom: 6px;
}

.ollie-ayuda-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.ollie-ayuda-acciones button {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ollie-ayuda-acciones button:hover {
  background: var(--neon-soft, rgba(124,58,237,.12));
  border-color: transparent;
}

/* En pantallas chicas Ollie baja a la esquina para no tapar el contenido. */
@media (max-width: 820px) {
  .ollie-ayuda {
    top: auto;
    bottom: 90px;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ollie-ayuda-btn { transition: none; }
}

/* ============================================================================
   MODO DISEÑO DE LAS FIGURAS — cuerpos limpios (31/08/2026)
   ----------------------------------------------------------------------------
   Iker pidió las figuras limpias: sin el triángulo de play y sin el punto
   blanco del centro. Ese punto es `.geo-icon`, un círculo de 33px con borde,
   sombra y fondo blanco que envuelve al símbolo — por eso quitar solo el
   triángulo dejaba el círculo vacío ahí plantado.

   Se oculta el contenedor entero, así que desaparecen de una vez el play, el
   ✓ de completada y el 🏆 del examen. Los cuerpos quedan lisos para poder
   trabajar el cubo, el rombo y la esfera.

   Va en ESTE archivo y no en styles.css porque Codex está editando ahora
   mismo `buildPathNode()` y el bloque de las figuras; si lo tocara ahí, uno
   de los dos perdería su trabajo. Es la pareja del interruptor
   `RUTA_SIN_CANDADOS` que está en script.js.

   Para devolver los símbolos: se borra esta regla. Nada más.
   ========================================================================= */

.geo-node .geo-icon {
  display: none !important;
}