/* ================================================================
   LM-ESCALAS.CSS · Estilos de las guías «Pentatónicas, escalas y tríadas»
   y «Enlaces armónicos» (v1)
   Solo lo cargan esas dos páginas. Va después de lm-lecciones.css y usa
   los colores y medidas de luena-v2.css (variables --lm-*).
   ================================================================ */

/* ================== 1. NOTAS NUEVAS EN EL MÁSTIL ================== */
/* P = las 2 notas que añade la pentatónica; E = las 2 que añade la escala */
.lm-nota--P circle {
  fill: var(--lm-oro);            /* Dorado: las notas de la pentatónica */
}
.lm-nota--P text {
  fill: var(--lm-grafito);        /* Texto oscuro sobre el dorado (contraste) */
}
.lm-nota--E circle {
  fill: var(--lm-grafito);        /* Oscuro: las dos notas «de paso» de la escala */
  stroke: var(--lm-teal);         /* Con aro teal para que se vean sobre la madera */
  stroke-width: 2.5;              /* Aro marcado */
}
.lm-nota--E text {
  fill: var(--lm-hueso);          /* Texto claro */
}
/* Notas del resto del mástil (fuera de la posición elegida): en segundo plano */
.lm-nota.is-fantasma {
  opacity: .22;                   /* Muy apagadas */
  cursor: default;                /* No invitan a pulsar */
}
.lm-nota.is-fantasma text {
  display: none;                  /* Sin texto: solo el dibujo de fondo */
}
.lm-nota.is-fantasma:hover circle {
  transform: none;                /* No crecen al pasar */
}
/* Recuadro de la posición (discontinuo dorado) */
.lm-escala-pos {
  pointer-events: none;           /* No tapa los clics de las notas */
}
.lm-escala-pos rect {
  fill: rgba(212, 175, 55, .06);  /* Velo dorado muy suave */
  stroke: var(--lm-oro);          /* Borde dorado */
  stroke-width: 1.5;              /* Fino */
  stroke-dasharray: 6 5;          /* Discontinuo: es una zona, no un acorde */
}
.lm-escala-pos > text {
  fill: var(--lm-oro);            /* Etiqueta «Posición 1 · forma de Mi» en dorado */
  font: 700 13px var(--lm-fuente); /* 13 px */
}
/* Recuadro de la tríada dentro de un grupo de cuerdas */
.lm-escala-grupo {
  pointer-events: none;           /* No tapa los clics */
}
.lm-escala-grupo rect {
  fill: rgba(0, 194, 199, .14);   /* Velo teal */
  stroke: var(--lm-teal);         /* Borde teal */
  stroke-width: 2;                /* Marcado */
}

/* ================== 2. LEYENDA ================== */
/* Los puntos P y E de la leyenda están en luena-v2.css (también los usa la portada) */
.lm-leyenda li[hidden] {
  display: none;                  /* La leyenda solo muestra las capas visibles */
}
.lm-mastil-pie .lm-leyenda {
  flex-wrap: wrap;                /* En móvil bajan de línea */
}

