/* Visor de partitura sincronizado.
   Línea limpia con acentos Bauhaus: tres primarios, geometría básica
   (círculo, cuadrado, triángulo) y reglas negras gruesas como estructura. */

:root {
  color-scheme: light;
  --tinta: #141414;
  --tinta-suave: #6b6861;
  --papel: #ffffff;
  --fondo: #f3f2ee;
  --linea: #dcdad4;
  --rojo: #d52b1e;
  --azul: #1f4fa3;
  --amarillo: #f2b200;
  --ocre: #d99a00;
  --gris-pedal: #9c998f;
  --regla: 2px solid var(--tinta);
  --fuente: "Avenir Next", Futura, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--tinta);
  background: var(--fondo);
  font-family: var(--fuente);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }

/* ── Página de demostración ─────────────────────────────── */

.pagina-demostracion {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.cabecera-demostracion {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: var(--regla);
}

.marca { display: flex; align-items: center; gap: .9rem; }
.marca svg { flex: none; width: 44px; height: 14px; }
.cabecera-demostracion h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.cabecera-demostracion p { margin: .15rem 0 0; color: var(--tinta-suave); font-size: .8rem; }

.cargador { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.cargador button, .boton-archivo {
  padding: .2rem 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cargador button:hover, .boton-archivo:hover,
.cargador button[aria-pressed="true"] { border-bottom-color: var(--tinta); }
.boton-archivo { color: var(--tinta-suave); }
.selector-biblioteca { display: inline-flex; align-items: center; gap: .6rem; font-size: .78rem; }
.selector-biblioteca span { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.selector-biblioteca select {
  max-width: min(26rem, 70vw);
  padding: .3rem 1.8rem .3rem .5rem;
  border: 0;
  border-bottom: 2px solid var(--tinta);
  border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpolygon points='0,0 10,0 5,6' fill='%23141414'/%3E%3C/svg%3E") no-repeat right .3rem center;
  color: var(--tinta);
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.selector-biblioteca select:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.cargador { align-items: center; }
.boton-archivo input { display: none; }
.cargador button:focus-visible, .boton-archivo:focus-within { outline: 2px solid var(--azul); outline-offset: 2px; }

.vacio {
  padding: 5rem 1rem;
  color: var(--tinta-suave);
  font-size: .9rem;
  text-align: center;
}

/* ── Visor ──────────────────────────────────────────────── */

.visor-partitura {
  overflow: clip; /* no «hidden»: rompería la barra fija */
  font-family: var(--fuente);
  background: var(--papel);
  border: 1px solid var(--linea);
}

.visor-barra {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto auto;
  align-items: center;
  gap: .4rem 1.25rem;
  padding: .85rem 1.25rem .7rem;
  border-bottom: var(--regla);
  background: var(--papel);
}

/* Reproducir: círculo rojo con triángulo; en pausa, dos barras. */
.visor-reproducir {
  position: relative;
  grid-row: span 2;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rojo);
  cursor: pointer;
  transition: transform 120ms ease;
}
.visor-reproducir:hover { transform: scale(1.06); }
.visor-reproducir:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.visor-reproducir::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: .45rem 0 .45rem .72rem;
  border-color: transparent transparent transparent #fff;
  transform: translate(-50%, -50%);
}
.visor-reproducir.reproduciendo::before {
  left: 50%;
  width: .62rem;
  height: .8rem;
  border: 0;
  border-left: .2rem solid #fff;
  border-right: .2rem solid #fff;
}

.visor-pista { display: grid; gap: .3rem; min-width: 0; }

.visor-progreso {
  width: 100%;
  height: 14px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.visor-progreso::-webkit-slider-runnable-track { height: 2px; background: var(--tinta); }
.visor-progreso::-moz-range-track { height: 2px; background: var(--tinta); }
.visor-progreso::-webkit-slider-thumb {
  width: 12px; height: 12px; margin-top: -5px;
  border: 0; border-radius: 0; background: var(--tinta);
  -webkit-appearance: none;
}
.visor-progreso::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 0; background: var(--tinta); }
.visor-progreso:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.visor-tiempo {
  grid-row: span 2;
  min-width: 7.2rem;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.visor-opciones { grid-row: span 2; display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .76rem; }
.visor-opciones label { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; cursor: pointer; }
.visor-opciones input {
  width: .8rem;
  height: .8rem;
  margin: 0;
  border: 1.5px solid var(--tinta);
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.visor-opciones input:checked { background: var(--tinta); }
.visor-opciones input[data-opcion="desviaciones"]:checked { background: linear-gradient(90deg, var(--azul) 50%, var(--ocre) 50%); }
.visor-opciones input:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.visor-piano select {
  padding: .05rem 1.2rem .05rem .1rem;
  border: 0;
  border-bottom: 1.5px solid var(--tinta);
  border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpolygon points='0,0 8,0 4,5' fill='%23141414'/%3E%3C/svg%3E") no-repeat right .15rem center;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.visor-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .3rem 1rem;
  padding: .6rem 1.25rem;
  border-top: 1px solid var(--linea);
  color: var(--tinta-suave);
  font-size: .68rem;
}
.visor-pie a { color: inherit; }

/* Carril de incidencias: alineado en el tiempo con la barra de progreso. */
.visor-incidencias { position: relative; height: 10px; }
.visor-incidencia {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.visor-incidencia:hover { transform: translate(-50%, -50%) scale(1.5); }
.visor-incidencia.extra { background: var(--rojo); }
.visor-incidencia.omitida { border-radius: 50%; background: var(--amarillo); }
.visor-incidencia.pitch-distinto { background: var(--tinta); transform: translate(-50%, -50%) rotate(45deg) scale(.85); }
.visor-incidencia.derivada { background: var(--azul); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* Cifras */
.visor-resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-bottom: 1px solid var(--linea);
}
.visor-cifra {
  display: grid;
  gap: .1rem;
  padding: .7rem 1.25rem;
  border-right: 1px solid var(--linea);
}
.visor-cifra strong { font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; }
.visor-cifra span, .visor-nota-resumen {
  color: var(--tinta-suave);
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.visor-nota-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin-left: auto; padding: .7rem 1.25rem; }
.visor-nota-resumen i { display: inline-block; width: .6rem; height: .6rem; margin-right: .3rem; vertical-align: -.02rem; }
.visor-cifra small { font-size: .7rem; color: var(--tinta-suave); }
.clave-pedal-1 { background: var(--tinta); }
.clave-pedal-2 { background: var(--gris-pedal); }
.clave-pedal-azul { background: var(--azul); }
.clave-ocre { background: var(--ocre); }
.visor-nota-resumen i.clave-linea { width: .9rem; height: 2px; vertical-align: .2rem; background: var(--tinta); }
.visor-nota-resumen i.clave-linea.gris { background: var(--gris-pedal); }

/* Selector de carril: texto en versalitas, el activo subrayado como los ejemplos. */
.visor-carriles { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem .75rem; }
.visor-carriles span { color: var(--tinta-suave); }
.visor-carriles button {
  padding: .1rem 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--tinta);
  cursor: pointer;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.visor-carriles button:hover, .visor-carriles button[aria-pressed="true"] { border-bottom-color: var(--tinta); }
.visor-carriles button:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.visor-carril-leyenda { display: inline-flex; flex-wrap: wrap; gap: .2rem .8rem; }

/* Leyendas: una línea discreta; se encienden con su capa. */
.visor-leyendas {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.75rem;
  padding: .6rem 1.25rem;
  border-bottom: 1px solid var(--linea);
  font-size: .72rem;
}
.visor-leyenda {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--tinta-suave);
  opacity: .4;
  transition: opacity 120ms linear;
}
.visor-leyenda.activa { color: var(--tinta); opacity: 1; }
.visor-leyenda strong { font-weight: 600; }
.visor-leyenda small { display: none; }
.visor-leyenda i { display: inline-block; width: 4rem; height: .4rem; }
.escala-desviacion { background: linear-gradient(90deg, var(--azul), #e4e2dc 50%, var(--ocre)); }
.escala-velocity { background: linear-gradient(90deg, hsl(40 4% 82%), hsl(40 4% 8%)); }
.simbolo-seguimiento {
  width: 0; height: 0;
  border-style: solid;
  border-width: .5rem .3rem 0;
  border-color: var(--rojo) transparent transparent;
}

.visor-estado {
  margin-left: auto;
  color: var(--tinta-suave);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

/* Páginas */
.visor-paginas { display: grid; gap: 1.25rem; padding: 1.5rem; background: var(--fondo); }
.visor-pagina { position: relative; width: 100%; max-width: 980px; margin: 0 auto; background: #fff; outline: 1px solid var(--linea); }
.visor-pagina svg { display: block; width: 100%; height: auto; color: var(--tinta); }

.visor-pagina [data-score-note-id] { cursor: pointer; transition: color 80ms linear, opacity 80ms linear; }
.visor-pagina [data-score-note-id]:hover { color: var(--rojo); }
.visor-pagina [data-score-note-id].nota-activa { color: var(--rojo) !important; opacity: 1 !important; filter: drop-shadow(0 0 .9px var(--rojo)); }
.visor-pagina [data-score-note-id].nota-omitida { color: var(--gris-pedal); text-decoration: line-through; }
.visor-pagina [data-score-note-id].nota-ambigua { text-decoration: underline dotted; }
.visor-pagina [data-score-ornament-id] { cursor: pointer; transition: color 80ms linear; }
.visor-pagina [data-score-ornament-id]:hover,
.visor-pagina [data-score-ornament-id].adorno-activo { color: var(--azul) !important; }

/* Carriles de expresión bajo cada sistema (unidades del SVG: 1 = un espacio). */
.carril-base { stroke: var(--linea); stroke-width: .08; }
.curva-melodia { fill: none; stroke: var(--tinta); stroke-width: .16; stroke-linejoin: round; }
.curva-acompanamiento { fill: none; stroke: var(--gris-pedal); stroke-width: .12; stroke-linejoin: round; }
.punto-melodia { fill: var(--tinta); }
.barra-antes { fill: var(--azul); }
.barra-despues, .barra-hueco { fill: var(--ocre); }
.barra-solape { fill: var(--tinta); }

.cinta-pedal .vuelta-1, .cinta-pedal .sin-vuelta { fill: var(--tinta); }
.cinta-pedal .vuelta-2 { fill: var(--gris-pedal); }

/* Tooltip */
.visor-tooltip {
  position: fixed;
  z-index: 50;
  display: none;
  max-width: 26rem;
  padding: .6rem .75rem;
  border-top: 3px solid var(--rojo);
  color: #f4f3ef;
  background: var(--tinta);
  pointer-events: none;
  font-size: .74rem;
  line-height: 1.5;
}
.visor-tooltip strong { font-weight: 600; }
.visor-tooltip table { margin-top: .3rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.visor-tooltip td { padding-right: .8rem; white-space: nowrap; }
.visor-tooltip td:first-child { color: var(--amarillo); }

.error-carga { padding: 1rem 1.25rem; border-left: 4px solid var(--rojo); background: #fff; font-size: .85rem; }

@media (max-width: 820px) {
  .pagina-demostracion { padding: 1rem 1rem 3rem; }
  .visor-barra { grid-template-columns: auto 1fr auto; padding: .75rem 1rem .6rem; }
  .visor-opciones { grid-column: 1 / -1; grid-row: auto; }
  .visor-cifra { padding: .55rem .9rem; }
  .visor-nota-resumen { margin-left: 0; }
  .visor-leyendas { padding: .6rem 1rem; }
  .visor-paginas { padding: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .visor-reproducir, .visor-leyenda, .visor-pagina [data-score-note-id] { transition: none; }
}

/* ── Vista por sistemas y variante compacta (para incrustar) ─────────── */

.modo-sistemas .visor-paginas {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--papel);
}
.modo-sistemas .visor-pagina {
  flex: none;
  max-width: none;
  overflow: hidden;
  outline: none;
}
.modo-sistemas .visor-pagina[hidden] { display: none; }
.modo-sistemas .visor-pagina svg { transition: transform 320ms ease; }
.modo-sistemas [data-opcion="seguimiento"] { display: none; }
.modo-sistemas label:has([data-opcion="seguimiento"]) { display: none; }
.modo-sistemas .visor-leyenda[data-leyenda="seguimiento"] { display: none; }

.visor-nav { display: inline-flex; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; }
.visor-nav button {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1.5px solid var(--tinta);
  background: #fff;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
}
.visor-nav button:disabled { border-color: var(--linea); color: var(--linea); cursor: default; }
.visor-nav-pos { min-width: 2.6rem; text-align: center; color: var(--tinta-suave); }

.compacto .visor-resumen,
.compacto .visor-leyendas { display: none; }
.compacto .visor-barra { padding: .55rem .9rem .45rem; }
.compacto .visor-pie { padding: .4rem .9rem; }
.visor-titulo { color: var(--tinta); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .modo-sistemas .visor-pagina svg { transition: none; }
}

/* Conmutador interpretación / partitura sin interpretar. */
.visor-fuente { display: inline-flex; border: 1.5px solid var(--tinta); }
.visor-fuente button {
  padding: .15rem .5rem;
  border: 0;
  background: #fff;
  color: var(--tinta);
  cursor: pointer;
  font-size: .72rem;
}
.visor-fuente button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.visor-fuente button:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
/* En la partitura sin interpretar, las marcas de la interpretación no aplican. */
.fuente-partitura .visor-incidencias { visibility: hidden; }
.fuente-partitura .visor-reproducir { background: var(--azul); }

.visor-escala {
  padding: .05rem 1.1rem .05rem .1rem;
  border: 0;
  border-bottom: 1.5px solid var(--tinta);
  border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpolygon points='0,0 8,0 4,5' fill='%23141414'/%3E%3C/svg%3E") no-repeat right .1rem center;
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.visor-fragmento { color: var(--tinta); font-variant-numeric: tabular-nums; }
.visor-fragmento:empty { display: none; }
/* Sin interpretación no hay incidencias que marcar. */
.fuente-partitura .visor-incidencias:empty { display: none; }

/* Leyenda completa, desplegable al pie. */
.visor-ayuda { border-top: 1px solid var(--linea); font-size: .74rem; }
.visor-ayuda summary {
  padding: .45rem 1.25rem;
  color: var(--tinta-suave);
  cursor: pointer;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .64rem;
  list-style: none;
}
.visor-ayuda summary::-webkit-details-marker { display: none; }
.visor-ayuda summary::before { content: "+ "; }
.visor-ayuda[open] summary::before { content: "− "; }
.visor-ayuda summary:hover { color: var(--tinta); }
.visor-ayuda-cuerpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .5rem 1.5rem;
  padding: .2rem 1.25rem .9rem;
}
.visor-ayuda h4 {
  margin: .3rem 0 .35rem;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.visor-ayuda p { margin: 0 0 .35rem; color: var(--tinta-suave); }
.visor-ayuda ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.visor-ayuda li { display: grid; grid-template-columns: 2.4rem 1fr; align-items: start; gap: .5rem; line-height: 1.35; }
.ayuda-simbolo { display: inline-flex; align-items: center; gap: .2rem; min-height: 1rem; }
/* Muestras de la leyenda: mismas formas que los marcadores de la barra. */
.ayuda-marca { display: inline-block; width: 8px; height: 8px; }
.ayuda-marca.extra { background: var(--rojo); }
.ayuda-marca.omitida { border-radius: 50%; background: var(--amarillo); }
.ayuda-marca.derivada { background: var(--azul); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ayuda-marca.pitch-distinto { background: var(--tinta); transform: rotate(45deg) scale(.85); }
.ayuda-color { display: inline-block; width: .7rem; height: .7rem; }
.ayuda-escala { display: inline-block; width: 2.2rem; height: .4rem; }