/* Capa de presentacion.
 *
 * Todo lo de aqui se escribe una sola vez para los dos temas: los colores
 * salen de las variables --g-*, que declaran glosario.scss (claro) y
 * glosario-oscuro.scss (oscuro). Ningun color literal en este archivo.
 *
 * Los nueve matices de tema se calculan desde un unico tono --h que la
 * plantilla del listado pone en cada tarjeta. */

/* ---------- los nueve matices de tema ---------- */

/* Tabla unica de tonos del sistema de color. Antes vivia dentro de la plantilla
 * de la portada, asi que el color solo existia alli: en Temas y en la ficha las
 * etiquetas de categoria salian grises y el sistema no se percibia como sistema.
 * Aqui la declara un unico sitio y la consumen los tres: la plantilla de la
 * portada, la regla de los listados de abajo y filters/matices.lua para la ficha.
 *
 * Solo gira el tono. Saturacion y luminosidad son comunes (--g-cat-*), asi que el
 * contraste medido para la familia vale para los nueve y para los dos temas.
 *
 * validar.ps1 comprueba que cada categoria de taxonomia.yml tiene aqui su tono.
 */
:root {
  --h-fundamentos: 192;
  --h-aprendizaje-automatico: 252;
  --h-arquitecturas: 322;
  --h-modelos-de-lenguaje: 34;
  --h-procesamiento-del-lenguaje: 162;
  --h-recuperacion-de-informacion: 212;
  --h-seguridad-y-riesgos: 6;
  --h-etica-y-gobernanza: 288;
  --h-ia-agentica: 104;
}

/* La pastilla teñida, escrita una sola vez para los documentos y listados que
 * muestran categorias: fichas, laminas y tarjetas de la portada. */
.glosario-card-categorias .listing-category,
.quarto-title .quarto-category {
  padding: 0.05rem 0.5rem;
  border: 1px solid hsl(var(--h, 192) var(--g-cat-s) var(--g-cat-borde));
  border-radius: 999px;
  background: hsl(var(--h, 192) var(--g-cat-s) var(--g-cat-tinte));
  color: hsl(var(--h, 192) var(--g-cat-s) var(--g-cat-l));
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  opacity: 1;
  text-transform: uppercase;
}

/* ---------- base ---------- */

body {
  color: var(--g-tinta);
}

a {
  text-underline-offset: 0.15em;
}

.navbar {
  border-bottom: 1px solid var(--g-linea);
  box-shadow: var(--g-sombra);
}

.navbar-brand {
  font-family: var(--bs-font-serif, "Newsreader", Georgia, serif);
  font-size: 1.3rem;
  letter-spacing: -0.012em;
}

main.content {
  max-width: 78ch;
}

main.content:has(.quarto-listing),
main.content:has(.glosario-card-grid) {
  max-width: none;
}

/* La portada empezaba a 111 px del borde y la primera ficha no aparecia hasta
 * los 704: en una herramienta de consulta eso es medio scroll antes de ver nada
 * que consultar. Medido de donde salia el aire: el margen superior del propio
 * titular se colapsaba hacia fuera del bloque y se sumaba al de la columna. */
main.content:has(.hero-glosario) {
  padding-top: 0.4rem;
  margin-top: 0;
}

/* ---------- portada ---------- */

/* Sin recuadro: en pantalla ancha el rectangulo teñido dejaba media caja vacia
 * a la derecha del texto. El titular sostiene la portada por si solo. */
.hero-glosario {
  margin: 0 0 1.3rem;
  padding: 0 0 1.3rem;
  border-bottom: 1px solid var(--g-linea);
}

.hero-glosario h1 {
  max-width: 18ch;
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--g-tinta);
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
}

/* 58ch partia la entradilla en tres lineas y cada linea de mas aqui empuja las
 * fichas fuera de la pantalla. */
.hero-glosario p {
  max-width: 70ch;
  margin-bottom: 0.9rem;
  color: var(--g-tinta-2);
  font-size: 1.03rem;
}

.hero-glosario .btn {
  margin: 0.35rem 0.35rem 0.35rem 0;
}

.btn-primary {
  border-color: var(--g-marca);
  background-color: var(--g-marca);
  color: var(--g-paper);
}

