.ej-listado,
.ej-jugar {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

/* 2026-07-13 (Eduardo): el contenido del ejercicio (titulo, pista, palabra,
   teclado, opciones...) iba pegado a la izquierda - centrado igual que ya
   esta centrado el contenedor entero (.ej-jugar ya tenia margin:0 auto,
   pero el TEXTO dentro no). Solo en .ej-jugar, no en .ej-listado (esa es
   una rejilla/lista que si debe quedarse alineada a la izquierda). */
.ej-jugar { text-align: center; }
.ej-jugar .ej-acciones,
.ej-jugar .ej-orden-banco,
.ej-jugar .ej-orden-destino,
.ej-jugar .ej-opciones,
.ej-jugar .ej-emparejar,
.ej-jugar .ej-vf {
  justify-content: center;
}

/* Pantalla "ejercicio bloqueado" - antes reutilizaba .ej-jugar (pensada
   para el juego en sí, con poco margen) y quedaba muy apretada para un
   simple mensaje + CTA. Layout propio, centrado, con más aire. */
.ej-bloqueado {
  max-width: 520px;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 60vh;
  justify-content: center;
}
.ej-bloqueado__icono { font-size: 3rem; margin-bottom: 1.2rem; }
.ej-bloqueado h1 { font-size: 1.5rem; margin: 0 0 1rem; color: var(--t-text); }
.ej-bloqueado__texto { color: var(--t-muted); line-height: 1.6; margin: 0 0 2rem; }
.ej-bloqueado__curso {
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  width: 100%;
}
.ej-bloqueado__curso-label { color: var(--t-muted); font-size: .82rem; margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .04em; }
.ej-bloqueado__curso-nombre { font-size: 1.15rem; font-weight: 700; color: var(--t-text); margin: 0 0 1rem; }
.ej-bloqueado__volver { color: var(--t-muted); text-decoration: none; font-size: .9rem; }
.ej-bloqueado__volver:hover { color: var(--t-accent); text-decoration: underline; }

/* Pantalla de juego a pantalla completa: el área de ejercicio ocupa todo
   el alto disponible del dispositivo (navbar incluida, footer oculto) y
   se centra verticalmente cuando el contenido no llega a llenarlo. dvh en
   vez de vh porque en móvil vh incluye la barra de direcciones del
   navegador, lo que deja un hueco/salto al hacer scroll. En vertical el
   dispositivo da más alto disponible que en horizontal (mismo cálculo,
   valores distintos) — no hace falta media query aparte, dvh ya se ajusta. */
body.ej-fullscreen { display: flex; flex-direction: column; min-height: 100dvh; }
body.ej-fullscreen .navbar { flex: 0 0 auto; }
body.ej-fullscreen .ej-layout {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}
body.ej-fullscreen .site-footer {
  display: none;
}

/* Ticket #276: panel lateral de traduccion/explicacion, a la derecha en
   horizontal (escritorio/tablet apaisado) - en movil vertical no cabe al
   lado sin apretar, asi que flex-wrap lo baja debajo automaticamente. */
.ej-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
  align-items: flex-start;
}
/* 2026-07-12: cuando el panel de apoyo (ej-panel-apoyo) todavia esta oculto
   (antes de responder), .ej-layout solo tiene un hijo visible - sin
   justify-content:center ese unico hijo se quedaba pegado a la izquierda
   del contenedor de 1080px en vez de centrado en la pantalla. */
.ej-layout > .ej-jugar { margin: 0; flex: 0 1 620px; max-width: 620px; width: 100%; }

.ej-panel-apoyo {
  flex: 1 1 260px;
  max-width: 320px;
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: 14px;
  padding: 1.25rem;
  margin-top: 1.5rem;
}

/* 2026-07-12: al terminar el ejercicio (acierto o intentos agotados), el
   panel sustituye al area de juego en vez de quedarse en su columna
   estrecha - ver ejercicios.js::mostrarPanelApoyo. */
