/* ============================================================================
   Foconix Bots — tema claro, na linha do ManyChat.
   Branco, tipografia pesada nos títulos, azul só no que é ação principal.
   ========================================================================== */
/* Paleta Foconix (opção B aprovada em 13/10/26): os valores vêm do tema CLARO do
   CRM — crm-masterfoco/public/styles.css, bloco `body.light`. Mesmo azul, mesmo
   cinza de fundo, mesma borda. Quem usa os dois sistemas vê a mesma casa. */
:root{
  --bg:#eef1f4; --bg2:#f1f3f6; --card:#fff; --soft:#f1f3f6; --border:#e2e6ea; --border2:#d3d9df;
  --ink:#1a1f26; --ink2:#3c4753; --muted:#63707e; --muted2:#93a0ad;
  --blue:#14539A; --blue-d:#0f3d72; --green:#1a7f37; --red:#e11d2a; --amber:#c07800; --purple:#7c5cff;
  --trig:#14539A; --logic:#7c5cff; --act:#1a7f37;
  --tint-trig:#e8f0fa; --tint-logic:#f0ecff; --tint-act:#e7f6ec;
  --ig1:#e1306c; --wa:#25d366; --fb:#0084ff; --tg:#2aabee; --tt:#111;
  --sh:0 1px 2px rgba(16,24,40,.05);
  --sh2:0 4px 12px rgba(16,24,40,.10);
  --sh3:0 12px 32px rgba(16,24,40,.16);
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:var(--blue); text-decoration:none; }
h1,h2,h3{ letter-spacing:-.022em; }

