/* ==========================================================================
   LM-LECCIONES.CSS · Páginas de guía (tríadas y ritmos)
   Depende de los tokens de luena-v2.css (colores --lm-*, tipografía, botones).
   Lectura sobre papel claro; los bloques interactivos van en paneles oscuros,
   igual que el mástil de la portada.
   ========================================================================== */

/* ================== 1. CABECERA DE LA GUÍA ================== */
.lm-leccion__cabecera {
  background: var(--lm-grafito);  /* Oscuro, como la portada */
  color: var(--lm-hueso);         /* Texto claro */
  padding: calc(var(--nav-h) + 48px) 0 56px; /* Deja sitio al menú fijo */
}
.lm-migas {
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-niquel);        /* Gris */
  margin: 0 0 16px;               /* Separación con el titular */
}
.lm-migas a {
  color: var(--lm-niquel);        /* Enlace gris */
}
.lm-migas a:hover {
  color: var(--lm-hueso);         /* Claro al pasar */
}
.lm-leccion__titulo {
  font-size: clamp(2.6rem, 7vw, 5rem); /* Titular grande */
  font-weight: 800;               /* Muy negrita */
  font-stretch: 68%;              /* Muy condensada, igual que la portada */
  line-height: .95;               /* Apretada */
  margin: 0 0 20px;               /* Separación */
}
.lm-leccion__intro {
  font-size: var(--lm-t-l);       /* 21 px */
  line-height: 1.5;               /* Lectura */
  color: var(--lm-niquel);        /* Gris claro */
  max-width: 44rem;               /* Línea corta */
  margin: 0 0 28px;               /* Separación */
}
.lm-leccion__cabecera .lm-datos dt {
  color: var(--lm-niquel);        /* Etiqueta gris sobre oscuro */
}
.lm-leccion__cabecera .lm-datos dd {
  color: var(--lm-hueso);         /* Valor claro */
  font-size: var(--lm-t-l);       /* 21 px */
  font-stretch: var(--lm-estrecha); /* Condensado */
  font-weight: 800;               /* Negrita */
}
.lm-leccion__cabecera .lm-datos {
  margin-bottom: 28px;            /* Separación con los botones */
}
.lm-leccion__acciones {
  display: flex;                  /* Botones en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 12px;                      /* Separación */
  align-items: center;            /* Centrados */
}
.lm-leccion__aviso {
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-niquel);        /* Gris */
  margin: 14px 0 0;               /* Separación */
  max-width: 52ch;                /* Línea corta */
}

/* ================== 2. ÍNDICE DE LA GUÍA ================== */
.lm-indice {
  background: var(--lm-papel);    /* Fondo papel */
  border-bottom: 1px solid var(--lm-linea); /* Filete */
  padding: 20px 0;                /* Relleno */
}
.lm-indice h2 {
  font-size: var(--lm-t-s);       /* 15 px */
  font-weight: 700;               /* Negrita */
  margin: 0 0 10px;               /* Separación */
  color: var(--lm-tinta-2);       /* Gris */
}
.lm-indice ol {
  display: flex;                  /* En fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 8px 22px;                  /* Separación */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin relleno */
  list-style: none;               /* Los números ya van en el texto */
}
.lm-indice a {
  color: var(--lm-bronce);        /* Bronce */
  font-weight: 600;               /* Seminegrita */
  text-decoration: none;          /* Sin subrayado */
}
.lm-indice a:hover {
  text-decoration: underline;     /* Subrayado al pasar */
  text-underline-offset: 3px;     /* Separado */
}

/* ================== 3. TEXTO DE LECTURA ================== */
.lm-bloque {
  padding: clamp(44px, 6vw, 72px) 0; /* Aire entre apartados */
  scroll-margin-top: var(--nav-h); /* Al saltar desde el índice no queda bajo el menú */
}
.lm-bloque + .lm-bloque:not(.lm-bloque--oscuro) {
  border-top: 1px solid var(--lm-linea); /* Filete entre apartados claros */
}
.lm-texto > * {
  max-width: 46rem;               /* ~70 caracteres por línea en cada bloque de texto */
}
.container.lm-texto {
  max-width: var(--lm-ancho);     /* El contenedor ocupa el ancho normal: el texto queda alineado a la izquierda con la cabecera */
}
.lm-texto .lm-armonia,
.lm-texto .lm-ritmos-lista,
.lm-texto .lm-leyenda,
.lm-texto .lm-leyenda-ritmo {
  padding-left: 0;                /* Estas listas no llevan sangría de viñeta */
}
.lm-texto h2 {
  font-size: var(--lm-t-xl);      /* Título de apartado */
  font-weight: 800;               /* Negrita */
  font-stretch: var(--lm-estrecha); /* Condensado */
  line-height: 1.05;              /* Apretado */
  color: var(--lm-bronce);        /* Bronce, como en el PDF */
  margin: 0 0 18px;               /* Separación */
}
.lm-texto h3 {
  font-size: var(--lm-t-l);       /* 21 px */
  font-weight: 800;               /* Negrita */
  font-stretch: 85%;              /* Algo condensado */
  margin: 32px 0 10px;            /* Separación */
}
.lm-texto p,
.lm-texto li {
  color: var(--lm-tinta);         /* Texto oscuro */
}
.lm-texto p {
  margin: 0 0 16px;               /* Separación entre párrafos */
}
.lm-texto ul {
  padding-left: 1.2em;            /* Sangría de viñeta */
  margin: 0 0 16px;               /* Separación */
}
.lm-texto li {
  margin-bottom: 8px;             /* Separación entre puntos */
}
.lm-texto li::marker {
  color: var(--lm-bronce);        /* Viñetas bronce */
}
.lm-pie-figura {
  font-size: var(--lm-t-s);       /* 15 px */
  font-style: italic;             /* Cursiva, como en el PDF */
  color: var(--lm-tinta-2);       /* Gris */
}
/* Palabras de color didáctico dentro del texto */
.lm-r { color: var(--lm-r); font-weight: 700; } /* Raíz en rojo */
.lm-3 { color: var(--lm-3); font-weight: 700; } /* Tercera en azul */
.lm-5 { color: var(--lm-5); font-weight: 700; } /* Quinta en verde */

/* ----- Recuadros (como los de la guía en PDF) ----- */
.lm-recuadro {
  background: var(--lm-hueso);    /* Fondo hueso */
  border-left: 4px solid var(--lm-bronce); /* Barra bronce a la izquierda */
  border-radius: 0 var(--lm-radio-s) var(--lm-radio-s) 0; /* Esquinas a la derecha */
  padding: 18px 22px;             /* Relleno */
  margin: 24px 0;                 /* Separación */
}
.lm-recuadro h3 {
  margin: 0 0 8px;                /* Separación */
  font-size: var(--lm-t-m);       /* 17 px */
  font-stretch: 100%;             /* Anchura normal */
}
.lm-recuadro p:last-child,
.lm-recuadro ul:last-child {
  margin-bottom: 0;               /* Sin hueco al final */
}

