/* Estilos de la pagina contenedora (el reproductor trae los suyos).
   Los colores salen de `theme.css`; esta hoja no escribe ninguno propio. */

/* Aqui NO van colores: todos viven en `theme.css`, que se carga antes que esta hoja
   en las dos paginas. Lo que queda son las medidas del armazon de /app/, que van en
   variables porque las comparten tres reglas que tienen que cuadrar entre si: la
   cabecera fija, el `top` de la lateral pegajosa y su alto. Si la cabecera cambia de
   alto y esto no, la lateral queda corrida. */
:root {
  --sidebar-w: 212px;
  --head-h: 68px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

/* La cabecera va a sangre y fija: es el borde superior de la aplicación, no un bloque
   más del contenido. Opaca a propósito —el contenido pasa por debajo al hacer scroll— y
   con una línea inferior que la separa sin necesidad de sombra. El baño de color de marca
   la despega del resto de la página, que es casi negro, y le da a la marca una franja propia
   del mismo color con que se enciende la sección abierta en la lateral. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--head-h);
  padding: 0 20px;
  background:
    linear-gradient(180deg, var(--header-tint), var(--header-tint-2)),
    var(--bg);
  border-bottom: 1px solid var(--header-line);
}

/* Lateral y contenido. La lateral arranca en el borde izquierdo de la pantalla, pegada
   a la cabecera, y el contenido ocupa el resto. `minmax(0, 1fr)` en la segunda columna
   y `min-width: 0` en .views no son adornos: el mínimo automático de una columna de
   rejilla es su min-content, y el min-content del selector de canción es el nombre más
   largo del catálogo. Sin eso, en un teléfono la columna se estira hasta ese ancho y
   arrastra al reproductor, dejando barra horizontal. */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--head-h));
}

/* La marca de la cabecera: el nombre a la izquierda y, en la otra punta, la tira de la
   evolucion. El emblema circular (el T-rex) no esta aqui: vive al pie de la barra lateral,
   donde hay sitio para verlo entero. */
/* El nombre y, a su lado, el numero de version. Fila con las lineas base alineadas para
   que el numero se pose sobre la misma linea que las letras del nombre y no flote a media
   altura. */
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

/* El numero de version. Discreto —es una herramienta de diagnostico, no algo que nadie
   venga a buscar— pero legible: si hay que entrecerrar los ojos para leerlo en un telefono,
   no sirve para lo unico que hace, que es responder «¿este aparato tiene lo ultimo?».

   Sin recibir toques: se posa junto al enlace del nombre y no debe robarle un toque. */
.build-tag {
  font-size: 0.7rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: none;
  /* El mismo azul de los acordes, pero por `--accent` y no por `--lyric-chord`: es el mismo
     valor y los dos viven en `theme.css` —los colores de significado fijo, iguales en las
     tres paletas—, solo que `--lyric-chord` significa «el azul de los acordes de la hoja de
     letra» y esto no es un acorde. Si algun dia se retiñen los acordes, este numero no tiene
     por que seguirlos. */
  color: var(--accent);
  pointer-events: none;
}

/* `color: inherit` deja que cada pieza conserve su propio color: el de marca en el nombre
   y el blanco del tagline los ponen sus reglas, no el estilo por defecto de <a>. */
.brand-home {
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  transition: opacity 140ms ease;
}

/* La tira es un SVG de trazo sobre fondo transparente, asi que no lleva recorte ni caja:
   se apoya directo en el fondo de la cabecera. Se fija el alto y el ancho va solo, que es
   como se escala un dibujo apaisado sin deformarlo. `margin-left: auto` la manda al borde
   derecho aunque manana entre otro bloque en la cabecera y el `space-between` deje de
   alcanzar. */
.brand-strip {
  display: block;
  flex: none;
  height: 38px;
  width: auto;
  margin-left: auto;
}

.brand-home:hover {
  opacity: 0.82;
}

.brand-home:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Fila de letras con `space-between`: el nombre se estira hasta el ancho de la caja, que
   en esta columna lo fija el tagline por ser la linea mas larga. Asi las dos lineas de la
   marca terminan a la misma altura, alineadas por los dos costados, sin un `letter-spacing`
   calibrado a ojo para una fuente concreta. Si el nombre llegara a ser el mas ancho de los
   dos, `space-between` no tiene sobrante que repartir y queda con su espaciado natural. */
.brand-name {
  display: flex;
  justify-content: space-between;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--brand);
}

/* El espacio entre las dos palabras. Va por encima del hueco que reparte `space-between`,
   que es lo que mantiene la separacion de palabra por encima de la de letra. */
.brand-space {
  width: 0.26em;
}

/* En blanco y no en el azul de acento: sobre el baño de la cabecera el azul era el único
   color frío de la franja y tiraba de la vista antes que el nombre, que es lo que se tiene
   que leer primero. En blanco la marca queda en dos tonos —el de marca en el nombre y el
   blanco del renglón de abajo— y la jerarquía la marcan el tamaño y el peso, no el color.
   13,4:1 sobre el peor punto del degradado. */
.brand-tag {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text);
}

/* La etiqueta del selector va en tinta plena y no en el gris de lo secundario, que es lo
   que era, y la razon es donde vive: es —con los rotulos «Proximos»/«Realizados»— el UNICO
   texto del sitio que se pinta directamente sobre el suelo, sin una tarjeta debajo, o sea
   con la tormenta pasando por detras. Medido contra el pixel mas claro que alcanza un rayo,
   en `--muted` se quedaba en 3,09:1, por debajo del 4,5:1 de AA; en `--text` da 7,85:1.

   Y no es solo el numero: ese gris es el que el sitio usa para lo que se puede saltar, y
   aqui rotula el unico control de la vista. Con esto el suelo ya no tiene ningun texto en el
   limite, y por eso `backdrop.css` puede dejar el velo igual en todos los anchos —era esta
   etiqueta la que obligaba a cerrarlo en angosto y apagaba la tormenta en el telefono—. */
.picker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text);
}

.picker select {
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  min-width: 240px;
}

.picker select:disabled {
  opacity: 0.5;
}

.boot-error {
  padding: 14px 16px;
  margin-bottom: 20px;
  border: 1px solid var(--danger);
  border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--text);
  font-size: 0.9rem;
}

.boot-error code {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.85em;
}

/* ---- Zona privada: barra lateral y secciones ---------------------------------
   Dos secciones (repertorio y ensayos) que se muestran una a la vez, con la barra
   lateral decidiendo cuál. La sección oculta va con `hidden`, o sea `display: none`:
   así no cuenta para el ancho de la página —a 320 px una tabla escondida no puede
   provocar scroll horizontal— y el reproductor recupera el tamaño de sus waveforms
   al volver, porque su ResizeObserver ve el cambio de 0 al ancho real. */

/* Pegada al borde izquierdo y a la cabecera, con su propio fondo y una línea que la
   separa del contenido: así se lee como una columna de navegación y no como un menú
   suelto flotando junto al texto. Pegajosa y de alto completo porque en los ensayos la
   tabla puede ser más alta que la pantalla y la navegación tiene que seguir a mano. */
.sidebar {
  position: sticky;
  top: var(--head-h);
  align-self: start;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--head-h));
  padding: 22px 10px;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Filas completas y clickeables de punta a punta de la columna, con el icono a la
   izquierda. El indicador de sección activa es la barra de color de `::before`, que en
   reposo está pero transparente: así el texto no se corre un píxel al encenderse. */
.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    color 140ms ease,
    background 140ms ease;
}

.side-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 3px;
  background: transparent;
  transition: background 140ms ease;
}

.side-icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.side-link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

/* La sección abierta queda encendida sin lugar a dudas: texto en blanco, icono e indicador
   en el color de marca y el fondo con su baño tenue. Es la única pista de dónde está uno,
   así que se ve de un vistazo y no como un gris apenas distinto. */
