/* ============================================================
   Estilos extraídos de index.html (Fase 2 — CSS fuera del HTML)
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0f0f0f;color:#e5e5e5;min-height:100vh}

.header{text-align:center;padding:44px 24px 28px;border-bottom:1px solid #1a1a1a}
.header-logo{max-width:180px;height:auto;margin-bottom:20px}
.header h1{font-size:26px;font-weight:700;color:#fff;letter-spacing:-.4px;margin-bottom:6px}
.header p{font-size:13px;color:#555;margin-bottom:14px}
.header-sources{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.src{font-size:10px;padding:3px 10px;border-radius:3px;background:#161616;border:1px solid #222;color:#555}

.canvas{max-width:820px;margin:0 auto;padding:40px 24px 80px;position:relative}
.spine{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#1a1a1a;transform:translateX(-50%);z-index:0;pointer-events:none}

/* phase label */
.ph{display:flex;align-items:center;justify-content:center;gap:8px;margin:44px auto 18px;width:fit-content;padding:5px 18px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;position:relative;z-index:1;border:1px solid;cursor:default}
.ph-dot{width:6px;height:6px;border-radius:50%}
.ph0{background:#111;border-color:#2a2a2a;color:#666} .ph0 .ph-dot{background:#555}
.ph1{background:#13102a;border-color:#2d2560;color:#a89bf5} .ph1 .ph-dot{background:#6c5dd3}
.ph2{background:#0d1828;border-color:#1a3a5c;color:#79c0ff} .ph2 .ph-dot{background:#2d7dd2}
.ph3{background:#0d1f19;border-color:#1a4035;color:#56d3a0} .ph3 .ph-dot{background:#2a9d7c}
.ph4{background:#1a1200;border-color:#3d2e0d;color:#e3b341} .ph4 .ph-dot{background:#c47c1a}
.ph5{background:#1a0d0a;border-color:#3d1a14;color:#f4956a} .ph5 .ph-dot{background:#b84030}
.ph6{background:#0d1f0f;border-color:#1a3d25;color:#56d364} .ph6 .ph-dot{background:#2a8c4a}
.phx{background:#111;border-color:#222;color:#555;margin-top:40px} .phx .ph-dot{background:#444}

/* connector */
.c{width:1px;height:20px;margin:0 auto;position:relative;z-index:1}
.c0{background:#2a2a2a} .c1{background:#2d2560} .c2{background:#1a3a5c}
.c3{background:#1a4035} .c4{background:#3d2e0d} .c5{background:#3d1a14} .c6{background:#1a3d25}

/* main node */
.node{
  display:block;margin:0 auto 0;width:300px;position:relative;z-index:1;
  border-radius:8px;border:1px solid;padding:12px 16px;
  cursor:pointer;text-decoration:none;transition:transform .12s,filter .12s;
  text-align:left;
}
.node:hover{transform:translateY(-2px);filter:brightness(1.12)}
.node .nt{font-size:12px;font-weight:600;display:block;margin-bottom:3px}
.node .ns{font-size:10px;opacity:.6;display:block;line-height:1.4}
.node .tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:8px}
.tag{font-size:9px;padding:2px 7px;border-radius:20px;border:1px solid}

/* color variants */
.n0{background:#111;border-color:#2a2a2a} .n0 .nt{color:#ccc}
.n1{background:#13102a;border-color:#2d2560} .n1 .nt{color:#c4b8ff}
.n2{background:#0d1828;border-color:#1a3a5c} .n2 .nt{color:#79c0ff}
.n3{background:#0d1f19;border-color:#1a4035} .n3 .nt{color:#56d3a0}
.n4{background:#1a1200;border-color:#3d2e0d} .n4 .nt{color:#e3b341}
.n5{background:#1a0d0a;border-color:#3d1a14} .n5 .nt{color:#f4956a}
.n6{background:#0d1f0f;border-color:#1a3d25} .n6 .nt{color:#56d364}

.tg0{background:#111;border-color:#2a2a2a;color:#555}
.tg1{background:#13102a;border-color:#2d2560;color:#a89bf5}
.tg2{background:#0d1828;border-color:#1a3a5c;color:#79c0ff}
.tg3{background:#0d1f19;border-color:#1a4035;color:#56d3a0}
.tg4{background:#1a1200;border-color:#3d2e0d;color:#e3b341}
.tg5{background:#1a0d0a;border-color:#3d1a14;color:#f4956a}
.tg6{background:#0d1f0f;border-color:#1a3d25;color:#56d364}

/* rows with side branches */
.row{display:flex;align-items:center;justify-content:center;gap:0;position:relative;z-index:1}
.hline{height:1px;width:48px;flex-shrink:0}
.hl0{background:#2a2a2a} .hl1{background:#2d2560} .hl2{background:#1a3a5c}
.hl3{background:#1a4035} .hl4{background:#3d2e0d} .hl5{background:#3d1a14}
.hl6{background:#1a3d25} .hlx{background:#222}

.side{width:200px;flex-shrink:0;border-radius:8px;border:1px solid;padding:10px 13px;cursor:pointer;text-decoration:none;transition:transform .12s,filter .12s}
.side:hover{transform:translateY(-2px);filter:brightness(1.12)}
.side .nt{font-size:11px;font-weight:600;display:block;margin-bottom:2px}
.side .ns{font-size:9.5px;opacity:.55;display:block}
.side .tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}

/* small cluster */
.cluster{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;max-width:760px;margin:0 auto}
.cluster .node{width:226px;margin:0}

/* start/end pill */
.pill-wrap{display:flex;justify-content:center;position:relative;z-index:1;margin:4px 0}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:11px 32px;border-radius:40px;font-size:13px;font-weight:700;cursor:pointer;border:2px solid;transition:opacity .15s;letter-spacing:-.2px}
.pill:hover{opacity:.88}
.pill-s{background:#e6edf3;color:#0f0f0f;border-color:#e6edf3}
.pill-e{background:#238636;color:#fff;border-color:#238636}

/* always-on grid */
.always-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:760px;margin:0 auto;position:relative;z-index:1}
.ac{background:#111;border:1px solid #222;border-radius:8px;padding:11px 13px;cursor:pointer;text-decoration:none;transition:transform .12s,filter .12s}
.ac:hover{transform:translateY(-2px);filter:brightness(1.1)}
.ac .nt{font-size:11px;font-weight:600;color:#ccc;display:block;margin-bottom:2px}
.ac .ns{font-size:9.5px;color:#555;display:block;line-height:1.4}
.ac .tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:56px;padding-top:24px;border-top:1px solid #1a1a1a;position:relative;z-index:1}
.legend-item{display:flex;align-items:center;gap:6px;font-size:10px;color:#555}
.legend-dot{width:8px;height:8px;border-radius:2px}

/* tooltip */
.tt{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1a1a1a;border:1px solid #2a2a2a;border-radius:8px;padding:9px 16px;font-size:11px;color:#ccc;max-width:420px;text-align:center;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .18s;z-index:200}
.tt.show{opacity:1}

/* footer */
.footer{text-align:center;padding:40px 24px;border-top:1px solid #1a1a1a;margin-top:60px}
.footer-credit{max-width:150px;height:auto;opacity:0.8;transition:opacity .2s}
.footer-credit:hover{opacity:1}

@media(max-width:640px){
  .row{flex-direction:column;align-items:center}
  .hline{display:none}
  .always-grid{grid-template-columns:1fr 1fr}
  .cluster .node{width:190px}
}