/* ----- Tablas ----- */
.lm-tabla-scroll {
  overflow-x: auto;               /* En móvil la tabla se desliza, la página no */
  margin: 20px 0 24px;            /* Separación */
  -webkit-overflow-scrolling: touch; /* Inercia en iOS */
}
.lm-tabla {
  width: 100%;                    /* Todo el ancho */
  border-collapse: collapse;      /* Bordes simples */
  font-size: var(--lm-t-s);       /* 15 px */
  min-width: 520px;               /* No se aplasta en móvil */
  background: var(--lm-blanco);   /* Fondo blanco */
}
.lm-tabla th {
  background: var(--lm-hueso);    /* Cabecera hueso (como el PDF) */
  text-align: left;               /* Alineada a la izquierda */
  font-weight: 700;               /* Negrita */
  padding: 10px 12px;             /* Relleno */
  border-bottom: 1px solid var(--lm-linea); /* Filete */
}
.lm-tabla td {
  padding: 10px 12px;             /* Relleno */
  border-bottom: 1px solid var(--lm-linea); /* Filete */
  vertical-align: top;            /* Arriba */
}
.lm-tabla td.num,
.lm-tabla th.num {
  font-variant-numeric: tabular-nums; /* Números alineados */
  white-space: nowrap;            /* Sin partir */
}
.lm-tabla--ancha {
  min-width: 640px;               /* Tablas con muchas columnas */
}

/* ================== 4. PANELES OSCUROS (explorador, reproductor) ================== */
.lm-bloque--oscuro {
  background: var(--lm-grafito);  /* Fondo oscuro */
  color: var(--lm-hueso);         /* Texto claro */
}
.lm-bloque--oscuro .lm-texto h2 {
  color: var(--lm-hueso);         /* Título claro */
}
.lm-bloque--oscuro .lm-texto p {
  color: var(--lm-niquel);        /* Texto gris claro */
}
.lm-panel {
  margin-top: 24px;               /* Separación con el texto */
}
.lm-panel__controles {
  display: flex;                  /* Grupos de controles en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 14px 28px;                 /* Separación */
  align-items: flex-end;          /* Alineados abajo */
  margin-bottom: 18px;            /* Separación con el mástil */
}
.lm-control {
  display: grid;                  /* Etiqueta encima del control */
  gap: 6px;                       /* Separación */
}
.lm-control__etiqueta {
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-niquel);        /* Gris */
  font-weight: 600;               /* Seminegrita */
}
.lm-select {
  min-height: 40px;               /* Igual que los chips */
  padding: 0 36px 0 12px;         /* Hueco para la flecha */
  border-radius: var(--lm-radio-s); /* Esquinas */
  border: 1.5px solid var(--lm-grafito-3); /* Borde */
  background: var(--lm-grafito-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23A9B2BC' stroke-width='2'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; /* Flecha propia */
  color: var(--lm-hueso);         /* Texto claro */
  font: 600 var(--lm-t-s) var(--lm-fuente); /* 15 px */
  appearance: none;               /* Quita el estilo del sistema */
}
.lm-ficha {
  display: grid;                  /* Datos del acorde en rejilla */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Columnas flexibles */
  gap: 1px;                       /* El hueco hace de filete */
  background: var(--lm-grafito-3); /* Color del filete */
  border: 1px solid var(--lm-grafito-3); /* Marco */
  border-radius: var(--lm-radio-m); /* Esquinas */
  overflow: hidden;               /* Recorta */
  margin: 0 0 18px;               /* Separación */
}
.lm-ficha div {
  background: var(--lm-grafito-2); /* Fondo de cada dato */
  padding: 12px 14px;             /* Relleno */
}
.lm-ficha dt {
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-niquel);        /* Gris */
}
.lm-ficha dd {
  margin: 2px 0 0;                /* Sin sangría */
  font-weight: 700;               /* Negrita */
  color: var(--lm-hueso);         /* Claro */
}
.lm-ficha .lm-ficha__titulo dd {
  font-size: var(--lm-t-l);       /* El nombre del acorde más grande */
  font-stretch: var(--lm-estrecha); /* Condensado */
  font-weight: 800;               /* Muy negrita */
  color: var(--lm-oro);           /* Dorado */
}

/* ----- Tabla de armonización con acordes pulsables ----- */
.lm-armonia {
  display: grid;                  /* Siete columnas */
  grid-template-columns: repeat(7, minmax(0, 1fr)); /* Una por grado */
  gap: 6px;                       /* Separación */
  margin: 20px 0 8px;             /* Separación */
  padding: 0;                     /* Sin relleno */
  list-style: none;               /* Sin viñetas */
}
.lm-armonia button {
  width: 100%;                    /* Llena la columna */
  display: grid;                  /* Grado, acorde y tipo apilados */
  gap: 2px;                       /* Separación */
  justify-items: center;          /* Centrados */
  padding: 12px 4px;              /* Relleno */
  border-radius: var(--lm-radio-s); /* Esquinas */
  border: 1.5px solid var(--lm-linea); /* Borde */
  background: var(--lm-blanco);   /* Blanco */
  color: var(--lm-tinta);         /* Texto oscuro */
  font: inherit;                  /* Misma letra */
  cursor: pointer;                /* Mano */
}
.lm-armonia button:hover {
  border-color: var(--lm-bronce); /* Borde bronce al pasar */
}
.lm-armonia .grado {
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-tinta-2);       /* Gris */
  font-weight: 700;               /* Negrita */
}
.lm-armonia .cifra {
  font-size: 1.5rem;              /* Grande */
  font-weight: 800;               /* Muy negrita */
  font-stretch: var(--lm-estrecha); /* Condensado */
  line-height: 1;                 /* Sin aire */
}
.lm-armonia .tipo {
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-tinta-2);       /* Gris */
}
.lm-armonia .mayor .cifra { color: var(--lm-bronce); } /* Los mayores en bronce para que destaquen I, IV y V */
@media (max-width: 640px) {
  .lm-armonia {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* Cuatro por fila en móvil */
  }
}

/* ----- Cadencia I–IV–V–I ----- */
.lm-cadencia {
  background: var(--lm-grafito); /* Panel oscuro */
  border-radius: var(--lm-radio-m); /* Esquinas */
  padding: 24px;                  /* Relleno */
  margin: 24px 0;                 /* Separación */
  display: grid;                  /* Diagramas + botón */
  gap: 18px;                      /* Separación */
  justify-items: start;           /* Botón a la izquierda */
}
.lm-cadencia .lm-diagramas {
  justify-content: flex-start;    /* Diagramas a la izquierda */
  width: 100%;                    /* Todo el ancho */
}
.lm-diagrama.is-sonando svg {
  filter: drop-shadow(0 0 6px rgba(0, 194, 199, .7)); /* Brillo teal en el acorde que suena */
}

