#dash-root { --dash-gutter: 0; }
.kx {
  --kx-ink: #16181C; --kx-ink2: #3A3F47; --kx-muted: #6B7280; --kx-faint: #A0A6B1;
  --kx-orange: #FF6600; --kx-orange-deep: #D95600; --kx-orange-soft: #FFF1E6; --kx-peach: #FFB27A;
  --kx-page: #F4F5F7; --kx-line: #ECEDF0; --kx-soft: #F7F8FA; --kx-grid: #ECEEF2;
  --kx-ok: #0E9F6E; --kx-ok-soft: #E3F6EE; --kx-bad: #E0352B; --kx-bad-soft: #FDECEA; --kx-warn: #C97A00; --kx-warn-soft: #FFF4DC;
  --kx-head: 'Sora', 'Inter', var(--font-anthropic-sans), system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kx-body: 'Inter', var(--font-anthropic-sans), system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kx-shadow: 0 1px 2px rgba(22, 24, 28, .04), 0 8px 24px rgba(22, 24, 28, .05);
  background: var(--kx-page); color: var(--kx-ink); font-family: var(--kx-body); font-size: 15px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 20px; padding: clamp(14px, 2.6vw, 28px);
}
.kx svg text { font-family: var(--kx-body); }
.kx h1, .kx h2, .kx h3 { font-family: var(--kx-head); color: var(--kx-ink); letter-spacing: -0.015em; }
.kx-ico { width: 18px; height: 18px; flex: none; display: inline-block; }
.kx-ico svg { width: 100%; height: 100%; display: block; }

