/* Glosario. Hoja aparte, solo para glosario.html.
   No toca ni una regla de style.css: se carga detrás y solo añade clases
   nuevas con prefijo .gl-, más un ensanche de la hoja para esta página.

   Mismo sistema que el resto del sitio: monocroma, filetes de media línea en
   vez de cajas, sin color, sin sombras, sin radios, y las mismas variables de
   tinta y de espacio que ya define style.css. Aquí no se declara ninguna
   variable nueva ni ninguna fuente: --tinta, --tinta-media, --tinta-clara,
   --serif, --titular y los peldaños --e1..--e5 vienen de allí, así que el
   modo oscuro sale solo. */

/* La medida de lectura son 33rem, que es lo que aguanta un párrafo. Esto no
   es un párrafo: es una lista de tres columnas, y a 33rem la traducción se
   parte en tres renglones. Se ensancha solo en esta página. */
body.glossary-page main,
body.glossary-page .site-footer {
  max-width: calc(46rem + var(--aire) + var(--aire));
}
body.glossary-page main > :where(p, h1, h2, .chapter-head, .gl-toolbar,
  .gl-atoz, .gl-section, .gl-empty, .gl-legend) {
  max-width: 46rem;
}
/* La entradilla se queda en la medida de lectura: es un parrafo, y a 46rem se
   lee peor. El aire de debajo baja un peldano porque lo siguiente no es texto
   sino la casilla de busqueda, y con --e5 quedaba un palmo de nada en medio. */
body.glossary-page .chapter-head { max-width: 33rem; padding-bottom: var(--e4); }

/* ---------- índice de letras ---------- */
/* Es la navegación que funciona con JavaScript apagado: sin buscador, la
   única forma de llegar a la eñe en una página de varios cientos de voces. */
.gl-atoz {
  font-family: var(--titular); font-variant-numeric: lining-num;
  font-size: .82rem; letter-spacing: .06em;
  display: flex; flex-wrap: wrap; gap: .1rem .55rem;
  border-top: .5px solid var(--tinta-clara);
  border-bottom: .5px solid var(--tinta-clara);
  padding: var(--e2) 0;
  margin: 0 0 var(--e4);
}
.gl-atoz a { color: var(--tinta-media); text-decoration: none; }
.gl-atoz a:hover { color: var(--tinta); text-decoration: underline; }

/* ---------- barra de búsqueda ---------- */
/* Nace con hidden. Lo quita el guion de la página, así que sin JavaScript no
   aparece un control muerto que no filtra nada. */
.gl-toolbar { margin: 0 0 var(--e3); }
.gl-toolbar[hidden] { display: none; }
.gl-field { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.gl-toolbar label {
  font-family: var(--titular); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-media);
}
#glSearch {
  flex: 1 1 16rem;
  font-family: var(--serif); font-size: 1rem; color: var(--tinta);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--tinta-media);
  padding: .2rem 0; margin: 0;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
#glSearch:focus { outline: 0; border-bottom-color: var(--tinta); }
#glSearch::placeholder { color: var(--tinta-clara); font-style: italic; }

.gl-levels { display: flex; gap: .4rem; }
.gl-levels button {
  font-family: var(--titular); font-size: .72rem; letter-spacing: .08em;
  color: var(--tinta-media); background: transparent;
  border: 1px solid var(--tinta-clara); border-radius: 0;
  padding: .15rem .6rem; cursor: pointer;
}
.gl-levels button:hover { color: var(--tinta); border-color: var(--tinta-media); }
.gl-levels button[aria-pressed="true"] { color: var(--tinta); border-color: var(--tinta); }

.gl-count {
  font-family: var(--titular); font-variant-numeric: lining-num;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-media);
  margin: var(--e2) 0 0;
}

/* ---------- las voces ---------- */
.gl-section { margin: 0 0 var(--e4); }
.gl-section[hidden] { display: none; }
.gl-letter {
  font-family: var(--titular); font-weight: 400;
  font-size: .88rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--tinta-media);
  border-bottom: .5px solid var(--tinta-clara);
  padding-bottom: var(--e1);
  margin: 0 0 var(--e2);
  scroll-margin-top: var(--e3);
  /* Por lo mismo que la lista: style.css topa los h2 de main a 33rem y el
     filete de la letra se quedaba mas corto que las voces que encabeza. */
  max-width: none;
}
/* style.css topa toda ul de dentro de main a la medida de lectura, 33rem,
   porque una ul normal es texto. Esta no: es la rejilla de tres columnas, y
   con el tope puesto se quedaba trece rem mas corta que el filete de su
   propia letra. El :where de la regla original no puntua, asi que basta la
   clase para ganarle. */
.gl-list { list-style: none; margin: 0; padding: 0; max-width: none; }

.gl-row {
  display: grid;
  grid-template-columns: 14rem 1fr 6.5rem;
  gap: 0 var(--e2);
  align-items: baseline;
  border-bottom: .5px solid var(--tinta-clara);
  padding: .3rem 0;
}
.gl-row[hidden] { display: none; }
.gl-es { font-style: italic; }
.gl-en { color: var(--tinta-media); font-size: .95rem; }
.gl-ref {
  font-family: var(--titular); font-variant-numeric: lining-num;
  font-size: .74rem; letter-spacing: .04em;
  color: var(--tinta-media);
  text-align: right;
}
.gl-ref a { color: var(--tinta-media); text-decoration: none; border-bottom: .5px solid var(--tinta-clara); }
.gl-ref a:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

/* Falso amigo. La daga es la misma marca que usa el glosario del libro. */
.gl-fa {
  font-style: normal; color: var(--tinta-media);
  text-decoration: none; cursor: help;
  margin-left: .2em;   /* pegada a la palabra se lee como parte de ella */
}

.gl-legend { font-family: var(--titular); font-size: .74rem; color: var(--tinta-media); }
.gl-empty { font-style: italic; color: var(--tinta-media); }
.gl-empty[hidden] { display: none; }

/* Volver arriba, al final de cada letra. Sin JavaScript también funciona:
   es un enlace a un ancla. */
.gl-top {
  display: block; text-align: right;
  font-family: var(--titular); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-media);
  text-decoration: none;
  margin-top: var(--e1);
}
.gl-top:hover { color: var(--tinta); text-decoration: underline; }

/* ---------- pantalla estrecha ---------- */
/* Tres columnas no caben en un teléfono. La voz y la traducción pasan a dos
   renglones y la referencia se va debajo, alineada a la izquierda: apilarlas
   se lee mejor que encoger la del medio hasta partirla palabra a palabra. */
@media (max-width: 46rem) {
  body.glossary-page main,
  body.glossary-page .site-footer {
    max-width: calc(var(--medida) + var(--aire) + var(--aire));
  }
  body.glossary-page main > :where(p, h1, h2, .chapter-head, .gl-toolbar,
    .gl-atoz, .gl-section, .gl-empty, .gl-legend) { max-width: none; }

  .gl-row { grid-template-columns: 1fr; gap: 0; padding: var(--e1) 0 var(--e2); }
  .gl-es { font-size: 1.05rem; }
  .gl-ref { text-align: left; margin-top: .1rem; }
}

/* Impresión: fuera la barra de búsqueda y el índice de letras, que en papel
   no hacen nada. */
@media print {
  .gl-toolbar, .gl-count, .gl-atoz, .gl-top { display: none; }
  .gl-row { break-inside: avoid; }
}