/* roadlatam — observatorio de vehículos usados en América Latina y el Caribe
   Tokens primero: el bloque :root define la paleta clara completa; los bloques
   de abajo solo redefinen tokens, nunca componentes.
   Lectura: texto a 16 px, subtítulos a 15 px, rótulos y notas a 13 px como mínimo.
   Contraste AA: --ink-3 (el gris más claro que se usa en texto) da 5,5:1 en claro y 6:1 en oscuro. */

:root {
  color-scheme: light;

  --ground: #f4f6f8;
  --panel: #ffffff;
  --panel-2: #eef2f6;
  --ink: #0d141c;
  --ink-2: #435060;
  --ink-3: #5d6874;
  --line: #dce2e9;
  --line-fuerte: #c3ccd6;
  --accent: #2a78d6;
  --accent-suave: #e7f0fd;

  /* tipos de dato: una sola familia semántica en todo el sitio */
  --t-oficial: #0d141c;
  --t-tercero: #1baf7a;
  --t-estimacion: #eda100;
  --t-mixto: #4a3aa7;
  --t-sindato: #8a96a3;

  /* serie categórica validada (orden fijo, nunca ciclado).
     Los cuatro exportadores usan siempre las cuatro primeras: Japón, EE.UU., UE, Corea. */
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;
  --s6: #008300;
  --s7: #4a3aa7;
  --s8: #e34948;
  --gris-serie: #b4bec8;

  /* estrellas UCSR: escala divergente fija (1-2 rojo, 3 gris neutro, 4-5 azul); cada brazo validado como ordinal */
  --st1: #d23b3a;
  --st2: #f0a09c;
  --st3: #a3adb8;
  --st4: #86b6ef;
  --st5: #256abf;

  /* norma Euro probable en origen: rampa ordinal de un solo tono; más intenso = norma más vieja */
  --eu3: #0d366b;
  --eu4: #256abf;
  --eu5: #5598e7;
  --eu6: #86b6ef;

  /* estado (sí / no) en tablas de leyes */
  --bien: #1a7f4e;
  --mal: #b8322f;

  --grid: #e6ebf0;
  --sombra: 0 1px 2px rgba(13, 20, 28, .06), 0 10px 28px -14px rgba(13, 20, 28, .28);

  /* mapa de la portada: los diez con --accent (resaltar y atenuar), TT en un tinte con borde punteado, el resto neutro */
  --mapa-tierra: #dde3ea;
  --mapa-chile: #c4cdd7;
  --mapa-fuera: #aecbef;
  --mapa-activo: #1b579f;
  --mapa-ruta: #435060;

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --riel: 232px;
  --r: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0e1116;
    --panel: #161b22;
    --panel-2: #1c222b;
    --ink: #e8edf3;
    --ink-2: #b1bcc7;
    --ink-3: #8f9ba7;
    --line: #252c35;
    --line-fuerte: #36404c;
    --accent: #3987e5;
    --accent-suave: #16263c;
    --t-oficial: #e8edf3;
    --t-tercero: #199e70;
    --t-estimacion: #c98500;
    --t-mixto: #9085e9;
    --t-sindato: #7d8995;
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --s5: #d55181;
    --s6: #008300;
    --s7: #9085e9;
    --s8: #e66767;
    --gris-serie: #4f5b68;
    --st1: #e66767;
    --st2: #a34e4c;
    --st3: #5b6773;
    --st4: #2f5f9e;
    --st5: #6da7ec;
    --eu3: #b7d3f6;
    --eu4: #6da7ec;
    --eu5: #2a78d6;
    --eu6: #184f95;
    --bien: #4cc38a;
    --mal: #f07a76;
    --grid: #222932;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .9);
    --mapa-tierra: #262e38;
    --mapa-chile: #3a4552;
    --mapa-fuera: #284a74;
    --mapa-activo: #86b6ef;
    --mapa-ruta: #b1bcc7;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0e1116;
  --panel: #161b22;
  --panel-2: #1c222b;
  --ink: #e8edf3;
  --ink-2: #b1bcc7;
  --ink-3: #8f9ba7;
  --line: #252c35;
  --line-fuerte: #36404c;
  --accent: #3987e5;
  --accent-suave: #16263c;
  --t-oficial: #e8edf3;
  --t-tercero: #199e70;
  --t-estimacion: #c98500;
  --t-mixto: #9085e9;
  --t-sindato: #7d8995;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --s4: #c98500;
  --s5: #d55181;
  --s6: #008300;
  --s7: #9085e9;
  --s8: #e66767;
  --gris-serie: #4f5b68;
  --st1: #e66767;
  --st2: #a34e4c;
  --st3: #5b6773;
  --st4: #2f5f9e;
  --st5: #6da7ec;
  --eu3: #b7d3f6;
  --eu4: #6da7ec;
  --eu5: #2a78d6;
  --eu6: #184f95;
  --bien: #4cc38a;
  --mal: #f07a76;
  --grid: #222932;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .9);
  --mapa-tierra: #262e38;
  --mapa-chile: #3a4552;
  --mapa-fuera: #284a74;
  --mapa-activo: #86b6ef;
  --mapa-ruta: #b1bcc7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
}

h1, h2, h3, h4 { font-family: var(--f-display); text-wrap: balance; margin: 0; letter-spacing: -.012em; }
h1 { font-size: 2rem; font-weight: 700; line-height: 1.15; }
h2 { font-size: 1.3rem; font-weight: 650; line-height: 1.2; }
h3 { font-size: 1.12rem; font-weight: 650; line-height: 1.3; }
p { margin: 0; }

