/*
 * escuela/engine/quiz.css
 * Engine de unidades — producto escuela/ (800×600 desktop)
 * Estética: const2/ landscape. Ver ESCUELA.md § 5.
 */

/* ── Design system ─────────────────────────────────────────── */
:root {
  --naranja:   #ff6b35;
  --morado:    #6b3fa0;
  --azul:      #3b6fd4;
  --verde:     #3a9e72;
  --fondo:     #f5f0e8;
  --texto:     #2a2018;
  --borde:     #e5dfd7;
  --oscuro:    #2a2018;
  --morado-bg: #3d2b7a;

  --acierto:   #34c785;
  --error:     #ef4565;
  --aviso:     #e08a2b;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: #f0ece6;
  overflow: hidden;
  font-family: Arial, sans-serif;
  color: var(--texto);
}

/* ── Contenedor fijo 800×600 ───────────────────────────────── */
#app {
  width: 800px; height: 600px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background: var(--fondo);
  overflow: hidden;
}

/* ── Pantallas ─────────────────────────────────────────────── */
.screen {
  display: none;
  position: absolute;
  inset: 0;
}
.screen.activa { display: block; }

/* ── Barra superior — top-bar (35px) ──────────────────────── */
#top-bar {
  position: absolute;
  left: 0; top: 0; width: 800px; height: 35px;
  background: #fff;
  display: flex; align-items: center;
  padding: 0 10px;
  z-index: 10;
  border-bottom: 1px solid var(--borde);
}
#top-logo { height: 26px; display: block; }

/* Chip de perfil (nick / invitado) — módulo compartido shared/js/perfil.js.
   margin-left:auto lo empuja a él (y a lo que venga detrás) al borde derecho. */
#profile-chip {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  background: #f0ecf8; border: 1.5px solid var(--borde); border-radius: 20px;
  padding: 4px 10px 4px 12px;
  font-size: 12px; font-weight: 700; color: var(--morado);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#profile-chip:hover { background: #ede8f8; border-color: var(--morado); }
#profile-chip span { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Botón "Mi progreso" — visible en la barra superior en cualquier pantalla */
#btn-mi-progreso {
  margin-left: 8px;
  background: #fff; border: 1.5px solid var(--borde); border-radius: 20px;
  padding: 5px 14px; font-size: 12px; font-weight: 700; color: var(--morado);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#btn-mi-progreso:hover { background: #ede8f8; border-color: var(--morado); }

/* ── Modal de perfil (nick / invitado) ────────────────────────
   DOM inyectado por shared/js/perfil.js — estilo propio de escuela/. */
#profile-modal {
  display: none;
  position: absolute; inset: 0; z-index: 70;
  background: rgba(0,0,0,0.5);
  align-items: center; justify-content: center;
}
#profile-modal.visible { display: flex; }
#profile-modal-box {
  background: #fff; border-radius: 20px;
  padding: 28px 28px 22px; width: 300px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
#profile-modal-box .pm-msg {
  font-size: 15px; font-weight: 700; color: var(--texto);
  margin: 0 0 18px; line-height: 1.4;
}
#profile-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 14px;
  border: 2px solid var(--borde); border-radius: 10px;
  font-size: 16px; font-family: Arial, sans-serif;
  margin-bottom: 12px; outline: none;
}
#profile-input:focus { border-color: var(--naranja); }
#profile-btn-ok {
  width: 100%; padding: 11px;
  background: var(--naranja); border: none; cursor: pointer;
  color: #fff; font-size: 16px; font-weight: 700;
  border-radius: 10px; margin-bottom: 10px;
  transition: opacity 0.15s;
}
#profile-btn-ok:hover { opacity: 0.9; }
#profile-btn-skip {
  background: none; border: none; cursor: pointer;
  color: #aaa; font-size: 12px; text-decoration: underline;
}
#profile-btn-skip:hover { color: #777; }

/* ── Barra de título — title-bar (65px) ────────────────────── */
#title-bar {
  position: absolute;
  left: 0; top: 35px; width: 800px; height: 65px;
  background: var(--naranja);     /* se sobreescribe por tipo */
  display: flex; align-items: center;
  padding: 0 16px;
  z-index: 10;
}

/* Color de barra según tipo de unidad */
#app.tipo-ritmico  #title-bar { background: #ff6b35; }
#app.tipo-melodico #title-bar { background: #6b3fa0; }
#app.tipo-teorico  #title-bar { background: #3b6fd4; }
#app.tipo-repaso   #title-bar { background: #3a9e72; }

#btn-volver {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.18); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px;
  flex-shrink: 0;
  transition: background 0.15s;
}
#btn-volver:hover { background: rgba(255,255,255,0.32); }

#title-num {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.7);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-left: 10px; flex-shrink: 0;
}
#title-txt {
  font-size: 22px; font-weight: 700; color: #fff;
  margin-left: 10px; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Botón Iniciar — bajo el personaje en el panel izquierdo */
#btn-iniciar {
  position: absolute;
  top: 338px; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 22px;
  padding: 9px 20px;
  font-size: 14px; font-weight: 700; color: #fff;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: background 0.15s;
}
#btn-iniciar:hover { background: rgba(255,255,255,0.38); }

/* ── Área de juego — empieza en top:100px ─────────────────── */
/* Espacio disponible: 800 × 500 px */


/* ── Pantalla entrada — layout dos paneles ─────────────────── */
#s-entrada { display: none; }
#s-entrada.activa { display: block; }

/* Panel izquierdo — personaje (220 × 500 px) */
#panel-personaje {
  position: absolute;
  left: 0; top: 100px;
  width: 220px; height: 500px;
  background: #7a9de2;
}

/* Bocadillo — parte superior del panel */
#personaje-bocadillo {
  position: absolute;
  top: 14px; left: 12px; right: 12px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 11.5px; line-height: 1.55; color: var(--texto);
}
/* Cola del bocadillo apuntando hacia abajo */
#personaje-bocadillo::after {
  content: '';
  position: absolute;
  bottom: -9px; left: 24px;
  border: 9px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}

/* Personaje — base alineada con canvas y=430 (panel y=330 → bottom:170px) */
#personaje-img {
  position: absolute;
  left: 0; width: 100%;
  height: 210px;
  bottom: 170px;
  object-fit: contain;
  object-position: bottom center;
}

/* Nombre del personaje — pie del panel */
#personaje-nombre {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 0.8px;
  padding: 6px 0 10px;
}

