/* Tráfego Pago — UI responsiva, 03/11/2026. Somente apresentação. */
#view-crmmeta .cmx{max-width:none;width:100%;min-width:0;box-sizing:border-box}
#view-crmmeta .cmx-quadro,#view-crmmeta .cmx-corpo{min-width:0}
#view-crmmeta .cmx-abas.cmx-nav-grupos{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:4px 0 0;overflow:visible;mask-image:none;-webkit-mask-image:none}
#view-crmmeta .cmx-nav-linha{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:start;gap:12px}
#view-crmmeta .cmx-nav-rotulo{padding-top:12px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c700)}
#view-crmmeta .cmx-nav-itens{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
#view-crmmeta .cmx-nav-itens .cmx-aba{height:auto;min-height:38px;margin:0;padding:8px 12px;font-size:13px;white-space:normal}
#view-crmmeta .cmx-nav-itens .cmx-aba .cmx-ic{width:17px;height:17px;flex-shrink:0}
#view-crmmeta .cmx-nav-itens .cmx-aba em{font-size:11px;min-width:22px;padding:3px 6px}
#view-crmmeta .cmx-barra{flex-wrap:wrap;min-width:0;margin-top:18px;gap:8px}
#view-crmmeta .cmx-barra>*{max-width:100%;box-sizing:border-box}
#view-crmmeta .cmx-res{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));align-items:stretch;gap:14px}
#view-crmmeta .cmx-res__i{min-width:0}
#view-crmmeta .cmx-res__i>small{display:block;-webkit-line-clamp:unset;overflow:visible;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
#view-crmmeta .cmx-res__v{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;min-width:0}
#view-crmmeta .cmx-res__v>b{overflow-wrap:anywhere}
#view-crmmeta .cmx-menu.cmx-menu-ajustado{position:fixed!important;right:auto!important;bottom:auto!important;box-sizing:border-box;min-width:0;max-width:calc(100vw - 24px);overflow-y:auto;overscroll-behavior:contain;z-index:1000;transform:none!important;animation:none!important}
#view-crmmeta [data-dd="periodo"] .cmx-menu.cmx-menu-ajustado{grid-template-columns:168px minmax(0,1fr)}
#view-crmmeta .cmx-datas__acoes{position:sticky;bottom:0;background:var(--branco,#fff);z-index:2}
#view-crmmeta .cmx-tbl{scrollbar-width:thin;scrollbar-color:var(--ouro,#a58546) transparent}
#view-crmmeta .cmx-cria.cmx-midia-indisponivel{display:inline-flex;align-items:center;justify-content:center;width:64px;min-height:56px;padding:4px;box-sizing:border-box;border:1px solid var(--linha);border-radius:8px;font-size:10px;line-height:1.3;color:var(--c700);text-align:center}
#view-crmmeta .cmx-midia-indisponivel img{display:none}
@media(max-width:760px){
 #view-crmmeta .cmx-nav-linha{grid-template-columns:1fr;gap:4px}
 #view-crmmeta .cmx-nav-rotulo{padding-top:6px;font-size:9px}
 #view-crmmeta .cmx-nav-itens{gap:4px}
 #view-crmmeta .cmx-nav-itens .cmx-aba{padding:7px 9px;font-size:12px;min-height:36px}
 #view-crmmeta .cmx-res{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
 #view-crmmeta [data-dd="periodo"] .cmx-menu.cmx-menu-ajustado{display:block;width:calc(100vw - 24px);max-width:380px}
 #view-crmmeta .cmx-datas__acoes{padding:10px 6px;border-top:1px solid var(--linha)}
}

