@font-face {
  font-family: 'MuseJazz';
  src: url('../assets/fonts/MuseJazz.otf') format('opentype');
}

/*
 * QUIZ MUSICAL — engine/quiz.css
 *
 * Layout fluido: #app ocupa 100% × 100dvh.
 * #s-actividad es flex-column; zonas con altura fija y flex-shrink:0;
 * #act-zona absorbe el espacio restante con flex:1.
 *
 * ZONAS pantalla de actividad (flex-column):
 *   progbar      h: 44px  flex-shrink:0
 *   bocadillo    h: 72px  flex-shrink:0
 *   metro        h:130px  flex-shrink:0
 *   zona         flex:1   (variable)
 *   footer       h: 94px  flex-shrink:0
 *   ad-slot      h: 64px  flex-shrink:0
 */


/* ── RESET ───────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #f7f3ee;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
}


/* ── CONTENEDOR — fluido ─────────────────────────────────────── */
#app {
  position: relative;
  width: 100%;
  height: var(--app-h, 100dvh);
  background: #f7f3ee;
  overflow: hidden;
}


/* ── PANTALLAS ───────────────────────────────────────────────── */
.screen {
  display: none;
  position: absolute;
  inset: 0;
}
.screen.active { display: block; }
#s-actividad.active { display: flex; flex-direction: column; }
#s-bienvenida.active { display: flex; flex-direction: column; }


/* ── VARIABLES DE COLOR ──────────────────────────────────────── */
:root {
  --naranja: #ff6b35;
  --acierto: #34c785;
  --error:   #ef4565;
  --fondo:   #f7f3ee;
  --texto:   #2a2018;
  --borde:   #e5dfd7;
  --azul:    #3b6fd4;
}


/* ── COMPONENTE: BOCADILLO ───────────────────────────────────── */
.bocadillo-wrap {
  filter: drop-shadow(0 4px 0 #7aa7f0);
}
.bocadillo {
  background: #e8f0fe;
  border: 1.5px solid #b8cef8;
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--texto);
  text-align: center;
  position: relative;
}
.bocadillo::after {
  content: '';
  position: absolute;
  bottom: -11px; left: 50%;
  transform: translateX(-40px);
  border-left: 12px solid transparent;
  border-right: 4px solid transparent;
  border-top: 12px solid #e8f0fe;
}
.bocadillo::before {
  content: '';
  position: absolute;
  bottom: -13px; left: 50%;
  transform: translateX(-42px);
  border-left: 14px solid transparent;
  border-right: 5px solid transparent;
  border-top: 14px solid #b8cef8;
}
.bocadillo.ok   { background: #e8faf0; border-color: var(--acierto); }
.bocadillo.ok::after  { border-top-color: #e8faf0; }
.bocadillo.ok::before { border-top-color: var(--acierto); }
.bocadillo.fail { background: #fff0f2; border-color: var(--error); }
.bocadillo.fail::after { border-top-color: #fff0f2; }
.bocadillo.fail::before { border-top-color: var(--error); }


/* ── COMPONENTE: METRO ───────────────────────────────────────── */
.metro-img {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: 200px;   /* evita que imágenes apaisadas desborden act-metro */
  object-fit: contain;
  transition: none;
}


/* ── COMPONENTE: BOTONES ─────────────────────────────────────── */
.btn-solid {
  width: 100%;
  background: var(--naranja);
  border: none; border-radius: 14px;
  padding: 15px; font-size: 19px; font-weight: 800;
  color: white; cursor: pointer;
  box-shadow: 0 4px 0 #c04e20;
}
.btn-solid:active { box-shadow: none; transform: translateY(4px); }
.btn-outline {
  width: 100%;
  background: white;
  border: 2px solid #cc5529; border-radius: 14px;
  padding: 13px; font-size: 19px; font-weight: 700;
  color: var(--naranja); cursor: pointer;
  box-shadow: 0 4px 0 #cc5529;
}
.btn-outline:active { box-shadow: none; transform: translateY(4px); }
.btn-aprendiste {
  border-color: #3b6fd4; color: #3b6fd4; box-shadow: 0 4px 0 #2b52a8;
}
.btn-confirmar {
  width: 100%; height: 100%;
  border: none; border-radius: 14px;
  font-size: 18px; font-weight: 700;
  color: white; cursor: pointer;
  background: #e5dfd7;
}
.btn-confirmar.listo { background: var(--azul); }
.btn-confirmar.ok    { background: var(--acierto); }
.btn-confirmar.fail  { background: var(--error); }



/* Panel desplegable bienvenida — flota sobre el contenido, no empuja */
#bienvenida-botones { position: relative; }
#bienvenida-panel {
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  margin-bottom: 8px;
  background: white;
  border: 1px solid var(--borde); border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.14);
  z-index: 30;
  max-height: 240px; overflow-y: auto;
}
.panel-lista {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.panel-lista li {
  font-size: 15px; color: var(--texto);
  padding-left: 18px; position: relative; line-height: 1.4;
}
.panel-lista li::before {
  content: '✦'; position: absolute; left: 0;
  color: var(--naranja); font-size: 10px; top: 2px;
}

/* ══════════════════════════════════════════════════════════════
   PANTALLA 1: BIENVENIDA
   ══════════════════════════════════════════════════════════════ */

#bienvenida-header {
  flex-shrink: 0;
  height: 110px;
  background: var(--naranja);
  padding: 16px 20px 14px;
  text-align: center;
}
#header-num {
  font-size: 13px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,.85); margin-bottom: 4px;
}
#header-titulo {
  font-size: 29px; font-weight: 800; color: white;
}

