.cfdv{margin-top:34px}
.cfdv-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:16px}
.cfdv .seg{display:inline-flex;background:#ffffff10;border:1px solid #ffffff2a;border-radius:40px;padding:5px}
.cfdv .seg button{border:0;background:none;color:#d5dbe0;padding:11px 20px;border-radius:40px;font:600 14px Michroma,Arial,sans-serif;cursor:pointer}
.cfdv .seg button[aria-pressed=true]{background:#4a6781;color:#0b0d10}
.cfdv.light .seg{background:#f3f5f7;border-color:#e1e5e9}.cfdv.light .seg button{color:#3b424a}
.cfd-stage{position:relative;border-radius:20px;overflow:hidden;border:1px solid #ffffff1a;background:#05070a;aspect-ratio:2400/505}
.cfd-stage img{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s}
.cfd-stage img.on{opacity:1}
.cfd-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
.cfd-stage .cfd-lbl{position:absolute;right:16px;bottom:14px;z-index:4;font:600 11px/1 Michroma,Arial,sans-serif;letter-spacing:.14em;color:#fff!important;background:#07090bb3;border:1px solid #ffffff2e;border-radius:20px;padding:9px 12px}
.cfd-tags{position:absolute;inset:0;pointer-events:none;display:none;z-index:3}
.cfd-tags.on{display:block}
.cfd-stage[data-case=sem] .tg[data-only=com],.cfd-stage[data-case=com] .tg[data-only=sem]{display:none}
.tg{position:absolute;transform:translate(-50%,-50%);font:600 12px/1.25 Michroma,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#16191d!important;background:#ffffffeb;border-radius:20px;padding:6px 11px;white-space:nowrap;box-shadow:0 4px 14px #0005;text-align:center}
.tg.hot{background:#7c0a18eb;color:#fff!important}
.tg.amb{background:#4a6781;color:#0b0d10!important}
.tg.blu{background:#2d3fb0eb;color:#fff!important}
.tg.dir,.tg.view{top:14px;transform:none;background:#07090bb3;color:#fff!important;border:1px solid #ffffff33}
.tg.dir{left:14px}.tg.view{right:14px}
.cfd-legend{display:flex;align-items:center;gap:14px;margin-top:14px;font-size:14px;color:#c3cbd2;flex-wrap:wrap}
.cfd-legend i{flex:0 0 200px;height:8px;border-radius:6px;background:linear-gradient(90deg,#081226,#123a8c,#1f7fd0,#3fc3d8,#e8d84a,#f08a26,#d8352a,#7c0a18)}
.cfd-legend.press i{background:linear-gradient(90deg,#2a0f5c,#2d3fb0,#2f8fe0,#9fd8e8,#f2f2ee,#f4c15a,#e8712a,#b3201c)}
.light .cfd-legend{color:#3b424a}
.cfd-scroll{position:relative}
.cfd-hint{display:none}
@media(max-width:700px){
.cfd-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px}
.cfd-scroll .cfd-stage{width:980px;max-width:none}
.cfd-scroll.cross .cfd-stage{width:100%}
.cfd-hint{display:block;font-size:13px;color:#9aa4ad;margin-top:8px}
.cfdv .seg{width:100%}.cfdv .seg button{flex:1;padding:10px 12px;font-size:13px}
.tg{font-size:10.5px;padding:5px 8px}}
/* rótulos nas margens com linhas de chamada */
.cfdv-bar{justify-content:space-between}
.cfdv-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}
.tg-toggle{border:1px solid #ffffff2a;background:#ffffff10;color:#d5dbe0;border-radius:40px;padding:11px 16px;font:600 13px Michroma,Arial,sans-serif;cursor:pointer}
.tg-toggle[aria-pressed=true]{color:#fff;border-color:#4a6781}
.tg-toggle:before{content:"● ";color:#4a6781}
.tg-toggle[aria-pressed=false]:before{color:#5d6670}
.cfdv.light .tg-toggle{background:#f3f5f7;border-color:#e1e5e9;color:#3b424a}
.tg-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tg-lines line{stroke:#ffffffd9;stroke-width:1.4;vector-effect:non-scaling-stroke}
.tg-lines circle{fill:#fff;stroke:#16191d;stroke-width:1;vector-effect:non-scaling-stroke}
.cfd-stage[data-case=sem] .tg-lines g[data-only=com],.cfd-stage[data-case=com] .tg-lines g[data-only=sem]{display:none}
.tg.top{transform:translate(-50%,0)}
.tg.bot{transform:translate(-50%,-100%)}
.tg.foot{left:14px;bottom:14px;top:auto;transform:none;background:#07090bb3;color:#fff!important;border:1px solid #ffffff33;font-size:11px;box-shadow:none}
.cfd-stage.no-tags .cfd-tags{display:none!important}
.cfd-stage .tg{font-size:11.5px;padding:5px 10px}
@media(max-width:700px){.cfdv-right{width:100%}.tg-toggle{flex:0 0 auto}}
.cfd-vname{display:none;flex-basis:100%;font:600 12px/1.4 Michroma,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#4a6781}
.cfd-vname.on{display:block}
.light .cfd-vname{color:#4a6781}
.cfd-stage .cfd-lbl{display:none}