.btn-outline-secondary {
  border-color: var(--g-marca);
  color: var(--g-marca);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
  border-color: var(--g-marca);
  background-color: var(--g-marca);
  color: var(--g-paper);
}

/* ---------- tarjetas de la portada ---------- */

.glosario-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.glosario-card-item {
  min-width: 0;
}

.glosario-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem 1.05rem 0.95rem;
  border: 1px solid var(--g-linea);
  border-radius: 0.55rem;
  background: var(--g-superficie);
  box-shadow: var(--g-sombra);
  color: inherit;
  text-decoration: none;
  transition:
    border-color 120ms ease,
    transform 120ms ease;
}

.glosario-card-link:hover,
.glosario-card-link:focus-visible {
  border-color: var(--g-marca);
  color: inherit;
  transform: translateY(-1px);
}

.glosario-card-cabecera {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 0.6rem;
}

/* El monograma sustituye a la imagen que una ficha de glosario nunca va a
 * tener: dice de que tema es y no exige buscar ni mantener ningun recurso. */
.glosario-monograma {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid hsl(var(--h) var(--g-cat-s) var(--g-cat-borde));
  border-radius: 0.4rem;
  background: hsl(var(--h) var(--g-cat-s) var(--g-cat-tinte));
  color: hsl(var(--h) var(--g-cat-s) var(--g-cat-l));
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.3rem;
  line-height: 1;
}

.glosario-card-title {
  margin: 0.15rem 0 0;
  color: var(--g-tinta);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.22;
}

.glosario-card-description {
  margin: 0;
  color: var(--g-tinta-2);
  font-size: 0.94rem;
}

.glosario-card-sinonimos {
  margin: 0.5rem 0 0;
  color: var(--g-tinta-3);
  font-size: 0.85rem;
}

.glosario-card-categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

/* ---------- Temas: nueve secciones, una por tema ---------- */

/* Cada seccion lleva el matiz de su tema. No es decoracion: al agrupar, las
 * fichas ya no muestran su etiqueta de categoria dentro de la seccion -seria
 * repetir nueve veces lo que dice el epigrafe-, asi que sin esto la pagina de
 * Temas se quedaria sin el color que la fase 2 acaba de darle. Aqui el color
 * identifica la seccion entera. */
#fundamentos { --h: var(--h-fundamentos); }
#aprendizaje-automatico { --h: var(--h-aprendizaje-automatico); }
#arquitecturas { --h: var(--h-arquitecturas); }
#modelos-de-lenguaje { --h: var(--h-modelos-de-lenguaje); }
#procesamiento-del-lenguaje { --h: var(--h-procesamiento-del-lenguaje); }
#recuperacion-de-informacion { --h: var(--h-recuperacion-de-informacion); }
#seguridad-y-riesgos { --h: var(--h-seguridad-y-riesgos); }
#etica-y-gobernanza { --h: var(--h-etica-y-gobernanza); }
#ia-agentica { --h: var(--h-ia-agentica); }

/* La marca de color de la seccion. Un filete teñido de lado a lado quedaba
 * invisible con la luminosidad del sistema, y subirsela habria convertido la
 * pagina en nueve rayas de colores; asi que el matiz va concentrado en un tramo
 * corto y a plena intensidad, sobre el filete gris que ya separa los epigrafes.
 * La clase la pone el propio epigrafe en temas.qmd y Quarto la traslada a la
 * seccion, de modo que basta una regla para las nueve. */
main.content .tema > h2 {
  position: relative;
}

main.content .tema > h2::before {
  position: absolute;
  top: -2px;
  left: 0;
  width: 2.6rem;
  height: 3px;
  background: hsl(var(--h) var(--g-cat-s) var(--g-cat-l));
  content: "";
}

/* Cuantas fichas tiene el tema. Vuelve el dato que llevaba la barra lateral de
 * categorias antes de agrupar; ahora viaja dentro del epigrafe, asi que el
 * sumario lateral lo muestra tambien sin trabajo extra. */