#bienvenida-stats {
  flex-shrink: 0;
  height: 82px;
  margin: 8px 14px 0;
  display: flex; gap: 10px;
}
.stat-card {
  flex: 1; background: white;
  border: .5px solid var(--borde); border-radius: 12px;
  padding: 8px 8px 12px; text-align: center;
}
.stat-icon  { font-size: 18px; }
.stat-value { font-size: 20px; font-weight: 800; color: var(--texto); }
.stat-label { font-size: 9px; font-weight: 700; text-transform: uppercase; color: #bbb; letter-spacing: .8px; }

#bienvenida-bocadillo {
  flex-shrink: 0;
  padding: 0 14px 16px;
  margin-top: auto;
}

#bienvenida-metro {
  flex-shrink: 0;
  position: relative;
  height: 200px;
}

#bienvenida-botones {
  flex-shrink: 0;
  margin-top: auto;
  padding: 0 14px 80px;
  display: flex; flex-direction: column; gap: 10px;
}


/* ══════════════════════════════════════════════════════════════
   PANTALLA 2: ACTIVIDAD
   ══════════════════════════════════════════════════════════════ */

#act-progbar {
  flex-shrink: 0;
  height: 44px;
  background: white;
  border-bottom: .5px solid var(--borde);
  display: flex; align-items: center;
  padding: 0 14px; gap: 8px;
}
#prog-count { font-size: 15px; font-weight: 700; color: #888; min-width: 34px; }
#prog-track {
  flex: 1; height: 7px;
  background: #e5dfd7; border-radius: 10px; overflow: hidden;
}
#prog-fill  { height: 100%; background: var(--naranja); border-radius: 10px; transition: width .4s; width: 33%; }
#prog-racha { font-size: 18px; font-weight: 800; color: var(--naranja); }
#prog-pts   { font-size: 18px; font-weight: 800; color: #f5a623; position: relative; }

/* Animación pop puntuación */
@keyframes pts-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); color: var(--naranja); }
  100% { transform: scale(1); }
}
.pts-bump { animation: pts-pop .4s ease-out; }

/* Flotante "+N" — vuela desde Metro hasta el marcador */
.pts-float {
  position: fixed;
  font-size: 22px; font-weight: 800; color: var(--naranja);
  pointer-events: none; z-index: 999;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 6px rgba(0,0,0,0.15);
  transition: left 0.9s cubic-bezier(0.2,0,0.4,1),
              top  0.9s cubic-bezier(0.2,0,0.4,1),
              opacity 0.3s ease-in 0.72s;
}

#act-bocadillo {
  flex-shrink: 0;
  height: 72px;
  margin-top: 8px;
  padding: 0 14px;
  display: flex; align-items: center;
}
#act-bocadillo .bocadillo-wrap { width: 100%; }

#act-metro {
  flex-shrink: 0;
  position: relative;
  height: 130px;
  margin-top: 20px;
}

#act-zona {
  flex: 1;
  overflow: hidden;
  position: relative;
}

#act-footer { display: none; }

