/* La Forja del Metal: genealogía de géneros. Misma paleta y tipografía que el globo. */
:root{
  --bg:#08080a; --panel:#100e12; --bone:#F5F0E1; --bone-dim:#8a857c; --stone:#9b9079;
  --accent-rgb:232,184,75; --accent:rgb(var(--accent-rgb)); --gold-bright:#FFD700; --bronze:#8a6a2a;
  --line:rgba(var(--accent-rgb),.16); --line-strong:rgba(var(--accent-rgb),.34);
  --font-display:'Cinzel',serif; --font-ui:'Oswald',sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --top-h:64px; --ficha-w:360px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--bone);font-family:var(--font-ui);font-weight:300;overflow:hidden}
a{color:inherit}
button{font:inherit;color:inherit}

/* ---------- barra superior (misma familia que el globo) ---------- */
.fj-top{position:fixed;left:0;right:0;top:0;height:var(--top-h);z-index:20;display:flex;align-items:center;gap:18px;
  padding:0 18px;background:linear-gradient(180deg,#0c0b0d 0%,rgba(12,11,13,.92) 100%);border-bottom:1px solid var(--line)}
.fj-brand{display:flex;flex-direction:column;line-height:1.1;flex-shrink:0}
.fj-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--bone-dim)}
.fj-eyebrow a{text-decoration:none;color:var(--accent)}
.fj-eyebrow a:hover,.fj-eyebrow a:focus-visible{color:var(--gold-bright)}
.fj-title{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:.05em;color:var(--bone)}
.fj-title b{color:var(--accent);font-weight:700}
.fj-sub{font-size:12px;color:var(--bone-dim);max-width:420px;line-height:1.35}
.fj-sub b{color:var(--bone);font-weight:400}
.fj-search{position:relative;flex:0 1 260px;min-width:150px}
.fj-search input{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line-strong);color:var(--bone);
  font:inherit;font-size:13px;padding:7px 10px;border-radius:4px;outline:none}
.fj-search input:focus{border-color:var(--accent)}
.fj-drop{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--panel);border:1px solid var(--line-strong);
  border-radius:4px;display:none;max-height:320px;overflow:auto;z-index:30}
.fj-drop.show{display:block}
.fj-opt{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:7px 10px;font-size:13px;color:var(--bone)}
.fj-opt small{color:var(--bone-dim);font-size:11px;white-space:nowrap}
.fj-opt:hover,.fj-opt.on{background:rgba(var(--accent-rgb),.12)}
.fj-empty{padding:8px 10px;font-size:12px;color:var(--bone-dim)}
.fj-dec{display:flex;gap:4px;flex-wrap:nowrap}
.fj-dec button{background:transparent;border:1px solid var(--line);color:var(--bone-dim);cursor:pointer;font-size:11.5px;
  padding:4px 8px;border-radius:3px;white-space:nowrap}
.fj-dec button:hover,.fj-dec button:focus-visible{border-color:var(--line-strong);color:var(--bone);outline:none}
.fj-dec button[aria-pressed="true"]{border-color:var(--accent);color:var(--gold-bright);background:rgba(var(--accent-rgb),.1)}
.fj-spacer{flex:1}
.fj-nav{display:flex;align-items:center;gap:8px;flex-shrink:0}
.fj-btn{background:transparent;border:1px solid var(--line-strong);color:var(--accent);cursor:pointer;text-decoration:none;
  font-family:var(--font-display);font-size:12.5px;letter-spacing:.04em;padding:5px 11px;border-radius:5px;white-space:nowrap}
.fj-btn:hover,.fj-btn:focus-visible{border-color:var(--accent);color:var(--gold-bright);outline:none}
.fj-btn .lbm{display:none}
.fj-gh{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);border-radius:5px;color:var(--bone-dim)}
.fj-gh:hover,.fj-gh:focus-visible{color:var(--gold-bright);border-color:var(--line-strong);outline:none}

/* ---------- escenario ---------- */
.fj-stage{position:fixed;left:0;right:0;top:var(--top-h);bottom:0;overflow:hidden;touch-action:none;cursor:grab}
.fj-stage.drag{cursor:grabbing}
#fj-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.fj-lane{fill:rgba(255,255,255,.018)}
.fj-lane.alt{fill:rgba(255,255,255,0)}
.fj-lanename{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;fill:rgba(245,240,225,.22);text-transform:uppercase}
.fj-infzone{fill:rgba(155,144,121,.05)}
.fj-tick{stroke:rgba(var(--accent-rgb),.09);stroke-width:1}
.fj-ticklbl{font-family:var(--font-mono);font-size:10.5px;fill:var(--bone-dim);letter-spacing:.06em}
.fj-break{stroke:rgba(155,144,121,.5);stroke-width:1;stroke-dasharray:3 4}
.fj-zonelbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;fill:var(--stone)}

