/* ================================================================
   LM-ENTRENADOR.CSS · Entrenador de lenguaje musical (v1)
   Se carga solo en /lenguaje-musical/ (pages/lenguaje-musical.php).
   Colores de marca de luena-v2.css: grafito, oro, teal, papel y tinta.
   Móvil primero: todo cabe en 360 px de ancho.
   ================================================================ */

/* ---------- Fuente de símbolos musicales (subconjunto de Bravura, licencia OFL) ---------- */
@font-face {
  font-family: 'LM Notas';                                          /* Nombre propio (Bravura es nombre reservado) */
  src: url('../assets/fonts/lm-notas/lm-notas.woff2') format('woff2'); /* 11 KB */
  font-display: block;                                              /* Mejor esperar un instante que ver cuadraditos */
}

/* ---------- Contenedor y barra superior ---------- */
.lm-ent { max-width: 1000px; margin: 0 auto; color: var(--lm-hueso); scroll-margin-top: 80px; } /* Ancho cómodo, texto claro sobre oscuro (y sin quedar bajo el menú fijo) */
.lm-ent__cargando { color: var(--lm-niquel); }                      /* Mensaje antes de que arranque el JavaScript */
.lm-ent__bienvenida { max-width: 1000px; margin: 0 auto 18px; }     /* Aviso de bienvenida encima del entrenador */
.lm-ent__ancla { scroll-margin-top: 96px; }                          /* Al aterrizar en #seguir, que el menú fijo no tape el aviso */
#entrenador { scroll-margin-top: 72px; }                            /* Igual con el botón "Empezar a practicar" */
.lm-ent__barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; } /* Niveles | marcador */
.lm-ent__niveles { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; max-width: 100%; } /* Pestañas (se deslizan en móvil) */
.lm-ent__niveles::-webkit-scrollbar { display: none; }              /* Sin barra de desplazamiento visible */
.lm-ent__nivel-tab {                                                /* Pestaña de nivel */
  flex: 0 0 auto; border: 1px solid var(--lm-grafito-3); background: var(--lm-grafito-2); color: var(--lm-hueso); /* Oscura */
  font: 600 var(--lm-t-s) var(--lm-fuente); padding: 9px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; /* Píldora */
}
.lm-ent__nivel-tab:hover:not(:disabled) { border-color: var(--lm-oro); } /* Hover dorado */
.lm-ent__nivel-tab[aria-selected="true"] { background: var(--lm-oro); color: var(--lm-grafito); border-color: var(--lm-oro); } /* Nivel elegido */
.lm-ent__nivel-tab:disabled { opacity: .55; cursor: default; }      /* Durante una ronda */
.lm-ent__nivel-tab .fa-lock { font-size: .8em; opacity: .8; }       /* Candado pequeño */
.lm-ent__marcador { display: flex; gap: 8px; align-items: center; }  /* Racha y puntos */
.lm-ent__dato { display: inline-flex; align-items: center; gap: 6px; background: var(--lm-grafito-2); border: 1px solid var(--lm-grafito-3); border-radius: 999px; padding: 6px 12px; font-weight: 700; } /* Chapita */
.lm-ent__dato small { font-weight: 500; color: var(--lm-niquel); }  /* Unidad */
.lm-ent__dato .fa-fire { color: var(--lm-niquel); }                 /* Fuego apagado… */
.lm-ent__dato--hoy .fa-fire { color: #FF8A3D; }                     /* …y encendido si ya has practicado hoy */
.lm-ent__dato .fa-bolt { color: var(--lm-oro); }                    /* Rayo dorado */
.lm-ent__ajustes-btn { background: none; border: 1px solid var(--lm-grafito-3); color: var(--lm-niquel); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; } /* Engranaje */
.lm-ent__ajustes-btn:hover { color: var(--lm-hueso); border-color: var(--lm-niquel); } /* Hover */
.lm-ent__aviso { background: rgba(212, 175, 55, .12); border: 1px solid rgba(212, 175, 55, .4); padding: 10px 14px; border-radius: var(--lm-radio-s); font-size: var(--lm-t-s); } /* Aviso de guardado */

/* ---------- Vista de nivel ---------- */
.lm-ent__nivel-cab { margin-bottom: 18px; }                         /* Cabecera del nivel */
.lm-ent__nivel-titulo { font-size: var(--lm-t-xl); margin: 0; color: #fff; font-stretch: var(--lm-estrecha); } /* Nombre del nivel */
.lm-ent__nivel-sub { margin: 4px 0 12px; color: var(--lm-niquel); } /* Cursos */
.lm-ent__progreso { height: 8px; background: var(--lm-grafito-3); border-radius: 99px; overflow: hidden; max-width: 420px; } /* Barra de estrellas */
.lm-ent__progreso span { display: block; height: 100%; background: linear-gradient(90deg, var(--lm-oro), var(--lm-oro-claro)); border-radius: inherit; transition: width .6s; } /* Relleno */
.lm-ent__progreso-txt { margin: 6px 0 0; font-size: var(--lm-t-xs); color: var(--lm-niquel); } /* "12 de 30 estrellas" */
.lm-ent__progreso-txt .fa-star { color: var(--lm-oro); }            /* Estrella dorada */
.lm-ent__candado { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; background: rgba(0, 194, 199, .08); border: 1px solid rgba(0, 194, 199, .35); border-radius: var(--lm-radio-m); padding: 14px 16px; margin-bottom: 18px; } /* Aviso de nivel con cuenta */
.lm-ent__candado p { margin: 0; flex: 1 1 320px; }                   /* Texto */
.lm-ent__reto {                                                     /* Botón grande del reto del día */
  display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; cursor: pointer; margin-bottom: 22px; /* Fila */
  background: linear-gradient(135deg, rgba(212, 175, 55, .18), rgba(212, 175, 55, .04)); border: 1px solid rgba(212, 175, 55, .55); /* Dorado suave */
  color: var(--lm-hueso); border-radius: var(--lm-radio-m); padding: 16px 18px; font: inherit; transition: transform .15s, border-color .15s; /* Forma */
}
.lm-ent__reto:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--lm-oro); } /* Se levanta */
.lm-ent__reto strong { display: block; font-size: var(--lm-t-l); color: #fff; } /* Título */
.lm-ent__reto small { color: var(--lm-niquel); font-size: var(--lm-t-s); } /* Detalle */
.lm-ent__reto-icono { flex: 0 0 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--lm-oro); color: var(--lm-grafito); font-size: 1.3rem; } /* Círculo */
.lm-ent__reto--hecho .lm-ent__reto-icono { background: var(--lm-5); color: #fff; } /* Hecho: verde */
.lm-ent__reto:disabled, .lm-ent__mod-btn:disabled, .lm-ent__crono:disabled { opacity: .45; cursor: not-allowed; transform: none; } /* Bloqueados */
.lm-ent__bloque { margin-bottom: 22px; }                            /* Bloque (Lectura, Oído…) */
.lm-ent__bloque-titulo { font-size: var(--lm-t-m); text-transform: uppercase; letter-spacing: .08em; color: var(--lm-oro); margin: 0 0 10px; } /* Título del bloque */
.lm-ent__bloque-titulo small { text-transform: none; letter-spacing: 0; color: var(--lm-niquel); font-weight: 400; margin-left: 6px; } /* Descripción */
.lm-ent__mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } /* Tarjetas */
.lm-ent__mod { display: flex; flex-direction: column; }             /* Tarjeta + botón del minuto */
.lm-ent__mod-btn {                                                  /* Tarjeta de ejercicio */
  flex: 1; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: 1fr auto; gap: 4px 12px; text-align: left; cursor: pointer; /* Icono | texto */
  background: var(--lm-grafito-2); border: 1px solid var(--lm-grafito-3); border-radius: var(--lm-radio-m); padding: 14px; color: var(--lm-hueso); font: inherit; /* Panel */
  transition: border-color .15s, transform .15s;                    /* Animación */
}
.lm-ent__mod-btn:hover:not(:disabled) { border-color: var(--lm-teal); transform: translateY(-2px); } /* Hover teal */
.lm-ent__mod-icono { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(0, 194, 199, .12); color: var(--lm-teal); font-size: 1.15rem; } /* Icono */
.lm-ent__mod-texto strong { display: block; color: #fff; }          /* Nombre */
.lm-ent__mod-texto small { display: block; color: var(--lm-niquel); font-size: var(--lm-t-xs); line-height: 1.4; margin-top: 2px; } /* Descripción */
.lm-ent__mod-pie { display: flex; align-items: center; }            /* Estrellas */
.lm-ent__estrellas { color: var(--lm-oro); letter-spacing: 2px; font-size: .85rem; } /* Estrellas doradas */
.lm-ent__estrellas .far { color: rgba(255, 255, 255, .28); }        /* Vacías: apagadas (pero visibles) */
.lm-ent__nuevo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--lm-teal); border: 1px solid currentColor; border-radius: 99px; padding: 1px 8px; } /* Etiqueta "Nuevo" */
.lm-ent__crono { margin-top: -1px; border: 1px solid var(--lm-grafito-3); border-top: 0; background: transparent; color: var(--lm-niquel); font: 600 var(--lm-t-xs) var(--lm-fuente); padding: 7px; border-radius: 0 0 var(--lm-radio-m) var(--lm-radio-m); cursor: pointer; } /* "1 minuto" bajo la tarjeta */
.lm-ent__mod-btn:has(+ .lm-ent__crono) { border-radius: var(--lm-radio-m) var(--lm-radio-m) 0 0; } /* Esquinas unidas */
.lm-ent__crono:hover:not(:disabled) { color: var(--lm-oro); }       /* Hover */
.lm-ent__ajustes { margin-top: 10px; border-top: 1px solid var(--lm-grafito-3); padding-top: 12px; } /* Ajustes */
.lm-ent__ajustes summary { cursor: pointer; color: var(--lm-niquel); font-weight: 600; } /* Desplegable */
.lm-ent__ajuste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; } /* Fila de ajuste */
.lm-ent__ajuste > span { min-width: 210px; color: var(--lm-hueso); } /* Etiqueta */