.recuento-tema {
  color: var(--g-tinta-3);
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

/* En el epigrafe se va al extremo, alineado con el final de la medida, para que
 * los nueve numeros formen columna y se puedan comparar de un vistazo. El ancla
 * que Quarto añade al pasar el raton queda despues, sin descolocar nada. */
main.content .tema > h2 {
  display: flex;
  align-items: baseline;
}

main.content .tema > h2 .recuento-tema {
  margin-left: auto;
  padding-left: 1rem;
}

/* En el sumario, pegado a su tema. */
nav[role="doc-toc"] .recuento-tema {
  margin-left: 0.35rem;
  font-size: 0.68rem;
}

/* La frase que taxonomia.yml guarda para el tema, insertada por
 * filters/temas.lua. Dice que se va a encontrar quien entre en la seccion. */
.frase-de-tema {
  max-width: 62ch;
  margin: 0 0 1.1rem;
}

.frase-de-tema p {
  margin: 0;
  color: var(--g-tinta-2);
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.45;
}

/* Las laminas del Atlas que declaran el tema, tambien de filters/temas.lua.
 * Van fuera del listado y del recuento: son otro tipo de pagina. */
.atlas-en-tema {
  margin: -0.4rem 0 1.3rem;
}

.atlas-en-tema-rotulo {
  margin: 0 0 0.45rem;
  color: var(--g-tinta-3);
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.atlas-miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.8rem;
  max-width: 46rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.atlas-miniaturas a {
  display: block;
  color: var(--g-tinta-2);
  font-size: 0.84rem;
  line-height: 1.3;
  text-decoration: none;
}

.atlas-miniaturas img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  margin-bottom: 0.35rem;
  border: 1px solid var(--g-linea);
  border-radius: 0.35rem;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.atlas-miniaturas a:hover img,
.atlas-miniaturas a:focus-visible img {
  border-color: var(--g-marca);
  box-shadow: 0 4px 14px rgb(21 50 58 / 12%);
}

.atlas-miniaturas a:hover span,
.atlas-miniaturas a:focus-visible span {
  color: var(--g-marca);
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .atlas-miniaturas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Dos columnas. El listado nativo por defecto reparte cada entrada en tres
 * bandas -imagen, cuerpo, metadatos- y aqui no hay ni imagen ni fecha que
 * mostrar, asi que dejaba media anchura en blanco. Se apila y se compacta: lo
 * que importa de cada entrada es el termino y de que va. */
.lista-de-tema .list {
  columns: 2;
  column-gap: 2.4rem;
}

.lista-de-tema .quarto-post {
  display: block;
  /* Que un termino no se parta por la mitad al saltar de columna. */
  break-inside: avoid;
  margin: 0 0 0.85rem;
  padding: 0;
  border: 0;
}

.lista-de-tema .quarto-post .body {
  padding: 0;
}

/* Va vacia: sin imagen, sin autor y sin fecha, solo reservaba sitio. */
.lista-de-tema .quarto-post .metadata {
  display: none;
}

.lista-de-tema .listing-title {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.lista-de-tema .listing-title a {
  color: var(--g-tinta);
  text-decoration: none;
}

.lista-de-tema .listing-title a:hover,
.lista-de-tema .listing-title a:focus-visible {
  color: var(--g-marca);
  text-decoration: underline;
}

.lista-de-tema .listing-description {
  color: var(--g-tinta-2);
  font-size: 0.88rem;
}

.lista-de-tema .listing-description a {
  color: inherit;
  text-decoration: none;
}

.lista-de-tema .listing-description p {
  margin: 0.1rem 0 0;
  line-height: 1.4;
}

/* ---------- aviso canonico ---------- */

.aviso-glosario {
  display: grid;
  gap: 1.1rem 2.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1rem 0 0.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--g-tinta);
}

.aviso-glosario h3 {
  margin: 0 0 0.3rem;
  color: var(--g-tinta-3);
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aviso-glosario p {
  margin: 0;
  color: var(--g-tinta-2);
  font-size: 0.93rem;
}

.aviso-glosario .cita-sugerida {
  color: var(--g-tinta);
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.76rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* ---------- indice A-Z ---------- */

/* Deja de ser una tabla de tres columnas y pasa a ser un indice: con las
 * remisiones de los sinonimos son 222 entradas para 72 fichas, y arrastrar la
 * definicion breve en cada fila daba una pagina inmanejable. El reparto queda
 * asi: la portada para descubrir, Temas para explorar con contexto, el A-Z para
 * localizar. La definicion sigue a un clic. */

.az-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin: 0 0 1.4rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--g-linea);
}

.az-rail a {
  min-width: 1.7rem;
  padding: 0.15rem 0;
  border-radius: 0.25rem;
  color: var(--g-tinta-2);
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.82rem;
  text-align: center;
  text-decoration: none;
}

.az-rail a:hover,
.az-rail a:focus-visible {
  background: var(--g-marca-tenue);
  color: var(--g-marca);
}

.az-lista {
  columns: 3;
  column-gap: 2.2rem;
}

.az-entrada {
  break-inside: avoid;
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Sin salto de columna forzado en cada letra: probado, dejaba media pagina en
 * blanco -la B, con cinco entradas, se comia una columna entera-. */
.az-abre-letra {
  margin-top: 1.1rem;
}

.az-lista > .az-entrada:first-child {
  margin-top: 0;
}

.az-letra {
  display: block;
  margin-bottom: 0.25rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--g-linea);
  color: var(--g-marca);
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  scroll-margin-top: 5rem;
}

.az-entrada .listing-title a {
  color: var(--g-tinta);
  text-decoration: none;
}

.az-entrada .listing-title a:hover,
.az-entrada .listing-title a:focus-visible {
  color: var(--g-marca);
  text-decoration: underline;
}

/* Presentes en el HTML porque son las columnas que declara filter-ui, pero no se
 * pintan: un indice de 222 entradas con la definicion en cada fila no es un
 * indice. El filtro si las lee. */
.az-entrada .listing-description,
.az-entrada > .listing-sinonimos:not(.az-remision) {
  display: none;
}

.az-entrada .az-remision {
  color: var(--g-tinta-3);
}

.az-flecha {
  color: var(--g-tinta-3);
  font-size: 0.85rem;
}

/* ---------- filtro y paginacion ---------- */

/* Si la pagina anuncia que se puede buscar, el sitio donde se busca no puede
 * ser un control de 168 px arrinconado a la derecha. Ocupa la medida de lectura,
 * se pone donde cae la vista y su texto dice que admite. */
.listing-actions-group {
  margin: 0 0 1.5rem;
}

/* Sin esto no crece: es un elemento flexible dentro de la barra de acciones del
 * listado, y ahi nada se estira por su cuenta. */
.quarto-listing-filter {
  flex: 1 1 auto;
  /* Quarto lo empuja a la derecha con un margen automatico; alineado a la
   * izquierda queda debajo de la linea que lo explica, y no en la esquina
   * opuesta a ella. */
  margin-left: 0;
  width: 100%;
  max-width: 34rem;
}

.quarto-listing-filter .input-group-text {
  border-color: var(--g-linea);
  background: var(--g-superficie);
  color: var(--g-tinta-3);
}

.quarto-listing-filter .form-control {
  padding: 0.55rem 0.75rem;
  border-color: var(--g-linea);
  background: var(--g-superficie);
  color: var(--g-tinta);
  font-size: 1rem;
}

.quarto-listing-filter .form-control::placeholder {
  color: var(--g-tinta-3);
  opacity: 1;
}

.quarto-listing-filter .form-control:focus {
  border-color: var(--g-marca);
  box-shadow: 0 0 0 3px var(--g-marca-tenue);
}

/* El ejemplo que antes iba en un parrafo suelto: ahora acompaña al buscador. */
/* Empieza aqui y los demas recorridos: una lista ordenada, no otra cuadricula
 * de tarjetas. El orden es el contenido, asi que el numero se ve y el motivo va
 * en la misma linea. */
.empieza-aqui ol,
.recorrido ol {
  margin: 1.2rem 0 1.4rem;
  padding-left: 1.6rem;
}

.empieza-aqui li,
.recorrido li {
  margin-bottom: 0.7rem;
  padding-left: 0.2rem;
}

.empieza-aqui li::marker,
.recorrido li::marker {
  color: var(--g-marca);
  font-weight: 600;
}

.empieza-aqui li > p > a:first-child,
.empieza-aqui li > a:first-child,
.recorrido li > p > a:first-child,
.recorrido li > a:first-child {
  font-weight: 600;
}

/* Etapas de un recorrido: cada una abre con su pregunta y la numeracion sigue
 * de una a otra. Quarto envuelve pregunta y lista en un section.etapa. */
.empieza-aqui section.etapa > h2,
.recorrido section.etapa > h2 {
  margin: 1.9rem 0 0;
  font-size: 1.3rem;
}

.empieza-aqui section.etapa:first-child > h2,
.recorrido section.etapa:first-child > h2 {
  margin-top: 0.8rem;
}

.empieza-aqui section.etapa > ol,
.recorrido section.etapa > ol {
  margin-top: 0.7rem;
}

.pista-busqueda {
  margin: 0 0 0.4rem;
  color: var(--g-tinta-3);
  font-size: 0.88rem;
}

.pista-busqueda p {
  margin: 0;
}

.page-link {
  color: var(--g-marca);
}

.page-item.active .page-link {
  border-color: var(--g-marca);
  background-color: var(--g-marca);
  color: var(--g-paper);
}

/* ---------- ficha ---------- */

#title-block-header .quarto-title h1.title {
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.quarto-title .quarto-categories {
  gap: 0.35rem;
  padding-bottom: 0.6rem;
}


/* La definicion breve del frontmatter, que es la entradilla de la ficha. */
#title-block-header .description {
  max-width: 60ch;
  margin: 0.4rem 0 0.9rem;
  padding-left: 1rem;
  border-left: 2px solid var(--g-marca);
  color: var(--g-tinta);
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.45;
}

/* El bloque de metadatos de Quarto gastaba dos filetes y una fila entera para
 * una sola fecha, que ahora viaja como distintivo junto al estado. Hace falta
 * el id para ganar a la regla del tema, que es mas especifica. */
#title-block-header.quarto-title-block.default .quarto-title-meta {
  display: none;
}

/* Distintivos de estado y tipo, que emite filters/estado.lua. */
.estado-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
}

