/* PRIMETOUR — Painel do Marketing em TELA CHEIA (PROTÓTIPO, 07/10/2026, fora do repositório).
   O Tiago: "algo que 'sai' do gestor … ganhamos a sidebar para organização e menu do próprio dashboard, ganhando muito
   mais espaço, respiro". Referências: Dribbble "Email Campaign Performance Management Dashboard (SaaS)" e "Real Estate
   CRM Web Design" — fundo claro, cartões brancos com borda fina, menu lateral com grupos, muito espaço. Só tokens do
   Gestor: vale nos dois temas. */

.mka-app [hidden] { display: none !important; }
body.mka-on { overflow: hidden; }
.mka-app {
  position: fixed; inset: 0; z-index: 300;   /* por cima do Gestor (cabeçalho 200), abaixo dos modais (500) */
  display: grid; grid-template-columns: 256px minmax(0, 1fr);
  background: var(--bg-medium, var(--bg-surface)); color: var(--text-primary);
}

/* ─── o menu lateral ───────────────────────────────────────────────── */
.mka-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 18px 14px 14px; background: var(--bg-dark, var(--bg-card)); border-right: 1px solid var(--border-subtle); }
.mka-marca { display: flex; align-items: center; gap: 10px; padding: 2px 6px 4px; }
.mka-marca-sinal { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--brand-gold); color: var(--on-gold); flex: none; }   /* o par do tema: na paleta escura o destaque é branco */
.mka-marca-sinal svg { width: 17px; height: 17px; }
.mka-marca b { display: block; font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.mka-marca small { display: block; font-size: .6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.mka-unid { position: relative; }
.mka-unid .nlp-unid-btn { width: 100%; }
.mka-unid .nlp-unid-menu { left: 0; right: auto; min-width: 300px; }
.mka-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; margin: 0 -4px; padding: 0 4px; }
.mka-grupo { display: flex; flex-direction: column; gap: 1px; }
.mka-grupo-rot { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); padding: 0 10px 6px; }
.mka-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: .875rem; color: var(--text-secondary); transition: background .12s ease, color .12s ease; }
.mka-item svg { width: 17px; height: 17px; flex: none; color: var(--text-muted); }
.mka-item:hover { background: var(--bg-hover, var(--bg-surface)); color: var(--text-primary); }
.mka-item.ativo { background: var(--bg-surface); color: var(--text-primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border-subtle); }
.mka-item.ativo svg { color: var(--text-primary); }
.mka-item:focus-visible, .mka-voltar:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 1px; }
.mka-side-pe { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.mka-voltar { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 9px; cursor: pointer;
  font-size: .875rem; font-weight: 600; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-default); }
.mka-voltar:hover { border-color: var(--brand-gold); }
.mka-voltar svg { width: 16px; height: 16px; }

/* ─── a área principal ─────────────────────────────────────────────── */
.mka-main { min-width: 0; min-height: 0; overflow-y: auto; }
.mka-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 36px 10px; }
.mka-busca { position: relative; flex: 0 1 460px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border-radius: 10px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-muted); }
.mka-busca:focus-within { border-color: var(--border-strong, var(--border-default)); }
.mka-busca > svg { width: 16px; height: 16px; flex: none; }
.mka-busca input { all: unset; flex: 1; min-width: 0; font-size: .875rem; color: var(--text-primary); }
.mka-busca-r { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 420px; overflow-y: auto; padding: 6px; border-radius: 12px; z-index: 20;
  background: var(--bg-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); }
.mka-busca-g { display: block; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 8px 8px 4px; }
.mka-busca-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 8px; cursor: pointer; color: var(--text-primary); }
button.mka-busca-item:hover, button.mka-busca-item:focus-visible { background: var(--bg-surface); }
.mka-busca-item > svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.mka-busca-item > span:not(.mka-busca-acoes) { display: flex; flex-direction: column; min-width: 0; }
.mka-busca-item b { font-size: .8125rem; font-weight: 600; }
.mka-busca-item small { font-size: .75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mka-busca-item.cons { cursor: default; }
.mka-busca-acoes { margin-left: auto; display: inline-flex; gap: 4px; }
.mka-busca-vazio { margin: 0; padding: 12px; font-size: .8125rem; color: var(--text-muted); }
.mka-topo-dir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.mka-conteudo { padding: 28px 36px 80px; max-width: 1600px; }
.mka-pg-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.mka-pg-tit h1 { margin: 0; font-size: 1.75rem; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
/* a descrição da página saiu da tela (09/10/2026): mora no "i" do título */
.mka-pg-tit h1 .nlp-ajuda { vertical-align: middle; margin-left: 4px; }
.mka-aviso { margin: 18px 0 0; }
#mk-artes:not(:empty) { margin-top: 18px; }

/* os números do topo da página */
.mka-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 22px; }
.mka-cartoes-g { display: contents; }
.mka-kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.mka-kpi-rot { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 500; color: var(--text-secondary); }
.mka-kpi-v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mka-kpi-v > b { font-size: 1.625rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--text-primary); }
.mka-kpi-v .nlp-delta { margin: 0; }
.mka-kpi > small { font-size: .75rem; color: var(--text-muted); line-height: 1.4; }
.mka-carregando { padding: 18px; font-size: .875rem; color: var(--text-muted); }

/* as seções das telas, dentro da página: cartões brancos e espaço entre elas */
.mka-especial:not(:empty), .mka-secoes:not(:empty) { margin-top: 22px; }
.mka-secoes > .nlp-secao { margin: 0 0 28px; }
.mka-secoes > .nlp-secao:last-child { margin-bottom: 0; }
.mka-secoes .nlp-cab h2 { font-size: 1.0625rem; flex-wrap: wrap; }
.mka-secoes.unica > .nlp-secao > .nlp-cab { display: none; }   /* uma seção só: o título da página já diz o que é */
.mka-app .card { border-radius: 14px; border-color: var(--border-subtle); box-shadow: var(--shadow-sm); }
.mk-regra { font-size: .6875rem; font-weight: 500; color: var(--text-muted); background: var(--bg-surface); border: 1px solid var(--border-subtle); padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; }