.fj-edge{fill:none;stroke:rgb(var(--accent-rgb));stroke-opacity:.26;transition:stroke-opacity .15s}
.fj-edge.inf{stroke:var(--stone);stroke-opacity:.13}
.fj-edge.baja{stroke-dasharray:4 4}
.fj-node{cursor:pointer}
.fj-node circle{fill:var(--bronze);stroke:rgb(var(--accent-rgb));stroke-width:1;transition:opacity .15s}
.fj-node.raiz circle{fill:rgb(var(--accent-rgb));stroke:var(--gold-bright)}
.fj-node.inf circle{fill:#4b473f;stroke:var(--stone)}
.fj-node.nodate circle{stroke-dasharray:2.5 2}
.fj-node text{font-family:var(--font-ui);font-size:12px;font-weight:300;fill:var(--bone);paint-order:stroke;stroke:#08080a;stroke-width:3px;stroke-linejoin:round;transition:opacity .15s}
.fj-node.raiz text{font-weight:600;font-size:13px;fill:var(--gold-bright);letter-spacing:.02em}
.fj-node.inf text{fill:var(--stone);font-style:italic}
.fj-node text.fj-dec2{font-family:var(--font-mono);font-size:9.5px;font-style:normal;fill:rgba(155,144,121,.75)}
.fj-node .lbl-off{display:none}
.fj-node:focus{outline:none}
.fj-node:focus-visible circle{stroke:#fff;stroke-width:2}

/* resaltado de linaje */
#fj-svg.hl .fj-edge{stroke-opacity:.05}
#fj-svg.hl .fj-node circle,#fj-svg.hl .fj-node text{opacity:.18}
#fj-svg.hl .fj-edge.on{stroke-opacity:.85;stroke:var(--gold-bright)}
#fj-svg.hl .fj-node.on circle,#fj-svg.hl .fj-node.on text{opacity:1}
#fj-svg.hl .fj-node.on .lbl-off{display:inline}
#fj-svg.hl .fj-node.me circle{stroke:#fff;stroke-width:2}
/* filtro de década / búsqueda */
.fj-node.dim circle,.fj-node.dim text{opacity:.14}
.fj-edge.dim{stroke-opacity:.04}

/* ---------- controles, minimapa, leyenda ---------- */
.fj-ctrl{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:4px;z-index:5}
.fj-ctrl button{width:34px;height:34px;background:rgba(16,14,18,.85);border:1px solid var(--line-strong);color:var(--accent);
  cursor:pointer;border-radius:4px;font-size:16px;line-height:1}
.fj-ctrl button:hover,.fj-ctrl button:focus-visible{border-color:var(--accent);color:var(--gold-bright);outline:none}
.fj-mini{position:absolute;right:58px;top:14px;width:180px;height:112px;background:rgba(16,14,18,.85);border:1px solid var(--line);
  border-radius:4px;z-index:5;cursor:pointer}
.fj-mini .v{fill:rgba(var(--accent-rgb),.08);stroke:var(--accent);stroke-width:1}
.fj-legend{position:absolute;left:14px;bottom:8px;right:14px;z-index:5;display:flex;flex-wrap:wrap;gap:2px 16px;align-items:center;
  font-size:11.5px;color:var(--bone-dim);line-height:1.5;pointer-events:none}
.fj-legend .lg-hint{color:rgba(138,133,124,.75)}
.fj-legend b{color:var(--bone);font-weight:400}
.lg-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.lg-line{display:inline-block;width:22px;height:0;border-top:1.6px solid var(--accent);margin-right:6px;vertical-align:3px;opacity:.8}
.lg-line.baja{border-top-style:dashed}
.fj-tip{position:fixed;z-index:40;pointer-events:none;background:#0d0c0b;border:1px solid var(--line-strong);border-radius:4px;
  padding:5px 9px;font-size:12px;color:var(--bone);opacity:0;transition:opacity .1s;white-space:nowrap}
.fj-tip.show{opacity:1}
.fj-tip small{color:var(--bone-dim);margin-left:6px}

/* ---------- ficha lateral ---------- */
.fj-ficha{position:fixed;right:0;top:var(--top-h);bottom:0;width:var(--ficha-w);z-index:15;background:rgba(14,12,16,.97);
  border-left:1px solid var(--line-strong);transform:translateX(100%);transition:transform .22s ease;overflow-y:auto;padding:18px 20px 28px}
.fj-ficha.show{transform:none}
.fj-ficha .x{position:absolute;right:12px;top:12px;background:none;border:1px solid var(--line);color:var(--bone-dim);width:28px;height:28px;border-radius:4px;cursor:pointer}
.fj-ficha .x:hover,.fj-ficha .x:focus-visible{color:var(--gold-bright);border-color:var(--line-strong);outline:none}
.f-kind{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--stone);margin-bottom:6px;padding-right:34px}
.f-name{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--gold-bright);line-height:1.15}
.f-en{font-size:12.5px;color:var(--bone-dim);margin-top:2px}
.f-meta{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.f-tag{font-size:11.5px;border:1px solid var(--line);border-radius:3px;padding:2px 7px;color:var(--bone-dim)}
.f-tag b{color:var(--bone);font-weight:400}
.f-tag.alta b{color:#9fd18b}.f-tag.media b{color:var(--accent)}.f-tag.baja b{color:#d9826f}
.f-go{display:block;width:100%;text-align:center;margin:4px 0 14px;background:rgba(var(--accent-rgb),.12);border:1px solid var(--accent);
  color:var(--gold-bright);text-decoration:none;font-family:var(--font-display);font-size:13px;letter-spacing:.05em;padding:8px;border-radius:4px}
.f-go:hover,.f-go:focus-visible{background:rgba(var(--accent-rgb),.22);outline:none}
.f-desc{font-size:13.5px;line-height:1.55;color:var(--bone);margin-bottom:12px}
.f-h{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--stone);margin:14px 0 5px}
.f-list{font-size:13px;line-height:1.5;color:var(--bone)}
.f-links{display:flex;flex-wrap:wrap;gap:5px}
.f-links button{background:none;border:1px solid var(--line);color:var(--bone);cursor:pointer;font-size:12.5px;padding:2px 8px;border-radius:3px}
.f-links button:hover,.f-links button:focus-visible{border-color:var(--accent);color:var(--gold-bright);outline:none}
.f-map{width:100%;height:auto;display:block;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:3px}
.f-map .land{fill:#23201c}
.f-map circle{fill:rgba(var(--accent-rgb),.55);stroke:var(--gold-bright);stroke-width:.5}
.f-top{list-style:none;font-size:12.5px;margin-top:6px;columns:2;column-gap:14px}
.f-top li{display:flex;justify-content:space-between;gap:6px;break-inside:avoid;color:var(--bone)}
.f-top li span{color:var(--bone-dim);font-family:var(--font-mono);font-size:11px}
.f-note{font-size:11.5px;color:var(--bone-dim);line-height:1.45;margin-top:5px}
.f-src a{display:block;font-size:12px;color:var(--accent);word-break:break-all;margin-bottom:3px}

/* ---------- 3D ---------- */
.fj-3d{position:fixed;left:0;right:0;top:var(--top-h);bottom:0;z-index:12;background:radial-gradient(ellipse at 50% 45%,#141016 0%,#08080a 70%)}
.fj-3d canvas{display:block;width:100%;height:100%}
.fj-3d .l3{position:absolute;left:0;top:0;pointer-events:none;font-size:12px;color:var(--bone);white-space:nowrap;
  transform:translate(-50%,-150%);text-shadow:0 0 4px #000,0 0 2px #000}
.fj-3d .l3.raiz{font-family:var(--font-display);font-weight:700;color:var(--gold-bright);font-size:12.5px}
.fj-3d .l3.hov{color:#fff}
.fj-3d-bar{position:absolute;left:14px;top:14px;z-index:2;display:flex;gap:8px;align-items:center}
.fj-3d-bar span{font-size:12px;color:var(--bone-dim)}

@media (max-width:1180px){ .fj-sub{display:none} }
@media (max-width:900px){
  :root{--top-h:104px}
  .fj-top{flex-wrap:wrap;height:var(--top-h);gap:8px 12px;padding:8px 12px;align-content:center}
  .fj-search{order:3;flex:1 1 100%}
  .fj-dec{order:4;overflow-x:auto;display:none}
  .fj-legend{display:none}
}
@media (max-width:768px){
  .fj-mini{display:none}
  .fj-ficha{left:0;right:0;top:auto;width:auto;max-height:70vh;border-left:0;border-top:1px solid var(--line-strong);transform:translateY(100%)}
  .fj-ficha.show{transform:none}
  .fj-btn .lb{display:none}
  .fj-btn .lbm{display:inline}
}
@media (prefers-reduced-motion:reduce){ .fj-ficha,.fj-node circle,.fj-node text,.fj-edge{transition:none} }