.side-link.on {
  color: #fff;
  background: var(--brand-wash);
}

.side-link.on::before {
  background: var(--brand);
}

.side-link.on .side-icon {
  color: var(--brand);
  opacity: 1;
}

.side-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* El emblema cierra la columna por abajo. `margin-top: auto` es lo que lo baja: en una
   columna flexible se come todo el espacio libre y lo deja pegado al fondo, sin fijar
   posiciones ni contar pixeles. `flex: none` para que en pantallas bajas se recorte por
   el margen y no se aplaste el circulo. Recortado en circulo y con el filo dorado del
   aro, igual que en la portada: el archivo es un cuadrado negro y sin el recorte se
   veria el recuadro contra el fondo de la lateral. Un punto por debajo del blanco total
   para que siga siendo firma y no compita con la seccion encendida. */
.side-emblem {
  flex: none;
  display: block;
  width: 100%;
  max-width: 148px;
  height: auto;
  /* Arriba `auto` (es lo que lo baja), a los lados `auto` (lo centra en la columna) y
     abajo un respiro sobre el borde. En una sola linea el `auto` de arriba se perdia. */
  margin: auto auto 6px;
  border-radius: 50%;
  opacity: 0.9;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent),
    0 14px 34px -12px rgba(0, 0, 0, 0.9);
}

/* Sin tope de ancho: el contenido ocupa todo lo que la lateral le deja. */
.views {
  min-width: 0;
  padding: 26px 24px 72px;
}

.view-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  min-height: 34px;
}

/* Desde 1 200 px el selector se muda a la cabecera del reproductor —el umbral se mide en
   `app.js`, junto a la mudanza— y esta fila se queda sin nada dentro: sin esto, sus 34 px de alto y sus 16 de margen dejan un escalon vacio
   encima de la tarjeta.

   Se pregunta por hijos ELEMENTO y no con `:empty`, que fue el primer intento y no funciono:
   `:empty` exige que no haya ni un nodo, y ahi siguen los saltos de linea y la sangria del
   HTML. `:not(:has(*))` es la pregunta que de verdad importa —«no hay nada dentro que se
   dibuje»— y la hace el CSS solo, sin una clase que el guion tenga que recordar poner y
   quitar. `:has` esta en todos los navegadores desde 2022, antes que `subgrid`, que esta
   hoja ya usa. */
.view-head:not(:has(*)) {
  display: none;
}

/* Fuera de la tarjeta, el selector ocupa TODO el ancho de su fila.

   La condición es estar fuera, y por eso se pregunta por el PADRE y no por un ancho: dentro de la
   tarjeta el selector es hijo de `<stem-player>` —va en su slot— y fuera es hijo de `.view-head`,
   así que `.view-head .picker` describe exactamente el caso «está afuera» sin repetir el umbral de
   la mudanza, que vive en `app.js` y ya se movió una vez.

   Antes iba con `margin-left: auto`, pegado a la derecha, «que es donde estaba cuando vivía en la
   cabecera». Pero afuera es lo único que hay en esa fila: a la izquierda no queda nada con lo que
   alinearse, así que un control de 240 px flotando en el extremo derecho de una fila vacía se lee
   como algo que se quedó descolgado, no como una cabecera. A todo el ancho la fila vuelve a tener
   una forma.

   `flex: 1 1 100%` con `min-width: 0` y no `width: 100%`: es un hijo flex, y sin el `min-width` no
   puede encogerse por debajo del ancho de su contenido —los 240 px del `min-width` del <select>—,
   que es lo que sacaba la página de la pantalla a 320 px. Con `flex: 1` a secas la base queda en 0
   y el <select> se sale por la derecha. */
.view-head .picker {
  flex: 1 1 100%;
  min-width: 0;
}

.view-head .picker select {
  flex: 1;
  min-width: 0;
}

.view-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.view-note code {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.85em;
}

/* ---- Enlaces de texto -------------------------------------------------------
   Un solo estilo para todos los enlaces que van DENTRO de un texto: los temas de la tabla
   de ensayos, los de las tarjetas de la bienvenida y los de las ayudas. Antes cada
   sitio traia el suyo —los ensayos sin subrayado y con la linea al pasar, los otros dos
   con el subrayado del navegador puesto siempre— y eran tres enlaces distintos en la misma
   pagina.

   El azul del sitio y no el del navegador, que sobre este fondo tira a morado y no es de
   ninguna parte del diseño.

   Sin subrayado en reposo: en un parrafo con dos o tres enlaces, el subrayado permanente
   raya el texto entero y lo que se lee es la raya, no la frase. El color ya dice que es un
   enlace, y la linea aparece al pasar por encima, que es cuando hace falta saber donde
   termina exactamente lo que se va a pulsar.

   Y la linea es un `border-bottom` transparente que solo cambia de color, no un
   `text-decoration` que se enciende: asi la caja del enlace mide lo mismo en reposo que al
   pasar y el renglon no se mueve un pixel. Se pone en `currentcolor` para que siga al color
   del enlace sin repetirlo. */
.songs .song-link,
.welcome-card a,
.ayuda a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.songs .song-link:hover,
.welcome-card a:hover,
.ayuda a:hover {
  border-bottom-color: currentcolor;
}

/* ---- Tabla de ensayos -------------------------------------------------------
   Mismo tratamiento de tarjeta que el reproductor (fondo, borde y radio iguales a
   `.wrap` de player.css) para que las dos secciones se vean de la misma familia. */

.ensayo-group + .ensayo-group {
  margin-top: 28px;
}

