/* WhatsApp Flows Builder.
   Builder: design system Aurora (claro), prefixo .wfb
   Preview: réplica do WhatsApp em tema escuro, prefixo .wa / .fw */
.wfb { --line:rgba(16,32,58,.10); --line-s:rgba(16,32,58,.14); --mono:var(--font-mono); font-family:var(--font-body); color:var(--ink); }
.wfb * { box-sizing:border-box; }
.wfb button { font-family:inherit; }

/* Barra de ações */
.wfb-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px; background:rgba(252,252,254,.8); -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 0 #fff inset, 0 10px 30px rgba(20,40,80,.06); position:sticky; top:66px; z-index:20; }
.wfb-name { font-family:var(--font-display); font-weight:700; font-size:15px; border:1px solid transparent; border-radius:10px; padding:8px 10px; background:transparent; min-width:190px; color:var(--ink); }
.wfb-name:hover, .wfb-name:focus { border-color:var(--line-s); background:#fff; outline:none; }
.wfb-bar .sp { flex:1; }
.wfb-btn { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-s); background:#fff; color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:13px; padding:9px 14px; border-radius:99px; cursor:pointer; transition:.18s; white-space:nowrap; }
.wfb-btn:hover { border-color:rgba(37,99,235,.5); color:var(--blue); }
.wfb-btn.b { background:linear-gradient(180deg,#3B77F0,#2058D8); color:#fff; border-color:transparent; box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 8px 22px rgba(37,99,235,.3); }
.wfb-btn.b:hover { color:#fff; transform:translateY(-1px); }
.wfb-btn.danger:hover { border-color:rgba(220,38,38,.5); color:#DC2626; }
.wfb-btn.on { background:var(--ink); color:#fff; border-color:transparent; }
.wfb-btn.mini { padding:6px 10px; font-size:12px; }
.wfb-saved { font-family:var(--mono); font-size:11px; color:var(--stone-light); letter-spacing:.04em; }

/* Layout */
.wfb-grid { display:grid; grid-template-columns:274px minmax(0,1fr) 366px; gap:14px; margin-top:14px; align-items:start; }
.wfb-col { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 1px 0 #fff inset, 0 1px 2px rgba(16,32,58,.04); position:relative; overflow:hidden; }
.wfb-col::before { content:''; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg, transparent, rgba(96,165,250,.6), transparent); }
.wfb-col-h { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px 10px; }
.wfb-lbl { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); }
.wfb-lbl::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px rgba(37,99,235,.8); }
.wfb-col-b { padding:0 12px 14px; }
/* Cada painel lateral rola sozinho, sem arrastar o resto da página. */
.wfb-aside { display:flex; flex-direction:column; gap:14px; position:sticky; top:132px; }
.wfb-aside > .wfb-col { display:flex; flex-direction:column; min-height:0; }
.wfb-aside .wfb-col-b { overflow-y:auto; overscroll-behavior:contain; min-height:0; }
.wfb-b-pages { max-height:min(38vh,420px); }
.wfb-b-pal { max-height:min(42vh,520px); }
.wfb-b-props { max-height:calc(100vh - 200px); }
.wfb-aside .wfb-col-b::-webkit-scrollbar { width:8px; }
.wfb-aside .wfb-col-b::-webkit-scrollbar-thumb { background:rgba(16,32,58,.18); border-radius:99px; border:2px solid #fff; }
.wfb-aside .wfb-col-b::-webkit-scrollbar-thumb:hover { background:rgba(16,32,58,.3); }
.wfb-sep { border-top:1px solid var(--line); margin:2px 0 0; }
.wfb-help { font-size:12px; line-height:1.5; color:var(--stone); padding:0 4px 8px; }
.wfb-help code { font-family:var(--mono); background:var(--paper-warm); padding:1px 5px; border-radius:4px; }

/* Painel de páginas */
.wfb-pages { display:flex; flex-direction:column; gap:6px; }
.wfb-page { position:relative; display:grid; grid-template-columns:22px 1fr; gap:2px 10px; align-items:center; padding:10px 10px 9px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; transition:.18s; }
.wfb-page:hover { border-color:rgba(37,99,235,.4); }
.wfb-page.on { border-color:rgba(37,99,235,.6); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.wfb-page.dragging { opacity:.4; }
.wfb-page.drop-before { box-shadow:0 -3px 0 0 var(--blue); }
.wfb-page.drop-after { box-shadow:0 3px 0 0 var(--blue); }
.wfb-page-n { grid-row:1 / span 2; align-self:start; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:rgba(37,99,235,.10); color:var(--blue); font-family:var(--mono); font-size:11px; }
.wfb-page.on .wfb-page-n { background:var(--blue); color:#fff; }
.wfb-page-t { display:flex; align-items:baseline; gap:6px; min-width:0; }
.wfb-page-t b { font-family:var(--font-display); font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wfb-page-t small { font-family:var(--mono); font-size:10px; color:var(--stone-light); white-space:nowrap; }
.wfb-page-m { display:flex; flex-wrap:wrap; gap:4px; margin-top:3px; }
.wfb-page-m span { font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); border:1px solid var(--line); border-radius:99px; padding:2px 7px; }
.wfb-page-m .go { color:var(--blue); border-color:rgba(37,99,235,.3); background:rgba(37,99,235,.06); }
.wfb-page-m .fim { color:#0F766E; border-color:rgba(16,163,74,.3); background:rgba(16,163,74,.07); }
.wfb-page-m .sem { color:#B45309; border-color:rgba(217,119,6,.35); background:rgba(217,119,6,.08); }
.wfb-page-acts { position:absolute; top:6px; right:6px; display:none; gap:2px; background:#fff; border-radius:8px; padding:2px; box-shadow:0 4px 14px rgba(20,40,80,.12); }
.wfb-page:hover .wfb-page-acts, .wfb-page:focus-within .wfb-page-acts { display:flex; }
.wfb-page-acts button { width:22px; height:22px; border:0; background:transparent; border-radius:6px; cursor:pointer; color:var(--stone); font-size:12px; line-height:1; }
.wfb-page-acts button:hover { background:rgba(37,99,235,.10); color:var(--blue); }
.wfb-page-acts button.del:hover { background:rgba(220,38,38,.10); color:#DC2626; }

/* Paleta */
.wfb-pal { display:flex; flex-direction:column; gap:6px; }
.wfb-pal-grp { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone-light); margin:10px 4px 2px; }
.wfb-pal-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:grab; font-size:13px; font-weight:600; color:var(--ink); transition:.18s; user-select:none; }
.wfb-pal-item:hover { border-color:rgba(37,99,235,.4); transform:translateY(-1px); box-shadow:0 8px 20px rgba(20,40,80,.08); }
.wfb-pal-item:active { cursor:grabbing; }
.wfb-pal-item i { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:rgba(37,99,235,.10); color:var(--blue); font-family:var(--mono); font-size:11px; font-weight:500; flex-shrink:0; font-style:normal; }

/* Cabeçalho do canvas */
.wfb-canvas-head { padding:14px 16px 12px; border-bottom:1px solid var(--line); }
.wfb-canvas-head .t { display:flex; align-items:baseline; gap:8px; margin-top:6px; }
.wfb-canvas-head .t b { font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.wfb-canvas-head .t code { font-family:var(--mono); font-size:11px; color:var(--stone); background:var(--paper-warm); border-radius:5px; padding:2px 6px; }
.wfb-canvas-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.wfb-canvas-meta span { font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); border:1px solid var(--line); border-radius:99px; padding:3px 8px; }
.wfb-canvas-meta .go { color:var(--blue); border-color:rgba(37,99,235,.3); background:rgba(37,99,235,.06); }
.wfb-canvas-meta .sem { color:#B45309; border-color:rgba(217,119,6,.35); background:rgba(217,119,6,.08); }

/* Canvas */
.wfb-canvas { min-height:420px; border:1px dashed var(--line-s); border-radius:14px; padding:12px; background:
  radial-gradient(rgba(16,32,58,.05) 1px, transparent 1px) 0 0/22px 22px, var(--paper); display:flex; flex-direction:column; gap:8px; }
.wfb-canvas.over { border-color:rgba(37,99,235,.6); background-color:rgba(37,99,235,.03); }
.wfb-empty { margin:auto; text-align:center; color:var(--stone-light); font-size:14px; padding:40px 20px; }
.wfb-empty b { display:block; font-family:var(--font-display); font-size:16px; color:var(--stone); margin-bottom:6px; }
.wfb-node { position:relative; background:#fff; border:1px solid var(--line); border-radius:12px; padding:9px 34px 10px 34px; cursor:pointer; transition:.18s; box-shadow:0 1px 0 #fff inset, 0 1px 2px rgba(16,32,58,.04); }
.wfb-node::before { content:''; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg, transparent, rgba(96,165,250,0), transparent); transition:.3s; }
.wfb-node:hover { border-color:rgba(37,99,235,.35); }
.wfb-node.sel { border-color:rgba(37,99,235,.6); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.wfb-node.sel::before { background:linear-gradient(90deg, transparent, rgba(96,165,250,.8), transparent); }
.wfb-node.dragging { opacity:.4; }
.wfb-node.drop-before { box-shadow:0 -3px 0 0 var(--blue); }
.wfb-node.drop-after { box-shadow:0 3px 0 0 var(--blue); }
.wfb-node.rodape { border-style:dashed; background:rgba(37,99,235,.03); }
.wfb-grip { position:absolute; left:11px; top:12px; width:14px; color:var(--stone-light); cursor:grab; font-size:13px; line-height:1; letter-spacing:-2px; }
.wfb-node-h { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.wfb-node-h i { width:20px; height:20px; border-radius:6px; display:grid; place-items:center; background:rgba(37,99,235,.10); color:var(--blue); font-family:var(--mono); font-size:9.5px; font-style:normal; flex-shrink:0; }
.wfb-node-t { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); }
.wfb-node-c { font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:var(--stone); border:1px solid var(--line); border-radius:99px; padding:2px 7px; }
.wfb-node-c.req { color:#B45309; border-color:rgba(217,119,6,.35); background:rgba(217,119,6,.07); }
.wfb-node-c.go { color:var(--blue); border-color:rgba(37,99,235,.3); background:rgba(37,99,235,.06); }
.wfb-node-p { font-size:13.5px; color:var(--ink); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wfb-node-p em { color:var(--stone-light); font-style:normal; }
.wfb-node-x { position:absolute; right:8px; top:8px; width:22px; height:22px; border-radius:6px; border:0; background:transparent; color:var(--stone-light); cursor:pointer; font-size:14px; }
.wfb-node-x:hover { background:rgba(220,38,38,.08); color:#DC2626; }
.wfb-branch { margin:8px 0 0 -22px; padding:8px 8px 8px 10px; border-left:2px solid rgba(37,99,235,.3); display:flex; flex-direction:column; gap:6px; border-radius:0 8px 8px 0; background:rgba(37,99,235,.03); min-height:38px; }
.wfb-branch.over { background:rgba(37,99,235,.08); }
.wfb-branch-t { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); }
.wfb-branch .wfb-empty { padding:6px; font-size:12px; margin:0; }
.wfb-kbd { font-family:var(--mono); font-size:11px; color:var(--stone-light); display:flex; gap:10px; flex-wrap:wrap; padding:10px 4px 0; }
.wfb-kbd kbd { border:1px solid var(--line-s); border-radius:5px; padding:1px 5px; background:#fff; }

/* Propriedades */
.wfb-props { display:flex; flex-direction:column; gap:10px; }
.wfb-f { display:flex; flex-direction:column; gap:5px; }
.wfb-f > span { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); }
.wfb-f input[type=text], .wfb-f input[type=number], .wfb-f input[type=url], .wfb-f textarea, .wfb-f select { width:100%; background:#fff; border:1px solid var(--line-s); border-radius:10px; padding:9px 11px; font-family:var(--font-body); font-size:13.5px; color:var(--ink); outline:none; transition:.18s; }
.wfb-f textarea { min-height:70px; resize:vertical; font-family:var(--mono); font-size:12.5px; }
.wfb-f input:focus, .wfb-f textarea:focus, .wfb-f select:focus { border-color:rgba(37,99,235,.6); box-shadow:0 0 0 3px rgba(37,99,235,.14); }
.wfb-f.row { flex-direction:row; align-items:center; justify-content:space-between; }
.wfb-f.row > span { text-transform:none; letter-spacing:0; font-family:var(--font-body); font-size:13.5px; color:var(--ink); }
.wfb-sw { width:38px; height:22px; appearance:none; -webkit-appearance:none; background:rgba(16,32,58,.15); border-radius:99px; position:relative; cursor:pointer; transition:.2s; flex-shrink:0; }
.wfb-sw::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.wfb-sw:checked { background:var(--blue); } .wfb-sw:checked::after { left:19px; }
.wfb-hint { font-size:12px; color:var(--stone-light); line-height:1.45; }
.wfb-hint code { font-family:var(--mono); background:var(--paper-warm); padding:1px 5px; border-radius:4px; }
.wfb-list { display:flex; flex-direction:column; gap:6px; }
.wfb-list-row { display:grid; grid-template-columns:1fr 1fr 26px; gap:6px; align-items:center; }
.wfb-list-row input { padding:7px 9px !important; font-size:12.5px !important; }
.wfb-mini { width:26px; height:26px; border-radius:7px; border:1px solid var(--line-s); background:#fff; cursor:pointer; color:var(--stone); font-size:13px; }
.wfb-mini:hover { border-color:rgba(37,99,235,.5); color:var(--blue); }
.wfb-add { align-self:flex-start; }
.wfb-img-prev { width:100%; max-height:140px; object-fit:contain; border:1px solid var(--line); border-radius:10px; background:var(--paper-warm); }
.wfb-cond { display:grid; grid-template-columns:1fr 84px 1fr; gap:6px; }
.wfb-sec { border-top:1px solid var(--line); margin-top:6px; padding-top:10px; }

/* ══════════ PREVIEW: réplica do WhatsApp ══════════ */
.wfb-preview { display:none; }
.wfb.modo-preview .wfb-preview { display:block; }
.wfb.modo-preview .wfb-canvas-col { display:none; }
.wfb-phone-wrap { display:flex; justify-content:center; padding:16px 0 6px; }
.wfb-phone { width:378px; height:768px; border-radius:44px; background:#0B0F15; padding:11px; box-shadow:0 40px 100px rgba(7,11,18,.45), 0 0 0 1px rgba(255,255,255,.06) inset; position:relative; }
.wfb-screen { width:100%; height:100%; border-radius:34px; overflow:hidden; background:#0B141A; position:relative; display:flex; flex-direction:column;
  font-family:'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif; -webkit-font-smoothing:antialiased; }

/* status bar + conversa */
.wa-status { display:flex; align-items:center; justify-content:space-between; padding:9px 18px 3px; background:#0B141A; color:#E9EDEF; font-size:12px; letter-spacing:.02em; }
.wa-status .r { display:flex; gap:5px; align-items:center; opacity:.85; font-size:11px; }
.wa-top { background:#1F2C34; color:#E9EDEF; padding:7px 12px 9px; display:flex; align-items:center; gap:11px; }
.wa-top .bk { color:#E9EDEF; font-size:19px; opacity:.9; }
.wa-av { width:38px; height:38px; border-radius:50%; background:linear-gradient(160deg,#3B77F0,#1B4FC4); display:grid; place-items:center; font:700 14px var(--font-display); color:#fff; flex-shrink:0; }
.wa-top-n { flex:1; min-width:0; }
.wa-top-n b { display:block; font-size:16px; font-weight:500; line-height:1.2; }
.wa-top-n span { font-size:12.5px; color:#8696A0; }
.wa-top .ic { color:#AEBAC1; font-size:15px; margin-left:6px; }
.wa-chat { flex:1; background:#0B141A; padding:14px 12px; display:flex; flex-direction:column; gap:8px; overflow:auto; }
.wa-msg { max-width:85%; background:#202C33; color:#E9EDEF; border-radius:8px; padding:7px 9px 5px; font-size:14.2px; line-height:1.4; align-self:flex-start; box-shadow:0 1px .5px rgba(11,20,26,.13); }
.wa-msg.me { background:#005C4B; align-self:flex-end; }
.wa-msg small { display:block; font-size:11px; color:#8696A0; text-align:right; margin-top:3px; }
.wa-msg-cta { display:block; width:calc(100% + 18px); margin:7px -9px -5px; border:0; border-top:1px solid rgba(255,255,255,.09); padding:9px 0; text-align:center; color:#53BDEB; font-weight:500; font-size:14.5px; background:none; cursor:pointer; border-radius:0 0 8px 8px; }
.wa-msg-cta:hover { background:rgba(255,255,255,.03); }
.wa-bottom { background:#0B141A; padding:6px 8px 14px; display:flex; gap:7px; align-items:center; }
.wa-bottom .box { flex:1; background:#1F2C34; border-radius:22px; padding:10px 15px; color:#8696A0; font-size:14.5px; }
.wa-bottom .mic { width:42px; height:42px; border-radius:50%; background:#00A884; display:grid; place-items:center; color:#0B141A; font-size:17px; flex-shrink:0; }

/* folha do flow */
.wa-sheet { position:absolute; left:0; right:0; bottom:0; height:88%; background:#111B21; border-radius:14px 14px 34px 34px; transform:translateY(105%);
  transition:transform .34s cubic-bezier(.2,.8,.25,1); display:flex; flex-direction:column; color:#E9EDEF; z-index:6; overflow:hidden; }
.wa-sheet.open { transform:none; }
.wa-handle { flex-shrink:0; padding:8px 0 2px; display:flex; justify-content:center; }
.wa-handle i { width:34px; height:4px; border-radius:99px; background:#667781; display:block; }
.wa-head { flex-shrink:0; display:grid; grid-template-columns:34px 1fr 34px; align-items:center; padding:6px 10px 10px; }
.wa-head b { text-align:center; font-size:16.5px; font-weight:500; color:#E9EDEF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-ic { width:34px; height:34px; border:0; background:transparent; color:#E9EDEF; font-size:20px; line-height:1; cursor:pointer; border-radius:50%; display:grid; place-items:center; }
.wa-ic:hover { background:rgba(255,255,255,.06); }
.wa-ic.dots { font-size:18px; color:#AEBAC1; }
.wa-prog { flex-shrink:0; height:3px; background:#2A3942; margin:0 16px; border-radius:99px; overflow:hidden; }
.wa-prog i { display:block; height:100%; background:#00A884; border-radius:99px; transition:width .3s ease; }
.wa-body { flex:1; overflow:auto; padding:22px 22px 16px; display:flex; flex-direction:column; gap:17px; }
.wa-body::-webkit-scrollbar { width:3px; } .wa-body::-webkit-scrollbar-thumb { background:#3B4A54; border-radius:99px; }

/* tipografia do flow */
.wa-h1 { font-size:24px; font-weight:700; line-height:1.22; color:#E9EDEF; letter-spacing:-.01em; }
.wa-h2 { font-size:16px; font-weight:600; color:#E9EDEF; }
.wa-p { font-size:15.5px; line-height:1.45; color:#E9EDEF; }
.wa-cap { font-size:13px; line-height:1.45; color:#8696A0; }
.wa-rich { font-size:15px; line-height:1.5; color:#E9EDEF; }
.wa-rich b { font-weight:600; } .wa-rich i { font-style:italic; }
/* Mapa do fluxo: páginas ligadas por setas. */
.wfb-map-wrap { overflow:auto; max-height:64vh; padding:4px; }
.wfb-map { position:relative; }
.wfb-map svg { position:absolute; inset:0; overflow:visible; }
.wfb-map svg path, .wfb-map svg circle { fill:none; stroke-width:2; }
.wfb-map svg circle { fill:currentColor; stroke:none; }
.wfb-map .m-nav { color:#3B77F0; stroke:#3B77F0; }
.wfb-map .m-lst { color:#8A93A6; stroke:#8A93A6; stroke-dasharray:5 4; }
.wfb-map .m-dx { color:#8B5CF6; stroke:#8B5CF6; }
.wfb-map .m-fim { color:#10B981; stroke:#10B981; }
.wfb-map .m-txt { fill:#8A93A6; font-size:11px; font-family:inherit; stroke:none; }
.wfb-map-no { position:absolute; background:#fff; border:1px solid rgba(16,32,58,.14); border-radius:12px; padding:10px 12px; cursor:pointer; box-shadow:0 1px 3px rgba(16,32,58,.08); transition:border-color .15s, box-shadow .15s; overflow:hidden; }
.wfb-map-no:hover { border-color:#3B77F0; box-shadow:0 4px 14px rgba(59,119,240,.18); }
.wfb-map-no.on { border-color:#3B77F0; box-shadow:0 0 0 3px rgba(59,119,240,.14); }
.wfb-map-no.fim { border-left:3px solid #10B981; }
.wfb-map-no b { display:block; font-size:14px; color:#10203A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wfb-map-no span { display:block; font-size:10px; letter-spacing:.06em; color:#8A93A6; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.wfb-map-no small { display:block; font-size:11px; color:#5A6478; margin-top:3px; }
.wfb-map-leg { display:flex; flex-wrap:wrap; gap:14px; padding:12px 4px 2px; font-size:12px; color:#5A6478; }
.wfb-map-leg .l::before { content:''; display:inline-block; width:16px; height:2px; margin-right:6px; vertical-align:middle; }
.wfb-map-leg .nav::before { background:#3B77F0; }
.wfb-map-leg .lst::before { background:#8A93A6; }
.wfb-map-leg .dx::before { background:#8B5CF6; }
.wfb-tpls { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; padding:4px 0 8px; }
.wfb-tpl { display:block; width:100%; text-align:left; background:#fff; border:1px solid rgba(16,32,58,.12); border-radius:14px; padding:14px 16px; cursor:pointer; font:inherit; }
.wfb-tpl:hover { border-color:#3B77F0; box-shadow:0 4px 14px rgba(59,119,240,.14); }
.wfb-tpl b { display:block; font-size:15px; color:#10203A; margin-bottom:4px; }
.wfb-tpl span { display:block; font-size:13px; color:#5A6478; line-height:1.4; }

/* Calendário desenhado à mão, no lugar do seletor nativo do navegador. */
.wa-cal { border:1px solid #2A3942; border-radius:12px; padding:12px; margin:4px 0; }
.wa-cal-nav { display:flex; align-items:center; justify-content:space-between; margin:6px 0 10px; }
.wa-cal-nav b { font-size:15px; color:#E9EDEF; }
.wa-cal-nav b::first-letter { text-transform:uppercase; }
.wa-cal-nav button { width:32px; height:32px; border-radius:50%; border:0; background:transparent; color:#E9EDEF; font-size:20px; cursor:pointer; }
.wa-cal-nav button:hover { background:#2A3942; }
.wa-cal-dow, .wa-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.wa-cal-dow i { font-style:normal; text-align:center; font-size:11px; color:#8696A0; padding:4px 0; }
.wa-cal-grid i { font-style:normal; text-align:center; font-size:14px; color:#E9EDEF; padding:8px 0; border-radius:50%; cursor:pointer; }
.wa-cal-grid i:hover:not(.vazio):not(.off) { background:#2A3942; }
.wa-cal-grid i.vazio { cursor:default; }
.wa-cal-grid i.off { color:#46545D; cursor:not-allowed; }
.wa-cal-grid i.on { background:#00A884; color:#111B21; font-weight:600; }

/* Envio de foto e de arquivo. */
.wa-up { border:1px dashed #46545D; border-radius:12px; padding:14px; margin:4px 0; }
.wa-up-t b { display:block; font-size:15px; color:#E9EDEF; }
.wa-up-t small { display:block; font-size:13px; color:#8696A0; margin-top:2px; }
.wa-up-btn { margin-top:10px; width:100%; padding:10px; border-radius:8px; border:1px solid #00A884; background:transparent; color:#00A884; font-size:14px; font-weight:500; cursor:pointer; }
.wa-up-btn:hover { background:rgba(0,168,132,.1); }
.wa-up-lista { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.wa-up-item { display:inline-flex; align-items:center; gap:6px; background:#2A3942; color:#E9EDEF; font-size:12px; padding:5px 8px; border-radius:6px; }
.wa-up-item i { font-style:normal; cursor:pointer; color:#8696A0; }
.wa-up-item i:hover { color:#E9EDEF; }

.wa-img { max-width:100%; border-radius:8px; display:block; margin:0 auto; background:#0B141A; }
.wa-img-vazia { border:1px dashed #46545D; border-radius:8px; padding:26px 14px; text-align:center; font-size:13px; color:#8696A0; }
.wa-link { color:#53BDEB; font-size:15px; text-decoration:none; }
.wa-link:hover { text-decoration:underline; }
.wa-body > * { margin:0; }

/* campo outlined (Material, como no WhatsApp) */
.wa-field { position:relative; display:block; }
.wa-input { width:100%; height:56px; background:transparent; border:1px solid #46545D; border-radius:8px; padding:16px 15px; color:#E9EDEF; font-size:16px; font-family:inherit; outline:none; transition:border-color .15s, box-shadow .15s; }
.wa-input::placeholder { color:transparent; }
.wa-input[type=date] { color-scheme:dark; }
textarea.wa-input { height:auto; min-height:96px; resize:none; line-height:1.4; }
.wa-lbl { position:absolute; left:15px; top:50%; transform:translateY(-50%); font-size:16px; color:#8696A0; pointer-events:none; transition:.14s ease; background:#111B21; padding:0 4px; max-width:calc(100% - 34px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.wa-field.up .wa-lbl, .wa-field:focus-within .wa-lbl { top:0; transform:translateY(-50%); font-size:12px; left:11px; }
.wa-field:focus-within .wa-lbl { color:#00A884; }
.wa-field:focus-within .wa-input { border-color:#00A884; box-shadow:inset 0 0 0 1px #00A884; }
.wa-field.err .wa-input { border-color:#F15C6D; box-shadow:inset 0 0 0 1px #F15C6D; }
.wa-field.err .wa-lbl { color:#F15C6D; }
.wa-help { font-size:12.5px; color:#8696A0; margin:6px 0 0 16px; }
.wa-help.err { color:#F15C6D; }
.wa-group { display:flex; flex-direction:column; }

/* seletor que abre lista (Dropdown) */
.wa-sel { position:relative; width:100%; height:56px; background:transparent; border:1px solid #46545D; border-radius:8px; padding:16px 44px 16px 15px; color:#E9EDEF; font-size:16px; text-align:left; cursor:pointer; display:flex; align-items:center; }
.wa-sel:hover { border-color:#667781; }
.wa-sel .val { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-sel .arw { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:#8696A0; font-size:11px; }
.wa-sel .clr { position:absolute; right:13px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%; border:0; background:transparent; color:#8696A0; font-size:17px; cursor:pointer; line-height:1; }
.wa-sel .clr:hover { color:#E9EDEF; }

/* lista de opções em página cheia */
.wa-list { flex:1; overflow:auto; padding:4px 0 16px; }
.wa-list::-webkit-scrollbar { width:3px; } .wa-list::-webkit-scrollbar-thumb { background:#3B4A54; border-radius:99px; }
.wa-list-row { display:block; width:100%; text-align:left; border:0; background:transparent; color:#E9EDEF; font-size:16px; font-family:inherit; padding:15px 22px; cursor:pointer; }
.wa-list-row:hover { background:rgba(255,255,255,.04); }
.wa-list-row small { display:block; font-size:13px; color:#8696A0; margin-top:2px; }
.wa-list-row.on { color:#00A884; }

/* escolhas com marcador à direita */
.wa-sect { font-size:15.5px; font-weight:600; color:#E9EDEF; margin-bottom:-6px; }
.wa-opt { display:flex; align-items:center; gap:14px; padding:13px 2px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.06); }
.wa-opt:last-child { border-bottom:0; }
.wa-opt-t { flex:1; min-width:0; }
.wa-opt-t b { display:block; font-size:15.5px; font-weight:400; color:#E9EDEF; }
.wa-opt-t small { display:block; font-size:13px; color:#8696A0; margin-top:1px; }
.wa-mark { width:20px; height:20px; border:2px solid #8696A0; border-radius:50%; flex-shrink:0; position:relative; transition:.15s; }
.wa-mark.sq { border-radius:4px; }
.wa-opt.on .wa-mark { border-color:#00A884; }
.wa-opt.on .wa-mark::after { content:''; position:absolute; inset:3px; border-radius:50%; background:#00A884; }
.wa-opt.on .wa-mark.sq { background:#00A884; }
.wa-opt.on .wa-mark.sq::after { content:'✓'; position:absolute; inset:0; border-radius:0; background:none; color:#111B21; font-size:13px; line-height:16px; text-align:center; font-weight:700; }
.wa-chips { display:flex; flex-wrap:wrap; gap:8px; }
.wa-chip { border:1px solid #46545D; border-radius:99px; padding:9px 15px; font-size:14.5px; color:#E9EDEF; background:transparent; cursor:pointer; font-family:inherit; }
.wa-chip.on { border-color:#00A884; background:rgba(0,168,132,.14); color:#00A884; }
.wa-nav { display:flex; align-items:center; gap:12px; padding:15px 2px; border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer; }
.wa-nav-t { flex:1; min-width:0; }
.wa-nav-t b { display:block; font-size:15.5px; font-weight:400; color:#E9EDEF; }
.wa-nav-t small { display:block; font-size:13px; color:#8696A0; margin-top:1px; }
.wa-nav .arw { color:#8696A0; font-size:17px; }
.wa-optin { display:flex; align-items:flex-start; gap:13px; cursor:pointer; padding:2px; }
.wa-optin .wa-mark { margin-top:2px; }
.wa-optin span { font-size:14.5px; line-height:1.4; color:#E9EDEF; }

/* rodapé fixo do flow */
.wa-foot { flex-shrink:0; padding:10px 22px 8px; }
.wa-cta { width:100%; height:48px; border:0; border-radius:24px; background:#21C063; color:#0B1014; font-size:15.5px; font-weight:600; font-family:inherit; cursor:pointer; transition:.15s; }
.wa-cta:hover:not(:disabled) { background:#25D366; }
.wa-cta:disabled { background:#20303A; color:#5E6E77; cursor:not-allowed; }
.wa-managed { flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 16px 16px; font-size:11.5px; color:#8696A0; }
.wa-managed i { width:15px; height:15px; border-radius:50%; background:#3B77F0; color:#fff; font-size:8px; font-style:normal; display:grid; place-items:center; flex-shrink:0; }
.wa-managed a { color:#21C063; text-decoration:none; }
.wa-done { text-align:center; padding:26px 6px; }
.wa-done i { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:rgba(0,168,132,.14); color:#00A884; margin:0 auto 14px; font-style:normal; font-size:26px; }
.wa-done pre { text-align:left; background:#0B141A; border:1px solid rgba(255,255,255,.07); border-radius:8px; padding:10px; font-family:var(--mono); font-size:11px; color:#8696A0; overflow:auto; max-height:190px; margin-top:14px; }
.wa-warn { font-size:13px; color:#F15C6D; }

/* log de execução */
.wfb-log { font-family:var(--mono); font-size:11.5px; line-height:1.7; color:#8FA0B5; background:#0B0F15; border-radius:12px; padding:12px 14px; max-height:200px; overflow:auto; border:1px solid rgba(255,255,255,.08); }
.wfb-log b { color:#7FB4FF; font-weight:500; } .wfb-log .ok { color:#5ED6A2; } .wfb-log .er { color:#FF9E9E; }

/* modal + toast */
.wfb-modal { position:fixed; inset:0; z-index:1300; background:rgba(7,11,18,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:20px; }
.wfb-modal[hidden] { display:none; }
.wfb-modal-box { width:min(900px,100%); max-height:90vh; background:#0B0F15; color:#E8EDF4; border:1px solid rgba(255,255,255,.1); border-radius:20px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 40px 100px rgba(7,11,18,.6); }
.wfb-modal-h { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.wfb-modal-h b { font-family:var(--font-display); font-size:16px; flex:1; }
.wfb-modal pre { flex:1; overflow:auto; margin:0; padding:18px; font-family:var(--mono); font-size:12px; line-height:1.55; color:#C9D3E0; }
.wfb-modal textarea { flex:1; min-height:300px; background:transparent; color:#C9D3E0; border:0; padding:18px; font-family:var(--mono); font-size:12px; outline:none; resize:none; }
.wfb-modal .wfb-btn { background:rgba(255,255,255,.06); color:#E8EDF4; border-color:rgba(255,255,255,.14); }
.wfb-modal .wfb-btn.b { background:#fff; color:#0A0F16; }
.wfb-warn { font-size:12.5px; color:#FFD48A; padding:10px 18px; border-top:1px solid rgba(255,255,255,.08); }
.wfb-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:#0B0F15; color:#E8EDF4; border:1px solid rgba(255,255,255,.12); border-radius:99px; padding:10px 18px; font-size:13.5px; z-index:1400; opacity:0; transition:.25s; pointer-events:none; }
.wfb-toast.in { opacity:1; transform:translateX(-50%); }

@media (prefers-reduced-motion: reduce) {
  .wa-sheet, .wa-prog i, .wfb-node, .wfb-page, .wfb-btn { transition:none; }
}
@media (max-width:1180px) {
  .wfb-grid { grid-template-columns:1fr; }
  .wfb-aside { position:static; }
  .wfb-bar { position:static; }
}
@media (max-width:430px) {
  .wfb-phone { width:100%; height:680px; padding:0; border-radius:0; box-shadow:none; background:none; }
  .wfb-screen { border-radius:14px; }
}