/* ================== 5. CUADRÍCULAS DE RITMO ================== */
.lm-reproductor {
  background: var(--lm-grafito-2); /* Panel */
  border: 1px solid var(--lm-grafito-3); /* Borde */
  border-radius: var(--lm-radio-m); /* Esquinas */
  padding: clamp(18px, 3vw, 28px); /* Relleno */
  scroll-margin-top: calc(var(--nav-h) + 16px); /* Al saltar, no queda bajo el menú */
}
.lm-reproductor__cabeza {
  display: flex;                  /* Título y acorde en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  justify-content: space-between; /* A los extremos */
  gap: 8px 24px;                  /* Separación */
  align-items: baseline;          /* Alineados por la línea base */
}
.lm-reproductor__titulo {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem); /* Grande */
  font-weight: 800;               /* Muy negrita */
  font-stretch: var(--lm-estrecha); /* Condensado */
  line-height: 1.05;              /* Apretado */
  margin: 0;                      /* Sin márgenes */
  color: var(--lm-hueso);         /* Claro */
}
.lm-reproductor__acorde {
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-niquel);        /* Gris */
  font-variant-numeric: tabular-nums; /* Números fijos */
}
.lm-reproductor__acorde strong {
  font-size: 1.75rem;             /* Acorde grande */
  font-weight: 800;               /* Negrita */
  font-stretch: var(--lm-estrecha); /* Condensado */
  color: var(--lm-oro);           /* Dorado */
  margin-right: 10px;             /* Separación */
}
.lm-reproductor__clave {
  color: var(--lm-hueso);         /* Claro */
  margin: 10px 0 4px;             /* Separación */
  max-width: 60ch;                /* Línea corta */
}
.lm-reproductor__meta {
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-niquel);        /* Gris */
  margin: 0 0 18px;               /* Separación */
}
.lm-reproductor__controles {
  display: flex;                  /* En fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  align-items: center;            /* Centrados */
  gap: 12px 24px;                 /* Separación */
  margin-top: 18px;               /* Separación con la cuadrícula */
  color: var(--lm-niquel);        /* Texto gris */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-reproductor__controles label {
  display: inline-flex;           /* Casilla + texto */
  align-items: center;            /* Centrados */
  gap: 8px;                       /* Separación */
  cursor: pointer;                /* Mano */
}
.lm-reproductor__controles input[type="checkbox"] {
  width: 18px;                    /* Tamaño cómodo */
  height: 18px;                   /* Tamaño cómodo */
  accent-color: var(--lm-oro);    /* Casilla dorada */
}
.lm-tempo {
  display: inline-flex;           /* Deslizador + texto */
  align-items: center;            /* Centrados */
  gap: 10px;                      /* Separación */
}
.lm-tempo input[type="range"] {
  width: 160px;                   /* Ancho del deslizador */
  accent-color: var(--lm-oro);    /* Dorado */
}
.lm-tempo output {
  min-width: 11ch;                /* No baila al cambiar el número */
  font-variant-numeric: tabular-nums; /* Números fijos */
  color: var(--lm-hueso);         /* Claro */
}
.lm-btn--play {
  min-width: 140px;               /* No cambia de tamaño entre Escuchar y Parar */
}
.lm-btn--play[aria-pressed="true"] {
  background: var(--lm-hueso);    /* Al sonar, el botón se vuelve hueso */
}
.lm-aviso-ios {
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-niquel);        /* Gris */
  margin: 12px 0 0;               /* Separación */
}

/* ----- La cuadrícula ----- */
.lm-rejilla-scroll {
  overflow-x: auto;               /* Las de 16 casillas se deslizan en móvil */
  -webkit-overflow-scrolling: touch; /* Inercia en iOS */
  padding-bottom: 4px;            /* Hueco para la barra de scroll */
}
.lm-rejilla {
  --lm-celda: minmax(38px, 1fr);  /* Ancho mínimo de cada casilla */
  min-width: calc(var(--celdas) * 38px); /* Nunca más estrecha que eso */
  max-width: calc(var(--celdas) * 88px); /* Ni casillas gigantes en pantallas anchas */
}
.lm-rejilla__grupos,
.lm-rejilla__celdas,
.lm-rejilla__cuenta {
  display: grid;                  /* Tres filas alineadas */
  grid-template-columns: repeat(var(--celdas), var(--lm-celda)); /* Mismas columnas en las tres */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin relleno */
  list-style: none;               /* Sin números de lista */
}
.lm-rejilla__grupos {
  gap: 4px;                       /* Separación entre corchetes */
  margin-bottom: 6px;             /* Separación con las casillas */
}
.lm-rejilla__grupos span {
  border-top: 3px solid var(--lm-oro); /* Corchete dorado (como el bronce del PDF) */
  text-align: center;             /* Número centrado */
  font-weight: 700;               /* Negrita */
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-oro);           /* Dorado */
  padding-top: 2px;               /* Respiro */
}
.lm-rejilla__celdas {
  border: 1.5px solid #5B5348;    /* Marco exterior */
  border-radius: 4px;             /* Esquinas mínimas */
  overflow: hidden;               /* Recorta */
}
.lm-celda {
  position: relative;             /* Para la etiqueta PM / abierto */
  aspect-ratio: 1 / 1.05;         /* Casi cuadrada */
  display: grid;                  /* Centra el contenido */
  place-items: center;            /* Centrado */
  background: var(--lm-papel);    /* Casilla clara, como en la guía */
  color: var(--lm-tinta);         /* Flecha negra */
  border-right: 1.5px solid #CFC6B8; /* Separador entre casillas */
  transition: box-shadow .08s ease; /* Iluminación rápida */
}
.lm-celda:last-child {
  border-right: 0;                /* La última sin separador */
}
.lm-flecha {
  display: block;                 /* Bloque */
  width: 58%;                     /* Tamaño de la flecha */
  max-width: 34px;                /* Límite */
}
.lm-flecha svg {
  display: block;                 /* Sin hueco */
  width: 100%;                    /* Llena */
  height: auto;                   /* Proporción */
}
.lm-flecha--U {
  transform: rotate(180deg);      /* Flecha hacia arriba */
}
.lm-celda__letra {
  font-weight: 800;               /* Negrita */
  font-size: clamp(1.1rem, 2.4vw, 1.6rem); /* Grande */
}
.lm-celda__aire {
  color: #B5AC9E;                 /* Punto gris: la mano no toca */
  font-size: 1.4rem;              /* Grande */
  line-height: 1;                 /* Sin aire */
}
.lm-celda__fantasma {
  display: contents;              /* La flecha fantasma ocupa el sitio de la casilla */
}
.lm-celda__fantasma .lm-flecha {
  opacity: .22;                   /* Muy tenue: movimiento en el aire */
}
.lm-celda__marca {
  position: absolute;             /* Pegada abajo */
  bottom: 3px;                    /* Separación del borde */
  left: 0;                        /* Todo el ancho */
  right: 0;                       /* Todo el ancho */
  text-align: center;             /* Centrada */
  font-size: 10px;                /* Pequeña */
  line-height: 1;                 /* Sin aire */
  font-weight: 600;               /* Seminegrita */
}
.lm-celda--acento {
  background: #FADFDF;            /* Fondo rosado: acento */
  color: var(--lm-r);             /* Flecha roja */
}
.lm-celda--pm {
  background: #E4E7EC;            /* Fondo gris: palm mute */
  color: var(--lm-pm);            /* Flecha gris */
}
.lm-celda--x {
  background: #FADFDF;            /* Fondo rosado */
  color: var(--lm-r);             /* Aspa roja */
}
.lm-celda--bajo {
  color: var(--lm-3);             /* B azul */
}
.lm-celda--dedo {
  color: var(--lm-5);             /* Dedos en verde */
}
.lm-celda--corto .lm-flecha {
  width: 46%;                     /* Staccato: flecha algo más corta */
}
.lm-celda.is-ahora {
  box-shadow: inset 0 0 0 3px var(--lm-teal); /* Casilla que suena: marco teal */
}
.lm-rejilla__cuenta li {
  text-align: center;             /* Centrada bajo su casilla */
  padding-top: 6px;               /* Separación */
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-niquel);        /* Gris */
}
.lm-rejilla__cuenta li.fuerte {
  color: var(--lm-hueso);         /* Números en claro */
  font-weight: 800;               /* Negrita */
}
.lm-rejilla__titulo {
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-niquel);        /* Gris */
  margin: 18px 0 6px;             /* Separación */
}
.lm-rejilla__titulo:first-child {
  margin-top: 0;                  /* Sin hueco arriba */
}
/* Cuadrícula sobre fondo claro (apartado de la regla de oro) */
.lm-sobre-claro .lm-rejilla__cuenta li { color: var(--lm-tinta-2); } /* Cuenta gris oscura */
.lm-sobre-claro .lm-rejilla__cuenta li.fuerte { color: var(--lm-tinta); } /* Números oscuros */
.lm-sobre-claro .lm-rejilla__grupos span { color: var(--lm-bronce); border-color: var(--lm-bronce); } /* Grupos bronce */