.group-title {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ensayos {
  width: 100%;
  /* `separate` y no `collapse`, que es lo que estaba. Con los bordes colapsados el
     navegador IGNORA el radio de la tabla: las esquinas salian en pico aunque el
     radio estuviera puesto, y por eso el `thead` de mas abajo llevaba un parche que
     redondeaba la primera y la ultima cabecera a mano. Separados, el radio funciona
     como en cualquier otra caja y `overflow: hidden` recorta lo que pinten las
     celdas contra la esquina. Con `border-spacing: 0` no se abre ni un pixel entre
     celdas, asi que se ve igual que colapsada, y los bordes no se duplican porque
     aqui solo se pintan los de abajo. */
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 0.88rem;
}

/* La fila de encabezados es la cabecera del sitio en pequeño: el mismo baño en dos paradas
   y el mismo color de marca en el texto que «Evolution Band». Las dos parejas de tokens
   —`--header-tint*` y `--card-tint*`— y el porqué de que esta vaya más suave están
   explicados en `theme.css`, donde se calculan. */
.ensayos th {
  padding: 12px 16px;
  background:
    linear-gradient(180deg, var(--card-tint), var(--card-tint-2));
  border-bottom: 1px solid var(--line);
  color: var(--brand);
  /* El mismo tratamiento que el titulo de una tarjeta de la bienvenida: mismo cuerpo,
     caja baja y sin espaciado de letra. Antes iban a 0,66rem en versalitas muy
     espaciadas, que es el gesto de una etiqueta —algo que rotula un dato— y no el de
     un titulo. Como rotulo funcionaba, pero a 10 px eran lo mas pequeño de toda la
     pagina justo donde hay que entrar a leerla. Con el cuerpo de las tarjetas, las
     dos secciones se leen como el mismo sitio. */
  font-size: 1.15rem;
  font-weight: 600;
  text-align: left;
}


.ensayos td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* Sin borde en la última fila: con el radio de la tarjeta, una línea que cruza de
   punta a punta se ve pasar por encima de la esquina redondeada. */
.ensayos tbody tr:last-child td {
  border-bottom: none;
}

.ensayos .col-date {
  width: 22%;
}

.ensayos .col-members {
  width: 30%;
}

.ensayos .col-songs {
  width: 48%;
}

.ensayos ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Con dos líneas por elemento hace falta más aire entre uno y otro, o el instrumento de
   arriba se lee pegado al nombre de abajo. */
.ensayos li + li {
  margin-top: 10px;
}

.ensayos .date-full {
  display: block;
}

/* Los temas van en linea, no en bloque: un enlace en bloque ocupa el ancho de la celda y
   el subrayado del hover cruza hasta el borde, muy lejos de donde termina el titulo. Cada
   tema ya va en su propio <li>, asi que no hace falta el bloque para que queden apilados. */
.songs .song-name,
.songs .song-link {
  display: inline;
}

/* Las tres columnas comparten el mismo patrón: arriba el dato y debajo, en gris y más
   pequeño, lo que hay que saber de él —el día de la semana bajo la fecha, el instrumento
   bajo el integrante, la voz principal y los coros bajo el tema—. La fecha completa en un
   solo renglón («Domingo, 2 de agosto de 2026») no cabe en la columna y partía por donde
   caía; las otras dos siguen el patrón para que la fila se lea pareja. */
.ensayos .weekday,
.people .roles,
.songs .song-lead {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.people .person {
  display: block;
}

/* Rol e icono van pegados como una sola pieza, y por eso el `inline-flex`: si fueran texto
   suelto, el punto que separa dos roles podría quedar en otro renglón que su icono. */
.people .role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Los dibujos son de relleno, no de trazo como los de la lateral: a 15 px una silueta llena
   se reconoce y una de línea se deshace. El color lo pone el JS en cada elemento —es el del
   instrumento en el reproductor—, así que aquí solo se hereda con `currentColor`. */
.role-icon {
  flex: none;
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* Lo que falta —una fecha, un integrante, un tema— se marca en gris, no se deja en
   blanco: una celda vacía se confunde con un error de la tabla. */
.tbd {
  color: var(--muted);
}

/* ---- Ayuda: la bienvenida ---------------------------------------------
   Portada de la seccion: el mismo baño de marca de la cabecera del sitio, sobre el fondo de
   las superficies levantadas. No es un color nuevo, son las mismas variables, y por eso la
   tarjeta y la franja de la marca se leen como la misma familia. Comparte el `--card-tint`
   del `thead` de los ensayos, y por la misma razon: sobre `--panel`, que es mas claro que el
   fondo de la pagina, el tinte de la cabecera dejaria el titulo por debajo de AA. */

/* Sin tope de ancho: la bienvenida ocupa todo lo que la lateral le deja, y las tarjetas se
   reparten ese ancho. Que todas midan lo mismo de alto lo hace la rejilla sola: las celdas
   se estiran a la fila.

   Dos columnas fijas y no el `auto-fit` de los ejemplos de la ayuda, que es lo que habia
   antes: con cuatro tarjetas, el reparto automatico daba tres arriba y una suelta abajo
   —una fila coja y la primera tarjeta estirada al alto de la mas larga—. Contando en
   columnas de a dos, cuatro tarjetas cierran siempre en dos filas parejas.

   `minmax(0, 1fr)` y no `1fr`: el minimo automatico de una celda es su min-content, y con
   `1fr` a secas una palabra larga —«PRO-Backing»— estira la columna y saca la pagina de
   cuadro. */
.welcome {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 26px;
}

/* Dos columnas necesitan sitio: por debajo de esto cada tarjeta se queda en un canuto de
   texto de cuatro palabras por linea, y se apilan. El corte es mas alto que el de la barra
   lateral (720 px) porque aqui hay que descontar la propia lateral, que sigue ocupando su
   columna hasta ese ancho. */
@media (max-width: 900px) {
  .welcome {
    grid-template-columns: minmax(0, 1fr);
  }
}

.welcome-card {
  padding: 20px 22px;
  background:
    linear-gradient(180deg, var(--card-tint), var(--card-tint-2)),
    var(--panel);
  border: 1px solid var(--header-line);
  border-radius: 14px;
  /* El minimo de una celda de rejilla es su min-content: sin esto, un telefono angosto se
     estira hasta la palabra mas larga y la pagina queda con scroll horizontal. */
  min-width: 0;
}

/* En el dorado del emblema, igual que los titulos de las ayudas y por la misma razon:
   es el color con que el sitio encabeza lo que uno esta mirando. Las dos secciones de texto
   —la bienvenida e Ayuda— se leen asi como la misma familia, que es lo que eran
   ya por caja, borde y cuerpo de letra; el color era lo unico que las separaba.

   El morado se queda para lo que nombra al SITIO y no a su contenido: el nombre en la
   cabecera, la seccion abierta en la lateral y los encabezados de la tabla de ensayos.

   Y de paso el dorado suelta el nudo de contraste que el morado tenia justo aqui: sobre la
   lamina translucida el titulo en color de marca daba 4,94:1 —el caso mas justo de esta
   pagina, y el que fijaba la densidad de la lamina—, mientras el dorado ronda los 10,9:1
   que mide sobre la tarjeta del reproductor. Quien manda ahora en esa densidad es el
   `thead` de los ensayos, que sigue en morado; el porque esta en `backdrop.css`. */
.welcome-title {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 1.15rem;
}

/* El emoji de un titulo va un punto mas grande que el texto y con su hueco propio: pegado
   al texto se lee como parte de la palabra.

   Lo llevan las dos secciones de tarjetas del sitio, la bienvenida e Ayuda, y por
   eso la clase es generica: lo que califica es el TITULO y no la tarjeta —de ahi
   `title-emoji` y no `card-emoji`—, asi que un titulo nuevo lo hereda sin rebautizar nada.

   En Ayuda ha entrado y salido varias veces. El argumento para quitarlo es que un
   emoji delante de «Convenciones» es una etiqueta de tema encima de un titulo que ya lo dice
   en palabras. Se queda por uno mas grande: las dos secciones son la MISMA tarjeta —misma
   lamina, mismo borde, mismo titulo dorado— y una con icono y otra sin el se leen como dos
   componentes distintos que casi coinciden, que es peor que un icono de mas.

   Va siempre con `aria-hidden` en el HTML: es decoracion, y sin eso un lector de pantalla
   lee «signo de los cuernos Bienvenid arroba» antes de cada tarjeta. Con el titulo del
   ayuda importa lo mismo: el emoji no aporta nada que el texto no diga. */
.title-emoji {
  margin-right: 9px;
  font-size: 1.15em;
}

.welcome-card p {
  max-width: 68ch;
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.welcome-card p:last-child {
  margin-bottom: 0;
}

/* Lista con vinetas de verdad: los videos de la bienvenida y los controles de la ayuda
   de afinacion. En los dos casos son cosas sueltas —cada renglon es un item aparte— y la
   vineta es lo que lo dice. El sangrado deja la vineta por fuera del texto, asi que el item
   que parte en dos renglones sigue alineado consigo mismo y no con el punto. */
.video-list,
.ayuda-list {
  margin: 0;
  padding-left: 1.15rem;
  list-style: disc;
  font-size: 0.95rem;
}

.video-list li + li,
.ayuda-list li + li {
  margin-top: 10px;
}

/* En la bienvenida la lista cierra la tarjeta y no lleva nada debajo; en una ayuda
   siempre viene algo detras, asi que aqui si hace falta el hueco de abajo. Es el mismo que
   deja un parrafo mas un punto, porque la lista pesa mas que un parrafo. */
.ayuda-list {
  margin-bottom: 16px;
}

/* La caja donde va un control suelto que se compara consigo mismo en dos estados: el
   interruptor del autoscroll —encendido y apagado— y el reloj del transporte —normal y recien
   copiado—. Perfilada y sin relleno, como los ejemplos de letra y la replica de las pistas:
   dentro de una comparacion el papel lo pone la ficha, y una lamina rellena aqui seria una caja
   dentro de otra del mismo tono. La lamina es para los dibujos sueltos —el control de tono—.

   Se llama «switch» por el interruptor, que fue el primero que la uso, y el nombre se quedo
   corto cuando llego el reloj. No se renombro porque el nombre no es lo que hace: la caja es
   «un control dibujado dentro de una ficha de comparacion», y eso vale para los dos.

   `align-self: stretch` para que las dos cajas salgan del mismo alto aunque un pie mida mas que
   el otro. Es el valor por defecto de una celda de rejilla, escrito a proposito: es de lo que
   depende que la comparacion se lea como una comparacion. */
.switch-demo {
  display: flex;
  align-self: stretch;
  align-items: center;
  padding: 14px 16px;
  background: none;
  border: 1px solid var(--header-line);
  border-radius: 12px;
}

/* El interruptor. El estilo esta DUPLICADO a proposito: el de verdad vive en el shadow root
   del componente (`player.css`, `.autoscroll`, `.autoscroll-dot` y `.autoscroll.off`) y desde
   aqui no se alcanza. Las dos copias se nombran entre si. Ojo con lo que alli hereda del
   `button {}` generico —lamina, hilo y esquina— que aqui hay que escribir a mano, porque esto
   es un `span`. */
.autoscroll-demo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  color: var(--text);
  font-size: 0.85rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.autoscroll-demo .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

/* Apagado: el punto se va al color del hilo y el texto al gris. Apagado de verdad, no un gris
   oscuro sobre otro: puestos uno al lado del otro, lo que tiene que distinguirlos de un vistazo
   es el punto. */
.autoscroll-demo.off {
  color: var(--muted);
}

.autoscroll-demo.off .dot {
  background: var(--line);
}

/* ---- Ayuda: la replica del reloj del transporte ----------------------
   El reloj y su confirmacion de copiado, con las medidas del de verdad. DUPLICADO igual que
   el interruptor de aqui arriba: el original vive en el shadow root del componente
   (`player.css`, `.time`, `.time-now` y `.time-flash`) y desde aqui no se alcanza. Las dos
   copias se nombran entre si; si cambia una, cambia la otra.

   Solo se dibujan los DOS estados que la ayuda compara —el reloj como esta siempre y el
   reloj un segundo despues de copiar—, y no el de hover: pasar el raton no se puede enseñar en
   un dibujo quieto, y ademas es lo que el texto de al lado dice en palabras.

   Ojo con una diferencia que no es un descuido: alli el estado copiado es una etiqueta
   SUPERPUESTA con posicion absoluta, porque el reloj de verdad se re-escribe en cada frame y
   hay que taparlo. Aqui no hay nada que tapar, asi que es el mismo <span> cambiando de pinta.
   Lo que tiene que coincidir es lo que se VE: lamina de control, tinta de marca y negrita. */
.time-demo {
  /* `inline-block` y NO `inline-flex`: el reloj es «0:11 / 2:35», o sea un <span> con la hora
     en curso y, pegado detras, un texto suelto con la barra y el total. En una caja flex ese
     texto suelto pasa a ser un elemento anonimo y el blanco que lo separa del <span> se
     descarta, asi que salia «0:11/ 2:35». El de verdad es un <button>, que es inline-block. */
  display: inline-block;
  padding: 3px 7px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  color: var(--muted);
}

.time-demo .now {
  color: var(--text);
}

.time-demo.copied {
  background: var(--surface-2);
  color: var(--brand);
  font-weight: 700;
}

/* La descripcion en gris, detras del titulo: el titulo es lo que se busca y la frase es
   para decidir si es el que uno necesita. La raya la pone el CSS y no el HTML para que no
   quede colgando al final de un renglon cuando el titulo parte en dos. */
.video-note {
  color: var(--muted);
}

.video-note::before {
  content: ' — ';
}

/* ---- Ayuda -----------------------------------------------------------
   Una ayuda se lee de corrido, asi que aqui manda el ancho de linea y no el de la
   pantalla: un parrafo de borde a borde en un monitor ancho se pierde al saltar de
   renglon. Los ejemplos, en cambio, salen del limite del texto y se ponen lado a lado
   cuando hay sitio, porque lo que se compara son los dos casos entre si. */

/* Cada ayuda va en su propia tarjeta —una para Letra, una para M y S, una para el
   cambio de afinacion—, y es exactamente la de la bienvenida: el mismo baño de marca sobre
   `--panel`, el mismo borde teñido y el mismo radio de 14 px. No es un parecido escrito dos
   veces: son los mismos tokens en el mismo orden, asi que las dos secciones de texto del
   sitio se apoyan en la misma lamina y cambian juntas. La bienvenida las reparte de dos en
   dos porque son presentaciones cortas; una ayuda lleva ejemplos al lado y no cabe en
   media columna, asi que aqui la rejilla es de una.

   Y es la UNICA superficie de la ayuda: los recuadros de dentro —el aviso destacado y los
   ejemplos— no llevan relleno, solo borde. Cada uno traia el suyo, y con la
   tarjeta debajo eran tres escalones de tono para tres cosas que son el mismo material: la
   caja se leia como una caja con cajas. Ahora el tono lo pone la tarjeta una sola vez y lo de
   dentro lo dibuja la linea, asi que la ayuda entero se lee como una pieza. Quien
   cambie esto tiene que mover las dos mitades: poner relleno dentro sin quitarlo aqui
   devuelve el escalon.

   Sin tope de ancho AQUI: el tope vive en `.ayuda-cases`, que es lo unico que hay que
   sujetar —dos ejemplos estirados a un monitor ancho quedan en dos sabanas—. El texto de
   la ayuda no necesita el tope: son dos frases cortas, no parrafos. */
.ayuda {
  padding: 20px 22px;
  background:
    linear-gradient(180deg, var(--card-tint), var(--card-tint-2)),
    var(--panel);
  border: 1px solid var(--header-line);
  border-radius: 14px;
  min-width: 0;
}

/* El hueco entre ayuda es el mismo que separa las tarjetas de la bienvenida (14 px) y
   no los 36 px que hicieron falta mientras no habia caja: entonces el aire era lo unico que
   decia donde termina uno y empieza el siguiente. Ahora lo dice el borde, y un hueco del
   triple deja la seccion desarmada en fichas sueltas. */
.ayuda + .ayuda {
  margin-top: 14px;
}

/* El titulo de una ayuda NO es `.group-title` —el rotulo dorado en versalitas de los
   grupos de ensayos—, aunque empezo siendolo. Aquel rotula una tabla: dice de que fecha es
   lo que viene debajo y se aparta. Este encabeza una seccion de lectura, que es el mismo
   papel que el titulo de una tarjeta de la bienvenida, asi que lleva su mismo tratamiento de
   cuerpo: 1,15 rem, caja baja y sin espaciado de letra. En 600 y no en el 700 que trae un
   <h3> por defecto, igual que los encabezados de la tabla de ensayos: a este cuerpo el bold
   se lee como un grito, y el titulo ya se distingue por color y tamaño.

   Llevo una regla debajo cruzando toda la columna, y era lo que decia donde termina un
   ayuda y empieza el siguiente cuando las tres iban sueltas sobre el fondo. Eso lo dice
   ahora el borde de la tarjeta, y una raya dentro de una caja ya no se lee como el final de
   una seccion: se lee como un subrayado del titulo. Se fue con la caja que la hacia falta y
   no vuelve con ella.

   El COLOR si se separa del de la bienvenida: va en el dorado del emblema y no en el de
   marca, que es lo que tenia. El dorado es con el que el sitio encabeza lo que uno esta
   mirando —el titulo de la cancion en el reproductor, «Proximos» y «Realizados» en los
   ensayos, el rotulo de la portada—, y una ayuda abierto es justamente eso. El morado
   se queda para lo que nombra al SITIO y no a su contenido: la cabecera, la seccion abierta
   en la lateral y los encabezados de la tabla. Las tarjetas de la bienvenida hicieron el
   mismo viaje y por la misma razon, asi que las dos secciones de texto encabezan igual.

   De paso gana contraste donde mas justo estaba: sobre la lamina translucida el morado da
   4,94:1 —el peor caso de la pagina— y el dorado ronda los 10,9:1 que mide sobre la tarjeta
   del reproductor. */
.ayuda-title {
  margin: 0 0 14px;
  color: var(--gold);
  font-size: 1.15rem;
  font-weight: 600;
}

/* Las medidas de cualquier parrafo de una ayuda, puestas en el elemento y no en una
   clase: en una seccion de lectura los parrafos son el material corriente, y ponerle clase
   a cada uno es papeleo que un dia alguien olvida.

   Sin tope de ancho, y eso es una decision, no un olvido: se probo el tope de lectura de
   manual (unos 100 caracteres) y en esta seccion parte los renglones mucho antes de que la
   columna se acabe, con media pantalla vacia al lado. El texto de aqui son frases sueltas
   —una entrada, cuatro controles, dos avisos—, no paginas de corrido, asi que el renglon
   largo no cansa: lo que se lee mal es el escalon. El unico tope que queda en la seccion es
   el de `.ayuda-cases`, que sujeta los ejemplos. */
.ayuda p {
  margin: 0 0 14px;
  font-size: 0.95rem;
}

/* Lo ultimo de la tarjeta no arrastra su hueco de abajo: ese hueco sumado al relleno de la
   caja deja el ultimo parrafo flotando lejos del borde. Es la misma regla que ya tienen las
   tarjetas de la bienvenida, y va por selector de ultimo hijo y no por clase porque un
   ayuda puede cerrar con un parrafo, con la lista o con los ejemplos, segun cual sea. */
.ayuda > :last-child {
  margin-bottom: 0;
}

/* ---- Ayuda: la replica de las pistas ---------------------------------
   Las filas de pistas con sus botones M y S, dibujadas con las mismas medidas y los mismos
   tokens de `player.css`: el punto de 10 px con el color que la pista tiene en el catalogo,
   el nombre a 0,88 rem, los botones de 28x26 y el 0,35 de opacidad con que el reproductor
   apaga una fila que no suena. Vale aqui lo mismo que en la replica del tono: no es una
   captura, y va con `aria-hidden` porque es un dibujo y no un control —el texto de al lado
   dice en palabras lo que enseña.

   Los colores de los puntos van en `style` en el HTML y no aqui, y es a proposito: son los
   del catalogo (`songs.json`), los mismos que el reproductor pone en linea al construir cada
   fila. Esta hoja no inventa colores; los que usa salen todos de `theme.css`. */
/* El recuadro que antes ponia la ficha del caso. Los cuatro ejemplos de la seccion tienen
   que leerse igual —uno es un trozo de letra y otro un trozo de la lista de pistas, pero los
   dos son «esto es lo que veras en pantalla»—, asi que la caja es la misma que la del ejemplo
   de letra. Sin esto, quitarle el marco a la ficha dejaba las dos fichas de M y S sin ninguna
   caja, al lado de dos de letra que si la tienen.

   Sin relleno, como los otros tres recuadros de la seccion: ver la nota de `.lyric`, que es
   de donde sale. */
.stems-demo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: none;
  border: 1px solid var(--header-line);
  border-radius: 12px;
}

.stems-demo .row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
}

/* Una pista que no suena, igual que en el reproductor: la fila entera baja de intensidad.
   No se esconde ni se tacha —sigue estando y se puede volver a encender—, solo se apaga. */
.stems-demo .row.silent {
  opacity: 0.35;
}

.stems-demo .dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.stems-demo .name {
  flex: 1;
  font-size: 0.88rem;
}

.stems-demo .tg {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

/* Encendidos: el rojo del mute y el ambar del solo, con la letra en el fondo oscuro de la
   tarjeta, exactamente como los pinta el reproductor. */
.stems-demo .tg.on-mute {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--surface);
}

.stems-demo .tg.on-solo {
  background: var(--solo);
  border-color: var(--solo);
  color: var(--surface);
}

/* ---- Ayuda: la replica del control de tono ---------------------------
   El control de tono, dibujado aqui mismo. No es una captura, por lo mismo que los ejemplos
   de letra tampoco lo son: una captura se ve borrosa en una pantalla de retina, envejece en
   cuanto el panel cambia un pixel y pesa mas que estas veinte lineas. Dibujado con las
   MISMAS medidas y los MISMOS tokens que `player.css` —el fondo `--surface-2`, el borde
   `--line`, el verde `--pitch`, los botones de 30 px, el radio de 10— es el mismo control,
   no un parecido.

   Va con `aria-hidden`: es un dibujo, no un control. Quien no lo ve no se pierde nada,
   porque la lista de abajo dice en palabras lo mismo que el dibujo enseña, y un lector de
   pantalla anunciando «menos, mas, Reset» sueltos —sin nada que hacer con ellos— seria
   ruido puesto a proposito.

   Se dibuja en &minus;2 y no en 0 por dos razones: en 0 el numero va apagado y el Reset
   esta escondido (`visibility: hidden` en el reproductor), asi que el dibujo enseñaria
   media fila; y el ejemplo de la lista habla justo de valores distintos de cero. */
.pitch-demo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  /* A todo el ancho de la tarjeta, igual que la regla y los ejemplos. Llevaba un tope de
     620 px —«ancho de panel, no de pagina»— de cuando la seccion no tenia caja y el dibujo
     colgaba de una columna que crecia con la pantalla. Ahora el ancho lo pone la tarjeta,
     que es justo el papel que hacia ese tope, y con el puesto ademas el dibujo era la unica
     pieza que no llegaba al margen. El precio es que en un monitor ancho la barra de tono
     sale mas larga que la del reproductor de verdad; lo que el dibujo tiene que enseñar es
     que partes hay y en que orden, y eso no cambia con el largo del riel. */
  padding: 12px 14px;
  margin: 0 0 16px;
  background: var(--surface-2);
  border-radius: 10px;
}

.pitch-demo .title {
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Los dos botones son cuadrados de 30 px y del mismo color que el panel: en el reproductor
   lo unico que los dibuja es el borde, y aqui igual. */
.pitch-demo .key {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 1.1rem;
  line-height: 1;
}

/* La barra: el riel lleno hasta donde va el tirador y apagado despues, que es como pinta el
   navegador un `range` con `accent-color`. El 33% no es a ojo: es donde cae &minus;2 en un
   recorrido de &minus;6 a +6 —(&minus;2+6)/12—, asi que el dibujo y el numero de al lado
   dicen lo mismo. */
.pitch-demo .range {
  position: relative;
  flex: 1;
  min-width: 140px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--pitch) 33.3%, var(--line) 33.3%);
}