/* Panel derecho — actividades (580 × 500 px) */
#panel-actividades {
  position: absolute;
  left: 220px; top: 100px;
  width: 580px; height: 500px;
  background: var(--fondo);
  display: flex; flex-direction: column;
  padding: 16px 18px 14px;
}

#btn-que-practicamos {
  align-self: flex-start; flex-shrink: 0;
  background: #fff;
  border: 1.5px solid var(--borde);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px; font-weight: 600;
  color: var(--morado);
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.15s, border-color 0.15s;
}
#btn-que-practicamos:hover { background: #ede8f8; border-color: var(--morado); }

#label-actividades {
  font-size: 10px; font-weight: 700; color: #bbb;
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 7px; flex-shrink: 0;
}

#lista-actividades {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 5px;
}

/* Filas de actividad */
.act-fila {
  display: flex; align-items: center;
  background: #fff;
  border: 1.5px solid var(--borde);
  border-radius: 9px;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  gap: 9px;
  flex-shrink: 0;
}
.act-fila:hover { border-color: var(--naranja); background: #fff8f5; }
.act-fila.completada { border-color: var(--acierto); background: #f0faf5; }
.act-fila.repaso { border-color: var(--aviso); background: #fff8ef; }

.act-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--naranja);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.act-fila.completada .act-num { background: var(--acierto); }
.act-fila.repaso .act-num { background: var(--aviso); }

.act-nombre {
  flex: 1;
  font-size: 13px; font-weight: 600; color: var(--texto);
}
.act-pts {
  font-size: 11px; color: #ccc; flex-shrink: 0;
}
.act-flecha {
  font-size: 15px; color: #ddd; flex-shrink: 0;
}
.act-fila:hover .act-flecha { color: var(--naranja); }


/* ── Pantalla actividad ────────────────────────────────────── */
#s-actividad {
  display: none;
}
#s-actividad.activa { display: block; }

#act-header {
  position: absolute;
  left: 0; top: 100px; width: 800px; height: 40px;
  background: #fff;
  display: flex; align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--borde);
  gap: 10px;
}
#act-num-label {
  font-size: 12px; font-weight: 700; color: #aaa;
  text-transform: uppercase; letter-spacing: 0.5px;
}
#act-nombre-label {
  flex: 1;
  font-size: 14px; font-weight: 600; color: var(--texto);
}
#act-pts-label {
  font-size: 20px; font-weight: 800; color: var(--naranja);
  min-width: 72px; text-align: right;
}
#act-pts-label.pts-bump {
  animation: ptsBump 0.38s ease-out both;
}
@keyframes ptsBump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.5); color: #fff; text-shadow: 0 0 10px var(--naranja); }
  100% { transform: scale(1); }
}
.pts-fly {
  position: absolute;
  right: 16px; top: 148px;
  font-size: 22px; font-weight: 800; color: var(--naranja);
  pointer-events: none; z-index: 100;
  animation: ptsFly 0.65s ease-out both;
}
@keyframes ptsFly {
  0%   { opacity: 1; transform: translateY(0) scale(1.15); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.7); }
}

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

#act-zona {
  position: absolute;
  left: 0; top: 140px; width: 800px; bottom: 0;
}
#act-zona.act-zona-in {
  animation: actZonaIn 0.3s ease-out both;
}


/* ── Pantalla resultado de actividad ───────────────────────── */
#s-resultado-act {
  display: none;
}
#s-resultado-act.activa { display: block; }

/* Suelo — banda gris en la parte inferior */
#s-resultado-act.activa::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 80px;
  background: #e8e3dc;
  z-index: 0;
}

/* Personaje — centro en (570, 440), sobre el suelo */
#res-personaje {
  position: absolute;
  width: 300px; height: 300px;
  left: 420px; top: 290px;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

/* Bocadillo — encima del personaje */
#res-bocadillo {
  position: absolute;
  left: 420px; top: 130px;
  width: 300px; min-height: 115px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.13);
  padding: 18px 22px;
  font-size: 19px; color: var(--texto); line-height: 1.5;
  pointer-events: none;
  z-index: 2;
}
#res-bocadillo::after {
  content: '';
  position: absolute;
  bottom: -14px; left: 50%; transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #fff;
}
@keyframes res-boc-in {
  0%   { transform: scale(0.78) translateY(14px); opacity: 0; }
  65%  { transform: scale(1.06) translateY(-4px); opacity: 1; }
  100% { transform: scale(1)    translateY(0);    opacity: 1; }
}
#res-bocadillo.res-boc-in {
  animation: res-boc-in 0.42s cubic-bezier(.34,1.56,.64,1) both;
}

/* Ocultar elementos de resultado redundantes con el bocadillo */
#res-icono, #res-titulo, #res-pts { display: none; }

/* Botones — centrados verticalmente en el área de juego (y=100→520) */
#res-btns {
  position: absolute;
  left: 60px; top: 234px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  z-index: 2;
}
.btn-res {
  padding: 12px 28px; border-radius: 24px; border: none;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s;
}
.btn-res:hover { opacity: 0.85; }
#btn-repetir       { background: var(--borde); color: var(--texto); }
#btn-siguiente-act { background: var(--naranja); color: #fff; }
#btn-volver-inicio { background: #fff; color: var(--texto); border: 1.5px solid var(--borde); }


/* ── Modal "¿Qué vamos a practicar?" ──────────────────────── */
#modal-intro {
  display: none;
  position: absolute; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.45);
  align-items: center; justify-content: center;
}
#modal-intro.visible { display: flex; }

#modal-intro-card {
  background: #fff; border-radius: 18px;
  width: 440px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}
#modal-intro-header {
  background: var(--morado); padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
#modal-intro-titulo {
  font-size: 16px; font-weight: 700; color: #fff;
}
#modal-intro-x {
  background: none; border: none; font-size: 22px;
  color: rgba(255,255,255,0.55); cursor: pointer;
  line-height: 1; padding: 2px 4px;
}
#modal-intro-x:hover { color: #fff; }
#modal-intro-body {
  padding: 20px 22px 24px;
}
#modal-intro-lista {
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
#modal-intro-lista li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--texto); line-height: 1.5;
}
#modal-intro-lista li::before {
  content: '●'; color: var(--morado);
  font-size: 10px; margin-top: 4px; flex-shrink: 0;
}
#modal-intro-btn-cerrar {
  display: block; width: 100%; margin-top: 20px;
  background: var(--naranja); border: none; border-radius: 24px;
  padding: 12px; font-size: 15px; font-weight: 700; color: #fff;
  cursor: pointer;
}


