/* ==========================================================================
   Sistema Santiago - componentes
   Depende de tokens.css. Prefijo de clases: .stgo-
   Filosofia: denso, plano, sin redondeados, bandera derecha, dato en mono.
   ========================================================================== */

/* --- Base (aplicar a la pagina / contenedor) ----------------------------- */
.stgo {
  background: var(--stgo-papel);
  color: var(--stgo-tinta);
  font-family: var(--stgo-font-sans);
  font-size: var(--stgo-fs-body);
  font-weight: var(--stgo-w-regular);
  line-height: var(--stgo-lh-body);
  text-align: left;            /* bandera derecha */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.stgo *,
.stgo *::before,
.stgo *::after { border-radius: var(--stgo-radius) !important; box-sizing: border-box; }

/* --- Tipografia --------------------------------------------------------- */
.stgo-display {
  font-family: var(--stgo-font-sans);
  font-size: var(--stgo-fs-display);
  font-weight: var(--stgo-w-medium);
  letter-spacing: var(--stgo-track-wordmark);
  line-height: var(--stgo-lh-tight);
  margin: 0;
}
.stgo-lemma {            /* titulo de entrada enciclopedica */
  font-family: var(--stgo-font-sans);
  font-size: var(--stgo-fs-h1);
  font-weight: var(--stgo-w-medium);
  letter-spacing: -0.01em;
  line-height: var(--stgo-lh-tight);
  margin: 0;
}
.stgo-h2 { font-family: var(--stgo-font-sans); font-size: var(--stgo-fs-h2); font-weight: var(--stgo-w-medium); margin: 0; }
.stgo-h3 { font-family: var(--stgo-font-sans); font-size: var(--stgo-fs-h3); font-weight: var(--stgo-w-medium); margin: 0; }
.stgo-gloss { font-family: var(--stgo-font-sans); font-style: normal; color: var(--stgo-tinta-2); font-size: 15px; }
.stgo-eyebrow {          /* etiqueta superior / indice de lamina (label, no dato -> sans) */
  font-family: var(--stgo-font-sans);
  font-weight: var(--stgo-w-medium);
  font-size: var(--stgo-fs-caption);
  letter-spacing: var(--stgo-track-eyebrow);
  color: var(--stgo-tinta-2);
  text-transform: uppercase;
}
.stgo-mono { font-family: var(--stgo-font-mono); font-size: var(--stgo-fs-small); color: var(--stgo-tinta-2); }
.stgo-data { font-family: var(--stgo-font-mono); font-size: var(--stgo-fs-small); color: var(--stgo-tinta); }
.stgo-p { margin: 0 0 var(--stgo-space-4); max-width: var(--stgo-measure); }

/* --- Reglas y divisiones ------------------------------------------------ */
.stgo-rule        { border: 0; border-top: var(--stgo-rule); margin: var(--stgo-space-6) 0; }
.stgo-rule--hair  { border: 0; border-top: var(--stgo-hairline); margin: var(--stgo-space-4) 0; }

/* --- Layout: cuerpo a dos columnas + margen de notas (Tufte) ------------ */
.stgo-page { max-width: 680px; padding: var(--stgo-space-8) 56px; background: var(--stgo-papel); }
.stgo-body-columns { columns: 2; column-gap: var(--stgo-gutter); text-align: left; }
.stgo-body-columns p { margin: 0 0 var(--stgo-space-3); }
.stgo-layout-tufte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stgo-sidenote-w);
  gap: var(--stgo-gutter);
  align-items: start;
}

/* --- Nota al margen ----------------------------------------------------- */
.stgo-sidenote {
  font-family: var(--stgo-font-sans);
  font-size: var(--stgo-fs-caption);
  line-height: 1.45;
  color: var(--stgo-tinta-2);
  margin: 0 0 var(--stgo-space-3);
}
.stgo-sidenote sup { color: var(--stgo-tinta); }

/* --- Ficha (campos estructurados / infobox) ----------------------------- */
.stgo-ficha { background: var(--stgo-papel-2); border: var(--stgo-hairline); padding: var(--stgo-space-3) var(--stgo-space-4); }
.stgo-ficha__title { font-family: var(--stgo-font-mono); font-size: var(--stgo-fs-caption); letter-spacing: var(--stgo-track-eyebrow); color: var(--stgo-tinta); padding-bottom: var(--stgo-space-2); border-bottom: var(--stgo-hairline); }
.stgo-ficha__row { display: flex; justify-content: space-between; gap: var(--stgo-space-4); padding: var(--stgo-space-2) 0; border-bottom: var(--stgo-hairline-faint); font-family: var(--stgo-font-mono); font-size: var(--stgo-fs-caption); }
.stgo-ficha__row:last-child { border-bottom: 0; }
.stgo-ficha__key { color: var(--stgo-tinta-2); }
.stgo-ficha__val { color: var(--stgo-tinta); text-align: right; }