.pitch-demo .range::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 33.3%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pitch);
  transform: translate(-50%, -50%);
}

/* El ancho minimo es lo que deja que el numero cambie de &minus;6 a +6 sin que la fila se
   reacomode, y las cifras tabulares que no bailen al cambiar. Encendido —verde y en 600—
   porque el dibujo esta fuera de cero. */
.pitch-demo .value {
  min-width: 2.6em;
  color: var(--pitch);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.pitch-demo .reset {
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.8rem;
}

/* La regla es la frase que hay que recordar de toda la seccion, asi que sale del cuerpo
   del texto y se pone en una tarjeta con el filo de marca a la izquierda: es la misma
   senal con que la lateral marca donde esta uno.

   El papel es `--surface-2` y no `--panel`, que es lo que usa la tarjeta que ahora la
   encierra: dos cajas del mismo fondo, una dentro de la otra, no se distinguen mas que por
   el hilo del borde. Sobre la lamina de la tarjeta, la superficie mas clara se lee como
   algo puesto ENCIMA, que es lo que es. Lo mismo vale para los dos ejemplos de abajo.

   Con la tormenta detras esto no aplica: ahi `backdrop.css` las vuelve translucidas a las
   dos, y la de dentro cae sobre la de fuera —dos velos del 64% dan un 87% efectivo—, asi
   que se despega sola sin necesidad de otro color. */
.ayuda-rule {
  /* A todo el ancho de la tarjeta. Se ajusto a la frase (`fit-content`) mientras la seccion
     no tenia caja: ahi una banda de borde a borde con una linea dentro flotaba sobre el
     fondo como si le faltara algo. Dentro de la tarjeta manda la otra cuenta: la regla es lo
     unico de la seccion que no llega a los dos margenes, y una caja mas corta que las de
     arriba y abajo se lee como un desajuste y no como enfasis. Lo que la destaca sigue
     siendo el filo de marca. */
  padding: 12px 14px;
  /* Sin relleno: lo dibuja el borde y nada mas. La superficie de la seccion la pone la
     tarjeta de la ayuda (`.ayuda`), una vez, y este aviso se apoya en ella en vez de
     traer la suya. Tuvo el baño de marca sobre `--surface-2` y era un segundo escalon de
     tono dentro de la caja, que es lo que partia la ayuda en piezas. Lo que lo
     destaca sigue siendo el filo de marca de abajo, que es lo unico que este recuadro tiene
     y los ejemplos no. */
  background: none;
  border: 1px solid var(--header-line);
  /* Despues del `border` de arriba a proposito: el atajo pisa los cuatro lados, asi que el
     filo de marca tiene que volver a declararse aqui o se pierde. */
  border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0;
}

/* La leyenda es una fila de dos etiquetas, no una lista con vinetas: son dos rotulos de
   color, no pasos de un procedimiento. */
.ayuda-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

/* OJO: la leyenda de la letra del reproductor (`.lyrics-legend` en `player.css`) es esta misma
   cosa, pero YA NO es la misma caja, y fue a proposito. Alla va sin pastilla: solo las dos
   palabras en su tinta con un punto en medio.

   El motivo esta explicado alla, y en resumen: la pastilla vive alli en la esquina de los mandos,
   con la barra del modo de marcar tiempos —cuatro pastillas que si se pulsan— justo encima, y se
   leia como dos botones mas. Aqui no pasa: esta leyenda no tiene ningun control cerca y hace juego
   con los ejemplos de letra que lleva debajo, que es de donde saca su lamina y su borde.

   Lo que SI siguen compartiendo, y es lo que importa, son las TINTAS y las PALABRAS: quien lee
   esta ayuda reconoce alla las mismas dos etiquetas en los mismos dos colores. Las tintas
   salen de `theme.css`, asi que esas no se pueden desincronizar.

   Cada etiqueta esta escrita EN el color del que habla: la pastilla es la muestra.
   Nombrar el color en gris al lado de un cuadrito obliga a cruzar la vista de uno a otro;
   aqui «Voz principal» ya viene en la tinta de la voz principal y no hay nada que
   emparejar.

   Y por eso mismo la etiqueta no dice como se llama el color. Decia «Negro: voz principal»
   y «Azul: coro» cuando las tintas eran fijas; hoy el coro va en el color de MARCA, que
   cambia con el tema —carmin, violeta o naranja segun el <link>—, asi que el nombre
   escrito se volveria mentira al cambiar de paleta. La muestra no puede quedarse
   desactualizada; el nombre si.

   Llevan la misma lamina y el mismo borde de marca que el ejemplo de abajo: son trozos de
   la misma hoja. */
.ayuda-legend li {
  padding: 4px 12px;
  /* El tinte flojo de tarjeta, translucido: la pastilla la dibuja el borde de marca, no el
     relleno. Se probo con un velo negro para hundirla —hasta rgba(0,0,0,0.65), que baja el
     interior a la mitad de luminancia— y se descarto: sobre una hoja ya oscura, la pastilla
     opaca pesaba mas que las dos palabras que tiene dentro. */
  background: var(--card-tint-2);
  border: 1px solid var(--header-line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.legend-lead {
  color: var(--lyric-ink);
}

.legend-choir {
  color: var(--lyric-choir);
}

.legend-chords {
  color: var(--lyric-chord);
  /* Los acordes van en negrita en la hoja: la muestra tiene que traer las dos señales, o
     ensena la mitad de lo que hay que reconocer. La pastilla ya es 600; esto la sube al 700
     de la hoja. */
  font-weight: 700;
}

/* `auto-fit` con un minimo en vez de dos columnas fijas: los dos casos se ponen al lado
   cuando caben y se apilan solos en un telefono, sin una consulta de medios que adivine
   en que ancho pasa.

   Las tres filas de una tarjeta —titulo, ejemplo, pie— se declaran AQUI, en el padre, y no
   dentro de la tarjeta: es lo que deja que las dos las compartan con `subgrid`, mas abajo.
   El hueco entre filas es el de dentro de una tarjeta (12 px) y el de columnas el que
   separa las dos tarjetas (14 px). */
/* Sin tope de ancho, y eso cambio con la tarjeta. Cuando las ayudas iban sueltos
   sobre el fondo, los ejemplos eran lo unico que habia que sujetar: estirados a un monitor
   ancho quedaban en dos sabanas sin nada que dijera donde acaba la seccion. Ahora la
   tarjeta ya pone ese limite, y el tope de 1 120 px dejaba en cambio una franja muerta a
   la derecha DENTRO de la caja —los ejemplos cortados a media tarjeta en un monitor de
   1 920—, que se lee como que falta algo ahi. Los ejemplos llenan la tarjeta; el que los
   sujeta es su relleno. */
.ayuda-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: auto auto auto;
  gap: 12px 14px;
  margin-bottom: 16px;
}

/* Mismo tratamiento que la regla de arriba —el baño de marca sobre `--surface-2` y el
   borde teñido, no el `--surface` con linea gris del reproductor—: son fichas puestas
   ENCIMA de la tarjeta de la ayuda, y sobre un fondo del mismo `--panel` que la
   tarjeta no se distinguirian mas que por el hilo del borde. Con la tormenta detras esa
   distincion la hace la densidad y no el color: `backdrop.css` translucida la tarjeta y
   estas fichas a la vez, y un velo sobre otro pesa mas que uno solo.

   Las filas no son propias: son las del padre. Los dos ejemplos caen en la MISMA fila, y una
   fila mide lo que el mas alto de los dos, asi que el papel de «A la vez» —tres renglones—
   crece hasta el de «Por turnos» —cuatro, porque el renglon en blanco de ahi es contenido y
   no se puede quitar— y los dos recuadros quedan del mismo alto. Sin fijar ninguno a mano:
   si mañana entra un ejemplo de seis renglones, los dos crecen con el.

   De paso los titulos y los pies tambien arrancan a la misma altura, que es lo que se nota
   cuando estan uno al lado del otro. Y al apilarse en un telefono cada tarjeta se queda con
   sus propias filas —el padre pasa a una columna y las crea implicitas—, que es justo lo que
   se quiere: alineadas en vertical no hay nada que emparejar, y forzarlo solo dejaria un
   hueco debajo del ejemplo corto. */
/* La ficha de cada caso NO lleva caja: titulo, ejemplo y pie van sueltos dentro de la
   tarjeta de la ayuda, y el unico recuadro que queda es el del ejemplo.

   Tuvo la suya, y eran tres cajas metidas una dentro de otra —tarjeta de la ayuda, ficha
   del caso, recuadro del ejemplo—. Con la de fuera y la de dentro ya dibujadas, la del medio
   no separaba nada que no estuviera separado: el titulo de cada caso y el hueco entre las dos
   columnas dicen donde acaba uno y empieza el otro.

   Lo que se queda es la rejilla: `subgrid` es lo que alinea las tres filas —titulo, ejemplo,
   pie— entre los dos casos, y sin eso el ejemplo de la derecha empieza a otra altura que el
   de la izquierda en cuanto uno de los dos titulos parte en dos renglones. */
.ayuda-case {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  /* Sin esto, en un telefono la columna se estira hasta el verso mas largo del ejemplo y
     arrastra la pagina entera: el minimo automatico de una celda de rejilla es su
     min-content, y el `overflow-x` del ejemplo no llega a actuar. Es la misma cuenta que
     obliga a `minmax(0, 1fr)` en `.shell`. */
  min-width: 0;
  margin: 0;
}

/* El pie va en tinta plena y no en gris, que es lo raro aqui y por eso lleva nota: en el
   resto del sitio `--muted` marca lo secundario —la segunda linea de un dato, una etiqueta,
   un estado—, cosas que se pueden saltar. Este pie no se puede saltar: ES la explicacion del
   caso. El ejemplo de arriba no dice por si solo por que las dos lineas van pegadas; eso lo
   dice el pie, y en gris se leia como pie de foto opcional.

   Se queda un punto mas chico que el cuerpo (0,88 rem). Eso es lo que sigue diciendo que
   viene despues del ejemplo y no antes; el color no tenia que decirlo tambien. */
.ayuda-case figcaption {
  color: var(--text);
  font-size: 0.88rem;
}

/* Encabeza la tarjeta, asi que se despega del ejemplo un poco menos que el resto del
   `gap`: el titulo y su ejemplo son una sola cosa, el comentario de abajo es otra. */
.case-title {
  margin: 18px 0 10px;
  color: var(--text);
  font-size: 0.95rem;
}

/* Dentro de una ficha los huecos los pone la rejilla —y el rotulo va pegado a su ejemplo—,
   asi que ahi el margen se anula. Estuvo en `.case-title` a secas, y con el mismo rotulo
   usado suelto (el de «Atajos») se veia lo que era: los -2 px no son del titulo sino de
   estar metido en una ficha. */
.ayuda-case .case-title {
  margin: 0 0 -2px;
}

/* El trozo de letra. Monoespaciado y con los espacios respetados porque asi es como esta
   escrita la hoja de verdad: el acorde queda sobre la silaba exacta en que entra, y el
   renglon en blanco —lo que separa una voz de la otra— es informacion, no aire sobrante.

   Y va pintado como la hoja del reproductor, que es lo que el ejemplo enseña: misma lamina
   translucida, mismo borde de marca, mismas tres tintas de `theme.css`. Antes los dos eran
   papel impreso, negro sobre hueso, para parecerse al PDF que abria el boton; hoy no hay
   PDF y la letra se lee dentro del reproductor, asi que el ejemplo se mudo con ella. Si
   alguna vez se separan, la ayuda pasa a explicar una hoja que nadie ve.

   Sin relleno propio, y esa es la decision de la seccion entera: la superficie la pone la
   tarjeta de la ayuda y aqui dentro solo se dibuja el borde. Paso por las dos: el tinte
   flojo de tarjeta primero, y el baño completo sobre `--surface-2` despues, mientras el
   ayuda no tenia caja y el ejemplo caia directo sobre el fondo de la pagina. Con la
   caja de vuelta, cualquiera de los dos es un segundo escalon de tono a dos milimetros del
   primero: se lee como un recorte pegado encima y no como parte de la ayuda. Lo que
   separa el ejemplo de su tarjeta es el borde teñido, igual que en el reproductor.

   `overflow-x: auto` para que un verso largo se desplace dentro de su tarjeta y no
   empuje la pagina entera, que es lo que pasa con texto preformateado en un telefono. */
.lyric {
  min-width: 0;
  /* La hoja LLENA su fila —que ya mide lo que el ejemplo mas alto—, y por eso los dos
     recuadros salen iguales. Es el valor por defecto de una celda de rejilla, escrito a
     proposito: es de lo que depende que los dos queden del mismo alto, y sin la linea
     cualquiera lo apaga sin saber que lo estaba apagando. */
  align-self: stretch;
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: none;
  border: 1px solid var(--header-line);
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--lyric-ink);
}

/* Los acordes en negrita, como en el PDF: es lo que los separa de la letra estando en la
   misma tinta. */
/* Negrita ademas del color, como en la hoja del reproductor: dos señales y no una. */
.lyric .chords {
  color: var(--lyric-chord);
  font-weight: 700;
}

.lyric .choir {
  color: var(--lyric-choir);
}

/* ---- Angosto: la lateral pasa a pestañas y la tabla a fichas -----------------
   Cuatro columnas no caben en un teléfono, así que cada ensayo se convierte en una
   ficha y el encabezado de cada celda lo pone `data-label` desde el CSS. Es lo que
   evita el scroll horizontal, que en una tabla es de lo más incómodo que hay. */

@media (max-width: 720px) {
  /* No hay ancho para una columna lateral, así que la navegación se acuesta: pasa a una
     barra de pestañas debajo de la cabecera, pegajosa igual que ella (por eso el `top`
     es el alto de la cabecera) y a sangre de lado a lado, que es donde el pulgar la
     busca. El indicador activo se muda de la barra izquierda al subrayado. */
  /* Una sola columna, y —esto es lo que importa— las filas DECLARADAS. En ancho la
     rejilla tiene una fila y dos columnas; aqui la lateral se acuesta y pasan a ser dos
     filas: la tira de pestañas y el contenido.

     Sin `grid-template-rows`, esas dos filas son automaticas, y `.shell` tiene un
     `min-height` de casi la pantalla entera. Con `align-content: normal` —el valor por
     defecto, que en una rejilla se comporta como `stretch`— el sobrante se reparte A
     PARTES IGUALES entre las filas automaticas, asi que la tira de pestañas se quedaba
     con la mitad: 222 px de alto para 45 px de contenido, y el contenido empujado a
     media pantalla.

     Se veia exactamente donde el contenido es corto, que es el repertorio MIENTRAS
     cargan las pistas: el selector y la barra de carga aparecian centrados en vertical y
     saltaban arriba al terminar, cuando la mezcla ya llenaba la pantalla y no quedaba
     sobrante que repartir. En ancho no pasa nunca porque ahi hay una sola fila.

     Con `auto 1fr` cada una dice lo que es: la tira mide su contenido y el resto es del
     contenido. Es la misma reparticion que en ancho, girada. */
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .sidebar {
    position: sticky;
    top: var(--head-h);
    z-index: 15;
    height: auto;
    padding: 0 10px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    /* El minimo automatico de una celda de rejilla es su min-content, y el de la tira de
       pestañas es la suma de las tres: sin esto, en un telefono angosto la barra estira la
       pagina entera y todo el sitio queda con scroll horizontal. */
    min-width: 0;
  }

  /* Con cuatro secciones la fila no cabe en un telefono, asi que se desliza. Las pestañas
     no se encogen (`flex: none`): antes que recortar las palabras a la mitad —que es lo
     que hace el reparto flexible— es mejor que la ultima asome y se arrastre. */
  .side-nav {
    flex-direction: row;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .side-nav::-webkit-scrollbar {
    display: none;
  }

  .side-link {
    flex: none;
    padding: 11px 10px;
    border-radius: 8px 8px 0 0;
  }

  .side-link.on {
    background: var(--brand-wash-soft);
  }

  /* La lateral es aqui una barra de pestanas de una linea: no hay donde poner el
     emblema, y el de la cabecera sigue a la vista. */
  .side-emblem {
    display: none;
  }

  .side-link::before {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 0;
    width: auto;
    height: 2px;
    transform: none;
    border-radius: 2px 2px 0 0;
  }

  .views {
    padding: 20px 14px 64px;
  }

  /* La tarjeta de la ayuda se aprieta igual que las de la bienvenida: son la misma
     caja, y en un telefono 22 px de aire a cada lado se comen la columna de texto. */
  .welcome-card,
  .ayuda {
    padding: 16px;
  }

  .ensayos,
  .ensayos tbody,
  .ensayos tr,
  .ensayos td {
    display: block;
  }

  .ensayos {
    background: none;
    border: none;
    border-radius: 0;
  }

  .ensayos thead {
    display: none;
  }

  .ensayos tr {
    padding: 4px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
  }

  .ensayos tr + tr {
    margin-top: 12px;
  }

  .ensayos td,
  .ensayos tbody tr:last-child td {
    width: auto;
    padding: 12px 0;
    border-bottom: none;
  }

  .ensayos td + td {
    border-top: 1px solid var(--line);
  }

  /* El nombre del campo hace aquí de encabezado de columna —es la fila del `thead`, que en
     la ficha se pierde—, así que va del mismo color de marca con que se pinta el `thead` en
     ancho: el mismo papel, el mismo color. En gris se confundía con la segunda línea de cada
     dato, que también es gris. 5,4:1 sobre el fondo de la ficha. */
  .ensayos td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: var(--brand);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
}

/* ---- Portada publica (index.html) -------------------------------------------
   Composicion tipo caratula: el emblema manda, la luz de marca detras y grano encima. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* El emblema viene sobre un cuadrado NEGRO PURO sin transparencia. Si detras hubiera
   el gris azulado del resto del sitio se veria el disco recortado como una mancha mas
   oscura; con negro puro en el centro del degradado, el cuadrado desaparece y el
   emblema parece flotar. */
.cover-body {
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(
    circle at 50% 42%,
    var(--cover-core) 0%,
    var(--cover-core) 24%,
    var(--cover-mid) 48%,
    var(--cover-edge) 100%
  );
}

/* Grano de pelicula. Es lo que separa una portada de una plantilla: rompe los
   degradados planos y da textura impresa. Overlay fijo y sin eventos para que no
   se coma los clics del boton. */
.cover-body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cover {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4vh, 34px);
  padding: 48px 20px;
  text-align: center;
}

/* La luz de marca detras del emblema: es lo que lo hace leer como iluminado en un
   escenario en vez de pegado sobre el fondo.
   Va como capa FIJA a pantalla completa, no como un circulo dimensionado sobre el
   emblema. Ese fue el primer intento y desbordaba: un elemento absoluto del 185 %
   sobresale del viewport y eso cuenta para scrollWidth, o sea barra horizontal en
   movil. Asi, con inset 0, es incapaz de desbordar por construccion.
   El 39 % vertical es donde cae el centro del emblema con este flujo, medido igual en
   escritorio y en movil. */
.cover-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle 38vmax at 50% 39%,
    var(--glow-near) 0%,
    var(--glow-far) 34%,
    transparent 66%
  );
  animation: emblem-glow 9s ease-in-out infinite;
}