#btn-sig-float {
  position: absolute;
  bottom: 80px; right: 16px;
  height: 52px;
  min-width: 52px;
  padding: 0 20px;
  border-radius: 26px;
  background: var(--naranja);
  border: none;
  color: white;
  font-size: 17px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.7);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.34,1.56,.64,1);
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
#btn-sig-float.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
#btn-sig-float:active {
  transform: scale(0.9) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.16);
  transition: transform 0.08s ease;
}

#ad-slot { flex-shrink: 0; height: 64px; }


/* ══════════════════════════════════════════════════════════════
   PANTALLA 3: RESULTADOS
   ══════════════════════════════════════════════════════════════ */

#res-header {
  position: absolute;
  top: 0; left: 0; right: 0; height: 80px;
  background: var(--naranja);
  display: flex; align-items: center; justify-content: center;
}
#res-titulo { font-size: 22px; font-weight: 800; color: white; }

#res-estrellas {
  position: absolute;
  top: 88px; left: 0; right: 0;
  text-align: center; font-size: 36px; letter-spacing: 6px;
}

#res-bocadillo {
  position: absolute;
  top: 138px; left: 14px; right: 14px;
  z-index: 10;
}

#res-metro {
  position: absolute;
  top: 232px; left: 0; right: 0; height: 130px;
}

#res-stats {
  position: absolute;
  top: 370px; left: 14px; right: 14px;
  display: flex; gap: 12px;
  z-index: 1;
}
.rstat {
  flex: 1; background: white;
  border: .5px solid var(--borde); border-radius: 12px;
  padding: 10px 8px; text-align: center;
}
.rstat-val   { font-size: 22px; font-weight: 800; color: var(--texto); }
.rstat-label { font-size: 10px; font-weight: 600; color: #bbb; text-transform: uppercase; letter-spacing: .7px; }

#res-panel {
  width: 100%; background: white;
  border: 1px solid var(--borde); border-radius: 12px;
  padding: 10px 14px; margin-bottom: -4px;
}

#res-botones {
  position: absolute;
  bottom: 80px; left: 14px; right: 14px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 20;
}


/* ══════════════════════════════════════════════════════════════
   ACTIVIDAD: IMAGEN + OPCIONES
   Dentro de #act-zona (top:254, h:352)
   ══════════════════════════════════════════════════════════════ */

#act-imagen-card {
  position: absolute;
  top: 8px; left: 14px; right: 14px;
  background: white; border: .5px solid var(--borde); border-radius: 14px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  padding: 10px;
}
/* SVG del pentagrama: altura fija */
#act-imagen-svg { width: 100%; }
#act-imagen-svg svg { width: 100%; height: auto; max-height: 110px; }
/* PNG de teoria: ocupa el ancho, altura automatica */
#act-imagen-svg img { width: 100%; height: auto; display: block; border-radius: 6px; }
.imagen-label { font-size: 11px; color: #bbb; font-style: italic; }

#act-opciones {
  position: absolute;
  top: 164px; left: 14px; right: 14px;
  display: flex; flex-direction: column; gap: 9px;
}
.op-btn {
  height: 52px;
  background: #e8f0fe;
  border: 1.5px solid #3b6fd4; border-radius: 12px;
  padding: 0 16px; font-size: 15px; font-weight: 600;
  color: #3b6fd4; cursor: pointer; text-align: center;
  display: flex; align-items: center; justify-content: center; width: 100%;
}
.op-btn.selected { background: #3b6fd4; color: white; }
.op-btn.ok   { border-color: var(--acierto); background: #e8faf0; color: #1a6b42; pointer-events: none; }
.op-btn.fail { border-color: var(--error);   background: #fff0f2; color: #b91c3c; pointer-events: none; }
.op-btn.off  { opacity: .4; pointer-events: none; }


/* ══════════════════════════════════════════════════════════════
   ACTIVIDAD: PIANO SECUENCIA
   Dentro de #act-zona (top:254, h:352)
   ══════════════════════════════════════════════════════════════ */

#act-penta-card {
  position: absolute;
  top: 0; left: 14px; right: 14px; height: 130px;
  background: white; border: .5px solid var(--borde); border-radius: 14px;
  padding: 6px 12px 8px;
}
#act-pts {
  position: absolute;
  top: 136px; left: 0; right: 0; height: 20px;
  text-align: center; font-size: 12px; color: #888; font-weight: 500;
}
#act-piano {
  position: absolute;
  top: 160px; left: 14px; right: 14px;
  height: 140px;  /* ~75% de lo anterior, tamaño fijo */
}
/* El teclado ocupa toda la altura disponible del contenedor */
#act-piano .piano-wrap,
#act-piano .piano {
  width: 100%;
  height: 100%;
}