/* ── Modal "Mi progreso" ───────────────────────────────────────
   Franja resumen (motivadora, para el alumno) + detalle compacto
   por actividad (para el docente) en el mismo panel. Ver ESCUELA.md
   § 6b y sesión de diseño 2026-08-04.                              */
#pg-modal {
  display: none;
  position: absolute; inset: 0; z-index: 60;
  background: rgba(0,0,0,0.45);
  align-items: center; justify-content: center;
}
#pg-modal.visible { display: flex; }

#pg-card {
  background: #fff; border-radius: 18px;
  width: 360px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}
#pg-head {
  background: var(--morado); padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
#pg-head-txt { font-size: 15px; font-weight: 700; color: #fff; }
#pg-x {
  background: none; border: none; font-size: 20px;
  color: rgba(255,255,255,0.55); cursor: pointer; line-height: 1; padding: 2px 4px;
}
#pg-x:hover { color: #fff; }

#pg-body { padding: 18px 20px 6px; }

#pg-strip {
  background: linear-gradient(180deg, #f7f3ec, #f1ebe0);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
#pg-total-num { font-size: 22px; font-weight: 800; color: var(--texto); }
#pg-total-num small { font-size: 12px; font-weight: 600; color: #aaa; }
#pg-bar-track { height: 9px; border-radius: 5px; background: #eee5da; overflow: hidden; margin: 6px 0 14px; }
#pg-bar-fill { height: 100%; border-radius: 5px; background: var(--naranja); transition: width 0.3s ease; }

#pg-beads { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.pg-bead {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  border: 2.5px solid #d8cfc2; color: #b8ab9c; background: transparent;
}
.pg-bead.ok  { background: var(--acierto); border-color: var(--acierto); color: #fff; }
.pg-bead.rep { background: #fff; border-color: var(--aviso); color: var(--aviso); }

#pg-encourage { text-align: center; font-size: 13px; color: var(--morado); font-weight: 700; }

.pg-divider {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #c2b8a9; text-align: center; margin: 4px 0 10px; position: relative;
}
.pg-divider::before, .pg-divider::after {
  content: ''; position: absolute; top: 50%; width: 32%; height: 1px; background: #ece5da;
}
.pg-divider::before { left: 0; }
.pg-divider::after  { right: 0; }

#pg-lista {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 190px; overflow-y: auto;
  margin-bottom: 12px;
}
.pg-fila { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 12px; }
.pg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: transparent; border: 1.5px solid #d8cfc2; }
.pg-dot.ok  { background: var(--acierto); border-color: var(--acierto); }
.pg-dot.rep { background: var(--aviso);   border-color: var(--aviso); }
.pg-nombre { flex: 1; color: #55493e; }
.pg-pts { font-weight: 700; color: #999; font-variant-numeric: tabular-nums; font-size: 11.5px; flex-shrink: 0; }
.pg-pts.ok  { color: #1a6b42; }
.pg-pts.rep { color: #a2590f; }

#pg-foot {
  font-size: 10.5px; color: #aaa; text-align: center; padding: 0 20px 16px;
}
#pg-borrar {
  margin-top: 6px;
  background: none; border: none; cursor: pointer;
  color: #c0504d; font-size: 11px; text-decoration: underline;
}
#pg-borrar:hover { color: #a03d3a; }


/* ══════════════════════════════════════════════════════════════
   ACTIVIDAD: carillon_cancion
   Layout: panel personaje izquierda + panel interacción derecha
   ══════════════════════════════════════════════════════════════ */

#cc-layout {
  position: absolute; inset: 0;
  display: flex;
}

/* ── Panel izquierdo — personaje ──────────────────────────── */
#cc-left {
  width: 220px;
  background: #7a9de2;
  flex-shrink: 0;
  position: relative;
}

#cc-bocadillo {
  position: absolute;
  top: 14px; left: 10px; right: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px; line-height: 1.55; color: var(--texto);
  transition: background 0.3s, border-color 0.3s;
}
#cc-bocadillo em { font-weight: 700; font-style: italic; color: var(--naranja); }
#cc-bocadillo::after {
  content: '';
  position: absolute;
  bottom: -9px; left: 20px;
  border: 9px solid transparent;
  border-top-color: #fff; border-bottom: 0;
}
#cc-bocadillo.cc-boc-ok   { background: #e8faf0; }
#cc-bocadillo.cc-boc-fail { background: #fff0f2; }

/* Personaje — base en canvas y=430 (cc-left y=290 → bottom:120px) */
#cc-personaje {
  position: absolute;
  bottom: 120px; left: 0; width: 100%;
  height: 180px;
  object-fit: contain; object-position: bottom center;
}

#cc-nombre {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 0.8px;
  padding: 6px 0 10px;
}

/* ── Panel derecho — interacción ──────────────────────────── */
#cc-right {
  flex: 1;
  position: relative;
  background: var(--fondo);
}

/* Fila: título de canción + botón Escuchar — anclada arriba */
#cc-song-row {
  position: absolute;
  top: 14px; left: 28px; right: 28px;
  display: flex; align-items: center;
  gap: 14px;
}
#cc-song-title {
  flex: 1;
  height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: var(--texto);
  background: #fff5f1; border: 1.5px solid #ffd0bc;
  border-radius: 19px; padding: 0 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Botón Escuchar — grande para pizarra digital */
#cc-btn-escuchar {
  height: 38px; padding: 0 20px;
  border-radius: 10px; border: 1.5px solid var(--azul);
  background: var(--azul); color: #fff;
  font-size: 15px; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  transition: opacity 0.15s, background 0.18s, color 0.18s;
}
#cc-btn-escuchar:hover    { opacity: 0.88; }
#cc-btn-escuchar:disabled { cursor: default; }
#cc-btn-escuchar.cc-btn-ghost {
  background: transparent; color: rgba(59,111,212,0.65);
}

/* Indicador parte / fase — bajo la fila de canción */
#cc-ronda-row {
  position: absolute;
  top: 62px; left: 0; right: 0;
  display: flex; justify-content: center;
}
#cc-ronda-lbl { font-size: 13px; color: #999; font-weight: 500; }
.cc-fase-badge {
  display: inline-block; margin-left: 6px;
  padding: 1px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 700;
}
.cc-fase-escucha { background: rgba(255,107,53,0.12); color: var(--naranja); }
.cc-fase-repite  { background: rgba(59,111,212,0.12);  color: var(--azul); }

