/*
 * Hojas A4 apaisadas (297 × 210 mm). Este archivo se usa tal cual en la vista previa y se incluye en el HTML
 * exportado: no debe contener reglas de edición (selección, cursor, hover). Esas viven en app.css.
 * Las medidas de página y separaciones llegan como variables (--hoja-w, --hoja-h, --hoja-margen, --col-gap,
 * --fila-gap, --cab-gap) escritas por el renderizador desde src/layout/spec.js.
 */
*, *::before, *::after { box-sizing: border-box; }

.hoja {
  position: relative;
  box-sizing: border-box;
  width: var(--hoja-w, 297mm);
  height: var(--hoja-h, 210mm);
  padding: var(--hoja-margen, 5mm);
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  break-inside: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Una hoja con algo que no cabe deja ver el desbordamiento en lugar de recortarlo (la exportación está bloqueada). */
.hoja.desborda { overflow: visible; outline: 2px dashed var(--danger); }

.hoja-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink-deep);
}
/* Nombre y tonalidad general en la misma línea cuando caben; si no, la tonalidad pasa a la línea siguiente. */
.hoja-titulos { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.hoja-titulo {
  min-width: 0;
  font: 27px/1.1 var(--f-marker);
  letter-spacing: 1px;
  color: var(--ink-deep);
  overflow-wrap: anywhere;
}
.hoja-tono { min-width: 0; font: 15px/1.2 var(--f-hand); color: var(--ink-soft); overflow-wrap: anywhere; }
.hoja-pagina { flex: none; min-width: 6em; text-align: right; font: 14px/1 var(--f-hand); color: var(--ink-mute); white-space: nowrap; }

/* Las filas las decide el reparto (paginate.js); el navegador no vuelve a ajustarlas. Cada fila lleva en línea sus pistas con un tope
   individual por columna (natural + MAX_ROW_EXPANSION, ver layout/spec.js y render/sheet.js): el sobrante de la hoja queda a la derecha. */
.hoja-cuerpo { margin-top: var(--cab-gap, 10px); }
/* Cada fila es una rejilla de cuatro pistas de altura compartidas por TODOS sus compases: marcas, títulos, franjas de
   tonalidad y zona del compás (número, línea y tarjetas). Un compás sin título o sin marcas deja el hueco que ocupan los
   demás, así que bandas, números y bordes de tarjeta arrancan a la misma altura en toda la fila. Las columnas son una por
   tarjeta (pistas «auto»: ancho natural más un reparto igual del espacio libre); compases, acordes y columnas son
   subrejillas de esas pistas. La altura de la fila es la suma del máximo de cada pista (ver layout/paginate.js). */
.fila { display: grid; justify-content: start; grid-auto-flow: column; grid-auto-columns: auto; grid-template-rows: auto auto auto minmax(min-content, 1fr); column-gap: var(--col-gap, 6px); row-gap: 0; }
.fila + .fila, .fila-caja + .fila-caja { margin-top: var(--fila-gap, 8px); }
.fila-caja { position: relative; }

/* Caja fuera de pantalla donde se miden cabecera y fragmentos con los mismos estilos. */
.hoja-medida { position: absolute; left: -30000px; top: 0; visibility: hidden; pointer-events: none; }
.hoja-medida .fila { width: max-content; }

/* El compás ocupa tantas columnas como tarjetas tiene el fragmento (grid-column en línea) y las cuatro pistas de la fila. */
.compas {
  position: relative;
  grid-row: 1 / span 4;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  column-gap: 4px;
  row-gap: 0;
}
.compas > .marcas { grid-row: 1; grid-column: 1 / -1; }
.compas > .eventos { grid-row: 2 / span 3; grid-column: 1 / -1; }
/* Título exterior: pista de títulos del compás, desde la columna de su tarjeta hasta la siguiente con título o el final del
   fragmento (grid-column en línea, ver titleNodes en render/sheet.js). Ajusta línea al ancho de esas columnas y no las ensancha. */
.compas > .t-titulo { grid-row: 2; align-self: end; contain: inline-size; margin-bottom: 2px; }
.compas > .t-pos-vacio, .compas > .t-pos-repite { grid-row: 4; grid-column: 1 / -1; }
/* Zona del compás de cada columna: hueco del número (en flujo, también en las columnas sin número) y tarjeta.
   La línea del compás es el borde de la primera columna: empieza junto al número y baja hasta el pie de la tarjeta,
   por debajo del título y de la franja de tonalidad, que quedan fuera. */
/* La separación inferior ya la aporta --fila-gap; no añadir otro margen a cada columna. */
.t-pos { position: relative; display: flex; flex-direction: column; }
.t-pos-lead { padding-left: 4px; border-left: 2px solid var(--ink-deep); }
.compas-cont .t-pos-lead { border-left-style: dashed; }
.t-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; width: 0; min-width: 100%; min-height: 1.2em; margin-bottom: 2px; font: 12px/1.2 var(--f-hand); color: var(--ink-mute); }
.compas-num { min-width: 0; overflow-wrap: anywhere; }
.compas-continuacion { font-style: italic; color: var(--ink-soft); }