/* Teclado */
.piano {
  display: flex;
  position: relative;
  border: 2px solid #d4a843;
  border-radius: 8px;
  background: #f5ede0;
  overflow: hidden;
}
.key-white {
  flex: 1;
  position: relative;
  border-right: 1px solid #d4c4a8;
  border-radius: 0 0 5px 5px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.key-white:last-child { border-right: none; }
.key-white.active-key  { background: #fffaf7; }
.key-white.inactive    { cursor: default; background: #f5f3f0; }
.key-white.correct-flash { background: #e8faf0 !important; }
.key-white.wrong-flash   { background: #fff0f2 !important; }
.key-name {
  font-size: 15px; font-weight: 700;
  color: #ccc; pointer-events: none; line-height: 1;
}
.key-white.active-key .key-name { color: var(--naranja); }
.key-black {
  position: absolute;
  top: 0; width: 9%; height: 60%;
  background: #7a7a7a;
  border-radius: 0 0 4px 4px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid #555;
}


/* ══════════════════════════════════════════════════════════════
   ACTIVIDAD: RITMO BOTONES
   Dentro de #act-zona (top:254, h:352)
   ══════════════════════════════════════════════════════════════ */

#rb-layout {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 10px 10px 0;
  gap: 10px;
}

#rb-audio-wrap {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 0;
}

#rb-play-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--naranja); color: white;
  border: none; border-radius: 24px;
  padding: 8px 18px 8px 14px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
#rb-play-btn:disabled { opacity: .55; cursor: default; }
#rb-countdown { font-size: 12px; color: #888; margin-left: 14px; font-weight: 600; }

/* Contenedor del pentagrama de slots */
#rb-penta-wrap {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

/* SVG de la línea rítmica */
#rb-svg {
  display: block;
  width: 100%;
  height: auto;
}

#rb-botones {
  flex-shrink: 0;
  display: flex; gap: 20px; justify-content: center;
}
.rb-fig-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 90px; padding: 10px 8px;
  background: white; border: 2px solid var(--borde); border-radius: 14px;
  cursor: pointer; transition: border-color .15s;
}
.rb-fig-btn:disabled { opacity: .45; cursor: default; }
.rb-fig-btn:not(:disabled):active { transform: scale(.93); border-color: var(--naranja); }
.rb-fig-label { font-size: 12px; font-weight: 600; color: #888; }

@keyframes rb-vuela {
  from { transform: scale(0.3) translateY(20px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}
.animar { animation: rb-vuela .3s cubic-bezier(.22,1,.36,1); }




/* -- REPRODUCIR RITMO ----------------------------------------- */

/* Luz + botón arriba + botón info */
#rr-btn-wrap {
  position: absolute;
  top: 0; left: 12px; right: 12px;
  display: flex; flex-direction: row; align-items: center;
}
.rr-btn-spacer { width: 68px; flex-shrink: 0; }
#rr-btn-center { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#rr-luz-wrap {
  display: flex; align-items: center; justify-content: center;
}
#rr-luz {
  width: 16px; height: 16px; border-radius: 50%;
  background: #c0392b22; border: 2px solid #c0392b55;
  transition: background .08s, box-shadow .08s;
}
#rr-luz.rr-luz-on {
  background: #e74c3c;
  box-shadow: 0 0 10px 4px #e74c3c99;
}
#rr-btn {
  width: 100%; height: 42px; border-radius: 12px;
  font-size: 14px; font-weight: 500; cursor: pointer;
  border: none; transition: opacity .15s;
}
#rr-btn:disabled { opacity: .5; cursor: default; }
.rr-btn-escuchar { background: #3b6fd4; color: white; }
.rr-btn-ahora    { background: #ff6b35; color: white; }

/* Figuras — más pequeñas, igual que ritmo_botones */
#rr-figuras {
  position: absolute;
  top: 68px; left: 12px; right: 12px; height: 90px;
}
#rr-svg { display: block; width: 100%; height: 100%; }

/* Aviso */
#rr-aviso {
  position: absolute;
  top: 154px; left: 12px; right: 12px; height: 18px;
  text-align: center; font-size: 11px; font-weight: 600; color: #ef4565;
}