/* Solo respira la opacidad de la luz. Ninguna geometria cambia, asi que no hay nada
   que pueda saltar ni reflujo que provocar. */
@keyframes emblem-glow {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

.emblem {
  display: block;
  width: clamp(200px, 62vw, 360px);
  height: auto;
  border-radius: 50%;
  /* Filo del mismo dorado del aro, y una sombra profunda que lo apoya. */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent),
    0 26px 70px -18px rgba(0, 0, 0, 0.95);
}

/* Etiqueta entre filetes: recurso de cartel de concierto. Da jerarquia sin competir
   con el emblema, que es quien ya dice el nombre. */
.rule-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 16px);
  margin: 0;
  max-width: 100%;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.rule-tag::before,
.rule-tag::after {
  content: '';
  flex: 0 1 auto;
  width: clamp(30px, 14vw, 110px);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--gold) 55%, transparent)
  );
}

.rule-tag::after {
  background: linear-gradient(
    to left,
    transparent,
    color-mix(in srgb, var(--gold) 55%, transparent)
  );
}

/* Texto casi negro sobre el color de marca: 5,8:1, cumple AA. Esquinas poco
   redondeadas porque una pastilla lee a producto y esto es una banda de rock. */
.enter {
  display: inline-block;
  padding: 15px 34px;
  border-radius: 5px;
  background: var(--brand);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 32px -12px var(--brand-shadow);
  transition:
    background 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

/* `transform` no reflueye: el boton se levanta sin mover nada a su alrededor. */
.enter:hover,
.enter:focus-visible {
  background: var(--brand-hover);
  box-shadow: 0 16px 38px -12px var(--brand-shadow-hover);
  transform: translateY(-2px);
}

.enter:active {
  transform: translateY(0);
}

/* Oculto salvo cuando la URL apunta a el. Se reserva su espacio con `display: none` en
   vez de esconderlo de otro modo porque aparece ya en el primer render —el fragmento
   viene en la URL desde que carga—, asi que no hay salto posterior. */
.cover-alert {
  display: none;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  color: var(--gold);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
}

.cover-alert:target {
  display: block;
}

.cover-note {
  margin: 0;
  max-width: 52ch;
  color: var(--faint);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  .cover-body::before {
    animation: none;
    opacity: 0.85;
  }

  .enter {
    transition: none;
  }

  .enter:hover,
  .enter:focus-visible {
    transform: none;
  }
}

@media (max-width: 520px) {
  :root {
    --head-h: 60px;
  }

  /* Aqui caben las tres piezas —tira, nombre y tagline— pero solo si cada una cede algo: en
     320 px el ancho util son 292 px y a tamaño de escritorio suman de sobra. Asi que la tira
     baja de alto (y con ella de ancho, que es lo que escasea), la cabecera recorta su margen
     lateral y el tagline encoge de cuerpo y de espaciado. Ninguna desaparece: el tagline dice
     de que banda y de donde es, y esa es justo la informacion que un desconocido necesita en
     un telefono. */
  .site-head {
    padding: 0 14px;
  }


  .brand-strip {
    height: 24px;
  }

  .brand-name {
    font-size: 1rem;
  }

  .brand-tag {
    font-size: 0.55rem;
    letter-spacing: 0.07em;
  }


  /* (Lo del selector a todo el ancho se fue de aquí: no era una cosa de 320 px sino de estar
     FUERA de la tarjeta, y por debajo de 1 200 siempre lo está. Ahora lo dice `.view-head .picker`,
     donde el caso se describe por el padre y no por un ancho.) */
}

/* ---- Imprimir ----------------------------------------------------------------
   Lo que sobra en el papel: la cabecera del sitio, la barra lateral, el selector de
   cancion. Es la mitad de la regla que `player.css` no puede escribir —eso vive fuera de su
   shadow root y desde alla dentro no hay selector que lo alcance—; la otra mitad, la de la
   hoja de la letra, esta alli.

   Vale para cualquier `Cmd+P`, sin marca ni boton. Estuvo colgado de una clase que ponia el
   boton «Imprimir» del reproductor, y con el boton se fue la clase: entonces imprimir por el
   menu del navegador sacaba la pagina oscura entera con lateral y todo. Sin condicion, lo
   que sale impreso es lo que se estaba mirando —la letra en el repertorio, la tabla en los
   ensayos— y nunca el armazon.

   Del armazon se quitan tambien las medidas: la rejilla del `.shell` reserva la columna de
   la lateral, y sin esto lo impreso saldria corrido a la derecha con una franja en blanco.

   Los `!important` son para la tormenta. `backdrop.css` pinta el fondo con selectores mas
   pesados que estos —`:root[data-backdrop^='storm'] body:not(.cover-body)`— y se carga
   despues, asi que sin ellos el papel saldria con el velo oscuro encima y los rayos de
   fondo. Es el caso para el que `!important` existe: apagar una capa decorativa entera
   desde fuera, y solo al imprimir. */
@media print {
  :root,
  body {
    background: #fff !important;
    color: #000;
  }

  /* Los rayos y las nubes: dos capas fijas colgadas del <html>. */
  :root::before,
  :root::after,
  .sidebar::before,
  .sidebar::after,
  .site-head::before,
  .site-head::after {
    display: none !important;
  }

  .site-head,
  .sidebar,
  .view-head,
  .boot-error {
    display: none !important;
  }

  .shell {
    display: block;
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .views {
    display: block;
    margin: 0;
    padding: 0;
    background: none !important;
  }
}