/* ── La economía del país (/cl/economia) ─────────────────────────────────────
   Reusa los gráficos de bancos y macro (bk-*, min-*, mc-t); acá solo lo propio. Hoja
   aparte para no cargar estas clases en todo el sitio.

   PALETA PROPIA, de doce. La de bancos tiene nueve y las exportaciones van en diez grupos.
   El primero es el cobre de la marca: el cobre es el tema de la página y tiene que ser el
   mismo color en todos los gráficos. Cada producto tiene su color en los dos gráficos de
   exportaciones (por año y por destino). */
:root {
  --ec0:#C2612B; --ec1:#3b6fb6; --ec2:#2E9E5B; --ec3:#8e5ab8; --ec4:#3f9aa0; --ec5:#c2527a;
  --ec6:#7a8f2e; --ec7:#cf9f1f; --ec8:#7b6a58; --ec9:#5d7fa3; --ec10:#a8a49a; --ec11:#3a3a3a;
}
:root[data-tema="oscuro"] {
  --ec0:#e0874f; --ec1:#6ea2e8; --ec2:#4fc27f; --ec3:#b48ce0; --ec4:#6fc0c4; --ec5:#ea8cae;
  --ec6:#b7cc5e; --ec7:#e8c25a; --ec8:#bfa88f; --ec9:#8fb0d4; --ec10:#7d7a72; --ec11:#e6e6e6;
}
.ec-c0 { color:var(--ec0); } .ec-c1 { color:var(--ec1); } .ec-c2 { color:var(--ec2); }
.ec-c3 { color:var(--ec3); } .ec-c4 { color:var(--ec4); } .ec-c5 { color:var(--ec5); }
.ec-c6 { color:var(--ec6); } .ec-c7 { color:var(--ec7); } .ec-c8 { color:var(--ec8); }
.ec-c9 { color:var(--ec9); } .ec-c10 { color:var(--ec10); } .ec-c11 { color:var(--ec11); }

.ec-hero { margin-bottom:6px; }
/* El título y el botón de ampliar en la misma fila también en el teléfono (el sitio
   hace `flex-wrap:wrap` bajo 640 px y el botón quedaba solo en una fila). */
.ec-pag .min-head { flex-wrap:nowrap; }
.ec-pag .min-head > div { flex:1 1 auto; min-width:0; }
.ec-kpis { margin:12px 0 16px; }
.ec-kpis .kpi { padding:10px 12px; }
.ec-kpis .kpi b { font-size:1.12rem; }
.ec-kpis .kpi i { font-size:.76rem; color:var(--tx3); margin-top:1px; }
.ec-antes { display:block; color:var(--tx3); font-size:.72rem; margin-top:2px; }

/* Leyenda de las líneas: un trazo, no un cuadro (el cuadro es de las barras). */
.ec-leyenda { gap:6px 14px; }
.ec-lg-l { display:inline-block; width:15px; height:0; border-top:2px solid currentColor; flex:none; }
.ec-lg-l.ec-dash { border-top-style:dashed; }
.min-tip .ec-v { font-size:.8rem; color:var(--tx); font-weight:600; font-variant-numeric:tabular-nums; }
.min-tip .ec-v u { text-decoration:none; color:var(--tx3); font-weight:500; margin-left:6px; }
.min-tip .tip-f { gap:7px; }

/* Una línea de mecanismo bajo el gráfico y la fuente al pie: cortas, no un texto. */
.ec-mec { margin:10px 0 8px; padding-left:18px; font-size:.82rem; color:var(--tx2); line-height:1.5; }
.ec-mec li { margin:0 0 3px; }
.ec-linea { margin:10px 0 6px; font-size:.82rem; color:var(--tx2); line-height:1.5; }
.ec-fuente { margin:8px 0 0; font-size:.72rem; color:var(--tx3); line-height:1.5; }
.ec-fuente a { color:var(--tx2); }

.ec-tabla { overflow-x:auto; margin:8px 0 4px; }
.ec-tabla .mc-t { font-size:.8rem; }
.ec-tabla .mc-t th, .ec-tabla .mc-t td { padding:5px 7px; }
/* El `thead th` del sitio es sticky bajo el header (top:var(--hdr)). Dentro de un
   contenedor con scroll horizontal eso lo bajaba 95 px y tapaba la última fila. */
.ec-tabla thead th { position:static; }
.ec-anual th:first-child { position:sticky; left:0; top:auto; background:var(--surface); }
.mc-t tr.ec-suma th, .mc-t tr.ec-suma td { font-weight:700; border-top:2px solid var(--line2); }

.ec-cuadre { margin:8px 0 0; }
.ec-cuadre summary, .ec-metodo summary { cursor:pointer; color:var(--accent-d); font-size:.8rem;
  width:max-content; max-width:100%; }

/* Barras horizontales por socio: nombre, barra, monto y dos participaciones. */
.ec-h { display:grid; gap:3px; font-size:.8rem; }
.ec-hf { display:grid; grid-template-columns:minmax(80px,130px) 1fr 62px 50px 50px; gap:8px;
  align-items:center; padding:2px 0; border-radius:4px; }
.ec-hf[data-k]:hover { background:var(--hover); }
.ec-hcab { color:var(--tx3); font-size:.7rem; }
.ec-hn { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--tx); }
.ec-hb { display:flex; height:13px; }
.ec-hb i { display:block; height:100%; background:currentColor; opacity:.88; }
.ec-hv, .ec-hp { text-align:right; font-variant-numeric:tabular-nums; }
.ec-hv { font-weight:600; }
.ec-hd { color:var(--tx3); }
@media (max-width:640px) {
  .ec-hf { grid-template-columns:86px 1fr 52px 42px; gap:6px; }
  .ec-hf > :last-child { display:none; }
}

/* Mapa de cuadros: cada sector un tinte de su color con borde lleno; el cobre, sólido. */
.ec-mapa { position:relative; overflow:hidden; border-radius:8px; }
.ec-celda { position:absolute; box-sizing:border-box; border:1px solid var(--surface);
  border-left:3px solid currentColor; padding:5px 7px; overflow:hidden; cursor:default; }
.ec-celda::before { content:""; position:absolute; inset:0; background:currentColor; opacity:.16; }
.ec-celda b, .ec-celda span { position:relative; display:block; color:var(--tx); line-height:1.25; }
.ec-celda b { font-size:.76rem; font-weight:600; }
.ec-celda span { font-size:.74rem; color:var(--tx2); }
.ec-celda.ec-ancla { background:var(--ec0); border-left-color:var(--ec0); }
.ec-celda.ec-ancla::before { display:none; }
.ec-celda.ec-ancla b, .ec-celda.ec-ancla span { color:#fff; }
.ec-mapa .min-tip { top:0; }

.ec-metodo .ec-lista { font-size:.78rem; color:var(--tx2); padding-left:18px; columns:2 360px; }