/* Pandero + countdown */
#rr-pandero-wrap {
  position: absolute;
  top: 174px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
#rr-countdown-wrap {
  height: 52px;
  display: flex; align-items: center; justify-content: center;
}
#rr-countdown {
  min-width: 60px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: #ff6b35; border-radius: 10px;
  font-size: 24px; font-weight: 500; color: white;
  opacity: 0; transition: opacity .1s;
}
#rr-countdown:not(:empty) { opacity: 1; }

#rr-pandero {
  width: 140px; height: 140px; border-radius: 50%;
  border: none; background: transparent;
  cursor: pointer; padding: 0;
  transition: transform .08s;
}
#rr-pandero img { width: 100%; height: 100%; object-fit: contain; }
#rr-pandero:disabled { opacity: .4; cursor: default; }
#rr-pandero:active:not(:disabled),
#rr-pandero.rr-pandero-golpe { transform: scale(.9); }

#rr-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; }
#rr-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; }
#rr-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; }
#rr-modal-x:hover { color:#555; }
#rr-modal-txt { font-size:14px; color:#2a2018; line-height:1.55; margin:0; }
#rr-modal-txt strong { color:#2a2018; }
#rr-modal-txt ul { margin:10px 0 10px 16px; padding:0; }
#rr-modal-txt li { margin-bottom:6px; }
.rr-modal-tip { margin:12px 0 0; padding:8px 10px; border-radius:8px; background:#f0ecf8; color:#6b3fa0; font-size:13px; }


/* ── DETECCION NOTAS ────────────────────────────────────────────── */

/* deteccion_notas: layout con posicion absoluta igual que piano_secuencia */
#dn-penta-wrap {
  position: absolute;
  top: 0; left: 14px; right: 14px; height: 130px;
  background: white; border: .5px solid var(--borde); border-radius: 14px;
  padding: 6px 8px;
  overflow: hidden;
}

#dn-hud {
  position: absolute;
  top: 138px; left: 14px; right: 14px; height: 24px;
  display: flex; align-items: center; gap: 10px;
}

#dn-barra-wrap {
  flex: 1; height: 10px; background: var(--borde); border-radius: 5px; overflow: hidden;
}
#dn-barra {
  height: 100%; width: 100%; background: var(--naranja); border-radius: 5px;
}

#dn-contador {
  font-size: 22px; font-weight: 800; color: var(--naranja);
  min-width: 32px; text-align: right;
}

#dn-piano {
  position: absolute;
  top: 170px; left: 14px; right: 14px; height: 140px;
}
#dn-piano .piano-wrap,
#dn-piano .piano {
  width: 100%; height: 100%;
}

/* ── IMAGEN OPCIONES PNG ───────────────────────────────────────────── */

#png-layout {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
}
#png-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 0;
}
#png-img {
  max-height: 110px; width: auto; max-width: 100%; display: block;
  border-radius: 6px; margin: 0 auto;
}
#png-opciones {
  display: flex; flex-direction: column; gap: 9px;
  width: 100%; max-width: 347px; margin: 0 auto;
}

/* ── RECONOCIMIENTO MELÓDICO ─────────────────────────────────── */

#rm-layout {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  width: 100%; padding: 0 2px;
}

/* Botón escuchar */
#rm-audio-wrap { display: flex; justify-content: center; }
#rm-play-btn {
  display: flex; align-items: center; gap: 10px;
  background: #fff7f0; border: 2px solid var(--naranja);
  border-radius: 50px; padding: 9px 22px;
  color: var(--naranja); font-weight: 700; font-size: 15px;
  cursor: pointer;
}
#rm-play-btn:disabled { opacity: .5; cursor: default; }
#rm-play-btn:active:not(:disabled) { transform: scale(.95); }