/* Marcas musicales: bloque propio sobre las tarjetas (no invade los títulos); varias marcas se apilan o saltan de línea. */
.marcas { display: flex; flex-direction: column; gap: 3px; margin: 0 0 8px; padding-left: 6px; color: var(--ink-deep); }
.marcas-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 14px; }
.marcas-izq, .marcas-der { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-width: 0; }
.marcas-der { margin-left: auto; justify-content: flex-end; }
.m-marca { display: inline-flex; align-items: center; gap: 5px; font: 19px/1.1 var(--f-marker); white-space: nowrap; }
.m-fine { font-style: italic; border-right: 3px double var(--ink-deep); padding-right: 6px; }
.m-salto { font-size: 17px; }
.m-veces { font: 22px/1 var(--f-marker); }
.m-cont { font: 14px/1 var(--f-hand); color: var(--ink-mute); }
.glifo { flex: none; display: block; }
.casilla { box-sizing: border-box; min-height: 20px; padding: 1px 8px 0 6px; border-top: 1.8px solid var(--ink-deep); font: 15px/1.2 var(--f-hand); white-space: nowrap; }
.casilla.abre { border-left: 1.8px solid var(--ink-deep); }
.casilla.cont-ant { margin-left: -10px; padding-left: 16px; }
.casilla.cont-sig { margin-right: -14px; padding-right: 14px; border-right: 0; }
.casilla.cont-ant .casilla-txt, .casilla.cont-sig .casilla-txt { color: var(--ink-soft); }
/* Barras de repetición: grueso + fino y dos puntos; el compás reserva su ancho. */
.compas.rep-ini { padding-left: 22px; }
.compas.rep-fin { padding-right: 24px; }
.compas.rep-ini .t-pos-lead { border-left: 0; }
.compas.rep-ini .marcas { padding-left: 4px; }
/* Las barras se colocan en la zona del compás de la columna extrema: nacen a la altura del número, no en título ni franja. */
.barra-rep { position: absolute; top: 0; bottom: 0; width: 14px; pointer-events: none; }
.barra-rep.ini { left: -22px; border-left: 5px solid var(--ink-deep); }
.barra-rep.fin { right: -24px; border-right: 5px solid var(--ink-deep); }
.barra-rep::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1.6px; background: var(--ink-deep); }
.barra-rep.ini::before { left: 8px; }
.barra-rep.fin::before { right: 8px; }
.barra-rep .punto { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-deep); }
.barra-rep.ini .punto { left: 13px; }
.barra-rep.fin .punto { right: 13px; }
.barra-rep .punto.a { top: calc(50% - 9px); }
.barra-rep .punto.b { top: calc(50% + 4px); }
.compas.en-rep { box-shadow: inset 0 3px 0 -1px rgba(27, 42, 120, 0.12); }