/* cabeçalho escuro com indicadores dentro */
.kx-hero { position: relative; overflow: hidden; border-radius: 24px; background: #16181C; color: #fff; padding: clamp(20px, 2.8vw, 30px); }
.kx-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 260px at 92% -10%, rgba(255, 102, 0, .28), transparent 70%), radial-gradient(500px 220px at 0% 120%, rgba(99, 102, 241, .16), transparent 70%); pointer-events: none; }
.kx-hero > * { position: relative; }
.kx-hbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kx-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--kx-head); font-weight: 700; font-size: 14px; color: #fff; }
.kx-brand .lg { width: 30px; height: 30px; border-radius: 9px; background: var(--kx-orange); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; }
.kx-brand small { font-weight: 500; color: rgba(255, 255, 255, .55); font-family: var(--kx-body); }
.kx-date { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; padding: 6px 12px; }
.kx-date .kx-ico { width: 15px; height: 15px; }
.kx-sync { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kx-date b { color: #fff; font-weight: 600; }
.kx-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--kx-body); font-weight: 600; font-size: 13px; color: #16181C; background: #fff; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: background .15s; }
.kx-btn:hover { background: #FFE7D6; }
.kx-btn:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 2px; }
.kx-btn[disabled] { opacity: .7; cursor: progress; }
.kx-btn .kx-ico { width: 15px; height: 15px; }
.kx-btn.spin .kx-ico svg { animation: kxspin 1s linear infinite; }
@keyframes kxspin { to { transform: rotate(360deg); } }
.kx-fontes { margin: 12px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .55); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.kx-fontes span b { color: rgba(255, 255, 255, .85); font-weight: 600; }
.kx-livemsg { margin: 10px 0 0; font-size: 13px; color: #fff; background: rgba(255, 102, 0, .16); border: 1px solid rgba(255, 102, 0, .35); border-radius: 12px; padding: 8px 12px; display: flex; gap: 8px; align-items: center; }
.kx-livemsg.err { background: rgba(224, 53, 43, .16); border-color: rgba(224, 53, 43, .4); }
.kx-livemsg.ok { background: rgba(16, 185, 129, .14); border-color: rgba(16, 185, 129, .4); }
.kx-hero h1 { color: #fff; font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; margin: 22px 0 6px; }
.kx-hero .kx-take { color: rgba(255, 255, 255, .66); font-size: 15px; max-width: 64rem; margin: 0 0 22px; }
.kx-hero .kx-take b { color: #fff; font-weight: 700; }
.kx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); gap: 12px; }
.kx-tile { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; backdrop-filter: blur(6px); transition: background .2s, transform .2s; }
.kx-tile:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.kx-tile .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kx-tile .lbl { font-size: 13px; color: rgba(255, 255, 255, .72); font-weight: 500; }
.kx-tile .bdg { order: 2; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--kx-accent-soft); color: var(--kx-accent); flex: none; }
.kx-tile .bdg .kx-ico { width: 16px; height: 16px; }
.kx-tile .num { font-family: var(--kx-head); font-weight: 700; font-size: 34px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; min-height: 1em; }
.kx-tile .note { font-size: 12px; color: rgba(255, 255, 255, .5); }
.kx-t-site { --kx-accent: #CBD5E1; --kx-accent-soft: rgba(148, 163, 184, .22); }
.kx-t-bad { --kx-accent: #FF8A80; --kx-accent-soft: rgba(224, 53, 43, .22); }
.kx-t-or { --kx-accent: #C4B5FD; --kx-accent-soft: rgba(139, 92, 246, .24); }
.kx-t-ink { --kx-accent: #6EE7B7; --kx-accent-soft: rgba(16, 185, 129, .22); }

/* cards brancos */
.kx-layout { display: flex; flex-direction: column; gap: 20px; }
.kx-card { background: #fff; border-radius: 24px; padding: clamp(18px, 2.4vw, 28px); box-shadow: var(--kx-shadow); }
.kx-sh { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.kx-sh .bdg { width: 42px; height: 42px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--kx-soft); color: var(--kx-ink); border: 1px solid var(--kx-line); }
.kx-sh .bdg .kx-ico { width: 19px; height: 19px; }
.kx-card h2 { font-size: 20px; font-weight: 700; margin: 0; line-height: 1.3; }
.kx-card .sub { font-size: 14px; color: var(--kx-muted); margin: 3px 0 0; max-width: 70rem; }
.kx-legend { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--kx-ink2); margin: 0 0 14px; }
.kx-legend span { display: inline-flex; align-items: center; gap: 7px; background: var(--kx-soft); border-radius: 999px; padding: 6px 12px; }
.kx-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-sizing: border-box; }
.kx-legend b.arw { width: 16px; height: 16px; border-radius: 50%; color: #fff; font-size: 11px; line-height: 16px; text-align: center; font-weight: 700; display: inline-block; }
.kx-legend i.ghost { border: 2px dashed var(--kx-faint); background: #fff; width: 12px; height: 12px; }
.kx-legend.kx-sq span { background: transparent; padding: 0 8px 0 0; }
.kx-legend.kx-sq i { border-radius: 3px; width: 11px; height: 11px; }
.kx-tl { position: relative; min-height: 260px; }
.kx-tl .ic { cursor: pointer; }
.kx-tl .ic:hover .halo { opacity: 1; }
.kx-tl .ic:focus { outline: none; }
.kx-tl .ic:focus-visible .halo { opacity: 1; }
.kx-tip { position: absolute; pointer-events: none; background: #16181C; color: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(22, 24, 28, .28); padding: 10px 12px; font-size: 13px; line-height: 1.55; opacity: 0; max-width: 21rem; z-index: 3; white-space: nowrap; transition: opacity .12s; }
.kx-tip .t { color: rgba(255, 255, 255, .62); }
.kx-tip.kx-tip-fg { white-space: normal; width: 290px; max-width: 290px; padding: 14px 16px; line-height: 1.4; }
.kx-tip-fg .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.kx-tip-fg .hd b { font-size: 14.5px; }
.kx-tip-fg .st { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.kx-tip-fg .rw { display: grid; grid-template-columns: 84px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; }
.kx-tip-fg .rw .k { color: rgba(255, 255, 255, .58); }
.kx-tip-fg .rw .v { color: #fff; }
.kx-tip-fg .rw .v small { display: block; color: rgba(255, 255, 255, .58); font-size: 11.5px; margin-top: 1px; }
.kx-tip-fg .ms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.kx-tip-fg .ms div { background: rgba(255, 255, 255, .07); border-radius: 8px; padding: 6px 8px; font-size: 11px; color: rgba(255, 255, 255, .62); }
.kx-tip-fg .ms div b { display: block; font-size: 13.5px; color: #fff; }
.kx-tip b { font-weight: 700; font-family: var(--kx-head); }

/* detalhe do cliente */
.kx-panel { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 16px; }
.kx-panel[hidden] { display: none; }
.kx-ph { display: flex; align-items: center; gap: 16px; }
.kx-ph .av { width: 64px; height: 64px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--kx-line), 0 6px 16px rgba(22, 24, 28, .10); box-sizing: border-box; background: #fff; font-size: 17px; font-family: var(--kx-head); position: relative; }
.kx-ph .av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.kx-ph .av .st { position: absolute; right: -1px; bottom: 1px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; }
.kx-ph .nm { flex: 1; min-width: 0; }
.kx-ph .nm h2 { margin: 0; font-size: 26px; font-weight: 700; }
.kx-ph .nm .dom { font-size: 14px; color: var(--kx-muted); }
.kx-close { all: unset; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--kx-ink2); font-size: 22px; background: var(--kx-soft); transition: background .15s; align-self: flex-start; }
.kx-close:hover { background: var(--kx-line); }
.kx-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kx-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 5px 12px; background: var(--kx-soft); color: var(--kx-ink2); }
.kx-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--kx-faint); }
.kx-tag.ok { background: var(--kx-ok-soft); color: var(--kx-ok); } .kx-tag.ok i { background: var(--kx-ok); }
.kx-tag.bad { background: var(--kx-bad-soft); color: var(--kx-bad); } .kx-tag.bad i { background: var(--kx-bad); }
.kx-tag.warn { background: var(--kx-warn-soft); color: var(--kx-warn); } .kx-tag.warn i { background: var(--kx-warn); }
.kx-tag.or { background: var(--kx-orange-soft); color: var(--kx-orange-deep); } .kx-tag.or i { background: var(--kx-orange); }
.kx-tag.fase { background: color-mix(in srgb, var(--kx-c) 13%, #fff); color: color-mix(in srgb, var(--kx-c) 70%, #16181C); } .kx-tag.fase i { background: var(--kx-c); }
.kx-insight { border-radius: 20px; padding: 18px 20px; background: linear-gradient(120deg, #FFF3EA 0%, #FFFFFF 55%, #F3F1FF 100%); border: 1px solid #F6E6DA; }
.kx-insight .it { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--kx-orange-deep); background: #fff; border-radius: 999px; padding: 4px 10px; box-shadow: 0 1px 2px rgba(22, 24, 28, .06); }
.kx-insight .it .kx-ico { width: 14px; height: 14px; }
.kx-insight p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--kx-ink2); max-width: 70rem; }
.kx-insight p b { color: var(--kx-ink); font-weight: 700; }
.kx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 12px; }
.kx-kpi { border-radius: 18px; padding: 16px; background: var(--kx-soft); display: flex; flex-direction: column; gap: 4px; transition: background .2s; }
.kx-kpi:hover { background: #F1F2F5; }
.kx-kpi .tp { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kx-kpi .lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--kx-ink2); }
.kx-kpi .lbl .bdg { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--kx-orange); box-shadow: 0 1px 2px rgba(22, 24, 28, .06); }
.kx-kpi .lbl .bdg .kx-ico { width: 15px; height: 15px; }
.kx-kpi .vr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.kx-kpi .num { font-family: var(--kx-head); font-weight: 700; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kx-kpi .dl { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: #fff; color: var(--kx-muted); }
.kx-kpi .dl.ok { color: var(--kx-ok); background: var(--kx-ok-soft); } .kx-kpi .dl.bad { color: var(--kx-bad); background: var(--kx-bad-soft); }
.kx-kpi .sub { font-size: 13px; color: var(--kx-muted); }
.kx-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 16px; }
.kx-box { border-radius: 20px; padding: 18px; background: #fff; border: 1px solid var(--kx-line); min-width: 0; }
.kx-bh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.kx-bh-ac { display: flex; align-items: center; gap: 8px; }
.kx-pt-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
@media (max-width: 980px) { .kx-pt-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kx-pt-cats { grid-template-columns: minmax(0, 1fr); } }
.kx-pt-cats .it { background: var(--kx-soft); border-radius: 14px; padding: 12px 14px; }
.kx-pt-cats .h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.kx-pt-cats .f { font-size: 11.5px; font-weight: 600; color: var(--kx-muted); }
.kx-pt-cats p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--kx-ink2); }
.kx-pt-list { display: flex; flex-direction: column; gap: 10px; }
.kx-pt { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 1px solid var(--kx-line); border-radius: 16px; background: #fff; }
.kx-pt .nn { width: 28px; height: 28px; border-radius: 50%; background: var(--kx-orange); color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.kx-pt .l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kx-pt .tp { font-size: 12px; font-weight: 600; color: var(--kx-muted); }
.kx-pt .kw { font-family: var(--kx-head); font-weight: 700; font-size: 16px; margin: 6px 0 4px; }
.kx-pt .mt { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--kx-muted); }
.kx-pt .mt a { color: var(--kx-orange-deep); font-weight: 600; text-decoration: none; }
.kx-pt .imp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kx-pt .imp > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.2; background: var(--c-bg); color: var(--c-fg); }
.kx-pt .imp .kx-ico { width: 13px; height: 13px; flex: none; padding: 0; background: none; border-radius: 0; }
.kx-pt .foco { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--kx-soft); font-size: 12.5px; line-height: 1.5; color: var(--kx-ink2); }
.kx-pt .foco .kx-ico { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--kx-orange-deep); }
.kx-pt .foco b { font-weight: 700; }
.kx-pt .mo { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--kx-ink2); }
.kx-colbtn { all: unset; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--kx-ink2); padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--kx-soft); border: 1px solid var(--kx-line); display: inline-flex; align-items: center; gap: 6px; }
.kx-colbtn::before { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg) translate(-1px, -1px); transition: transform .15s; }
.kx-colbtn[aria-expanded=false]::before { transform: rotate(45deg) translate(-2px, -2px); }
.kx-colbtn:hover { background: #fff; }
.kx-colbtn:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 2px; }
.kx-box.kx-fechado .kx-bh { margin-bottom: 0; }
.kx-h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; margin: 0; }
.kx-h3 .bdg { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--kx-soft); color: var(--kx-ink); }
.kx-h3 .bdg .kx-ico { width: 16px; height: 16px; }
.kx-go-wrap { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.kx-go { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 12px; border-radius: 999px; border: 1px solid var(--kx-line); background: #fff; color: var(--kx-ink2); font-size: 12px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.kx-go .kx-ico { width: 13px; height: 13px; }
.kx-go:hover { background: var(--kx-ink); color: #fff; border-color: var(--kx-ink); }
.kx-kpi .kx-go { height: 26px; padding: 0 8px 0 10px; font-size: 11px; }
.kx-cap { font-size: 13px; color: var(--kx-muted); margin-top: 8px; }
.kx-gauge { display: flex; justify-content: center; }
.kx-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.kx-seg span { text-align: center; font-size: 14px; font-weight: 600; padding: 8px 6px; border-radius: 12px; background: var(--kx-soft); color: var(--kx-muted); }
.kx-seg span.done { color: var(--kx-ink2); }
.kx-seg span.on { background: var(--kx-orange); color: #fff; box-shadow: 0 6px 14px rgba(255, 102, 0, .28); }
.kx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; position: relative; padding: 8px 0 4px; }
.kx-step { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; font-size: 14px; color: var(--kx-muted); }
.kx-step::before { content: ''; position: absolute; top: 12px; left: -50%; width: 100%; height: 4px; border-radius: 2px; background: var(--kx-grid); z-index: 0; }
.kx-step:first-child::before { display: none; }
.kx-step.done::before, .kx-step.now::before { background: var(--kx-c); }
.kx-step .dot { width: 26px; height: 26px; border-radius: 50%; border: 4px solid var(--kx-grid); background: #fff; position: relative; z-index: 1; box-sizing: border-box; }
.kx-step.done .dot { background: var(--kx-c); border-color: var(--kx-c); }
.kx-step.now .dot { border-color: var(--kx-c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--kx-c) 22%, #fff); }
.kx-step.now .lb { color: var(--kx-ink); font-weight: 700; }
.kx-step .tg { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 2.8em; }
.kx-step em { font-style: normal; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.kx-step em.now { background: var(--kx-c); color: #fff; }
.kx-step em.model { border: 1px dashed var(--kx-faint); color: var(--kx-muted); background: #fff; }
.kx-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 8px; margin-top: 10px; }
.kx-fields .fd { background: var(--kx-soft); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kx-fields .l { font-size: 12px; color: var(--kx-muted); }
.kx-fields .v { font-size: 15px; font-weight: 700; color: var(--kx-ink); font-variant-numeric: tabular-nums; }
.kx-chart { position: relative; min-height: 120px; }
.kx-chart.big { min-height: 226px; }
.kx-leads { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .kx-leads { grid-template-columns: minmax(0, 1fr); } }
.kx-notes { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow: auto; padding-right: 2px; }
.kx-note { border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.5; background: var(--kx-soft); }
.kx-note .nt { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.kx-note .nd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kx-note .nd b { font-weight: 700; font-size: 13px; }
.kx-note .cn { color: var(--kx-ink2); }
.kx-note .ob { color: var(--kx-muted); }
.kx-note .kx-go { height: 26px; font-size: 11px; }
.kx-chip { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: #fff; color: var(--kx-orange-deep); white-space: nowrap; }
.kx-empty { font-size: 14px; color: var(--kx-muted); padding: 14px; background: var(--kx-soft); border-radius: 12px; }
.kx-foot { font-size: 12px; color: var(--kx-muted); }

/* tabelas e método */
.kx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.kx-table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--kx-muted); background: var(--kx-soft); padding: 10px 14px; }
.kx-table th:first-child { border-radius: 12px 0 0 12px; } .kx-table th:last-child { border-radius: 0 12px 12px 0; }
.kx-table td { border-bottom: 1px solid var(--kx-line); padding: 12px 14px; color: var(--kx-ink2); }
.kx-table tr:last-child td { border-bottom: none; }
.kx-table td:first-child { font-weight: 600; color: var(--kx-ink); }
.kx-method details { border-radius: 16px; padding: 0 18px; background: var(--kx-soft); }
.kx-method summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 15px; color: var(--kx-ink); list-style: none; display: flex; align-items: center; gap: 10px; }
.kx-method summary::-webkit-details-marker { display: none; }
.kx-method summary::after { content: '+'; margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--kx-ink); font-size: 18px; }
.kx-method details[open] summary::after { content: '–'; }
.kx-method p { margin: 0 0 14px; font-size: 14px; color: var(--kx-ink2); line-height: 1.65; }
.kx-method.kx-card { padding: 8px; }
.kx-fail { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--kx-muted); font-size: 13px; min-height: inherit; }
.kx-fail i { width: .375rem; height: .375rem; border-radius: 50%; background: var(--kx-bad); display: inline-block; }
[data-dash-source-state=empty] { color: transparent; }
[data-dash-source-state=refreshing] { opacity: .5; transition: opacity var(--cds-dur-slow); }
@media (prefers-reduced-motion: no-preference) {
  .kx-panel:not([hidden]) { animation: kx-in .28s ease-out; }
  @keyframes kx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
.kx-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; background: var(--kx-soft); border-radius: 16px; }
.kx-tabs button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--kx-ink2); transition: background .15s, color .15s; }
.kx-tabs button .kx-ico { width: 16px; height: 16px; }
.kx-tabs button:hover { background: #fff; }
.kx-tabs button[aria-selected=true] { background: var(--kx-ink); color: #fff; box-shadow: 0 6px 14px rgba(22, 24, 28, .16); }
.kx-tabs button:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 2px; }
.kx-pane { display: flex; flex-direction: column; gap: 16px; }
.kx-tw { overflow-x: auto; }
.kx-tbl td { vertical-align: top; }
.kx-tbl td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kx-tbl td a { color: var(--kx-ink); text-decoration: none; font-weight: 600; }
.kx-tbl td a:hover { color: var(--kx-orange-deep); text-decoration: underline; }
.kx-tbl td .kw { display: block; font-size: 12px; color: var(--kx-muted); font-weight: 400; margin-top: 2px; }
.kx-pos { display: inline-flex; min-width: 2.2em; justify-content: center; font-weight: 700; font-size: 12px; border-radius: 999px; padding: 2px 8px; background: var(--kx-soft); color: var(--kx-ink2); }
.kx-pos.t3 { background: var(--kx-ok-soft); color: var(--kx-ok); } .kx-pos.t10 { background: #E7F3FF; color: #0369A1; } .kx-pos.t100 { background: var(--kx-orange-soft); color: var(--kx-orange-deep); }
.kx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 12px; }
.kx-stats .kx-kpi .num { font-size: 26px; }
.kx-sub2 span + span::before { content: ' · '; color: var(--kx-faint); }
.kx-resumo { font-size: 14px; line-height: 1.6; color: var(--kx-ink2); background: var(--kx-soft); border-radius: 14px; padding: 12px 14px; }
.kx-chipbtn { all: unset; cursor: pointer; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: #fff; color: var(--kx-orange-deep); white-space: nowrap; border: 1px solid #FFD2B3; transition: background .15s; }
.kx-chipbtn:hover, .kx-chipbtn:focus-visible { background: var(--kx-orange); color: #fff; border-color: var(--kx-orange); }
.kx-back { all: unset; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--kx-ink2); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--kx-line); align-self: flex-start; }
.kx-back:hover { background: var(--kx-ink); color: #fff; border-color: var(--kx-ink); }
.kx-fun { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 760px) { .kx-fun { grid-template-columns: minmax(0, 1fr); } }
.kx-fun-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kx-fun-nota { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kx-fun-nota .num { font-family: var(--kx-head); font-weight: 700; font-size: 40px; line-height: 1; }
.kx-fun-nota .num small { font-size: 15px; font-weight: 600; color: var(--kx-muted); }
.kx-fun-m { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: 14px; background: var(--kx-soft); }
.kx-fun-m .l1 { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.kx-fun-m .pw { font-size: 12px; font-weight: 600; color: var(--kx-orange-deep); white-space: nowrap; }
.kx-fun-m .tr { height: 8px; border-radius: 4px; background: #E3E5EA; overflow: hidden; }
.kx-fun-m .fl { height: 100%; border-radius: 4px; background: var(--kx-orange); }
.kx-fun-m .tx { font-size: 13px; color: var(--kx-ink2); line-height: 1.45; }
.kx-fun-m .mt { font-size: 12px; color: var(--kx-muted); }
.kx-modal { color-scheme: light; background: #fff; overflow: auto; border: 0; border-radius: 22px; padding: 0; width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 24px 64px rgba(22, 24, 28, .3); color: var(--kx-ink); font-family: var(--kx-body); }
.kx-modal::backdrop { background: rgba(22, 24, 28, .45); }
.kx-modal-hd { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 22px 24px 14px; border-bottom: 1px solid var(--kx-line); position: sticky; top: 0; background: #fff; }
.kx-modal-hd h2 { font-family: var(--kx-head); font-size: 20px; margin: 0 0 4px; }
.kx-modal-hd p { margin: 0; font-size: 13.5px; color: var(--kx-ink2); }
.kx-modal-bd { padding: 6px 24px 24px; font-size: 14px; background: #fff; color: #16181C; }
.kx-modal-bd td { color: #16181C; }
.kx-modal-bd h3 { color: #16181C; }
.kx-modal-bd h3 { font-family: var(--kx-head); font-size: 15px; margin: 22px 0 10px; }
.kx-mtab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.kx-mtab th { text-align: left; font-size: 12px; font-weight: 600; color: var(--kx-muted); background: var(--kx-soft); padding: 8px 10px; }
.kx-mtab th:first-child { border-radius: 10px 0 0 10px; } .kx-mtab th:last-child { border-radius: 0 10px 10px 0; }
.kx-mtab td { padding: 9px 10px; border-bottom: 1px solid var(--kx-line); vertical-align: top; line-height: 1.45; }
.kx-mtab-c td:nth-child(2), .kx-mtab-c td:nth-child(3), .kx-mtab-c td:nth-child(4) { font-weight: 700; color: var(--kx-orange-deep); white-space: nowrap; }
.kx-mnote { font-size: 12.5px; color: var(--kx-muted); margin: 8px 0 0; line-height: 1.5; }
.kx-infobtn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--kx-orange-deep); padding: 6px 12px; border-radius: 999px; background: var(--kx-orange-soft); white-space: nowrap; }
.kx-infobtn:hover { background: #FFE3CF; }
.kx-sug-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
@media (max-width: 640px) { .kx-sug-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kx-sug-sum .it { background: var(--kx-soft); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: #6B7280; }
.kx-sug-sum .it b { font-family: var(--kx-head); font-size: 24px; color: #16181C; }
.kx-sug-sum .it.ok b { color: var(--kx-ok); } .kx-sug-sum .it.bad b { color: var(--kx-bad); } .kx-sug-sum .it.ink { background: #FFF1E6; }
.kx-sug-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.kx-sug-msg { font-size: 12.5px; color: #6B7280; }
.kx-sug-tw { max-height: 46vh; overflow: auto; border: 1px solid var(--kx-line); border-radius: 12px; padding: 0 6px; }
.kx-sug-tw .kx-mtab th { position: sticky; top: 0; z-index: 1; }
.kx-sug-tw td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kx-sug-tw td.mu { color: #6B7280; font-size: 12.5px; }
.kx-sug-ta { position: absolute; left: -9999px; width: 1px; height: 1px; }
.kx-infobtn:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 2px; }
.kx-sh .kx-infobtn { margin-left: auto; }
.kx-fg { position: relative; min-width: 0; }
.kx-fgw { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .kx-fgw { grid-template-columns: minmax(0, 1fr); } }
.kx-fgl { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kx-placar.kx-placar-v { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .kx-placar.kx-placar-v { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kx-legend.kx-legend-v { flex-direction: column; align-items: flex-start; }
.kx-fg-tbl td.cl button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.kx-fg-tbl td.cl img, .kx-fg-tbl td.cl .ini { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--kx-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.kx-fg-tbl .pg { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: #E3E5EA; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.kx-fg-tbl .pg i { display: block; height: 100%; background: var(--kx-orange); }
.kx-semlista { font-size: 13px; color: var(--kx-ink2); margin-top: 12px; }
.kx-ldet { display: flex; flex-direction: column; gap: 12px; }
.kx-side { min-width: 0; }
.kx-side .kx-notes { max-height: 340px; padding-right: 8px; scrollbar-gutter: stable; }
.kx-ldet .kx-notes { max-height: 300px; margin-top: 2px; }
.kx-ldet .kx-back { align-self: flex-start; }
.kx-ldet .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kx-ldet .hd b { font-family: var(--kx-head); font-size: 15px; }
.kx-ldet .rs { display: flex; flex-wrap: wrap; gap: 6px; }
.kx-lead { border-radius: 14px; padding: 12px 14px; background: var(--kx-soft); font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.kx-lead .lh { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--kx-ink); }
.kx-lead .lh .nn { width: 24px; height: 24px; border-radius: 50%; background: var(--kx-orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.kx-lead .lr { display: grid; grid-template-columns: 5.5rem 1fr; gap: 6px; }
.kx-lead .lr .k { color: var(--kx-muted); }
.kx-lead .lr .v { color: var(--kx-ink2); }
.kx-hbars { display: flex; flex-direction: column; gap: 10px; }
.kx-hbar2 { display: grid; grid-template-columns: 7.5rem 1fr 3rem; gap: 10px; align-items: center; font-size: 13px; }
.kx-hbar2 .tr { height: 12px; border-radius: 6px; background: var(--kx-grid); overflow: hidden; }
.kx-hbar2 .fl { height: 100%; border-radius: 6px; }
.kx-hbar2 .vv { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.kx-big2 { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end; }
.kx-big2 .it { display: flex; flex-direction: column; gap: 2px; }
.kx-big2 .it .num { font-family: var(--kx-head); font-weight: 700; font-size: 34px; line-height: 1.1; }
.kx-big2 .it .lb { font-size: 13px; color: var(--kx-muted); }
.kx-ld-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.kx-ld-list .li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 8px 12px; border-radius: 10px; background: var(--kx-soft); }
.kx-ld-list .li .d { color: var(--kx-muted); white-space: nowrap; }
.kx-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .kx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .kx-kpis { grid-template-columns: minmax(0, 1fr); } }
.kx-kwc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kx-pos.out { background: var(--kx-soft); color: var(--kx-muted); font-weight: 600; }
.kx-pos.na { background: #fff; color: var(--kx-faint); border: 1px dashed var(--kx-line); font-weight: 600; }
.kx-stars { display: inline-flex; gap: 3px; }
.kx-stars svg { width: 22px; height: 22px; }
.kx-stars.sm { gap: 1px; vertical-align: -3px; }
.kx-stars.sm svg { width: 15px; height: 15px; }
.kx-starnum { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.kx-kpi .vr .kx-stars { align-self: center; }
.kx-rev { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.kx-rev .md { font-family: var(--kx-head); font-weight: 700; font-size: 46px; line-height: 1; }
.kx-rev .cap { font-size: 13px; color: var(--kx-muted); margin-top: 4px; }
.kx-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--kx-grid); margin: 10px 0 8px; }
.kx-stack i { display: block; height: 100%; }
.kx-split { display: flex; flex-direction: column; gap: 12px; }
.kx-split .ln { display: flex; justify-content: space-between; font-size: 13px; color: var(--kx-ink2); margin-bottom: 4px; }
.kx-split .ln b { color: var(--kx-ink); }
.kx-pend { font-size: 13px; line-height: 1.55; color: var(--kx-ink2); background: var(--kx-warn-soft); border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
.kx-pend.ok { background: var(--kx-ok-soft); }
.kx-qs { width: 100%; }
.kx-go, .kx-kpi .kx-go, .kx-note .kx-go { height: 22px; padding: 0 6px 0 8px; gap: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; }
.kx-go .kx-ico { width: 11px; height: 11px; }
.kx-kpi.t-ok .num { color: var(--kx-ok); }
.kx-kpi.t-bad .num { color: var(--kx-bad); }
.kx-kpi.t-warn .num { color: var(--kx-warn); }
.kx-kpi .dl.warn { color: var(--kx-warn); background: var(--kx-warn-soft); }
.kx-tbl td .kws { display: flex; flex-wrap: wrap; gap: 4px; }
.kx-tbl td .kws span { font-size: 12px; background: var(--kx-soft); border-radius: 999px; padding: 2px 8px; color: var(--kx-ink2); white-space: nowrap; }
.kx-tbl td .kws span b { color: var(--kx-orange-deep); }
.kx-subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.kx-subtabs button { all: unset; cursor: pointer; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--kx-line); color: var(--kx-ink2); transition: background .15s; }
.kx-subtabs button:hover { background: var(--kx-soft); }
.kx-subtabs button[aria-pressed=true] { background: var(--kx-orange); border-color: var(--kx-orange); color: #fff; }
.kx-subtabs button:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 2px; }
.kx-tbl td.best { color: var(--kx-ok); font-weight: 700; }
.kx-tbl td.worst { color: var(--kx-bad); font-weight: 700; }
.kx-cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 16px; }
.kx-ptabs { display: flex; gap: 6px; padding: 6px; background: #fff; border-radius: 18px; box-shadow: var(--kx-shadow); width: fit-content; max-width: 100%; flex-wrap: wrap; }
.kx-ptabs button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 13px; font-size: 14.5px; font-weight: 600; color: var(--kx-ink2); }
.kx-ptabs button .kx-ico { width: 17px; height: 17px; }
.kx-ptabs button:hover { background: var(--kx-soft); }
.kx-ptabs button[aria-selected=true] { background: var(--kx-orange); color: #fff; box-shadow: 0 6px 14px rgba(255, 102, 0, .28); }
.kx-ptabs button:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 2px; }
.kx-sd { display: flex; flex-direction: column; gap: 16px; }
.kx-sd[hidden], .kx-pg[hidden] { display: none; }
.kx-placar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .kx-placar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kx-pc { border-radius: 18px; padding: 16px 18px; background: var(--kx-soft); display: flex; flex-direction: column; gap: 4px; }
.kx-pc .lb { font-size: 13px; font-weight: 600; color: var(--kx-ink2); display: flex; align-items: center; gap: 8px; }
.kx-pc .lb i { width: 10px; height: 10px; border-radius: 50%; }
.kx-pc .num { font-family: var(--kx-head); font-weight: 700; font-size: 34px; line-height: 1.1; }
.kx-pc .sub { font-size: 12.5px; color: var(--kx-muted); }
.kx-pc.ok { background: var(--kx-ok-soft); } .kx-pc.ok .num { color: var(--kx-ok); }
.kx-pc.warn { background: var(--kx-warn-soft); } .kx-pc.warn .num { color: var(--kx-warn); }
.kx-pc.bad { background: var(--kx-bad-soft); } .kx-pc.bad .num { color: var(--kx-bad); }
.kx-heat { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 13px; }
.kx-heat th { font-size: 12px; font-weight: 600; color: var(--kx-muted); text-align: left; padding: 4px 6px; white-space: nowrap; }
.kx-heat td { border-radius: 10px; padding: 8px 10px; vertical-align: middle; }
.kx-heat td.cl { background: transparent; padding-left: 0; }
.kx-heat td.cl button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--kx-ink); font-size: 14px; }
.kx-heat td.cl button:hover span.nmh { text-decoration: underline; }
.kx-heat td.cl button:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 2px; border-radius: 8px; }
.kx-heat td.cl img, .kx-heat td.cl .ini { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; background: #fff; box-shadow: 0 0 0 1px var(--kx-line); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.kx-heat td.st { white-space: nowrap; }
.kx-heat td.c-verde { background: #DDF4EA; color: #0B7A55; }
.kx-heat td.c-amarelo { background: #FFF1CC; color: #8A5A00; }
.kx-heat td.c-vermelho { background: #FDE2DF; color: #B42318; }
.kx-heat td.c-cinza { background: var(--kx-soft); color: var(--kx-faint); }
.kx-heat td b { font-weight: 700; }
.kx-heat td .kw { display: block; font-size: 11px; font-weight: 500; color: var(--kx-muted); }
.kx-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.kx-alerts { display: flex; flex-direction: column; gap: 8px; }
.kx-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; background: var(--kx-soft); }
.kx-alert.vermelho { background: var(--kx-bad-soft); } .kx-alert.amarelo { background: var(--kx-warn-soft); }
.kx-alert .k { font-weight: 700; color: var(--kx-ink); white-space: nowrap; }
.kx-alert button { all: unset; cursor: pointer; font-weight: 700; color: var(--kx-ink); }
.kx-alert button:hover { text-decoration: underline; }
.kx-sdrow { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .kx-sdrow { grid-template-columns: minmax(0, 1fr); } }
.kx-qtab td { padding: 9px 12px; }
.kx-qtab td:first-child { font-weight: 600; color: var(--kx-ink); }
.kx-qbar { display: inline-block; width: 80px; height: 8px; border-radius: 4px; background: var(--kx-grid); margin-right: 8px; vertical-align: middle; overflow: hidden; }
.kx-qbar i { display: block; height: 100%; background: #FFB27A; border-radius: 4px; }
.kx-ctr { display: inline-flex; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.kx-ctr.ok { background: var(--kx-ok-soft); color: var(--kx-ok); } .kx-ctr.mid { background: #FFF1DC; color: #B45309; } .kx-ctr.low { background: var(--kx-bad-soft); color: var(--kx-bad); }
/* kanban da construção do site */
.kx-kb { display: grid; grid-template-columns: repeat(var(--kb-cols, 6), minmax(150px, 1fr)); gap: 10px; margin-top: 18px; overflow-x: auto; padding-bottom: 6px; min-height: 120px; }
.kx-kbc { background: var(--kx-soft); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kx-kbc.fim { background: var(--kx-ok-soft); }
.kx-kbc .hd { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: start; min-height: 56px; }
.kx-kbc .hd .nn { width: 24px; height: 24px; border-radius: 50%; background: var(--kx-orange); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.kx-kbc.fim .hd .nn { background: var(--kx-ok); }
.kx-kbc .hd h3 { margin: 2px 0 0; font-size: 13.5px; line-height: 1.3; font-weight: 700; color: var(--kx-ink); }
.kx-kbc .hd .ct { font-size: 12px; font-weight: 700; color: var(--kx-ink2); background: #fff; border-radius: 999px; padding: 2px 9px; }
.kx-kbc .bd { display: flex; flex-direction: column; gap: 8px; }
.kx-kbc .vz { font-size: 12.5px; color: var(--kx-faint); padding: 6px 2px; }
.kx-kcard { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--kx-line); border-radius: 12px; padding: 10px; }
.kx-kcard:hover { border-color: var(--kx-orange); }
.kx-kcard:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 2px; }
.kx-kcard .tp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kx-kcard .av { width: 28px; height: 28px; border-radius: 50%; flex: none; overflow: hidden; background: var(--kx-orange-soft); color: var(--kx-orange-deep); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.kx-kcard .av img { width: 100%; height: 100%; object-fit: cover; }
.kx-kcard .nm { font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--kx-ink); overflow-wrap: anywhere; }
.kx-kcard { gap: 8px; }
.kx-kcard .dz { display: flex; align-items: baseline; gap: 6px; padding: 7px 9px; border-radius: 10px; background: var(--kx-soft); color: var(--kx-ink2); }
.kx-kcard .dz b { font-family: var(--kx-head); font-size: 22px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.kx-kcard .dz .tx { font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.kx-kcard .dz.ok { background: var(--kx-ok-soft); color: var(--kx-ok); }
.kx-kcard .dz.warn { background: var(--kx-warn-soft); color: var(--kx-warn); }
.kx-kcard .dz.bad { background: var(--kx-bad-soft); color: var(--kx-bad); }
.kx-kcard .mt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 12px; }
.kx-kcard .mt dt { color: var(--kx-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; padding-top: 1px; }
.kx-kcard .mt dd { margin: 0; color: var(--kx-ink); font-weight: 700; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 0 6px; }
.kx-kcard .mt dd span { color: var(--kx-muted); font-weight: 500; }
.kx-kcard .pend { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--kx-warn); background: var(--kx-warn-soft); border-radius: 8px; padding: 4px 7px; }
.kx-kcard .pend .kx-ico { width: 12px; height: 12px; flex: none; }
.kx-kcard .ft { display: flex; align-items: center; gap: 8px; }
.kx-kcard .ft .pg { flex: 1; height: 4px; border-radius: 4px; background: var(--kx-soft); overflow: hidden; margin: 0; }
.kx-kcard .ft .pg i { display: block; height: 100%; background: var(--kx-orange); border-radius: 4px; }
.kx-kcard .ft .pn { font-size: 11px; font-weight: 600; color: var(--kx-muted); font-variant-numeric: tabular-nums; }
.kx-kcard .nx { font-size: 11.5px; line-height: 1.4; color: var(--kx-muted); border-top: 1px dashed var(--kx-line); padding-top: 7px; display: flex; gap: 5px; }
.kx-kcard .nx .ar { color: var(--kx-orange); font-weight: 700; }
@media (max-width: 700px) { .kx-kb { grid-template-columns: minmax(0, 1fr); overflow-x: visible; } }
@media (max-width: 700px) { .kx-kbc .hd { min-height: 0; } }
.kx-kbc .hd { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 6px; min-height: 64px; align-content: start; }
.kx-kbc .hd .nn { grid-column: 1; grid-row: 1; }
.kx-kbc .hd .ct { grid-column: 3; grid-row: 1; justify-self: end; }
.kx-kbc .hd h3 { grid-column: 1 / -1; grid-row: 2; margin: 0; }
@media (max-width: 700px) { .kx-kbc .hd { min-height: 0; grid-template-rows: auto; } .kx-kbc .hd h3 { grid-column: 2; grid-row: 1; margin-top: 2px; } }
/* kanban: cards mais folgados */
.kx-kcard { padding: 12px 13px; gap: 10px; }
.kx-kcard .dz { display: block; padding: 8px 10px; }
.kx-kcard .dz b { font-size: 20px; margin-right: 5px; }
.kx-kcard .dz .tx { font-size: 12.5px; }
.kx-kcard .mt { gap: 6px 12px; font-size: 12.5px; }
.kx-kcard .mt dd { gap: 0 8px; }
@media (max-width: 700px) { .kx-kb { grid-template-columns: minmax(0, 1fr) !important; } }
.kx-kcard .dz { white-space: normal; } .kx-kcard .dz b + .tx { white-space: nowrap; } .kx-kb { gap: 8px; }
/* fonte da semana no gráfico do Search Console */
.kx-legend.kx-fonte { margin-top: 6px; color: var(--kx-muted); font-size: 12px; }
.kx-legend.kx-fonte i { width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; display: inline-block; }
.kx-legend.kx-fonte i.f-drive { background: #fff; border: 1.6px solid #A0A6B1; }
.kx-legend.kx-fonte i.f-asana { background: #3A3F47; }
.kx-legend.kx-fonte i.f-ambos { background: radial-gradient(circle, #3A3F47 0 2.2px, #fff 2.6px); border: 1.4px solid #A0A6B1; width: 11px; height: 11px; }
.kx-legend.kx-fonte { gap: 4px 16px; margin: 4px 0 8px; }
.kx-legend.kx-fonte span { background: none; padding: 0; border: 0; display: inline-flex; align-items: center; gap: 6px; }
/* tendência do mês ao lado do título do gráfico */
.kx-mes { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; cursor: default; vertical-align: middle; font-family: var(--kx-body, inherit); }
.kx-mes i { font-style: normal; font-size: 10px; }
.kx-mes.alta { background: var(--kx-ok-soft); color: var(--kx-ok); }
.kx-mes.queda { background: var(--kx-bad-soft); color: var(--kx-bad); }
.kx-mes.misto { background: var(--kx-warn-soft); color: var(--kx-warn); }
.kx-mes.estavel { background: var(--kx-soft); color: var(--kx-ink2); }
.kx-mes:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 2px; }
.kx-bh > .kx-h3 { flex-wrap: wrap; row-gap: 6px; }
/* funil do cliente: etapa atual x ciclo pelo tempo */
.kx-fun-tg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: var(--kx-soft); border-radius: 12px; }
.kx-fun-tb { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; color: var(--kx-ink2); line-height: 1.3; }
.kx-fun-tb b { display: block; font-size: 12.5px; color: var(--kx-ink); }
.kx-fun-tb i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.kx-fun-tb.etapa i, .kx-fun-lg .etapa i, .kx-fun-m .cp .etapa i { background: var(--kx-orange); }
.kx-fun-tb.ciclo i, .kx-fun-lg .ciclo i, .kx-fun-m .cp .ciclo i { background: #6366F1; }
.kx-fun-tb[aria-selected=true] { background: #fff; box-shadow: 0 1px 4px rgba(22, 24, 28, .12); }
.kx-fun-tb:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 1px; }
.kx-fun-lg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--kx-muted); }
.kx-fun-lg span { display: inline-flex; align-items: center; gap: 6px; }
.kx-fun-lg i { width: 9px; height: 9px; border-radius: 3px; }
.kx-fun-lg .nt { flex-basis: 100%; }
.kx-fun-m .tr.dois { height: auto; background: none; overflow: visible; display: flex; flex-direction: column; gap: 3px; }
.kx-fun-m .tr.dois .ln { position: relative; height: 7px; border-radius: 4px; background: #E3E5EA; overflow: hidden; opacity: .5; }
.kx-fun-m .tr.dois .ln.on { opacity: 1; }
.kx-fun-m .tr.dois .ln.etapa .fl { background: var(--kx-orange); }
.kx-fun-m .tr.dois .ln.ciclo .fl { background: #6366F1; }
.kx-fun-m .tr.dois .mx { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(22, 24, 28, .25); }
.kx-fun-m .cp { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--kx-muted); }
.kx-fun-m .cp span { display: inline-flex; align-items: center; gap: 5px; }
.kx-fun-m .cp span.on { color: var(--kx-ink); font-weight: 600; }
.kx-fun-m .cp i { width: 8px; height: 8px; border-radius: 2px; }
/* funil do cliente: posição pelo tempo e previsão */
.kx-fun-tg1 { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--kx-ink2); background: var(--kx-soft); }
.kx-fun-tg1 i { width: 12px; height: 12px; border-radius: 50%; border: 1.6px dashed #6366F1; box-sizing: border-box; }
.kx-fun-tg1.on { background: #EEF0FF; color: #4338CA; }
.kx-fun-tg1:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 2px; }
.kx-fun-prev { margin-top: 10px; max-width: 460px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--kx-line); background: #fff; display: flex; flex-direction: column; gap: 6px; }
.kx-fun-prev .h { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.kx-fun-prev .h .kx-ico { width: 14px; height: 14px; color: var(--kx-orange-deep); }
.kx-fun-prev p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--kx-ink2); }
.kx-fun-prev p.cmp { font-weight: 600; }
.kx-fun-prev p.cmp.ok { color: var(--kx-ok); } .kx-fun-prev p.cmp.warn { color: var(--kx-warn); } .kx-fun-prev p.cmp.bad { color: var(--kx-bad); }

.kx-fun-m .tx { font-size: 12.5px; }
.kx-fun-m[title] { cursor: help; }
.kx-fun-nota .num { font-size: 34px; }
.kx-top10 td.n, .kx-top10 th:not(:first-child) { text-align: right; white-space: nowrap; }
.kx-top10 .dl { font-size: 12px; font-weight: 600; }
.kx-top10 .dl.ok { color: var(--kx-ok); } .kx-top10 .dl.bad { color: var(--kx-bad); }
.kx-top10 td, .kx-top10 th { padding-top: 6px; padding-bottom: 6px; }
.kx-top10 td { font-size: 13px; }
.kx-top10 td:first-child span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 1.35; }
.kx-top10 td:first-child { width: 100%; }
.kx-top10 td:not(:first-child), .kx-top10 th:not(:first-child) { padding-left: 8px; padding-right: 8px; }
.kx-top10 td.n { vertical-align: middle; }

.kx-perbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: -2px; font-size: 12.5px; color: var(--kx-muted); }
.kx-perseg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--kx-soft); }
.kx-perseg button { all: unset; cursor: pointer; padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--kx-ink2); }
.kx-perseg button[aria-pressed=true] { background: #fff; color: var(--kx-ink); box-shadow: 0 1px 4px rgba(22, 24, 28, .12); }
.kx-perseg button:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 1px; }
.kx-kpi .per { align-self: flex-start; display: inline-block; margin: 2px 0 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #4338CA; background: #EEF0FF; }
.kx-kpi .per.fixo { color: var(--kx-ink2); background: #fff; border: 1px solid var(--kx-line); }
.kx-perbar-g { margin: -4px 0 8px; }
.kx-pgtab td:first-child { min-width: 0; }
.kx-pgtab .pn { display: block; font-weight: 600; color: var(--kx-ink); line-height: 1.35; }
.kx-pgtab .pu { display: block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 400; color: var(--kx-muted); text-decoration: none; margin-top: 2px; }
.kx-pgtab .pu:hover { color: var(--kx-orange-deep); text-decoration: underline; }
.kx-pgtab td:first-child { width: 100%; max-width: 0; }
.kx-pgtab .pu { max-width: 100%; }
.kx-pgtab td.n, .kx-pgtab th:not(:first-child) { white-space: nowrap; }
@media (max-width: 560px) { .kx-pgtab th:nth-child(4), .kx-pgtab td:nth-child(4), .kx-pgtab th:nth-child(5), .kx-pgtab td:nth-child(5) { display: none; } .kx-pgtab .kx-qbar { display: none; } .kx-pgtab td, .kx-pgtab th { padding-left: 8px; padding-right: 8px; } }

.kx-sbtn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit; border-radius: 6px; }
.kx-sbtn:hover { color: var(--kx-ink); }
.kx-sbtn:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 2px; }
.kx-sarr { font-size: 11px; opacity: .35; font-weight: 700; }
th.kx-sorted .kx-sbtn { color: var(--kx-ink); }
th.kx-sorted .kx-sarr { opacity: 1; color: var(--kx-orange-deep); }
th:not(:first-child) .kx-sbtn { justify-content: inherit; }

/* menu lateral */
.kx.kx-app { --kx-sw: 248px; display: grid; grid-template-columns: var(--kx-sw) minmax(0, 1fr); align-items: start; gap: 20px; }
.kx.kx-app.kx-mini { --kx-sw: 68px; }
.kx-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.kx-side { position: sticky; top: clamp(14px, 2.6vw, 28px); max-height: calc(100vh - 2 * clamp(14px, 2.6vw, 28px)); overflow-y: auto; overflow-x: hidden; background: #fff; border-radius: 22px; box-shadow: var(--kx-shadow); padding: 14px 10px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.kx-side-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 10px; border-bottom: 1px solid var(--kx-line); }
.kx-side .kx-brand { color: var(--kx-ink); min-width: 0; }
.kx-side .kx-brand small { color: var(--kx-muted); display: block; font-size: 11.5px; line-height: 1.2; }
.kx-side .kx-brand .kx-stx { line-height: 1.2; }
.kx-stog { all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--kx-muted); flex: none; }
.kx-stog:hover { background: var(--kx-soft); color: var(--kx-ink); }
.kx-stog .kx-ico { width: 18px; height: 18px; transition: transform .2s; }
.kx-slbl { margin: 0 0 4px; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kx-faint); }
.kx-snav, .kx-sgrp, .kx-scli { display: flex; flex-direction: column; gap: 2px; }
.kx-sit { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--kx-ink2); position: relative; }
.kx-sit .kx-ico { width: 18px; height: 18px; }
.kx-sit:hover { background: var(--kx-soft); }
.kx-sit:focus-visible, .kx-stog:focus-visible, .kx-mbtn:focus-visible, .kx-crumb button:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 1px; }
.kx-sit.on { background: var(--kx-orange); color: #fff; box-shadow: 0 6px 14px rgba(255, 102, 0, .26); }
.kx-stx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kx-sgrp { border-top: 1px solid var(--kx-line); padding-top: 12px; }
.kx-sgrp-hd .kx-stx { flex: 1; }
.kx-sgrp-hd.tem { color: var(--kx-orange-deep); }
.kx-snum { font-size: 12px; font-weight: 600; color: var(--kx-muted); background: var(--kx-soft); border-radius: 999px; padding: 1px 8px; }
.kx-schev { transition: transform .2s; color: var(--kx-muted); width: 16px !important; height: 16px !important; }
.kx-side.cli-fechado .kx-schev { transform: rotate(-90deg); }
.kx-side.cli-fechado .kx-scli { display: none; }
.kx-scli { margin-top: 2px; }
.kx-scit { font-weight: 500; font-size: 13.5px; min-height: 38px; padding: 5px 10px; gap: 10px; }
.kx-scit .av { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--kx-soft); border: 1px solid var(--kx-line); display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: var(--kx-ink2); font-family: var(--kx-head); }
.kx-scit .av img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; background: #fff; }
.kx-scit .av .st { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #fff; }
.kx-scit.on { font-weight: 600; }
.kx-scit.on .av { border-color: rgba(255, 255, 255, .7); }
.kx-scit.on .av .st { border-color: var(--kx-orange); }
.kx-scli-sk { height: 30px; border-radius: 10px; margin: 3px 6px; }
.kx-svazio { margin: 4px 10px; font-size: 13px; color: var(--kx-muted); }

/* menu encolhido: só os ícones, com o ativo marcado */
.kx-mini .kx-side { padding: 14px 8px; align-items: center; }
.kx-mini .kx-side .kx-stx, .kx-mini .kx-slbl, .kx-mini .kx-snum, .kx-mini .kx-schev { display: none; }
.kx-mini .kx-side-hd { flex-direction: column; padding: 2px 0 10px; width: 100%; }
.kx-mini .kx-stog .kx-ico { transform: scaleX(-1); }
.kx-mini .kx-sit { justify-content: center; width: 44px; padding: 8px 0; }
.kx-mini .kx-snav, .kx-mini .kx-sgrp { align-items: center; width: 100%; }
.kx-mini .kx-scli { align-items: center; }
.kx-mini.kx-app .kx-side .kx-scli { display: flex; }
.kx-mini .kx-sgrp-hd.tem::after { content: ''; position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--kx-orange); }

/* cabeçalho: lado esquerdo */
.kx-hl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kx-hl:empty { display: none; }
.kx-mbtn { all: unset; cursor: pointer; display: none; width: 38px; height: 38px; border-radius: 12px; align-items: center; justify-content: center; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); flex: none; }
.kx-mbtn .kx-ico { width: 20px; height: 20px; }
.kx-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: rgba(255, 255, 255, .6); }
.kx-crumb[hidden] { display: none; }
.kx-crumb button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, .8); font-weight: 600; border-radius: 8px; padding: 2px 6px 2px 2px; }
.kx-crumb button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.kx-crumb button .kx-ico { width: 16px; height: 16px; }
.kx-crumb .sep { color: rgba(255, 255, 255, .3); }
.kx-crumb b { color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-btn .t2, .kx-sm { display: none; }
.kx-cli .kx-sm { display: inline; color: rgba(255, 255, 255, .6); }

/* com cliente selecionado: cabeçalho simplificado, sem a jornada da carteira */
.kx-cli .kx-hero { padding: 12px 14px 12px 18px; border-radius: 18px; }
.kx-cli .kx-hero h1, .kx-cli .kx-hero .kx-take, .kx-cli .kx-tiles, .kx-cli .kx-fontes, .kx-cli .kx-d-hoje, .kx-cli .kx-lg { display: none; }
.kx-cli .kx-hero .kx-livemsg { margin-top: 10px; }
.kx-cli .kx-date { padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }
.kx-cli .kx-btn { padding: 7px 12px; font-size: 12.5px; }
.kx-cli .kx-btn .t { display: none; }
.kx-cli .kx-btn .t2 { display: inline; }

/* celular: menu vira gaveta */
.kx-sback[hidden] { display: none; }
@media (max-width: 860px) {
  .kx.kx-app, .kx.kx-app.kx-mini { grid-template-columns: minmax(0, 1fr); }
  .kx-mbtn { display: inline-flex; }
  .kx-side, .kx-mini .kx-side { position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; width: min(290px, 84vw); max-height: none; border-radius: 0 20px 20px 0; transform: translateX(-105%); transition: transform .22s ease; align-items: stretch; padding: 16px 10px; }
  .kx-gav .kx-side { transform: none; }
  .kx-mini .kx-side .kx-stx, .kx-mini .kx-slbl, .kx-mini .kx-snum, .kx-mini .kx-schev { display: revert; }
  .kx-mini .kx-side .kx-stx { display: block; }
  .kx-mini .kx-snum { display: inline; }
  .kx-mini .kx-schev { display: inline-block; }
  .kx-mini .kx-side-hd { flex-direction: row; }
  .kx-mini .kx-sit { justify-content: flex-start; width: 100%; padding: 8px 10px; }
  .kx-mini .kx-snav, .kx-mini .kx-sgrp, .kx-mini .kx-scli { align-items: stretch; }
  .kx-stog .kx-ico, .kx-mini .kx-stog .kx-ico { transform: none; }
  .kx-sback { position: fixed; inset: 0; z-index: 55; background: rgba(22, 24, 28, .42); }
}
@media (max-width: 520px) {
  .kx-cli .kx-hbar { flex-wrap: nowrap; }
  .kx-cli .kx-btn .t2, .kx-cli .kx-sm { display: none; }
  .kx-cli .kx-hbar .kx-sync { flex-wrap: nowrap; }
  .kx-cli .kx-date { white-space: nowrap; padding: 6px 10px; }
  .kx-cli .kx-hl { flex: 1; }
  .kx-cli .kx-btn { padding: 8px; }
  .kx-cli .kx-crumb #kx-crumb-back { font-size: 0; gap: 0; }
}
.kx-livemsg[hidden] { display: none; }

/* menu colado à esquerda e no topo, altura da tela, só a lista de clientes rola */
.kx.kx-app { padding: 0; gap: 0; }
.kx-main { padding: clamp(14px, 2.6vw, 28px); }
.kx-side, .kx-mini .kx-side { top: 0; height: 100vh; max-height: 100vh; border-radius: 0; box-shadow: 1px 0 0 var(--kx-line), 4px 0 18px rgba(22, 24, 28, .04); overflow: hidden; box-sizing: border-box; }
.kx-side-hd, .kx-snav { flex: none; }
.kx-sgrp { flex: 1 1 auto; min-height: 0; }
.kx-sgrp-hd { flex: none; }
.kx-scli { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
.kx-scli::-webkit-scrollbar, .kx-side::-webkit-scrollbar { display: none; width: 0; height: 0; }
.kx-mini .kx-sgrp { align-self: stretch; }
@media (max-width: 860px) {
  .kx-side, .kx-mini .kx-side { height: 100%; max-height: 100%; border-radius: 0 20px 20px 0; }
}

/* sidebar colada na lateral e no topo, só a lista de clientes rola */
.kx.kx-app { padding: 0; gap: 0; }
.kx-main { padding: clamp(14px, 2.6vw, 28px); }
.kx-side { position: sticky; top: 0; height: 100vh; max-height: 100vh; border-radius: 0; box-shadow: 1px 0 0 var(--kx-line), 4px 0 18px rgba(22, 24, 28, .04); overflow: hidden; padding: 16px 10px 12px; }
.kx-side-hd, .kx-snav, .kx-sgrp-hd { flex: none; }
.kx-sgrp { flex: 1 1 auto; min-height: 0; }
.kx-scli { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--kx-line) transparent; margin-right: -6px; padding-right: 6px; }
.kx-mini .kx-scli { margin-right: 0; padding-right: 0; scrollbar-width: none; }
.kx-mini .kx-scli::-webkit-scrollbar { display: none; }
@media (max-width: 860px) {
  .kx-side, .kx-mini .kx-side { position: fixed; top: 0; left: 0; bottom: 0; height: 100%; height: 100dvh; max-height: none; border-radius: 0 20px 20px 0; }
}

/* trajetória do cliente */
.kx-traj .kx-chart { margin-top: 6px; }
.kx-traj .kx-chart svg { display: block; overflow: visible; }
.kx-tj-f { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-top: 14px; }
.kx-tj-f .s { font-size: 12px; color: var(--kx-muted); line-height: 1.35; }
.kx-tj-f .fd.bad .v { color: var(--kx-bad); }
.kx-tj-f .fd.ok .v { color: var(--kx-ok); }
.kx-traj .kx-cap { margin: 10px 0 0; }

/* rodapé com a versão e histórico de versões */
.kx-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 4px 6px 8px; font-size: 12.5px; color: var(--kx-muted); }
.kx-versao { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--kx-line); background: #fff; color: var(--kx-ink2); font-size: 12.5px; }
.kx-versao b { color: var(--kx-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.kx-versao:hover { border-color: var(--kx-peach); }
.kx-versao:focus-visible { outline: 2px solid var(--kx-orange); outline-offset: 2px; }
.kx-novidades { width: min(640px, calc(100vw - 32px)); }
.kx-nv { padding: 14px 0 4px; border-bottom: 1px solid var(--kx-line); }
.kx-nv:last-child { border-bottom: 0; }
.kx-nv h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.kx-nv-d { font-family: var(--kx-body); font-weight: 500; font-size: 13px; color: var(--kx-muted); }
.kx-nv-atual { font-family: var(--kx-body); font-size: 11px; font-weight: 700; color: var(--kx-orange-deep); background: var(--kx-orange-soft); border-radius: 999px; padding: 2px 8px; }
.kx-nv h4 { margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--kx-muted); }
.kx-nv ul { margin: 0 0 8px; padding-left: 18px; }
.kx-nv li { margin: 4px 0; line-height: 1.55; color: var(--kx-ink2); }
.kx-nv code { font-size: 12px; background: var(--kx-soft); border-radius: 4px; padding: 1px 5px; }

/* menu de abas do cliente fixado no topo ao rolar */
#painel .kx-tabs { position: sticky; top: 10px; z-index: 30; transition: box-shadow .15s, background .15s; }
#painel .kx-tabs.preso { background: rgba(247, 248, 250, .96); box-shadow: 0 8px 22px rgba(22, 24, 28, .12), 0 0 0 1px var(--kx-line); backdrop-filter: blur(6px); }
@media (max-width: 760px) {
  #painel .kx-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; top: 6px; }
  #painel .kx-tabs::-webkit-scrollbar { display: none; }
  #painel .kx-tabs button { flex: none; }
}