/* Wrapper vertical (por defecto) */
#rm-opciones.rm-vertical-wrap {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 14px; width: calc(100% - 28px);
}
/* Wrapper horizontal (3 opciones pequeñas) */
#rm-opciones.rm-horizontal-wrap {
  display: flex; flex-direction: row; gap: 6px;
  justify-content: center; margin: 0 8px;
}
.rm-opcion-btn {
  background: white; border: 1.5px solid var(--borde);
  border-radius: 12px; cursor: pointer; padding: 4px 6px;
  transition: border-color .15s; text-align: center;
}
.rm-opcion-btn.rm-vertical  { width: 100%; }
.rm-opcion-btn.rm-horizontal { flex: 1; min-width: 0; }
.rm-img {
  display: block; width: 100%; max-height: 70px;
  object-fit: contain;
}
.rm-opcion-btn:active:not(:disabled) { transform: scale(.97); }
.rm-opcion-btn:disabled { cursor: default; }
.rm-opcion-btn.rm-correcto   { background: #e8faf0; border-color: var(--acierto); }
.rm-opcion-btn.rm-incorrecto { background: #fff0f2; border-color: var(--error);   }



/* -- CUALIDADES SONIDO ----------------------------------------- */

#cs-layout {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px; width: 100%;
  padding-top: 14px;
}

#cs-play-row {
  display: flex; align-items: center; gap: 12px;
  justify-content: center;
}

/* Contador de ronda — inline a la derecha del botón Escuchar */
#cs-contador {
  display: flex; align-items: center; gap: 2px;
  background: white; border: 1.5px solid var(--borde);
  border-radius: 16px; padding: 5px 11px;
  flex-shrink: 0;
}
.cs-cnt-num   { font-size: 14px; font-weight: 800; color: var(--naranja); }
.cs-cnt-sep   { font-size: 14px; font-weight: 400; color: #ccc; }
.cs-cnt-total { font-size: 14px; font-weight: 600; color: #bbb; }

/* Botón escuchar */
#cs-play-btn {
  display: flex; align-items: center; gap: 10px;
  background: #fff7f0; border: 2px solid var(--naranja);
  border-radius: 50px; padding: 10px 24px;
  color: var(--naranja); font-weight: 700; font-size: 15px;
  cursor: pointer;
}
#cs-play-btn:disabled { opacity: .5; cursor: default; }
#cs-play-btn:active:not(:disabled) { transform: scale(.95); }

/* Indicadores de los dos sonidos */
#cs-indicadores {
  display: flex; align-items: center; gap: 10px;
}
.cs-ind {
  padding: 8px 18px; border-radius: 10px;
  border: 2px solid #e5dfd7; background: white;
  font-size: 13px; font-weight: 600; color: #aaa;
  transition: border-color .15s, color .15s, background .15s;
}
.cs-ind.cs-ind-activo {
  border-color: var(--naranja); color: var(--naranja);
  background: #fff7f0;
}
.cs-separador {
  font-size: 18px; color: #ccc;
}

/* Pregunta */
#cs-pregunta {
  font-size: 14px; font-weight: 600; color: var(--texto);
  text-align: center; line-height: 1.4;
}