.ej-panel-apoyo--protagonista {
  max-width: 100%;
  margin-top: 1rem;
  animation: ej-entrada .3s ease;
}
.ej-panel-apoyo__cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.ej-panel-apoyo__eyebrow {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .75rem;
  color: var(--t-accent);
  font-weight: 700;
}
.ej-panel-apoyo__ocultar {
  background: none;
  border: none;
  color: var(--t-muted);
  font-size: .74rem;
  text-decoration: underline;
  cursor: pointer;
  padding: .2rem;
  min-height: 32px;
}
.ej-panel-apoyo__ocultar:hover { color: var(--t-accent); }
.ej-panel-apoyo__traduccion { color: var(--t-text); font-weight: 600; margin: 0 0 .6rem; }
.ej-panel-apoyo__explicacion { color: var(--t-muted); font-size: .9rem; line-height: 1.5; margin: 0; }
.ej-panel-apoyo__regla { color: var(--t-muted); font-size: .88rem; margin: .6rem 0 0; }
.ej-panel-apoyo__regla a { color: var(--t-accent); font-weight: 600; }

.ej-pref-apoyo {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 1080px;
  margin: .75rem auto 3rem;
  padding: 0 1rem;
  font-size: .82rem;
  color: var(--t-muted);
  cursor: pointer;
}
.ej-pref-apoyo input { width: 16px; height: 16px; accent-color: var(--t-accent); cursor: pointer; }

@media (max-width: 780px) {
  .ej-panel-apoyo { max-width: 100%; }
}

.ej-listado h1,
.ej-jugar h1 { color: var(--t-text); }

.ej-filtros { margin: .75rem 0 1.25rem; }
.ej-filtros select {
  padding: .5rem .75rem; border: 1px solid var(--t-line); border-radius: .5rem;
  background: var(--t-panel); color: var(--t-text); font-size: 16px; font-weight: 600;
}

.ej-intro,
.ej-jugar__enunciado { color: var(--t-muted); }

/* 2026-07-12: el camino de habilidades era un link de texto plano perdido
   entre otros enlaces secundarios - Eduardo casi no lo veia. Ahora es un
   banner propio, mas prominente que los ej-link-glosario de alrededor pero
   sin llegar al peso visual de un .btn-primary/.ej-btn solido. */
.ej-camino-cta {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 1rem 0 .5rem;
  padding: 1rem 1.25rem;
  border-radius: .85rem;
  background: linear-gradient(135deg, var(--t-accent-faint, rgba(15,122,92,.1)), var(--t-panel));
  border: 1.5px solid var(--t-accent);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.ej-camino-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(15,122,92,.4); }
