/* glosario.css — Glosario técnico: una sola página rica (categorías + entradas + buscador). */

.glos-wrap { max-width: 1040px; padding-top: var(--sp-7); }

/* Buscador */
.glos-search {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-4);
  border: var(--bw-1) solid var(--border); border-radius: var(--radius-control);
  background: var(--bg-surface); color: var(--text-muted);
  position: sticky; top: 76px; z-index: 4;
  margin-bottom: var(--sp-6);
}
.glos-search svg { flex: 0 0 auto; color: var(--text-muted); }
.glos-search input {
  flex: 1; border: 0; outline: none; background: transparent;
  padding: var(--sp-3) 0; font-size: var(--fs-base, 1rem); font-family: inherit; color: var(--text-primary);
}
.glos-noresults { color: var(--text-muted); font-size: var(--fs-sm); }

/* Categorías */
.glos-cat { margin-bottom: var(--sp-8); }
.glos-cat__h {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em;
  color: var(--selection-indicator); font-weight: 600;
  padding-bottom: var(--sp-2); margin: 0 0 var(--sp-3);
  border-bottom: var(--bw-1) solid var(--border-subtle);
}
.glos-cat__h svg { flex: 0 0 auto; }

/* Entradas */
.glos-entry {
  display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-5); align-items: start;
  padding: var(--sp-5) 0;
  border-bottom: var(--bw-1) solid var(--border-subtle);
  scroll-margin-top: 84px; /* que el ancla no quede bajo el navbar sticky */
}
.glos-entry:last-child { border-bottom: 0; }

/* Figura: esquema SVG o icono de categoría */
.glos-entry__fig {
  display: flex; align-items: center; justify-content: center;
  width: 88px; aspect-ratio: 100 / 72;
  border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-control);
  background: var(--bg-raised); overflow: hidden;
}
.gfig { width: 100%; height: 100%; color: var(--text-muted); display: block; }
.gfig--cat { color: var(--selection-indicator); }
.gfig--cat svg { width: 30px; height: 30px; }
.gf-s   { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gf-a   { fill: none; stroke: var(--selection-indicator); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gf-af  { fill: color-mix(in srgb, var(--selection-indicator) 20%, transparent); stroke: var(--selection-indicator); stroke-width: 2; }
.gf-soft{ fill: color-mix(in srgb, currentColor 12%, transparent); stroke: none; }

/* Foto real a la derecha de la descripción (SVG · texto · foto) */
.glos-entry--foto { grid-template-columns: 88px 1fr 240px; }
.glos-entry__foto { margin: 0; align-self: start; }
.glos-entry__foto img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-control);
}
.glos-entry__foto figcaption { margin-top: var(--sp-2); font-size: var(--fs-xs, .75rem); color: var(--text-muted); }

/* Aparición suave al hacer scroll (progressive enhancement: solo con JS via .glos-reveal;
   sin JS o con reduced-motion, todo visible) */
.glos-reveal .glos-entry { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.glos-reveal .glos-entry.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .glos-reveal .glos-entry { opacity: 1; transform: none; transition: none; } }

@media (max-width: 760px) {
  .glos-entry--foto { grid-template-columns: 88px 1fr; }
  .glos-entry__foto { grid-column: 1 / -1; max-width: 360px; margin-top: var(--sp-2); }
}
@media (max-width: 560px) {
  .glos-entry, .glos-entry--foto { grid-template-columns: 64px 1fr; gap: var(--sp-4); }
  .glos-entry__fig { width: 64px; }
}
.glos-entry__t { font-size: var(--fs-lg, 1.15rem); margin: 0 0 var(--sp-2); }
.glos-anchor { color: var(--text-primary); text-decoration: none; }
.glos-anchor:hover { color: var(--link); }
.glos-anchor::before { content: '#'; color: var(--text-muted); opacity: 0; margin-right: .15em; font-weight: 400; }
.glos-entry:hover .glos-anchor::before, .glos-entry:target .glos-anchor::before { opacity: .5; }
.glos-entry__def { color: var(--text-secondary, var(--text-muted)); line-height: 1.6; margin: 0 0 var(--sp-3); }
.glos-entry__clave, .glos-entry__ojo {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  font-size: var(--fs-sm); line-height: 1.5; margin: var(--sp-2) 0 0;
}
.glos-entry__clave { color: var(--text-muted); }
.glos-entry__clave svg { color: var(--selection-indicator); flex: 0 0 auto; margin-top: 1px; }
.glos-entry__ojo { color: var(--text-muted); }
.glos-entry__ojo svg { color: var(--warning); flex: 0 0 auto; margin-top: 1px; }
.glos-entry__links {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm); color: var(--text-muted); margin: var(--sp-3) 0 0;
}
.glos-entry__links a { color: var(--link); }

/* Entrada apuntada por #hash (resaltado suave) */
.glos-entry.is-target { background: var(--selection-wash); border-radius: var(--radius-control); padding-left: var(--sp-4); padding-right: var(--sp-4); }