/* Opciones */
#cs-opciones {
  display: flex; flex-direction: column; gap: 10px;
  width: 347px; margin: 0 auto;
}
.cs-opcion {
  width: 100%; height: 52px; padding: 0 16px;
  background: #e8f0fe; border: 1.5px solid #3b6fd4;
  border-radius: 12px;
  font-size: 15px; font-weight: 600; color: #3b6fd4;
  cursor: pointer; text-align: center;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s;
}
.cs-opcion:active:not(:disabled) { transform: scale(.97); }
.cs-opcion:disabled { opacity: .65; cursor: default; }
.cs-correcto   { background: #e8faf0 !important; border-color: var(--acierto) !important; color: var(--acierto) !important; }
.cs-incorrecto { background: #fff0f2 !important; border-color: var(--error)   !important; color: var(--error)   !important; }


/* ── Memory Parejas ────────────────────────────────────────────── */
.mem-tarjeta { perspective: 700px; cursor: pointer; }
.mem-tarjeta-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.42s cubic-bezier(.4,0,.2,1);
  border-radius: 8px;
}
.mem-tarjeta.volteada .mem-tarjeta-inner,
.mem-tarjeta.encontrada .mem-tarjeta-inner { transform: rotateY(180deg); }

.mem-cara {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mem-dorso {
  background: linear-gradient(145deg, #ff6b35 0%, #e8551f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.mem-frente {
  background: #fff;
  transform: rotateY(180deg);
  border: 2px solid #e5dfd7;
  flex-direction: column;
  padding: 4px; box-sizing: border-box;
}
.mem-label {
  font-size: 15px; font-weight: 800;
  color: #2a2018; text-align: center;
}
.mem-tarjeta.encontrada .mem-frente {
  border-color: #34c785; background: #f4fdf8;
}
.mem-tarjeta.error .mem-frente {
  border-color: #ef4565; background: #fff5f7;
}

@keyframes mem-shake {
  0%,100% { transform: rotateY(180deg) translateX(0); }
  25%      { transform: rotateY(180deg) translateX(-6px); }
  75%      { transform: rotateY(180deg) translateX(6px); }
}
.mem-tarjeta.error .mem-tarjeta-inner { animation: mem-shake 0.38s ease; }

@keyframes mem-pop {
  0%   { transform: rotateY(180deg) scale(1); }
  45%  { transform: rotateY(180deg) scale(1.07); }
  100% { transform: rotateY(180deg) scale(1); }
}
.mem-tarjeta.encontrada .mem-tarjeta-inner { animation: mem-pop 0.38s ease forwards; }


/* ── Reconocimiento Rítmico ─────────────────────────────────────── */

#rr-layout {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  width: 100%; padding: 0 2px;
}

/* Botón escuchar — mismo estilo que rm */
#rr-audio-wrap { display: flex; justify-content: center; }
#rr-play-btn {
  display: flex; align-items: center; gap: 10px;
  background: #fff7f0; border: 2px solid var(--naranja);
  border-radius: 50px; padding: 9px 22px;
  color: var(--naranja); font-weight: 700; font-size: 15px;
  cursor: pointer;
}
#rr-play-btn:disabled { opacity: .5; cursor: default; }
#rr-play-btn:active:not(:disabled) { transform: scale(.95); }

/* Pregunta */
#rr-pregunta {
  font-size: 14px; font-weight: 600; color: var(--texto);
  text-align: center;
}

/* Opciones en columna vertical */
#rr-opciones {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; padding: 0 4px; box-sizing: border-box;
}
.rr-opcion-btn {
  width: 100%; padding: 8px 6px 6px;
  background: #f0f4ff; border: 2px solid #3b6fd4;
  border-radius: 12px;
  cursor: pointer; text-align: center;
  transition: transform .1s;
}
.rr-opcion-btn:active:not(:disabled) { transform: scale(.98); }
.rr-opcion-btn:disabled { cursor: default; }
.rr-opcion-btn.rr-correcto   { background: #e8faf0; border-color: var(--acierto); }
.rr-opcion-btn.rr-incorrecto { background: #fff0f2; border-color: var(--error);   }


/* ── SVG: evitar cursor de texto sobre elementos <text> ─────── */
svg { -webkit-user-select:none; user-select:none; }


/* ── COMPONENTE GLOBAL: BOTÓN INFO ──────────────────────────── */
/* Imagen: ../assets/img/btn_info_morado.png  width="68" */
.btn-info-morado { background:none; border:none; padding:0; cursor:pointer; flex-shrink:0; opacity:0.85; transition:opacity 0.15s; }
.btn-info-morado:hover { opacity:1; }
.btn-info-morado img { display:block; }
.rr-opcion-btn.rr-reproduciendo { opacity: .6; }

/* Modo solo: PNG ocupa todo el área, Tempo oculto */
#bienvenida-metro.has-portada-solo .metro-img        { display: none; }
#bienvenida-metro.has-portada-solo #bienvenida-portada { position: absolute; inset: 0; width: 100%; height: 100%; }
#bienvenida-metro.has-portada-solo #portada-img      { object-position: center; }

/* -- PORTADA BIENVENIDA ---------------------------------------- */
#bienvenida-tempo-wrap {
  position: absolute;
  left: 10%; bottom: -43px;
  width: 44%;
  height: 97%;
  z-index: 2;
  overflow: visible;
}
#bienvenida-portada {
  position: absolute;
  right: 15%; bottom: 15%;
  width: 73%;
  height: 90%;
  background: transparent;
  z-index: 1;
}
#portada-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  display: block;
}
#s-bienvenida.has-portada #bienvenida-bocadillo .bocadillo::after {
  left: 106px; transform: none;
}
#s-bienvenida.has-portada #bienvenida-bocadillo .bocadillo::before {
  left: 104px; transform: none;
}