/* Feedback wrap — capa absoluta; pointer-events:none para no bloquear el botón Escuchar */
#cc-feedback-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
@keyframes cc-wrap-ok-anim {
  0%   { background: transparent; }
  15%  { background: rgba(52,199,133,0.28); }
  70%  { background: rgba(52,199,133,0.14); }
  100% { background: transparent; }
}
.cc-wrap-ok  { animation: cc-wrap-ok-anim 0.7s ease forwards; }

@keyframes cc-wrap-err-anim {
  0%,60%,100% { background: transparent; }
  10%,30%,50% { background: rgba(239,69,101,0.35); }
}
.cc-wrap-err { animation: cc-wrap-err-anim 1.2s ease forwards; }

/* Contenedor de placas — rellena el feedback-wrap */
#cc-placas {
  position: absolute;
  inset: 0;
}

/* ── Placa — absoluta, centrada con left:50%/translateX(-50%)
   pointer-events:auto restaura la captura de clicks (padre tiene pointer-events:none) */
.cc-placa {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  pointer-events: auto;
  height: 55px;
  border-radius: 10px; border: none;
  cursor: pointer;
  display: flex; flex-direction: row;
  align-items: center;
  padding: 0 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28),
              inset 0 1px 0 rgba(255,255,255,0.2),
              inset 0 -3px 0 rgba(0,0,0,0.18);
  user-select: none; -webkit-user-select: none;
  transition: filter 0.08s;
}
/* Brillo superior */
.cc-placa::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 42%; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, transparent 100%);
  pointer-events: none;
}
/* :active incluye translateX(-50%) para no romper el centrado */
.cc-placa:not(:disabled):active {
  transform: translateX(-50%) scale(0.97) translateY(2px);
  filter: brightness(0.82);
}
/* Visible pero sin interacción (Fa cuando no es la nota activa) */
.cc-placa-inactiva { cursor: default; pointer-events: none; opacity: 0.55; }
/* Oculta — Do y Re en unidades que no las usan aún */
.cc-placa-oculta { display: none; }
.cc-placa:disabled { cursor: default; }

/* Texto de sílaba — ocupa la zona central */
.cc-placa-txt {
  flex: 1;
  font-size: 19px; font-weight: 700; color: rgba(255,255,255,0.92);
  text-align: center;
  position: relative; z-index: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: 0.02em;
}
/* Nombre de la nota — extremo derecho */
.cc-placa-name {
  flex-shrink: 0;
  font-size: 20px; font-weight: 900; color: rgba(255,255,255,0.92);
  position: relative; z-index: 1;
  line-height: 1; min-width: 32px; text-align: right;
  text-shadow: 0 1px 5px rgba(0,0,0,0.4);
}

/* Animaciones — keyframes incluyen translateX(-50%) base */
@keyframes cc-vibrar {
  0%   { transform: translateX(-50%); }
  20%  { transform: translateX(calc(-50% - 5px)); filter: brightness(1.5) saturate(1.3); }
  45%  { transform: translateX(calc(-50% + 5px)); filter: brightness(1.5) saturate(1.3); }
  65%  { transform: translateX(calc(-50% - 2px)); filter: brightness(1.25); }
  82%  { transform: translateX(calc(-50% + 2px)); filter: brightness(1.12); }
  100% { transform: translateX(-50%); filter: none; }
}
.cc-sonando { animation: cc-vibrar 0.38s ease; }

@keyframes cc-ok-anim {
  0%,100% { filter: none; }
  35%     { filter: brightness(0.3) sepia(1) hue-rotate(80deg) saturate(10); }
}
.cc-flash-ok  { animation: cc-ok-anim 0.44s ease; }

@keyframes cc-err-anim {
  0%,100% { filter: none; }
  35%     { filter: brightness(0.3) sepia(1) hue-rotate(-30deg) saturate(12); }
}
.cc-flash-err { animation: cc-err-anim 0.44s ease; }

/* Botón info — 50px del borde derecho, a la altura de La */
@keyframes cc-info-in {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
#cc-btn-info {
  position: absolute;
  right: 50px;
  bottom: 320px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #9c27b0;
  border: none;
  color: #fff;
  font-size: 18px; font-style: italic; font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.15s;
  display: flex;
  align-items: center; justify-content: center;
  animation: cc-info-in 0.45s cubic-bezier(.34,1.56,.64,1) both;
}
#cc-btn-info:hover { background: #7b1fa2; }

/* Modal letra */
#cc-modal {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.45);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
}
#cc-modal-inner {
  background: white;
  border-radius: 16px;
  padding: 20px 22px 24px;
  width: 280px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  cursor: default;
}
#cc-modal-x {
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: none;
  font-size: 22px; line-height: 1;
  color: #aaa; cursor: pointer;
  padding: 2px 4px;
}
#cc-modal-x:hover { color: #555; }
#cc-modal-txt {
  font-size: 16px; color: #2a2018; line-height: 1.85;
}
#cc-modal-txt strong {
  display: block; margin-bottom: 12px;
  font-size: 14px; font-style: italic;
  color: #7b1fa2; font-weight: 700;
}


/* ══════════════════════════════════════════════════════════════
   ACTIVIDAD: acento_pandero
   Layout: panel personaje izquierda + panel interacción derecha
   ══════════════════════════════════════════════════════════════ */

#ap-layout {
  position: absolute; inset: 0;
  display: flex;
}

/* ── Panel izquierdo ─────────────────────────────────────────── */
#ap-left {
  width: 220px;
  background: #7a9de2;
  flex-shrink: 0;
  position: relative;
}

#ap-bocadillo {
  position: absolute;
  top: 14px; left: 10px; right: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px; line-height: 1.55; color: var(--texto);
}
#ap-bocadillo::after {
  content: '';
  position: absolute;
  bottom: -9px; left: 20px;
  border: 9px solid transparent;
  border-top-color: #fff; border-bottom: 0;
}

#ap-personaje {
  position: absolute;
  bottom: 120px; left: 0; width: 100%;
  height: 180px;
  object-fit: contain; object-position: bottom center;
}

/* ── Panel derecho ───────────────────────────────────────────── */
#ap-right {
  flex: 1;
  position: relative;
  background: var(--fondo);
}

