:root{
  --bg:#0B1220;
  --card:#101826;
  --fg:#E6EDF3;
  --muted:#9AA4B2;
  --ink:#0E141B;
  --text: #E6EDF3;
  /* paleta narrativas (4) */
  --c1:#D43F3A;  /* rojo */
  --c2:#EEA236;  /* ámbar */
  --c3:#5CB85C;  /* verde */
  --c4:#46B8DA;  /* cian */
  --cGray:#8B949E;
  --linkGray:#5b6572;
  --nodeGray:#1b2533;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto Mono, "Helvetica Neue", Arial;
  background: radial-gradient(1000px 500px at 50% -100px, #0f172a 20%, var(--bg) 60%, var(--bg) 100%);
  color:var(--fg);
}

/* layout */
.container{
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
}

.card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 18px 18px 14px 18px;
  margin: 18px 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden; /* evita desborde visual */
}

.card h2{
  margin: 0 0 12px 0;
  font-size: 20px;
  letter-spacing:.2px;
}

/* texto dentro de SVG en blanco por defecto */
.card svg text{
  fill: var(--fg);
  font-size: 12px;
}

.card svg { 
  overflow: visible; 
}

/* Sankey */
#sankey{
  width: 100%;
  height: 520px;   /* se ajusta por JS, este es fallback */
  display:block;
}
.sankey .link{ mix-blend-mode: normal; }

/* nodos sankey */
.sankey .node rect{
  fill: var(--nodeGray);
  stroke: #273142;
  stroke-width: 1;
}

/* Red */
#network{
  width: 100%;
  height: 520px;  /* fijo, puedes subir/bajar */
  display:block;
}
.network .link{
  stroke: #334155;
  stroke-opacity: .6;
}
.network .node circle{
  stroke: #111827;
  stroke-width: 1;
}

/* chips/leyenda */
.legend{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top: 6px;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding:6px 10px;
  color:var(--fg);
  font-size:12px;
}
.badge input{ transform: translateY(1px); }

/* ayuda */
.help{ color:var(--muted); font-size:12px; line-height:1.4; }