.compas-repite { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-width: 140px; min-height: 96px; padding: 10px 24px; color: var(--ink-deep); }
.compas-repite-doble { position: absolute; z-index: 2; top: 50%; right: 0; transform: translate(calc(50% + 4px), -50%); padding: 2px 3px; border-radius: 6px; background: #fff; color: var(--ink-deep); }
.repite-signo-doble { display: block; width: 84px; height: 64px; }
.repite-signo { display: block; flex: none; width: 64px; height: 64px; }
.compas-vacio { padding: 26px 20px; font: 15px/1 var(--f-hand); color: var(--ink-mute); white-space: nowrap; }

/* Los contenedores .eventos, .evento y .tarjeta-col son subrejillas de las pistas de la fila (ver .fila):
   - todos los títulos de la fila están en una pista y todas las franjas en otra, por encima de la zona del compás;
   - la zona del compás (número, línea y tarjetas) empieza a la misma altura en todas las columnas de todos los compases,
     sea cual sea el contenido de cada uno;
   - el ancho de cada columna es su ancho natural más un reparto igual del espacio libre (pistas «auto»). */
.eventos { display: grid; grid-auto-flow: column; grid-template-columns: subgrid; grid-template-rows: subgrid; column-gap: 4px; row-gap: 0; }

/* .evento es solo un contenedor de distribución: reparte sus tarjetas en las columnas y filas del fragmento y no se dibuja
   (sin barra, borde ni trazos de continuación). Cada tarjeta es independiente; no se añade duración. */
.evento { display: grid; grid-row: 1 / span 3; grid-auto-flow: column; grid-template-columns: subgrid; grid-template-rows: subgrid; }

/* La primera fila de la columna es el hueco del título, que dibuja el compás por encima (.compas > .t-titulo). */
.tarjeta-col { display: grid; grid-row: 1 / span 3; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; }
/* La franja no ensancha la tarjeta (contain: inline-size) y ajusta línea. Solo existe si hay contexto de tonalidad. */
.t-titulo-caja { display: inline-block; max-width: 100%; padding: 3px 8px; border: 2px solid var(--ink-deep); border-radius: 6px; background: #fff; font: 17px/1.15 var(--f-marker); color: var(--ink-deep); overflow-wrap: anywhere; }
/* Franja de tonalidad: color de la familia de la tonalidad. La heredada tiene la misma caja y altura, pero no repite el texto. */
.t-tono { grid-row: 2; align-self: stretch; contain: inline-size; box-sizing: border-box; min-height: 20px; margin: 0 -2px 2px; padding: 2px 3px; border: 0; border-bottom: 3px solid var(--tonal-color); border-radius: 0; background: var(--tonal-bg); font: 12px/1.15 var(--f-hand); color: var(--tonal-ink); overflow-wrap: anywhere; }
.evento:first-child .tarjeta-col:first-child .t-tono { margin-left: 0; }
.evento:last-child .tarjeta-col:last-child .t-tono { margin-right: 0; }
.t-pos { grid-row: 3; }

.tarjeta {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  /* Dejar holgura horizontal también con escalas fraccionarias: los bordes de 1.6px se redondean distinto. */
  padding: 3px 5px 4px;
  border: 1.6px solid var(--fam-bd, #c3c9d6);
  border-radius: 10px;
  background: var(--fam-bg, #f1f2f6);
}
.tarjeta.pendiente { border-style: dashed; justify-content: center; min-width: 120px; min-height: 90px; }
/* Nombre a la izquierda y grado del voicing arriba a la derecha; si no caben juntos, el grado baja sin recortarse. */
.t-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 6px; width: 0; min-width: 100%; min-height: 30px; }
.t-nom { flex: 1 1 auto; min-width: 0; font: 17px/1.1 var(--f-marker); color: var(--ink-deep); overflow-wrap: anywhere; }
.t-grado { flex: none; max-width: 100%; margin-left: auto; font: 15px/1.1 var(--f-marker); color: var(--ink-deep); text-align: right; overflow-wrap: anywhere; }
.t-txt { flex: 0 0 100%; min-height: 15px; font: 9px/1.1 var(--f-hand); letter-spacing: .3px; color: var(--ink-soft); overflow-wrap: anywhere; }
.t-pend { font: 14px/1.2 var(--f-hand); color: var(--ink-mute); }
.mastil { display: block; flex: none; overflow: visible; margin-top: auto; align-self: center; }
/* La leyenda no ensancha la tarjeta: toma el ancho del mástil y ajusta el texto. */
.t-leyenda { width: 0; min-width: 100%; margin: 4px 0 0; padding: 0; list-style: none; font: 11px/1.2 var(--f-hand); color: var(--ink-soft); overflow-wrap: anywhere; }
.mastil-aviso { box-sizing: border-box; max-width: 210px; min-height: 86px; padding: 8px; border: 1.5px dashed #b3261e; border-radius: 6px; font: 13px/1.25 var(--f-hand); color: #7a1f1a; background: #fff8f7; overflow-wrap: anywhere; }
.mastil text { font-family: var(--f-hand); }

/* Con la numeración oculta desaparecen las líneas verticales entre compases (el borde conserva su ancho para no mover nada).
   Quedan las líneas de las tarjetas y los signos de repetición, que son marcas musicales. */
.hoja.sin-numeros .t-pos-lead { border-left-color: transparent; }