/* os cartões grandes (Visão geral) */
.mka-card { padding: 20px 22px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.mka-card + .mka-card, .mka-card + .mka-duas { margin-top: 18px; }
.mka-card-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.mka-card-cab h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 600; }
.mka-card-cab > span { font-size: .75rem; color: var(--text-muted); }
.mka-leg { display: inline-flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.mka-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.mka-leg i.mkt, .mka-fu-trilho i.mkt { background: var(--brand-gold); }
.mka-leg i.crm, .mka-fu-trilho i.crm { background: var(--color-info); }
.mka-leg i.ganho, .mka-fu-trilho i.ganho { background: var(--nlp-ganha); }

.mka-fu-abs { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--bg-surface); }
.mka-fu-abs > span { font-size: .75rem; font-weight: 600; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.mka-fu-abs > b { font-size: 1.125rem; font-weight: 700; }
.mka-fu-abs > small { font-size: .75rem; color: var(--text-muted); }
.mka-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mka-lado { border-top: 3px solid var(--nlp-andamento); }
.mka-lado.concierge { border-top-color: var(--nlp-atendido); }

/* os passos de cada lado (o mesmo HTML da tela de Newsletters) */
.mk-cas-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mk-cas-passos li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 9px 12px; border-radius: 8px; overflow: hidden; isolation: isolate; }
.mk-cas-passos li::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--l, 100%); background: color-mix(in srgb, var(--nlp-andamento) 14%, transparent); z-index: -1; border-radius: inherit; }
.mk-cas-passos li.ganha::before { background: color-mix(in srgb, var(--nlp-ganha) 18%, transparent); }
.mk-cas-passos li.atendido::before { background: color-mix(in srgb, var(--nlp-atendido) 18%, transparent); }
.mk-cas-rot { font-size: .8125rem; font-weight: 500; }
.mk-cas-passos li > b { font-size: 1.0625rem; font-weight: 700; }
.mk-cas-passos li > small { grid-column: 1 / -1; font-size: .75rem; color: var(--text-secondary); }
.mk-cas-and { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 10px 0 0; font-size: .75rem; color: var(--text-secondary); }
.mk-cas-and > span b { font-size: 1rem; color: var(--text-primary); }
.mk-cas-and .nlp-link { margin: 0; font-size: .75rem; font-weight: 400; color: var(--text-secondary); }
.mk-cas-and .nlp-link b { color: var(--text-primary); font-weight: 600; }
.mk-cas-caixa { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--bg-surface); border-left: 3px solid var(--nlp-andamento); min-width: 0; }
.mk-cas-caixa.perdida { border-left-color: var(--nlp-perdida); }
.mk-cas-caixa.falta { border-left-style: dashed; border-left-color: var(--text-muted); }
.mk-cas-caixa > span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; }
.mk-cas-caixa > b { font-size: 1.125rem; font-weight: 700; }
.mk-cas-caixa small { font-size: .75rem; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 2px 10px; }
.mk-conv-caixas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; }
.nlp-fu-tempo { color: var(--text-secondary); white-space: nowrap; border-bottom: 1px dotted var(--border-strong, var(--border-default)); cursor: help; }

/* ─── o pipeline (colunas por fase, como a referência de CRM) ───────── */
.mka-pipe-cab { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-bottom: 14px; }
.mka-pipe-nota { font-size: .8125rem; color: var(--text-muted); }
.mka-pipe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 290px); gap: 14px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; align-items: start; }
.mka-col { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 300px); border-radius: 14px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-top: 3px solid var(--c); }
.mka-col.fora .mka-col-cab b { font-style: italic; }
.mka-col-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px 10px; }
.mka-col-cab > i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.mka-col-cab b { font-size: .875rem; font-weight: 600; }
.mka-col-n { font-size: .75rem; color: var(--text-muted); padding: 1px 7px; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--border-subtle); }
.mka-col-cab small { margin-left: auto; font-size: .75rem; color: var(--text-secondary); font-weight: 600; }
.mka-col-cards { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 12px; overflow-y: auto; }
.mka-op { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); cursor: pointer; }
.mka-op:hover, .mka-op:focus-visible { border-color: var(--border-strong, var(--border-default)); outline: none; }
.mka-op-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mka-op-cab b { font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.mka-chip { flex: none; font-size: .625rem; font-weight: 600; padding: 2px 6px; border-radius: 5px; background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.mka-op-nome { font-size: .75rem; color: var(--text-muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mka-op-v { font-size: .9375rem; font-weight: 700; }
.mka-op-pe { display: flex; justify-content: space-between; gap: 8px; font-size: .6875rem; color: var(--text-muted); padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--border-subtle); }
.mka-col-mais { margin: 2px 0 0; font-size: .75rem; color: var(--text-muted); text-align: center; }

/* ─── o que ainda falta ────────────────────────────────────────────── */
.mka-faltas { margin-top: 36px; }
.mka-faltas h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: .9375rem; font-weight: 600; color: var(--text-secondary); }
.mk-faltas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mk-falta { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 14px; border: 1px dashed var(--border-strong, var(--border-default)); background: var(--bg-card); }
.mka-falta-pg { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }
.mk-falta-cab { display: flex; flex-direction: column; gap: 6px; }
.mk-falta-cab b { font-size: .9375rem; line-height: 1.3; }
.mk-falta-st { align-self: flex-start; font-size: .6875rem; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-full); border: 1px solid; }
.mk-falta-st.definir { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 50%, transparent); background: color-mix(in srgb, var(--color-warning) 10%, transparent); }
.mk-falta-st.carregar { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 50%, transparent); background: color-mix(in srgb, var(--color-success) 10%, transparent); }
.mk-falta-st.acesso { color: var(--color-info); border-color: color-mix(in srgb, var(--color-info) 50%, transparent); background: color-mix(in srgb, var(--color-info) 10%, transparent); }
.mk-falta-st.fora, .mk-falta-st.sfmc { color: var(--text-secondary); border-color: var(--border-default); background: var(--bg-surface); }
.mk-falta p { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--text-secondary); }
.mk-falta-falta span { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; }
.mk-falta-medido { margin: 2px 0 0; display: grid; gap: 4px; padding: 10px 12px; border-radius: 8px; background: var(--bg-surface); cursor: help; }
.mk-falta-medido div { display: flex; justify-content: space-between; gap: 12px; font-size: .75rem; }
.mk-falta-medido dt { color: var(--text-secondary); }
.mk-falta-medido dd { margin: 0; font-weight: 600; text-align: right; }
.mk-falta .mk-falta-nota { font-size: .6875rem; color: var(--text-muted); }