/* ----- Leyenda de la cuadrícula ----- */
.lm-leyenda-ritmo {
  display: flex;                  /* En fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 10px 22px;                 /* Separación */
  list-style: none;               /* Sin viñetas */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin relleno */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-leyenda-ritmo li {
  display: inline-flex;           /* Muestra + texto */
  align-items: center;            /* Centrados */
  gap: 8px;                       /* Separación */
}
.lm-muestra {
  width: 30px;                    /* Casilla de muestra */
  height: 30px;                   /* Casilla de muestra */
  display: inline-grid;           /* Centra el contenido */
  place-items: center;            /* Centrado */
  border: 1.5px solid #CFC6B8;    /* Borde como las casillas */
  border-radius: 3px;             /* Esquinas mínimas */
  background: var(--lm-papel);    /* Fondo claro */
  font-weight: 800;               /* Negrita */
}
.lm-muestra .lm-flecha {
  width: 70%;                     /* Flecha dentro de la muestra */
}

/* ----- Listas de ritmos (las tablas de la guía, pulsables) ----- */
.lm-ritmos-lista {
  list-style: none;               /* Sin viñetas */
  margin: 20px 0 0;               /* Separación */
  padding: 0;                     /* Sin relleno */
  border-top: 1px solid var(--lm-linea); /* Filete superior */
}
.lm-ritmos-lista li {
  border-bottom: 1px solid var(--lm-linea); /* Filete entre ritmos */
}
.lm-ritmo-item {
  width: 100%;                    /* Fila completa */
  display: grid;                  /* Número | texto | compás */
  grid-template-columns: 44px 1fr auto; /* Columnas */
  gap: 14px;                      /* Separación */
  align-items: center;            /* Centrados */
  padding: 14px 8px;              /* Relleno */
  background: transparent;        /* Sin fondo */
  border: 0;                      /* Sin borde */
  text-align: left;               /* Texto a la izquierda */
  font: inherit;                  /* Misma letra */
  color: var(--lm-tinta);         /* Texto oscuro */
  cursor: pointer;                /* Mano */
}
.lm-ritmo-item:hover,
.lm-ritmo-item[aria-current="true"] {
  background: var(--lm-hueso);    /* Fondo hueso al pasar o si es el elegido */
}
.lm-ritmo-item__num {
  font-weight: 800;               /* Negrita */
  font-stretch: var(--lm-estrecha); /* Condensado */
  font-size: 1.5rem;              /* Grande */
  color: var(--lm-bronce);        /* Bronce, como los marcadores del GP */
  text-align: center;             /* Centrado */
  font-variant-numeric: tabular-nums; /* Números fijos */
}
.lm-ritmo-item__txt {
  display: grid;                  /* Nombre y clave */
  gap: 2px;                       /* Separación */
}
.lm-ritmo-item__txt span {
  color: var(--lm-tinta-2);       /* Clave en gris */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-ritmo-item__compas {
  font-weight: 700;               /* Negrita */
  color: var(--lm-tinta-2);       /* Gris */
  font-variant-numeric: tabular-nums; /* Números fijos */
  white-space: nowrap;            /* Sin partir */
}

/* ================== 6. BANDA DE DESCARGA ================== */
.lm-descarga {
  background: var(--lm-hueso);    /* Fondo hueso */
  padding: clamp(44px, 6vw, 72px) 0; /* Aire */
}
.lm-descarga__rejilla {
  display: grid;                  /* Texto | botón */
  grid-template-columns: minmax(0, 1fr) auto; /* Botón a su tamaño */
  gap: 20px 40px;                 /* Separación */
  align-items: end;               /* Alineados abajo */
}
.lm-descarga h2 {
  font-size: var(--lm-t-xl);      /* Título de sección */
  font-weight: 800;               /* Negrita */
  font-stretch: var(--lm-estrecha); /* Condensado */
  line-height: 1.05;              /* Apretado */
  margin: 0 0 10px;               /* Separación */
}
.lm-descarga p {
  margin: 0;                      /* Sin márgenes */
  color: var(--lm-tinta-2);       /* Gris oscuro */
  max-width: 56ch;                /* Línea corta */
}
.lm-descarga .lm-relacionadas {
  margin-top: 28px;               /* Separación */
  padding-top: 20px;              /* Respiro */
  border-top: 1px solid rgba(122, 92, 46, .3); /* Filete bronce */
  display: flex;                  /* En fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 10px 28px;                 /* Separación */
}
@media (max-width: 760px) {
  .lm-descarga__rejilla {
    grid-template-columns: 1fr;   /* Uno debajo de otro */
    align-items: start;           /* Arriba */
  }
}

/* ================== 7. MODAL DE DESCARGA CON LOS COLORES NUEVOS ================== */
.lm-leccion-pagina .download-modal__content {
  border-radius: var(--lm-radio-m); /* Esquinas del panel */
  font-family: var(--lm-fuente);  /* Archivo */
}
.lm-leccion-pagina .download-modal__icon {
  background: var(--lm-grafito);  /* Icono sobre grafito */
  color: var(--lm-oro);           /* Dorado */
}
.lm-leccion-pagina .download-modal__submit {
  background: var(--lm-oro);      /* Botón dorado en vez de morado */
  color: var(--lm-grafito);       /* Texto oscuro */
}
.lm-leccion-pagina .download-modal__submit:hover {
  background: var(--lm-oro-claro); /* Dorado claro al pasar */
}

/* ================== v2 · CONTACTO Y ZONA PRIVADA ================== */
/* Enlaces dentro de los bloques oscuros (antes no tenían color propio) */
.lm-texto a {
  color: var(--lm-bronce);        /* v2: enlaces del texto en bronce de la marca (no el azul del navegador) */
}
.lm-bloque--oscuro .lm-texto a {
  color: var(--lm-oro-claro);     /* Dorado claro sobre grafito */
}
.lm-bloque--oscuro .lm-entradilla {
  color: var(--lm-niquel);        /* Entradilla gris claro sobre oscuro */
}
.lm-bloque--hueso {
  background: var(--lm-hueso);    /* Fondo hueso (bloque de la academia) */
}
.lm-leccion__cabecera .lm-datos dd a {
  color: var(--lm-hueso);         /* Email y teléfono claros en la cabecera */
  text-decoration: none;          /* Sin subrayado */
}
.lm-leccion__cabecera .lm-datos dd a:hover {
  text-decoration: underline;     /* Subraya al pasar */
}
/* Contacto: formulario | datos */
.lm-contacto {
  display: grid;                  /* Dos columnas */
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); /* El formulario más ancho */
  gap: 40px 56px;                 /* Separación */
  align-items: start;             /* Arriba */
}
.lm-contacto .lm-alerta {
  margin-bottom: 18px;            /* Separación con el formulario */
}
.lm-contacto__datos {
  display: grid;                  /* Fichas una debajo de otra */
  gap: 16px;                      /* Separación */
}
.lm-ficha-contacto {
  padding: 20px 22px;             /* Relleno */
  border: 1px solid var(--lm-linea); /* Borde suave */
  border-radius: var(--lm-radio-m); /* Esquinas */
  background: var(--lm-blanco);   /* Blanco */
}
.lm-ficha-contacto h3 {
  margin: 0 0 8px;                /* Separación */
  font-size: var(--lm-t-m);       /* 17 px */
}
.lm-ficha-contacto p {
  margin: 0;                      /* Sin márgenes */
  line-height: 1.6;               /* Lectura */
}
.lm-ficha-contacto a {
  color: var(--lm-bronce);        /* Enlace bronce */
  font-weight: 700;               /* Negrita */
}
.lm-ficha-contacto__nota {
  margin-top: 8px !important;     /* Separación */
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-tinta-2);       /* Gris */
}
.lm-ficha-contacto__redes {
  display: flex;                  /* Enlaces en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 8px 16px;                  /* Separación */
}
@media (max-width: 900px) {
  .lm-contacto {
    grid-template-columns: 1fr;   /* Una columna en móvil */
  }
}
/* Preguntas frecuentes desplegables */
.lm-pregunta {
  border-bottom: 1px solid var(--lm-linea); /* Filete entre preguntas */
  max-width: 46rem;               /* Línea de lectura */
}
.lm-pregunta summary {
  cursor: pointer;                /* Mano */
  padding: 16px 32px 16px 0;      /* Relleno (hueco a la derecha para el +) */
  font-weight: 700;               /* Negrita */
  list-style: none;               /* Sin el triángulo del navegador */
  position: relative;             /* Para el + */
}
.lm-pregunta summary::-webkit-details-marker {
  display: none;                  /* Sin triángulo en Safari */
}
.lm-pregunta summary::after {
  content: "+";                   /* Signo de abrir */
  position: absolute;             /* A la derecha */
  right: 4px;                     /* Posición */
  top: 12px;                      /* Posición */
  font-size: 1.4rem;              /* Grande */
  color: var(--lm-bronce);        /* Bronce */
}
.lm-pregunta[open] summary::after {
  content: "–";                   /* Signo de cerrar */
}
.lm-pregunta p {
  margin: 0 0 18px;               /* Separación */
  color: var(--lm-tinta-2);       /* Gris oscuro */
}
/* Zona privada */
.lm-aviso-zona {
  margin-top: 24px;               /* Separación con los botones de la cabecera */
  max-width: 46rem;               /* Mismo ancho que la entradilla */
}
.lm-dentro {
  list-style: none;               /* Sin viñetas */
  margin: 24px 0 0;               /* Separación con el título */
  padding: 0;                     /* Sin sangría */
  display: grid;                  /* Fichas */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* Tantas columnas como quepan */
  gap: 16px;                      /* Separación */
}
.lm-dentro__item {
  padding: 22px;                  /* Relleno */
  border: 1px solid var(--lm-linea); /* Borde suave */
  border-radius: var(--lm-radio-m); /* Esquinas */
  background: var(--lm-blanco);   /* Blanco */
}
.lm-dentro__item > i {
  font-size: 1.4rem;              /* Icono */
  color: var(--lm-bronce);        /* Bronce */
}
.lm-dentro__item h3 {
  margin: 12px 0 6px;             /* Separación */
  line-height: 1.15;              /* Títulos de dos líneas sin tanto hueco */
  font-size: var(--lm-t-l);       /* 21 px */
  font-stretch: var(--lm-estrecha); /* Condensado */
}
.lm-dentro__item p {
  margin: 0;                      /* Sin márgenes */
  color: var(--lm-tinta-2);       /* Gris oscuro */
  line-height: 1.5;               /* Lectura */
}
.lm-dentro__item--academia {
  border-color: rgba(212, 175, 55, .7); /* Borde dorado: la academia destaca */
  background: #FFFBEE;            /* Fondo crema */
}
.lm-dentro__enlaces {
  margin-top: 12px !important;    /* Separación */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-dentro__enlaces a {
  color: var(--lm-bronce);        /* Enlace bronce */
  font-weight: 700;               /* Negrita */
}
.lm-entradilla--corta {
  max-width: 46rem;               /* Línea de lectura */
}
.lm-academia {
  display: grid;                  /* Texto | botón o estado */
  grid-template-columns: minmax(0, 1fr) auto; /* El botón a su tamaño */
  gap: 20px 48px;                 /* Separación */
  align-items: end;               /* Abajo */
}
.lm-academia__estado {
  margin: 0;                      /* Sin márgenes */
  font-weight: 800;               /* Negrita */
  color: #1D7A49;                 /* Verde oscuro */
  font-size: var(--lm-t-l);       /* 21 px */
}
@media (max-width: 760px) {
  .lm-academia {
    grid-template-columns: 1fr;   /* Una columna */
    align-items: start;           /* Arriba */
  }
}
.lm-salir {
  margin-top: 18px;               /* Separación con los botones */
}
.lm-enlace-boton {
  background: none;               /* Botón sin aspecto de botón */
  border: 0;                      /* Sin borde */
  padding: 0;                     /* Sin relleno */
  color: var(--lm-niquel);        /* Gris */
  font: 400 var(--lm-t-s) var(--lm-fuente); /* 15 px */
  text-decoration: underline;     /* Parece un enlace */
  text-underline-offset: 3px;     /* Separado */
  cursor: pointer;                /* Mano */
}
.lm-enlace-boton:hover {
  color: var(--lm-hueso);         /* Más claro al pasar */
}

/* ================== GUÍAS CON CANDADO (v2): el resto de la guía a cambio del email ================== */
/* Ancla a la que vuelve quien acaba de confirmar el email (#seguir) */
.lm-seguir-ancla {
  scroll-margin-top: calc(var(--nav-h) + 12px); /* Al llegar, el aviso no queda bajo el menú */
}
.lm-recuadro a {
  color: var(--lm-bronce);        /* Enlaces de los recuadros en bronce (no azul de serie) */
  text-underline-offset: 3px;     /* Subrayado separado */
}
/* Índice: apartados que se desbloquean con el email */
.lm-indice__bloqueado a {
  color: var(--lm-tinta-2);       /* Más apagado que los apartados abiertos */
  font-weight: 500;               /* Sin tanto peso */
}
.lm-indice__bloqueado i {
  font-size: .78em;               /* Candado pequeño */
  color: var(--lm-oro);           /* Dorado */
  margin-right: 2px;              /* Separación con el texto */
}
/* Avance: el principio del primer apartado privado, que se funde con el papel */
.lm-avance {
  position: relative;             /* Para el degradado */
  max-height: 250px;              /* Solo se ve el arranque */
  overflow: hidden;               /* El resto se corta */
  padding-bottom: 0;              /* El degradado llega hasta el panel oscuro */
  user-select: none;              /* No se selecciona (es solo un adelanto) */
}
.lm-avance::after {
  content: "";                    /* Capa del degradado */
  position: absolute;             /* Encima del texto */
  left: 0;                        /* De lado a lado */
  right: 0;                       /* De lado a lado */
  bottom: 0;                      /* Abajo */
  height: 80%;                    /* Casi todo el bloque */
  background: linear-gradient(to bottom, rgba(251, 250, 247, 0), var(--lm-papel) 88%); /* De transparente a papel */
  pointer-events: none;           /* No molesta al ratón */
}
.lm-avance p {
  color: var(--lm-tinta-2);       /* Gris oscuro */
}
/* Panel oscuro con el formulario */
.lm-desbloqueo {
  scroll-margin-top: var(--nav-h); /* Al saltar desde un botón no queda bajo el menú */
}
.lm-bloque--oscuro .lm-texto .lm-desbloqueo__candado {
  display: inline-flex;           /* Icono + texto */
  align-items: center;            /* Centrados */
  gap: 8px;                       /* Separación */
  margin: 0 0 12px;               /* Separación con el título */
  font-size: var(--lm-t-xs);      /* 13 px */
  font-weight: 700;               /* Negrita */
  letter-spacing: .08em;          /* Espaciado de etiqueta */
  text-transform: uppercase;      /* Mayúsculas */
  color: var(--lm-oro);           /* Dorado */
}
.lm-desbloqueo h2 {
  font-size: clamp(2rem, 4.6vw, 3rem); /* Grande: es la llamada principal de la guía */
  font-stretch: var(--lm-estrecha); /* Condensado, como los titulares */
  line-height: 1;                 /* Apretado */
  margin: 0 0 14px;               /* Separación */
}
.lm-lista-check--oscura li {
  color: var(--lm-hueso);         /* Texto claro sobre oscuro */
}
.lm-bloque--oscuro .lm-texto .lm-desbloqueo__nota {
  margin-top: 24px;               /* Separación con la lista */
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-niquel);        /* Gris claro */
}
.lm-desbloqueo__aviso {
  margin-bottom: 18px;            /* Separación con el formulario */
}
.lm-seguir-ancla > .container {
  padding-top: 36px;              /* Aire con el apartado anterior (relleno, no margen: así el salto a #seguir cae justo encima del aviso) */
}