.ej-camino-cta__icono { font-size: 1.8rem; flex-shrink: 0; }
.ej-camino-cta__texto { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.ej-camino-cta__texto strong { color: var(--t-text); font-size: .98rem; }
.ej-camino-cta__texto span { color: var(--t-muted); font-size: .8rem; }
.ej-camino-cta__flecha { color: var(--t-accent); font-size: 1.3rem; flex-shrink: 0; }

/* 2026-07-12: .ej-link-glosario no tenia NINGUNA regla propia (solo se
   mencionaba en un comentario) - por eso examen final/glosario/reglas/
   practica tus fallos salian con el estilo azul subrayado por defecto del
   navegador, sin nada que ver con el resto de la pagina. Mismo patron de
   "pildora" ya usado en mi-academia (.portal__link-secundario). */
.ej-link-glosario {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .3rem .6rem .3rem 0;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: var(--t-accent-faint, rgba(15,122,92,.1));
  color: var(--t-accent);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.ej-link-glosario:hover {
  background: var(--t-accent);
  color: #fff;
  transform: translateY(-1px);
}

.ej-aviso,
.ej-empty {
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: 12px;
  padding: 1rem;
  color: var(--t-text);
}

.ej-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.ej-card {
  display: block;
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: 14px;
  padding: 1rem;
  text-decoration: none;
  color: var(--t-text);
  transition: transform .12s ease, box-shadow .12s ease;
}

.ej-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.ej-card h3 { margin: .4rem 0 .2rem; font-size: 1.05rem; }
.ej-card__nivel {
  display: inline-block;
  background: var(--t-accent);
  color: #fff;
  border-radius: 999px;
  padding: .1rem .6rem;
  font-size: .8rem;
  font-weight: 700;
}
.ej-card__tipo { color: var(--t-muted); margin: 0; font-size: .9rem; }
.ej-card--bloq { opacity: .55; }
.ej-bloq-titulo { margin-top: 2rem; font-size: 1.1rem; color: var(--t-muted); }

/* --- Jugar --- */
.ej-jugar__nivel { color: var(--t-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.ej-progreso-nivel { margin: .6rem 0 .8rem; }
.ej-progreso-nivel__barra {
  height: 8px;
  border-radius: 999px;
  background: var(--t-line, #e5e7eb);
  overflow: hidden;
}
.ej-progreso-nivel__relleno {
  height: 100%;
  background: var(--t-accent);
  border-radius: 999px;
  transition: width .3s ease;
}
.ej-progreso-nivel__texto { color: var(--t-muted); font-size: .8rem; margin: .35rem 0 0; }

/* --- Carrera de avatar: el avatar del alumno avanza sobre la barra de
   progreso del nivel, mismo dato (progreso_nivel.porcentaje) que ya
   existia, solo un pelin mas motivador que una barra sola. --- */
.ej-progreso-nivel__barra--carrera { overflow: visible; position: relative; }
.ej-progreso-nivel__avatar {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: left .4s ease;
  line-height: 0;
}

.ej-jugar__ya-completado {
  background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
  border-radius: 8px; padding: .5rem .75rem; font-size: .85rem; margin: .5rem 0 0;
}
.ej-frase { font-size: 1.3rem; margin: 1rem 0; color: var(--t-text); }

.ej-opciones,
.ej-orden-banco,
.ej-orden-destino,
.ej-teclado { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: 1rem 0; }
.ej-teclado__fila { display: flex; gap: .4rem; }

.ej-orden-destino {
  min-height: 3rem;
  border: 2px dashed var(--t-line);
  border-radius: 12px;
  padding: .6rem;
}
.ej-orden-etq { color: var(--t-muted); font-size: .9rem; margin-bottom: .3rem; }

.ej-orden-reiniciar {
  background: none;
  border: 1px solid var(--t-line);
  color: var(--t-muted);
  border-radius: 999px;
  padding: .4rem .9rem;
  font-size: .82rem;
  cursor: pointer;
  min-height: 44px;
}
.ej-orden-reiniciar:hover { border-color: var(--t-accent); color: var(--t-accent); }

.ej-opcion,
.ej-ficha,
.ej-tecla,
.ej-par {
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: 10px;
  padding: .5rem .9rem;
  color: var(--t-text);
  cursor: pointer;
  font-size: 1rem;
}
.ej-opcion.sel,
.ej-par.sel { background: var(--t-accent); color: #fff; border-color: var(--t-accent); }
.ej-tecla.usada { opacity: .4; }
.ej-tecla { width: 2.2rem; text-transform: uppercase; }

.ej-ahorcado-palabra { font-size: 1.6rem; letter-spacing: .3rem; font-family: monospace; }
.ej-ahorcado-input {
  margin-top: .8rem;
  padding: .5rem .8rem;
  border: 1px solid var(--t-line);
  border-radius: 10px;
  font-size: 1rem;
  width: 100%;
  max-width: 320px;
}

.ej-emparejar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.ej-col { display: flex; flex-direction: column; gap: .5rem; }
.ej-par { text-align: left; display: flex; justify-content: space-between; gap: .5rem; }
.ej-par.emparejado { border-color: var(--t-accent); }
.ej-par-asig { color: var(--t-accent); font-weight: 700; }

.ej-acciones { display: flex; gap: .8rem; margin-top: 1.5rem; }

.ej-levantar-mano {
  display: block;
  margin: .9rem auto 0;
  background: none;
  border: 1px dashed var(--t-line);
  color: var(--t-muted);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-size: .85rem;
  cursor: pointer;
  min-height: 44px;
}
.ej-levantar-mano:hover { border-color: var(--t-accent); color: var(--t-accent); }
.ej-btn {
  display: inline-block;
  background: var(--t-accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: .6rem 1.4rem;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
}
.ej-btn:disabled { opacity: .5; cursor: default; }
.ej-btn--ghost { background: transparent; color: var(--t-text); border: 1px solid var(--t-line); }
.ej-escuchar { display: inline-block; margin: .3rem 0 .8rem; }

.ej-resultado {
  margin-top: 1.2rem;
  padding: 1rem;
  border-radius: 12px;
  font-weight: 600;
}
.ej-resultado.ok { background: rgba(40, 167, 69, .15); color: #1e7e34; }
.ej-resultado.ko { background: rgba(220, 53, 69, .12); color: #b02a37; }

/* --- Siguiente ejercicio (encadenado, sin volver al listado) --- */
/* 2026-07-12: era un link de texto plano - Eduardo pidio "un boton bien
   bonito para continuar al siguiente nivel". Ahora un boton solido a todo
   lo ancho del panel, a juego con el resto de CTAs (.ej-btn/.btn-primary). */
.ej-siguiente {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1.25rem;
  padding: .85rem 1.5rem;
  background: var(--t-accent);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 14px -4px rgba(15, 122, 92, .45);
  transition: transform .15s, box-shadow .15s, background .15s;
  animation: ej-entrada .3s ease;
}
.ej-siguiente:hover {
  background: var(--t-accent-hover, var(--t-accent));
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -4px rgba(15, 122, 92, .55);
}

@keyframes ej-entrada {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Confeti al acertar --- */
.ej-confeti {
  position: fixed;
  top: -2rem;
  font-size: 1.6rem;
  z-index: 9999;
  pointer-events: none;
  animation: ej-caida 1.5s ease-in forwards;
}
@keyframes ej-caida {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

/* --- Tipos de ejercicio: icono distintivo en las tarjetas del listado --- */
.ej-card__icono { font-size: 1.5rem; display: block; margin-bottom: .25rem; }

/* --- Bloqueados: colapsable, no muro abierto --- */
.ej-bloq-toggle {
  margin-top: 2rem;
  background: none;
  border: 1px dashed var(--t-line);
  border-radius: 10px;
  padding: .6rem 1rem;
  color: var(--t-muted);
  cursor: pointer;
  font-size: .9rem;
  width: 100%;
  text-align: left;
}
.ej-bloq-toggle:hover { color: var(--t-text); }
.ej-grid--bloq { display: none; margin-top: 1rem; }
.ej-grid--bloq.abierto { display: grid; }

/* --- Arrastrar y soltar (Pointer Events) --- */
.ej-ficha,
.ej-par {
  touch-action: none; /* evita que el navegador haga scroll mientras se arrastra */
  user-select: none;
}
.ej-arrastrando {
  opacity: .85;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  cursor: grabbing;
}
.ej-drop-sobre {
  outline: 2px dashed var(--t-accent);
  outline-offset: 2px;
}

/* --- Ahorcado: feedback real de acierto/fallo por letra --- */
.ej-tecla.usada-ok { background: rgba(40, 167, 69, .2); border-color: #28a745; color: #1e7e34; }
.ej-tecla.usada-ko { background: rgba(220, 53, 69, .15); border-color: #dc3545; color: #b02a37; opacity: .7; }

/* --- Tamaños táctiles (min 44px recomendado por Apple/Google) --- */
.ej-opcion,
.ej-ficha,
.ej-par,
.ej-btn,
.ej-card {
  min-height: 44px;
}
.ej-tecla {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============ Responsive ============ */
@media (max-width: 640px) {
  .ej-listado, .ej-jugar { padding: 1rem .75rem 2.5rem; }

  .ej-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
  .ej-card { padding: .75rem; }
  .ej-card h3 { font-size: .95rem; }

  .ej-frase { font-size: 1.1rem; }
  .ej-opcion { flex: 1 1 40%; text-align: center; }

  .ej-emparejar { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .ej-par { padding: .5rem .5rem; font-size: .9rem; }

  /* nowrap a proposito: las 10 teclas de la fila QWERTY superior tienen que
     caber en una sola linea incluso en moviles estrechos, o dejan de
     parecer un teclado real y se ven como 4 filas sueltas. */
  .ej-teclado__fila { justify-content: center; flex-wrap: nowrap; gap: .25rem; }
  .ej-tecla { width: 1.9rem; height: 2.1rem; font-size: .78rem; padding: 0; }

  .ej-acciones { flex-direction: column; }
  .ej-acciones .ej-btn { width: 100%; text-align: center; }

  .ej-ahorcado-palabra { font-size: 1.3rem; letter-spacing: .2rem; }
}

/* --- Portal del alumno: tarjetas apiladas en movil (ya es auto-fit, solo ajusta stats) --- */
@media (max-width: 480px) {
  .portal__stats { flex-wrap: wrap; gap: 1rem; }
}

/* --- Memoria (cartas boca abajo) --- */
.ej-memoria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin: 1rem 0;
}
.ej-memoria-carta {
  aspect-ratio: 1 / 1;
  background: var(--t-accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.4rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .3rem;
  text-align: center;
  transition: transform .15s ease, background .15s ease;
}
.ej-memoria-carta.volteada {
  background: var(--t-panel);
  color: var(--t-text);
  border: 1px solid var(--t-accent);
  font-size: .95rem;
  transform: rotateY(0deg);
}
.ej-memoria-carta.emparejada {
  background: rgba(40, 167, 69, .15);
  border-color: #28a745;
  color: #1e7e34;
  cursor: default;
}
.ej-memoria-carta__texto { pointer-events: none; }

/* --- Iconos de altavoz/microfono sobre tarjetas (Memoria/Emparejar) --- */
.ej-voz-iconos {
  display: flex;
  gap: .25rem;
  margin-top: .25rem;
  justify-content: center;
}
.ej-voz-icono {
  background: rgba(255, 255, 255, .25);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1;
  padding: .2rem .35rem;
  cursor: pointer;
}
.ej-voz-icono:disabled { opacity: .6; cursor: wait; }
.ej-memoria-carta.volteada .ej-voz-icono { background: var(--t-accent-faint, #e4f5ee); }

/* --- Repetición / Sticker --- */
.ej-grabar { margin-top: .5rem; }
.ej-sticker-preview {
  font-size: 3.5rem;
  text-align: center;
  margin-bottom: .5rem;
  opacity: .35;
  filter: grayscale(1);
}
.ej-sticker-ganado {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  margin: .5rem 0;
  animation: ejStickerPop .5s ease;
}
@keyframes ejStickerPop {
  0% { transform: scale(.4); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* --- Detective de errores --- */
.ej-detective-instruccion { color: var(--t-muted); font-size: .95rem; margin-bottom: .25rem; }
.ej-detective-frase { line-height: 2.4; }
.ej-detective-palabra {
  display: inline-block;
  border: none;
  background: transparent;
  color: var(--t-text);
  font-size: 1.2rem;
  padding: 2px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.ej-detective-palabra:hover { background: var(--t-accent-faint, rgba(0,0,0,.05)); }
.ej-detective-palabra.sel { background: var(--t-accent, #0f7a5c); color: #fff; }

/* --- Simón dice --- */
.ej-simon-estado { color: var(--t-muted); font-size: .95rem; margin-bottom: .5rem; }
.ej-simon-escenario {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 800;
  border: 2px dashed var(--t-line);
  border-radius: 14px;
  margin-bottom: 1rem;
  color: var(--t-text);
}
.ej-simon-escenario.ej-simon-flash {
  border-color: var(--t-accent, #0f7a5c);
  background: var(--t-accent-faint, rgba(15,122,94,.08));
}
.ej-simon-botones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.ej-simon-btn {
  padding: .6rem 1.1rem;
  border-radius: 10px;
  border: 2px solid var(--t-line);
  background: var(--t-panel);
  color: var(--t-text);
  font-weight: 700;
  cursor: pointer;
}
.ej-simon-btn:hover { border-color: var(--t-accent, #0f7a5c); }
.ej-simon-respuesta { margin-top: .75rem; font-weight: 700; color: var(--t-accent, #0f7a5c); min-height: 1.2em; }

/* --- Diálogo interactivo --- */
.ej-dialogo { display: flex; flex-direction: column; margin-bottom: 1rem; }
.ej-dialogo-opciones { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.ej-dialogo-burbuja {
  max-width: 80%;
  padding: .7rem 1rem;
  border-radius: 16px;
  font-size: 1.02rem;
  line-height: 1.4;
}
.ej-dialogo-burbuja--otro {
  align-self: flex-start;
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-bottom-left-radius: 4px;
  color: var(--t-text);
}
.ej-dialogo-burbuja--yo {
  align-self: flex-end;
  background: var(--t-accent-faint, rgba(15,122,94,.08));
  border: 1px solid var(--t-accent, #0f7a5c);
  border-bottom-right-radius: 4px;
  color: var(--t-text);
  cursor: pointer;
  text-align: left;
}
.ej-dialogo-opcion.sel { background: var(--t-accent, #0f7a5c); color: #fff; }

/* --- Rueda de la fortuna --- */
.ej-rueda {
  font-size: 4rem;
  text-align: center;
  margin: 1rem 0;
  display: inline-block;
  width: 100%;
  transition: transform 1.3s cubic-bezier(.2,.8,.2,1);
}

/* --- Trivial con comodines --- */
.ej-trivial-comodines { display: flex; gap: .6rem; margin: .75rem 0; }
.ej-trivial-pista { color: var(--t-accent, #0f7a5c); font-weight: 600; min-height: 1.3em; }

/* --- Constructor de frases (bloques) --- */
.ej-ficha--bloque { white-space: normal; text-align: left; max-width: 100%; }

/* --- Bingo de vocabulario --- */
.ej-bingo-estado { color: var(--t-muted); font-size: .95rem; margin-bottom: .25rem; }
.ej-bingo-cantado { font-size: 1.4rem; font-weight: 800; margin-bottom: 1rem; color: var(--t-text); }
.ej-bingo-carton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .5rem;
}
.ej-bingo-celda {
  padding: .8rem .5rem;
  border-radius: 10px;
  border: 2px solid var(--t-line);
  background: var(--t-panel);
  color: var(--t-text);
  font-weight: 600;
  cursor: pointer;
}
.ej-bingo-celda.marcada { background: var(--t-accent, #0f7a5c); color: #fff; border-color: var(--t-accent, #0f7a5c); }

/* --- Verdadero o falso --- */
.ej-vf { display: flex; gap: 1rem; margin: 1rem 0; }
.ej-vf-btn {
  flex: 1;
  padding: 1rem;
  border-radius: 12px;
  border: 2px solid var(--t-line);
  background: var(--t-panel);
  color: var(--t-text);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}
.ej-vf-btn--v.sel { background: rgba(40, 167, 69, .15); border-color: #28a745; }
.ej-vf-btn--f.sel { background: rgba(220, 53, 69, .12); border-color: #dc3545; }

/* --- Adivina el emoji --- */
.ej-emoji-grande {
  font-size: 4rem;
  text-align: center;
  margin: 1.5rem 0;
}

/* --- Anagrama --- */
.ej-anagrama-destino { min-height: 3.5rem; }
.ej-ficha--letra {
  font-family: monospace;
  font-weight: 800;
  font-size: 1.2rem;
  min-width: 2.4rem;
  text-align: center;
}

/* --- Contrarreloj --- */
.ej-timer {
  height: 10px;
  background: var(--t-line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .3rem;
}
.ej-timer-relleno {
  height: 100%;
  background: var(--t-accent);
  width: 100%;
  transition: width 1s linear, background .3s ease;
}
.ej-timer-texto { color: var(--t-muted); font-size: .85rem; margin: 0 0 .5rem; }

/* --- Iconos de tarjeta para los 5 tipos nuevos --- */
.ej-card__icono { }

/* --- Responsive: memoria a 3 columnas en movil --- */
@media (max-width: 640px) {
  .ej-memoria { grid-template-columns: repeat(3, 1fr); }
  .ej-vf { flex-direction: column; }
  .ej-emoji-grande { font-size: 3rem; }
}
.mj-cta { display: flex; gap: .75rem; margin: 1rem 0 1.5rem; flex-wrap: wrap; }
.ej-intentos { color: var(--t-muted); font-size: .85rem; margin: .5rem 0 0; }

/* --- Camino de habilidades (2026-07-12): mapa de nodos tipo Duolingo --- */
.ej-camino-wrap { max-width: 640px; }
.ej-camino-idiomas { display: flex; gap: .5rem; margin: 1rem 0; flex-wrap: wrap; }
.ej-camino-atajos { display: flex; flex-direction: column; gap: .3rem; margin: 1rem 0 2rem; }

.ej-camino { list-style: none; margin: 0; padding: 0; }
.ej-camino-nivel { margin-bottom: 2.5rem; }
.ej-camino-nivel__titulo {
  color: var(--t-accent);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 1.5rem;
  padding-bottom: .4rem;
  border-bottom: 2px dashed var(--t-line);
}

/* 2026-07-15: rediseño completo - el zigzag izq/der anterior colocaba el
   conector (linea punteada) en el 50% del contenedor, pero los nodos
   estaban desplazados +-10% por su margin - la linea quedaba flotando en
   el aire sin tocar ningun nodo (bug visual real, visible navegando como
   alumno). Se sustituye por un carril unico centrado con un "spine"
   continuo detras de los nodos (pseudo-elemento en .ej-camino-nodos), asi
   la conexion siempre es correcta sin depender de calculos de offset.
   Pensado para niños: nodos grandes, iconos emoji (no svg de 1px casi
   invisibles), colores con relleno en vez de solo contorno. */
.ej-camino-nodos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.ej-camino-nodos::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    to bottom, var(--t-line) 0, var(--t-line) 10px, transparent 10px, transparent 20px
  );
  z-index: 0;
  border-radius: 3px;
}

.ej-camino-item { position: relative; display: flex; justify-content: center; width: 100%; }

.ej-camino-nodo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  width: 148px;
  min-height: 116px;
  text-decoration: none;
  color: var(--t-text);
  background: var(--t-panel);
  border: 4px solid var(--t-line);
  border-radius: var(--t-radius, 20px);
  margin: 0 auto 2.4rem;
  text-align: center;
  padding: .75rem;
  transition: transform .12s ease, box-shadow .12s ease;
}

.ej-camino-nodo__icono { font-size: 2.4rem; line-height: 1; }
.ej-camino-nodo__pixicono { display: none; } /* legado: sustituido por emoji, ver .ej-camino-nodo__icono */
.ej-camino-nodo__nombre { font-weight: 800; font-size: .95rem; line-height: 1.2; }
.ej-camino-nodo__progreso {
  font-size: .8rem;
  font-weight: 700;
  color: var(--t-muted);
  background: var(--t-bg);
  padding: .1rem .55rem;
  border-radius: 999px;
}

.ej-camino-nodo--disponible {
  border-color: var(--t-accent);
  background: var(--t-accent-faint, var(--t-panel));
  box-shadow: 0 6px 0 0 var(--t-accent);
}
.ej-camino-nodo--disponible:hover,
.ej-camino-nodo--disponible:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 0 var(--t-accent);
}
.ej-camino-nodo--disponible:active { transform: translateY(2px); box-shadow: 0 2px 0 0 var(--t-accent); }

.ej-camino-nodo--completado {
  border-color: var(--t-accent);
  background: color-mix(in srgb, var(--t-accent) 22%, var(--t-panel));
  box-shadow: 0 6px 0 0 color-mix(in srgb, var(--t-accent) 60%, black 10%);
}
.ej-camino-nodo--completado .ej-camino-nodo__progreso { color: var(--t-accent); }

.ej-camino-nodo--bloqueado {
  opacity: .7;
  cursor: default;
  border-style: dashed;
  background: var(--t-bg);
}
.ej-camino-nodo--bloqueado .ej-camino-nodo__icono { filter: grayscale(1); opacity: .8; }

/* Marcador "Estas aqui" flotando sobre el nodo disponible actual, con un
   pequeno rebote continuo tipo sprite de juego. */
.ej-camino-nodo__marcador {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  color: var(--t-accent);
  animation: ej-marcador-rebote 1s ease-in-out infinite;
}
.ej-camino-nodo__marcador em {
  font-style: normal;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  background: var(--t-panel);
  padding: .15rem .5rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
@keyframes ej-marcador-rebote {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

@media (max-width: 480px) {
  .ej-camino-nodo { width: 128px; min-height: 104px; }
}

/* 2026-07-15: el examen final (#examen-form) se genera 100% por JS con
   <input>/<select> nativos sin clase - se veian con el estilo por defecto
   del navegador (recuadro fino gris, sin padding, letra de sistema),
   totalmente fuera de tono con el resto del sitio y nada apropiado para
   niños. Tambien las 3 secciones (Escrito/Escucha/Hablado) eran
   visualmente identicas, sin forma de distinguirlas de un vistazo. */
#examen-form h2 {
  margin: 2.2rem 0 1rem;
  font-size: 1.3rem;
  color: var(--t-accent);
  display: flex;
  align-items: center;
  gap: .5rem;
}
#ef-escrito h2::before { content: '📝'; }
#ef-escucha h2::before { content: '👂'; }
#ef-habla h2::before   { content: '🗣️'; }

#examen-form .ej-card { border-width: 2px; margin-bottom: 1rem; }

#examen-form input[type="text"],
#examen-form select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: .7rem;
  padding: .75rem .9rem;
  font-size: 1rem;
  font-family: inherit;
  border: 2px solid var(--t-line);
  border-radius: 12px;
  background: var(--t-bg);
  color: var(--t-text);
  min-height: 44px;
  appearance: none;
  -webkit-appearance: none;
}
#examen-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--t-muted) 50%),
                     linear-gradient(135deg, var(--t-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
#examen-form input[type="text"]:focus,
#examen-form select:focus {
  border-color: var(--t-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--t-accent-faint, rgba(15,122,92,.15));
}
#examen-form .ej-btn--ghost { margin-top: .6rem; min-height: 44px; }
#examen-form #ef-progreso { margin: 1.5rem 0; text-align: center; font-weight: 700; }
#examen-form #ef-enviar { display: block; width: 100%; min-height: 48px; font-size: 1.05rem; margin-top: .5rem; }

/* 2026-07-15: la pantalla de resultado del examen final era una <ul> plana
   sin ningun diseño - especialmente dura visualmente en caso de suspenso
   ("Suspenso con 5,0/100" a secas). Se añade un badge grande con la nota,
   mensaje mas cercano/animoso en caso de no aprobar (mismo texto
   informativo, tono distinto), y barras de progreso por seccion en vez de
   una lista de texto. */
.ef-resultado-wrap { max-width: 640px; }

.ef-resultado-cabecera {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: var(--t-radius, 20px);
  border: 2px solid var(--t-line);
  margin: 1rem 0 2rem;
}
.ef-resultado-cabecera--ok {
  background: var(--t-accent-faint, rgba(15,122,92,.1));
  border-color: var(--t-accent);
}
.ef-resultado-cabecera--retry {
  background: var(--t-bg);
  border-color: var(--t-accent2, var(--t-line));
}

.ef-resultado-badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--t-panel);
  border: 4px solid var(--t-accent);
}
.ef-resultado-cabecera--retry .ef-resultado-badge { border-color: var(--t-accent2, var(--t-accent)); }
.ef-resultado-badge__num { font-size: 1.7rem; font-weight: 800; color: var(--t-accent); line-height: 1; }
.ef-resultado-badge__den { font-size: .8rem; color: var(--t-muted); }

.ef-resultado-msg { display: flex; flex-direction: column; gap: .3rem; }
.ef-resultado-msg strong { font-size: 1.15rem; }
.ef-resultado-msg span { color: var(--t-muted); }

.ef-resultado-secciones { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.ef-resultado-seccion {
  display: grid;
  grid-template-columns: auto 90px 1fr auto;
  align-items: center;
  gap: .7rem;
}
.ef-resultado-seccion__icono { font-size: 1.3rem; }
.ef-resultado-seccion__nombre { font-weight: 700; }
.ef-resultado-seccion__barra {
  height: 12px;
  border-radius: 999px;
  background: var(--t-line);
  overflow: hidden;
}
.ef-resultado-seccion__barra span {
  display: block;
  height: 100%;
  background: var(--t-accent);
  border-radius: 999px;
}
.ef-resultado-seccion__barra--na { background: repeating-linear-gradient(45deg, var(--t-line) 0 6px, transparent 6px 12px); }
.ef-resultado-seccion__num { font-weight: 700; color: var(--t-accent); font-variant-numeric: tabular-nums; }
.ef-resultado-seccion__num--na { color: var(--t-muted); font-weight: 500; font-size: .85rem; }

@media (max-width: 480px) {
  .ef-resultado-seccion { grid-template-columns: auto 70px 1fr auto; }
  .ef-resultado-cabecera { flex-direction: column; text-align: center; }
}