/* glosario.css — la vista de /glosario/ (P5, 2026-09-28).
 *
 * Este fichero NO declara tokens: `tokens.css` es su unico origen, y lo comprueba
 * `tests/web/test_glosario.py::GlosarioCss`. Un token sin respaldo no da error, invalida la
 * declaracion entera, y la entrada se queda sin fondo, sin borde o sin tamano sin que nada lo
 * diga. Por eso aqui no hay ni un hex, ni un color con nombre, ni un `rgb()`.
 *
 * TODO lo que hay aqui cuelga de `.herramientas`, el contenedor que pone `seo._estatica` en la
 * pagina del glosario (el mismo que usan las nueve de /herramientas/), y de `.glosario-…` para lo
 * que es solo de aqui. Ni un selector suelto: /empresas/ usa las mismas clases de prosa que esta
 * pagina, y un `h1` global en esta hoja cambiaria el titulo de las mil cuatrocientas notas.
 *
 * El aire y los titulos NO se repiten aqui: los pone `catalogo.css`, que esta pagina tambien carga
 * por el mismo camino que el indice de /herramientas/. Lo que se pinta aqui es lo que el
 * glosario tiene de suyo: el campo de buscar, el indice de letras, las entradas del `<dl>` y la
 * linea de IA.
 *
 * En tema oscuro la elevacion NO es una sombra (un negro sobre negro no se ve): es mas luz de
 * superficie, un `--ds-superficie-1` que sube a `--ds-superficie-2` al apuntar, mas un
 * `--ds-brillo-superior` en el canto. El alzado son dos pixeles hacia arriba, no mas: la entrada
 * esta en reposo casi todo el tiempo y un recorrido largo se lee como un juego, no como una
 * interfaz.
 */

/* ——— el campo de buscar ———
   Mismo ancho y mismo alto que el del indice de /herramientas/, aqui declarado en su bloque
   porque esta hoja no depende de `catalogo.css`: si alguien carga el glosario sin el catalogo, el
   campo tiene que seguir siendo un campo y no un renglon de texto. El `min-height` de 44 px es lo
   que lo hace pulsable con el dedo; sin el, a 390 px hay que apuntar entre lineas. */
.herramientas .glosario-busca {
  margin: 0 0 var(--ds-esp-5);
}

.herramientas #glosario-buscar {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--ds-esp-4);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-m);
  background: var(--ds-superficie-1);
  color: var(--hueso);
  font: 400 var(--ds-cuerpo)/1.2 var(--prosa);
  transition: border-color var(--ds-t-media) var(--ds-curva),
              background-color var(--ds-t-media) var(--ds-curva);
}

.herramientas #glosario-buscar::placeholder {
  color: var(--hueso-3);
}

.herramientas #glosario-buscar:hover {
  border-color: var(--ds-borde-fuerte);
}

/* El foco del campo se marca encendiendo su BORDE, no con un contorno: el contorno lo dibuja
   tambien `catalogo.css` en `.herramientas :focus-visible`, y aqui el borde es lo que separa el
   campo del fondo. Un `outline: none` sin sustituto seria un campo que no dice donde estas. */
.herramientas #glosario-buscar:focus-visible {
  border-color: var(--ds-borde-activo);
  background: var(--ds-superficie-2);
}

/* El contador va debajo del campo y en el apagado: es un dato de servicio (cuantos terminos
   quedan), no un titulo. El `role="status"` del HTML lo hace anunciar sin pedirlo. */
.herramientas #glosario-cuenta {
  margin: 0 0 var(--ds-esp-5);
  color: var(--hueso-3);
  font: 400 var(--ds-pie)/1.5 var(--prosa);
}

/* ——— el indice de letras ———
   Una fila de letras pegadas, envueltas con `flex-wrap`: a 390 px caben unas veinte y el resto
   pasa a la segunda linea, en vez de provocar el scroll horizontal que un `nowrap` traeria. Cada
   letra es un cuadrado de 44 px —el mismo minimo que el campo— porque son el camino mas corto
   para llegar a un termino concreto y se pulsan con el dedo. */
.herramientas .glosario-letras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-esp-2);
  margin: 0 0 var(--ds-esp-9);
}

.herramientas .glosario-letras a {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--ds-esp-3);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-s);
  background: var(--ds-superficie-1);
  color: var(--hueso-2);
  font: 500 var(--ds-rotulo)/1 var(--datos);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--ds-t-media) var(--ds-curva),
              border-color var(--ds-t-media) var(--ds-curva);
}

.herramientas .glosario-letras a:hover,
.herramientas .glosario-letras a:focus-visible {
  border-color: var(--ds-borde-activo);
  background: var(--ds-superficie-2);
  color: var(--hueso);
}

/* ——— los grupos de letra ———
   Una seccion por letra, con la separacion entre ellas en AIRE y no en una linea: un filete
   entre «A» y «C» parte el glosario en dos listas y hace que se lea como un indice de dos
   paginas. La separacion la pone el `margin`, que es `--ds-esp-9`. */
.herramientas .glosario-letra {
  margin: 0 0 var(--ds-esp-8);
}

.herramientas .glosario-letra:last-of-type {
  margin-bottom: 0;
}

/* La letra del grupo es grande y en brasa: es el punto de referencia dentro del bloque, y bajarla
   a cuerpo de texto la convierte en un termino mas, que es justo lo que no es. */
.herramientas .glosario-letra h2 {
  margin: 0 0 var(--ds-esp-4);
  color: var(--catodo);
  font: 600 var(--ds-titulo-2)/var(--ds-linea-titulo) var(--condensada);
  letter-spacing: var(--tracking-display);
}

.herramientas .glosario-letra dl {
  margin: 0;
}