.estado-ficha .distintivo {
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--g-linea);
  border-radius: 999px;
  color: var(--g-tinta-3);
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

.estado-ficha .distintivo-borrador {
  border-color: var(--g-acento);
  color: var(--g-acento);
}

.sinonimos {
  margin: 0 0 1.6rem;
  color: var(--g-tinta-3);
  font-size: 0.93rem;
}

.sinonimos p {
  margin: 0;
}

.sinonimos strong {
  color: var(--g-tinta-3);
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Lo inserta filters/atlas.lua al final de la ficha, solo cuando alguna
 * lamina la enlaza. El filete superior la separa del cuerpo, no del sumario:
 * es la unica marca de "esto sigue en otro documento" que tiene una ficha. */
.atlas-relacionado {
  margin: 1.8rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--g-linea-2);
  color: var(--g-tinta-3);
  font-size: 0.88rem;
}

.atlas-relacionado strong {
  color: var(--g-tinta-3);
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.atlas-relacionado a {
  color: var(--g-marca);
}

main.content h2 {
  margin-top: 2rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--g-linea-2);
  font-size: 1.32rem;
}

main.content h3:not(.glosario-card-title):not(.card-title):not(.listing-title) {
  margin-top: 1.3rem;
  color: var(--g-tinta-3);
  font-family: var(--bs-font-sans-serif, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---------- sumario lateral ---------- */

#quarto-margin-sidebar .quarto-secondary-nav-title,
nav[role="doc-toc"] > h2 {
  color: var(--g-tinta-3);
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

nav[role="doc-toc"] ul > li > a {
  border-left: 2px solid var(--g-linea-2);
  color: var(--g-tinta-2);
}

nav[role="doc-toc"] ul > li > a.active {
  border-left-color: var(--g-marca);
  color: var(--g-marca);
  font-weight: 400;
}

.toc-actions {
  font-size: 0.8rem;
}

/* En las paginas sin sumario, Quarto manda estas acciones al centro del pie.
 * Que vayan en linea, no apiladas: el pie no debe crecer por dos enlaces. */
.nav-footer-center .toc-actions ul {
  display: flex;
  gap: 1.4rem;
  margin: 0;
}

.toc-actions a.toc-action {
  color: var(--g-tinta-3);
}

.toc-actions a.toc-action:hover {
  color: var(--g-marca);
}

/* ---------- atlas visual ---------- */

/* Las laminas necesitan mucha mas anchura que una ficha. El texto explicativo
 * conserva, en cambio, la medida de lectura normal del glosario. */
main.content:has(.atlas-visual) {
  max-width: none;
  padding-inline: clamp(1rem, 2.5vw, 2.5rem);
}

.atlas-visual {
  width: min(100%, 1500px);
  margin-inline: auto;
}

.atlas-visual > p,
.atlas-texto {
  max-width: 78ch;
}

.atlas-lamina {
  margin: 1.5rem 0 0.65rem;
}

.atlas-lamina .quarto-figure {
  margin: 0;
}

.atlas-lamina img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--g-linea);
  border-radius: 0.45rem;
  background: #fff;
  box-shadow: 0 8px 28px rgb(21 50 58 / 10%);
}

.atlas-lamina a:focus-visible img {
  outline: 3px solid var(--g-marca);
  outline-offset: 4px;
}

.atlas-acciones {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2rem;
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.76rem;
}

.atlas-texto {
  margin-right: auto;
}

/* Una URL o un DOI largos no tienen espacios por donde partirse: en el movil
 * empujaban la pagina a lo ancho. Empezo arreglandose solo en las laminas; en
 * octubre de 2026 desbordaban asi 45 de 163 paginas, casi todas fichas. Lo
 * mismo vale para una direccion escrita en el texto entre < >, que pandoc
 * convierte en enlace con la clase uri. */
#refs a,
a.uri {
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  main.content:has(.atlas-visual) {
    padding-inline: 0.75rem;
  }

  .atlas-lamina {
    margin-inline: -0.35rem;
  }

  .atlas-acciones {
    justify-content: flex-start;
  }
}

/* ---------- pie ---------- */

.nav-footer {
  padding-block: 0.35rem;
  border-top: 1px solid var(--g-linea);
  color: var(--g-tinta-3);
  font-size: 0.8rem;
}

.nav-footer p {
  margin: 0;
}

.nav-footer .nav-link {
  padding-block: 0;
}

.nav-footer a {
  color: var(--g-tinta-2);
}

/* ---------- adaptacion ---------- */

@media (max-width: 991px) {
  .glosario-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .lista-de-tema .list {
    columns: 1;
  }

  .az-lista {
    columns: 2;
  }
}

@media (max-width: 767px) {
  .hero-glosario {
    margin-top: 0.4rem;
    padding: 1.4rem;
    border-radius: 0.7rem;
  }

  .hero-glosario h1 {
    font-size: 2.2rem;
  }

  .glosario-card-grid {
    grid-template-columns: 1fr;
  }

  .az-lista {
    columns: 1;
  }

  /* minmax(0, ...) y no 1fr: con 1fr la URL de la cita sugerida, que no se
   * parte, fijaba el ancho minimo de la columna y desbordaba a 320 px. */
  .aviso-glosario {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- guia de uso ---------- */

/* La pinta assets/guia.js. El velo recoge el clic fuera de la tarjeta, que
 * cierra la guia; el foco oscurece el resto de la pagina con su propia sombra,
 * asi que el destino queda a la vista sin tocar su markup. Por encima de la
 * barra fija, que tambien puede ser destino. */
.guia-velo {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.guia-velo-oscuro {
  background: var(--g-velo);
}

.guia-foco {
  position: fixed;
  z-index: 2001;
  border: 2px solid var(--g-marca);
  border-radius: var(--bs-border-radius, 0.5rem);
  box-shadow: 0 0 0 100vmax var(--g-velo);
  pointer-events: none;
  transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.guia-tarjeta {
  position: fixed;
  z-index: 2002;
  width: min(24rem, calc(100vw - 24px));
  padding: 1rem 1.1rem 0.9rem;
  border: 1px solid var(--g-linea);
  border-radius: var(--bs-border-radius, 0.5rem);
  background: var(--g-superficie);
  color: var(--g-tinta);
  box-shadow: var(--g-sombra);
}

.guia-tarjeta.guia-centrada {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.guia-cabecera {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Que parte de la guia es: sin el, la de la ficha parecia otra guia distinta. */
.guia-rotulo {
  flex: 1;
  color: var(--g-marca);
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guia-contador {
  color: var(--g-tinta-3);
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.72rem;
}

.guia-cerrar {
  padding: 0 0.3rem;
  border: 0;
  background: none;
  color: var(--g-tinta-2);
  font-size: 1.4rem;
  line-height: 1;
}

.guia-tarjeta .guia-titulo {
  margin: 0.35rem 0 0.4rem;
  font-size: 1.2rem;
}

.guia-texto p {
  margin-bottom: 0.6rem;
  color: var(--g-tinta-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

.guia-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.guia-vuelve {
  font-size: 0.9rem;
}

.guia-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-left: auto;
}

/* El enlace de la barra que abre la guia, en el color de marca: gris, junto al
 * conmutador de tema, pasaba por un adorno mas. Es una herramienta de la barra
 * para que se vea tambien en el movil, y Quarto pinta las herramientas solo con
 * su icono: el rotulo se toma de su title, que es el `text` de _quarto.yml, asi
 * que se escribe en un solo sitio. Sin el rotulo, un interrogante solo se leia
 * como un adorno. */
.navbar .quarto-navigation-tool[href*="tour=1"] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--g-marca);
  font-size: 1.15rem;
  text-decoration: none;
  white-space: nowrap;
}

.navbar .quarto-navigation-tool[href*="tour=1"]::after {
  content: attr(title);
  font-family: var(--bs-font-sans-serif, sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
}

/* En un movil corriente (390 px) el rotulo completo empujaba el buscador a una
 * segunda linea y desbordaba la pagina; ahi se acorta en vez de quitarse. */
@media (max-width: 429.98px) {
  .navbar .quarto-navigation-tool[href*="tour=1"]::after {
    content: "Guía";
  }
}

/* Por debajo de 360 px ni eso cabe: queda el icono, con su title. */
@media (max-width: 359.98px) {
  .navbar .quarto-navigation-tool[href*="tour=1"]::after {
    content: none;
  }
}

.navbar .quarto-navigation-tool[href*="tour=1"]:hover,
.navbar .quarto-navigation-tool[href*="tour=1"]:focus-visible {
  color: var(--g-tinta);
}

/* ---------- transicion entre paginas ---------- */

/* Esto no es de Bootstrap: Bootstrap anima componentes -colapsables, modales-,
 * no la navegacion entre documentos. Lo que da continuidad aqui es la View
 * Transitions API del propio navegador: una regla, cero JavaScript, y donde no
 * esta soportada sencillamente no ocurre nada. La barra conserva su identidad
 * entre paginas, asi que no parpadea al saltar de ficha en ficha. */
@view-transition {
  navigation: auto;
}

.navbar {
  view-transition-name: barra-glosario;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 170ms;
  animation-timing-function: ease;
}

/* Con la barra fija, un salto a un ancla dejaba el epigrafe debajo de ella. */
main.content h2,
main.content h3,
main.content section {
  scroll-margin-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  * {
    transition: none !important;
  }
}

/* ---------- aviso de cookies ----------
 * Mismo texto, posicion y comportamiento que el de la web del autor: una barra
 * baja y fija abajo, que desaparece en cuanto se decide. Aceptar y Rechazar
 * tienen el mismo tamano: rechazar no puede costar mas que aceptar.
 * Colores del glosario, asi que se adapta solo al tema claro y al oscuro.
 * Marcado y logica: _consentimiento.html. */
.banner-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  padding: 0.6rem 1rem;
  background: var(--g-superficie);
  color: var(--g-tinta-2);
  border-top: 1px solid var(--g-linea);
  box-shadow: var(--g-sombra);
  font-size: 0.875rem;
  line-height: 1.4;
}
/* display:flex taparia el atributo hidden */
.banner-cookies[hidden] {
  display: none;
}
.banner-cookies p {
  margin: 0;
  text-align: center;
}
.banner-cookies a {
  color: var(--g-marca);
}
.banner-cookies-botones {
  display: flex;
  gap: 0.5rem;
}
.banner-cookies button {
  font: inherit;
  font-weight: 600;
  min-width: 6.5rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--g-linea);
  border-radius: 4px;
  cursor: pointer;
}
.banner-cookies .banner-cookies-aceptar {
  background: var(--g-marca);
  border-color: var(--g-marca);
  color: var(--g-paper);
}
.banner-cookies .banner-cookies-rechazar {
  background: var(--g-hundido);
  color: var(--g-tinta);
}
.banner-cookies button:focus-visible {
  outline: 2px solid var(--g-acento);
  outline-offset: 2px;
}
@media print {
  .banner-cookies {
    display: none !important;
  }
}