/* Camada de apresentação separada: o CSS original do Maestro permanece intacto. */
.preview-source-note{font-size:10px!important;background:#10130d!important;border-bottom-color:#282e20!important;color:#a7af99!important;padding:7px 24px!important}.sidebar-nav .sidebar-group{margin-bottom:20px}.ck2-chart{height:220px!important}.preview-compact .sidebar,.preview-compact .topbar,.preview-compact .preview-source-note,.preview-compact main>h1,.preview-compact main>.d-flex,.preview-compact main>p,.preview-compact .fluxo-legenda{display:none!important}.preview-compact .app-main{margin:0!important;min-width:0}.preview-compact .app-shell{display:block!important}.preview-compact main.container-fluid{padding:0!important}.preview-compact .fluxo-wrap{border:0;margin:0;background:#0f0f11}.preview-compact .fluxo-canvas{height:210px;min-height:0;background:#0f0f11}.preview-compact body{min-height:0}.preview-compact .app-main{min-height:0}
@media(max-width:600px){.preview-compact .fluxo-canvas{height:210px}.ck2-kpis{gap:10px!important}.ck2-val{font-size:23px!important}}
.ck2-val{white-space:nowrap}.preview-compact .fluxo-canvas{background:#0f0f11!important}.preview-compact .fluxo-wrap{border-radius:0!important}

@media(max-width:500px){.ck2-title{font-size:21px!important}.topbar-actions .topbar-quicklink{display:none}.topbar{flex-wrap:nowrap!important}.ck2-val{font-size:clamp(14px,5.6vw,23px)!important}}
.ck2-tile{padding-bottom:18px}

/* Filtros com áreas e alinhamento independentes do agrupamento padrão Bootstrap. */
.ck2 .ck2-head .btn-group[aria-label="Período"]{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ck2 .ck2-head .btn-group[aria-label="Período"]>.btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;height:40px;min-width:60px;margin:0!important;padding:0 14px;line-height:1;white-space:nowrap;box-sizing:border-box}
.flow-stage-detail{color:var(--fg-muted);font:12px/1.6 var(--font-sans);margin:16px 0 0;min-height:40px}
.flow-stage-picker{display:flex;align-items:center;gap:14px;color:var(--fg-muted);font:12px var(--font-sans);margin-top:14px}
.flow-stage-picker select{background:var(--surface-panel);border:1px solid var(--border-strong);color:var(--foreground);padding:8px 12px;border-radius:var(--radius-sm);max-width:100%}
.flow-stage-picker select:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.preview-compact .flow-stage-detail{padding:8px 16px;margin:0;min-height:64px;font-size:11px;line-height:1.5;background:#0f0f11}
.preview-compact .flow-stage-picker{position:absolute;clip-path:inset(50%);height:1px;width:1px;overflow:hidden;margin:0}
.preview-compact .flow-stage-picker:focus-within{position:static;clip-path:none;height:auto;width:auto;padding:8px 16px;background:#0f0f11}
@media(max-width:350px){.preview-compact .fluxo-canvas{height:310px}.preview-compact .flow-stage-detail{min-height:72px}}

.preview-compact main>.flow-stage-detail{display:block!important}

.flow-learning-loop{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;margin:14px 0 0;border:1px solid var(--lime-25);border-radius:var(--radius-sm);background:#13180d;color:var(--foreground);text-align:left;font:12px/1.4 var(--font-sans);cursor:pointer}
.flow-learning-loop>span:first-child{color:var(--lime);font-size:25px;line-height:1}
.flow-learning-loop strong{display:block;font-size:12px;font-weight:600}
.flow-learning-loop small{display:block;color:var(--fg-muted);font-size:10px;line-height:1.5;margin-top:3px}
.flow-learning-loop:focus-visible{outline:2px solid var(--lime);outline-offset:-3px}
.preview-compact .flow-learning-loop{margin:0;border:0;border-top:1px dashed var(--lime-25);border-radius:0;min-height:56px}
.preview-compact .fluxo-canvas{height:190px}
.preview-compact main>.flow-stage-detail{display:block!important}
@media(max-width:350px){.preview-compact .fluxo-canvas{height:320px}.preview-compact .flow-learning-loop{padding:8px 12px}.preview-compact .flow-learning-loop strong{font-size:11px}.preview-compact .flow-learning-loop small{font-size:9px}}