/* ---------------------------------------------------------- estructura */

.cascara { display: grid; grid-template-columns: var(--riel) minmax(0, 1fr); min-height: 100vh; }

.riel {
  border-right: 1px solid var(--line);
  background: var(--panel);
  padding-block: 18px 28px;
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
}

.marca { display: flex; flex-direction: column; gap: 2px; padding: 0 18px 16px; }
.marca-nombre { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }
.marca-glosa { font-size: .8125rem; color: var(--ink-3); }

.nav-grupo { padding: 16px 18px 4px; }
.nav-titulo { font-size: .8125rem; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.nav a {
  display: flex; align-items: center; gap: 8px; padding: 6px 18px;
  color: var(--ink-2); text-decoration: none; font-size: .92rem; border-left: 2px solid transparent;
}
.nav a:hover { background: var(--panel-2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-left-color: var(--accent); background: var(--accent-suave); font-weight: 550; }
.nav a .iso { font-family: var(--f-mono); font-size: .8125rem; color: var(--ink-3); width: 22px; flex: none; }
.nav a[aria-current="page"] .iso { color: var(--accent); }

.principal { padding: 0 0 80px; min-width: 0; }

.masthead {
  border-bottom: 1px solid var(--line); background: var(--panel);
  padding: 12px 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20;
}
.masthead .auspicio { font-size: .8125rem; color: var(--ink-3); }
.masthead .sello-base {
  margin-left: auto; font-size: .8125rem; color: var(--ink-3);
  display: flex; align-items: center; gap: 10px;
}
.btn-tema {
  background: none; border: 1px solid var(--line-fuerte); color: var(--ink-2);
  font-family: var(--f-texto); font-size: .8125rem; padding: 4px 10px; border-radius: var(--r); cursor: pointer; white-space: nowrap;
}
.btn-tema:hover { border-color: var(--ink-3); color: var(--ink); }

/* selector de idioma ES / EN: en la cabecera y, en el teléfono, dentro del menú */
.idioma { display: inline-flex; border: 1px solid var(--line-fuerte); border-radius: var(--r); overflow: hidden; flex: none; }
.idioma button {
  background: none; border: 0; color: var(--ink-2); font-family: var(--f-texto); font-size: .8125rem; font-weight: 600;
  letter-spacing: .04em; padding: 4px 9px; cursor: pointer; min-width: 36px;
}
.idioma button + button { border-left: 1px solid var(--line-fuerte); }
.idioma button:hover { color: var(--ink); background: var(--panel-2); }
.idioma button[aria-pressed="true"] { background: var(--accent-suave); color: var(--ink); }
.idioma button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-idioma { display: none; }
.nav-idioma .idioma button { padding: 6px 14px; font-size: .875rem; }

/* texto que se deja en su idioma original (castellano) en la vista inglesa */
.marca-orig { font-size: .75rem; font-style: italic; color: var(--ink-3); white-space: nowrap; font-weight: 400; letter-spacing: 0; }

.vista { padding: 32px 32px 0; max-width: 1180px; }
.vista > * + * { margin-top: 32px; }

/* ---------------------------------------------------------- encabezados */

.cabecera-vista { display: flex; flex-direction: column; gap: 10px; }
.eyebrow { font-size: .875rem; font-weight: 500; color: var(--ink-3); }
.bajada { color: var(--ink-2); max-width: 68ch; font-size: 1rem; }

.cabecera-pais { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cabecera-pais .iso3 {
  font-family: var(--f-mono); font-size: .8125rem; color: var(--ink-3);
  border: 1px solid var(--line-fuerte); padding: 1px 6px; border-radius: 3px;
}

/* ---------------------------------------------------------- paneles */

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.panel > *, .capitulo > *, .bloque > *, details { min-width: 0; }
.panel > .panel-cab { display: flex; flex-direction: column; gap: 6px; }
/* el título del panel afirma el hallazgo; la línea de abajo dice qué se mide y en qué unidad */
.panel-cab h3 { max-width: 60ch; }
.panel-cab .sub { color: var(--ink-2); font-size: .94rem; max-width: 74ch; }

.bloque { display: flex; flex-direction: column; gap: 16px; }
.bloque-cab {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-top: 2px solid var(--ink); padding-top: 12px;
}
.bloque-pregunta { color: var(--ink-2); font-size: .96rem; flex-basis: 100%; max-width: 74ch; }

.rejilla { display: grid; gap: 16px; }
.rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.rejilla.tres { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.rejilla > * { min-width: 0; }

/* ---------------------------------------------------------- tarjetas (KPI) */
/* número grande · qué es · contra qué compararlo. Estimación y «sin dato» visibles sin gritar. */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(155px, 100%), 1fr)); gap: 1px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
/* separadores dibujados por cada tarjeta: una celda vacía al final de la rejilla queda del color del panel */
.kpi { background: var(--panel); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.kpi-val { font-family: var(--f-display); font-size: 2rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; order: 1; }
.kpi-val.chico { font-size: 1.3rem; line-height: 1.2; letter-spacing: -.01em; }
.kpi-val .de { font-size: 1rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.kpi-val.sin { font-family: var(--f-texto); font-size: 1rem; font-weight: 500; color: var(--ink-3); line-height: 1.5; letter-spacing: 0; }
.kpi-etq { font-size: .94rem; color: var(--ink); line-height: 1.35; order: 2; }
.kpi-nota { font-size: .8125rem; color: var(--ink-2); line-height: 1.4; order: 3; }
.kpi-ctx { font-size: .8125rem; color: var(--ink-2); line-height: 1.4; order: 4; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 4px; }
.kpi .marca-est { order: 5; align-self: flex-start; margin-top: 2px; }

/* la marca de estimación: pequeña, con la misma trama que los gráficos */
.marca-est {
  display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; color: var(--ink-2); white-space: nowrap;
}
.marca-est::before {
  content: ""; width: 12px; height: 10px; border-radius: 2px; flex: none;
  background: repeating-linear-gradient(45deg, var(--t-estimacion) 0 2px, transparent 2px 4.5px);
  box-shadow: inset 0 0 0 1px var(--t-estimacion);
}

.cifra { font-variant-numeric: tabular-nums; }
.vista > .kpis + .anios-ref { margin-top: 10px; }

/* ---------------------------------------------------------- sellos */

.sello {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .8125rem; color: var(--ink-2); white-space: nowrap;
}
.sello .glifo { font-size: .85rem; line-height: 1; }
.sello[data-tipo="DATO OFICIAL"] .glifo { color: var(--t-oficial); }
.sello[data-tipo="DATO OFICIAL DE TERCEROS"] .glifo { color: var(--t-tercero); }
.sello[data-tipo="ESTIMACION"] .glifo { color: var(--t-estimacion); }
.sello[data-tipo="mixto"] .glifo { color: var(--t-mixto); }
.sello[data-tipo="SECUNDARIA"] .glifo { color: var(--t-tercero); }
.sello[data-tipo="SUPUESTO"] .glifo { color: var(--t-estimacion); }
.sello[data-tipo="sin dato"] .glifo { color: var(--t-sindato); }

/* ---------------------------------------------------------- procedencia plegada */

details.procedencia { border-top: 1px solid var(--line); padding-top: 10px; margin-top: auto; }
details.procedencia > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .8125rem; color: var(--ink-2); min-height: 28px;
}
details.procedencia > summary::-webkit-details-marker { display: none; }
details.procedencia > summary .abre { color: var(--accent); font-weight: 500; }
details.procedencia > summary .abre::before { content: "+ "; }
details.procedencia[open] > summary .abre::before { content: "− "; }
details.procedencia > summary:hover .abre { text-decoration: underline; }
.procedencia-cuerpo { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; font-size: .875rem; color: var(--ink-2); max-width: 80ch; }
.procedencia-cuerpo .nota { font-size: .8125rem; color: var(--ink-3); }
.procedencia-cuerpo .tecnico {
  font-family: var(--f-mono); font-size: .75rem; color: var(--ink-3); overflow-wrap: anywhere; line-height: 1.5;
}

details.mas > summary {
  cursor: pointer; font-size: .875rem; color: var(--accent); list-style: none; font-weight: 500;
}
details.mas > summary::-webkit-details-marker { display: none; }
details.mas > summary::before { content: "+ "; }
details.mas[open] > summary::before { content: "− "; }
details.mas > summary:hover { text-decoration: underline; }
details.mas > *:not(summary) { margin-top: 10px; }

.aviso {
  border-left: 3px solid var(--t-estimacion); background: var(--panel-2);
  padding: 10px 14px; font-size: .94rem; color: var(--ink-2); border-radius: 0 var(--r) var(--r) 0;
}
.aviso.hueco { border-left-color: var(--t-sindato); }
.aviso strong { color: var(--ink); font-weight: 600; }
.aviso.info { border-left-color: var(--accent); }

/* ---------------------------------------------------------- tablas */

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
thead th {
  font-size: .8125rem; font-weight: 600; color: var(--ink-2); text-align: left; padding: 9px 12px;
  background: var(--panel-2); border-bottom: 1px solid var(--line); white-space: normal; vertical-align: bottom; min-width: 64px;
}
tbody td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--panel-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.mono { font-family: var(--f-mono); font-size: .8125rem; }
td.respaldo { font-size: .875rem; color: var(--ink-2); min-width: 150px; }
td.largo { min-width: 200px; }
.tabla-envoltura table { background: var(--panel); }

/* sí / no con marca además del color */
.si-no { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: .875rem; }
.si-no::before { font-weight: 700; width: 1em; text-align: center; }
.si-no.si { color: var(--bien); }
.si-no.si::before { content: "✓"; }
.si-no.no { color: var(--mal); }
.si-no.no::before { content: "✕"; }
.si-no.nd { color: var(--ink-3); }
.si-no.nd::before { content: "·"; }
.si-no span { color: var(--ink); }

/* ---------------------------------------------------------- matriz de cobertura */

.matriz { overflow-x: auto; }
.matriz table { min-width: 620px; }
.matriz td.celda { padding: 4px 6px; text-align: center; }
.celda-marca {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; padding: 6px 4px; border-radius: 4px; border: 1px solid var(--line);
  background: var(--panel); cursor: help; font-size: .8125rem; color: var(--ink-2);
}
.celda-marca .glifo { font-size: .95rem; line-height: 1; }
.celda-marca[data-estado="nacional"] { border-color: var(--t-oficial); }
.celda-marca[data-estado="nacional"] .glifo { color: var(--t-oficial); }
.celda-marca[data-estado="espejos"] .glifo,
.celda-marca[data-estado="contraste"] .glifo { color: var(--t-tercero); }
.celda-marca[data-estado="estimado"] .glifo { color: var(--t-estimacion); }
.celda-marca[data-estado="parcial"] .glifo { color: var(--t-estimacion); }
.celda-marca[data-estado="mixto"] .glifo { color: var(--t-mixto); }
.celda-marca[data-estado="sin dato"] { border-style: dashed; }
.celda-marca[data-estado="sin dato"] .glifo { color: var(--t-sindato); }
.matriz th.pais-col { position: sticky; left: 0; background: var(--panel-2); z-index: 1; }
.matriz td.pais-col {
  position: sticky; left: 0; background: var(--panel); font-weight: 550;
  white-space: nowrap; border-right: 1px solid var(--line);
}
.matriz td.pais-col a { color: inherit; text-decoration: none; }
.matriz td.pais-col a:hover { color: var(--accent); text-decoration: underline; }

.leyenda-tipos { display: flex; gap: 16px; flex-wrap: wrap; }
.leyenda-tipos .item { display: flex; align-items: flex-start; gap: 6px; max-width: 260px; flex-direction: column; }
.leyenda-tipos .glosa { font-size: .8125rem; color: var(--ink-3); line-height: 1.4; }

/* ---------------------------------------------------------- gráficos */

.gfx { position: relative; display: flex; flex-direction: column; gap: 8px; }
.gfx svg { display: block; width: 100%; height: auto; overflow: visible; }
.gfx svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.gfx-titulo { font-family: var(--f-display); font-size: 1.12rem; font-weight: 650; line-height: 1.3; text-wrap: balance; max-width: 60ch; }
.gfx-sub { font-size: .94rem; color: var(--ink-2); }
.gfx-nota { font-size: .875rem; color: var(--ink-3); }
.gfx text { font-family: var(--f-texto); }
.gfx text.num { font-variant-numeric: tabular-nums; }

.leyenda { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: .8125rem; color: var(--ink-2); }
.leyenda .item { display: inline-flex; align-items: center; gap: 7px; }
.leyenda .item.tenue { color: var(--ink-3); }

/* claves de color: línea para series de líneas, caja para barras; con trama si es estimación */
.k { display: inline-block; flex: none; background: var(--k); }
.k-caja { width: 12px; height: 12px; border-radius: 2px; }
.k-caja.trama { background: repeating-linear-gradient(45deg, var(--k) 0 2.2px, color-mix(in srgb, var(--k) 45%, var(--panel)) 2.2px 4.4px); }
.k-linea { width: 16px; height: 3px; border-radius: 2px; }
.k-linea.punteada { background: repeating-linear-gradient(90deg, var(--k) 0 5px, transparent 5px 8px); }

/* barra única de composición: cada parte con su valor, debajo de la barra */
.comp-lista { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.comp-item { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: center; }
.comp-item .k { grid-row: span 2; align-self: start; margin-top: 7px; }
.comp-val { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; line-height: 1.2; }
.comp-nom { font-size: .8125rem; color: var(--ink-2); grid-column: 2; }

/* la ficha de lectura */
.ficha { background: var(--panel); border: 1px solid var(--line-fuerte); border-radius: 8px; padding: 10px 12px; font-size: .875rem; }
.ficha.flotante {
  position: absolute; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .08s;
  box-shadow: var(--sombra); width: max-content; max-width: min(300px, 100%);
}
.ficha.flotante[data-visible="true"] { opacity: 1; }
.ficha.acoplada { border-left: 3px solid var(--accent); }
.ficha-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ficha-titulo { font-weight: 600; color: var(--ink-2); }
.ficha-cerrar {
  margin-left: auto; background: none; border: 1px solid var(--line-fuerte); border-radius: 99px; color: var(--ink-2);
  font: inherit; font-size: .8125rem; padding: 3px 10px; cursor: pointer; min-height: 30px;
}
.ficha-principal { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
.ficha-valor { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.ficha-nombre { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.ficha-fila { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding-top: 2px; }
.ficha-fila .izq { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink-2); }
.ficha-fila .val { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.ficha-fila.tenue .val { color: var(--ink-3); font-weight: 400; }
.ficha-sig { margin-top: 6px; color: var(--ink-2); line-height: 1.4; }
.ficha-fuente { margin-top: 4px; color: var(--ink-3); font-size: .8125rem; line-height: 1.4; }

.conmutador { display: inline-flex; border: 1px solid var(--line-fuerte); border-radius: var(--r); overflow: hidden; }
.conmutador button {
  background: var(--panel); border: none; border-right: 1px solid var(--line); cursor: pointer;
  font-family: var(--f-texto); font-size: .875rem; padding: 6px 12px; color: var(--ink-2);
}
.conmutador button:last-child { border-right: none; }
.conmutador button[aria-pressed="true"] { background: var(--accent-suave); color: var(--ink); font-weight: 600; }

.fila-controles { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fila-filtro {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px;
  position: sticky; top: calc(var(--alto-mast, 0px) + 8px); z-index: 12; box-shadow: var(--sombra);
}
.fila-filtro label { font-weight: 600; }
.fila-filtro select {
  font: inherit; font-size: .94rem; padding: 6px 10px; border-radius: var(--r); border: 1px solid var(--line-fuerte);
  background: var(--panel); color: var(--ink); min-height: 36px;
}
.fila-filtro .gfx-nota { flex-basis: 100%; }

/* ---------------------------------------------------------- glosario en línea */

.sigla {
  font: inherit; color: inherit; background: none; border: none; padding: 0; margin: 0; cursor: help;
  text-decoration: underline dotted var(--ink-3); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.sigla:hover, .sigla[aria-expanded="true"] { text-decoration-color: var(--accent); color: var(--accent); }
.glosa-pop {
  position: absolute; z-index: 70; max-width: min(340px, calc(100vw - 24px));
  background: var(--panel); color: var(--ink); border: 1px solid var(--line-fuerte); border-radius: 8px;
  box-shadow: var(--sombra); padding: 10px 12px; font-size: .9rem; line-height: 1.45;
}
.glosa-pop[hidden] { display: none; }
.glosa-pop strong { display: block; margin-bottom: 2px; }

/* ---------------------------------------------------------- chips y varios */

.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem;
  border: 1px solid var(--line-fuerte); border-radius: 99px; padding: 1px 9px; color: var(--ink-2);
}
.chip.alerta { border-color: var(--t-estimacion); color: var(--ink); }
.chip.hueco { border-style: dashed; color: var(--ink-3); }

.lista-definiciones { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; }
.lista-definiciones dt { font-size: .875rem; color: var(--ink-3); }
.lista-definiciones dd { margin: 0; font-size: .94rem; min-width: 0; overflow-wrap: anywhere; }

.pie {
  margin-top: 40px; border-top: 1px solid var(--line); padding: 20px 32px 0;
  color: var(--ink-3); font-size: .875rem; max-width: 1180px;
}
.pie p + p { margin-top: 6px; }

.saltar {
  position: absolute; left: -9999px; background: var(--panel); padding: 8px 14px;
  border: 1px solid var(--accent); border-radius: var(--r); z-index: 60;
}
.saltar:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------- menú del riel (móvil) */

.riel-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.btn-menu {
  display: none; background: var(--panel); border: 1px solid var(--line-fuerte); color: var(--ink);
  font-family: var(--f-texto); font-size: .9rem; padding: 6px 14px; border-radius: var(--r); cursor: pointer;
}
.nav a .fuera { margin-left: auto; font-size: .8125rem; color: var(--ink-3); }

/* ---------------------------------------------------------- capítulos */

/* Los siete capítulos son una secuencia real (prólogo → deterioro): el número es información,
   se repite igual en la tira de la portada, en el índice de la ficha y en la cabecera de cada capítulo. */

.capitulo { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: calc(var(--alto-mast, 0px) + 64px); }
.capitulo-cab {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px;
  border-top: 2px solid var(--ink); padding-top: 14px; align-items: baseline;
}
.capitulo-num {
  font-family: var(--f-display); font-weight: 700; font-size: 2.6rem; line-height: .9;
  color: var(--accent); font-variant-numeric: tabular-nums; grid-row: span 3; min-width: 1.4ch;
}
.capitulo-cab h2 { font-size: 1.5rem; }
.capitulo-pregunta { color: var(--ink-2); font-size: 1rem; }
.capitulo-enlace { color: var(--ink); font-size: 1rem; max-width: 70ch; line-height: 1.6; }
.capitulo.apendice .capitulo-num { color: var(--ink-3); }

.subtitulo-cap { font-family: var(--f-display); font-size: 1.1rem; font-weight: 650; margin-top: 6px; }

/* índice pegajoso de la ficha */
.indice-caps {
  position: sticky; top: var(--alto-mast, 0px); z-index: 15;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line); margin-inline: -32px; padding: 8px 32px;
}
.indice-caps ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.indice-caps a {
  display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; text-decoration: none;
  color: var(--ink-2); font-size: .9rem; padding: 5px 11px; border-radius: 99px; border: 1px solid transparent;
}
.indice-caps a .n { font-family: var(--f-display); font-weight: 700; color: var(--ink-3); }
.indice-caps a:hover { background: var(--panel); border-color: var(--line); color: var(--ink); }
.indice-caps a[aria-current="true"] { background: var(--panel); border-color: var(--accent); color: var(--ink); }
.indice-caps a[aria-current="true"] .n { color: var(--accent); }

.volver-arriba {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line-fuerte); border-radius: 99px;
  font-family: var(--f-texto); font-size: .875rem; padding: 8px 14px; cursor: pointer; box-shadow: var(--sombra);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.volver-arriba[data-visible="true"] { opacity: 1; pointer-events: auto; }

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

.tesis { font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.16; max-width: 36ch; letter-spacing: -.02em; }

/* la tira de los siete capítulos: un solo lomo continuo, no siete tarjetas sueltas */
.tira-caps {
  display: flex; flex-wrap: wrap;
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.tira-caps > a {
  background: var(--panel); padding: 16px 14px 16px; display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit; min-width: 0; position: relative; flex: 1 1 118px;
}
.tira-caps > a:hover { background: var(--panel-2); }
.tira-caps .t-num { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; color: var(--accent); line-height: 1; }
.tira-caps .t-nom { font-family: var(--f-display); font-weight: 650; font-size: 1rem; }
.tira-caps .t-val { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; margin-top: 4px; }
.tira-caps .t-txt { font-size: .875rem; color: var(--ink-2); line-height: 1.4; }
.tira-caps .t-ir { font-size: .875rem; color: var(--accent); margin-top: auto; padding-top: 4px; }

.lista-paises { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.lista-paises a {
  display: flex; flex-direction: column; gap: 3px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 14px; text-decoration: none; color: inherit;
}
.lista-paises a:hover { border-color: var(--accent); }
.lista-paises .lp-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lista-paises .lp-nom { font-family: var(--f-display); font-weight: 650; }
.lista-paises .lp-iso { font-family: var(--f-mono); font-size: .8125rem; color: var(--ink-3); }
.lista-paises .lp-dato { font-size: .875rem; color: var(--ink-2); }
.lista-paises a.fuera { border-style: dashed; background: transparent; }

/* ---------------------------------------------------------- alineación con los ejes */

.nota-celda {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px;
  border-radius: 4px; font-size: .875rem; font-weight: 600; border: 1px solid transparent; font-variant-numeric: tabular-nums;
}
.nota-0 { background: transparent; border: 1px dashed var(--line-fuerte); color: var(--ink-3); }
.nota-1 { background: color-mix(in srgb, var(--accent) 18%, var(--panel)); color: var(--ink); }
.nota-2 { background: color-mix(in srgb, var(--accent) 48%, var(--panel)); color: var(--ink); }
.nota-3 { background: var(--accent); color: #fff; }

.matriz-ejes { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.matriz-ejes table { min-width: 800px; font-size: .875rem; table-layout: fixed; }
.matriz-ejes col.c-pais { width: 160px; }
.matriz-ejes col.c-prom { width: 56px; }
.matriz-ejes thead th {
  text-align: center; white-space: normal; vertical-align: bottom; padding: 6px 2px; line-height: 1.2;
  font-size: .8125rem; font-weight: 500; overflow-wrap: anywhere; hyphens: auto; min-width: 0;
}
.matriz-ejes thead tr.grupos th { border-bottom: 1px solid var(--line); color: var(--ink-2); font-weight: 600; }
.matriz-ejes thead tr.grupos th + th { border-left: 1px solid var(--line); }
.matriz-ejes td { text-align: center; padding: 3px 3px; }
.matriz-ejes td.pais-col, .matriz-ejes th.pais-col {
  position: sticky; left: 0; background: var(--panel); text-align: left; z-index: 1;
  white-space: nowrap; border-right: 1px solid var(--line); padding-inline: 10px;
}
.matriz-ejes th.pais-col { background: var(--panel-2); }
.matriz-ejes td.prom, .matriz-ejes th.prom { color: var(--ink-2); border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.matriz-ejes tfoot td { border-top: 1px solid var(--line); color: var(--ink-2); font-size: .8125rem; padding: 6px 2px; font-variant-numeric: tabular-nums; }
.matriz-ejes button.nota-celda { cursor: pointer; width: 100%; font-family: var(--f-texto); }
.matriz-ejes button.nota-celda:hover { outline: 2px solid var(--ink-3); outline-offset: 1px; }
.matriz-ejes button.nota-celda[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 1px; }
.matriz-ejes tbody tr:hover td { background: transparent; }

.detalle-celda { border-left: 3px solid var(--accent); }
.detalle-celda .notas-tres { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: .9rem; color: var(--ink-2); }
.detalle-celda .notas-tres span.grupo { display: inline-flex; align-items: center; gap: 6px; }

.escala { display: flex; gap: 14px; flex-wrap: wrap; font-size: .875rem; color: var(--ink-2); align-items: center; }
.escala .item { display: inline-flex; gap: 6px; align-items: center; max-width: 300px; }

.avance { display: flex; flex-direction: column; gap: 6px; }
.avance-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; font-size: .94rem; padding: 8px 0; border-bottom: 1px solid var(--line); }
.avance-fila:last-child { border-bottom: none; }
.avance-fila .cifras { font-size: .875rem; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- piezas de los capítulos */

.estrellas { color: var(--s4); letter-spacing: 1px; white-space: nowrap; }
.estrellas .vacias { color: var(--line-fuerte); }
.estrellas-celda { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.cruce td.celda-cruce { text-align: right; font-variant-numeric: tabular-nums; }
.cruce td.diag { font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent); }

.dato-grande { display: flex; flex-direction: column; gap: 4px; }
.dato-grande .v { font-family: var(--f-display); font-weight: 700; font-size: 2rem; line-height: 1.05; }
.dato-grande .v.chico { font-family: var(--f-texto); font-size: 1rem; font-weight: 500; color: var(--ink-3); line-height: 1.5; }
.dato-grande .e { font-size: .94rem; color: var(--ink-2); }

.grupos-def { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.grupos-def > * { min-width: 0; }
.grupos-def p, .panel-cab .sub, .aviso, .gfx-nota { overflow-wrap: anywhere; }
.grupos-def h4 { font-size: .94rem; color: var(--ink-2); font-weight: 600; margin-bottom: 6px; }
.grupos-def .lista-definiciones { grid-template-columns: minmax(0, 1fr) auto; }
.grupos-def .lista-definiciones dt { font-size: .9rem; color: var(--ink-2); }
.grupos-def .lista-definiciones dd { text-align: right; font-weight: 500; }

.evidencias { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.evidencias li { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr); gap: 4px 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.evidencias li:last-child { border-bottom: none; }
.evidencias .cifra-ev { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.evidencias .fuente-ev { font-size: .8125rem; color: var(--ink-3); margin-top: 3px; }

details.valores table { font-size: .875rem; }
details.valores .tabla-envoltura { max-height: 340px; overflow: auto; }

.lista-definiciones.ancha { grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); }
.lista-definiciones.ancha dt { font-size: .9rem; color: var(--ink-2); }

/* ---------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .cascara { grid-template-columns: 1fr; }
  .riel {
    position: sticky; top: 0; z-index: 30; height: auto; max-height: none; border-right: none; border-bottom: 1px solid var(--line);
    padding: 10px 16px;
  }
  .marca { padding: 0; flex-direction: row; align-items: baseline; gap: 10px; }
  .btn-menu { display: inline-flex; }
  .riel .nav { display: none; }
  .riel[data-abierto="true"] { max-height: 100vh; overflow-y: auto; }
  .riel[data-abierto="true"] .nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding-top: 8px; }
  .riel[data-abierto="true"] .nav-idioma { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .nav-idioma .nav-titulo { margin-bottom: 0; }
  .nav-grupo { grid-column: 1 / -1; padding: 10px 0 2px; }
  .nav a { border-left: none; border-bottom: 2px solid transparent; padding: 8px 8px; }
  .nav a[aria-current="page"] { border-left: none; border-bottom-color: var(--accent); }
  .vista, .masthead, .pie { padding-inline: 16px; }
  .vista { padding-top: 24px; }
  .vista > * + * { margin-top: 26px; }
  .masthead { position: static; padding-block: 8px; }
  .indice-caps { top: var(--alto-riel, 52px); margin-inline: -16px; padding: 6px 16px; }
  .capitulo { scroll-margin-top: calc(var(--alto-riel, 52px) + 56px); }
  .capitulo-num { font-size: 2rem; }
  .capitulo-cab h2 { font-size: 1.25rem; }
  .panel { padding: 16px 14px; }
  .evidencias li { grid-template-columns: 1fr; }
  .lista-definiciones.ancha { grid-template-columns: minmax(0, 1fr); }
  .lista-definiciones.ancha dd { margin-bottom: 6px; }
  .avance-fila { grid-template-columns: minmax(0, 1fr); }
  .avance-fila .cifras { white-space: normal; }
  .fila-filtro { position: static; padding: 10px 12px; box-shadow: none; }
  h1 { font-size: 1.6rem; }
  .kpi-val { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .k, .marca-est::before { forced-color-adjust: none; }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vista:focus { outline: none; }

/* ---------------------------------------------------------- portada: llegada */
/* Qué es (nombre del proyecto), la tesis, para quién y qué encontrará, adónde ir; el mapa al lado como pieza central.
   Debajo, cuatro cifras de los diez en un solo lomo, como la tira de capítulos. */

.llegada {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 28px 32px; align-items: start;
}
.llegada-texto { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.llegada-proyecto { font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--accent); line-height: 1.3; }
.llegada .tesis { max-width: 26ch; font-size: clamp(1.55rem, 2.3vw, 2.05rem); }
.llegada .bajada { font-size: 1rem; }
.llegada-acciones { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.elegir-pais { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 440px; }
.elegir-pais label { font-size: .94rem; font-weight: 600; }
.elegir-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.elegir-fila select {
  flex: 1 1 180px; min-width: 0; font-family: var(--f-texto); font-size: 1rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-fuerte); border-radius: var(--r); padding: 9px 10px; min-height: 44px;
}
.btn-primario, .btn-secundario {
  font-family: var(--f-texto); font-size: .96rem; font-weight: 600; border-radius: var(--r); padding: 10px 16px; min-height: 44px;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.btn-primario { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.btn-primario:hover { background: var(--mapa-activo); border-color: var(--mapa-activo); color: var(--panel); }
.btn-secundario { background: var(--panel); color: var(--ink); border: 1px solid var(--line-fuerte); }
.btn-secundario:hover { border-color: var(--accent); }
.llegada-auspicio { font-size: .875rem; color: var(--ink-3); max-width: 60ch; border-top: 1px solid var(--line); padding-top: 12px; }

/* el mapa */
.mapa-portada { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mapa-lienzo { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mapa-lienzo > .gfx-sub { padding: 20px; }
.mapa-lienzo svg { display: block; width: 100%; height: auto; }
.mapa-lienzo .tierra path { fill: var(--mapa-tierra); stroke: var(--panel); stroke-width: .7px; vector-effect: non-scaling-stroke; }
.mapa-lienzo .tierra path.chile { fill: var(--mapa-chile); }
.mapa-lienzo .tierra path.proyecto { fill: var(--accent); }
.mapa-lienzo .tierra path.fuera { fill: var(--mapa-fuera); stroke: var(--accent); stroke-dasharray: 3 2; stroke-width: 1px; }
.mapa-lienzo a { cursor: pointer; outline: none; }
.mapa-lienzo a.activo path.proyecto, .mapa-lienzo a:hover path.proyecto { fill: var(--mapa-activo); }
.mapa-lienzo .mapa-resalte { fill: none; stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.mapa-lienzo .mapa-resalte:not([href]) { display: none; }
.mapa-lienzo a:focus-visible path { stroke: var(--ink); stroke-width: 2.5px; }
.mapa-lienzo .ruta path { stroke: var(--mapa-ruta); stroke-width: 1.6px; vector-effect: non-scaling-stroke; fill: none; }
.mapa-lienzo .ruta .ruta-puerto { fill: var(--mapa-ruta); }
.mapa-lienzo .marcadores .marcador { fill: var(--accent); stroke: var(--panel); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.mapa-lienzo .marcadores .marcador.fuera { fill: var(--mapa-fuera); stroke: var(--accent); stroke-dasharray: 3 2; stroke-width: 1.2px; }
.mapa-lienzo .marcadores a.activo .marcador:not(.fuera), .mapa-lienzo .marcadores a:hover .marcador:not(.fuera) { fill: var(--mapa-activo); }
.mapa-lienzo .marcadores a.activo .marcador { stroke: var(--ink); stroke-dasharray: none; stroke-width: 2px; }
.mapa-lienzo .marcador-toque { fill: transparent; stroke: none; }
.mapa-lienzo .rotulos text { fill: var(--ink-2); font-family: var(--f-texto); font-weight: 500; pointer-events: none;
  paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mapa-lienzo .rotulos .rot-CA, .mapa-lienzo .rotulos .rot-PY, .mapa-lienzo .rotulos .rot-DO, .mapa-lienzo .rotulos .rot-AG { fill: var(--ink); font-weight: 600; }
.mapa-lienzo .rotulos .rot-JP, .mapa-lienzo .rotulos .rot-IQ, .mapa-lienzo .rotulos .rot-CL { fill: var(--ink-3); }

/* la ficha breve: flota al lado del país con el ratón; con el dedo o el teclado se acopla debajo del mapa */
.mapa-ficha, .mapa-acople {
  background: var(--panel); border: 1px solid var(--line-fuerte); border-radius: var(--r); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; font-size: .875rem;
}
.mapa-ficha { position: absolute; width: min(260px, calc(100% - 8px)); box-shadow: var(--sombra); pointer-events: none; z-index: 2; }
.mapa-ficha[hidden], .mapa-acople[hidden] { display: none; }
.mapa-acople { border-left: 3px solid var(--accent); }
.mf-cab { display: flex; flex-direction: column; gap: 2px; }
.mf-nom { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.mf-fuera { font-size: .8125rem; color: var(--ink-3); }
.mf-datos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mf-datos li { display: flex; flex-direction: column; }
.mf-t { color: var(--ink-2); font-size: .8125rem; line-height: 1.35; }
.mf-v { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mf-datos .mf-sin { font-family: var(--f-texto); font-weight: 500; font-size: .875rem; color: var(--ink-3); }
.mf-nota { display: block; font-family: var(--f-texto); font-weight: 400; font-size: .8125rem; color: var(--ink-2); line-height: 1.4; }
.mf-ir { font-weight: 600; }
.mapa-ficha .mf-ir { display: none; }
.mf-cerrar {
  align-self: flex-start; background: none; border: 1px solid var(--line-fuerte); color: var(--ink-2); border-radius: var(--r);
  font-family: var(--f-texto); font-size: .8125rem; padding: 4px 10px; cursor: pointer;
}
.mapa-acople .mf-ir { font-size: .94rem; }

.mapa-portada figcaption { display: flex; flex-direction: column; gap: 6px; }
.mapa-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .8125rem; color: var(--ink-2); }
.mapa-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.mapa-leyenda .sw { width: 14px; height: 10px; border-radius: 2px; flex: none; }
.sw-proyecto { background: var(--accent); }
.sw-fuera { background: var(--mapa-fuera); outline: 1px dashed var(--accent); outline-offset: -1px; }
.mapa-leyenda .sw-ruta { height: 0; border-top: 2px solid var(--mapa-ruta); border-radius: 0; width: 18px; }
.mapa-ayuda { font-size: .8125rem; color: var(--ink-3); }
.mapa-aviso { font-size: .8125rem; color: var(--ink-3); line-height: 1.45; display: flex; flex-direction: column; gap: 4px; }
.mapa-aviso p { max-width: 80ch; }

/* cuatro cifras */
.cifras-llegada {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.cifra-llegada {
  background: var(--panel); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; min-width: 0;
}
.cifra-llegada:hover { background: var(--panel-2); }
.cl-val { font-family: var(--f-display); font-weight: 700; font-size: 2rem; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cl-txt { font-size: .875rem; color: var(--ink-2); line-height: 1.45; }

.nota-estimacion { font-size: .8125rem; color: var(--ink-3); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.lista-paises.lista-fuera { margin-top: -6px; }

@media (max-width: 1100px) {
  .llegada { grid-template-columns: minmax(0, 1fr); }
  .llegada .tesis { max-width: 32ch; }
  .mapa-portada { max-width: 680px; }
}
@media (max-width: 640px) {
  .cl-val { font-size: 1.7rem; }
  .elegir-fila .btn-primario { flex: 1 1 auto; }
}

/* ---------------------------------------------------------- logos (solo con ROADLATAM_CONFIG.logos === true) */
.pie-logos { list-style: none; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; }
.pie-logos li { display: flex; align-items: center; }
.pie-logos img { display: block; height: 44px; width: auto; max-width: 100%; }
.pie-logos .lg-cepal img.logo-claro { height: 64px; }
.pie-logos .lg-cepal img.logo-oscuro { height: 30px; }
.pie-logos .lg-unrsf img.logo-oscuro { height: 40px; }
.pie-logos .lg-unece img { height: 40px; }
.pie-logos .logo-oscuro { display: none; }
:root[data-theme="dark"] .pie-logos .logo-claro { display: none; }
:root[data-theme="dark"] .pie-logos .logo-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pie-logos .logo-claro { display: none; }
  :root:not([data-theme="light"]) .pie-logos .logo-oscuro { display: block; }
}
@media (forced-colors: active) {
  .mapa-lienzo .tierra path.proyecto, .mapa-lienzo .marcadores .marcador { fill: Highlight; }
  .sw-proyecto { forced-color-adjust: none; }
}