/* Fila título + botón info */
#ap-song-row {
  position: absolute;
  top: 12px; left: 18px; right: 18px;
  display: flex; align-items: center; gap: 12px;
  height: 38px;
}
#ap-titulo {
  flex: 1;
  height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: var(--texto);
  background: #fff5f1; border: 1.5px solid #ffd0bc;
  border-radius: 19px; padding: 0 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Botón info */
#ap-btn-info {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #9c27b0; border: none;
  color: #fff;
  font-size: 17px; font-style: italic; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.15s;
}
#ap-btn-info:hover { background: #7b1fa2; }

/* Canvas cinta — centrado en los 580px del panel derecho */
#ap-tape-wrap {
  position: absolute;
  top: 62px; left: 50px;
}
#ap-canvas { display: block; border-radius: 8px; }

/* Zona de acción: Empezar / cuenta atrás / ¡Ya! */
#ap-action-wrap {
  position: absolute;
  top: 182px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  height: 44px;
}
.ap-btn-acc {
  background: var(--naranja); color: #fff;
  border: none; border-radius: 22px;
  padding: 10px 28px;
  font-size: 15px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: opacity 0.15s;
}
.ap-btn-acc:hover { opacity: 0.88; }
.ap-btn-turno { background: var(--azul) !important; }
.ap-msg       { text-align: center; font-weight: 700; }
.ap-msg-demo  { font-size: 14px; color: #bbb; }
.ap-msg-cuenta { font-size: 36px; color: var(--naranja); line-height: 1; }
.ap-msg-ya    { font-size: 26px; color: var(--acierto); }

/* Botones de instrumento */
#ap-drums-wrap {
  position: absolute;
  bottom: 14px; left: 0; right: 0;
  display: flex; justify-content: center; align-items: flex-end;
  gap: 70px;
}
.ap-drum-slot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ap-drum-btn {
  background: none; border: 2px solid transparent;
  cursor: pointer; padding: 6px; border-radius: 16px;
  display: block;
  transition: border-color 0.15s, background 0.15s;
}
.ap-drum-btn:not(:disabled):hover {
  border-color: var(--naranja);
  background: rgba(255,107,53,0.06);
}
.ap-drum-btn:not(:disabled):active { background: rgba(255,107,53,0.14); }
.ap-drum-btn:disabled { cursor: default; opacity: 0.3; }
.ap-drum-btn img { width: 130px; height: auto; display: block; }
.ap-drum-label {
  font-size: 14px; font-weight: 700; color: #5c3d8f;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.ap-drum-sub { font-size: 11px; font-weight: 500; color: #aaa; }

@keyframes ap-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.ap-drum-bounce { animation: ap-bounce 0.22s ease-out; }

/* Modal info */
#ap-modal {
  display: none;
  position: absolute; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.45);
  align-items: center; justify-content: center;
  cursor: pointer;
}
#ap-modal-inner {
  background: white; border-radius: 16px;
  padding: 24px 28px 28px;
  width: 460px; position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  cursor: default;
}
#ap-modal-x {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none;
  font-size: 24px; line-height: 1; color: #aaa; cursor: pointer;
  padding: 2px 4px;
}
#ap-modal-x:hover { color: #555; }
.ap-modal-recuerda {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  color: #9c27b0; text-transform: uppercase;
  margin-bottom: 12px;
}
#ap-modal-txt { font-size: 15px; color: #2a2018; line-height: 1.65; }
#ap-modal-txt strong { color: #3d2b7a; }
#ap-modal-txt ul { margin: 0 0 0 18px; padding: 0; }
#ap-modal-txt li { margin-bottom: 10px; }
.ap-modal-tip {
  margin: 16px 0 0; padding: 11px 14px;
  border-radius: 8px; background: #f0ecf8;
  color: #6b3fa0; font-size: 14px;
}

/* ── colocar_barline ──────────────────────────────────────── */
#cbl-layout {
  position: absolute; inset: 0;
  display: flex;
}

#cbl-left {
  width: 220px;
  background: #7a9de2;
  flex-shrink: 0;
  position: relative;
}

#cbl-bocadillo {
  position: absolute;
  top: 14px; left: 10px; right: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px; line-height: 1.55; color: var(--texto);
  transition: background 0.3s;
  z-index: 2;
}
#cbl-bocadillo::after {
  content: '';
  position: absolute;
  bottom: -9px; left: 20px;
  border: 9px solid transparent;
  border-top-color: #fff; border-bottom: 0;
}
#cbl-bocadillo.cbl-boc-ok  { background: #e8faf0; }
#cbl-bocadillo.cbl-boc-ok::after  { border-top-color: #e8faf0; }
#cbl-bocadillo.cbl-boc-err { background: #fff0f2; }
#cbl-bocadillo.cbl-boc-err::after { border-top-color: #fff0f2; }

#cbl-personaje {
  position: absolute;
  bottom: 120px; left: 0; width: 100%;
  height: 180px;
  object-fit: contain; object-position: bottom center;
}

#cbl-right {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px 20px 12px 16px;
  justify-content: center;
  gap: 10px;
}

#cbl-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#cbl-ronda-lbl {
  font-size: 14px; color: #888; font-weight: 500;
}

/* Botón info — mismo estilo que #ap-btn-info */
#cbl-btn-info {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #9c27b0; border: none;
  color: #fff;
  font-size: 17px; font-style: italic; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.15s;
}
#cbl-btn-info:hover { background: #7b1fa2; }

#cbl-svg-wrap {
  border-radius: 12px;
  overflow: hidden;
  background: #e8f0fe;
  border: 3px solid #c5d8f8;
  cursor: crosshair;
  transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
  padding: 50px 0;
}
#cbl-svg-wrap svg {
  display: block; width: 100%; height: auto;
  touch-action: manipulation;
}
#cbl-loading {
  width: 100%; text-align: center;
  color: #aaa; font-size: 13px; padding: 20px;
}

#cbl-svg-wrap.cbl-ok {
  background: rgba(52,199,133,0.16);
  border-color: #34c785;
  box-shadow: 0 0 0 4px rgba(52,199,133,0.25);
}

@keyframes cbl-err-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(239,69,101,0.30); }
  40%     { box-shadow: 0 0 0 9px rgba(239,69,101,0.12); }
}
#cbl-svg-wrap.cbl-err {
  background: rgba(239,69,101,0.12);
  border-color: #ef4565;
  animation: cbl-err-pulse 1.1s ease;
}