/* ================== INICIAR SESIÓN Y CÓDIGO DE 6 CIFRAS (v2) ================== */
/* Página pages/entrar.php: cabecera oscura con la tarjeta del formulario a la vista */
.lm-entrar .lm-registro {
  align-items: center;            /* Texto y tarjeta centrados en vertical */
}
.lm-entrar .lm-leccion__titulo {
  font-size: clamp(2.4rem, 6vw, 4rem); /* Algo más pequeño que en las guías */
}
.lm-entrar .lm-leccion__intro {
  margin-bottom: 20px;            /* Separación con la lista */
}
.lm-entrar__aviso {
  margin-bottom: 18px;            /* Separación con el formulario */
}
.lm-entrar__texto {
  margin: 0 0 16px;               /* Separación */
  line-height: 1.5;               /* Lectura */
}
.lm-entrar__botones {
  display: flex;                  /* Botones en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 10px;                      /* Separación */
  margin: 0 0 16px;               /* Separación */
}
.lm-entrar__otros {
  display: flex;                  /* "Otro código" y "otro email" en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 8px 22px;                  /* Separación */
  margin-top: 16px;               /* Separación con el formulario */
}
.lm-entrar__pie {
  margin: 18px 0 0;               /* Separación */
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-tinta-2);       /* Gris oscuro */
}
.lm-entrar__pie a {
  color: var(--lm-bronce);        /* Enlace bronce */
  font-weight: 700;               /* Negrita */
}
/* Botón con aspecto de enlace sobre fondo claro */
.lm-enlace-boton--tinta {
  color: var(--lm-tinta-2);       /* Gris oscuro (el normal es para fondos oscuros) */
}
.lm-enlace-boton--tinta:hover {
  color: var(--lm-tinta);         /* Más oscuro al pasar */
}
/* Casilla del código: cifras grandes y separadas */
.lm-input--codigo {
  font-size: 1.6rem;              /* Grande */
  font-weight: 700;               /* Negrita */
  letter-spacing: .35em;          /* Cifras separadas */
  text-align: center;             /* Centrado */
  font-variant-numeric: tabular-nums; /* Todas las cifras del mismo ancho */
}
.lm-input--codigo::placeholder {
  color: #CFC6B6;                 /* Ejemplo muy suave */
  font-weight: 400;               /* Sin negrita */
}
/* Casilla del código que aparece después del alta (js/lm-zona.js) */
.lm-codigo-form {
  margin-top: 16px;               /* Separación con el mensaje */
  padding-top: 16px;              /* Aire */
  border-top: 1px solid var(--lm-linea); /* Filete */
}
.lm-codigo-form label {
  font-weight: 700;               /* Negrita, como las etiquetas de campo */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-codigo-form__fila {
  display: flex;                  /* Casilla + botón en fila */
  gap: 10px;                      /* Separación */
}
.lm-codigo-form__fila .lm-input {
  flex: 1 1 auto;                 /* La casilla ocupa el resto */
  min-width: 0;                   /* Puede encoger en móvil */
}
.lm-codigo-form__error {
  margin: 0;                      /* Sin márgenes */
  color: #B3262D;                 /* Rojo oscuro legible */
  font-weight: 600;               /* Seminegrita */
  font-size: var(--lm-t-s);       /* 15 px */
}
/* Zona privada: bloque "Tu cuenta" */
#cuenta .lm-academia {
  align-items: start;             /* El formulario arriba, junto al título */
}
.lm-cuenta {
  width: min(100%, 380px);        /* Formulario estrecho */
  display: grid;                  /* Aviso, formulario, quitar */
  gap: 14px;                      /* Separación */
}
.lm-cuenta .lm-form > .lm-btn {
  justify-self: start;            /* Botón a su tamaño */
}
.lm-cuenta__nota {
  margin: 12px 0 0;               /* Separación */
  color: var(--lm-tinta-2);       /* Gris oscuro */
  max-width: 40rem;               /* Línea de lectura */
}
.lm-entrar .lm-texto .lm-leccion__intro,
.lm-entrar .lm-texto .lm-migas {
  color: var(--lm-niquel);        /* Gris claro sobre la cabecera oscura (el texto de lectura normal es oscuro) */
}
.lm-entrar .lm-texto .lm-migas a {
  color: var(--lm-niquel);        /* Enlaces de las migas igual */
}

