/* Estilo de los apuntes en HTML. El PDF no pasa por aquí: lo compone
   Typst con las variables de _formato/metadatos.yaml. Mantener los dos
   parecidos es deliberado; idénticos, imposible y tampoco deseable.

   La fuente es la misma en los dos, y se sirve desde aquí. */

/* --- la fuente ----------------------------------------------------
   «Armonia Serif» es Source Serif 4 —la serifa de la portada del
   sitio— recortada y con dos arreglos: un circunflejo propio para los
   grados (1̂, 5̂, ♯7̂), colocado sobre la cifra, y las alteraciones de
   Leland, que es la familia de las partituras de la app. Por qué esta
   fuente, y cómo se hace cada arreglo, en fuentes/regenerar.py.

   Se sirve desde el propio sitio (nunca un CDN: esto va en una subruta
   de GitHub Pages) y los ficheros los copia construir.py a
   build/fuentes/. Confiar en lo que tenga instalado quien lea no vale:
   sin el arreglo, los grados salen con el acento suelto.

   No lleva `unicode-range`: es la fuente del texto entero, no un
   parche. Y no vale como parche: los navegadores —y Typst— eligen
   fuente por CLÚSTER, y cifra + marca combinante son un solo clúster,
   así que el circunflejo no puede venir de una fuente distinta a la de
   su cifra. De ahí que los arreglos vayan dentro de esta y no aparte. */