/* ------------------------------------------------------------------ marca --- */
.marca{ display:inline-flex; align-items:center; gap:8px; font-weight:900; font-size:19px; letter-spacing:-.03em; color:var(--ink); }
.marca i{ font-style:normal; width:24px; height:24px; border-radius:6px; background:var(--blue); color:#fff; display:grid; place-items:center; font-size:13px; }
.marca b{ font-weight:900; }
.marca span{ font-weight:500; }

/* ------------------------------------------------------------------ botões --- */
.btn{ border:1px solid var(--border2); background:#fff; border-radius:8px; padding:9px 15px; font-size:14px; font-weight:600; color:var(--ink2); cursor:pointer; white-space:nowrap; box-shadow:var(--sh); display:inline-flex; align-items:center; gap:7px; justify-content:center; }
.btn:hover{ background:var(--bg2); }
.btn.primary{ background:var(--blue); border-color:var(--blue); color:#fff; }
.btn.primary:hover{ background:var(--blue-d); }
.btn.green{ background:var(--green); border-color:var(--green); color:#fff; }
.btn.ghost{ border-color:transparent; box-shadow:none; background:transparent; }
.btn.ghost:hover{ background:var(--soft); }
.btn.del{ color:var(--red); border-color:#fda29b; }
.btn.lg{ padding:12px 20px; font-size:15px; }
.btn.sm{ padding:6px 11px; font-size:13px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn.block{ width:100%; }

.pill{ font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px; display:inline-block; letter-spacing:.02em; }
.pill.free{ background:var(--soft); color:var(--muted); }
.pill.on{ background:var(--tint-act); color:var(--act); }
.pill.off{ background:var(--soft); color:var(--muted); }
.pill.demo{ background:#fef0c7; color:var(--amber); }
.pill.err{ background:#fee4e2; color:var(--red); }

.hint{ font-size:13.5px; color:var(--ink2); background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; line-height:1.55; }
.hint b{ color:var(--ink); }
.hint.warn{ background:#fffaeb; border-color:#fedf89; }
.hint.err{ background:#fef3f2; border-color:#fda29b; }

/* =================================================================== LOGIN === */
.auth{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-l{ padding:38px 56px; display:flex; flex-direction:column; }
.auth-art{ margin:auto 0; }
.auth-art .blob{ width:190px; height:150px; border-radius:50% 50% 46% 54%/58% 42% 58% 42%; background:#7ef0ea; position:relative; }
.auth-art .blob:after{ content:""; position:absolute; left:34px; top:-26px; width:110px; height:170px; border-radius:52px 52px 40px 40px;
  background:
    repeating-conic-gradient(#6b3df0 0% 25%, #d99a1e 0% 50%) 0 0/38px 38px; }
.auth-l h1{ font-size:52px; line-height:1.06; font-weight:900; margin:26px 0 14px; max-width:9ch; }
.auth-l p{ color:var(--muted); margin:0; font-size:15px; }
.auth-r{ padding:38px 56px; display:flex; flex-direction:column; }
.auth-top{ display:flex; align-items:center; gap:18px; justify-content:flex-end; }
.auth-box{ margin:auto; width:min(420px,100%); }
.auth-box label{ display:block; font-size:14px; font-weight:600; margin:0 0 6px; }
.auth-box input{ width:100%; border:1px solid var(--border2); border-radius:8px; padding:11px 13px; font-size:15px; background:#fff; margin-bottom:6px; }
.auth-box input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px #1877f21f; }
.auth-box .sub{ font-size:13.5px; color:var(--muted); margin:0 0 18px; line-height:1.5; }
.auth-div{ display:flex; align-items:center; gap:12px; margin:22px 0 16px; color:var(--muted2); font-size:12px; font-weight:600; letter-spacing:.06em; }
.auth-div:before,.auth-div:after{ content:""; height:1px; background:var(--border); flex:1; }
.auth-socials{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.auth-socials button{ border:1px solid var(--border2); background:#fff; border-radius:8px; height:46px; cursor:pointer; display:grid; place-items:center; }
.auth-socials button:disabled{ opacity:.45; cursor:not-allowed; }
.auth-socials button:hover:not(:disabled){ background:var(--bg2); }
.auth-foot{ text-align:center; font-size:14px; color:var(--muted); margin-top:18px; }
.auth-legal{ display:flex; gap:26px; justify-content:center; font-size:14px; color:var(--ink2); margin-top:auto; padding-top:26px; }
.auth-err{ color:var(--red); font-size:13.5px; min-height:19px; margin-top:10px; }
@media (max-width:900px){ .auth{ grid-template-columns:1fr; } .auth-l{ display:none; } }

/* ================================================================= PERFIL === */
.topo{ display:flex; align-items:center; padding:24px 44px 0; }
.topo .dir{ margin-left:auto; display:flex; align-items:center; gap:20px; font-size:14px; }
.topo .user{ display:flex; align-items:center; gap:9px; font-weight:600; cursor:pointer; }
.avatar{ width:30px; height:30px; border-radius:50%; object-fit:cover; background:var(--soft); display:grid; place-items:center; font-size:12px; font-weight:800; color:var(--muted); flex:none; }
.avatar.lg{ width:42px; height:42px; font-size:15px; }
.perfil{ max-width:1180px; margin:0 auto; padding:40px 44px 60px; }
.abas{ display:flex; gap:28px; border-bottom:1px solid var(--border); margin-bottom:30px; }
.aba{ background:none; border:0; padding:0 0 14px; font-size:15px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.aba.on{ color:var(--ink); border-color:var(--blue); }
.barra{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.busca{ display:flex; align-items:center; gap:9px; color:var(--muted); flex:1; }
.busca input{ border:0; background:none; font-size:16px; width:100%; padding:8px 0; }
.busca input:focus{ outline:none; }

.tbl{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.tbl th{ text-align:left; font-size:13.5px; font-weight:700; color:var(--ink2); padding:16px 18px; background:#fff; border-bottom:1px solid var(--border); white-space:nowrap; }
.tbl td{ padding:16px 18px; border-bottom:1px solid var(--border); font-size:14.5px; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ cursor:pointer; }
.tbl tbody tr:hover{ background:var(--bg2); }
.tbl .nome{ display:flex; align-items:center; gap:12px; font-weight:600; }
.tbl .ico{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:14px; flex:none; }
.iconbtn{ border:0; background:none; cursor:pointer; color:var(--muted2); padding:4px; border-radius:6px; }
.iconbtn:hover{ background:var(--soft); color:var(--ink2); }
.iconbtn.on{ color:var(--blue); }
.vazio{ border:1px dashed var(--border2); border-radius:12px; padding:44px; text-align:center; color:var(--muted); }
.vazio h3{ margin:0 0 6px; font-size:17px; color:var(--ink); }
.vazio p{ margin:0 auto 20px; max-width:440px; font-size:14px; }

/* ============================================================ NOVA CONTA === */
.wiz{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.wiz-l{ padding:38px 56px; display:flex; flex-direction:column; }
.wiz-l h1{ font-size:46px; line-height:1.08; font-weight:900; margin:0 0 16px; max-width:11ch; }
.wiz-l p{ color:var(--muted); margin:0; max-width:34ch; }
.wiz-mid{ margin:auto 0; }
.wiz-r{ padding:38px 56px; overflow-y:auto; max-height:100vh; }
.wiz-list{ max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.canal{ display:flex; gap:16px; align-items:flex-start; text-align:left; background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; cursor:pointer; box-shadow:var(--sh); width:100%; }
.canal:hover{ border-color:var(--border2); box-shadow:var(--sh2); }
.canal[disabled]{ cursor:not-allowed; opacity:.72; }
.canal .ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; flex:none; }
.canal h3{ margin:0 0 4px; font-size:17px; font-weight:800; }
.canal p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.5; }
.canal .tag{ display:inline-block; margin-top:9px; font-size:11.5px; font-weight:700; background:var(--soft); color:var(--muted); border-radius:20px; padding:3px 10px; }
.voltar{ display:inline-flex; align-items:center; gap:8px; color:var(--ink2); font-weight:600; font-size:15px; background:none; border:0; cursor:pointer; padding:0; margin-top:auto; }
.conectar{ max-width:470px; margin:0 auto; }
.conectar h2{ font-size:22px; margin:0 0 10px; }
.conectar p{ color:var(--ink2); margin:0 0 22px; line-height:1.6; }
.parceiro{ background:var(--bg2); border-radius:12px; padding:18px 20px; display:flex; align-items:center; gap:16px; margin-top:16px; font-size:14px; color:var(--ink2); }
.passos{ counter-reset:p; margin:0; padding:0; list-style:none; }
.passos li{ counter-increment:p; position:relative; padding:0 0 16px 38px; font-size:14px; color:var(--ink2); line-height:1.55; }
.passos li:before{ content:counter(p); position:absolute; left:0; top:0; width:25px; height:25px; border-radius:50%; background:var(--soft); color:var(--ink); font-size:12.5px; font-weight:800; display:grid; place-items:center; }
.passos code{ background:var(--soft); border-radius:5px; padding:1px 6px; font-size:12.5px; }
.ativos{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.ativo{ display:flex; align-items:center; gap:13px; border:1px solid var(--border); border-radius:12px; padding:14px 16px; background:#fff; cursor:pointer; text-align:left; width:100%; }
.ativo:hover{ border-color:var(--blue); }
.ativo .n{ font-weight:700; font-size:14.5px; }
.ativo .d{ font-size:12.5px; color:var(--muted); }

/* ================================================================ PAINEL === */
.app{ display:flex; min-height:100vh; }
.side{ width:250px; flex:none; border-right:1px solid var(--border); display:flex; flex-direction:column; height:100vh; position:sticky; top:0; background:#fff; }
.side-conta{ display:flex; align-items:center; gap:10px; padding:16px 14px; cursor:pointer; border-bottom:1px solid var(--border); }
.side-conta:hover{ background:var(--bg2); }
.side-conta .n{ font-weight:700; font-size:14px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-conta .chev{ margin-left:auto; color:var(--muted2); flex:none; }
.side-nav{ padding:12px 10px; display:flex; flex-direction:column; gap:2px; }
.nav-item{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:0; border-radius:8px; padding:10px 12px; font-size:14.5px; font-weight:600; color:var(--ink2); cursor:pointer; }
.nav-item:hover{ background:var(--bg2); }
.nav-item.on{ background:var(--soft); color:var(--ink); }
.nav-item .ni{ width:20px; display:grid; place-items:center; flex:none; color:var(--muted); }
.nav-item.on .ni{ color:var(--ink); }
.nav-item .cnt{ margin-left:auto; background:var(--blue); color:#fff; font-size:11px; font-weight:700; border-radius:20px; padding:1px 8px; }
.side-foot{ margin-top:auto; padding:12px 10px 16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:2px; }
.side-uso{ padding:12px; display:flex; align-items:center; gap:11px; font-size:13px; color:var(--muted); }
.anel{ width:26px; height:26px; border-radius:50%; border:3px solid var(--border2); flex:none; }
.main{ flex:1; min-width:0; height:100vh; overflow:auto; }
.view[hidden]{ display:none; }

.ph{ padding:26px 34px 0; display:flex; align-items:flex-start; gap:16px; }
.ph h1{ font-size:19px; margin:0; font-weight:800; }
.ph .dir{ margin-left:auto; display:flex; gap:9px; align-items:center; }
.hero{ padding:22px 34px 0; }
.hero h2{ font-size:42px; font-weight:900; margin:0 0 8px; letter-spacing:-.03em; }
.hero .sub{ color:var(--ink2); font-size:15px; }
.sec{ padding:34px 34px 0; }
.sec-h{ display:flex; align-items:baseline; margin-bottom:16px; }
.sec-h h3{ font-size:20px; font-weight:800; margin:0; }
.sec-h a{ margin-left:auto; font-size:14px; font-weight:600; }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.card{ border:1px solid var(--border); border-radius:14px; padding:20px; background:#fff; box-shadow:var(--sh); text-align:left; cursor:pointer; }
.card:hover{ box-shadow:var(--sh2); border-color:var(--border2); }
.card h4{ margin:0 0 26px; font-size:17px; font-weight:700; line-height:1.35; }
.card .foot{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); font-weight:600; }
.card .foot .hot{ margin-left:auto; background:#fef0c7; color:var(--amber); border-radius:4px; padding:2px 7px; font-size:10.5px; font-weight:800; letter-spacing:.04em; }
.pad{ padding:22px 34px 50px; }

/* -------------------------------------------------------------- listagens --- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; }
.fcard{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:17px; box-shadow:var(--sh); }
.fcard .ttl{ font-size:15.5px; font-weight:700; }
.fcard .trg{ display:inline-flex; align-items:center; gap:6px; background:var(--tint-trig); color:var(--trig); border-radius:20px; padding:3px 10px; font-size:11.5px; font-weight:700; margin-top:10px; }
.fcard .meta{ font-size:12.5px; color:var(--muted); margin-top:12px; display:flex; gap:14px; flex-wrap:wrap; }
.fcard .row{ display:flex; align-items:center; margin-top:15px; gap:7px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.chip{ border:1px solid var(--border2); background:#fff; border-radius:20px; padding:6px 13px; font-size:13px; font-weight:600; cursor:pointer; color:var(--muted); }
.chip.on{ border-color:var(--blue); color:var(--blue); background:var(--tint-trig); }
.chip b{ color:var(--ink); } .chip.on b{ color:var(--blue); }
.row-card{ border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:10px; background:#fff; }
.row-hd{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.row-nm{ font-weight:700; font-size:14.5px; }
.row-sub{ font-size:12.5px; color:var(--muted); font-weight:400; }
.badge{ font-size:11.5px; font-weight:700; padding:3px 11px; border-radius:20px; margin-left:auto; white-space:nowrap; }
.badge.run{ background:var(--tint-trig); color:var(--blue); }
.badge.wait{ background:#fef0c7; color:var(--amber); }
.badge.done{ background:var(--tint-act); color:var(--act); }
.badge.stop{ background:var(--soft); color:var(--muted); }
.badge.error{ background:#fee4e2; color:var(--red); }
.row-meta{ display:flex; gap:16px; font-size:12.5px; color:var(--muted); margin-top:9px; flex-wrap:wrap; }
.row-meta b{ color:var(--ink); font-weight:600; }
.tl{ margin-top:12px; border-top:1px dashed var(--border2); padding-top:10px; display:none; }
.row-card.open .tl{ display:block; }
.tli{ display:flex; gap:10px; font-size:12.5px; padding:3px 0; }
.tlt{ color:var(--muted2); font-variant-numeric:tabular-nums; flex:none; width:92px; }
.tl-ok{ color:var(--act); font-weight:700; } .tl-err{ color:var(--red); font-weight:700; } .tl-skip{ color:var(--amber); font-weight:700; }
.tag{ display:inline-block; background:var(--soft); border-radius:20px; padding:2px 9px; font-size:11.5px; font-weight:600; margin:1px 3px 1px 0; color:var(--ink2); }

/* ================================================================= MODAL === */
.ovl{ position:fixed; inset:0; background:rgba(16,24,40,.5); z-index:950; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal{ background:#fff; border-radius:16px; max-height:88vh; overflow:auto; box-shadow:var(--sh3); }
.modal-h{ display:flex; align-items:flex-start; gap:12px; padding:24px 26px 6px; }
.modal-h h3{ margin:0; font-size:21px; font-weight:800; }
.modal-h .sub{ font-size:14px; color:var(--muted); margin-top:5px; max-width:580px; line-height:1.5; }
.modal-x{ margin-left:auto; border:0; background:var(--soft); width:34px; height:34px; border-radius:9px; font-size:18px; cursor:pointer; color:var(--ink2); flex:none; }
.mgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px; padding:18px 26px 26px; }
.mcard{ text-align:left; background:#fff; border:1px solid var(--border); border-radius:14px; padding:17px; cursor:pointer; color:var(--ink); box-shadow:var(--sh); }
.mcard:hover{ border-color:var(--blue); box-shadow:var(--sh2); }
.mcard.blank{ border-style:dashed; box-shadow:none; }
.mci{ font-size:24px; } .mct{ font-weight:800; font-size:15px; margin-top:10px; }
.mcd{ font-size:13px; color:var(--muted); line-height:1.5; margin-top:5px; min-height:56px; }
.mcg{ display:inline-block; margin-top:9px; font-size:11.5px; font-weight:700; color:var(--trig); background:var(--tint-trig); border-radius:20px; padding:3px 10px; }
.menu{ position:fixed; z-index:960; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--sh3); padding:6px; min-width:250px; }
.menu button{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:none; padding:10px 12px; border-radius:8px; font-size:14px; cursor:pointer; color:var(--ink2); }
.menu button:hover{ background:var(--bg2); }
.menu .sep{ height:1px; background:var(--border); margin:6px 4px; }

#toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:12px 20px; border-radius:10px; font-size:14px; font-weight:600; z-index:9999; box-shadow:var(--sh3); }
#toast[hidden]{ display:none; }

/* =============================================================== BUILDER === */
.bo-wrap{ height:100vh; display:flex; flex-direction:column; }
.bo-top{ height:60px; flex:none; display:flex; align-items:center; gap:12px; padding:0 18px; border-bottom:1px solid var(--border); background:#fff; }
.bo-back{ border:0; background:var(--soft); width:32px; height:32px; border-radius:8px; font-size:16px; cursor:pointer; color:var(--ink2); }
.bo-crumb{ font-size:14px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.bo-fname{ font-weight:700; font-size:15px; border:1px dashed transparent; border-radius:6px; padding:3px 7px; outline:none; color:var(--ink); }
.bo-fname:hover,.bo-fname:focus{ border-color:var(--border2); }
.bo-draft{ font-size:11px; font-weight:800; letter-spacing:.05em; background:var(--soft); color:var(--muted); border-radius:5px; padding:3px 8px; }
.bo-salvo{ font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.bo-stage{ flex:1; display:flex; min-height:0; position:relative; }
.bo-palette{ width:262px; flex:none; background:#fff; border-right:1px solid var(--border); overflow-y:auto; padding:14px; }
.bo-pcat .bo-ph{ font-size:13px; font-weight:800; display:flex; align-items:center; gap:8px; margin:16px 0 2px; }
.bo-pcat .psub{ font-size:11.5px; color:var(--muted); margin:0 0 8px; }
.bo-dot{ width:9px; height:9px; border-radius:3px; }
.bo-pblock{ display:flex; gap:10px; align-items:flex-start; border:1px solid var(--border); border-radius:11px; padding:10px 11px; margin-bottom:7px; cursor:pointer; background:#fff; }
.bo-pblock:hover{ border-color:var(--blue); box-shadow:var(--sh); }
.bo-pic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none; }
.bo-pt{ font-size:12.5px; font-weight:700; } .bo-ps{ font-size:11.5px; color:var(--muted); line-height:1.4; margin-top:1px; }

.bo-canvas{ flex:1; overflow:auto; position:relative; cursor:grab; background:var(--bg2);
  background-image:radial-gradient(#d7dbe3 1px, transparent 1px); background-size:22px 22px; }
.bo-canvas.panning{ cursor:grabbing; }
.bo-board{ position:relative; width:3200px; height:2400px; transform-origin:0 0; }
.bo-edges{ position:absolute; left:0; top:0; z-index:1; pointer-events:none; }
.bo-elayer{ position:absolute; left:0; top:0; width:3200px; height:2400px; z-index:2; }
.bo-edgex{ position:absolute; width:18px; height:18px; border-radius:50%; border:1px solid var(--border2); background:#fff; color:var(--muted2); font-size:12px; display:grid; place-items:center; pointer-events:auto; cursor:pointer; padding:0; }
.bo-edgex:hover{ border-color:var(--red); color:var(--red); }
.bo-node{ position:absolute; width:300px; background:#fff; border:1px solid var(--border2); border-radius:14px; box-shadow:var(--sh2); z-index:5; }
.bo-node.sel{ box-shadow:0 0 0 3px #1877f240, var(--sh2); border-color:var(--blue); }
.bo-node.msel{ box-shadow:0 0 0 2px var(--red); }
.bo-node.temerro{ border-color:var(--red); }
.bo-node.temaviso{ border-color:#fdb022; }
.bo-node.rodando{ box-shadow:0 0 0 3px #1877f255, var(--sh2); }
.bo-bar{ height:4px; border-radius:13px 13px 0 0; }
.bo-nbody{ display:flex; gap:11px; padding:12px 13px 14px; align-items:flex-start; cursor:grab; }
.bo-ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none; }
.bo-cat{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.bo-node h3{ font-size:14.5px; margin:2px 0 0; font-weight:700; }
.bo-sum{ font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.4; }
.bo-tools{ position:absolute; top:8px; right:8px; display:none; gap:4px; }
.bo-node:hover .bo-tools{ display:flex; }
.bo-tools button{ width:24px; height:24px; border-radius:6px; border:1px solid var(--border2); background:#fff; font-size:11px; cursor:pointer; padding:0; }
.bo-flag{ position:absolute; top:-9px; left:-8px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff; z-index:7; cursor:help; }
.bo-flag.e{ background:var(--red); } .bo-flag.a{ background:#dc6803; }
.bo-port{ position:absolute; width:15px; height:15px; border-radius:50%; background:#fff; border:2px solid var(--muted2); z-index:6; transform:translateX(-50%); }
.bo-port.in{ top:-8px; left:50%; }
.bo-port.out{ bottom:-8px; cursor:crosshair; }
.bo-port.out:hover{ transform:translateX(-50%) scale(1.25); }
.bo-plbl{ position:absolute; bottom:-24px; transform:translateX(-50%); font-size:9.5px; font-weight:800; letter-spacing:.03em; z-index:6;
  white-space:nowrap; max-width:84px; overflow:hidden; text-overflow:ellipsis; text-align:center; pointer-events:none; }
.bo-plbl.alt{ bottom:-37px; }
.bo-plbl.alt:before{ content:""; position:absolute; left:50%; bottom:12px; width:1px; height:11px; background:currentColor; opacity:.45; }
.bo-band{ position:absolute; border:1.5px solid var(--blue); background:#1877f21f; z-index:8; pointer-events:none; border-radius:4px; }
.bo-zoom{ position:absolute; right:16px; bottom:16px; display:flex; gap:4px; z-index:20; background:#fff; border:1px solid var(--border); border-radius:10px; padding:5px; box-shadow:var(--sh2); }
.bo-zoom button{ width:28px; height:28px; border:0; background:none; border-radius:7px; cursor:pointer; font-size:14px; color:var(--ink2); }
.bo-zoom button:hover{ background:var(--soft); }
.bo-zoom span{ min-width:44px; text-align:center; font-size:12px; color:var(--muted); align-self:center; }
.bo-probs{ position:absolute; left:278px; bottom:16px; z-index:20; max-width:430px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-size:12.5px; box-shadow:var(--sh3); }
.bo-probs b{ display:block; margin-bottom:6px; }
.bo-probs .p{ display:flex; gap:8px; padding:4px 0; line-height:1.45; cursor:pointer; }
.bo-probs .p:hover{ color:var(--blue); }
.bo-probs .e{ color:var(--red); font-weight:800; } .bo-probs .a{ color:#b54708; font-weight:800; }

.bo-drawer{ position:fixed; top:0; right:0; height:100vh; width:400px; background:#fff; border-left:1px solid var(--border); box-shadow:var(--sh3); transform:translateX(100%); transition:.2s; z-index:900; display:flex; flex-direction:column; }
.bo-drawer.open{ transform:translateX(0); }
.bo-dh{ padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:11px; }
.bo-dh .x{ margin-left:auto; border:0; background:var(--soft); width:30px; height:30px; border-radius:8px; font-size:15px; cursor:pointer; color:var(--ink2); }
.bo-db{ padding:16px; overflow-y:auto; flex:1; }
.bo-db label{ display:block; font-size:13px; font-weight:700; margin:16px 0 6px; }
.bo-db label:first-child{ margin-top:0; }
.bo-db input[type=text],.bo-db input[type=number],.bo-db select,.bo-db textarea{
  width:100%; border:1px solid var(--border2); border-radius:8px; padding:10px 12px; font-size:14px; background:#fff; }
.bo-db textarea{ min-height:96px; resize:vertical; line-height:1.55; }
.bo-db input:focus,.bo-db select:focus,.bo-db textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px #1877f21f; }
.bo-fh{ font-size:12px; color:var(--muted); margin-top:6px; line-height:1.5; }
.bo-df{ padding:14px 16px; border-top:1px solid var(--border); display:flex; gap:8px; }
.bo-ck{ display:flex; align-items:center; gap:10px; font-size:14px; margin:15px 0 0; cursor:pointer; font-weight:600; }
.bo-ck input{ width:16px; height:16px; accent-color:var(--blue); }
.bo-bytes{ float:right; font-weight:600; color:var(--muted); }
.bo-bytes.over{ color:var(--red); }
.bo-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; align-items:center; }
.bo-vlabel{ font-size:11.5px; color:var(--muted); font-weight:700; width:100%; margin-bottom:2px; }
.bo-vchip{ background:var(--tint-trig); border:1px solid #b2d0fb; color:var(--blue); border-radius:20px; padding:3px 9px; font-size:11.5px; font-weight:700; cursor:pointer; font-family:ui-monospace,monospace; }
.bo-vchip:hover{ background:var(--blue); color:#fff; }
.bo-dow{ display:flex; gap:5px; flex-wrap:wrap; }
.bo-dowc{ border:1px solid var(--border2); background:#fff; border-radius:8px; padding:6px 10px; font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; }
.bo-dowc.on{ background:var(--act); border-color:var(--act); color:#fff; }
.bo-dur{ display:flex; gap:8px; } .bo-dur > div{ flex:1; } .bo-dur input{ text-align:center; }
.bo-dursub{ font-size:10.5px; color:var(--muted); text-align:center; margin-top:4px; }
.bo-rep{ border:1px solid var(--border); border-radius:11px; padding:11px; margin-bottom:8px; background:var(--bg2); }
.bo-rephd{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.bo-repnum{ width:20px; height:20px; border-radius:6px; background:#fff; border:1px solid var(--border2); display:grid; place-items:center; font-size:11px; font-weight:800; color:var(--muted); flex:none; }
.bo-rep .rm{ margin-left:auto; border:0; background:none; color:var(--muted2); cursor:pointer; font-size:15px; padding:0 3px; }
.bo-rep .rm:hover{ color:var(--red); }
.bo-rep label{ margin:9px 0 4px; font-size:11.5px; }
.bo-rep label:first-of-type{ margin-top:0; }
.bo-add{ width:100%; border:1px dashed var(--border2); background:none; color:var(--muted); border-radius:10px; padding:9px; font-size:13px; font-weight:700; cursor:pointer; }
.bo-add:hover{ border-color:var(--blue); color:var(--blue); }

/* ------------------------------------------------------------- simulador --- */
.sim{ position:fixed; top:0; right:0; height:100vh; width:400px; background:#fff; border-left:1px solid var(--border); box-shadow:var(--sh3); transform:translateX(100%); transition:.2s; z-index:880; display:flex; flex-direction:column; }
.sim.open{ transform:translateX(0); }
.sim-h{ padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:9px; font-weight:800; }
.sim-h .x{ margin-left:auto; border:0; background:var(--soft); width:30px; height:30px; border-radius:8px; font-size:15px; cursor:pointer; color:var(--ink2); }
.sim-st{ padding:10px 16px; border-bottom:1px solid var(--border); font-size:12px; color:var(--muted); display:flex; gap:9px; flex-wrap:wrap; align-items:center; background:var(--bg2); }
.sim-badge{ font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px; }
.sim-body{ flex:1; overflow-y:auto; padding:16px; }
.sim-foot{ border-top:1px solid var(--border); padding:12px 14px; }
.sim-in{ display:flex; gap:8px; }
.sim-in input{ flex:1; border:1px solid var(--border2); border-radius:20px; padding:10px 14px; font-size:14px; }
.sim-in input:focus{ outline:none; border-color:var(--blue); }
.bub{ max-width:82%; padding:10px 13px; border-radius:16px; font-size:14px; line-height:1.5; margin-bottom:9px; white-space:pre-wrap; word-break:break-word; }
.bub.out{ background:var(--soft); border-bottom-left-radius:5px; }
.bub.in{ background:var(--blue); color:#fff; margin-left:auto; border-bottom-right-radius:5px; }
.bub-qr{ display:flex; gap:6px; flex-wrap:wrap; margin:-3px 0 11px; }
.bub-qr button{ border:1px solid #b2d0fb; background:var(--tint-trig); color:var(--blue); border-radius:20px; padding:6px 13px; font-size:12.5px; font-weight:700; cursor:pointer; }
.bub-qr button:hover:not(:disabled){ background:var(--blue); color:#fff; }
.sim-sys{ text-align:center; font-size:11.5px; color:var(--muted); margin:10px 0; line-height:1.55; }
.sim-sys b{ color:var(--amber); }

/* ============================================================================
   TEMA FOCONIX — opção B (faixa azul no topo), aprovada em 13/10/2026.
   Fica no fim do arquivo de propósito: é a camada de marca, separada da
   estrutura. Trocar a identidade um dia mexe só daqui pra baixo.
   ========================================================================== */

/* A marca passa a usar o logo real do CRM (o hexágono com o raio), servido em
   /logo-mark.svg. O caractere do HTML vira invisível em vez de sumir da marcação,
   pra não precisar tocar nas 4 telas que escrevem a marca. */
.marca i{ width:27px; height:27px; border-radius:0; background:url(logo-mark.svg) center/contain no-repeat; font-size:0; }

/* Faixa azul: o cabeçalho de toda tela e a barra do construtor. É o mesmo
   tratamento do `dash-banner` do CRM. */
.ph,
.bo-top{ background:var(--blue); color:#fff; border-bottom:none; }
.ph{ padding:16px 34px; align-items:center; }
.ph h1{ color:#fff; font-size:18px; }
.bo-top{ height:56px; }

.ph .btn,
.bo-top .btn{ background:transparent; color:#dbe8f6; border-color:rgba(255,255,255,.42); box-shadow:none; }
.ph .btn:hover,
.bo-top .btn:hover{ background:rgba(255,255,255,.14); color:#fff; }
.ph .btn.primary,
.bo-top .btn.primary{ background:#fff; color:var(--blue); border-color:#fff; }
.ph .btn.primary:hover,
.bo-top .btn.primary:hover{ background:#e9f0f8; color:var(--blue-d); }

.bo-back{ background:rgba(255,255,255,.16); color:#fff; }
.bo-back:hover{ background:rgba(255,255,255,.26); }
.bo-crumb{ color:#b9d2ec; }
.bo-fname{ color:#fff; }
.bo-fname:hover,.bo-fname:focus{ border-color:rgba(255,255,255,.5); }
.bo-draft{ background:rgba(255,255,255,.2); color:#e3eefa; }
.bo-salvo{ color:#cfe0f5; }

/* Login e assistente de nova conta continuam em branco: são telas de entrada,
   e fundo cinza ali deixaria o cartão sem contraste. */
.auth, .wiz{ background:#fff; }

/* O canvas acompanha o cinza do CRM, com o ponto de grade um tom acima. */
.bo-canvas{ background:var(--bg); background-image:radial-gradient(#d3dae1 1px, transparent 1px); }