/* ================== ESCALA ARMONIZADA (zona privada, v2) ================== */
.lm-armonizada__tocar {
  margin-top: 14px;               /* Segunda fila de controles */
}
.lm-armonizada__nota {
  margin: 14px 0 0;               /* Separación con los controles */
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-niquel);        /* Gris claro sobre oscuro */
  max-width: 70ch;                /* Línea de lectura */
}
/* Cartas de los acordes: 8 en fila (en móvil se deslizan) */
.lm-cartas {
  display: grid;                  /* Rejilla */
  grid-template-columns: repeat(8, minmax(0, 1fr)); /* Los 8 acordes de la escala */
  gap: 8px;                       /* Separación */
  margin: 18px 0;                 /* Separación */
  padding: 0;                     /* Sin sangría */
  list-style: none;               /* Sin números */
}
.lm-carta {
  width: 100%;                    /* Llena su columna */
  height: 100%;                   /* Todas igual de altas */
  display: grid;                  /* Apilado */
  justify-items: center;          /* Centrado */
  align-content: start;           /* Arriba */
  gap: 2px;                       /* Separación */
  padding: 10px 4px 8px;          /* Relleno */
  border-radius: var(--lm-radio-s); /* Esquinas */
  border: 1.5px solid var(--lm-grafito-3); /* Borde apagado */
  border-top: 3px solid var(--lm-grafito-3); /* Franja superior (dorada en los mayores) */
  background: var(--lm-grafito-2); /* Fondo de panel */
  color: var(--lm-hueso);         /* Texto claro */
  font: inherit;                  /* Misma letra */
  cursor: pointer;                /* Mano */
  transition: border-color .15s ease, background-color .15s ease; /* Suave */
}
.lm-carta:hover {
  border-color: var(--lm-niquel); /* Se marca al pasar */
}
.lm-carta--mayor {
  border-top-color: var(--lm-oro); /* I, IV y V destacan, como en la guía */
}
.lm-carta[aria-pressed="true"] {
  border-color: var(--lm-oro);    /* Activa: borde dorado */
  background: rgba(212, 175, 55, .12); /* Y velo dorado */
}
.lm-carta--octava {
  opacity: .8;                    /* La vuelta al I, algo más discreta */
}
.lm-carta__grado {
  font-size: var(--lm-t-xs);      /* 13 px */
  font-weight: 800;               /* Negrita */
  color: var(--lm-oro);           /* Dorado */
  letter-spacing: .04em;          /* Un poco de aire */
}
.lm-carta__cifra {
  font-size: 1.45rem;             /* Grande */
  font-weight: 800;               /* Muy negrita */
  font-stretch: var(--lm-estrecha); /* Condensado */
  line-height: 1;                 /* Sin aire */
}
.lm-carta__tipo,
.lm-carta__pos {
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-niquel);        /* Gris claro */
}
.lm-carta__dibujo {
  display: block;                 /* Bloque */
  width: 100%;                    /* Todo el ancho de la carta */
  max-width: 112px;               /* Sin pasarse en pantallas grandes */
  margin: 4px 0 2px;              /* Separación */
}
.lm-carta__dibujo svg {
  display: block;                 /* Sin hueco inferior */
  width: 100%;                    /* Escala con la carta */
  height: auto;                   /* Mantiene proporción */
}
@media (max-width: 900px) {
  .lm-cartas {
    grid-template-columns: none;  /* Sin rejilla fija… */
    grid-auto-flow: column;       /* …en una fila */
    grid-auto-columns: 104px;     /* De ancho fijo */
    overflow-x: auto;             /* Que se desliza */
    padding-bottom: 6px;          /* Sitio para la barra */
    scrollbar-width: thin;        /* Barra fina */
  }
}
/* Dos paneles oscuros seguidos (explorador + escala armonizada): sin el doble hueco */
.lm-bloque--oscuro + .lm-bloque--seguido {
  padding-top: 8px;               /* Casi pegado al panel anterior */
}
.lm-bloque--oscuro + .lm-bloque--seguido > .container {
  border-top: 1px solid var(--lm-grafito-3); /* Filete fino entre los dos */
  padding-top: clamp(32px, 5vw, 56px); /* Aire bajo el filete */
}
/* Recuadro con un enlace destacado (guía de tríadas → escala armonizada) */
.lm-recuadro--enlace i {
  color: var(--lm-bronce);        /* Icono bronce */
  margin-right: 6px;              /* Separación con el texto */
}
.lm-recuadro--enlace a {
  color: var(--lm-bronce);        /* Enlace bronce */
  font-weight: 700;               /* Negrita */
}