@font-face {
  font-family: "Armonia Serif";
  src: url("fuentes/armonia-serif.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Armonia Serif";
  src: url("fuentes/armonia-serif-negrita.woff2") format("woff2");
  /* es la seminegrita de Source: sirve el 600 de títulos y <strong>
     igual que el 700 */
  font-weight: 600 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Armonia Serif";
  src: url("fuentes/armonia-serif-cursiva.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

@font-face {
  font-family: "Armonia Serif";
  src: url("fuentes/armonia-serif-negrita-cursiva.woff2") format("woff2");
  font-weight: 600 700; font-style: italic; font-display: swap;
}

:root {
  --serif: "Armonia Serif", "Source Serif 4", Georgia, "Times New Roman", serif;
  --tinta: #1a1a1a;
  --suave: #666;
  --regla: #ddd;
  --fondo-nota: #f6f6f4;
  --ink: #2f4f42;      /* el verde del sitio; ver sitio/index.html */
  --ink-suave: #587a6b;
  /* La columna de lectura. De estas dos medidas salen tanto la hoja
     como el sangrado de la cabecera, para que el texto de las dos
     empiece en la misma vertical. */
  --hoja: 40rem;
  --hoja-pad: 1.5rem;
}

/* En el móvil, algo menos de margen: cada píxel de columna cuenta. */
@media (max-width: 40rem) { :root { --hoja-pad: 1rem; } }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 1.0625rem/1.6 var(--serif);   /* Source, a 16 px, se queda corta */
  color: var(--tinta);
  background: #fff;
}

/* La columna de lectura. Antes era el propio <body>, pero entonces la
   cabecera entintada no podía ir a sangre; ahora el ancho de lectura es
   de la hoja y la banda ocupa el ancho entero. La abre y la cierra
   construir.py con --include-before/after-body. */
.hoja {
  max-width: var(--hoja);
  margin: 3rem auto;
  padding: 0 var(--hoja-pad);
}

/* --- titulares ---------------------------------------------------- */

h1.title { font-size: 1.6rem; margin-bottom: .2rem; margin-top: 0; }
p.subtitle { margin-top: 0; color: var(--suave); font-style: italic; }

/* Los titulares, en el verde del sitio (el de la banda y el de los
   títulos de la portada), y el cuarto nivel en un verde más apagado:
   es el que más se repite, y a plena tinta competiría con el texto.
   Sin raya bajo los apartados: la única raya del documento es la del
   salto (ver abajo). En el PDF, todo en negro, que se imprime. */
h1, h2, h3, h4 { line-height: 1.25; font-weight: 600; color: var(--ink); }
h2 { font-size: 1.25rem; margin-top: 2.4rem; }
h3 { font-size: 1.05rem; margin-top: 1.8rem; }
h4 { font-size: 1rem; margin-top: 1.4rem; color: var(--ink-suave); }

/* --- cuerpo ------------------------------------------------------- */

p { text-align: justify; hyphens: auto; }
ul, ol { padding-left: 1.3rem; }
li { margin: .25rem 0; }
strong { font-weight: 600; }

blockquote {
  margin: 1.5rem 0;
  padding: .8rem 1.1rem;
  background: var(--fondo-nota);
  border-left: 3px solid var(--regla);
  font-size: .94rem;
}
blockquote p { text-align: left; }

/* Cada tabla va dentro de un <div class="tabla"> (lo pone el filtro
   _formato/tablas.lua): si no cabe a lo ancho —en el móvil—, se desplaza
   ella sola, y no la página entera. */
.tabla { margin: 1.5rem 0; overflow-x: auto; }
table { border-collapse: collapse; margin: 0; font-size: .94rem; width: 100%; }
th, td { padding: .35rem .6rem; text-align: left; vertical-align: top; }
thead th { border-bottom: 1.5px solid var(--tinta); }
tbody tr + tr td { border-top: 1px solid var(--regla); }

/* El salto de página del PDF (<!-- salto --> en el .md), que en el HTML
   es esta raya: separa la presentación y el índice del temario. */
hr { border: 0; border-top: 1px solid var(--regla); margin: 2.5rem 0; }

/* --- ejemplos musicales -------------------------------------------
   Los SVG van con <img src>, nunca incrustados: los identificadores de
   glifo se numeran desde cero en cada fichero y al incrustarlos el
   segundo ejemplo dibuja los glifos del primero (ver CLAUDE.md). */

/* El ancho de cada figura es un porcentaje de la columna, calculado
   para que el pentagrama mida lo mismo en todas (construir.py). En el
   móvil, ese porcentaje de una columna estrecha lo deja diminuto: ahí
   manda un mínimo en píxeles (--ancho-movil, también de construir.py),
   y la figura que no cabe se desplaza dentro de sí misma. La imagen va
   en bloque y centrada con márgenes: con text-align, al desbordar, se
   saldría por los dos lados y la parte izquierda quedaría inalcanzable. */
figure { margin: 2rem 0; overflow-x: auto; }
figure img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
@media (max-width: 40rem) {
  figure img { min-width: var(--ancho-movil, 0); }
}
figcaption { font-size: .85rem; color: var(--suave); margin-top: .6rem;
             text-align: center; }
/* Separador (<!-- separador --> en el .md): tres asteriscos, para un
   cierre que no pertenece al último epígrafe. Discreto a propósito: la
   raya es solo del salto. */
.separador { text-align: center; color: var(--suave); margin: 2.5rem 0; }

/* Si la figura se desplaza (móvil), el pie se queda quieto debajo. */
figcaption { position: sticky; left: 0; }
/* Los ejemplos que van en «Ejemplos para clase» (.aula en el .md) lo
   dicen al final del pie: son los que hay que traer impresos. */
figure:has(img.aula) figcaption::after {
  content: " (En los ejemplos para clase)"; color: var(--tinta);
}

/* --- cabecera entintada --------------------------------------------
   La misma banda verde que la portada, el menú de ejercicios y cada
   ejercicio: una unidad es una página del sitio como las demás. Dentro
   van la vuelta al índice y la descarga del PDF. La píldora de volver
   es la misma que el «← Menú» de los ejercicios (ejercicios/comun.css),
   para que el control de volver esté siempre en la misma esquina.

   Solo en el HTML: el PDF ya es el fichero que se descargaría, y no
   tiene índice de apuntes al que volver. */

.masthead {
  display: flex; align-items: center; gap: 1rem;
  background: var(--ink); color: #fff;
  /* alineado con el texto de la hoja: la mitad de lo que sobra a los
     lados de la hoja entera (ancho + sus dos paddings), más el padding.
     Ojo, la hoja no es border-box: su ancho total lleva el padding fuera
     del max-width, y por eso se resta dos veces. */
  padding: 14px max(var(--hoja-pad),
                    calc((100% - var(--hoja) - 2 * var(--hoja-pad)) / 2
                         + var(--hoja-pad)));
}
.masthead a { text-decoration: none; }
.masthead a.back {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
  border-radius: 10px; background: rgba(255,255,255,.14);
  color: #fff; font-size: .95rem; font-weight: 600;
  transition: background .15s ease;
}
.masthead a.back:hover, .masthead a.back:active { background: rgba(255,255,255,.22); }
/* Enlaces de la unidad (Ejercicios, PDF, Ejemplos), a la derecha. Textos
   cortos para que quepan en el móvil; si aun así no caben, bajan a una
   segunda línea bajo «← Apuntes» (flex-wrap), sin menú desplegable. */
.masthead { flex-wrap: wrap; row-gap: .5rem; }
.masthead .acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.masthead a.accion { display: inline-flex; align-items: center; gap: .3rem;
  color: rgba(255,255,255,.75); font-size: .9rem; }
.masthead a.accion:hover { color: #fff; text-decoration: underline; }

@media print { .masthead { display: none; } .hoja { margin-top: 0; } }

/* «Para practicar» al final de un epígrafe: los ejercicios de la app que
   lo citan (los pone construir.py, solo en el sitio). Discreto, en la
   letra de la interfaz, para que no se lea como parte del texto. */
.practicar {
  font-family: "Source Sans 3", system-ui, sans-serif; font-size: .9rem;
  color: var(--suave); margin: 1.2rem 0 1.6rem;
  padding: .45rem .8rem; border-left: 3px solid var(--ink-suave);
  background: var(--fondo-nota);
}
.practicar a { color: var(--ink); font-weight: 600; }
@media print { .practicar { display: none; } }

/* --- pie ----------------------------------------------------------
   Autoría y licencia, el mismo texto que en la portada, el índice de
   apuntes y el menú de la app (lo pone construir.py a partir de
   metadatos.yaml). Alineado con la columna de texto, como la banda. */
.pie {
  max-width: var(--hoja); margin: 0 auto; padding: 0 var(--hoja-pad) 2.5rem;
  color: var(--suave); font-size: .8rem;
}
.pie a { color: inherit; }

/* --- índice ------------------------------------------------------- */

nav#TOC { margin: 3.5rem 0 4.5rem; font-size: .92rem; }
nav#TOC ul { list-style: none; padding-left: 1rem; }
nav#TOC > ul { padding-left: 0; }
nav#TOC a { color: var(--tinta); text-decoration: none; }
nav#TOC a:hover { text-decoration: underline; }

/* --- impresión desde el navegador --------------------------------- */

@media print {
  body { max-width: none; margin: 0; font-size: 11pt; }
  h2 { page-break-after: avoid; }
  figure { page-break-inside: avoid; }
  nav#TOC { display: none; }
}

/* --- cifrado de grados ---------------------------------------------
   V con 6 sobre 5 tachado, apilado como en la partitura. Lo escribe el
   filtro _formato/cifrado.lua a partir de los códigos del texto (V6/5),
   con la tabla de curriculum/cifrado.json; en el PDF, lo mismo lo hace
   #cifra en pdf.typ. La columna sube hasta que su primera cifra queda a
   la altura de un volado (el alineado vertical de un inline-flex es el
   de su primer hijo) y tiene alto fijo de una línea: la de abajo
   desborda sin abrir el interlineado. */
.cifra { white-space: nowrap; }
.cifras {
  display: inline-flex; flex-direction: column; align-items: center;
  height: 1em; margin-left: .03em;
  font-size: .62em; line-height: 1.05;
  vertical-align: .68em;   /* .42em del texto, en las unidades de la cifra */
}