/* --- Swatch (muestra de color) ------------------------------------------ */
.stgo-palette { display: flex; flex-wrap: wrap; gap: var(--stgo-space-1); }
.stgo-swatch { width: 84px; }
.stgo-swatch__chip { height: 58px; border: var(--stgo-hairline-faint); }
.stgo-swatch__name { font-family: var(--stgo-font-mono); font-size: var(--stgo-fs-caption); color: var(--stgo-tinta); margin-top: var(--stgo-space-1); }
.stgo-swatch__hex  { font-family: var(--stgo-font-mono); font-size: var(--stgo-fs-caption); color: var(--stgo-tinta-2); }

/* --- Wordmark / lockup -------------------------------------------------- */
.stgo-lockup { display: flex; align-items: flex-end; gap: var(--stgo-space-3); }
.stgo-code {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--stgo-tinta); color: var(--stgo-papel);
  font-family: var(--stgo-font-mono); font-size: var(--stgo-fs-small);
  letter-spacing: 0.16em; padding: var(--stgo-space-1) var(--stgo-space-2);
}

/* --- Chip de senaletica (wayfinding, codigo Metro) ---------------------- */
.stgo-chip { display: inline-flex; align-items: stretch; border: var(--stgo-hairline); background: var(--stgo-papel-2); }
.stgo-chip__tab { width: 8px; background: var(--stgo-rojo-l1); }
.stgo-chip__body { display: flex; flex-direction: column; padding: var(--stgo-space-2) var(--stgo-space-3); }
.stgo-chip__line { font-family: var(--stgo-font-mono); font-size: var(--stgo-fs-caption); letter-spacing: 0.06em; color: var(--stgo-tinta-2); }
.stgo-chip__name { font-family: var(--stgo-font-sans); font-size: var(--stgo-fs-small); font-weight: var(--stgo-w-medium); color: var(--stgo-tinta); }

/* --- Mosaico (campo de teselas; el papel es el frague) ------------------ */
.stgo-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; background: var(--stgo-papel); border: var(--stgo-hairline-faint); }
.stgo-tile { aspect-ratio: 1 / 1; background: var(--stgo-superficie); }
.stgo-tile--concreto { background: var(--stgo-concreto); }
.stgo-tile--l1 { background: var(--stgo-rojo-l1); }
.stgo-tile--l5 { background: var(--stgo-verde-l5); }
.stgo-tile--l6 { background: var(--stgo-purpura-l6); }
.stgo-tile--ocre { background: var(--stgo-ocre); }
.stgo-tile--nieve { background: var(--stgo-azul-nieve); }

/* --- Lamina con anotaciones (plate + callouts, estilo DK) --------------- */
.stgo-plate { border: var(--stgo-hairline); background: var(--stgo-papel-2); padding: var(--stgo-space-4); }
.stgo-plate__fig { display: block; width: 100%; height: auto; }
.stgo-plate__caption { font-family: var(--stgo-font-mono); font-size: var(--stgo-fs-caption); color: var(--stgo-tinta-2); margin-top: var(--stgo-space-2); padding-top: var(--stgo-space-2); border-top: var(--stgo-hairline); }

/* --- Datos estilo Isotype (mas signos = mas cantidad) ------------------- */
.stgo-isotype { display: flex; flex-direction: column; gap: var(--stgo-space-2); }
.stgo-isotype__row { display: flex; align-items: center; gap: var(--stgo-space-3); }
.stgo-isotype__label { font-family: var(--stgo-font-mono); font-size: var(--stgo-fs-caption); color: var(--stgo-tinta-2); width: 120px; }
.stgo-isotype__signs { display: flex; gap: 3px; }
.stgo-isotype__sign { width: 12px; height: 12px; background: var(--stgo-rojo-l1); }
.stgo-isotype__key { font-family: var(--stgo-font-mono); font-size: var(--stgo-fs-caption); color: var(--stgo-tinta-2); }

/* --- Bloque de referencias ---------------------------------------------- */
.stgo-refs { font-family: var(--stgo-font-sans); font-size: var(--stgo-fs-caption); line-height: 1.5; color: var(--stgo-tinta-2); }
.stgo-refs__item { display: grid; grid-template-columns: 22px 1fr; gap: var(--stgo-space-2); padding: var(--stgo-space-1) 0; }
.stgo-refs__n { font-family: var(--stgo-font-mono); color: var(--stgo-tinta); }

/* --- Running head (cabecera de pagina enciclopedica) -------------------- */
.stgo-runhead { display: flex; justify-content: space-between; font-family: var(--stgo-font-sans); font-weight: var(--stgo-w-medium); font-size: var(--stgo-fs-caption); letter-spacing: var(--stgo-track-eyebrow); color: var(--stgo-tinta-2); padding-bottom: var(--stgo-space-2); border-bottom: var(--stgo-rule); }

/* --- Bloque isometrico (axonometria) ------------------------------------ */
.stgo-iso { display: block; width: 100%; height: auto; }