/* Modal info */
#cbl-modal {
  display: none;
  position: absolute; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.45);
  align-items: center; justify-content: center;
  cursor: pointer;
}
#cbl-modal-inner {
  background: white; border-radius: 16px;
  padding: 22px 24px 26px;
  width: 400px; position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  cursor: default;
}
#cbl-modal-x {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none;
  font-size: 24px; line-height: 1; color: #aaa; cursor: pointer;
  padding: 2px 4px;
}
#cbl-modal-x:hover { color: #555; }
.cbl-modal-recuerda {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  color: #9c27b0; text-transform: uppercase;
  margin-bottom: 14px;
}
#cbl-modal-txt { font-size: 15px; color: #2a2018; line-height: 1.65; }
#cbl-modal-txt strong { color: #3d2b7a; }
#cbl-modal-txt ul { margin: 0 0 0 18px; padding: 0; }
#cbl-modal-txt li { margin-bottom: 10px; }

/* ── contar_compases ──────────────────────────────────────── */
#cco-layout {
  position: absolute; inset: 0;
  display: flex;
}

#cco-left {
  width: 220px;
  background: #7a9de2;
  flex-shrink: 0;
  position: relative;
}

#cco-bocadillo {
  position: absolute;
  top: 14px; left: 10px; right: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px; line-height: 1.55; color: var(--texto);
  transition: background 0.3s; z-index: 2;
}
#cco-bocadillo::after {
  content: '';
  position: absolute;
  bottom: -9px; left: 20px;
  border: 9px solid transparent;
  border-top-color: #fff; border-bottom: 0;
}
#cco-bocadillo.cco-boc-ok  { background: #e8faf0; }
#cco-bocadillo.cco-boc-ok::after  { border-top-color: #e8faf0; }
#cco-bocadillo.cco-boc-err { background: #fff0f2; }
#cco-bocadillo.cco-boc-err::after { border-top-color: #fff0f2; }

#cco-personaje {
  position: absolute;
  bottom: 120px; left: 0; width: 100%;
  height: 180px;
  object-fit: contain; object-position: bottom center;
}

#cco-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 20px 12px 16px;
  gap: 10px;
}

#cco-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#cco-ronda-lbl {
  font-size: 14px; color: #888; font-weight: 500;
}

#cco-btn-info {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #9c27b0; border: none;
  color: #fff;
  font-size: 17px; font-style: italic; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.15s;
}
#cco-btn-info:hover { background: #7b1fa2; }

#cco-svg-wrap {
  border-radius: 12px;
  overflow: hidden;
  background: #e8f0fe;
  border: 3px solid #c5d8f8;
  transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
  padding: 16px 0;
}
#cco-svg-wrap svg {
  display: block; width: 100%; height: auto;
}
#cco-svg-wrap.cco-ok {
  background: rgba(52,199,133,0.16);
  border-color: #34c785;
  box-shadow: 0 0 0 4px rgba(52,199,133,0.25);
}
@keyframes cco-err-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(239,69,101,0.30); }
  40%     { box-shadow: 0 0 0 9px rgba(239,69,101,0.12); }
}
#cco-svg-wrap.cco-err {
  background: rgba(239,69,101,0.12);
  border-color: #ef4565;
  animation: cco-err-pulse 1.1s ease;
}

/* Botones de opción */
#cco-opciones {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cco-op {
  flex: 1;
  height: 48px;
  border-radius: 24px;
  border: 2px solid var(--azul);
  background: #e8f0fe;
  color: var(--azul);
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cco-op:hover:not(:disabled) { background: var(--azul); color: #fff; }
.cco-op.cco-selected { background: var(--azul); color: #fff; }
.cco-op.cco-ok   { background: var(--acierto); border-color: var(--acierto); color: #fff; }
.cco-op.cco-fail { background: var(--error);   border-color: var(--error);   color: #fff; }
.cco-op.cco-off  { background: #f0ece6; border-color: #ccc; color: #bbb; }
.cco-op:disabled { cursor: default; }

/* Botón confirmar */
#cco-btn-confirmar {
  display: none;
  height: 48px;
  border-radius: 24px;
  border: none;
  background: var(--naranja);
  color: #fff;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
#cco-btn-confirmar:hover { opacity: 0.88; }

/* Modal info */
#cco-modal {
  display: none;
  position: absolute; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.45);
  align-items: center; justify-content: center;
  cursor: pointer;
}
#cco-modal-inner {
  background: white; border-radius: 16px;
  padding: 22px 24px 26px;
  width: 400px; position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  cursor: default;
}
#cco-modal-x {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none;
  font-size: 24px; line-height: 1; color: #aaa; cursor: pointer;
  padding: 2px 4px;
}
#cco-modal-x:hover { color: #555; }
.cco-modal-recuerda {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  color: #9c27b0; text-transform: uppercase;
  margin-bottom: 14px;
}
#cco-modal-txt { font-size: 15px; color: #2a2018; line-height: 1.65; }
#cco-modal-txt strong { color: #3d2b7a; }
#cco-modal-txt ul { margin: 0 0 0 18px; padding: 0; }
#cco-modal-txt li { margin-bottom: 10px; }

/* ── identificar_elem ─────────────────────────────────────── */
#iec-layout {
  position: absolute; inset: 0;
  display: flex;
}

#iec-left {
  width: 220px;
  background: #7a9de2;
  flex-shrink: 0;
  position: relative;
}

#iec-bocadillo {
  position: absolute;
  top: 14px; left: 10px; right: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px; line-height: 1.55; color: var(--texto);
  transition: background 0.3s; z-index: 2;
}
#iec-bocadillo::after {
  content: '';
  position: absolute;
  bottom: -9px; left: 20px;
  border: 9px solid transparent;
  border-top-color: #fff; border-bottom: 0;
}
#iec-bocadillo.iec-boc-ok  { background: #e8faf0; }
#iec-bocadillo.iec-boc-ok::after  { border-top-color: #e8faf0; }
#iec-bocadillo.iec-boc-err { background: #fff0f2; }
#iec-bocadillo.iec-boc-err::after { border-top-color: #fff0f2; }

#iec-personaje {
  position: absolute;
  bottom: 120px; left: 0; width: 100%;
  height: 180px;
  object-fit: contain; object-position: bottom center;
}

#iec-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 20px 12px 16px;
  gap: 10px;
}

