/* P2 Supplier Intelligence — dashboard. Tokens de marca VS-Trade. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  --navy-900: #0a1929; --navy-700: #1b2b4d; --navy-500: #34507f;
  --blue-600: #005fcc; --blue-500: #0b5fff; --blue-100: #e6eeff;
  --paper: #faf9f5; --paper-2: #f5f5f0; --rule: #e4e2da; --rule-2: #d4d2c9;
  --mute-2: #8b8b83; --mute-1: #5a5a53; --ink: #2c2c2c;
  --amber-600: #d98300; --amber-100: #fff1d6;
  --green-700: #1f7a3d; --teal: #0f766e;
  --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(10,25,41,.06), 0 4px 16px rgba(10,25,41,.06);
  --sans: "Inter", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.45; -webkit-font-smoothing: antialiased; }
.wrap { width: min(1140px, 94vw); margin: 0 auto; }
.muted { color: var(--mute-2); }

.site-head { background: var(--navy-900); color: #fff; }
.site-head .wrap { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; flex-wrap: wrap; }
.brand { font-weight: 700; }
.brand__sub { color: var(--blue-100); font-weight: 600; }
.head__tag { color: #aab8cc; font-size: .86rem; }

.site-foot { border-top: 1px solid var(--rule); margin-top: 40px; background: var(--paper-2); }
.site-foot .wrap { padding: 18px 0; }
.compliance { color: var(--mute-1); font-size: .8rem; max-width: 80ch; }

/* run_meta — VISIBLE, diferenciador de rigor */
.runmeta { margin: 20px 0 14px; padding: 16px 18px; border: 1px solid var(--rule); border-left: 4px solid var(--teal); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.runmeta__top { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.runmeta__sector { font-weight: 700; color: var(--navy-900); font-size: 1.05rem; }
.runmeta__window { font-family: var(--mono); font-size: .82rem; color: var(--mute-1); }
.runmeta__coverage { margin-left: auto; background: var(--amber-100); color: #7a5200; padding: 3px 10px; border-radius: 999px; font-size: .84rem; }
.runmeta__note { margin: 6px 0 0; color: var(--ink); font-size: .92rem; }
.runmeta__universe { margin: 4px 0 0; color: var(--mute-2); font-size: .78rem; font-family: var(--mono); }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 0 0 18px; }
.kpi { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 10px 12px; }
.kpi dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mute-2); }
.kpi dd { margin: 4px 0 0; font-weight: 700; color: var(--navy-900); font-size: 1rem; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi__u { font-size: .7rem; color: var(--mute-2); }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(3, 1fr); } }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; flex-wrap: wrap; }
.tab { border: none; background: none; padding: 10px 14px; cursor: pointer; font-family: var(--sans); font-size: .9rem; color: var(--mute-1); border-bottom: 2px solid transparent; }
.tab.is-active { color: var(--navy-900); font-weight: 600; border-bottom-color: var(--blue-500); }
.view { display: none; } .view.is-active { display: block; }
.view__hint { color: var(--mute-1); font-size: .88rem; margin: 0 0 12px; }

/* split list + detail */
.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.filter { width: 100%; padding: 9px 12px; border: 1.5px solid var(--rule-2); border-radius: var(--radius-sm); margin-bottom: 10px; font-family: var(--sans); }
.filter:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); }

/* rank tables */
.rank { width: 100%; border-collapse: collapse; font-size: .86rem; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.rank th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--mute-2); padding: 8px 10px; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.rank td { padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.rank tbody tr { cursor: pointer; }
.rank tbody tr:hover { background: var(--blue-100); }
.rank .name { font-weight: 500; color: var(--navy-900); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .num { text-align: right; font-family: var(--mono); color: var(--mute-1); }
.rank .val { white-space: nowrap; font-family: var(--mono); }
.iso { font-family: var(--mono); font-weight: 600; color: var(--navy-700); font-size: .8rem; }

.bar { display: inline-block; width: 60px; height: 7px; background: var(--paper-2); border-radius: 999px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.bar > span { display: block; height: 100%; background: var(--blue-500); }
.bar--alt > span { background: var(--teal); }

/* detail panel */
.detail { position: sticky; top: 12px; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.detail__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.detail__head h3 { margin: 0; font-size: 1.02rem; color: var(--navy-900); }
.detail__val { margin-left: auto; font-family: var(--mono); font-size: .82rem; color: var(--mute-1); }
.detail h4 { margin: 14px 0 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--mute-2); }
.detail__spark { margin-top: 10px; }
ul.drill { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
ul.drill li { display: grid; grid-template-columns: 1fr 70px auto; align-items: center; gap: 8px; font-size: .82rem; }
ul.drill .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.drill .val { font-family: var(--mono); color: var(--mute-1); text-align: right; }
ul.drill code { font-family: var(--mono); font-size: .78rem; color: var(--navy-700); }

/* countries */
ul.countries { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 560px; }
ul.countries li { display: grid; grid-template-columns: 48px 1fr auto 56px; align-items: center; gap: 10px; font-size: .86rem; }
ul.countries .bar { width: 100%; }
ul.countries .val { font-family: var(--mono); color: var(--mute-1); }
ul.countries .pct { font-family: var(--mono); color: var(--navy-700); text-align: right; }

/* timeline + sparkline */
.timeline { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; max-width: 700px; }
.timeline__labels { display: flex; justify-content: space-between; font-size: .76rem; color: var(--mute-2); font-family: var(--mono); margin-top: 4px; }
.spark polyline { stroke: var(--blue-500); stroke-width: 2; }
svg.spark { width: 100%; height: auto; }

/* sankey */
.graph-wrap { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; overflow-x: auto; }
svg.sankey { width: 100%; height: auto; min-width: 680px; }
.sankey__link { fill: none; stroke: var(--navy-500); stroke-opacity: .28; }
.sankey__link:hover { stroke-opacity: .6; }
.sankey__node--left { fill: var(--blue-600); }
.sankey__node--right { fill: var(--teal); }
.sankey__label { font-family: var(--sans); font-size: 10px; fill: var(--ink); }

.error { position: fixed; bottom: 16px; left: 16px; background: #a8261c; color: #fff; padding: 10px 14px; border-radius: var(--radius-sm); font-size: .85rem; }