/* ===== Board interativo (pan/zoom) dos fluxos Alpha Desk =====
   Uso: .bhead (barra fixa com filtros) + .board (viewport) > .world (conteúdo).
   Para remodelar: edite as .lane e .bnode no HTML; o JS não precisa mudar. */
:root{
  --bg:#0a0f1a; --bg2:#111827; --bg3:#1f2937;
  --fg:#f9fafb; --muted:#9ca3af; --muted2:#6b7280; --border:#374151;
  --aqua:#2dd4bf; --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --purple:#a855f7; --blue:#3b82f6;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}

/* ===== barra superior ===== */
.bhead{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);background:rgba(10,15,26,.92);flex-wrap:wrap;z-index:10}
.bhead .back{color:var(--aqua);text-decoration:none;font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px}
.bhead .back:hover{background:var(--bg3)}
.bhead .logoimg{width:26px;height:26px;border-radius:7px;background:#fff;object-fit:contain}
.bhead h1{font-size:15px;margin:0;font-weight:600;letter-spacing:-.01em}
.bhead .sub{font-size:11.5px;color:var(--muted2)}
.bhead .hint{margin-left:auto;font-size:11.5px;color:var(--muted2)}
.zoomctl{display:flex;align-items:center;gap:4px}
.zoomctl button{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--fg);cursor:pointer;font-size:14px;line-height:1}
.zoomctl button:hover{border-color:var(--aqua)}
.zoomctl .zpct{font-size:11.5px;color:var(--muted);min-width:38px;text-align:center;font-variant-numeric:tabular-nums}

/* pills de filtro por categoria */
.fpills{display:flex;gap:6px;flex-wrap:wrap}
.fpill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:5px 11px;cursor:pointer;font-family:inherit;transition:color .12s,border-color .12s}
.fpill .fdot{width:8px;height:8px;border-radius:50%}
.fpill:hover{color:var(--fg)}
.fpill.on{color:var(--fg);border-color:var(--aqua);background:var(--bg3)}

/* ===== viewport + mundo ===== */
.board{flex:1;position:relative;overflow:hidden;cursor:grab;touch-action:none}
.board.grabbing{cursor:grabbing}
.world{position:absolute;top:0;left:0;width:1900px;transform-origin:0 0;padding:48px 56px 220px;
  background-image:radial-gradient(rgba(148,163,184,.14) 1.2px,transparent 1.2px);background-size:26px 26px}

/* ===== raias (contêineres por ator) ===== */
.lane{border:1px solid var(--border);border-radius:16px;background:rgba(17,24,39,.82);margin-bottom:26px;padding:16px 18px 18px}
.lane-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.lane-row{display:flex;align-items:stretch;gap:10px;flex-wrap:nowrap}

/* ===== nós ===== */
.bnode{width:215px;flex:0 0 215px;border:1px solid var(--border);border-radius:12px;background:var(--bg2);padding:11px 13px;position:relative;transition:opacity .15s,border-color .12s}
.bnode b{display:block;font-size:13px;margin-bottom:3px}
.bnode small{display:block;font-size:11.5px;color:var(--muted);line-height:1.45}
.bnode .tag{position:absolute;top:-9px;left:10px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-radius:5px;padding:1px 7px;color:#04121a}
/* cor por categoria (data-cat no nó + na pill) */
.bnode[data-cat="estacao"]{border-color:rgba(59,130,246,.5)}   .bnode[data-cat="estacao"] .tag{background:var(--blue);color:#eff6ff}
.bnode[data-cat="shell"]{border-color:rgba(45,212,191,.5)}     .bnode[data-cat="shell"] .tag{background:var(--aqua)}
.bnode[data-cat="usuario"]{border-color:rgba(34,197,94,.5)}    .bnode[data-cat="usuario"] .tag{background:var(--green)}
.bnode[data-cat="bloqueio"]{border-color:rgba(239,68,68,.55)}  .bnode[data-cat="bloqueio"] .tag{background:var(--red);color:#fef2f2}
.bnode[data-cat="ti"]{border-color:rgba(245,158,11,.55)}       .bnode[data-cat="ti"] .tag{background:var(--amber)}
.bnode[data-cat="ia"]{border-color:rgba(168,85,247,.55)}       .bnode[data-cat="ia"] .tag{background:var(--purple);color:#faf5ff}
.bnode.dim{opacity:.22}

/* setas entre nós */
.barrow{align-self:center;color:var(--muted2);font-size:18px;font-weight:700;flex:0 0 auto}
.barrow.red{color:var(--red)}
.barrow.aqua{color:var(--aqua)}

/* ===== notas soltas (post-its) ===== */
.note{position:absolute;width:235px;background:#fef3c7;color:#451a03;border-radius:4px;padding:13px 14px;font-size:12px;line-height:1.5;box-shadow:0 8px 20px rgba(0,0,0,.4);transform:rotate(-1.2deg)}
.note b{display:block;margin-bottom:3px;font-size:12.5px}
.note.n2{transform:rotate(1.4deg);background:#e0f2f1;color:#134e4a}
.note .pin{position:absolute;top:-8px;left:50%;margin-left:-6px;width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 2px 4px rgba(0,0,0,.4)}

/* rodapé fixo discreto */
.bfoot{position:absolute;left:16px;bottom:12px;font-size:11px;color:var(--muted2);z-index:10;background:rgba(10,15,26,.8);padding:4px 10px;border-radius:8px}
.bfoot a{color:var(--aqua);text-decoration:none;font-weight:600}