/* ================== 3. BOTONES DEL EXPLORADOR ================== */
.lm-escalas__botones {
  display: flex;                  /* En fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  align-items: center;            /* Centrados */
  gap: 10px;                      /* Separación */
  margin: 0 0 18px;               /* Separación con lo de abajo */
}
.lm-escalas__botones .lm-btn--sonido {
  margin-left: 0;                 /* Aquí van todos juntos, no pegados a la derecha */
}
.lm-btn--sonido[aria-pressed="true"] {
  background: rgba(0, 194, 199, .2); /* El bucle de fondo encendido se nota */
  border-color: var(--lm-teal);   /* Teal */
}
.lm-escalas__aviso {
  margin: -6px 0 14px;            /* Pegado a los botones */
  padding: 10px 14px;             /* Relleno */
  border-radius: var(--lm-radio-s); /* Esquinas */
  background: rgba(212, 175, 55, .1); /* Velo dorado: aviso */
  color: var(--lm-hueso);         /* Texto claro */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-escalas__aviso[hidden] {
  display: none;                  /* Oculto de verdad */
}

/* ================== 4. ENLACES ARMÓNICOS ================== */
/* Descripción de la progresión */
.lm-enl__desc {
  margin: -4px 0 16px;            /* Pegada a la ficha */
  color: var(--lm-niquel);        /* Gris claro */
  max-width: 70ch;                /* Línea corta */
}
/* Fila de diagramas con flechas entre ellos */
.lm-enl__tira {
  display: flex;                  /* En fila */
  align-items: center;            /* Flechas centradas en vertical */
  gap: 6px;                       /* Separación */
  list-style: none;               /* Sin números */
  margin: 0 0 18px;               /* Separación */
  padding: 4px 2px 10px;          /* Hueco para el brillo y la barra */
  overflow-x: auto;               /* El blues (12 acordes) se desliza */
  overscroll-behavior-x: contain; /* No arrastra la página */
  -webkit-overflow-scrolling: touch; /* Inercia en iOS */
  scrollbar-width: thin;          /* Barra fina */
}
.lm-enl__tira > li {
  flex: 0 0 auto;                 /* No se aplastan */
}
.lm-enl__acorde {
  padding: 8px 6px 10px;          /* Relleno */
  border-radius: var(--lm-radio-m); /* Esquinas */
  border: 1.5px solid var(--lm-grafito-3); /* Borde apagado */
  background: var(--lm-grafito-2); /* 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-enl__acorde:hover {
  border-color: var(--lm-niquel); /* Se marca al pasar */
}
.lm-enl__acorde[aria-pressed="true"] {
  border-color: var(--lm-oro);    /* El acorde que se ve en el mástil */
  background: rgba(212, 175, 55, .1); /* Velo dorado */
}
.lm-enl__acorde svg {
  width: 112px;                   /* Algo más pequeño que en la guía de tríadas */
  height: auto;                   /* Proporción */
}
.lm-enl__grado {
  font: 700 var(--lm-t-xs) var(--lm-fuente); /* 13 px negrita */
  color: var(--lm-oro);           /* Grado en dorado */
  letter-spacing: .04em;          /* Un poco de aire */
}
.lm-enl__cifra {
  font-size: 1.25rem;             /* Cifrado grande */
  font-weight: 800;               /* Muy negrita */
  font-stretch: var(--lm-estrecha); /* Condensado */
  line-height: 1;                 /* Sin aire */
}
/* Flecha con los trastes que se mueve la mano */
.lm-enl__flecha {
  display: grid;                  /* Flecha, número y textos apilados */
  justify-items: center;          /* Centrados */
  min-width: 52px;                /* Ancho mínimo */
  color: var(--lm-niquel);        /* Gris */
  font-size: var(--lm-t-xs);      /* 13 px */
  line-height: 1.2;               /* Apretado */
}
.lm-enl__flecha::before {
  content: "→";                   /* Flecha */
  font-size: 1.4rem;              /* Grande */
  color: var(--lm-oro);           /* Dorada */
  line-height: 1;                 /* Sin aire */
}
.lm-enl__flecha span {
  font-size: var(--lm-t-l);       /* Número de trastes grande */
  font-weight: 800;               /* Negrita */
  color: var(--lm-hueso);         /* Claro */
}
.lm-enl__comun {
  color: #5FD39A;                 /* Verde claro: nota que se queda (legible sobre oscuro) */
  font-weight: 700;               /* Negrita */
}
/* Panel «qué hace cada voz» */
.lm-enl__movimiento {
  margin-top: 14px;               /* Separación con el mástil */
  padding: 16px 18px;             /* Relleno */
  border-radius: var(--lm-radio-m); /* Esquinas */
  border: 1px solid var(--lm-grafito-3); /* Borde */
  background: var(--lm-grafito-2); /* Panel */
  color: var(--lm-hueso);         /* Texto claro */
}
.lm-enl__movimiento p {
  margin: 0;                      /* Sin márgenes */
}
.lm-enl__paso {
  margin-bottom: 10px !important; /* Separación con la lista */
}
.lm-enl__voces {
  display: grid;                  /* Una voz por línea */
  gap: 6px;                       /* Separación */
  list-style: none;               /* Sin viñetas */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin relleno */
}
.lm-enl__cuerda {
  display: inline-block;          /* Ancho fijo para alinear */
  min-width: 5.6em;               /* «Cuerda 3» */
  color: var(--lm-niquel);        /* Gris */
  font-size: var(--lm-t-xs);      /* 13 px */
  font-weight: 700;               /* Negrita */
  text-transform: uppercase;      /* Mayúsculas pequeñas */
  letter-spacing: .04em;          /* Aire */
}
.lm-enl__total {
  margin-top: 10px !important;    /* Separación */
  color: var(--lm-niquel);        /* Gris */
}
.lm-enl__total strong {
  color: var(--lm-oro);           /* Número en dorado */
}
@media (max-width: 640px) {
  .lm-enl__acorde svg {
    width: 96px;                  /* Diagramas más pequeños en móvil */
  }
  .lm-enl__flecha {
    min-width: 40px;              /* Flechas más estrechas */
  }
}