/* ================== LECTOR DE TABLATURAS (v2) ================== */
.lm-lector {
  display: grid;                  /* Bloques apilados */
  grid-template-columns: minmax(0, 1fr); /* Una columna que nunca pasa del ancho de la pantalla (aunque un desplegable traiga textos largos) */
  gap: 14px;                      /* Separación */
  border-radius: var(--lm-radio-m); /* Esquinas (se notan en pantalla completa y al soltar un archivo) */
}
.lm-lector__titulo {
  margin: 0;                      /* Sin márgenes */
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); /* Grande */
  font-weight: 800;               /* Muy negrita */
  font-stretch: var(--lm-estrecha); /* Condensado, como los titulares */
  line-height: 1.05;              /* Apretado */
  color: var(--lm-hueso);         /* Claro sobre oscuro */
}
.lm-lector__info {
  margin: 4px 0 0;                /* Separación con el título */
  color: var(--lm-niquel);        /* Gris claro */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-lector__barra {
  display: flex;                  /* Controles en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  align-items: center;            /* Centrados */
  gap: 10px 12px;                 /* Separación */
}
.lm-lector__play {
  min-width: 150px;               /* No cambia de ancho al pasar de "Reproducir" a "Pausa" */
}
.lm-lector__play[disabled],
.lm-lector [data-stop][disabled] {
  opacity: .5;                    /* Apagados hasta que el sonido está listo */
  cursor: progress;               /* Cargando */
}
.lm-lector__campo {
  display: inline-flex;           /* Etiqueta + desplegable */
  align-items: center;            /* Centrados */
  gap: 8px;                       /* Separación */
  color: var(--lm-niquel);        /* Etiqueta en gris */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-lector__campo .lm-select {
  min-width: 0;                   /* Puede encoger en móvil */
  max-width: 100%;                /* Nunca más ancho que la pantalla */
}
.lm-lector__campo {
  max-width: 100%;                /* La etiqueta con su desplegable tampoco se sale */
}
.lm-lector [hidden] {
  display: none !important;       /* Lo que lm-lector.js oculta (sección sin secciones, mástil en un bajo…) se oculta de verdad aunque su clase diga otra cosa */
}
.lm-lector__campo [data-seccion] {
  width: 17rem;                   /* Las secciones tienen nombres largos: ancho fijo y el texto se corta */
  text-overflow: ellipsis;        /* "3. Pop-Folk (D DU…" */
}
.lm-lector__tiempo {
  margin-left: auto;              /* A la derecha */
  font-variant-numeric: tabular-nums; /* Cifras del mismo ancho: no baila */
  color: var(--lm-niquel);        /* Gris claro */
}
.lm-lector__abrir input {
  display: none;                  /* El botón visible es la etiqueta */
}
.lm-lector__pantalla {
  margin-left: auto;              /* A la derecha */
}
.lm-lector__estado {
  margin: 0;                      /* Sin márgenes */
  padding: 10px 14px;             /* Relleno */
  border-radius: var(--lm-radio-s); /* Esquinas */
  background: rgba(0, 194, 199, .1); /* Velo teal: información */
  color: var(--lm-hueso);         /* Texto claro */
}
.lm-lector__estado--error {
  background: rgba(217, 63, 69, .16); /* Velo rojo: error */
}
.lm-lector__aviso-mastil {
  margin: 0;                      /* Sin márgenes */
  color: var(--lm-niquel);        /* Gris claro */
}
.lm-lector__leyenda {
  margin: -4px 0 0;               /* Pegada al mástil */
  color: var(--lm-niquel);        /* Gris claro */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-punto--ahora {
  background: var(--lm-oro);      /* Dorado: suena ahora */
  color: var(--lm-grafito);       /* Texto oscuro */
  font-size: 10px;                /* Nombre de nota pequeño */
}
.lm-punto--luego {
  background: transparent;        /* Hueco */
  border: 1.5px dashed rgba(239, 231, 218, .7); /* Discontinuo: la siguiente */
  color: var(--lm-hueso);         /* Texto claro */
  font-size: 10px;                /* Nombre de nota pequeño */
}
/* Caja de la tablatura: papel claro, con su propio scroll (alphaTab la desplaza mientras suena) */
.lm-lector__tab {
  position: relative;             /* Referencia para el cursor de alphaTab */
  max-height: min(62vh, 640px);   /* Alto máximo: el mástil sigue a la vista */
  overflow: auto;                 /* Scroll propio */
  background: #FFFFFF;            /* Papel blanco, como la partitura */
  border-radius: var(--lm-radio-m); /* Esquinas */
  padding: 8px 4px;               /* Relleno */
  overscroll-behavior: contain;   /* No arrastra la página */
}
.lm-lector__ayuda {
  margin: 0;                      /* Sin márgenes */
  color: var(--lm-niquel);        /* Gris claro */
  font-size: var(--lm-t-s);       /* 15 px */
}
/* Cursor y selección de alphaTab con los colores de la marca */
.lm-lector .at-cursor-bar {
  background: rgba(212, 175, 55, .18); /* Compás que suena: velo dorado */
}
.lm-lector .at-cursor-beat {
  background: rgba(212, 175, 55, .95); /* Línea del golpe que suena: dorada */
  width: 3px;                     /* Fina */
}
.lm-lector .at-selection div {
  background: rgba(0, 194, 199, .16); /* Trozo elegido para repetir: velo teal */
}
.lm-lector .at-highlight * {
  fill: #7A5C2E;                  /* Notas que suenan en la tablatura: bronce */
  stroke: #7A5C2E;                /* Idem */
}
/* Arrastrar un archivo encima */
.lm-lector.is-soltando {
  outline: 2px dashed var(--lm-oro); /* Zona de soltar marcada */
  outline-offset: 8px;            /* Separada del contenido */
}
/* Pantalla completa (para practicar o grabar) */
.lm-lector:fullscreen {
  background: var(--lm-grafito);  /* Fondo oscuro */
  padding: 24px;                  /* Aire */
  overflow: auto;                 /* Scroll si hace falta */
  align-content: start;           /* Arriba */
}
.lm-lector:fullscreen .lm-lector__tab {
  max-height: 46vh;               /* Más sitio para el mástil */
}
@media (max-width: 640px) {
  .lm-lector__tiempo,
  .lm-lector__pantalla {
    margin-left: 0;               /* En móvil, sin empujar a la derecha */
  }
}
.lm-descarga__botones {
  display: flex;                  /* Descargar + abrir en el lector */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 10px;                      /* Separación */
  justify-content: flex-end;      /* A la derecha */
}
@media (max-width: 760px) {
  .lm-descarga__botones {
    justify-content: flex-start;  /* En móvil, a la izquierda como el texto */
  }
}

/* ===== Página 404 (v2): lista de páginas en dos columnas ===== */
.lm-404__lista {
  display: grid;                  /* Rejilla */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Dos o tres columnas según el ancho */
  gap: 10px 24px;                 /* Separación */
  padding: 0;                     /* Sin sangría */
  list-style: none;               /* Sin viñetas */
}
.lm-404__lista a {
  font-weight: 600;               /* Enlaces visibles */
  color: var(--lm-bronce);        /* Bronce de la marca sobre claro (no el azul del navegador) */
}

/* ===== Páginas legales (v2): /legal/aviso-legal/, /legal/privacidad/, /legal/cookies/ ===== */
.lm-legal__nav {
  display: flex;                  /* Los tres textos en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 8px;                       /* Separación */
  margin-top: 18px;               /* Aire bajo la fecha */
}
.lm-legal__nav .lm-chip {
  display: inline-flex;           /* El enlace se comporta como botón */
  align-items: center;            /* Texto centrado */
  text-decoration: none;          /* Sin subrayado */
}
.lm-legal__nav .lm-chip[aria-current="page"] {
  border-color: var(--lm-oro);    /* El texto que estás leyendo, en dorado */
  background: rgba(212, 175, 55, .12); /* Velo dorado */
}
.lm-legal__datos {
  list-style: none;               /* Sin viñetas */
  padding: 0;                     /* Sin sangría */
}
.lm-legal__datos li {
  margin-bottom: 4px;             /* Separación */
}
.lm-legal__tabla {
  min-width: 0;                   /* Esta tabla es corta: no hace falta el ancho mínimo */
}
.lm-legal h3 {
  margin-top: 22px;               /* Aire antes de cada tratamiento */
}
.lm-alerta--aviso {
  background: #FBF4DE;            /* Dorado muy claro */
  border-color: var(--lm-oro);    /* Franja dorada */
}