/* Navegação explícita: títulos de grupo e botões reconhecíveis. */
#view-crmmeta .cmx-nav-ajuda{margin:8px 0 12px;font-size:12px;font-weight:500;color:var(--c700)}
#view-crmmeta .cmx-nav-linha{grid-template-columns:170px minmax(0,1fr);padding:8px 0}
#view-crmmeta .cmx-nav-linha+.cmx-nav-linha{border-top:1px solid var(--linha)}
#view-crmmeta .cmx-nav-rotulo{font-size:11px;line-height:1.5;letter-spacing:.03em}
#view-crmmeta .cmx-nav-itens .cmx-aba{border:1px solid var(--linha);border-radius:9px;background:var(--branco,#fff);cursor:pointer;min-height:42px;color:var(--text-strong,#28241f);transition:background .15s,border-color .15s}
#view-crmmeta .cmx-nav-itens .cmx-aba:hover{border-color:var(--ouro,#a58546);background:var(--floral,#f4efe4)}
#view-crmmeta .cmx-nav-itens .cmx-aba.on{background:var(--ouro-btn,#896b2b);color:#fff;border-color:var(--ouro-btn,#896b2b)}
#view-crmmeta .cmx-nav-itens .cmx-aba.on .cmx-ic{color:inherit}
#view-crmmeta .cmx-nav-itens .cmx-aba:focus-visible{outline:2px solid var(--ouro,#a58546);outline-offset:3px}
@media(max-width:760px){#view-crmmeta .cmx-nav-linha{grid-template-columns:1fr;padding:6px 0}#view-crmmeta .cmx-nav-rotulo{padding:0}#view-crmmeta .cmx-nav-itens .cmx-aba{min-height:40px}}

/* Alinhamento aprovado: distância simétrica dos botões às divisórias. */
#view-crmmeta .cmx-abas.cmx-nav-grupos{gap:0}
#view-crmmeta .cmx-nav-linha{padding:16px 0;align-items:center}
#view-crmmeta .cmx-nav-rotulo{padding-top:0}
@media(max-width:760px){#view-crmmeta .cmx-nav-linha{padding:14px 0;align-items:start;gap:8px}}

/* Interação v8: estados consistentes, sem keyframes legados de fundo. */
#view-crmmeta .cmx-nav-itens .cmx-aba{
 animation:none!important;opacity:1!important;transform:none!important;
 transition:border-color .12s ease,box-shadow .12s ease!important;
 background:var(--branco,#fff)!important;color:var(--text-strong,#28241f)!important;
 -webkit-tap-highlight-color:transparent;
}
#view-crmmeta .cmx-nav-itens .cmx-aba::after{content:none!important;animation:none!important}
#view-crmmeta .cmx-nav-itens .cmx-aba .cmx-aba__t,
#view-crmmeta .cmx-nav-itens .cmx-aba .cmx-ic{color:inherit!important;transition:none!important;opacity:1!important}
@media(hover:hover){
 #view-crmmeta .cmx-nav-itens .cmx-aba:not(.on):hover{background:var(--floral,#f4efe4)!important;color:var(--text-strong,#28241f)!important;border-color:var(--ouro,#a58546)}
}
#view-crmmeta .cmx-nav-itens .cmx-aba.on,
#view-crmmeta .cmx-nav-itens .cmx-aba.on:hover,
#view-crmmeta .cmx-nav-itens .cmx-aba.on:focus,
#view-crmmeta .cmx-nav-itens .cmx-aba.on:active{
 background:var(--ouro-btn,#896b2b)!important;color:#fff!important;border-color:var(--ouro-btn,#896b2b)!important;
}
#view-crmmeta .cmx-nav-itens .cmx-aba:active{box-shadow:inset 0 0 0 2px rgba(80,60,20,.15)}
#view-crmmeta .cmx-nav-itens .cmx-aba:focus:not(:focus-visible){outline:none}
#view-crmmeta .cmx-nav-itens .cmx-aba:focus-visible{outline:2px solid var(--ouro,#a58546);outline-offset:3px}

/* Um container para os três grupos de navegação — Higor 03/11. */
#view-crmmeta .cmx-abas.cmx-nav-grupos{
 box-sizing:border-box;width:100%;padding:4px 20px;
 border:1px solid var(--linha,#e3e4e6);border-radius:14px;
 background:var(--branco,#fff);box-shadow:0 2px 6px rgba(40,36,31,.035);
}
@media(max-width:760px){#view-crmmeta .cmx-abas.cmx-nav-grupos{padding:2px 14px;border-radius:12px}}

/* Microtransições v10 — mantém a seleção legível em cada quadro. */
#view-crmmeta :is(.cmx-btn,.cmx-chip,.cmx-menu__it,.cmx-cal__nav,.cmx-cal__d,.cmx-indice button,.cmx-mais button,.cmx-ler,.cmx-link,button.cmx-ajuda){transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease}
#view-crmmeta .cmx-nav-itens .cmx-aba{transition:border-color .16s ease,box-shadow .16s ease,transform .12s ease!important}
#view-crmmeta .cmx-nav-itens .cmx-aba:not(.on){transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease!important}
#view-crmmeta .cmx-nav-itens .cmx-aba:active{transform:translateY(1px)!important;box-shadow:inset 0 1px 3px rgba(40,36,31,.16)}
#view-crmmeta :is(.cmx-btn,.cmx-chip,.cmx-cal__nav,.cmx-indice button,.cmx-mais button,.cmx-ler):active{transform:translateY(1px)}
#view-crmmeta :is(button,input,select,summary,[tabindex="0"]):focus-visible{outline:2px solid var(--ouro-deep,#765818);outline-offset:3px}
#view-crmmeta .cmx-busca:focus-within{border-color:var(--ouro,#a58546);box-shadow:0 0 0 3px rgba(165,133,70,.12);transition:border-color .16s ease,box-shadow .16s ease}
#view-crmmeta .cmx-tbl tbody tr td{transition:background-color .14s ease}
#view-crmmeta .cmx-corpo.cmx-troca{animation:cmxConteudoSuave .18s ease-out}
@keyframes cmxConteudoSuave{from{transform:translateY(3px)}to{transform:none}}
@media(hover:hover){
 #view-crmmeta .cmx-nav-itens .cmx-aba:hover{box-shadow:0 2px 5px rgba(40,36,31,.08)}
 #view-crmmeta :is(.cmx-btn,.cmx-chip,.cmx-cal__nav,.cmx-indice button,.cmx-mais button,.cmx-ler):hover{box-shadow:0 2px 5px rgba(40,36,31,.06)}
}
@media(prefers-reduced-motion:reduce){
 #view-crmmeta *,#view-crmmeta *::before,#view-crmmeta *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 #view-crmmeta .cmx-nav-itens .cmx-aba:active,#view-crmmeta :is(.cmx-btn,.cmx-chip,.cmx-cal__nav,.cmx-indice button,.cmx-mais button,.cmx-ler):active{transform:none!important}
}

/* Cabeçalho móvel somente na rota de Tráfego Pago: busca sem sobrepor título. */
@media(max-width:600px){
 #shell:has(#view-crmmeta:not([hidden])) .topbar{gap:8px}
 #shell:has(#view-crmmeta:not([hidden])) #viewTitle{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #shell:has(#view-crmmeta:not([hidden])) .topbar-right{flex:0 0 auto;width:auto;gap:8px}
 #shell:has(#view-crmmeta:not([hidden])) .topbar-right .side-search{width:clamp(64px,20vw,100px);min-width:0}
 #shell:has(#view-crmmeta:not([hidden])) #navSearch{width:100%;min-width:0;padding-left:28px;padding-right:6px;font-size:11px}
}

/* Textos longos não ultrapassam os cartões das tabelas móveis. */
@media(max-width:760px){
 #view-crmmeta .cmx-tbl td .cmx-quebra{min-width:0;max-width:100%;width:auto;overflow-wrap:anywhere}
 #view-crmmeta .cmx-tbl td:has(.cmx-quebra){grid-column:1/-1}
 #view-crmmeta .cmx-tbl td .cmx-tag{max-width:100%;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box}
}

/* Ajuda consistente: círculo visível, hover suave e foco acessível. */
#view-crmmeta button.cmx-ajuda,#view-crmmeta button.cmx-dica{
 display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
 box-sizing:border-box;width:26px;min-width:26px;height:26px;padding:0;
 margin:0 4px;border:1px solid var(--ouro,#a58546);border-radius:50%;
 background:var(--branco,#fff);color:var(--ouro-deep,#765818);
 font-family:inherit;font-size:13px;font-weight:600;line-height:1;vertical-align:middle;
 cursor:help;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease;
}
#view-crmmeta button.cmx-dica svg{width:15px;height:15px}
@media(hover:hover){
 #view-crmmeta button.cmx-ajuda:hover,#view-crmmeta button.cmx-dica:hover{
  background:var(--floral,#f3e8ce);color:var(--ouro-deep,#765818);
  border-color:var(--ouro-deep,#765818);box-shadow:0 0 0 3px rgba(165,133,70,.12);
 }
}
#view-crmmeta button.cmx-ajuda:active,#view-crmmeta button.cmx-dica:active{transform:scale(.94);background:var(--floral,#f3e8ce)}
#view-crmmeta button.cmx-ajuda:focus-visible,#view-crmmeta button.cmx-dica:focus-visible{outline:2px solid var(--ouro-deep,#765818);outline-offset:3px;box-shadow:0 0 0 3px rgba(165,133,70,.12)}
@media(prefers-reduced-motion:reduce){
 #view-crmmeta button.cmx-ajuda,#view-crmmeta button.cmx-dica{transition:none!important}
 #view-crmmeta button.cmx-ajuda:active,#view-crmmeta button.cmx-dica:active{transform:none!important}
}

/* Tags sem pontos decorativos, em todas as abas do módulo. */
#view-crmmeta .cmx-veic i,#view-crmmeta .cmx-tag>i{display:none!important}
#view-crmmeta .cmx-veic::before,#view-crmmeta .cmx-veic::after,
#view-crmmeta .cmx-tag::before,#view-crmmeta .cmx-tag::after{content:none!important;display:none!important}
#view-crmmeta .cmx-veic{padding-inline:10px;gap:0}
/* Feedback perceptível, sem animar fundo ou cor da seleção. */
#view-crmmeta .cmx-nav-itens .cmx-aba{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,border-color .18s ease!important}
#view-crmmeta .cmx-nav-itens .cmx-aba:not(.on){transition:background-color .18s ease,transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,border-color .18s ease!important}
@media(hover:hover){
 #view-crmmeta .cmx-nav-itens .cmx-aba:hover{transform:translateY(-2px)!important;box-shadow:0 4px 10px rgba(80,60,20,.14)}
 #view-crmmeta :is(.cmx-btn,.cmx-chip,.cmx-indice button,.cmx-mais button,.cmx-ler):hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(80,60,20,.10)}
 #view-crmmeta :is(button.cmx-ajuda,button.cmx-dica):hover{transform:scale(1.06)}
}
#view-crmmeta .cmx-nav-itens .cmx-aba:active{transform:translateY(0) scale(.98)!important;box-shadow:inset 0 1px 3px rgba(40,36,31,.18)}
#view-crmmeta .cmx-nav-itens .cmx-aba.on.cmx-aba--entra{animation:cmxSelecaoFeedback .28s ease-out!important}
@keyframes cmxSelecaoFeedback{from{box-shadow:0 0 0 4px rgba(165,133,70,.22)}to{box-shadow:0 0 0 0 rgba(165,133,70,0)}}
.cmx-ajuda-tooltip:not([hidden]){animation:cmxAjudaFeedback .16s ease-out}
@keyframes cmxAjudaFeedback{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 #view-crmmeta *,#view-crmmeta *::before,#view-crmmeta *::after,.cmx-ajuda-tooltip:not([hidden]){animation:none!important;transition:none!important}
 #view-crmmeta .cmx-nav-itens .cmx-aba:hover,#view-crmmeta .cmx-nav-itens .cmx-aba:active,
 #view-crmmeta :is(.cmx-btn,.cmx-chip,.cmx-indice button,.cmx-mais button,.cmx-ler,button.cmx-ajuda,button.cmx-dica):hover{transform:none!important}
}

/* [03/11 ajuda15] "?" um pouco menor (pedido do Higor) e o do título igual ao das colunas, com o balão fixo. */
#view-crmmeta button.cmx-ajuda,#view-crmmeta button.cmx-dica{width:20px;min-width:20px;height:20px;font-size:11px;margin:0 3px}
#view-crmmeta button.cmx-dica::after{content:none!important;display:none!important}

/* [03/11 alinha16] Cabeçalho das tabelas: texto, seta de ordenar e "?" na mesma linha de centro (antes: baseline x middle). */
#view-crmmeta .cmx-tbl thead th>button,#view-crmmeta .cmx-tbl thead th>.cmx-ajuda{vertical-align:middle}
#view-crmmeta .cmx-tbl thead th>button[data-ordena]{line-height:1.2}

/* [03/11 revisao17] Revisão geral (pedido do Higor). */
#view-crmmeta .cmx-res__i>span .cmx-ajuda{margin:0 0 0 6px;vertical-align:middle}
#view-crmmeta .cmx-duas .cmx-tbl :is(th,td).cmx-nome{min-width:104px}
#view-crmmeta .cmx-duas .cmx-tbl thead th{white-space:normal;padding-inline:8px}
#view-crmmeta .cmx-duas .cmx-tbl thead th>button[data-ordena]{white-space:normal;text-align:inherit}
#view-crmmeta .cmx-duas .cmx-tbl tbody td{padding-inline:8px}
@media(max-width:760px){
 #view-crmmeta .cmx-tbl td.cmx-nome{max-width:none;min-width:0;width:auto}
 #view-crmmeta :is(.cmx-diferenca__scroll,.cmx-feegow__scroll){overflow:visible}
 #view-crmmeta :is(.cmx-diferenca__scroll,.cmx-feegow__scroll) table{width:100%;min-width:0}
 #view-crmmeta :is(.cmx-diferenca__scroll,.cmx-feegow__scroll) thead{display:none}
 #view-crmmeta :is(.cmx-diferenca__scroll,.cmx-feegow__scroll) tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:14px 22px;border-bottom:1px solid var(--linha)}
 #view-crmmeta :is(.cmx-diferenca__scroll,.cmx-feegow__scroll) td{display:block;width:auto;padding:0;border:0;text-align:left;white-space:normal;background:none}
 #view-crmmeta :is(.cmx-diferenca__scroll,.cmx-feegow__scroll) td:first-child{grid-column:1/-1;width:auto;max-width:none}
 #view-crmmeta :is(.cmx-diferenca__scroll,.cmx-feegow__scroll) td[data-rot]:not(:first-child)::before{content:attr(data-rot);display:block;margin-bottom:2px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c700)}
}

/* [03/11 tabelas22] Tabelas separadas por igual (pedido do Higor): linha leve entre todas as colunas,
   faixa clara em linhas alternadas e cabeçalho de grupo centralizado (ex.: No CRM | No Google). */
#view-crmmeta .cmx-tbl :is(th,td){vertical-align:middle}
#view-crmmeta .cmx-tbl :is(th,td)+:is(th,td),
#view-crmmeta .cmx-tbl thead tr.cmx-l2 th{border-left:1px solid var(--cmx-sep,#ece7de)}
#view-crmmeta .cmx-tbl :is(th,td).cmx-chk+:is(th,td){border-left:0}
#view-crmmeta .cmx-tbl th.cmx-par,#view-crmmeta .cmx-tbl th.cmx-g-meta,#view-crmmeta .cmx-tbl td.cmx-g-meta{border-left:1px solid var(--cmx-sep,#ece7de)}
#view-crmmeta .cmx-tbl tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--creme,#f7f3ec) 45%,var(--branco,#fff))}
#view-crmmeta .cmx-tbl tbody tr:hover td{background:color-mix(in srgb,var(--floral,#f3e8ce) 45%,var(--branco,#fff))}
#view-crmmeta .cmx-tbl thead th.cmx-par--grupo{text-align:center;letter-spacing:.06em}
@media(max-width:760px){
 #view-crmmeta .cmx-tbl :is(tbody,tfoot) td{border-left:0!important}
 #view-crmmeta .cmx-tbl tbody tr:nth-child(even) td{background:none}
}
/* o quadradinho de cor (Meta/CRM) é do botão de ordenar; no "?" ele aparecia grudado */
#view-crmmeta .cmx-tbl thead th button.cmx-ajuda::before{content:none!important;display:none!important}
/* lado a lado só quando as tabelas são curtas; com 6+ colunas cada uma ocupa a largura toda (o "?" caía em outra linha) */
#view-crmmeta .cmx-duas:has(.cmx-tbl thead tr:first-child th:nth-child(6)){grid-template-columns:1fr}

/* [03/11 ajuda25] "?" menor (16 px) e igual em todo o módulo: colunas, cartões, títulos e textos (pedido do Higor). */
#view-crmmeta button.cmx-ajuda,#view-crmmeta button.cmx-dica,
#view-crmmeta .cmx-tbl thead th button.cmx-ajuda,#view-crmmeta .cmx-res__i>span .cmx-ajuda,#view-crmmeta .cmx-grupo__t .cmx-ajuda{
 width:16px!important;min-width:16px!important;height:16px!important;padding:0!important;margin:0 0 0 5px!important;
 border:1px solid var(--ouro,#a58546)!important;border-radius:50%!important;
 background:var(--branco,#fff);color:var(--ouro-deep,#765818)!important;
 font-size:10px!important;font-weight:600!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important;
 vertical-align:middle;box-shadow:none}

/* [Higor 03/11/2026 · abas 26] Chip "N selecionado" e subtítulo DENTRO da aba: a aba ativa é dourada (layout 03/11), mas o
   subtítulo e o chip vinham do estilo da aba branca (cinza em dourado, sem contraste) e o chip de 20 px com margem negativa
   deixava as abas com alturas diferentes (42/49 px). Uma altura só, chip e subtítulo brancos na aba ativa, nada transborda. */
#view-crmmeta .cmx-nav-itens .cmx-aba{display:inline-flex;align-items:center;gap:8px;height:auto!important;min-height:42px;padding:6px 12px!important;max-width:100%;white-space:nowrap}
#view-crmmeta .cmx-nav-itens .cmx-aba .cmx-aba__t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
#view-crmmeta .cmx-nav-itens .cmx-aba .cmx-aba__t small{font-size:11px;font-weight:500;margin-top:1px;color:var(--c700,#6d6155);white-space:nowrap}
#view-crmmeta .cmx-nav-itens .cmx-aba.on .cmx-aba__t small{color:rgba(255,255,255,.88)!important}
#view-crmmeta .cmx-nav-itens .cmx-aba em{height:22px;line-height:20px;margin:0!important;padding:0 8px!important;white-space:nowrap;flex-shrink:0;font-size:11px;font-weight:600;border-radius:999px;box-sizing:border-box;display:inline-flex;align-items:center;gap:4px}
#view-crmmeta .cmx-nav-itens .cmx-aba em.cmx-aba__sel{background:var(--floral,#f4efe4)!important;color:var(--ouro-deep,#6d5420)!important;border:1px solid color-mix(in srgb,var(--ouro,#a58546) 38%,transparent);animation:none}
#view-crmmeta .cmx-nav-itens .cmx-aba.on em{background:rgba(255,255,255,.16)!important;color:#fff!important;border:1px solid rgba(255,255,255,.45)}
#view-crmmeta .cmx-nav-itens .cmx-aba.on em.cmx-aba__sel{background:rgba(255,255,255,.18)!important;color:#fff!important;border-color:rgba(255,255,255,.55)}
#view-crmmeta .cmx-nav-itens .cmx-aba .cmx-aba__sel i{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;margin:0 -5px 0 1px;padding:0;border-radius:50%;cursor:pointer}
#view-crmmeta .cmx-nav-itens .cmx-aba .cmx-aba__sel i:hover{background:color-mix(in srgb,currentColor 18%,transparent)}
#view-crmmeta .cmx-nav-itens .cmx-aba.on .cmx-aba__sel i:hover{background:rgba(255,255,255,.28)}
#view-crmmeta .cmx-nav-itens .cmx-aba .cmx-aba__sel .cmx-ic{width:12px;height:12px;color:inherit}
#view-crmmeta .cmx-nav-itens .cmx-aba .cmx-ic{width:17px;height:17px;flex-shrink:0}
#view-crmmeta .cmx-nav-itens{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}

/* [Higor 03/11/2026 · abas 27] Pedido: todos os blocos da mesma linha com a mesma altura (os sem subtítulo ficavam mais
   baixos) e o subtítulo "de 1 campanha / de 1 conjunto" menor, mais harmonioso com o título. */
#view-crmmeta .cmx-nav-itens{align-items:stretch}
#view-crmmeta .cmx-nav-itens .cmx-aba{align-self:stretch;min-height:46px!important;height:auto!important}
#view-crmmeta .cmx-nav-itens .cmx-aba .cmx-aba__t{line-height:1.1;justify-content:center}
#view-crmmeta .cmx-nav-itens .cmx-aba .cmx-aba__t small{font-size:10px;line-height:1.1;margin-top:2px;font-weight:500;letter-spacing:.1px;opacity:.92}
#view-crmmeta .cmx-nav-itens .cmx-aba.on .cmx-aba__t small{opacity:1}

/* [Higor 03/11/2026 · abas 28] Botão "Limpar seleção" no fim da 1ª linha (crm-meta v60 + layout 11): só aparece com campanha/conjunto marcado. */
#view-crmmeta .cmx-nav-itens .cmx-aba.cmx-aba--limpar{margin-left:auto;background:transparent!important;border:1px dashed var(--ouro,#a58546)!important;color:var(--ouro-deep,#6d5420)!important;font-weight:600;padding:6px 12px!important}
#view-crmmeta .cmx-nav-itens .cmx-aba.cmx-aba--limpar:hover{background:var(--floral,#f4efe4)!important;transform:none!important;box-shadow:none!important}
#view-crmmeta .cmx-nav-itens .cmx-aba.cmx-aba--limpar .cmx-ic{color:inherit!important}
@media (max-width:899px){#view-crmmeta .cmx-nav-itens .cmx-aba.cmx-aba--limpar{margin-left:0}}

/* [Higor 03/11/2026 · 29] "Ver N contas com fatura vinculada" (aba Não enviou): o <details> saía cru, com o triângulo nativo.
   Mesmo visual dos botões do painel: pílula com borda dourada, seta que gira ao abrir, hover e foco. */
#view-crmmeta .cmx-feegow details{margin:0}
#view-crmmeta .cmx-feegow details summary{list-style:none;display:inline-flex;align-items:center;gap:8px;margin:12px 26px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--ouro-deep,#6d5420);background:var(--branco,#fff);border:1px solid var(--ouro,#a58546);border-radius:999px;cursor:pointer;user-select:none;transition:background .15s,border-color .15s}
#view-crmmeta .cmx-feegow details summary::-webkit-details-marker{display:none}
#view-crmmeta .cmx-feegow details summary::before{content:"";width:7px;height:7px;margin:0 2px 2px 0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
#view-crmmeta .cmx-feegow details[open] summary::before{transform:rotate(45deg);margin-bottom:0}
#view-crmmeta .cmx-feegow details summary:hover,#view-crmmeta .cmx-feegow details[open] summary{background:var(--floral,#f4efe4)}
#view-crmmeta .cmx-feegow details summary:focus-visible{outline:2px solid var(--ouro,#a58546);outline-offset:2px}