/* ---------- Ronda ---------- */
.lm-ent__ronda-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } /* Salir · título · progreso · racha */
.lm-ent__salir { flex: 0 0 38px; height: 38px; border-radius: 50%; border: 1px solid var(--lm-grafito-3); background: none; color: var(--lm-niquel); cursor: pointer; font-size: 1.05rem; } /* Cruz */
.lm-ent__salir:hover { color: #fff; border-color: var(--lm-niquel); } /* Hover */
.lm-ent__ronda-titulo { margin: 0; font-weight: 700; color: #fff; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Título */
.lm-ent__puntos { display: flex; gap: 4px; flex-wrap: wrap; max-width: 46%; justify-content: flex-end; } /* Puntitos */
.lm-ent__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--lm-grafito-3); transition: background .2s, transform .2s; } /* Punto */
.lm-ent__punto--actual { background: var(--lm-niquel); transform: scale(1.25); } /* Pregunta actual */
.lm-ent__punto--ok { background: var(--lm-5); }                     /* Acertada */
.lm-ent__punto--mal { background: var(--lm-r); }                    /* Fallada */
.lm-ent__racha { margin: 0; font-weight: 700; color: var(--lm-niquel); min-width: 44px; text-align: right; } /* Racha de la ronda */
.lm-ent__racha--viva { color: #FF8A3D; animation: lm-ent-late .5s; } /* Racha de 3 o más: fuego */
@keyframes lm-ent-late { 50% { transform: scale(1.3); } }            /* Latido */
.lm-ent__reloj { margin: 0; font: 800 1.6rem var(--lm-fuente); color: var(--lm-oro); min-width: 48px; text-align: center; } /* Cuenta atrás */
.lm-ent__reloj--fin { color: var(--lm-r); animation: lm-ent-late 1s infinite; } /* Últimos 10 segundos */
.lm-ent__cuenta { margin: 0; font-weight: 800; color: #fff; }       /* Aciertos del minuto */
.lm-ent__cuenta small { font-weight: 500; color: var(--lm-niquel); } /* Unidad */

/* Tarjeta de papel: la partitura se lee mejor en negro sobre claro */
.lm-ent__tarjeta { background: var(--lm-papel); color: var(--lm-tinta); border-radius: var(--lm-radio-m); padding: clamp(16px, 3vw, 28px); box-shadow: var(--lm-sombra); } /* Papel */
.lm-ent__enunciado { margin: 0 0 12px; font-size: var(--lm-t-l); font-weight: 700; text-align: center; } /* Pregunta */
.lm-ent__pentagrama { display: flex; justify-content: center; margin: 4px auto 14px; min-height: 60px; overflow-x: auto; } /* Partitura */
.lm-pg { display: block; max-width: 100%; height: auto; }           /* El SVG se adapta al ancho */
.lm-pg--ok { color: #1E8449; }                                      /* Nota bien (verde) */
.lm-pg--mal { color: #C8323A; }                                     /* Nota mal (rojo) */
.lm-pg--activo { color: #00989C; }                                  /* Nota destacada (teal oscuro: contraste sobre papel) */
.lm-pg--tenue { opacity: .45; }                                     /* Nota dada */
.lm-ent__audio { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; } /* Botones de sonido */
.lm-ent__audio .lm-chip { background: #fff; color: var(--lm-tinta); border-color: var(--lm-linea); } /* Chips sobre papel */
.lm-ent__audio .lm-chip:hover { border-color: var(--lm-bronce); }   /* Hover */
.lm-ent__escuchar kbd { font: 600 .7rem var(--lm-fuente); border: 1px solid rgba(255, 255, 255, .4); border-radius: 4px; padding: 1px 5px; margin-left: 4px; opacity: .8; } /* Atajo */
@media (hover: none) { .lm-ent__escuchar kbd, .lm-ent__tecla, .lm-piano__ayuda { display: none; } } /* En pantallas táctiles no hay teclado: fuera los atajos */

/* Botones de respuesta */
.lm-ent__opciones { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2 columnas en móvil */
.lm-ent__opciones--1 { grid-template-columns: minmax(0, 1fr); }     /* Respuestas largas */
.lm-ent__opciones--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Do Re Mi…: 4 + 3 en móvil */
.lm-ent__opcion {                                                   /* Botón de respuesta */
  position: relative; min-height: 52px; padding: 12px 14px; border-radius: var(--lm-radio-s); cursor: pointer; /* Tamaño cómodo para el dedo */
  background: #fff; border: 2px solid var(--lm-linea); color: var(--lm-tinta); font: 650 var(--lm-t-m) var(--lm-fuente); /* Blanco */
  transition: border-color .12s, background .12s, transform .08s;  /* Animación */
}
.lm-ent__opcion:hover:not(:disabled) { border-color: var(--lm-bronce); } /* Hover */
.lm-ent__opcion:active:not(:disabled) { transform: scale(.97); }    /* Al pulsar */
.lm-ent__opcion:disabled { cursor: default; }                       /* Ya respondida */
.lm-ent__opcion--ok { background: #E3F4EA; border-color: #1E8449; color: #14532d; } /* Correcta */
.lm-ent__opcion--mal { background: #FBE6E7; border-color: #C8323A; color: #7f1d1d; animation: lm-ent-no .35s; } /* Elegida y mal */
@keyframes lm-ent-no { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* Sacudida */
.lm-ent__tecla { position: absolute; top: 4px; left: 7px; font-size: .68rem; font-weight: 700; color: var(--lm-tinta-2); opacity: .6; } /* Número del atajo */
.lm-ent__op-pg { display: block; color: var(--lm-tinta); }          /* Partitura dentro del botón (bloque: necesita ancho) */
.lm-ent__opciones--partitura { grid-template-columns: minmax(0, 1fr); } /* Ritmos: uno por fila en móvil (más grandes) */
.lm-ent__opciones--partitura .lm-ent__opcion { padding: 16px 8px 8px; } /* Botones con partitura */
.lm-ent__oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Solo para lectores de pantalla */

/* Corrección */
.lm-ent__feedback { margin-top: 14px; border-radius: var(--lm-radio-m); padding: 16px 18px; background: var(--lm-grafito-2); border: 1px solid var(--lm-grafito-3); border-left-width: 5px; animation: lm-ent-entra .25s ease-out; } /* Panel */
@keyframes lm-ent-entra { from { opacity: 0; transform: translateY(8px); } } /* Aparece */
.lm-ent__feedback--ok { border-left-color: var(--lm-5); }           /* Verde */
.lm-ent__feedback--mal { border-left-color: var(--lm-r); }          /* Rojo */
.lm-ent__veredicto { margin: 0 0 6px; font-size: var(--lm-t-l); font-weight: 800; color: #fff; } /* Titular */
.lm-ent__feedback--ok .lm-ent__veredicto i { color: #3DDC84; }      /* Icono verde */
.lm-ent__feedback--mal .lm-ent__veredicto i { color: #FF6B70; }     /* Icono rojo */
.lm-ent__elegida, .lm-ent__explica { margin: 0 0 8px; color: var(--lm-hueso); } /* Textos */
.lm-ent__explica b { color: var(--lm-oro-claro); }                  /* Lo importante, en dorado */
.lm-ent__despues { background: var(--lm-papel); color: var(--lm-tinta); border-radius: var(--lm-radio-s); padding: 6px 10px; display: flex; justify-content: center; margin: 10px 0; overflow-x: auto; } /* Solución escrita */
.lm-ent__comparar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; } /* Comparar sonidos */
.lm-ent__seguir { margin-top: 8px; }                                /* Siguiente */

/* ---------- Marcar el ritmo ---------- */
.lm-golpes { display: grid; gap: 12px; justify-items: center; }     /* Columna centrada */
.lm-golpes__botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } /* Empezar y escuchar */
.lm-golpes__botones .lm-chip { background: #fff; color: var(--lm-tinta); border-color: var(--lm-linea); } /* Chip sobre papel */
.lm-golpes__pulso { width: 18px; height: 18px; border-radius: 50%; background: var(--lm-linea); transition: background .05s, transform .05s; } /* Luz del pulso */
.lm-golpes__pulso--on { background: var(--lm-teal); transform: scale(1.35); } /* Pulso */
.lm-golpes__pulso--on.lm-golpes__pulso--uno { background: var(--lm-oro); } /* Primer tiempo */
.lm-golpes__pad {                                                   /* Superficie para tocar */
  width: 100%; max-width: 520px; min-height: 130px; border-radius: 18px; border: 2px dashed var(--lm-linea); background: #fff; /* Grande */
  color: var(--lm-tinta-2); font: 700 var(--lm-t-l) var(--lm-fuente); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; /* Sin zoom ni selección */
  display: grid; place-content: center; gap: 4px;                   /* Texto centrado */
}
.lm-golpes__pad small { font-weight: 500; font-size: var(--lm-t-xs); } /* Ayuda */
.lm-golpes__pad:not(:disabled) { border-style: solid; border-color: var(--lm-teal); color: var(--lm-tinta); } /* Activa */
.lm-golpes__pad:disabled { opacity: .55; cursor: default; }         /* Inactiva */
.lm-golpes__pad--golpe { animation: lm-ent-golpe .18s; }            /* Destello al tocar */
@keyframes lm-ent-golpe { 0% { background: rgba(0, 194, 199, .35); transform: scale(.98); } } /* Destello */
.lm-golpes__estado { margin: 0; font-weight: 600; text-align: center; } /* Estado */
.lm-golpes__linea { position: relative; width: 100%; max-width: 620px; height: 46px; border-top: 2px solid var(--lm-linea); margin-top: 22px; } /* Línea de tiempo */
.lm-golpes__leyenda { position: absolute; top: -26px; left: 0; font-size: var(--lm-t-xs); color: var(--lm-tinta-2); display: flex; gap: 6px; align-items: center; } /* Leyenda */
.lm-golpes__leyenda .lm-golpes__m { position: static; transform: none; } /* Muestras de la leyenda */
.lm-golpes__m { position: absolute; display: inline-block; transform: translateX(-50%); } /* Marca */
.lm-golpes__m--nota { top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--lm-tinta); } /* Nota */
.lm-golpes__m--fallo { background: #C8323A; }                       /* Nota sin toque */
.lm-golpes__m--toque { top: 10px; width: 3px; height: 22px; background: var(--lm-teal); border-radius: 2px; } /* Toque del alumno */

/* ---------- Teclado de piano ---------- */
.lm-piano-zona { display: grid; gap: 10px; }                        /* Columna */
.lm-piano__cuenta { margin: 0; text-align: center; font-weight: 700; } /* "2 de 5 notas" */
.lm-piano__scroll { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } /* Se desliza en móvil */
.lm-piano { --tecla: 38px; --negra: 24px; position: relative; display: flex; width: calc(var(--n) * var(--tecla)); height: 150px; margin: 0 auto; user-select: none; -webkit-user-select: none; touch-action: manipulation; } /* Teclado */
.lm-piano__blanca { flex: 0 0 var(--tecla); height: 100%; background: #fff; border: 1px solid #b9b2a6; border-radius: 0 0 6px 6px; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font: 600 .72rem var(--lm-fuente); color: var(--lm-tinta-2); } /* Tecla blanca */
.lm-piano__blanca sub { font-size: .6rem; }                         /* Octava del Do */
.lm-piano__negra { position: absolute; top: 0; width: var(--negra); height: 60%; background: #1d2026; border: 1px solid #000; border-radius: 0 0 4px 4px; cursor: pointer; z-index: 1; } /* Tecla negra */
.lm-piano__blanca.lm-piano--pulsada { background: rgba(0, 194, 199, .3); } /* Pulsada */
.lm-piano__negra.lm-piano--pulsada { background: #00989C; }         /* Pulsada */
.lm-piano__botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } /* Borrar y comprobar */
.lm-piano__botones .lm-chip { background: #fff; color: var(--lm-tinta); border-color: var(--lm-linea); } /* Chip sobre papel */
.lm-piano__ayuda { margin: 0; text-align: center; font-size: var(--lm-t-xs); color: var(--lm-tinta-2); } /* Ayuda */
@media (min-width: 760px) { .lm-piano { --tecla: 44px; --negra: 28px; } } /* Teclas más grandes en ordenador */

/* ---------- Micrófono ---------- */
.lm-micro { display: grid; gap: 12px; justify-items: center; text-align: center; } /* Columna */
.lm-micro__medidor { width: 100%; max-width: 460px; display: grid; gap: 8px; } /* Medidor */
.lm-micro__nota { margin: 0; font: 800 2.2rem var(--lm-fuente); line-height: 1; } /* Nota que canta */
.lm-micro__nota small { display: block; font: 500 var(--lm-t-xs) var(--lm-fuente); color: var(--lm-tinta-2); margin-top: 4px; } /* "tu nota" */
.lm-micro__escala { position: relative; height: 26px; border-radius: 99px; background: linear-gradient(90deg, #f3c2c4, #fff 38%, #c9ecd6 50%, #fff 62%, #f3c2c4); border: 1px solid var(--lm-linea); } /* Escala de afinación */
.lm-micro__centro { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--lm-tinta); } /* Centro = afinado */
.lm-micro__aguja { position: absolute; left: 50%; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #C8323A; transform: translateX(-50%); transition: left .08s linear; } /* Aguja */
.lm-micro__aguja--ok { background: #1E8449; }                       /* Afinado */
.lm-micro__pista { display: flex; justify-content: space-between; margin: 0; font-size: var(--lm-t-xs); color: var(--lm-tinta-2); } /* Grave · objetivo · agudo */
.lm-micro__pista span:nth-child(2) { font-weight: 800; color: var(--lm-tinta); font-size: var(--lm-t-s); } /* Objetivo */
.lm-micro__llenado { height: 8px; background: var(--lm-linea); border-radius: 99px; overflow: hidden; } /* Tiempo afinado */
.lm-micro__llenado span { display: block; height: 100%; width: 0; background: #1E8449; transition: width .1s; } /* Relleno */
.lm-micro__estado { margin: 0; font-weight: 600; }                  /* Indicación */
.lm-micro__botones, .lm-micro__auto { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } /* Botones */
.lm-micro__auto p { flex-basis: 100%; margin: 0; }                  /* Texto del modo sin micrófono */
.lm-micro .lm-chip { background: #fff; color: var(--lm-tinta); border-color: var(--lm-linea); } /* Chips sobre papel */

/* ---------- Resultado ---------- */
.lm-ent__resultado { position: relative; overflow: hidden; text-align: center; background: var(--lm-grafito-2); border: 1px solid var(--lm-grafito-3); border-radius: var(--lm-radio-m); padding: clamp(22px, 4vw, 40px) 18px; } /* Panel */
.lm-ent__res-estrellas { margin: 0; font-size: 2.6rem; }            /* Estrellas grandes */
.lm-ent__res-estrellas .lm-ent__estrellas { font-size: inherit; letter-spacing: 6px; } /* (la chapita pequeña no manda aquí) */
.lm-ent .lm-btn:disabled { opacity: .45; cursor: not-allowed; }     /* Botón sin uso (p. ej., tras la ronda de prueba) */
.lm-ent__res-estrellas .fa-star { animation: lm-ent-estrella .5s backwards; } /* Aparecen una a una */
.lm-ent__res-estrellas .fa-star:nth-child(2) { animation-delay: .15s; } /* Segunda */
.lm-ent__res-estrellas .fa-star:nth-child(3) { animation-delay: .3s; } /* Tercera */
@keyframes lm-ent-estrella { from { transform: scale(0) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.25); } } /* Salto */
.lm-ent__res-titulo { margin: 8px 0 4px; font-size: var(--lm-t-xl); color: #fff; font-stretch: var(--lm-estrecha); } /* Titular */
.lm-ent__res-cifra { margin: 0 0 12px; color: var(--lm-niquel); }  /* "8 de 10" */
.lm-ent__res-cifra strong { color: #fff; font-size: 1.4em; }        /* Cifra grande */
.lm-ent__res-datos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; padding: 0; margin: 0 0 14px; } /* Datos */
.lm-ent__res-datos .fa-bolt { color: var(--lm-oro); } .lm-ent__res-datos .fa-fire { color: #FF8A3D; } .lm-ent__res-datos .fa-calendar-check { color: var(--lm-teal); } /* Iconos */
.lm-ent__res-mejora { color: #3DDC84; font-weight: 700; }           /* Mejora */
.lm-ent__repasar { display: inline-block; text-align: left; background: rgba(255, 255, 255, .04); border-radius: var(--lm-radio-s); padding: 10px 18px; margin-bottom: 14px; } /* Para repasar */
.lm-ent__repasar p { margin: 0 0 4px; } .lm-ent__repasar ul { margin: 0; padding-left: 18px; color: var(--lm-niquel); } /* Lista */
.lm-ent__res-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } /* Botones */
.lm-ent__cta { margin-top: 20px; border-top: 1px solid var(--lm-grafito-3); padding-top: 18px; } /* Invitación al alta */
.lm-ent__cta p { max-width: 560px; margin: 0 auto 12px; }           /* Texto */
.lm-ent__confeti { position: absolute; inset: 0; pointer-events: none; } /* Capa del confeti */
.lm-ent__confeti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; background: var(--lm-oro); animation: lm-ent-confeti 2.4s ease-in forwards; } /* Papelito */
.lm-ent__confeti i:nth-child(3n) { background: var(--lm-teal); } .lm-ent__confeti i:nth-child(4n) { background: #fff; } .lm-ent__confeti i:nth-child(5n) { background: #FF8A3D; } /* Colores */
.lm-ent__confeti i:nth-child(1) { left: 4%; animation-delay: .05s; } .lm-ent__confeti i:nth-child(2) { left: 10%; animation-delay: .4s; } .lm-ent__confeti i:nth-child(3) { left: 16%; animation-delay: .2s; } /* Posiciones */
.lm-ent__confeti i:nth-child(4) { left: 22%; animation-delay: .6s; } .lm-ent__confeti i:nth-child(5) { left: 28%; animation-delay: .1s; } .lm-ent__confeti i:nth-child(6) { left: 34%; animation-delay: .5s; }
.lm-ent__confeti i:nth-child(7) { left: 40%; animation-delay: .25s; } .lm-ent__confeti i:nth-child(8) { left: 46%; animation-delay: .7s; } .lm-ent__confeti i:nth-child(9) { left: 52%; animation-delay: .15s; }
.lm-ent__confeti i:nth-child(10) { left: 58%; animation-delay: .45s; } .lm-ent__confeti i:nth-child(11) { left: 64%; animation-delay: .3s; } .lm-ent__confeti i:nth-child(12) { left: 70%; animation-delay: .65s; }
.lm-ent__confeti i:nth-child(13) { left: 76%; animation-delay: .1s; } .lm-ent__confeti i:nth-child(14) { left: 82%; animation-delay: .55s; } .lm-ent__confeti i:nth-child(15) { left: 88%; animation-delay: .35s; }
.lm-ent__confeti i:nth-child(16) { left: 94%; animation-delay: .2s; } .lm-ent__confeti i:nth-child(17) { left: 13%; animation-delay: .8s; } .lm-ent__confeti i:nth-child(18) { left: 61%; animation-delay: .9s; }
@keyframes lm-ent-confeti { to { transform: translateY(520px) rotate(540deg); opacity: 0; } } /* Cae girando */
@media (prefers-reduced-motion: reduce) { .lm-ent__confeti, .lm-ent__res-estrellas .fa-star, .lm-ent__racha--viva, .lm-ent__reloj--fin { animation: none !important; } } /* Sin animaciones si el sistema lo pide */

/* ---------- Pantallas más anchas ---------- */
@media (min-width: 640px) {
  .lm-ent__opciones--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 3 columnas */
  .lm-ent__opciones--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 4 columnas */
  .lm-ent__opciones--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } /* Do Re Mi… en una fila */
  .lm-ent__opciones--partitura { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Ritmos: dos por fila */
}
@media (max-width: 559px) {
  .lm-ent__ronda-cab { flex-wrap: wrap; row-gap: 8px; }             /* En móvil, los puntos van en su propia fila */
  .lm-ent__puntos { order: 5; flex: 1 0 100%; max-width: none; justify-content: center; } /* Fila completa */
}

/* ---------- Página: tablas de contenidos por nivel ---------- */
.lm-ent-niveles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: 18px 0 0; padding: 0; list-style: none; } /* Fichas de nivel */
.lm-ent-niveles > li { background: var(--lm-blanco); border: 1px solid var(--lm-linea); border-radius: var(--lm-radio-m); padding: 18px; } /* Ficha */
.lm-ent-niveles h3 { margin: 0 0 2px; font-size: var(--lm-t-l); }   /* Nombre */
.lm-ent-niveles .lm-ent-niveles__sub { margin: 0 0 10px; color: var(--lm-tinta-2); font-size: var(--lm-t-s); } /* Cursos */
.lm-ent-niveles ul { margin: 0; padding-left: 18px; font-size: var(--lm-t-s); list-style: disc; } /* Contenidos */
.lm-ent-niveles ul li { margin: 0 0 4px; padding: 0; background: none; border: 0; } /* Puntos sencillos (sin el estilo de tarjeta de las guías) */
.lm-ent-niveles .lm-ent-niveles__acceso { margin: 10px 0 0; font-size: var(--lm-t-xs); font-weight: 700; color: var(--lm-bronce); text-transform: uppercase; letter-spacing: .05em; } /* Libre / zona privada */