/* ========================================================================= Cloudflare AI Security Journey v2. Tema claro por padrão, escuro por data-theme="dark" no . Laranja da marca: #F6821F e #FBAD41, valores do SVG oficial do logo. Alvo: 1920x1080 sem rolagem. Quebras em 1720, 1480 e 1180. Registro da animação: keynote premium. Easing suave, revelação escalonada, brilho que pulsa. Nada de mola nem de salto. ========================================================================= */ /* ------------------------------- TEMAS --------------------------------- */ :root{ --or:#F6821F; --or2:#FBAD41; --bg:#EEF0F4; --panel:#FFFFFF; --panel2:#F7F8FA; --panel3:#FFFFFF; --line:#E1E5EA; --line2:#CBD2DA; --txt:#111827; --txt2:#48566B; --txt3:#8B95A5; --soft:rgba(17,24,39,.035); --soft2:rgba(17,24,39,.07); --hover:rgba(17,24,39,.05); --or-s:rgba(246,130,31,.12); --or-b:rgba(246,130,31,.42); --red:#C4320A; --red-s:rgba(196,50,10,.10); --red-b:rgba(196,50,10,.40); --grn:#067647; --grn-s:rgba(6,118,71,.10); --grn-b:rgba(6,118,71,.35); --blu:#175CD3; --blu-s:rgba(23,92,211,.10); --blu-b:rgba(23,92,211,.35); --pur:#6941C6; --pur-s:rgba(105,65,198,.10); --pur-b:rgba(105,65,198,.35); --amb:#B54708; --amb-s:rgba(181,71,8,.10); --slate:#475467; --slate-s:rgba(71,84,103,.10); --slate-b:rgba(71,84,103,.32); --sh1:0 1px 2px rgba(16,24,40,.05); --sh2:0 2px 6px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.05); --sh3:0 12px 34px rgba(16,24,40,.16), 0 3px 8px rgba(16,24,40,.09); --code-bg:#F6F8FA; --code-tx:#334155; --scroll:#C3CAD4; --ease:cubic-bezier(.22,.61,.36,1); } html[data-theme="dark"]{ --bg:#080B12; --panel:#121927; --panel2:#0E1420; --panel3:#182034; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16); --txt:#E9EDF4; --txt2:#9FAABC; --txt3:#6C778A; --soft:rgba(255,255,255,.04); --soft2:rgba(255,255,255,.08); --hover:rgba(255,255,255,.06); --or-s:rgba(246,130,31,.16); --or-b:rgba(246,130,31,.55); --red:#FF8577; --red-s:rgba(255,90,74,.14); --red-b:rgba(255,90,74,.45); --grn:#4ADE94; --grn-s:rgba(74,222,148,.13); --grn-b:rgba(74,222,148,.40); --blu:#74A9F8; --blu-s:rgba(116,169,248,.13); --blu-b:rgba(116,169,248,.40); --pur:#B196FB; --pur-s:rgba(177,150,251,.13); --pur-b:rgba(177,150,251,.40); --amb:#FBBF5C; --amb-s:rgba(251,191,92,.13); --slate:#98A2B3; --slate-s:rgba(152,162,179,.13); --slate-b:rgba(152,162,179,.38); --sh1:none; --sh2:0 2px 10px rgba(0,0,0,.35); --sh3:0 20px 50px rgba(0,0,0,.6); --code-bg:#0A0F1A; --code-tx:#C7D2E1; --scroll:#2A3448; } /* O tema claro precisa de separação real entre tela, cartões e conteúdo. Os overrides ficam isolados para preservar o registro mais atmosférico do tema escuro. */ html[data-theme="light"]{ --bg:#E9EDF3; --panel:#FFFFFF; --panel2:#F4F6F9; --panel3:#FFFFFF; --line:#D4DAE3; --line2:#AEB8C6; --txt:#101828; --txt2:#344054; --txt3:#667085; --soft:rgba(16,24,40,.055); --soft2:rgba(16,24,40,.095); --hover:rgba(16,24,40,.07); --or-s:rgba(246,130,31,.15); --or-b:rgba(213,92,0,.58); --or-ink:#A33E00; --red-s:rgba(196,50,10,.13); --red-b:rgba(196,50,10,.50); --grn-s:rgba(6,118,71,.13); --grn-b:rgba(6,118,71,.45); --blu-s:rgba(23,92,211,.12); --blu-b:rgba(23,92,211,.42); --pur-s:rgba(105,65,198,.12); --pur-b:rgba(105,65,198,.42); --amb-s:rgba(181,71,8,.13); --slate-s:rgba(71,84,103,.12); --slate-b:rgba(71,84,103,.40); --sh1:0 1px 2px rgba(16,24,40,.08), 0 1px 1px rgba(16,24,40,.04); --sh2:0 5px 16px rgba(16,24,40,.09), 0 1px 3px rgba(16,24,40,.06); --code-bg:#F3F5F8; --code-tx:#27364A; --scroll:#AEB7C4; } /* Cor por tom, usada por etapas, blocos e grupos da biblioteca. */ .tone-orange{--tc:var(--or); --ts:var(--or-s); --tb:var(--or-b)} .tone-blue {--tc:var(--blu); --ts:var(--blu-s); --tb:var(--blu-b)} .tone-purple{--tc:var(--pur); --ts:var(--pur-s); --tb:var(--pur-b)} .tone-green {--tc:var(--grn); --ts:var(--grn-s); --tb:var(--grn-b)} .tone-red {--tc:var(--red); --ts:var(--red-s); --tb:var(--red-b)} .tone-slate {--tc:var(--slate);--ts:var(--slate-s); --tb:var(--slate-b)} *{box-sizing:border-box;margin:0;padding:0} /* Estilo do autor vence o [hidden] do navegador, então display em classe impediria o elemento de sumir quando o JS faz el.hidden = true. */ [hidden]{display:none !important} html,body{height:100%} body{ background:var(--bg); color:var(--txt); font:400 14px/1.5 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; overflow:hidden; display:flex; flex-direction:column; transition:background .25s ease, color .25s ease; } html[data-theme="light"] body{ -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto; } button,input,select,textarea{font-family:inherit;color:inherit} button{background:none;border:none;cursor:pointer} svg{width:16px;height:16px;flex:none} code,.mono{font-family:'JetBrains Mono',ui-monospace,monospace} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:9px;border:2px solid var(--bg)} body.is-busy{cursor:progress} /* ------------------------------- TOPBAR -------------------------------- */ .topbar{ flex:none; height:58px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 18px; background:var(--panel); border-bottom:1px solid var(--line); box-shadow:var(--sh1); z-index:40; } .brand{display:flex;align-items:center;gap:12px;min-width:0} .brand-mark{width:50px;height:31px} .brand-copy h1{font-size:17px;font-weight:800;letter-spacing:-.2px;line-height:1.2} .brand-copy p{font-size:12.4px;color:var(--txt2);line-height:1.25} .brand-by{ display:block;margin-top:2px;font-size:9.5px;letter-spacing:.2px; color:var(--txt3);line-height:1.2; } .topbar-actions{display:flex;align-items:center;gap:7px} .btn{ display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px; border-radius:9px;font-size:12.5px;font-weight:600;color:var(--txt2); border:1px solid var(--line);background:var(--panel); transition:all .16s var(--ease);white-space:nowrap; } .btn:hover{background:var(--hover);color:var(--txt);border-color:var(--line2)} .btn svg{width:15px;height:15px} .btn-icon{width:34px;padding:0;justify-content:center} .btn-primary{ background:linear-gradient(180deg,var(--or2),var(--or));color:#fff;border-color:transparent; box-shadow:0 1px 2px rgba(246,130,31,.35); } .btn-primary:hover{filter:brightness(1.05);color:#fff} .btn-tiny{height:26px;padding:0 9px;font-size:11px;border-radius:7px;gap:5px} .btn-tiny svg{width:12px;height:12px} .btn:disabled{opacity:.42;cursor:not-allowed} .btn-ghost{background:transparent} /* Chave global sem controle x com Cloudflare. */ .mode-switch{ display:inline-flex;align-items:center;gap:4px;height:36px;padding:3px 3px 3px 11px; border-radius:11px;border:1px solid var(--line2);background:var(--soft); transition:border-color .25s var(--ease), background .25s var(--ease); } .mode-switch.is-on{border-color:var(--or-b);background:var(--or-s)} .mode-lbl{ font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px; color:var(--txt3);margin-right:5px; } .mode-opt{ height:28px;padding:0 13px;border-radius:8px;font-size:12px;font-weight:700; color:var(--txt3);transition:all .2s var(--ease); } .mode-opt:hover{color:var(--txt)} .mode-opt.is-on{background:var(--panel);color:var(--txt);box-shadow:var(--sh1)} .mode-switch.is-on .mode-opt.is-on{color:var(--or)} .mode-switch:not(.is-on) .mode-opt.is-on{color:var(--red);box-shadow:0 0 0 1px var(--red-b)} html[data-theme="dark"] .mode-opt.is-on{background:var(--panel3)} /* No claro, a proteção ativa é a principal decisão comercial da tela. */ html[data-theme="light"] .mode-switch.is-on{ border-color:var(--or);background:#FFF3E8; box-shadow:0 0 0 1px rgba(246,130,31,.12); } html[data-theme="light"] .mode-switch.is-on .mode-opt.is-on, html[data-theme="light"] .btn-primary{ background:linear-gradient(180deg,var(--or2),var(--or)); color:#101828;border-color:rgba(163,62,0,.18); box-shadow:0 4px 12px rgba(246,130,31,.24), inset 0 1px rgba(255,255,255,.38); } html[data-theme="light"] .btn-primary:hover{color:#101828;filter:brightness(1.03)} .lang-switch{ display:inline-flex;align-items:center;height:34px;padding:3px; background:var(--soft);border:1px solid var(--line);border-radius:9px; } .lang-btn{ height:26px;padding:0 9px;border-radius:6px; font-size:10.5px;font-weight:700;letter-spacing:.4px; color:var(--txt3);transition:all .15s var(--ease); } .lang-btn:hover{color:var(--txt)} .lang-btn.is-on{background:var(--panel);color:var(--or);box-shadow:var(--sh1)} html[data-theme="dark"] .lang-btn.is-on{background:var(--panel3)} /* ----------------------------- WORKSPACE ------------------------------- */ .workspace{ flex:1; min-height:0; display:grid; grid-template-columns:362px minmax(0,1fr) 384px; gap:12px; padding:12px; } .col{display:flex;flex-direction:column;gap:12px;min-height:0} .col-side{overflow-y:auto;overflow-x:hidden;padding-right:2px} .col-stage{min-width:0} .col-right{min-width:0;overflow-y:auto;overflow-x:hidden;padding-right:2px} .card{ background:var(--panel); border:1px solid var(--line); border-radius:13px; box-shadow:var(--sh1); display:flex; flex-direction:column; min-height:0; } .card-head{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px; border-bottom:1px solid var(--line); } .card-head h2{ font-size:11.5px;font-weight:700;letter-spacing:.4px; text-transform:uppercase;color:var(--txt2); } .hint{font-size:10.5px;color:var(--txt3)} .card-side{flex:none} .card-body{padding:11px 12px;display:flex;flex-direction:column;gap:9px} html[data-theme="light"] .card-head{ background:linear-gradient(180deg,#FFFFFF 0%,#FAFBFC 100%); } html[data-theme="light"] .card-head h2{color:#344054} html[data-theme="light"] .card-path, html[data-theme="light"] .card-console, html[data-theme="light"] .card-exposure, html[data-theme="light"] .card-start{ box-shadow:var(--sh2); } /* ========================= COLUNA: JORNADA ============================== */ .stage-list{display:flex;flex-direction:column;gap:6px;padding:9px 10px} .stage-item{ position:relative;display:grid;grid-template-columns:26px 26px 1fr;gap:9px; align-items:center;width:100%;text-align:left;padding:9px 11px;border-radius:11px; border:1px solid var(--line);background:var(--panel2); transition:all .22s var(--ease);overflow:hidden; } .stage-item::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--tc);opacity:0;transition:opacity .22s var(--ease); } .stage-item:hover{border-color:var(--line2);background:var(--hover)} .stage-item.is-past{opacity:.72} .stage-item.is-on{ border-color:var(--tb);background:var(--ts); box-shadow:0 0 0 1px var(--tb) inset; } .stage-item.is-on::before{opacity:1} .stage-n{ width:26px;height:26px;border-radius:8px;display:grid;place-items:center; font-size:12.5px;font-weight:800;color:var(--txt3);background:var(--soft2); transition:all .22s var(--ease); } .stage-item.is-on .stage-n{background:var(--tc);color:#fff} .stage-ico{display:grid;place-items:center;color:var(--tc)} .stage-ico svg{width:19px;height:19px} .stage-copy{min-width:0;display:flex;flex-direction:column} .stage-copy b{font-size:12.8px;font-weight:700;line-height:1.25} .stage-copy i{font-style:normal;font-size:10.5px;color:var(--txt3);line-height:1.3} /* O selo desce para a linha do subtítulo. No topo ele colidia com os nomes longos de etapa, e reservar espaço no título esmagaria o texto. */ .stage-now{ position:absolute;right:9px;bottom:8px;font-size:8.5px;font-weight:700; text-transform:uppercase;letter-spacing:.5px;color:var(--tc); } .stage-item.is-on .stage-copy i{padding-right:62px} html[data-theme="light"] .stage-item.is-past{opacity:.88} html[data-theme="light"] .stage-item.is-on{ border-color:var(--tc);box-shadow:0 0 0 1px var(--tb) inset, var(--sh1); } /* ========================= COLUNA: EXPOSICAO ============================ Painel próprio, fora da faixa de KPIs: é o número que fecha a conversa e precisa carregar a fonte junto. */ .card-exposure .card-body{gap:10px} /* A premissa é uma equação de três termos: quem, a taxa de mercado e o que sai. Os dois primeiros sustentam o terceiro, então precisam de peso visual parecido, e só o resultado leva o laranja. */ .exp-eq{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:6px;align-items:stretch} .exp-term{ display:flex;flex-direction:column;gap:1px;min-width:0; padding:9px 8px;border-radius:11px;border:1px solid var(--line); background:var(--panel2); } .exp-term b{ font-size:23px;font-weight:800;letter-spacing:-.9px;line-height:1.05; color:var(--txt);font-variant-numeric:tabular-nums; } .exp-term-lbl{font-size:10px;font-weight:600;color:var(--txt2);line-height:1.25} .exp-term-sub{font-size:9px;color:var(--txt3);line-height:1.25;margin-top:1px} .exp-term.is-out{ border-color:var(--or-b);background:var(--or-s); } .exp-term.is-out b{font-size:30px;letter-spacing:-1.3px;color:var(--or)} .exp-term.is-out .exp-term-lbl{color:var(--txt)} .exp-op{ align-self:center;font-size:13px;font-weight:700;color:var(--txt3); line-height:1;padding:0 1px; } .exp-math{ font-size:9.5px;color:var(--txt3);line-height:1.4; font-variant-numeric:tabular-nums; } .exp-bar{ height:7px;border-radius:99px;background:var(--red-s); border:1px solid var(--red-b);overflow:hidden;position:relative; } .exp-held{ display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,var(--grn),var(--grn)); transition:width .62s var(--ease); } .exp-bar.is-live::after{ content:'';position:absolute;inset:0;border-radius:99px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); transform:translateX(-100%);animation:sheen 2.8s var(--ease) infinite; } @keyframes sheen{to{transform:translateX(100%)}} .exp-split{display:flex;flex-direction:column;gap:4px} .exp-tag{font-size:11px;color:var(--txt2);display:flex;align-items:baseline;gap:6px} .exp-tag b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums} .exp-tag-held b{color:var(--grn)} .exp-tag-open b{color:var(--red)} .exp-idle{font-size:11px;color:var(--txt3);line-height:1.45} .exp-basis{font-size:10px;color:var(--txt3);line-height:1.4;margin-top:6px} .exp-note{ font-size:10px;line-height:1.5;color:var(--txt3); border-top:1px dashed var(--line2);padding-top:8px; } .exp-note a{color:var(--or);text-decoration:none;border-bottom:1px dotted var(--or-b)} .exp-note a:hover{border-bottom-style:solid} html[data-theme="light"] .exp-term.is-out b, html[data-theme="light"] .exp-note a, html[data-theme="light"] .chip.is-sel, html[data-theme="light"] .lang-btn.is-on{ color:var(--or-ink); } /* ======================== COLUNA: COMO COMECAR ========================= */ .start-list{display:flex;flex-direction:column;gap:6px;padding:9px 10px} .start-card{ position:relative;width:100%;display:grid; grid-template-columns:28px minmax(0,1fr) 14px;gap:9px;align-items:center; min-height:65px;padding:8px 10px;text-align:left;border-radius:11px; border:1px solid var(--line);background:var(--panel2); transition:all .2s var(--ease);overflow:hidden; } .start-card::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--tc);opacity:0;transition:opacity .2s var(--ease); } .start-card:hover{border-color:var(--tb);background:var(--ts);transform:translateX(2px)} .start-card:hover::before,.start-card.is-current::before{opacity:1} .start-card.is-current{border-color:var(--tb);background:var(--ts);box-shadow:0 0 0 1px var(--tb) inset} .start-card.is-future{opacity:.7} .start-card.is-future:hover{opacity:1} .start-n{ width:28px;height:28px;border-radius:9px;display:grid;place-items:center; color:var(--tc);background:var(--ts);font-size:12px;font-weight:800; border:1px solid var(--tb); } .start-card.is-current .start-n{color:#fff;background:var(--tc)} .start-copy{min-width:0;display:flex;flex-direction:column;gap:1px} .start-copy b{font-size:11.8px;font-weight:800;line-height:1.25;color:var(--txt)} .start-copy i{font-size:9.7px;font-style:normal;line-height:1.3;color:var(--txt3)} .start-meta{ font-size:8px;font-weight:700;line-height:1.2;text-transform:uppercase; letter-spacing:.45px;color:var(--tc); } .start-arrow{width:13px;height:13px;color:var(--txt3);transition:transform .2s var(--ease)} .start-card:hover .start-arrow{color:var(--tc);transform:translateX(2px)} html[data-theme="light"] .start-card.is-current{border-color:var(--tc);box-shadow:0 0 0 1px var(--tb) inset,var(--sh1)} /* Ficha tecnica de ativacao. */ .modal-box.modal-start-box{width:min(1080px,100%)} .start-hero{ display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center; padding:15px 16px;border:1px solid var(--tb);border-radius:13px;background:var(--ts); } .start-hero-ico{ width:48px;height:48px;border-radius:13px;display:grid;place-items:center; color:var(--tc);background:var(--panel);border:1px solid var(--tb);box-shadow:var(--sh1); } .start-hero-ico svg{width:24px;height:24px} .start-hero-copy>span{ display:block;margin-bottom:2px;font-size:9px;font-weight:800; text-transform:uppercase;letter-spacing:.6px;color:var(--tc); } .start-hero-copy h3{font-size:20px;font-weight:800;letter-spacing:-.4px;line-height:1.2} .start-hero-copy p{margin-top:4px;font-size:12px;line-height:1.5;color:var(--txt2);max-width:760px} .start-section h4,.start-docs h4{ display:block;margin-bottom:6px;font-size:9px;font-weight:800; text-transform:uppercase;letter-spacing:.6px;color:var(--txt3); } .start-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .start-hero,.start-detail-grid,.start-section,.start-docs{min-width:0} .start-hero-copy,.start-section{min-width:0} .start-hero-copy p,.start-section li{overflow-wrap:anywhere} .start-section{padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)} .start-section ul,.start-section ol{padding-left:19px;display:flex;flex-direction:column;gap:7px} .start-section li{padding-left:2px;font-size:11.5px;line-height:1.5;color:var(--txt2)} .start-section li::marker{color:var(--tc,var(--or));font-weight:800} .start-docs>div{display:flex;flex-wrap:wrap;gap:8px} .start-doc{ display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:8px; border:1px solid var(--line);background:var(--panel2);color:var(--blu); font-size:10.5px;font-weight:700;text-decoration:none;transition:all .16s var(--ease); } .start-doc:hover{border-color:var(--blu-b);background:var(--blu-s)} .start-doc svg{width:13px;height:13px} /* ======================= BARRA DA ETAPA ATUAL =========================== */ .stage-bar{ flex:none;display:grid;grid-template-columns:40px 1fr auto;gap:13px; align-items:center;padding:11px 15px; border-left:3px solid var(--tc); } .sb-ico{ width:40px;height:40px;border-radius:11px;display:grid;place-items:center; background:var(--ts);color:var(--tc); } .sb-ico svg{width:22px;height:22px} .sb-copy h3{font-size:14.5px;font-weight:800;letter-spacing:-.2px;margin-bottom:2px} .sb-n{ display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase; letter-spacing:.7px;color:var(--tc);background:var(--ts); padding:2px 7px;border-radius:5px;margin-right:6px;vertical-align:1px; } .sb-copy p{font-size:11.8px;line-height:1.45;color:var(--txt2)} .sb-risk{text-align:right;max-width:270px} .sb-lbl{ display:block;font-size:8.5px;font-weight:700;text-transform:uppercase; letter-spacing:.6px;color:var(--txt3);margin-bottom:2px; } .sb-risk b{font-size:12px;font-weight:700;color:var(--red);line-height:1.3} .faq-context .sb-risk b{color:var(--tc)} /* ============================== PIPELINE ================================ O diagrama é o palco: fica com a altura elástica e o registro de logs recebe altura fixa, senão sobra um vazio grande embaixo antes do primeiro envio. */ .card-path{flex:none} .path-legend{display:flex;align-items:center;gap:11px;flex-wrap:wrap} .lg{ display:inline-flex;align-items:center;gap:5px;font-size:10px; font-weight:600;color:var(--txt3); } .lg::before{content:'';width:8px;height:8px;border-radius:3px;background:var(--line2)} .lg-pass::before{background:var(--grn)} .lg-flag::before{background:var(--amb)} .lg-block::before{background:var(--red)} /* Vazou: mesmo vermelho, mas vazado, porque não é uma decisão nossa. */ .lg-leak::before{background:transparent;box-shadow:inset 0 0 0 2px var(--red)} .lg-idle::before{background:var(--line2)} .lg-locked::before{background:transparent;border:1px dashed var(--line2)} .speed{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--txt3)} .speed input{width:74px;accent-color:var(--or)} .path-hint{ flex:none;font-size:10.5px;color:var(--txt3); padding:7px 15px 0;line-height:1.4; } .pipeline-wrap{position:relative;padding:12px 15px 16px;min-height:0} .pipeline{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center} .pipe-origin{display:flex;align-items:center} .pipe-lanes{display:flex;flex-direction:column;gap:14px;min-width:0} .lane{display:flex;align-items:stretch;gap:0;min-width:0} /* O leque tem três blocos contra um só do AI Gateway, então leva a fatia maior da faixa, senão os nomes quebram em três linhas. */ .fan{display:flex;gap:10px;flex:1.75;min-width:0} .fan .node{min-width:0} /* Conector: linha estática que ganha feixe quando o pacote passa. */ .conn{ flex:none;align-self:center;width:34px;height:2px;border-radius:2px; background:var(--line2);position:relative;overflow:hidden;opacity:.75; } .conn.is-live{background:var(--tb,var(--line2));opacity:1} .conn::after{ content:'';position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,var(--or),transparent); } .conn.is-beam::after{animation:beam .42s var(--ease) forwards} @keyframes beam{from{transform:translateX(-100%)}to{transform:translateX(100%)}} /* Chave de derivação: o AI Gateway abre para três destinos alternativos, que não são sequência. Sem feixe aqui, porque não é uma linha só. */ .conn-fan{ width:22px;align-self:stretch;height:auto;background:none;overflow:visible; border-left:2px solid var(--line2);border-radius:0;margin-right:10px;opacity:.7; } .conn-fan::after{display:none} /* Bloco do caminho. */ .node{ flex:1;min-width:0;display:flex;flex-direction:column;gap:6px; padding:21px 10px 9px;border-radius:12px;border:1px solid var(--line); background:var(--panel2);position:relative; transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), opacity .3s var(--ease); } .node-face{ display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto; gap:2px 9px;text-align:left;width:100%; } .node-ico{ grid-row:1 / span 2;width:30px;height:30px;border-radius:9px; display:grid;place-items:center;background:var(--ts);color:var(--tc); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .node-ico svg{width:17px;height:17px} .node-name{ font-size:11.5px;font-weight:800;letter-spacing:.3px; text-transform:uppercase;color:var(--txt);line-height:1.2; } .node-role{font-size:10px;color:var(--txt3);line-height:1.25} /* Selo do produto que o cliente precisa adquirir para aquele bloco existir. Fica na coluna do texto, nunca embaixo do icone, e some de propósito nos blocos que não são produto Cloudflare (funcionário e IA externa), que trazem sku nulo. */ .node-sku{ grid-column:1 / -1;justify-self:start;margin-top:6px; padding:2px 8px;border-radius:999px; background:var(--or);color:#fff; font-size:8px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; line-height:1.7;max-width:100%;white-space:nowrap; } .node.is-locked .node-sku{background:var(--txt3);opacity:.5} /* O veredito fica fora do fluxo, numa faixa reservada pelo padding do topo do bloco. Se entrasse no fluxo, disputava largura com o nome e esmagava a coluna de texto nos blocos estreitos. */ .node-verdict{ position:absolute;right:10px;top:7px;font-size:8.5px;font-weight:800; text-transform:uppercase;letter-spacing:.5px;opacity:0; transition:opacity .3s var(--ease); } .node[class*="hop-"] .node-verdict{opacity:1} /* Estado travado: aparece no caminho para o cliente ver onde vai chegar. */ .node.is-locked{ opacity:.42;border-style:dashed;background:transparent; } .node.is-locked .node-ico{background:var(--soft2);color:var(--txt3)} .node-lock{ font-size:9px;color:var(--txt3);font-style:italic;line-height:1.3; } /* Vereditos. */ .node.hop-pass {border-color:var(--grn-b);background:var(--grn-s)} .node.hop-flag {border-color:var(--amb); background:var(--amb-s)} .node.hop-block {border-color:var(--red-b);background:var(--red-s)} .node.hop-leak {border-color:var(--red); background:var(--red-s)} .node.hop-idle, .node.hop-skip {opacity:.5} .node.hop-pass .node-verdict{color:var(--grn)} .node.hop-flag .node-verdict{color:var(--amb)} .node.hop-block .node-verdict{color:var(--red)} .node.hop-leak .node-verdict{color:var(--red)} .node.hop-idle .node-verdict, .node.hop-skip .node-verdict{color:var(--txt3)} /* Etapas futuras continuam subordinadas, mas legíveis. Elas são parte do roadmap de compra e não devem desaparecer no tema claro. */ html[data-theme="light"] .node.is-locked{ opacity:.68;background:#FAFBFC;border-color:#C2CAD5; } html[data-theme="light"] .node.is-locked .node-sku{ opacity:.82;background:#667085;color:#fff; } html[data-theme="light"] .node.hop-idle, html[data-theme="light"] .node.hop-skip{opacity:.70} /* Bloco processando: brilho que pulsa, sem deslocar nada. */ .node.is-active{ border-color:var(--tb);background:var(--ts); box-shadow:0 0 0 3px var(--ts), 0 6px 18px rgba(16,24,40,.10); } .node.is-active .node-ico{ transform:scale(1.06); box-shadow:0 0 0 0 var(--tb); animation:pulse 1.05s var(--ease) infinite; } @keyframes pulse{ 0% {box-shadow:0 0 0 0 var(--tb)} 70% {box-shadow:0 0 0 11px transparent} 100%{box-shadow:0 0 0 0 transparent} } .node.hop-block .node-ico{animation:lockin .36s var(--ease)} @keyframes lockin{from{transform:scale(1.12)}to{transform:scale(1)}} .node.hop-leak::after{ content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none; box-shadow:0 0 0 2px var(--red) inset;animation:stamp .48s var(--ease); } @keyframes stamp{from{opacity:0}to{opacity:1}} /* Bloco que acabou de destravar ao mudar de etapa. */ .node.is-unlock{animation:unlock .74s var(--ease)} @keyframes unlock{ 0% {opacity:.42;box-shadow:0 0 0 0 var(--tb)} 40% {opacity:1; box-shadow:0 0 0 7px var(--ts)} 100%{opacity:1; box-shadow:0 0 0 0 transparent} } /* Controles abaixo de cada bloco. */ .node-ctrl{display:flex;flex-direction:column;gap:3px} .tog{ display:grid;grid-template-columns:24px 1fr;gap:7px;align-items:center; cursor:pointer;padding:2px 0; } .tog input{position:absolute;opacity:0;width:0;height:0} .tog.is-muted{cursor:not-allowed;opacity:.45} .tog-dot{ width:24px;height:14px;border-radius:99px;background:var(--line2); position:relative;transition:background .2s var(--ease); } .tog-dot::after{ content:'';position:absolute;top:2px;left:2px;width:10px;height:10px; border-radius:50%;background:#fff;box-shadow:var(--sh1); transition:transform .22s var(--ease); } /* Toda chave ligada é um produto Cloudflare ativo, então usa sempre o laranja da marca. A cor do bloco fica só na borda e no fundo do card. */ .tog.is-on .tog-dot{background:var(--or)} .tog.is-on .tog-dot::after{transform:translateX(10px)} .tog-lbl{min-width:0;display:flex;flex-direction:column;line-height:1.2} .tog-lbl b{font-size:10px;font-weight:700;color:var(--txt2)} .tog-lbl i{font-style:normal;font-size:9px;color:var(--txt3)} .tog.is-on .tog-lbl b{color:var(--txt)} html[data-theme="light"] .tog.is-muted{opacity:.66} /* --------------------------- POPOVER DO BLOCO -------------------------- */ .node-pop{ position:absolute;left:15px;right:15px;bottom:15px;z-index:30; background:var(--panel);border:1px solid var(--line2);border-radius:13px; box-shadow:var(--sh3);max-height:340px;display:flex;flex-direction:column; opacity:0;transform:translateY(8px);transition:all .2s var(--ease); } .node-pop.is-open{opacity:1;transform:none} .pop-head{ flex:none;display:grid;grid-template-columns:34px 1fr 30px;gap:10px; align-items:center;padding:11px 13px;border-bottom:1px solid var(--line); } .pop-ico{ width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:var(--ts);color:var(--tc); } .pop-head h4{font-size:13px;font-weight:800;letter-spacing:-.1px} .pop-head p{font-size:10.5px;color:var(--txt3)} .pop-close{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--txt3)} .pop-close:hover{background:var(--hover);color:var(--txt)} .pop-body{padding:12px 13px;overflow-y:auto;display:flex;flex-direction:column;gap:8px} .pop-locked{ font-size:11px;line-height:1.5;color:var(--amb); background:var(--amb-s);border-radius:8px;padding:8px 10px; } .pop-what{font-size:12px;line-height:1.55;color:var(--txt2)} .pop-chips{display:flex;flex-wrap:wrap;gap:5px} .chip-mini{ font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:5px; background:var(--soft2);color:var(--txt2); } .pop-row{ display:grid;grid-template-columns:96px 1fr;gap:9px;font-size:11px; padding-top:6px;border-top:1px dashed var(--line); } .pop-row span{color:var(--txt3);font-weight:600} .pop-row b{font-weight:600;color:var(--txt2);line-height:1.45} .pop-lbl{ display:block;font-size:9px;font-weight:700;text-transform:uppercase; letter-spacing:.5px;color:var(--txt3);margin-bottom:4px; } .pop-code pre{ background:var(--code-bg);border:1px solid var(--line);border-radius:9px; padding:9px 11px;overflow-x:auto; } .pop-code code{font-size:10px;line-height:1.6;color:var(--code-tx);white-space:pre} /* -------------------------------- KPIs --------------------------------- */ .kpi-strip{flex:none;display:grid;grid-template-columns:repeat(7,1fr);gap:9px} .kpi{ background:var(--panel);border:1px solid var(--line);border-radius:11px; padding:8px 11px;box-shadow:var(--sh1);position:relative;overflow:hidden; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); } .kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line2)} .kpi-val{ display:block;font-size:19px;font-weight:800;letter-spacing:-.6px; line-height:1.15;font-variant-numeric:tabular-nums; } .kpi-lbl{display:block;font-size:9.5px;color:var(--txt3);margin-top:1px;letter-spacing:.2px} .kpi-sub{display:block;font-style:normal;font-size:8.5px;color:var(--txt3);opacity:.8} .kpi-block::before{background:var(--red)} .kpi-block .kpi-val{color:var(--red)} .kpi-flag::before{background:var(--amb)} .kpi-flag .kpi-val{color:var(--amb)} .kpi-leak::before{background:var(--red)} .kpi-leak .kpi-val{color:var(--red)} .kpi-good::before{background:var(--grn)} .kpi-good .kpi-val{color:var(--grn)} .kpi.is-bump{box-shadow:0 0 0 2px var(--or-s), var(--sh2);border-color:var(--or-b)} html[data-theme="light"] .kpi-lbl, html[data-theme="light"] .log-table th{color:#4F5D70;font-weight:700} html[data-theme="light"] .kpi-sub{color:#667085;opacity:1} /* -------------------------------- LOGS --------------------------------- */ .card-logs{flex:1;min-height:0} .log-actions{display:flex;align-items:center;gap:8px} .seg{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:2px} .seg-btn{ padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600; color:var(--txt3);transition:all .15s var(--ease);white-space:nowrap; } .seg-btn:hover{color:var(--txt)} .seg-btn.is-on{background:var(--panel);color:var(--txt);box-shadow:var(--sh1)} html[data-theme="dark"] .seg-btn.is-on{background:var(--panel3)} .log-wrap{flex:1;min-height:0;overflow:auto;position:relative} .log-table{width:100%;border-collapse:collapse;font-size:11.5px} .log-table th{ position:sticky;top:0;z-index:2;background:var(--panel);text-align:left; padding:7px 11px;font-size:9px;font-weight:700;text-transform:uppercase; letter-spacing:.5px;color:var(--txt3);border-bottom:1px solid var(--line); } .log-table td{padding:6px 11px;border-bottom:1px solid var(--line);vertical-align:middle} .log-table td.mono{font-size:10.5px;color:var(--txt2);white-space:nowrap} .cell-what{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt2)} .log-table tbody tr{transition:background .12s ease} .log-table tbody tr:hover{background:var(--hover)} .log-table tr.row-leak{background:var(--red-s)} .log-empty{padding:22px;text-align:center;font-size:12px;color:var(--txt3)} html[data-theme="light"] .log-wrap{background:#FCFDFE} html[data-theme="light"] .log-table th{background:#F5F7FA} .vp{display:inline-block;font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:5px} .vp-pass{background:var(--grn-s);color:var(--grn)} .vp-flag{background:var(--amb-s);color:var(--amb)} .vp-block{background:var(--red-s);color:var(--red)} .vp-leak{background:var(--red);color:#fff} /* ------------------------------- CONSOLE ------------------------------- */ .card-console{flex:none} .pill{ display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700; padding:2.5px 8px;border-radius:20px;background:var(--soft2);color:var(--txt3); } .pill-live{background:var(--grn-s);color:var(--grn)} .pill-live i{width:6px;height:6px;border-radius:50%;background:var(--grn);animation:blink 1.8s infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}} .chat{flex:none;height:206px;overflow-y:auto;padding:11px 12px;display:flex;flex-direction:column;gap:8px} .chat-empty{font-size:11.5px;color:var(--txt3);text-align:center;padding:14px 0} .msg{ max-width:95%;display:flex;flex-direction:column;gap:3px; opacity:0;transform:translateY(7px);transition:all .32s var(--ease); } .msg.is-in{opacity:1;transform:none} .msg-who{ font-size:8.5px;font-weight:800;text-transform:uppercase; letter-spacing:.6px;color:var(--txt3);padding:0 3px; } .msg-who-block{color:var(--red)} .msg-who-leak{color:var(--red)} .msg-nc{ font-weight:700;color:var(--red);background:var(--red-s); padding:1px 5px;border-radius:4px;margin-left:4px; } .msg-body{ padding:9px 11px;border-radius:11px;font-size:12.3px;line-height:1.5; background:var(--panel2);border:1px solid var(--line); } .msg-meta{font-size:9.5px;color:var(--txt3);padding:0 3px} .msg-coach{ font-size:10.5px;line-height:1.45;color:var(--grn); background:var(--grn-s);border-radius:8px;padding:7px 9px; } .msg-coach b{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px} .msg-user{align-self:flex-end;align-items:flex-end} .msg-user .msg-body{background:var(--blu-s);border-color:var(--blu-b)} .msg-block .msg-body{background:var(--red-s);border-color:var(--red-b)} .msg-leak .msg-body{background:var(--red-s);border-color:var(--red);box-shadow:0 0 0 1px var(--red)} .msg-flag .msg-body{background:var(--amb-s);border-color:var(--amb)} .msg-ok .msg-body{background:var(--grn-s);border-color:var(--grn-b)} .prompt-library{flex:none;border-top:1px solid var(--line);padding:9px 11px} .lib-head{ display:flex;align-items:center;justify-content:space-between;margin-bottom:7px; font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--txt3); } .lib-scroll{max-height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:9px} .lib-group{display:flex;flex-direction:column;gap:5px} .lib-group-head{display:flex;align-items:center;gap:7px} .lib-badge{ font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px; color:var(--tc);background:var(--ts);padding:2px 6px;border-radius:5px; } .lib-kind{font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:.4px} .chip-row{display:flex;flex-wrap:wrap;gap:5px} .chip{ display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px; font-size:11px;font-weight:500;border:1px solid var(--line);background:var(--panel2); color:var(--txt2);transition:all .18s var(--ease); } .chip:hover{border-color:var(--line2);color:var(--txt);transform:translateY(-1px)} .chip-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--txt3)} .risk-safe .chip-dot,.chip.risk-safe .chip-dot{background:var(--grn)} .risk-data .chip-dot,.chip.risk-data .chip-dot{background:var(--or)} .risk-intent .chip-dot,.chip.risk-intent .chip-dot{background:var(--red)} .risk-ident .chip-dot,.chip.risk-ident .chip-dot{background:var(--pur)} .risk-money .chip-dot,.chip.risk-money .chip-dot{background:var(--blu)} .chip.is-sel{border-color:var(--or-b);background:var(--or-s);color:var(--or);font-weight:700} html[data-theme="light"] .node-sku{ color:#101828;border:1px solid rgba(163,62,0,.18); box-shadow:0 1px 2px rgba(163,62,0,.12); } .composer{flex:none;border-top:1px solid var(--line);padding:9px 11px;display:flex;flex-direction:column;gap:8px} .composer-body{ min-height:112px;padding:9px 11px;border-radius:9px; background:var(--panel2);border:1px solid var(--line); display:flex;flex-direction:column;gap:4px; } .cp-ph{font-size:11.5px;color:var(--txt3);line-height:1.5} .cp-label{ display:inline-flex;align-items:center;gap:5px;align-self:flex-start; font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px; color:var(--txt2); } .cp-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--txt3)} .cp-label.risk-safe::before{background:var(--grn)} .cp-label.risk-data::before{background:var(--or)} .cp-label.risk-intent::before{background:var(--red)} .cp-label.risk-ident::before{background:var(--pur)} .cp-label.risk-money::before{background:var(--blu)} .cp-text{font-size:12.3px;line-height:1.5;color:var(--txt)} .cp-meta{font-size:9.5px;color:var(--txt3)} .composer-actions{display:flex;justify-content:space-between;gap:8px;align-items:center} #btnSend{min-width:104px;justify-content:center} /* -------------------------------- TRACE -------------------------------- */ .card-trace{flex:1;min-height:170px} .trace{list-style:none;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:0} .trace-empty{font-size:11.5px;color:var(--txt3);line-height:1.5;padding:6px 0} .tstep{ position:relative;padding:0 0 11px 16px; opacity:0;transform:translateX(-6px);transition:all .3s var(--ease); } .tstep.is-in{opacity:1;transform:none} .tstep-rail{position:absolute;left:3px;top:5px;bottom:0;width:2px;background:var(--line)} .tstep:last-child .tstep-rail{bottom:8px} .tstep::before{ content:'';position:absolute;left:0;top:4px;width:8px;height:8px;border-radius:50%; background:var(--line2);border:2px solid var(--panel);z-index:1; } .tstep.st-pass::before {background:var(--grn)} .tstep.st-flag::before {background:var(--amb)} .tstep.st-block::before{background:var(--red)} .tstep.st-leak::before {background:var(--red);box-shadow:0 0 0 3px var(--red-s)} .tstep.st-info::before {background:var(--blu)} .tstep.st-skip{opacity:.62} .tstep.st-skip.is-in{opacity:.62} .tstep-head{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .tstep-node{ font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px; color:var(--txt3);background:var(--soft2);padding:1px 5px;border-radius:4px; } .tstep-head b{font-size:11.5px;font-weight:700} .tstep p{font-size:10.8px;line-height:1.5;color:var(--txt2);margin-top:2px} .tstep p b{font-weight:700;color:var(--txt)} .tstep-meta{ display:inline-block;margin-top:3px;font-size:9.5px;color:var(--txt3); font-family:'JetBrains Mono',monospace; } /* -------------------------------- MODAIS ------------------------------- */ .modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px; opacity:0;transition:opacity .2s var(--ease)} .modal.is-open{opacity:1} .modal-backdrop{position:absolute;inset:0;background:rgba(16,24,40,.55);backdrop-filter:blur(3px)} html[data-theme="dark"] .modal-backdrop{background:rgba(0,0,0,.72)} .modal-box{ position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px; box-shadow:var(--sh3);width:min(880px,100%);min-width:0;max-height:calc(100vh - 48px); display:flex;flex-direction:column; transform:scale(.98) translateY(6px);transition:transform .22s var(--ease); } .modal.is-open .modal-box{transform:none} .modal-wide{width:min(1320px,100%)} .modal-head{ flex:none;display:flex;align-items:center;justify-content:space-between; padding:13px 18px;border-bottom:1px solid var(--line); } .modal-head h2{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;letter-spacing:-.2px} .modal-head h2 svg{width:18px;height:18px;color:var(--or)} .modal-close{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--txt3)} .modal-close:hover{background:var(--hover);color:var(--txt)} /* min-height:0 é obrigatório: sem isso o item flex não encolhe abaixo do conteúdo e o overflow-y nunca chega a rolar. */ .modal-body{ flex:1;min-height:0;padding:16px 18px;overflow-y:auto; display:flex;flex-direction:column;gap:14px; } .modal-lead{font-size:13px;line-height:1.55;color:var(--txt2);max-width:940px} /* ------------------------------ FEEDBACK ------------------------------- */ .modal-feedback-box{width:min(620px,100%)} .feedback-form{gap:16px} .feedback-form,.feedback-fieldset,.feedback-message,.feedback-context,.feedback-actions{min-width:0} .feedback-fieldset{border:0;min-width:0} .feedback-fieldset legend,.feedback-message>span,.feedback-context b{ display:block;margin-bottom:7px;font-size:9.5px;font-weight:800; text-transform:uppercase;letter-spacing:.55px;color:var(--txt3); } .feedback-categories{display:grid;grid-template-columns:1fr 1fr;gap:9px} .feedback-choice{position:relative;cursor:pointer;min-width:0} .feedback-choice input{position:absolute;opacity:0;pointer-events:none} .feedback-choice>span{ display:flex;flex-direction:column;gap:3px;min-height:68px;padding:11px 13px; border:1px solid var(--line);border-radius:11px;background:var(--panel2); transition:all .16s var(--ease); } .feedback-choice b{font-size:12.5px;font-weight:800;color:var(--txt)} .feedback-choice i{font-size:10.5px;font-style:normal;line-height:1.4;color:var(--txt3)} .feedback-choice:hover>span{border-color:var(--or-b);background:var(--or-s)} .feedback-choice input:checked+span{ border-color:var(--or);background:var(--or-s);box-shadow:0 0 0 1px var(--or-b) inset; } .feedback-choice input:focus-visible+span{outline:2px solid var(--blu);outline-offset:2px} .feedback-message{display:flex;flex-direction:column} .feedback-message textarea{ width:100%;min-height:145px;resize:vertical;padding:11px 12px; border:1px solid var(--line);border-radius:11px;background:var(--panel2); font-size:12px;line-height:1.5;outline:none;transition:border-color .16s var(--ease); } .feedback-message textarea:focus{border-color:var(--or);box-shadow:0 0 0 2px var(--or-s)} .feedback-message small{align-self:flex-end;margin-top:5px;font-size:9.5px;color:var(--txt3)} .feedback-trap{position:fixed;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .feedback-context{ padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft); } .feedback-context b{margin-bottom:3px} .feedback-context span{font-size:10.5px;color:var(--txt2);font-family:'JetBrains Mono',monospace} .feedback-privacy{font-size:10.5px;line-height:1.45;color:var(--txt3);overflow-wrap:anywhere} .feedback-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px} .feedback-status{margin-right:auto;font-size:11px;line-height:1.4;color:var(--txt3)} .feedback-status.is-error{color:var(--red)} .feedback-status.is-success{color:var(--grn)} /* -------------------------------- JORNADA ------------------------------ */ .journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .jr{ border:1px solid var(--line);border-radius:13px;padding:13px; background:var(--panel2);display:flex;flex-direction:column;gap:9px; border-top:3px solid var(--tc); } .jr.is-on{background:var(--ts);border-color:var(--tb);border-top-color:var(--tc)} .jr header{display:grid;grid-template-columns:28px 1fr 22px;gap:9px;align-items:center} .jr-n{ width:28px;height:28px;border-radius:9px;display:grid;place-items:center; font-size:13px;font-weight:800;color:#fff;background:var(--tc); } .jr header h4{font-size:13px;font-weight:800;letter-spacing:-.1px} .jr header p{font-size:10px;color:var(--txt3)} .jr-ico{color:var(--tc)} .jr-ico svg{width:20px;height:20px} .jr-d{font-size:11.5px;line-height:1.55;color:var(--txt2);flex:1} .jr-row{display:flex;flex-direction:column;gap:2px;border-top:1px dashed var(--line2);padding-top:7px} .jr-row span{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--txt3)} .jr-row b{font-size:11px;font-weight:600;line-height:1.4;color:var(--txt2)} .jr .btn-tiny{align-self:flex-start;margin-top:2px} /* ------------------------------ POLITICAS ------------------------------ */ .seg-tabs{align-self:flex-start} .pol-pane{display:flex;flex-direction:column;gap:12px} .pane-intro{font-size:12.5px;line-height:1.55;color:var(--txt2);max-width:960px} .pane-intro b{font-weight:700;color:var(--txt)} .pol-quick{display:flex;align-items:center;gap:7px} .pol-quick span{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--txt3)} .pol-table{display:flex;flex-direction:column;gap:6px} .pol-row{ display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center; padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel2); } .pol-main{min-width:0} .pol-main b{font-size:12.5px;font-weight:700} .pol-main p{font-size:11px;line-height:1.45;color:var(--txt3);margin-top:2px} .pol-main p.mono{font-size:10px} .pol-fam{ font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px; padding:3px 8px;border-radius:6px;white-space:nowrap; } .fam-content{background:var(--blu-s);color:var(--blu)} .fam-intent {background:var(--pur-s);color:var(--pur)} .fam-custom {background:var(--or-s); color:var(--or)} .pol-on{font-size:11px;font-weight:700;color:var(--txt2)} .pol-tx{display:flex;flex-direction:column;gap:7px} .pol-tx label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--txt3)} .tx-row{display:flex;align-items:center;gap:12px} .tx-row input{flex:1;max-width:420px;accent-color:var(--or)} .tx-row b{font-size:14px;font-weight:800;color:var(--or);font-variant-numeric:tabular-nums} .snip{display:flex;flex-direction:column;gap:5px} .snip-name{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--txt3)} .code-block{ background:var(--code-bg);border:1px solid var(--line);border-radius:11px; padding:12px 14px;overflow-x:auto; } .code-block code{font-size:11px;line-height:1.65;color:var(--code-tx);white-space:pre} /* ------------------------------- ROTEIRO ------------------------------- */ .guide-list{display:flex;flex-direction:column;gap:11px} .gd{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start} .gd-n{ width:30px;height:30px;border-radius:9px;display:grid;place-items:center; font-size:13px;font-weight:800;color:#fff;background:linear-gradient(180deg,var(--or2),var(--or)); } .gd h4{font-size:13.5px;font-weight:700;margin-bottom:3px} .gd p{font-size:12px;line-height:1.55;color:var(--txt2);margin-bottom:7px} .sources{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:11px;color:var(--txt3)} /* -------------------------------- TOASTS ------------------------------- */ .toast-stack{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:8px} .toast{ padding:9px 14px;border-radius:10px; background:var(--panel);border:1px solid var(--line2);box-shadow:var(--sh3); font-size:12px;font-weight:600;min-width:230px;max-width:340px; opacity:0;transform:translateX(20px);transition:all .26s var(--ease); } .toast.is-in{opacity:1;transform:none} .toast-block{border-left:3px solid var(--red)} .toast-leak {border-left:3px solid var(--red);background:var(--red-s)} .toast-flag {border-left:3px solid var(--amb)} .toast-ok {border-left:3px solid var(--grn)} .toast-info {border-left:3px solid var(--blu)} /* ------------------------- PERGUNTAS E MAPA ---------------------------- */ .faq-only{display:none} body[data-view="faq"] .sim-only{display:none !important} body[data-view="faq"] .faq-only{display:flex} body[data-view="sim"] .faq-only{display:none !important} body[data-view="faq"] .faq-context{display:grid} .view-switch{ display:inline-flex;align-items:center;height:36px;padding:3px; border:1px solid var(--line2);border-radius:11px;background:var(--soft); } .view-opt{ height:28px;padding:0 16px;border-radius:8px;color:var(--txt3); font-size:12px;font-weight:750;transition:all .18s var(--ease); } .view-opt:hover{color:var(--txt)} .view-opt.is-on{color:var(--txt);background:var(--panel);box-shadow:var(--sh1)} html[data-theme="dark"] .view-opt.is-on{background:var(--panel3)} .card-faq{flex:1;overflow:hidden} .faq-intro{padding:12px 13px 9px;color:var(--txt2);font-size:11.5px;line-height:1.5} .faq-search{ display:flex;flex:none;align-items:center;gap:8px;margin:0 9px 8px;padding:0 10px; height:38px;border:1px solid var(--line);border-radius:10px;background:var(--panel2); color:var(--txt3);transition:border-color .16s var(--ease),box-shadow .16s var(--ease); } .faq-search:focus-within{border-color:var(--or-b);box-shadow:0 0 0 3px var(--or-s);color:var(--or)} .faq-search svg{width:15px;height:15px} .faq-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;font-size:11px} .faq-search input::placeholder{color:var(--txt3)} .faq-search-empty{padding:18px 14px;color:var(--txt3);font-size:11px;text-align:center} .faq-list{display:flex;flex:1;min-height:0;overflow-y:auto;flex-direction:column;padding:3px 9px 10px;gap:6px} .faq-item{ flex:none;display:grid;grid-template-columns:27px minmax(0,1fr) 14px;gap:9px; align-items:center;width:100%;padding:10px 9px;text-align:left;border:1px solid var(--line); border-radius:10px;background:var(--panel2);transition:all .18s var(--ease); } .faq-item:hover{border-color:var(--line2);transform:translateX(2px)} .faq-item.is-on{border-color:var(--or-b);background:var(--or-s);box-shadow:inset 3px 0 var(--or)} .faq-n{ display:grid;place-items:center;width:26px;height:26px;border-radius:7px; color:var(--txt3);background:var(--soft2);font:700 9px/1 'JetBrains Mono',monospace; } .faq-item.is-on .faq-n{color:var(--or);background:var(--panel)} .faq-copy{display:flex;min-width:0;flex-direction:column;gap:3px} .faq-copy b{font-size:11.4px;line-height:1.35;color:var(--txt);font-weight:680} .faq-copy i{font-size:9px;font-style:normal;font-weight:750;letter-spacing:.45px;text-transform:uppercase;color:var(--txt3)} .faq-item.is-on .faq-copy i{color:var(--or)} .faq-item>svg{width:13px;height:13px;color:var(--txt3)} .faq-item.is-on>svg{color:var(--or)} .card-surfaces{flex:1;overflow:hidden} .surface-lead{flex:none;padding:15px 17px 13px;border-bottom:1px solid var(--line);background:var(--panel2)} .surface-lead span{font-size:9px;font-weight:800;letter-spacing:.65px;text-transform:uppercase;color:var(--or)} .surface-lead h3{margin-top:4px;font-size:18px;line-height:1.3;letter-spacing:-.25px} .surface-map{display:flex;flex:1;min-height:0;flex-direction:column;gap:10px;padding:11px;overflow-y:auto} .surface-map.is-overview{justify-content:center} .surface-overview{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%} .surface-chip{ display:flex;align-items:center;gap:8px;min-width:0;padding:7px 9px;border:1px solid var(--line); border-radius:9px;background:var(--panel2);color:var(--txt2) } .surface-chip-ico{display:grid;flex:none;place-items:center;color:var(--tc)} .surface-chip-ico svg{width:15px;height:15px} .surface-chip>span:last-child{min-width:0} .surface-chip b{display:block;font-size:9.5px;line-height:1.3} .surface-chip small{display:block;margin-top:2px;color:var(--txt3);font-size:8.5px;line-height:1.3} .surface-overview .surface-chip{opacity:.58;filter:grayscale(1)} .surface-row{ position:relative;display:grid;flex:none;grid-template-columns:190px minmax(300px,1fr); grid-template-areas:"head route" "scope route";align-items:start;gap:10px 16px; min-height:128px;padding:12px 14px;border:1px solid var(--tb);border-radius:12px; background:linear-gradient(90deg,var(--ts),var(--panel2) 38%);box-shadow:inset 3px 0 var(--tc); transition:border-color .22s ease,transform .22s ease; } .surface-row header{grid-area:head;display:flex;align-items:center;gap:10px;min-width:0} .surface-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--tc);background:var(--ts);border:1px solid var(--tb)} .surface-ico svg{width:17px;height:17px} .surface-row h4{font-size:12px;line-height:1.25} .surface-row header p{margin-top:3px;color:var(--txt3);font-size:9.5px;line-height:1.3} .surface-route{grid-area:route;display:flex;min-width:0;flex-direction:column} .surface-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;list-style:none} .surface-step{position:relative;display:flex;align-items:center;flex-direction:column;gap:7px;text-align:center;min-width:0} .surface-step:not(:last-child)::after{ content:"";position:absolute;top:5px;left:calc(50% + 7px);width:calc(100% - 14px);height:2px; background:var(--line2);transform-origin:left center; } .surface-step i{position:relative;z-index:1;width:11px;height:11px;border:2px solid var(--line2);border-radius:50%;background:var(--panel)} .surface-step b{padding:0 4px;color:var(--txt2);font-size:9.5px;font-weight:650;line-height:1.3} .surface-row.is-on .surface-step i{border-color:var(--tc);box-shadow:0 0 0 3px var(--ts)} .surface-row.is-on .surface-step:not(:last-child)::after{background:var(--tb)} .surface-row.is-tracing .surface-step:not(:last-child)::after{animation:surface-line .52s var(--ease) both;animation-delay:calc((var(--step) * .16s) + (var(--row) * .035s))} .surface-row.is-tracing .surface-step i{animation:surface-dot .45s var(--ease) both;animation-delay:calc((var(--step) * .16s) + (var(--row) * .035s))} .surface-scope{grid-area:scope;padding-left:12px;border-left:1px solid var(--line);color:var(--txt3);font-size:9.5px;line-height:1.45} .surface-scope b{color:var(--tc);font-weight:750} .surface-products{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:7px;margin-top:17px} .surface-products.has-branch{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px} .surface-products::before{content:"";position:absolute;bottom:100%;left:50%;height:17px;border-left:1px solid var(--tb)} .surface-product{ position:relative;display:flex;min-width:0;flex-direction:column;gap:2px;padding:7px 9px; border:1px solid var(--line);border-radius:8px;background:var(--panel); } .surface-product i{font-size:7.5px;font-style:normal;font-weight:850;letter-spacing:.55px;text-transform:uppercase;color:var(--txt3)} .surface-product b{font-size:9px;font-weight:700;line-height:1.3;color:var(--txt2)} .surface-product.is-quote{border-color:var(--tb);background:var(--ts)} .surface-product.is-quote b{color:var(--tc)} .surface-product.is-optional{border-style:dashed} .surface-product.is-included,.surface-product.is-technical{background:transparent} .surface-inactive{padding:3px 2px 0} .surface-inactive>p{margin-bottom:6px;color:var(--txt3);font-size:8px;font-weight:750;letter-spacing:.4px;text-transform:uppercase} .surface-chips{display:flex;flex-wrap:wrap;gap:6px} .surface-chips .surface-chip{padding:5px 8px;opacity:.62;filter:grayscale(.8)} .surface-chips .surface-chip-ico svg{width:12px;height:12px} .surface-note{flex:none;padding:10px 14px;border-top:1px solid var(--line);background:var(--soft);color:var(--txt2);font-size:10.5px;line-height:1.45} .surface-note:empty{display:none} .surface-note b{color:var(--txt);font-weight:750} .surface-note span{display:block;margin-top:3px;color:var(--txt3);font-size:9px} @keyframes surface-line{from{transform:scaleX(0);opacity:.2}to{transform:scaleX(1);opacity:1}} @keyframes surface-dot{0%{transform:scale(.7)}65%{transform:scale(1.3);box-shadow:0 0 0 7px var(--ts)}100%{transform:scale(1);box-shadow:0 0 0 3px var(--ts)}} .card-faq-answer{flex:none} .faq-answer{display:flex;flex-direction:column} .answer-short{padding:15px 15px 14px;background:linear-gradient(135deg,var(--or-s),transparent);border-bottom:1px solid var(--line)} .answer-short span{font-size:9px;font-weight:800;letter-spacing:.65px;text-transform:uppercase;color:var(--or)} .answer-short p{margin-top:5px;font-size:13px;font-weight:650;line-height:1.55;color:var(--txt)} .answer-section{padding:12px 15px;border-bottom:1px solid var(--line)} .answer-section:last-child{border-bottom:0} .answer-section h4{margin-bottom:4px;font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--blu)} .answer-section p{font-size:11px;line-height:1.55;color:var(--txt2)} .card-faq-products{flex:none} .faq-products{display:flex;flex-direction:column;gap:7px;padding:8px} .faq-product{padding:9px;border:1px solid var(--line);border-left:3px solid var(--tc);border-radius:9px;background:var(--panel2);min-width:0} .faq-product header{display:flex;align-items:center;gap:6px;margin-bottom:7px;color:var(--tc)} .faq-product header span{display:grid;place-items:center} .faq-product header svg{width:13px;height:13px} .faq-product header b{font-size:9px;font-weight:800;letter-spacing:.45px;text-transform:uppercase} .faq-product>div{display:flex;flex-direction:column;gap:5px;min-width:0} .faq-product p{display:flex;min-width:0;flex-direction:column;gap:2px;padding:6px 7px;border-radius:7px;background:var(--panel)} .faq-product p i{font-size:7.5px;font-style:normal;font-weight:850;letter-spacing:.55px;text-transform:uppercase;color:var(--tc)} .faq-product p b{font-size:9.5px;font-weight:680;line-height:1.4;color:var(--txt2);overflow-wrap:anywhere} .faq-product p.is-optional{border:1px dashed var(--line);background:transparent} .faq-product p.is-optional i,.faq-product p.is-technical i{color:var(--txt3)} .faq-product p.is-included{background:var(--ts)} .faq-product p.is-technical{background:transparent} .card-faq-evidence{flex:none;min-height:180px;max-height:270px;overflow:hidden} .faq-evidence{display:flex;flex:1;min-height:0;overflow-y:auto;flex-direction:column;padding:8px;gap:6px} .faq-evidence a{ display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px; color:var(--txt);text-decoration:none;border:1px solid var(--line);border-radius:9px;background:var(--panel2); transition:all .16s var(--ease); } .faq-evidence a:hover{border-color:var(--or-b);background:var(--or-s)} .faq-evidence a span{display:flex;min-width:0;flex-direction:column;gap:2px} .faq-evidence a b{font-size:10.5px;font-weight:700} .faq-evidence a i{overflow:hidden;color:var(--txt3);font:400 8.5px/1.3 'JetBrains Mono',monospace;text-overflow:ellipsis;white-space:nowrap} .faq-evidence a svg{width:13px;height:13px;color:var(--or)} .card-faq-note{flex:none;border-color:var(--amb);border-left:3px solid var(--amb);overflow:hidden} .card-faq-note .card-head{background:var(--amb-s)} .card-faq-note .card-head h2{color:var(--amb)} .faq-note{padding:12px 14px;background:var(--amb-s);color:var(--txt2);font-size:11px;line-height:1.55} /* ------------------------------ RESPONSIVO ----------------------------- */ @media (max-width:1720px){ .workspace{grid-template-columns:296px minmax(0,1fr) 358px} .conn{width:26px} .kpi-val{font-size:17px} .exp-num{font-size:33px} .sb-risk{max-width:220px} } @media (max-width:1480px){ .workspace{grid-template-columns:270px minmax(0,1fr) 330px;gap:10px;padding:10px} .conn{width:18px} .tog-lbl i{display:none} .node-role{display:none} .kpi-strip{grid-template-columns:repeat(4,1fr)} .journey-grid{grid-template-columns:repeat(2,1fr)} .brand-copy p{display:none} .start-card{grid-template-columns:26px minmax(0,1fr) auto;padding:8px} .start-arrow{display:none} .surface-overview{grid-template-columns:repeat(3,minmax(0,1fr))} .surface-row{grid-template-columns:175px minmax(260px,1fr)} .view-opt{padding:0 11px} } @media (max-width:1180px){ body{overflow:auto} .topbar{height:auto;min-height:58px;padding:8px 10px;flex-wrap:wrap;gap:8px} .view-switch,.mode-switch{flex:none} .topbar-actions{max-width:100%;overflow-x:auto;padding-bottom:2px} .workspace{flex:none;grid-template-columns:1fr;height:auto;min-height:auto} .col{min-height:auto} .col-side{overflow:visible} .col-right{overflow:visible;padding-right:0} .card-logs,.card-console,.card-trace{min-height:320px} .pipeline{grid-template-columns:1fr} .fan{flex-direction:column} .start-detail-grid{grid-template-columns:1fr} .card-faq{max-height:540px} .card-surfaces{min-height:0} .surface-map{flex:none;overflow:visible} .card-faq-evidence{min-height:240px} } @media (max-width:640px){ .topbar{height:auto;min-height:58px;padding:8px 10px;flex-wrap:wrap;gap:8px} .brand{width:100%} .brand-copy p,.brand-by{display:none} .topbar-actions{width:100%;overflow-x:auto;padding-bottom:2px} .view-switch{order:3} .stage-bar{grid-template-columns:40px minmax(0,1fr)} .sb-risk{grid-column:2;max-width:none;text-align:left} .pipeline-wrap{overflow-x:auto} .card-logs .card-head{align-items:flex-start;flex-direction:column} .log-actions{width:100%;overflow-x:auto;padding-bottom:2px} .modal{display:flex;align-items:center;justify-content:center;padding:10px} .modal-box{width:100%;max-width:100%} .modal-box.modal-feedback-box{flex:0 1 auto;width:calc(100vw - 20px);max-width:calc(100vw - 20px);overflow:hidden} .modal-body{padding:12px} .feedback-categories{grid-template-columns:1fr} .feedback-actions{align-items:stretch;flex-direction:column} .feedback-actions .btn{justify-content:center;width:100%} .start-hero{grid-template-columns:40px minmax(0,1fr);gap:10px;padding:12px} .start-hero-ico{width:40px;height:40px} .start-hero-copy h3{font-size:17px} .start-docs>div{flex-direction:column;align-items:stretch} .start-doc{justify-content:space-between} .surface-lead h3{font-size:15px} .surface-overview{grid-template-columns:1fr} .surface-row{grid-template-columns:1fr;grid-template-areas:"head" "route" "scope";gap:10px;min-height:0} .surface-flow{padding-top:4px} .surface-step{min-height:38px;align-items:flex-start;flex-direction:row;gap:9px;text-align:left} .surface-step:not(:last-child)::after{top:5px;left:5px;width:2px;height:calc(100% + 1px);transform-origin:center top} .surface-step b{padding:0;font-size:9px} .surface-flow{grid-template-columns:1fr} .surface-row.is-tracing .surface-step:not(:last-child)::after,.surface-row.is-tracing .surface-step i{animation:none} .surface-products.has-branch{grid-template-columns:1fr;gap:7px} .card-faq-evidence{max-height:none} } /* Quem pediu menos movimento no sistema recebe a tela sem animação. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* Screen-sharing mode: scale the complete interface so text survives video compression. */ body{zoom:1.12}