#iec-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#iec-titulo {
  flex: 1;
  height: 34px;
  display: flex; align-items: center;
  font-size: 14px; font-weight: 700; color: var(--texto);
  background: #fff5f1; border: 1.5px solid #ffd0bc;
  border-radius: 17px; padding: 0 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#iec-beat-led {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #ede8f8;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: transparent;
  transition: background 0.07s, color 0.07s;
  flex-shrink: 0; user-select: none;
}
#iec-beat-led.iec-led-on { background: #ef4565; color: white; }

#iec-btn-empezar {
  height: 34px; padding: 0 16px;
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--azul);
  background: var(--azul); color: white;
  transition: opacity 0.15s; flex-shrink: 0;
}
#iec-btn-empezar:disabled { opacity: 0.4; cursor: default; }

#iec-score-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; }

#iec-svg-container {
  position: relative;
  width: 100%;
  background: white;
  border: 2px solid var(--borde);
  border-radius: 10px;
  overflow: hidden;
  transition: background 0.3s;
}
#iec-partitura {
  display: block; width: 100%; height: auto;
  pointer-events: none;
}
#iec-overlay { position: absolute; inset: 0; pointer-events: none; }
#iec-hl {
  position: absolute;
  background: rgba(59,111,212,0.18);
  border: 2px solid rgba(59,111,212,0.5);
  border-radius: 4px;
  pointer-events: none;
  display: none;
}
#iec-error-msg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(239,69,101,0.92);
  color: white; padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  white-space: nowrap; pointer-events: none;
  display: none; text-align: center;
}

#iec-botones {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-shrink: 0;
}
.iec-btn-compas {
  width: 64px; height: 52px;
  font-size: 22px; font-weight: 800;
  color: var(--azul);
  background: #e8f0fe;
  border: 2px solid #b8cef8;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.iec-btn-compas:not(:disabled):hover { background: #d0e4fc; border-color: var(--azul); }
.iec-btn-compas:disabled { opacity: 0.35; cursor: default; }
.iec-btn-ok  { background: #e8faf0 !important; border-color: #34c785 !important; color: #1a7a4a !important; }
.iec-btn-err { background: #fdeaee !important; border-color: #ef4565 !important; color: #a02030 !important; }

/* ── leer_partitura ───────────────────────────────────────── */
#lp-layout {
  position: absolute; inset: 0;
  display: flex;
}

#lp-left {
  width: 220px;
  background: #7a9de2;
  flex-shrink: 0;
  position: relative;
}

#lp-bocadillo {
  position: absolute;
  top: 14px; left: 10px; right: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px; line-height: 1.55; color: var(--texto);
  z-index: 2;
}
#lp-bocadillo::after {
  content: '';
  position: absolute;
  bottom: -9px; left: 20px;
  border: 9px solid transparent;
  border-top-color: #fff; border-bottom: 0;
}

#lp-personaje {
  position: absolute;
  bottom: 120px; left: 0; width: 100%;
  height: 180px;
  object-fit: contain; object-position: bottom center;
}

#lp-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 20px 16px 16px;
  gap: 12px;
}

#lp-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#lp-nota-lbl {
  font-size: 14px; color: #888; font-weight: 500;
}

#lp-btn-info {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #9c27b0; border: none;
  color: #fff;
  font-size: 17px; font-style: italic; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.15s;
}
#lp-btn-info:hover { background: #7b1fa2; }

/* Tarjeta de partitura */
#lp-staff-card {
  position: relative;
  flex-shrink: 0;
  background: white;
  border-radius: 10px;
  border: 2px solid #3b6fd4;
  overflow: hidden;
  padding: 10px 0;
}
#lp-img {
  display: block; width: 100%; height: auto;
  pointer-events: none;
}
#lp-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
}
#lp-cursor {
  position: absolute;
  top: 4px; bottom: 4px;
  width: 28px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: rgba(59,111,212,0.20);
  border: 2px solid rgba(59,111,212,0.60);
  transition: left 0.15s ease;
  display: none;
}
#lp-cursor.ok  { background: rgba(52,199,133,0.32); border-color: rgba(52,199,133,0.85); }
#lp-cursor.err { background: rgba(239,69,101,0.22); border-color: rgba(239,69,101,0.75); }
#lp-cursor.lp-shake { animation: lp-shake 0.26s ease; }
@keyframes lp-shake {
  0%,100% { transform: translateX(-50%); }
  25%     { transform: translateX(calc(-50% - 6px)); }
  75%     { transform: translateX(calc(-50% + 6px)); }
}

/* Piano — una octava (8 teclas blancas) */
#lp-piano {
  height: 190px;
  flex-shrink: 0;
  position: relative;
  margin-top: auto;
}

/* Teclas blancas */
.lp-kw {
  position: absolute;
  top: 0; height: 180px; width: 56px;
  background: linear-gradient(175deg, #ffffff 0%, #f0ece8 100%);
  border-radius: 3px 3px 9px 9px;
  border: 1px solid #cac3bb;
  border-top: 1px solid #e8e4e0;
  box-shadow: 0 7px 15px rgba(0,0,0,0.26), inset 0 -4px 8px rgba(0,0,0,0.07);
  cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 16px;
  user-select: none; -webkit-user-select: none;
  transform-origin: top center;
  transition: transform 0.07s ease, background 0.07s ease, box-shadow 0.07s ease;
  z-index: 1;
}
.lp-kw.inactive { opacity: 0.28; pointer-events: none; cursor: default; }
.lp-kw:not(.inactive):active {
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(0,0,0,0.16), inset 0 -2px 4px rgba(0,0,0,0.05);
}
.lp-kw.lp-kw-hit  { background: #b8f0c8 !important; }
.lp-kw.lp-kw-miss { background: #ffd0d0 !important; }

.lp-kw-label {
  font-size: 18px; font-weight: 700;
  font-family: Arial, sans-serif; line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
}

/* Teclas negras (decorativas) */
.lp-kb {
  position: absolute;
  top: 0;
  width: 36px; height: 96px;
  background: linear-gradient(175deg, #403830 0%, #1a1008 80%, #282018 100%);
  border-radius: 2px 2px 6px 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.60),
              inset 0 -3px 6px rgba(0,0,0,0.40),
              inset 1px 0 2px rgba(255,255,255,0.04);
  z-index: 2;
  pointer-events: none;
}

/* Modal info */
#lp-modal {
  display: none;
  position: absolute; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.45);
  align-items: center; justify-content: center;
  cursor: pointer;
}
#lp-modal-inner {
  background: white; border-radius: 16px;
  padding: 22px 24px 26px;
  width: 380px; position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  cursor: default;
}
#lp-modal-x {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none;
  font-size: 24px; line-height: 1; color: #aaa; cursor: pointer;
  padding: 2px 4px;
}
#lp-modal-x:hover { color: #555; }
.lp-modal-recuerda {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  color: #9c27b0; text-transform: uppercase;
  margin-bottom: 14px;
}
#lp-modal-txt { font-size: 15px; color: #2a2018; line-height: 1.65; }
#lp-modal-txt ul { margin: 0 0 0 18px; padding: 0; }
#lp-modal-txt li { margin-bottom: 10px; }