/* ——— la entrada del diccionario ———
   La entrada no necesita separacion propia: en un diccionario las palabras van unas de otras, con
   la letra (la `A` de «Amortización») ya marcada por el grupo de arriba. Se separa de la siguiente
   con un filete POR ENCIMA del `dt`, que es donde empieza la palabra y no en medio de la caja; y el
   `dt` va en condensada, mas grande que su definicion, porque es el termino: lo que se busca, y lo
   que el indice de letras y el buscador prometen enseñar. */
.herramientas .glosario-entrada {
  padding: var(--ds-esp-4) 0;
  border-top: 1px solid var(--ds-borde);
}

.herramientas .glosario-entrada:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.herramientas .glosario-entrada dt {
  margin: 0;
  color: var(--hueso);
  font: 600 var(--ds-titulo-3)/var(--ds-linea-titulo) var(--condensada);
  letter-spacing: var(--tracking-texto);
}

.herramientas .glosario-entrada dt a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ds-t-rapida) var(--ds-curva);
}

.herramientas .glosario-entrada dt a:hover,
.herramientas .glosario-entrada dt a:focus-visible {
  color: var(--catodo);
}

.herramientas .glosario-entrada dd {
  margin: 0 0 0 var(--ds-esp-3);
  padding: 0;
  color: var(--hueso-2);
  font: 400 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--prosa);
}

.herramientas .glosario-entrada dd p {
  margin: 0;
  color: inherit;
  overflow-wrap: anywhere;   /* una cifra o un nombre largo no empuja la pagina a 390 px */
}

/* «Aparece en: …» va en el apagado y por debajo, con el filete de las fuentes en el mismo tono.
   Es una referencia, no parte de la definicion: bajarla al cuerpo de la prosa haria que se leyera
   como una frase mas y el visitante no veria que esas son las fichas donde se explica. */
.herramientas .glosario-entrada dd .glosario-fuentes {
  margin-top: var(--ds-esp-2);
  color: var(--hueso-3);
  font-size: var(--ds-pie);
  line-height: var(--ds-linea-cuerpo);
}

.herramientas .glosario-entrada dd .glosario-fuentes a {
  color: var(--catodo);
  text-decoration: none;
  border-bottom: 1px solid var(--ds-borde);
  transition: border-color var(--ds-t-rapida) var(--ds-curva);
}

.herramientas .glosario-entrada dd .glosario-fuentes a:hover,
.herramientas .glosario-entrada dd .glosario-fuentes a:focus-visible {
  border-bottom-color: var(--ds-borde-activo);
}

/* «Leer en el Cerebro: …». Es el PUERTE a la nota que desarrolla el termino, y va por encima de
   «Aparece en» porque es la que lleva a otro sitio de verdad —la biblioteca— y no a la ficha que
   ya se esta leyendo. Comparte el tratamiento de referencia (apagado, filete, mismo aire) para que
   las dos lineas se lean como la misma clase de cosa y no como un bloque de texto suelto. */
.herramientas .glosario-entrada dd .glosario-puente {
  margin-top: var(--ds-esp-2);
  font-size: var(--ds-pie);
  line-height: var(--ds-linea-cuerpo);
}

.herramientas .glosario-entrada dd .glosario-puente a {
  color: var(--catodo);
  text-decoration: none;
  border-bottom: 1px solid var(--ds-borde);
  transition: border-color var(--ds-t-rapida) var(--ds-curva);
}

.herramientas .glosario-entrada dd .glosario-puente a:hover,
.herramientas .glosario-entrada dd .glosario-puente a:focus-visible {
  border-bottom-color: var(--ds-borde-activo);
}

/* ——— la entradilla y la linea de IA ———
   La entradilla es lo que se lee antes de la lista, asi que va en cuerpo grande y con la medida
   corta: a 80 caracteres por linea en un bloque de 1200 px no se lee: se escanea mirando. La linea
   de IA es lo ULTIMO de la pagina y va en el apagado con un filete encima: es un aviso, no una
   nota al pie de la pagina anterior. */
.herramientas .glosario-entradilla {
  max-width: 60ch;
  margin: 0 0 var(--ds-esp-6);
  color: var(--hueso-2);
  font: 400 var(--ds-cuerpo-grande)/var(--ds-linea-cuerpo) var(--prosa);
}

.herramientas .glosario-ia {
  margin: var(--ds-esp-9) 0 0;
  padding-top: var(--ds-esp-5);
  border-top: 1px solid var(--ds-borde);
  color: var(--hueso-3);
  font: 400 var(--ds-pie)/var(--ds-linea-cuerpo) var(--prosa);
}

/* ——— el foco ———
   `:focus-visible` y no `:focus`: con `outline: none` + `:focus` el contorno tambien aparece al
   pinchar con el raton, y en una lista de cuarenta terminos eso es un recuadro fantasma en la
   entrada que el visitante acaba de tocar. Aqui el foco sale con el teclado, que es cuando hace
   falta, y el campo de buscar se queda con su borde (arriba). */
.herramientas :focus-visible {
  outline: 2px solid var(--catodo);
  outline-offset: 3px;
  border-radius: var(--ds-radio-s);
}

/* ——— la valvula del movimiento ———
   Reduce el movimiento, no el contenido: la entrada sigue encendiendo al apuntarla, y lo que se
   apaga es el travel. Sin este bloque, quien tiene `prefers-reduced-motion` ve cuarenta terminos
   que cambian de color en cada paso del raton, y eso no es decoracion para quien ha pedido que el
   sitio no se mueva. */
@media (prefers-reduced-motion: reduce) {
  .herramientas *,
  .herramientas *::before,
  .herramientas *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}