/* ─── a arte, os botões, a saúde (o HTML das telas) ────────────────── */
.mk-arte { display: flex; flex-direction: column; overflow: hidden; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px var(--border-subtle); }
.mk-arte img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mk-arte.vazia { display: grid; place-items: center; font-size: .625rem; color: var(--text-muted); background: var(--bg-surface); text-align: center; }
.mk-arte.mini { width: 46px; height: 58px; }
.mk-arte.media { width: 200px; max-height: 300px; }
.mk-arte-td { width: 58px; padding-top: 6px !important; padding-bottom: 6px !important; }
.mk-artes { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px; }
.mk-arte-card { flex: 0 0 auto; display: flex; gap: 12px; align-items: flex-start; width: 300px; padding: 10px; border-radius: 12px; text-align: left; font: inherit; color: inherit; background: var(--bg-card); border: 1px solid var(--border-subtle); cursor: pointer; }
.mk-arte-card:hover, .mk-arte-card:focus-visible { border-color: var(--brand-gold); outline: none; }
.mk-arte-moldura .mk-arte { width: 92px; height: 120px; }
.mk-arte-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mk-arte-txt b { font-size: .875rem; }
.mk-arte-txt small { font-size: .75rem; color: var(--text-secondary); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nlp-det-grid.com-arte { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); }
.mk-arte-grande { border: 0; padding: 0; background: none; cursor: zoom-in; display: block; }
.mk-arte-peca { width: 100%; margin: 0 auto; background: #fff; box-shadow: 0 0 0 1px var(--border-subtle); min-height: 120px; }
.mk-arte-peca iframe { display: block; }
.mk-cli-filtros { padding-top: 0; justify-content: flex-start; gap: 10px 14px; }
.mk-cli-filtros .btn { margin-left: auto; }
.mk-atende { font-weight: 600; color: var(--text-primary); }
.mk-botoes .mk-botoes-barra { width: 32%; }
.mk-bb { display: flex; height: 10px; border-radius: 5px; background: var(--bg-surface); overflow: hidden; }
.mk-bb i { display: block; height: 100%; }
.mk-bb i.p { background: var(--nlp-andamento); }
.mk-bb i.a { background: color-mix(in srgb, var(--text-muted) 45%, transparent); }
.mk-mini-barra { width: 60px; }
.mk-mini-barra i { display: block; height: 6px; border-radius: 3px; background: var(--nlp-abaixo); }
.mk-mini-barra.devol i { background: var(--nlp-perdida); }
.cmp-razoes { margin-bottom: 16px; }
.cmp-razoes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cmp-razao { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.cmp-razao:hover, .cmp-razao:focus-visible { border-color: var(--nlp-perdida); outline: none; }
.cmp-razao.zero { cursor: help; opacity: .7; border-style: dashed; }
.cmp-razao-rot { font-size: .75rem; font-weight: 600; color: var(--text-secondary); }
.cmp-razao > b { font-size: 1.25rem; font-weight: 700; }
.cmp-razao > small { font-size: .6875rem; color: var(--text-muted); }
.cmp-razao-trilho { height: 4px; border-radius: 2px; background: var(--bg-card); overflow: hidden; margin-top: 6px; }
.cmp-razao-trilho i { display: block; height: 100%; background: var(--nlp-perdida); }
.cmp-barra-trilho i.mk-b-nl { background: var(--nlp-ganha); }
.cmp-barra-trilho i.mk-b-out { background: var(--nlp-andamento); }
.cmp-barra-trilho i.mk-b-rec { background: var(--nlp-atendido); }

/* ─── as fichas abrem como painel lateral (a referência de CRM) ─────── */
/* 08/10/2026: TODA janela do painel é o mesmo painel lateral (as listas também) — o que se abre de dentro dela navega
   nela (js/util/navegacaoDoPainel.js); só os diálogos pequenos (período, confirmação) seguem no meio da tela */
body.mka-on .modal-backdrop:has(> .modal:not(.modal-sm)) {
  justify-content: flex-end; padding: 0; background: rgba(15, 18, 40, .28); backdrop-filter: none; }
body.mka-on .modal-backdrop > .modal:not(.modal-sm) {
  width: min(920px, 94vw); max-width: min(920px, 94vw); height: 100vh; max-height: 100vh; border-radius: 0; border-width: 0 0 0 1px; animation: mkaEntraDaDireita .22s ease; }
/* "← Voltar para …", acima do título */
body.mka-on .modal-header:has(.mka-modal-voltar) { flex-wrap: wrap; row-gap: 8px; }
.mka-modal-voltar { order: -1; flex-basis: 100%; display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--color-info); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mka-modal-voltar span { font-size: 1rem; line-height: 1; }
.mka-modal-voltar:hover, .mka-modal-voltar:focus-visible { text-decoration: underline; outline: none; }
.mka-pg-modal[hidden] { display: none; }
.mka-pg-modal.entra { animation: mkaPaginaEntra .18s ease; }
.mka-pg-modal.volta { animation: mkaPaginaVolta .18s ease; }
@keyframes mkaPaginaEntra { from { transform: translateX(24px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes mkaPaginaVolta { from { transform: translateX(-24px); opacity: .3; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mka-pg-modal.entra, .mka-pg-modal.volta { animation: none; } }
@keyframes mkaEntraDaDireita { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }

@media (max-width: 1100px) {
  .mka-app { grid-template-columns: 220px minmax(0, 1fr); }
  .mka-fu-linha { grid-template-columns: 120px minmax(0, 1fr) 200px; gap: 10px; }
  .mka-fu-ps { padding-left: 140px; }
  .mka-duas { grid-template-columns: 1fr; }
  .mka-conteudo, .mka-topo { padding-left: 22px; padding-right: 22px; }
}
@media (prefers-reduced-motion: reduce) { body.mka-on .modal-backdrop > .modal { animation: none; } }

/* o seletor de unidade cabe no menu */
.mka-unid .nlp-unid-btn { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 8px 10px; gap: 10px; }
.mka-unid .nlp-unid-txt { min-width: 0; flex: 1; }
.mka-unid .nlp-unid-txt b { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.mka-unid .nlp-unid-txt small { font-size: .625rem; }
.mka-unid .nlp-marca-u { width: 64px; height: 36px; flex: none; }   /* o logo inteiro (Tiago, 08/10/2026): a caixa tem a largura do logo; o texto vai para a direita */
.mka-unid .nlp-marca-u img { max-width: 56px; max-height: 26px; object-fit: contain; }
.mka-unid .nlp-unid-seta { flex: none; width: 15px; height: 15px; color: var(--text-muted); }
.mka-op-pe span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mka-op-pe span:last-child { flex: none; }

/* 1280 px: os cinco números numa linha; o topo numa linha só */
.mka-cartoes { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.mka-busca { flex: 1 1 240px; max-width: 460px; }
.mka-topo-dir { flex-wrap: nowrap; }
.mka-topo-dir .nlp-frescor, .mka-topo-dir > span { white-space: nowrap; }
@media (max-width: 1320px) { .mka-kpi-v > b { font-size: 1.375rem; } .mka-kpi { padding: 14px 16px; } }
.mka-pipe-setas { margin-left: auto; display: inline-flex; gap: 6px; }
.mka-seta { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border-default); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.mka-seta:disabled { opacity: .35; cursor: default; }
.mka-seta svg { width: 16px; height: 16px; }

/* ─── o topo fixo: a busca e os filtros ficam à mão quando a página rola (Tiago, 07/10) ─── */
.mka-fixo { position: sticky; top: 0; z-index: 6; background: color-mix(in srgb, var(--bg-dark, var(--bg-card)) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); }
.mka-filtros { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 0 36px 12px; }
.mka-filtros .nlp-seg { background: var(--bg-surface); }
.mka-periodo { margin-left: auto; font-size: .75rem; color: var(--text-muted); }
.mka-chips:not([hidden]) { padding: 0 36px 12px; }
.mka-conteudo { padding-top: 24px; }

/* ─── o funil desenhado (a forma da tela de antes) ─────────────────── */
.mka-fu { display: flex; flex-direction: column; }
.mka-fu-linha { display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px 22px; gap: 18px; align-items: center; padding: 4px 10px; border-radius: 12px; cursor: pointer; }
.mka-fu-linha:hover, .mka-fu-linha:focus-visible { background: var(--bg-surface); outline: none; }
.mka-fu-rot { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.mka-fu-rot b { font-size: .9375rem; font-weight: 600; }
.mka-fu-rot small { display: inline-flex; align-items: center; gap: 5px; font-size: .6875rem; color: var(--text-muted); }
.mka-fu-rot small i { width: 8px; height: 8px; border-radius: 2px; }
.mka-fu-rot small i.mkt { background: var(--brand-gold); }
.mka-fu-rot small i.crm { background: var(--color-info); }
.mka-fu-caixa { display: flex; justify-content: center; height: 46px; }
.mka-fu-faixa { height: 100%; }
.mka-fu-faixa.mkt { background: var(--brand-gold); }
.mka-fu-faixa.crm { background: var(--color-info); }
.mka-fu-faixa.ganho { background: var(--nlp-ganha); }
.mka-fu-num { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
.mka-fu-num > b { font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; }
.mka-fu-num > b.ganho { color: var(--color-success); }
.mka-fu-num > small { flex-basis: 100%; font-size: .75rem; color: var(--text-muted); line-height: 1.35; }
.mka-fu-ir { color: var(--text-muted); display: grid; place-items: center; opacity: 0; transition: opacity .12s ease; }
.mka-fu-ir svg { width: 16px; height: 16px; }
.mka-fu-linha:hover .mka-fu-ir, .mka-fu-linha:focus-visible .mka-fu-ir { opacity: 1; }
.mka-fu-degrau { display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px 22px; gap: 18px; min-height: 8px; padding: 0 10px; }
.mka-fu-chip { grid-column: 2; justify-self: center; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 4px 0; padding: 2px 12px; border-radius: var(--radius-full);
  font-size: .75rem; color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-subtle); text-align: center; }
.mka-fu-chip b { color: var(--text-primary); }
.mka-fu-chip .nlp-ajuda { width: 14px; height: 14px; font-size: 9px; }

/* ─── o que abre a lista: o cartão com número e cada passo (Tiago: "clicar e ver todos os clientes") ─── */
.mka-ver { font-style: normal; font-size: .6875rem; font-weight: 600; color: var(--text-muted); opacity: 0; transition: opacity .12s ease; }
.mka-kpi.abre { cursor: pointer; position: relative; transition: border-color .12s ease, box-shadow .12s ease; }
.mka-kpi.abre:hover, .mka-kpi.abre:focus-visible { border-color: var(--border-strong, var(--border-default)); box-shadow: var(--shadow-md); outline: none; }
.mka-kpi .mka-ver { position: absolute; right: 14px; top: 14px; }
.mka-kpi.abre:hover .mka-ver, .mka-kpi.abre:focus-visible .mka-ver { opacity: 1; }
.mk-cas-passos li[data-mk-abrir] { cursor: pointer; outline: 1px solid transparent; transition: outline-color .12s ease; }
.mk-cas-passos li[data-mk-abrir]:hover, .mk-cas-passos li[data-mk-abrir]:focus-visible { outline-color: var(--border-strong, var(--border-default)); }
.mk-cas-passos li[data-mk-abrir] .mka-ver { margin-left: 10px; }
.mk-cas-passos li[data-mk-abrir]:hover .mka-ver, .mk-cas-passos li[data-mk-abrir]:focus-visible .mka-ver { opacity: 1; }
.mka-fu-abs[data-mk-abrir] { cursor: pointer; }
.mka-fu-abs[data-mk-abrir]:hover { box-shadow: inset 0 0 0 1px var(--border-default); }

/* ─── o menu mais compacto: os 18 itens cabem numa tela de notebook ─── */
.mka-side { gap: 10px; padding: 14px 12px 12px; }
.mka-marca { padding: 0 6px; }
.mka-marca-sinal { width: 28px; height: 28px; border-radius: 8px; }
.mka-unid .nlp-unid-btn { padding: 6px 8px; }
.mka-unid .nlp-marca-u { width: 56px; height: 30px; }
.mka-nav { gap: 8px; }
.mka-grupo-rot { padding: 0 10px 2px; font-size: .625rem; }
.mka-item { padding: 6px 10px; font-size: .8125rem; gap: 9px; }
.mka-item svg { width: 16px; height: 16px; }
.mka-side-pe { gap: 4px; padding-top: 8px; }
.mka-voltar { padding: 8px 10px; }
.mka-nav { scrollbar-width: thin; }

@media (max-width: 1100px) {
  .mka-fu-linha, .mka-fu-degrau { grid-template-columns: 130px minmax(0, 1fr) 190px 16px; gap: 10px; }
  .mka-filtros, .mka-chips:not([hidden]) { padding-left: 22px; padding-right: 22px; }
}

/* ─── a ficha do cliente: o cabeçalho alinhado e um bloco por atendimento (Tiago, 07/10) ─── */
/* o texto quebra na coluna dele; o link e o botão ficam juntos à direita, no meio da altura (08/10/2026: a idade e o
   estado alongaram a linha e o botão caía para baixo) */
body.mka-on .ficha-cab { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px 16px; margin-bottom: 14px; }
body.mka-on .ficha-cab > p { margin: 0 !important; line-height: 1.4; flex: 1 1 auto; min-width: 0; }
body.mka-on .ficha-cab > .nlp-link { margin: 0; line-height: 1.4; flex: none; white-space: nowrap; }
body.mka-on .ficha-cab > .btn { margin-left: 0; flex: none; white-space: nowrap; }
.ficha-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ficha-atend { border: 1px solid var(--border-subtle); border-left: 4px solid var(--nlp-andamento); border-radius: 12px; background: var(--bg-card); overflow: hidden; }
.ficha-atend.ganha { border-left-color: var(--nlp-ganha); }
.ficha-atend.perdida, .ficha-atend.nao-logrado { border-left-color: var(--nlp-perdida); }
.ficha-atend.logrado { border-left-color: var(--nlp-atendido); }
.ficha-atend.encerrada { border-left-color: var(--text-muted); }
.ficha-atend.ficha-destaque { box-shadow: 0 0 0 2px color-mix(in srgb, var(--nlp-abaixo) 55%, transparent); }
.ficha-atend-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 12px 14px; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
.ficha-atend-n { flex-basis: 100%; font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.ficha-atend-cab > b { font-size: .875rem; }
.ficha-atend-sit { font-size: .6875rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--nlp-andamento) 14%, transparent); color: var(--text-primary); }
.ficha-atend-sit.ganha { background: color-mix(in srgb, var(--nlp-ganha) 18%, transparent); }
.ficha-atend-sit.perdida, .ficha-atend-sit.nao-logrado { background: color-mix(in srgb, var(--nlp-perdida) 16%, transparent); }
.ficha-atend-sit.logrado { background: color-mix(in srgb, var(--nlp-atendido) 18%, transparent); }
.ficha-atend-v { margin-left: auto; font-size: .9375rem; font-weight: 700; }
.ficha-atend-cab > small { flex-basis: 100%; font-size: .75rem; color: var(--text-secondary); }
.ficha-atend-passos { padding: 12px 14px 0 !important; }
.ficha-solto > .nlp-lt { padding-left: 2px; }
.ficha-solto > .nlp-lt > li { padding-bottom: 0; }

/* ─── Perdas: as análises filtram a lista; a lista tem o caminho de cada perda (Tiago, 07/10) ─── */
.mka-perdas > * + * { margin-top: 18px; }
.mka-perdas .mka-cartoes { margin-top: 0; }
.mka-barras { display: flex; flex-direction: column; gap: 2px; }
.mka-barra { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(120px, 210px) minmax(0, 1fr) 46px 44px; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: .8125rem; }
.mka-barra:hover, .mka-barra:focus-visible { background: var(--bg-surface); }
.mka-barra.ativa { background: color-mix(in srgb, var(--nlp-perdida) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nlp-perdida) 40%, transparent); }
.mka-barra.estatica { cursor: default; }
.mka-barra.estatica:hover { background: none; }
.mka-barra-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.mka-barra-trilho { height: 8px; border-radius: 4px; background: var(--bg-surface); overflow: hidden; }
.mka-barra-trilho i { display: block; height: 100%; border-radius: 4px; background: var(--nlp-perdida); }
.mka-barra > b { text-align: right; font-weight: 700; }
.mka-barra > small { text-align: right; font-size: .75rem; color: var(--text-muted); }
.mka-pd-tempo .mka-barra { grid-template-columns: 130px minmax(0, 1fr) 40px 120px; }
.cmp-razao.ativa, .mka-pd-tipo.ativa, .nlp-mini tr.ativa td { background: color-mix(in srgb, var(--nlp-perdida) 10%, transparent); }
.cmp-razao.ativa, .mka-pd-tipo.ativa { border-color: color-mix(in srgb, var(--nlp-perdida) 55%, transparent); }
.mka-pd-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.mka-pd-tipo { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; cursor: pointer; background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.mka-pd-tipo:hover, .mka-pd-tipo:focus-visible { border-color: var(--border-strong, var(--border-default)); }
.mka-pd-tipo > span { font-size: .75rem; font-weight: 600; color: var(--text-secondary); }
.mka-pd-tipo > b { font-size: 1.25rem; font-weight: 700; }
.mka-pd-tipo > small { font-size: .75rem; color: var(--text-muted); }
.mka-pd-acoes { display: inline-flex; align-items: center; gap: 12px; }
.mka-pd-acoes b { font-size: .8125rem; font-weight: 600; color: var(--text-secondary); }
.mka-pd-lista { scroll-margin-top: 140px; }
.mka-pd-tab td { vertical-align: top; }
.mka-pd-tab td small { display: block; font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.mka-pd-cli { min-width: 320px; }
.mka-caminho { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 6px; font-size: .6875rem; color: var(--text-secondary); }
.mka-caminho > span { padding: 1px 7px; border-radius: 5px; background: var(--bg-surface); border: 1px solid var(--border-subtle); white-space: nowrap; }
.mka-caminho > span i { font-style: normal; color: var(--text-muted); }
.mka-caminho > span.fim { background: color-mix(in srgb, var(--nlp-perdida) 10%, transparent); border-color: color-mix(in srgb, var(--nlp-perdida) 35%, transparent); }
.mka-caminho > span.sem { border-style: dashed; color: var(--text-muted); }
.mka-caminho > em { font-style: normal; color: var(--text-muted); }
.mka-razao { font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--nlp-perdida) 10%, transparent); white-space: nowrap; }
.mka-mais { margin: 12px auto 0; display: flex; }
.mka-pd-kpis .mka-kpi.abre[data-mk-pf=""] .mka-ver { display: none; }
.mka-duas > .mka-card { margin-top: 0 !important; }
.mka-pd-kpis .mka-kpi:last-child .mka-kpi-v > b { font-size: 1.125rem; line-height: 1.25; }

/* ─── a etapa do funil abre um resumo (Tiago, 07/10): os cartões dela e "Ver tudo" leva à página do menu ─── */
.mka-fu-linha .mka-fu-ir { opacity: .55; transition: transform .2s ease, opacity .12s ease; }
.mka-fu-linha:hover .mka-fu-ir, .mka-fu-linha.aberta .mka-fu-ir { opacity: 1; }
.mka-fu-linha.aberta { background: var(--bg-surface); }
.mka-fu-linha.aberta .mka-fu-ir { transform: rotate(180deg); color: var(--text-primary); }
.mka-fu-pn { margin: 6px 0 16px; padding: 18px 20px; border-radius: 12px; background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.mka-fu-pn.anima { animation: mkaAbre .18s ease; }   /* só no clique que abre: os redesenhos dos números não piscam */
.mka-fu-pn .mka-cartoes { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.mka-fu-pn .mka-kpi { box-shadow: none; }
.mka-fu-pn-nota { margin: 10px 0 0; font-size: .8125rem; color: var(--text-secondary); }
.mka-fu-pn-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.mka-fu-pn-pe > span { font-size: .8125rem; color: var(--text-muted); max-width: 70ch; }
.mka-fu-pn-pe .btn { display: inline-flex; align-items: center; gap: 6px; }
@keyframes mkaAbre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) { .mka-fu-pn-corpo { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mka-fu-pn.anima { animation: none; } }

/* ─── o clique nos nomes: consultor e newsletter (07/10/2026, js/util/linksDoPainel.js) ─── */
/* o mesmo traço do nome do cliente (.ficha-link): sublinhado pontilhado, que acende ao passar o mouse */
.mk-link { cursor: pointer; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; border-radius: 3px; }
.mk-link:hover, .mk-link:focus-visible { text-decoration-color: currentColor; color: var(--color-info); outline: none; }
.mk-link .mka-chip, .mk-link .nlp-chip { cursor: pointer; }
.mk-link:hover .mka-chip, .mk-link:hover .nlp-chip, .mk-link:focus-visible .mka-chip, .mk-link:focus-visible .nlp-chip { border-color: var(--color-info); color: var(--color-info); }
.mk-link .nlp-cod { text-decoration: inherit; }

/* a ficha da newsletter */
.mk-nlf-cab { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.mk-nlf-cab .mk-arte.mini { width: 72px; height: 72px; flex: none; }
.mk-nlf-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.nlp-cf-card.estatico { cursor: default; border-top-color: var(--nlp-mc, var(--text-muted)); }
.nlp-cf-card.estatico:hover { box-shadow: none; border-color: transparent; }
.nlp-cf-card.semconv { border-top-color: var(--nlp-abaixo); }
.nlp-cf-card.aberta { border-top-color: var(--nlp-andamento); }
.nlp-cf-st.conversa, .nlp-cf-st.clique { background: var(--bg-surface); color: var(--text-secondary); }

/* ─── o que a carga passou a trazer do CRM (07/10/2026) ─── */
/* barras de porcentagem (a base no CRM) */
.cmp-pct { display: grid; grid-template-columns: 150px 1fr 48px 72px; align-items: center; gap: 10px; padding: 5px 0; font-size: .8125rem; }
.cmp-pct-rot { color: var(--text-secondary); }
.cmp-pct-trilho { height: 8px; border-radius: 999px; background: var(--bg-surface); overflow: hidden; }
.cmp-pct-trilho i { display: block; height: 100%; border-radius: inherit; background: var(--nlp-andamento); }
.cmp-pct b { text-align: right; }
.cmp-pct small { text-align: right; color: var(--text-muted); }
/* contas novas por mês */
.cmp-leads-barra { display: inline-block; width: 90px; height: 8px; border-radius: 999px; background: var(--bg-surface); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.cmp-leads-barra i { display: block; height: 100%; background: var(--nlp-andamento); border-radius: inherit; }
/* o perfil de quem comprou */
.cmp-perfil-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.cmp-perfil-cab, .cmp-perfil-linha { display: grid; grid-template-columns: 110px 1fr 72px 96px 84px; align-items: center; gap: 10px; }
.cmp-perfil-cab { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 4px 0 6px; border-bottom: 1px solid var(--border-subtle); }
.cmp-perfil-linha { padding: 7px 0; font-size: .8125rem; border-bottom: 1px solid var(--border-subtle); }
.cmp-perfil-linha:last-child { border-bottom: 0; }
.cmp-perfil-cab .n, .cmp-perfil-linha .n { text-align: right; }
.cmp-perfil-rot { font-weight: 600; }
.cmp-perfil-linha .cmp-pct-trilho i { background: var(--nlp-ganha); }
/* a ficha do cliente: idade e estado */
.ficha-perfil { color: var(--text-primary); font-weight: 600; }
/* "Dados que faltam": o que já chegou do CRM, no topo */
.mka-chegou { margin-bottom: 28px; }
.mka-chegou h2, .mka-faltas-tit { font-size: 1rem; font-weight: 700; margin: 0 0 12px; }
.mka-chegou h2 small { font-weight: 500; color: var(--text-muted); font-size: .8125rem; margin-left: 6px; }
.mka-chegou-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mka-chegou-item { text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-subtle); border-left: 3px solid var(--nlp-ganha); background: var(--bg-card); transition: box-shadow .15s; }
.mka-chegou-item:hover, .mka-chegou-item:focus-visible { box-shadow: var(--shadow-sm); outline: none; }
.mka-chegou-item b { font-size: .875rem; }
.mka-chegou-item span { font-size: .8125rem; color: var(--text-secondary); line-height: 1.45; }
.mka-chegou-item em { font-style: normal; font-size: .8125rem; font-weight: 600; color: var(--color-info); margin-top: auto; }
.cmp-perfil-linha[data-mk-abrir] { cursor: pointer; border-radius: 6px; }
.cmp-perfil-linha[data-mk-abrir]:hover, .cmp-perfil-linha[data-mk-abrir]:focus-visible { background: var(--bg-surface); outline: none; }
/* Ticket médio (08/10/2026): as tabelas por consultor, área, destino, origem e produto; a linha vertical = o ticket médio geral */
.cmp-tk-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 16px; }
.cmp-tk-cab, .cmp-tk-linha { display: grid; grid-template-columns: minmax(120px, 1.3fr) minmax(56px, 1fr) 54px 92px 92px; align-items: center; gap: 10px; }
.cmp-tk-cab { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 4px 0 6px; border-bottom: 1px solid var(--border-subtle); }
.cmp-tk-linha { padding: 7px 0; font-size: .8125rem; border-bottom: 1px solid var(--border-subtle); cursor: pointer; border-radius: 6px; }
.cmp-tk-linha:last-of-type { border-bottom: 0; }
.cmp-tk-linha:hover, .cmp-tk-linha:focus-visible { background: var(--bg-surface); outline: none; }
.cmp-tk-cab .n, .cmp-tk-linha .n { text-align: right; }
.cmp-tk-rot { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-tk-trilho { position: relative; height: 8px; border-radius: 999px; background: var(--bg-surface); }
.cmp-tk-trilho i { display: block; height: 100%; border-radius: inherit; background: var(--nlp-ganha); }
.cmp-tk-trilho s, .cmp-tk-legenda s { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; background: var(--text-primary); border-radius: 1px; }
.cmp-tk-legenda { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; }
.cmp-tk-legenda s { position: relative; top: 0; margin: 0; }
.cmp-tk-ordem { margin: 0 0 12px; font-size: .8125rem; }
.cmp-tk-ordem .nlp-link[aria-pressed="true"] { color: var(--text-primary); font-weight: 700; text-decoration: none; }
.cmp-tk-mais { margin-top: 8px; font-size: .8125rem; }
@media (max-width: 1100px) { .cmp-tk-grade { grid-template-columns: 1fr; } }

/* ─── o resumo da etapa (08/10/2026): centrado na linha, os cartões e os destaques lado a lado ─── */
.mka-fu-pn-corpo { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.mka-fu-pn.com-dest .mka-fu-pn-corpo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.mka-fu-pn.com-dest .mka-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mka-dest { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px 16px; }
.mka-dest h3 { margin: 0 0 8px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.mka-dest ol { list-style: none; margin: 0; padding: 0; }
.mka-dest li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-subtle); font-size: .8125rem; }
.mka-dest li:first-child { border-top: 0; }
.mka-dest-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-surface); font-size: .6875rem; font-weight: 700; color: var(--text-secondary); }
.mka-dest-rot { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mka-dest-ass { color: var(--text-muted); }
.mka-dest-v { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.mka-dest-v b { font-size: .875rem; white-space: nowrap; }
.mka-dest-v small { font-size: .6875rem; color: var(--text-muted); white-space: nowrap; }

/* "← Voltar para …" acima do título da página */
.mka-pg-voltar { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 5px 12px 5px 9px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-secondary); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; }
.mka-pg-voltar[hidden] { display: none; }
.mka-pg-voltar svg { width: 15px; height: 15px; }
.mka-pg-voltar:hover, .mka-pg-voltar:focus-visible { color: var(--text-primary); border-color: var(--color-info); outline: none; }

/* o topo fixo ao rolar: um pouco mais escuro e puxado para o azul, com sombra (Tiago, 08/10/2026) */
.mka-fixo { transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease; }
.mka-fixo.rolado { background: color-mix(in srgb, #1e3a8a 9%, var(--bg-card)); border-bottom-color: color-mix(in srgb, #1e3a8a 22%, var(--border-subtle)); box-shadow: 0 6px 18px -10px rgba(30, 58, 138, .35); }
.mka-fixo.rolado .nlp-seg, .mka-fixo.rolado .mka-busca { background: color-mix(in srgb, #1e3a8a 5%, var(--bg-card)); }
:root[data-theme="dark"]:not([data-palette="portal"]) .mka-fixo.rolado { background: color-mix(in srgb, #3b5bdb 16%, var(--bg-card)); }
.mk-sobe { color: var(--color-success); font-weight: 600; }
.mk-desce { color: var(--color-danger, #d64545); font-weight: 600; }

/* ─── contraste (08/10/2026, Tiago: "verificar tudo que está com erro de contraste em fundo branco") ─── */
/* os chips de filtro da tela Comercial nasceram para a barra azul-escura (texto branco): no topo claro, sumiam */
.mka-chips .cmp-chip { background: color-mix(in srgb, var(--color-info) 10%, var(--bg-card)); color: var(--text-primary); border: 1px solid color-mix(in srgb, var(--color-info) 35%, var(--border-subtle)); font-weight: 600; }
.mka-chips .cmp-chip button { background: var(--bg-surface); color: var(--text-secondary); }
.mka-chips .cmp-chip button:hover, .mka-chips .cmp-chip button:focus-visible { background: var(--border-subtle); color: var(--text-primary); }
/* o "← Voltar" do painel: azul escuro o bastante para o fundo branco */
:is(:root[data-theme="light"], :root[data-palette="portal"]) .mka-modal-voltar { color: color-mix(in srgb, var(--color-info) 55%, #0b1736); }
:root:not([data-theme="light"]):not([data-palette="portal"]) .mka-modal-voltar { color: #7dd3fc; }   /* no escuro, o azul-céu claro */
/* As cores de estado usadas como TEXTO, mais escuras no tema claro (o verde #22c55e, o azul-céu, o laranja e o vermelho
   ficavam entre 1,5 e 3,4:1 sobre branco e sobre os fundos tingidos). Vale no painel e nas janelas dele; as barras e as
   bolinhas que já resolvem a cor na raiz (--nlp-*) não mudam. Mínimo pedido: 4,5:1 (3:1 no texto grande). */
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on {
  --text-muted: #556275;
  --color-success: #15803d;
  --color-danger: #b42318;
  --color-info: #0369a1;
  --color-warning: #b45309;
}
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .nlp-ganho, :is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .mk-sobe, :is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .nlp-delta.bom, :is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .cmp-sla-no.ganha, :is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .mka-fu-num > b.ganho { color: #15803d; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .nlp-delta.ruim, :is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .mk-desce { color: #b42318; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .mk-falta-st.acesso, :is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .mka-chegou-item em { color: #0369a1; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .mk-falta-st.definir, :is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .nlp-sit.sem { color: #b4400c; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .cmp-razao.zero { opacity: 1; color: var(--text-muted); }
/* Análises da equipe: as cores de impacto e de tipo vêm escritas no componente (js/components/insightsPanel.js) */
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on [style*="#F59E0B" i] { color: #92400e !important; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on [style*="#EF4444" i] { color: #b42318 !important; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on [style*="#38BDF8" i], :is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on [style*="56, 189, 248" i] { color: #075985 !important; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on [style*="#3B82F6" i] { color: #1d4ed8 !important; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on [style*="#22C55E" i] { color: #15803d !important; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on [style*="#94A3B8" i] { color: #556275 !important; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on [style*="#10B981" i], :is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on [style*="16, 185, 129" i], :is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on [style*="16, 185, 129" i] { color: #047857 !important; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on [style*="#A78BFA" i] { color: #6d28d9 !important; }
/* as análises de outro período vinham a 0,7 de opacidade (js/components/insightsPanel.js): o texto caía para ~3:1 */
body.mka-on [style*="opacity:0.7"] { opacity: 1 !important; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .nlp-delta.bom { color: #166534; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .nlp-cf-parada { color: #b42318; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on [style*="color:var(--color-success)"] { color: #166534 !important; }   /* "Recomendação:" sobre o verde claro das análises */
/* 08/10/2026 (auditoria de contraste com a página Ticket médio): o laranja do abandono na ficha do cliente (#EA580C, 3,6:1 no
   branco) e o verde "Venda" do SLA sobre o cinza do passo (4,4:1) */
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .nlp-lt li.abandono .nlp-lt-tit, :is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .ficha-sem-conversa { color: #c2410c; }
:is(:root[data-theme="light"], :root[data-palette="portal"]) body.mka-on .cmp-sla-no.ganha { color: #166534; }

/* "VOLTAR AO GESTOR" SEMPRE À VISTA (Tiago, 08/10/2026): o painel lateral escurece só o conteúdo — o menu (e o botão de
   sair) continuam visíveis e clicáveis; usar o menu fecha o painel */
body.mka-on .modal-backdrop:has(> .modal:not(.modal-sm)) { left: 256px; }
@media (max-width: 1100px) { body.mka-on .modal-backdrop:has(> .modal:not(.modal-sm)) { left: 220px; } }
body.mka-on .modal-backdrop:has(> .modal:not(.modal-sm)) > .modal { max-width: min(920px, calc(100vw - 256px)); }
.mka-side-pe { flex: none; }

/* NO TEMA ESCURO (08/10/2026, a validação do escuro): o cinza secundário do tema ficava em 4,2:1 sobre os cartões (o mínimo
   é 4,5); o vermelho das variações e as cores escritas nas análises, abaixo de 4 sobre os fundos tingidos. Medido em 40
   telas (contraste.cjs do protótipo, TEMA=dark). */
:root:not([data-theme="light"]):not([data-palette="portal"]) body.mka-on { --text-muted: #8296b8; }
:root:not([data-theme="light"]):not([data-palette="portal"]) body.mka-on .nlp-delta.ruim, :root:not([data-theme="light"]):not([data-palette="portal"]) body.mka-on .mk-desce { color: #fb7185; }
:root:not([data-theme="light"]):not([data-palette="portal"]) body.mka-on .nlp-cf-parada { color: #fca5a5; }   /* a parada do SLA (#E04848, 4,3:1 no cartão) */
:root:not([data-theme="light"]):not([data-palette="portal"]) body.mka-on .nlp-sit.sem { color: #fdba74; }   /* "Sem oportunidade" sobre a linha tingida (4,4:1) */
:root:not([data-theme="light"]):not([data-palette="portal"]) body.mka-on [style*="#3B82F6" i] { color: #93c5fd !important; }
:root:not([data-theme="light"]):not([data-palette="portal"]) body.mka-on [style*="#EF4444" i] { color: #fca5a5 !important; }
body.mka-on .cmp-razao.zero { opacity: 1; }   /* a razão sem perdas continua legível nos dois temas (o tracejado já diz "nenhuma") */
/* "Critérios usados", no pé de "Dados que faltam" (08/10/2026) */
.mka-criterios { margin-top: 32px; }
.mka-criterios h2 { font-size: 1rem; font-weight: 700; margin: 0 0 12px; }
.mka-criterios h2 small { font-weight: 500; color: var(--text-muted); font-size: .8125rem; margin-left: 6px; }
.mka-criterios dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; margin: 0; }
.mka-criterios dl > div { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--bg-card); }
.mka-criterios dt { font-size: .875rem; font-weight: 700; margin-bottom: 6px; }
.mka-criterios dd { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--text-secondary); }
/* os campos por trás do número, no "de onde vem" (08/10/2026, Renê: "que ele cite o ID e o Alias do campo") */
.cmp-orig-campos { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cmp-campo { display: inline-flex; align-items: baseline; gap: 6px; font-size: .8125rem; }
.cmp-campo b { font-weight: 600; }
.cmp-campo code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; padding: 1px 6px; border-radius: 5px; background: var(--bg-surface); color: var(--text-secondary); }

/* O RESUMO DO HUB (09/10/2026, prancha aprovada): o funil com o que pede atenção ao lado; embaixo, os números de atendimento */
.mka-resumo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.mka-atencao ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mka-atencao li button { width: 100%; display: grid; grid-template-columns: 8px minmax(0, 1fr) 16px; gap: 10px; align-items: center; padding: 9px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--text-primary); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.mka-atencao li button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-warning); }
.mka-atencao li button:hover, .mka-atencao li button:focus-visible { background: var(--bg-surface); outline: none; }
.mka-atencao li button svg { width: 16px; height: 16px; color: var(--text-muted); }
.mka-atencao-vazio { margin: 0; font-size: .875rem; color: var(--text-secondary); }
.mka-rodape { margin-top: 16px; }
@media (max-width: 1100px) { .mka-resumo { grid-template-columns: minmax(0, 1fr); } }

/* O CELULAR EM MODO CONSULTA (09/10/2026, decisão P7 do hub). Até aqui a casca não tinha layout abaixo de 1.100 px: no
   celular o menu lateral ficava com dois terços da tela e o conteúdo com 158 px. Abaixo de 760 px o menu vira uma faixa
   no topo (as páginas numa linha que rola de lado), e o conteúdo usa a largura toda: ler, filtrar e abrir. */
@media (max-width: 760px) {
  .mka-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .mka-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .mka-marca small, .mka-side-pe [data-mk-pg] { display: none; }
  .mka-marca { flex: 1 1 auto; min-width: 0; padding: 0; }
  .mka-unid { flex: 1 1 100%; order: 3; }
  .mka-nav { order: 4; flex: 1 1 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 4px; margin: 0; padding: 0 0 4px; }
  .mka-grupo { flex-direction: row; gap: 4px; flex: none; }
  .mka-grupo-rot { display: none; }
  .mka-item { width: auto; white-space: nowrap; padding: 6px 10px; }
  .mka-side-pe { order: 2; flex-direction: row; padding: 0; border-top: 0; }
  .mka-topo, .mka-filtros, .mka-chips:not([hidden]) { padding-left: 16px; padding-right: 16px; }
  .mka-conteudo { padding: 18px 16px 60px; }
  .mka-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mka-fu-linha, .mka-fu-degrau { grid-template-columns: 92px minmax(0, 1fr) 118px 0; gap: 8px; }
  .mka-fu-num > b { font-size: 1.125rem; }
  /* o "i" fica redondo: a regra de toque do responsive.css esticava o botão para 44 px de altura */
  .mka-app .nlp-ajuda { min-height: 0; min-width: 0; }
  /* a busca e os filtros rolam com a página: fixos, comiam metade da tela do celular */
  .mka-fixo { position: static; }
}

/* VÁRIAS UNIDADES (09/10/2026): no menu de unidades, a linha escolhe só ela; o "+" soma às escolhidas */
.mka-unid-linha { display: flex; align-items: center; gap: 4px; padding-right: 6px; }
.mka-unid-linha .nlp-unid-op { flex: 1; min-width: 0; }
.mka-unid-mais { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.mka-unid-mais:hover, .mka-unid-mais:focus-visible { background: var(--bg-surface); color: var(--text-primary); outline: none; }
.mka-unid-mais[aria-pressed="true"] { background: var(--brand-gold); border-color: var(--brand-gold); color: var(--on-gold); }
/* no celular, o menu de unidades cabe na tela (antes: 449 px numa tela de 390, o valor cortado e o "+" fora): a largura do
   seletor, o valor de cada unidade quebra à direita do nome, e o "+" com área de toque maior */
@media (max-width: 760px) {
  .mka-unid .nlp-unid-menu { right: 0; min-width: 0; }
  .mka-unid .nlp-unid-op { gap: 8px; padding-right: 4px; }
  .mka-unid .nlp-unid-txt { min-width: 0; }
  .mka-unid .nlp-unid-op .nlp-unid-txt b { white-space: normal; }
  .mka-unid .nlp-unid-n { flex: 0 1 34%; white-space: normal; text-align: right; }
  .mka-unid-mais { width: 36px; height: 36px; }
}