/* ── reconocer_compas ───────────────────────────────────────── */
#rc-layout {
  position: absolute; inset: 0;
  display: flex;
}

#rc-left {
  width: 220px;
  background: #7a9de2;
  flex-shrink: 0;
  position: relative;
}

#rc-bocadillo {
  position: absolute;
  top: 14px; left: 10px; right: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px; line-height: 1.55; color: var(--texto);
  z-index: 2;
}
#rc-bocadillo::after {
  content: '';
  position: absolute;
  bottom: -9px; left: 20px;
  border: 9px solid transparent;
  border-top-color: #fff; border-bottom: 0;
}

#rc-personaje {
  position: absolute;
  bottom: 120px; left: 0; width: 100%;
  height: 180px;
  object-fit: contain; object-position: bottom center;
}

#rc-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 20px 12px 16px;
  gap: 10px;
}

#rc-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

#rc-titulo {
  flex: 1;
  font-size: 15px; font-weight: 700;
  color: var(--morado);
}

#rc-round-label {
  font-size: 13px; font-weight: 600;
  color: #888;
  flex-shrink: 0;
}

#rc-btn-escuchar {
  flex-shrink: 0;
  background: var(--morado);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
#rc-btn-escuchar:disabled { opacity: 0.45; cursor: default; }
#rc-btn-escuchar:not(:disabled):hover { opacity: 0.88; }

#rc-svg-wrap {
  position: relative;
  flex-shrink: 0;
}
#rc-svg-wrap svg {
  width: 100%; height: auto; display: block;
}

.rc-rect {
  position: absolute;
  background: rgba(107, 63, 160, 0.10);
  border: 2px solid rgba(107, 63, 160, 0.38);
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.12s, border-color 0.12s;
}
.rc-rect:hover {
  background: rgba(107, 63, 160, 0.22);
  border-color: rgba(107, 63, 160, 0.65);
}
.rc-rect.ok {
  background: rgba(52, 199, 133, 0.28);
  border-color: var(--acierto);
  cursor: default; pointer-events: none;
}
.rc-rect.err {
  background: rgba(239, 69, 101, 0.22);
  border-color: var(--error);
  cursor: default; pointer-events: none;
}
.rc-rect.pista {
  background: rgba(52, 199, 133, 0.12);
  border: 2px dashed var(--acierto);
  cursor: default; pointer-events: none;
}

/* ── repasar_conceptos ────────────────────────────────────── */
#rco-layout { position: absolute; inset: 0; display: flex; }
#rco-left {
  width: 220px;
  background: #7a9de2;
  flex-shrink: 0;
  position: relative;
}
#rco-bocadillo {
  position: absolute;
  top: 14px; left: 10px; right: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px; line-height: 1.55; color: var(--texto);
  transition: background 0.3s; z-index: 2;
}
#rco-bocadillo::after {
  content: '';
  position: absolute;
  bottom: -9px; left: 20px;
  border: 9px solid transparent;
  border-top-color: #fff; border-bottom: 0;
}

#rco-personaje {
  position: absolute;
  bottom: 120px; left: 0; width: 100%;
  height: 180px;
  object-fit: contain; object-position: bottom center;
}
#rco-btn-info {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: white;
  border: 2px solid #9c27b0;
  color: #9c27b0;
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
#rco-btn-info:hover { background: #9c27b0; color: white; }
#rco-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 20px 12px 16px;
  gap: 10px;
}
#rco-top-row {
  display: flex; align-items: center;
  flex-shrink: 0;
}
#rco-ronda-lbl {
  font-size: 13px; font-weight: 600;
  color: var(--texto); opacity: 0.6;
}
#rco-pregunta {
  flex-shrink: 0;
  padding: 10px 14px;
  background: #f0ecf8;
  border-radius: 10px;
  font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--texto);
  transition: background 0.25s, color 0.25s;
}
#rco-pregunta.rco-preg-ok  { background: #e8faf0; color: #1a6b42; }
#rco-pregunta.rco-preg-err { background: #fdeaee; color: #8b1a2a; }
#rco-img-wrap {
  height: 150px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#rco-img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
}
#rco-opciones {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 8px; flex: 1;
  justify-content: center;
}
.rco-op {
  width: 50%;
  padding: 11px 16px;
  background: var(--azul-bg);
  color: var(--azul);
  border: 1.5px solid #b8cef8;
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rco-op:not(:disabled):hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.rco-op.rco-ok    { background: #e8faf0; border-color: var(--acierto); color: #1a6b42; }
.rco-op.rco-pista { background: #e8faf0; border-color: var(--acierto); color: #1a6b42; opacity: 0.7; }
.rco-op.rco-err   { background: #fdeaee; border-color: var(--error);   color: #8b1a2a; }
.rco-op:disabled  { cursor: default; }
#rco-modal {
  display: none;
  position: absolute; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.45);
  align-items: center; justify-content: center;
  cursor: pointer;
}
#rco-modal-inner {
  background: white; border-radius: 16px;
  padding: 20px 20px 22px;
  width: 290px; position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  cursor: default;
}
#rco-modal-x {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none;
  font-size: 22px; line-height: 1; color: #aaa;
  cursor: pointer; padding: 2px 4px;
}
#rco-modal-x:hover { color: #555; }
.rco-modal-recuerda {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  color: #9c27b0; text-transform: uppercase;
  margin-bottom: 14px;
}
#rco-modal-txt { font-size: 15px; color: #2a2018; line-height: 1.65; }
#rco-modal-txt strong { color: #3d2b7a; }
#rco-modal-txt ul { margin: 0 0 0 18px; padding: 0; }
#rco-modal-txt li { margin-bottom: 10px; }