/* ===== mipx — custom layer over Bootstrap ===== */

body { font-size: 15px; }
main.container { max-width: 1200px; }
.card { border-radius: 12px; }
.card-title { font-size: 1rem; font-weight: 600; }

/* brand */
.navbar-brand .brand { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.brand-x { color: var(--bs-primary); }
.nav-link.active { font-weight: 600; }

/* theme toggle icons: dark → show sun, light → show moon */
[data-bs-theme="dark"] #themeToggle .icon-moon { display: none; }
[data-bs-theme="light"] #themeToggle .icon-sun { display: none; }
#themeToggle .theme-label { font-size: .8rem; }

/* hero */
.hero {
  background:
    radial-gradient(1200px 300px at 10% -20%, rgba(91,157,255,.22), transparent 60%),
    radial-gradient(900px 300px at 90% 120%, rgba(76,195,138,.18), transparent 60%),
    var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
}
.hero .lead { max-width: 60ch; }
.guide { padding: .25rem; }

/* interpretation ("reading") box */
.alert-reading {
  background: color-mix(in srgb, var(--bs-primary) 9%, var(--bs-tertiary-bg));
  border: 1px solid color-mix(in srgb, var(--bs-primary) 28%, transparent);
  border-left: 4px solid var(--bs-primary);
  color: var(--bs-body-color); border-radius: 10px; line-height: 1.55;
}
.alert-reading b { color: var(--bs-body-color); font-weight: 600; }
.reading-label {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bs-primary);
  border: 1px solid color-mix(in srgb, var(--bs-primary) 45%, transparent);
  border-radius: 5px; padding: 0 6px; margin-right: 8px; vertical-align: 1px;
}

/* help icon */
.help { cursor: help; color: var(--bs-secondary-color); font-size: .82em; }

/* sector-type colors */
.type-clave         { background: #4cc38a; color: #06120c; }
.type-impulsor      { background: #5b9dff; color: #06101f; }
.type-estrategico   { background: #e6b25b; color: #1a1204; }
.type-independiente { background: #9aa4b2; color: #0d1013; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; }
.dot.type-clave { background: #4cc38a; } .dot.type-impulsor { background: #5b9dff; }
.dot.type-estrategico { background: #e6b25b; } .dot.type-independiente { background: #9aa4b2; }

/* ===== propagation graph (directed network) ===== */
.graph svg.propgraph { width: 100%; max-width: 720px; height: auto; }
.propgraph .edge { fill: none; stroke: var(--bs-secondary-color); }
.propgraph .arrowhead { fill: var(--bs-secondary-color); }
.propgraph .gnode circle {
  fill: color-mix(in srgb, var(--bs-primary) calc(22% + var(--t, 0) * 50%), var(--bs-body-bg));
  stroke: var(--bs-primary); stroke-width: 1.5;
}
.propgraph .gnode.hub circle {
  fill: color-mix(in srgb, #e6b25b calc(45% + var(--t, 0) * 45%), var(--bs-body-bg));
  stroke: #e6b25b; stroke-width: 2;
}
.propgraph .gnode text {
  fill: var(--bs-body-color); font-size: 12px; font-weight: 700;
  text-anchor: middle; font-variant-numeric: tabular-nums;
}
.propgraph .gnode.hub text:first-of-type { fill: #1a1204; }
.propgraph .gnode text.cap { fill: var(--bs-secondary-color); font-size: 9px; font-weight: 500; }

/* ===== matrix heatmap ===== */
.heatmap-wrap { overflow: auto; max-height: 78vh; border: 1px solid var(--bs-border-color); border-radius: 8px; }
table.heatmap { border-collapse: separate; border-spacing: 0; font-size: 9px; }
table.heatmap thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg); }
table.heatmap th.corner { position: sticky; left: 0; top: 0; z-index: 3; background: var(--bs-body-bg); }
table.heatmap th.rowh {
  position: sticky; left: 0; z-index: 1; background: var(--bs-body-bg);
  text-align: right; padding: 0 6px; font-weight: 500; color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.heatmap th.colh { height: 48px; padding: 0; vertical-align: bottom; }
table.heatmap th.colh span {
  display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg);
  color: var(--bs-secondary-color); font-weight: 500; font-variant-numeric: tabular-nums; padding-bottom: 3px;
}
table.heatmap td.hc {
  width: 14px; height: 14px; min-width: 14px;
  background: color-mix(in srgb, var(--bs-primary) calc(var(--t) * 100%), transparent);
  border-right: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color);
}
table.heatmap td.hc:hover { outline: 2px solid var(--bs-body-color); outline-offset: -1px; }

/* MathJax: keep inline math from stretching lines */
mjx-container { margin: 0 .1em; }
mjx-container[display="true"] { margin: .4em 0; }