/* Balperte BRP v2 — Simulador Multi-Agente · estilos */
:root{
  --bg:#0b1120; --panel:#111a2e; --panel-2:#16223c; --line:#243049;
  --txt:#e6edf7; --muted:#8aa0c0; --accent:#38bdf8;
  --info:#38bdf8; --warn:#f59e0b; --danger:#ef4444; --success:#22c55e;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.35);
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 80% -10%,#172238 0,var(--bg) 55%);
  color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.45; min-height:100vh;
}
#app{max-width:1480px;margin:0 auto;padding:18px 20px 40px}

/* ---------- Topbar ---------- */
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.brand{display:flex;gap:14px;align-items:center}
.logo{font-size:34px;filter:drop-shadow(0 2px 6px rgba(56,189,248,.4))}
.topbar h1{font-size:20px;margin:0 0 2px;font-weight:700}
.topbar .tag{font-size:11px;background:var(--accent);color:#06283d;padding:2px 7px;border-radius:999px;vertical-align:middle;margin-left:6px}
.topbar p{margin:0;color:var(--muted);font-size:12.5px;max-width:620px}
.legend{display:flex;gap:10px;flex-wrap:wrap}
.legend .chip{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:11.5px}
.legend .dot{width:9px;height:9px;border-radius:50%}
.legend .chip small{color:var(--muted)}

/* ---------- Controls ---------- */
.controls{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:16px;box-shadow:var(--shadow)}
.scenario-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:12px}
.scenario{cursor:pointer;border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:11px 13px;transition:.15s;display:flex;gap:10px;align-items:flex-start}
.scenario:hover{border-color:var(--accent);transform:translateY(-1px)}
.scenario.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(56,189,248,.25) inset;background:#14213c}
.scenario .ic{font-size:22px;line-height:1}
.scenario b{display:block;font-size:13.5px}
.scenario span{color:var(--muted);font-size:11.5px}
.transport{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.btn{background:var(--panel-2);color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:13px;cursor:pointer;transition:.15s}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:linear-gradient(180deg,#38bdf8,#0ea5e9);color:#06283d;border:none;font-weight:700}
.speed{margin-left:auto;color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px}
.speed select{background:var(--panel-2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.progress{position:relative;height:8px;background:var(--panel-2);border-radius:999px;overflow:hidden}
.progress-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#38bdf8,#22c55e);transition:width .1s linear}
.progress #clock{position:absolute;right:8px;top:-20px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- Board ---------- */
.board{display:grid;grid-template-columns:1fr 360px;gap:16px}
@media(max-width:1080px){.board{grid-template-columns:1fr}}
.lanes{display:flex;flex-direction:column;gap:10px}

/* lane row */
.lane{display:grid;grid-template-columns:190px 1fr;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:78px}
.lane-head{padding:11px 13px;border-right:1px solid var(--line);background:linear-gradient(180deg,var(--panel-2),var(--panel))}
.lane-head .lh-top{display:flex;align-items:center;gap:8px}
.lane-head .ic{font-size:18px}
.lane-head b{font-size:13.5px}
.lane-head .role{color:var(--muted);font-size:11px;margin-top:2px}
.lane-head .agent{margin-top:7px;font-size:11px;display:flex;gap:6px;align-items:center;padding:4px 7px;border-radius:8px;background:rgba(56,189,248,.08);border:1px solid var(--line)}
.lane-head .agent .pulse{width:8px;height:8px;border-radius:50%;flex:none}
.lane-head .agent.thinking .pulse{animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}
.lane-track{position:relative;padding:10px;display:flex;gap:8px;flex-wrap:wrap;align-content:flex-start}
.lane.dim{opacity:.45}

/* node card */
.node{position:relative;min-width:150px;max-width:230px;background:var(--panel-2);border:1px solid var(--line);border-left-width:4px;border-radius:9px;padding:8px 10px;font-size:12px;opacity:0;transform:translateY(8px) scale(.96);animation:pop .35s forwards}
@keyframes pop{to{opacity:1;transform:none}}
.node .nt{font-weight:600;display:flex;gap:6px;align-items:center}
.node .nd{color:var(--muted);font-size:11px;margin-top:3px;line-height:1.35}
.node .badge{display:inline-block;margin-top:6px;font-size:10px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.node.t-status{border-left-color:var(--success)}
.node.t-action{border-left-color:var(--info)}
.node.t-notification{border-left-color:var(--accent)}
.node.t-alert{border-left-color:var(--warn)}
.node.s-danger{border-left-color:var(--danger)}
.node.s-danger .nt{color:#fecaca}
.node.s-warn{border-left-color:var(--warn)}
.node.s-success .badge{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.4);color:#bbf7d0}
.node .entity{font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--accent)}
.node.flash{box-shadow:0 0 0 2px var(--accent),0 0 22px rgba(56,189,248,.5)}

/* flying message dot */
.flyer{position:fixed;z-index:50;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent);pointer-events:none;display:flex;align-items:center;justify-content:center;font-size:9px}
.flyer.danger{background:var(--danger);box-shadow:0 0 14px var(--danger)}
.flyer.success{background:var(--success);box-shadow:0 0 14px var(--success)}

/* ---------- Side panel ---------- */
.sidepanel{display:flex;flex-direction:column;gap:14px;position:sticky;top:14px;align-self:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.panel h3{margin:0 0 9px;font-size:13px;display:flex;align-items:center;gap:6px}
.panel h3 small{color:var(--muted);font-weight:400;font-size:10.5px;background:var(--panel-2);padding:1px 6px;border-radius:6px}
.feed{list-style:none;margin:0;padding:0;max-height:230px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.feed li{font-size:11.5px;padding:7px 9px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);animation:slidein .3s}
@keyframes slidein{from{opacity:0;transform:translateX(8px)}to{opacity:1}}
.feed li .ftime{color:var(--muted);font-variant-numeric:tabular-nums;font-size:10px}
.feed li .froute{color:var(--accent);font-weight:600}
.feed li.l-danger{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.08)}
.feed li.l-warn{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.08)}
.feed li.l-success{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.08)}
.why-box{font-size:12.5px;line-height:1.5;min-height:64px;padding:10px;border-radius:9px;background:var(--panel-2);border:1px dashed var(--line);transition:.2s}
.why-box.active{border-style:solid;border-color:var(--accent);background:#14213c}
.why-box .who{display:block;font-size:10.5px;color:var(--accent);font-weight:700;margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}
.muted{color:var(--muted)}

.footer{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px;margin-top:18px;flex-wrap:wrap}
.footer code{background:var(--panel);padding:2px 6px;border-radius:6px;border:1px solid var(--line)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}