/* Tráfego Pago (crm-meta.js) · refino de layout · Higor 21/10/2026
   Só aparência: respiro, hierarquia, grupos, tabelas, ícones e estados. Arquivo próprio para não disputar
   o crm-meta.js com a sessão da lógica. Tudo começa com #view-crmmeta para vencer o <style> que o
   crm-meta.js injeta depois. Tirar o <link> do index.html volta tudo como era.
   v2 (21/10): tabelas redesenhadas (grupos separados, cabeçalho, linhas, total), etiquetas com ponto,
   veiculação em etiqueta, resumo em cartões, ícones das abas, estados de foco/hover, índice das abas longas
   (o índice e a sombra de rolagem vêm de crm-meta-ux.js). */

#view-crmmeta .cmx{gap:20px;--cmx-meta:#3E66B0;--cmx-meta-sw:#4A7BD0;--cmx-sep:color-mix(in srgb,var(--linha) 75%,transparent)}
[data-theme="dark"] #view-crmmeta .cmx{--cmx-meta:#9DB5E3;--cmx-meta-sw:#7FA2E6}
#view-crmmeta .cmx-quadro{border-radius:16px;box-shadow:0 1px 2px rgba(20,16,10,.04),0 10px 28px -16px rgba(20,16,10,.12)}

/* ---------- abas: níveis (Campanhas, Conjuntos, Anúncios) numa linha, análises na outra, fio entre elas; sem rótulo (Higor 21/10) ---------- */
@media (min-width:900px){
  #view-crmmeta .cmx-abas{flex-direction:column;padding:0 20px}
  #view-crmmeta .cmx-abas__div{display:none}
  #view-crmmeta .cmx-abas__div+.cmx-abas__grupo{border-top:1px solid var(--linha)}
}
#view-crmmeta .cmx-aba{padding:14px 8px 12px;border-bottom-width:2px;transition:color .15s,border-color .15s}
#view-crmmeta .cmx-aba+.cmx-aba{margin-left:2px}
#view-crmmeta .cmx-aba .cmx-ic{color:var(--c300);transition:color .15s}
#view-crmmeta .cmx-aba:hover .cmx-ic{color:var(--c700)}
#view-crmmeta .cmx-aba.on{font-weight:700}
#view-crmmeta .cmx-aba.on .cmx-ic{color:var(--ouro)}
#view-crmmeta .cmx-aba em{min-width:22px;justify-content:center;padding:1px 7px;font-variant-numeric:tabular-nums}
#view-crmmeta .cmx-aba--alerta em{background:#FBE6E3;color:#A1271B}
[data-theme="dark"] #view-crmmeta .cmx-aba--alerta em{background:#3d1d18;color:#f0a497}

/* ---------- barra: linha 1 = o que filtra a tabela · linha 2 = período e exportar ---------- */
#view-crmmeta .cmx-barra{padding:14px 20px;gap:10px;align-items:center;justify-content:flex-start;background:color-mix(in srgb,var(--creme) 55%,var(--branco))}
#view-crmmeta .cmx-barra__l,#view-crmmeta .cmx-barra__r{display:contents}
#view-crmmeta .cmx-busca{order:1;width:300px}
#view-crmmeta .cmx-chip{order:2}
#view-crmmeta .cmx-barra [data-dd="evento"]{order:2}
#view-crmmeta .cmx-barra [data-dd="situacao"]{order:3}
#view-crmmeta .cmx-barra [data-dd="colunas"]{order:4;margin-left:auto}
#view-crmmeta .cmx-barra:has(.cmx-busca,[data-dd="evento"])::before{content:"";order:5;flex-basis:100%;height:0}
#view-crmmeta .cmx-barra [data-dd="periodo"]{order:6}
#view-crmmeta .cmx-barra [data-dd="periodo"] .cmx-menu{left:0;right:auto}
#view-crmmeta .cmx-datas-txt{order:7;align-items:flex-start;padding-left:4px}
#view-crmmeta .cmx-atualizado{order:8;margin-left:auto;display:inline-flex;align-items:center;gap:6px}
#view-crmmeta .cmx-atualizado::before{content:"";width:6px;height:6px;border-radius:50%;background:#31A24C;box-shadow:0 0 0 3px color-mix(in srgb,#31A24C 18%,transparent)}
#view-crmmeta .cmx-barra [data-acao="exportar"]{order:9}
/* controles: mesma altura, mesmo raio, foco e hover dourados */
#view-crmmeta .cmx-btn,#view-crmmeta .cmx-chip,#view-crmmeta .cmx-busca{height:36px;border-radius:10px}
#view-crmmeta .cmx-btn{transition:background .15s,border-color .15s,box-shadow .15s}
#view-crmmeta .cmx-btn:hover{border-color:var(--ouro-suave);background:var(--branco)}
#view-crmmeta .cmx-btn .cmx-ic{color:var(--c700)}
#view-crmmeta .cmx-chip{transition:background .15s,border-color .15s}
#view-crmmeta .cmx-chip:not(.on):hover{border-color:var(--ouro-suave);color:var(--text-strong)}
#view-crmmeta .cmx-menu{border-radius:12px;padding:6px}
#view-crmmeta .cmx-menu__it{border-radius:8px}
#view-crmmeta .cmx-menu__it.on{background:color-mix(in srgb,var(--floral) 60%,transparent)}

/* ---------- corpo e resumo (cada número no seu cartão) ---------- */
#view-crmmeta .cmx-corpo{padding:20px;gap:20px}
#view-crmmeta .cmx-res{border:0;border-radius:0;gap:12px;background:none}
#view-crmmeta .cmx-res__i{padding:16px 18px;gap:6px;border:1px solid var(--linha);border-radius:12px;background:var(--branco);transition:border-color .15s,box-shadow .15s}
#view-crmmeta .cmx-res__i:hover{border-color:var(--ouro-suave);box-shadow:0 6px 18px -12px rgba(20,16,10,.25)}
#view-crmmeta .cmx-res__i>span{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c700)}
#view-crmmeta .cmx-res__v b{font-size:22px}
#view-crmmeta .cmx-res__i>small{font-size:12px;line-height:1.4;-webkit-line-clamp:3}

/* ---------- blocos e grupos ---------- */
#view-crmmeta .cmx-bloco2{padding:20px 22px;gap:12px;border-radius:14px;background:var(--branco);scroll-margin-top:76px}
#view-crmmeta .cmx-corpo>.cmx-bloco2+.cmx-bloco2,#view-crmmeta .cmx-corpo>.cmx-bloco2+.cmx-duas,#view-crmmeta .cmx-corpo>.cmx-duas+.cmx-bloco2,#view-crmmeta .cmx-nota+.cmx-bloco2{margin-top:0}
#view-crmmeta .cmx-grupo{gap:10px}
#view-crmmeta .cmx-grupo+.cmx-grupo{margin-top:12px}
#view-crmmeta .cmx-grupo__t{font-size:15px;letter-spacing:-.005em;gap:10px}
#view-crmmeta .cmx-bloco2>.cmx-grupo__t::before{content:"";width:3px;height:16px;border-radius:2px;background:var(--ouro);flex:none}
#view-crmmeta .cmx-grupo__s{font-size:12.5px;line-height:1.5;margin-top:-6px}
#view-crmmeta .cmx-bloco2>.cmx-grupo__s{padding-left:13px}
#view-crmmeta .cmx-duas{gap:20px}
#view-crmmeta .cmx-sec{margin:8px 0 0;padding-top:24px;font-size:17px;letter-spacing:-.01em;scroll-margin-top:76px}
#view-crmmeta .cmx-motivos{gap:16px}
#view-crmmeta .cmx-motivo{border-radius:12px;transition:box-shadow .15s}
#view-crmmeta .cmx-motivo:hover{box-shadow:0 6px 18px -12px rgba(20,16,10,.25)}
#view-crmmeta .cmx-motivo li+li{border-top:1px solid var(--cmx-sep)}
#view-crmmeta .cmx-nota{padding:12px 16px;border-radius:10px;background:color-mix(in srgb,var(--floral) 35%,var(--branco))}

/* contadores de prioridade (Alertas) viram etiquetas */
#view-crmmeta .cmx-legenda{gap:8px}
#view-crmmeta .cmx-legenda>span:has(>b){padding:4px 12px;border-radius:999px;background:var(--creme2);color:var(--c700)}
#view-crmmeta .cmx-legenda>span>b{color:var(--text-strong);font-weight:700;margin-right:2px}

/* ---------- etiquetas: mesma altura, ponto de cor na frente ---------- */
#view-crmmeta .cmx-tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;font-size:11.5px;line-height:1}
#view-crmmeta .cmx-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75;flex:none}
#view-crmmeta .cmx-tag--neutro::before{opacity:.45}
/* veiculação vira etiqueta no mesmo molde */
#view-crmmeta .cmx-veic{height:24px;padding:0 10px 0 8px;border-radius:999px;font-size:11.5px;font-weight:600;gap:6px;background:var(--creme2);color:var(--c700)}
#view-crmmeta .cmx-veic i{width:6px;height:6px;box-shadow:none}
#view-crmmeta .cmx-veic--ok{background:#E3F4E7;color:#1E6B34}
#view-crmmeta .cmx-veic--aviso{background:#FFF3D6;color:#7A5300}
#view-crmmeta .cmx-veic--erro{background:#FBE6E3;color:#A1271B}
[data-theme="dark"] #view-crmmeta .cmx-veic--ok{background:#183823;color:#8fd6a3}
[data-theme="dark"] #view-crmmeta .cmx-veic--aviso{background:#3a3016;color:#e6c463}
[data-theme="dark"] #view-crmmeta .cmx-veic--erro{background:#3d1d18;color:#f0a497}

/* ---------- tabelas ---------- */
#view-crmmeta .cmx-tbl{border-radius:12px;scrollbar-width:thin;scrollbar-color:var(--ouro-suave) transparent}
#view-crmmeta .cmx-tbl table{font-size:13px}
#view-crmmeta .cmx-tbl th,#view-crmmeta .cmx-tbl td{padding:12px 14px;border-bottom-color:var(--cmx-sep)}
/* cabeçalho: caixa alta pequena, faixa clara, uma linha só */
#view-crmmeta .cmx-tbl thead th{padding-top:11px;padding-bottom:11px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c700);background:color-mix(in srgb,var(--creme) 70%,var(--branco));border-bottom:1px solid var(--linha)}
#view-crmmeta .cmx-tbl thead tr.cmx-l1 th.cmx-par{height:36px;padding:10px 14px 4px;color:var(--text-strong);font-weight:700;box-shadow:inset 0 -1px 0 var(--cmx-sep)}
#view-crmmeta .cmx-tbl thead tr.cmx-l2 th{top:36px;padding-top:7px;padding-bottom:9px;font-size:10.5px}
#view-crmmeta .cmx-tbl thead th button{gap:5px;text-transform:inherit;letter-spacing:inherit}
#view-crmmeta .cmx-tbl thead th button:hover{color:var(--text-strong)}
#view-crmmeta .cmx-tbl thead th.on{color:var(--ouro-deep)}
#view-crmmeta .cmx-tbl th i{font-size:8px}
/* Meta e CRM: ponto de cor no subtítulo, número na cor neutra (o grupo já diz o que é) */
#view-crmmeta .cmx-tbl thead tr.cmx-l2 th.cmx-g-meta,#view-crmmeta .cmx-tbl thead tr.cmx-l2 th.cmx-g-crm{color:var(--c700)}
#view-crmmeta .cmx-tbl thead tr.cmx-l2 th.cmx-g-meta button::before,#view-crmmeta .cmx-tbl thead tr.cmx-l2 th.cmx-g-crm button::before{content:"";width:7px;height:7px;border-radius:2px;flex:none}
#view-crmmeta .cmx-tbl thead tr.cmx-l2 th.cmx-g-meta button::before{background:var(--cmx-meta-sw)}
#view-crmmeta .cmx-tbl thead tr.cmx-l2 th.cmx-g-crm button::before{background:var(--ouro-suave)}
#view-crmmeta .cmx-tbl td.cmx-g-crm{color:var(--ouro-deep);font-weight:600}
/* separação dos grupos: fio à esquerda de CADA grupo (antes faltava entre "Valor usado" e "Leads") */
#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(--linha)}
/* linhas: altura folgada, hover dourado claro, linha selecionada marcada */
#view-crmmeta .cmx-tbl tbody td{transition:background .12s}
#view-crmmeta .cmx-tbl tbody tr:hover td{background:color-mix(in srgb,var(--floral) 45%,var(--branco))}
#view-crmmeta .cmx-tbl tbody tr.is-sel td{background:color-mix(in srgb,var(--floral) 80%,var(--branco))}
#view-crmmeta .cmx-tbl tbody tr.is-sel td.cmx-chk{box-shadow:inset 3px 0 0 var(--ouro)}
#view-crmmeta .cmx-tbl td.cmx-zero,#view-crmmeta .cmx-tbl td .cmx-zero{color:color-mix(in srgb,var(--c300) 80%,transparent);font-weight:400}
/* total: faixa mais forte e fio duplo */
#view-crmmeta .cmx-tbl tfoot td{padding-top:13px;padding-bottom:13px;background:color-mix(in srgb,var(--creme) 85%,var(--branco));border-top:2px solid var(--linha);font-variant-numeric:tabular-nums}
/* nome: até 2 linhas em vez de cortar; coluna fixa ganha sombra ao rolar (crm-meta-ux.js) */
#view-crmmeta .cmx-tbl .cmx-nome{min-width:300px;max-width:400px}
#view-crmmeta .cmx-tbl td.cmx-nome .cmx-link{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35;font-weight:600}
#view-crmmeta .cmx-tbl .cmx-nome,#view-crmmeta .cmx-tbl .cmx-chk{transition:box-shadow .15s}
#view-crmmeta .cmx-tbl.is-rolado .cmx-nome{box-shadow:inset -1px 0 0 var(--linha),10px 0 14px -12px rgba(20,16,10,.35)}
#view-crmmeta .cmx-tbl.tem-mais{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),rgba(0,0,0,.35));mask-image:linear-gradient(90deg,#000 calc(100% - 36px),rgba(0,0,0,.35))}
/* tabela dentro de bloco: encosta nas bordas do bloco (sem caixa dentro de caixa) */
#view-crmmeta .cmx-bloco2>.cmx-tbl{border-width:1px 0 0;border-radius:0;margin:4px -22px 0;max-height:none}
#view-crmmeta .cmx-bloco2>.cmx-tbl:last-child{margin-bottom:-20px;border-radius:0 0 14px 14px}
#view-crmmeta .cmx-bloco2{overflow:hidden}
#view-crmmeta .cmx-bloco2>.cmx-tbl th:first-child,#view-crmmeta .cmx-bloco2>.cmx-tbl td:first-child{padding-left:22px}
#view-crmmeta .cmx-bloco2>.cmx-tbl th:last-child,#view-crmmeta .cmx-bloco2>.cmx-tbl td:last-child{padding-right:22px}

/* ---------- índice das abas longas (crm-meta-ux.js) ---------- */
#view-crmmeta .cmx-indice{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);align-items:center;gap:6px;padding:10px 12px;border:1px solid var(--linha);border-radius:12px;background:var(--branco);position:sticky;top:0;z-index:5;box-shadow:0 8px 20px -16px rgba(20,16,10,.3)}
#view-crmmeta .cmx-indice::-webkit-scrollbar{display:none}
#view-crmmeta .cmx-indice>span{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--c300);margin:0 6px 0 4px}
#view-crmmeta .cmx-indice button{height:28px;padding:0 12px;border:1px solid var(--linha);border-radius:999px;background:none;font:inherit;font-size:12px;font-weight:500;color:var(--c700);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
#view-crmmeta .cmx-indice button:hover{border-color:var(--ouro-suave);color:var(--text-strong)}
#view-crmmeta .cmx-indice button.on{background:var(--floral);border-color:var(--ouro-suave);color:var(--ouro-deep);font-weight:600}
#view-crmmeta .cmx-indice button:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}

/* duas colunas só quando cabe a tabela inteira; antes disso, uma embaixo da outra */
@media (max-width:1499px){#view-crmmeta .cmx-duas{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){#view-crmmeta *{transition:none !important}}

/* ---------- celular ---------- */
@media (max-width:760px){
  #view-crmmeta .cmx{gap:16px}
  #view-crmmeta .cmx-barra{padding:12px 14px}
  #view-crmmeta .cmx-busca{width:auto;flex:1 1 100%}
  #view-crmmeta .cmx-barra [data-dd="colunas"]{margin-left:0}
  #view-crmmeta .cmx-barra [data-acao="exportar"]{order:7;margin-left:auto}
  #view-crmmeta .cmx-datas-txt{order:8;flex:1 1 auto;padding-left:2px}
  #view-crmmeta .cmx-atualizado{order:9;margin-left:auto;align-self:flex-end}
  #view-crmmeta .cmx-res{gap:8px}
  #view-crmmeta .cmx-res__i{padding:12px 14px}
  #view-crmmeta .cmx-res__i>span{font-size:10.5px;letter-spacing:.03em}
  #view-crmmeta .cmx-res__v b{font-size:19px}
  #view-crmmeta .cmx-corpo{padding:14px;gap:16px}
  #view-crmmeta .cmx-bloco2{padding:16px}
  #view-crmmeta .cmx-bloco2>.cmx-tbl{margin-left:-16px;margin-right:-16px}
  #view-crmmeta .cmx-bloco2>.cmx-tbl:last-child{margin-bottom:-16px}
  #view-crmmeta .cmx-bloco2>.cmx-tbl th:first-child,#view-crmmeta .cmx-bloco2>.cmx-tbl td:first-child{padding-left:16px}
  #view-crmmeta .cmx-tbl .cmx-nome{min-width:190px;max-width:230px}
}

/* ---------- período personalizado: campos, calendário da marca (crm-meta-ux.js) e Aplicar ---------- */
/* atalhos à esquerda, personalizado à direita (no celular, um embaixo do outro) */
@media (min-width:761px){
  #view-crmmeta [data-dd="periodo"] .cmx-menu{display:grid;grid-template-columns:168px 312px;column-gap:0;padding:8px;min-width:0}
  #view-crmmeta [data-dd="periodo"] .cmx-menu>.cmx-menu__it{grid-column:1}
  #view-crmmeta [data-dd="periodo"] .cmx-menu>.cmx-menu__sep{display:none}
  #view-crmmeta [data-dd="periodo"] .cmx-menu>.cmx-menu__tit,#view-crmmeta [data-dd="periodo"] .cmx-menu>.cmx-datas,#view-crmmeta [data-dd="periodo"] .cmx-menu>.cmx-cal,#view-crmmeta [data-dd="periodo"] .cmx-menu>.cmx-datas__acoes{grid-column:2;margin-left:8px;padding-left:14px;border-left:1px solid var(--linha)}
  #view-crmmeta [data-dd="periodo"] .cmx-menu>.cmx-menu__tit{grid-row:1}
  #view-crmmeta [data-dd="periodo"] .cmx-menu>.cmx-datas{grid-row:2}
  #view-crmmeta [data-dd="periodo"] .cmx-menu>.cmx-cal{grid-row:3 / span 5;align-self:start}
  #view-crmmeta [data-dd="periodo"] .cmx-menu>.cmx-datas__acoes{grid-row:8}
  #view-crmmeta [data-dd="periodo"] .cmx-menu>.cmx-cal{border-left:1px solid var(--linha);margin-left:8px;padding-left:14px;border-width:0 0 0 1px;border-radius:0;background:none}
}
#view-crmmeta [data-dd="periodo"] .cmx-menu{padding:8px}
#view-crmmeta .cmx-menu__tit{padding:10px 10px 6px;font-size:10.5px;letter-spacing:.08em;color:var(--c700)}
#view-crmmeta .cmx-datas{gap:8px;padding:4px 6px 8px}
#view-crmmeta .cmx-datas span{font-size:12px;color:var(--c300)}
#view-crmmeta .cmx-datas input{height:38px;padding:0 10px 0 34px;border:1px solid var(--linha);border-radius:10px;background:var(--branco) no-repeat 10px 50%/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A58546' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='3'/%3E%3Cpath d='M3 9.5h18M8 3v3M16 3v3'/%3E%3C/svg%3E");font:inherit;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-strong);cursor:pointer;transition:border-color .15s,box-shadow .15s}
#view-crmmeta .cmx-datas input::-webkit-calendar-picker-indicator{display:none}
#view-crmmeta .cmx-datas input:hover{border-color:var(--ouro-suave)}
#view-crmmeta .cmx-datas input.is-ativo,#view-crmmeta .cmx-datas input:focus{outline:0;border-color:var(--ouro);box-shadow:0 0 0 3px color-mix(in srgb,var(--ouro) 18%,transparent)}
#view-crmmeta .cmx-cal{margin:2px 6px 4px;padding:12px;border:1px solid var(--linha);border-radius:12px;background:color-mix(in srgb,var(--creme) 45%,var(--branco))}
#view-crmmeta .cmx-cal__topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#view-crmmeta .cmx-cal__topo b{font-size:13.5px;font-weight:700;color:var(--text-strong)}
#view-crmmeta .cmx-cal__nav{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--linha);border-radius:8px;background:var(--branco);color:var(--c700);cursor:pointer;transition:border-color .15s,color .15s}
#view-crmmeta .cmx-cal__nav svg{width:16px;height:16px}
#view-crmmeta .cmx-cal__nav:hover:not(:disabled){border-color:var(--ouro-suave);color:var(--ouro-deep)}
#view-crmmeta .cmx-cal__nav:disabled{opacity:.35;cursor:default}
#view-crmmeta .cmx-cal__sem,#view-crmmeta .cmx-cal__dias{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
#view-crmmeta .cmx-cal__sem span{height:26px;display:grid;place-items:center;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--c300)}
#view-crmmeta .cmx-cal__d{position:relative;height:34px;border:0;background:none;font:inherit;font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text-strong);cursor:pointer;border-radius:8px;transition:background .12s,color .12s}
#view-crmmeta .cmx-cal__d:hover:not(:disabled){background:color-mix(in srgb,var(--floral) 70%,transparent);color:var(--ouro-deep)}
#view-crmmeta .cmx-cal__d.is-fora{color:var(--c300)}
#view-crmmeta .cmx-cal__d:disabled{color:color-mix(in srgb,var(--c300) 55%,transparent);cursor:default}
#view-crmmeta .cmx-cal__d.is-hoje::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ouro)}
#view-crmmeta .cmx-cal__d.is-entre{border-radius:0;background:color-mix(in srgb,var(--floral) 75%,transparent);color:var(--ouro-deep)}
#view-crmmeta .cmx-cal__d.is-ini,#view-crmmeta .cmx-cal__d.is-fim{background:var(--ouro-btn);color:#fff;font-weight:700}
#view-crmmeta .cmx-cal__d.is-ini.is-hoje::after,#view-crmmeta .cmx-cal__d.is-fim.is-hoje::after{background:#fff}
#view-crmmeta .cmx-cal__d:focus-visible{outline:2px solid var(--ouro);outline-offset:1px}
#view-crmmeta .cmx-cal__rod{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--linha);font-size:11.5px;color:var(--c700)}
#view-crmmeta .cmx-cal__rod b{color:var(--ouro-deep)}
#view-crmmeta .cmx-cal__rod span:last-child{font-weight:600;color:var(--text-strong)}
#view-crmmeta .cmx-datas__acoes{padding:8px 6px 4px}
#view-crmmeta .cmx-datas__acoes .cmx-btn--pri{height:36px;padding:0 18px;border-radius:10px;font-weight:600}
#view-crmmeta .cmx-erro{font-size:11.5px}
/* ajuste fino: campos cabem a data inteira, calendário mais baixo para o menu caber na tela */
#view-crmmeta .cmx-datas{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
#view-crmmeta .cmx-datas input{width:100%;min-width:0;padding:0 6px 0 30px;background-position:9px 50%;background-size:15px;font-size:12.5px}
#view-crmmeta .cmx-datas input::-webkit-datetime-edit{padding:0}
#view-crmmeta .cmx-cal{padding-top:8px;padding-bottom:8px}
#view-crmmeta .cmx-cal__topo{margin-bottom:4px}
#view-crmmeta .cmx-cal__sem span{height:22px}
#view-crmmeta .cmx-cal__d{height:30px}
#view-crmmeta .cmx-cal__d.is-hoje::after{bottom:3px}
#view-crmmeta .cmx-cal__d.is-fora.is-entre{opacity:.55}
#view-crmmeta .cmx-cal__rod{margin-top:6px;padding-top:8px}
@media (min-width:761px){#view-crmmeta [data-dd="periodo"] .cmx-menu>.cmx-datas__acoes{padding-top:4px}}
@media (max-width:760px){
  #view-crmmeta [data-dd="periodo"] .cmx-menu{width:calc(100vw - 84px);max-width:360px}
  #view-crmmeta .cmx-datas input{font-size:12px;padding-left:28px;background-position:8px 50%}
}

/* ---------- tabelas longas: 10 linhas + "Mostrar mais", texto em 3 linhas, cabeçalho fixo (crm-meta-ux.js) ---------- */
#view-crmmeta .cmx-bloco2{overflow:visible}
#view-crmmeta .cmx-tbl tbody tr.cmx-oculta{display:none}
#view-crmmeta .cmx-mais{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 -22px -20px;padding:12px 22px;border-top:1px solid var(--linha);border-radius:0 0 14px 14px;background:color-mix(in srgb,var(--creme) 55%,var(--branco))}
#view-crmmeta .cmx-mais span{margin-right:auto;font-size:12px;color:var(--c700);font-variant-numeric:tabular-nums}
#view-crmmeta .cmx-mais button{height:32px;padding:0 14px;border:1px solid var(--linha);border-radius:999px;background:var(--branco);font:inherit;font-size:12.5px;font-weight:600;color:var(--text-strong);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
#view-crmmeta .cmx-mais button:hover{border-color:var(--ouro-suave);color:var(--ouro-deep)}
#view-crmmeta .cmx-mais button[data-mais]{background:var(--floral);border-color:var(--ouro-suave);color:var(--ouro-deep)}
#view-crmmeta .cmx-mais button:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
#view-crmmeta .cmx-bloco2>.cmx-tbl:has(+.cmx-mais){border-radius:0}
/* cabeçalho fixo: só quando a tabela cabe na largura (sem rolagem de lado), preso logo abaixo do "Ir para" */
#view-crmmeta .cmx-bloco2>.cmx-tbl.cmx-cabe{overflow:visible;-webkit-mask-image:none;mask-image:none}
#view-crmmeta .cmx-bloco2>.cmx-tbl.cmx-cabe thead th{top:var(--cmx-fixo,0px)}
#view-crmmeta .cmx-bloco2>.cmx-tbl.cmx-cabe thead tr.cmx-l2 th{top:calc(var(--cmx-fixo,0px) + 36px)}
#view-crmmeta .cmx-bloco2>.cmx-tbl.cmx-cabe thead th{box-shadow:0 1px 0 var(--linha)}
#view-crmmeta .cmx-bloco2>.cmx-tbl.cmx-cabe tfoot td{position:static}
/* texto de anúncio: 3 linhas, clique abre inteiro */
#view-crmmeta .cmx-bloco2 .cmx-quebra{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;cursor:pointer;transition:color .15s}
#view-crmmeta .cmx-bloco2 .cmx-quebra:hover{color:var(--ouro-deep)}
#view-crmmeta .cmx-bloco2 .cmx-quebra.is-aberto{display:block;-webkit-line-clamp:unset;white-space:pre-line}
@media (max-width:760px){#view-crmmeta .cmx-mais{margin:0 -16px -16px;padding:10px 16px;border-radius:0 0 14px 14px}}

/* botão Atualizar (da sessão da lógica): junto do "atualizado", antes do Exportar */
#view-crmmeta .cmx-barra [data-acao="atualizar"],#view-crmmeta .cmx-atu-aviso{order:8}
#view-crmmeta .cmx-atu-aviso{font-size:11.5px;color:#8A5D00}
[data-theme="dark"] #view-crmmeta .cmx-atu-aviso{color:#E6C463}
#view-crmmeta .cmx-barra [data-acao="atualizar"][disabled],#view-crmmeta .cmx-barra [data-acao="atualizar"][aria-busy="true"]{opacity:.65;cursor:progress}
@media (max-width:760px){#view-crmmeta .cmx-barra [data-acao="atualizar"],#view-crmmeta .cmx-atu-aviso{order:9}}

/* mínimo de texto na barra (Higor 21/10): sem o aviso do Atualizar, sem o "comparado com";
   e a data some quando o botão do período já mostra as datas (período personalizado, ver crm-meta-ux.js) */
#view-crmmeta .cmx-atu-aviso{display:none}
#view-crmmeta .cmx-datas-txt small{display:none}
#view-crmmeta .cmx-datas-txt b{font-weight:500;color:var(--c700)}
#view-crmmeta .cmx-datas-txt.is-repetida{display:none}

/* "Não enviou": sem a faixa grossa colorida no topo dos cartões (Higor 21/10). Perda real = borda fina vermelha
   inteira e cabeçalho rosado; os demais = borda normal. */
#view-crmmeta .cmx-motivo,#view-crmmeta .cmx-motivo--erro,#view-crmmeta .cmx-motivo--aviso,#view-crmmeta .cmx-motivo--neutro{border:1px solid var(--linha);border-top-width:1px}
#view-crmmeta .cmx-motivo--erro{border-color:color-mix(in srgb,#C0392B 45%,var(--linha))}
#view-crmmeta .cmx-motivo--erro header{background:color-mix(in srgb,#FBE6E3 70%,var(--branco));border-bottom-color:color-mix(in srgb,#C0392B 25%,var(--linha))}
#view-crmmeta .cmx-motivo--erro header strong{color:#A1271B}
#view-crmmeta .cmx-motivo--aviso{border-color:color-mix(in srgb,#D4A017 45%,var(--linha))}
#view-crmmeta .cmx-motivo--aviso header{background:color-mix(in srgb,#FFF3D6 70%,var(--branco))}
[data-theme="dark"] #view-crmmeta .cmx-motivo--erro header{background:#2b1714}
[data-theme="dark"] #view-crmmeta .cmx-motivo--erro header strong{color:#f0a497}
[data-theme="dark"] #view-crmmeta .cmx-motivo--aviso header{background:#2a2414}

/* ---------- ordenação: título da coluna vira botão com menu (crm-meta-ux.js) ---------- */
#view-crmmeta .cmx-tbl thead th button[data-ordena]{margin:-5px -7px;padding:5px 7px;border-radius:7px;transition:background .15s,color .15s}
#view-crmmeta .cmx-tbl thead th button[data-ordena]:hover,#view-crmmeta .cmx-tbl thead th.is-menu button[data-ordena]{background:color-mix(in srgb,var(--floral) 65%,transparent);color:var(--ouro-deep)}
#view-crmmeta .cmx-tbl thead th button[data-ordena] i{display:inline-grid;place-items:center;width:16px;height:16px;min-width:16px;font-size:0;border-radius:5px;color:var(--c300)}
#view-crmmeta .cmx-tbl thead th button[data-ordena] i::after{content:"";width:12px;height:12px;background:currentColor;opacity:0;transition:opacity .15s;-webkit-mask:var(--cmx-ico-ord) center/contain no-repeat;mask:var(--cmx-ico-ord) center/contain no-repeat}
#view-crmmeta .cmx-tbl thead th button[data-ordena]{--cmx-ico-ord:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E")}
#view-crmmeta .cmx-tbl thead th button[data-ordena]:hover i::after,#view-crmmeta .cmx-tbl thead th.is-menu button[data-ordena] i::after{opacity:.9}
#view-crmmeta .cmx-tbl thead th button[data-dir] i{background:var(--ouro-btn);color:#fff}
#view-crmmeta .cmx-tbl thead th button[data-dir] i::after{opacity:1}
#view-crmmeta .cmx-tbl thead th button[data-dir="desce"]{--cmx-ico-ord:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M19 12l-7 7-7-7'/%3E%3C/svg%3E")}
#view-crmmeta .cmx-tbl thead th button[data-dir="sobe"]{--cmx-ico-ord:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E")}
#view-crmmeta .cmx-tbl thead th.on{color:var(--ouro-deep)}
#view-crmmeta .cmx-tbl thead th button[data-ordena]:focus-visible{outline:2px solid var(--ouro);outline-offset:1px}
/* o menu fica no <body> (por cima da tabela), por isso sem o #view-crmmeta */
.cmx-ord{position:fixed;z-index:300;min-width:220px;padding:6px;border:1px solid var(--linha);border-radius:12px;background:var(--branco);box-shadow:0 14px 34px rgba(20,16,10,.16),0 2px 6px rgba(20,16,10,.08);font-family:inherit;animation:cmxOrd .14s ease-out}
@keyframes cmxOrd{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.cmx-ord__tit{padding:8px 10px 6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c700)}
.cmx-ord__tit b{color:var(--text-strong);text-transform:none;letter-spacing:0;font-size:12.5px}
.cmx-ord__it{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;border-radius:8px;background:none;font:inherit;font-size:13px;color:var(--text-strong);text-align:left;cursor:pointer}
.cmx-ord__it svg{width:16px;height:16px;flex:none;color:var(--c700)}
.cmx-ord__it span{flex:1}
.cmx-ord__it:hover,.cmx-ord__it:focus-visible{outline:0;background:color-mix(in srgb,var(--floral) 60%,transparent)}
.cmx-ord__it.on{font-weight:600;color:var(--ouro-deep)}
.cmx-ord__it.on svg{color:var(--ouro)}
@media (prefers-reduced-motion:reduce){.cmx-ord{animation:none}}

/* ---------- menos texto: "i" no título do bloco e "Como ler estes números" recolhido (crm-meta-ux.js) ---------- */
#view-crmmeta .cmx-grupo__s.cmx-recolhido,#view-crmmeta p.cmx-nota.cmx-recolhido{display:none}
#view-crmmeta .cmx-dica{position:relative;display:inline-grid;place-items:center;width:22px;height:22px;margin-left:-2px;padding:0;border:0;border-radius:50%;background:none;color:var(--c300);cursor:help;transition:color .15s,background .15s}
#view-crmmeta .cmx-dica svg{width:16px;height:16px}
#view-crmmeta .cmx-dica:hover,#view-crmmeta .cmx-dica:focus-visible{outline:0;color:var(--ouro-deep);background:color-mix(in srgb,var(--floral) 70%,transparent)}
#view-crmmeta .cmx-dica::after{content:attr(data-dica);position:absolute;left:50%;top:calc(100% + 8px);z-index:20;width:max-content;max-width:320px;padding:9px 12px;border-radius:10px;background:#2B241A;color:#F6EFE2;font-size:12px;font-weight:500;line-height:1.45;letter-spacing:0;text-align:left;white-space:normal;box-shadow:0 10px 24px rgba(20,16,10,.25);opacity:0;visibility:hidden;transform:translate(-50%,-4px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none}
#view-crmmeta .cmx-dica:hover::after,#view-crmmeta .cmx-dica:focus::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
#view-crmmeta .cmx-ler{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;border:1px solid var(--linha);border-radius:999px;background:var(--branco);font:inherit;font-size:12px;font-weight:500;color:var(--c700);cursor:pointer;transition:border-color .15s,color .15s}
#view-crmmeta .cmx-ler svg{width:15px;height:15px;color:var(--ouro)}
#view-crmmeta .cmx-ler:hover,#view-crmmeta .cmx-ler[aria-expanded="true"]{border-color:var(--ouro-suave);color:var(--ouro-deep)}
#view-crmmeta .cmx-ler+.cmx-nota{margin-top:-10px}

/* no celular a dica abre no toque (foco) e fica dentro da tela */
@media (max-width:760px){#view-crmmeta .cmx-dica::after{left:auto;right:-8px;transform:translateY(-4px);max-width:calc(100vw - 64px)}#view-crmmeta .cmx-dica:hover::after,#view-crmmeta .cmx-dica:focus::after{transform:none}}

/* ---------- barra numa linha só, sem o fundo cinza (Higor 21/10: "aplica tudo") ----------
   busca · chave "Só com gasto" · período + data | colunas · atualizar (só ícone) · exportar */
#view-crmmeta .cmx-barra{background:var(--branco);padding:12px 20px;gap:10px}
#view-crmmeta .cmx-barra:has(.cmx-busca,[data-dd="evento"])::before{content:none}
#view-crmmeta .cmx-busca{order:1;width:240px}
#view-crmmeta .cmx-chip{order:2}
#view-crmmeta .cmx-barra [data-dd="evento"]{order:2}
#view-crmmeta .cmx-barra [data-dd="situacao"]{order:3}
#view-crmmeta .cmx-barra [data-dd="periodo"]{order:4}
#view-crmmeta .cmx-datas-txt{order:5;padding-left:2px}
#view-crmmeta .cmx-datas-txt b{font-size:12px}
#view-crmmeta .cmx-barra [data-dd="colunas"]{order:6;margin-left:auto}
#view-crmmeta .cmx-barra [data-acao="atualizar"]{order:7}
#view-crmmeta .cmx-barra [data-acao="exportar"]{order:8}
#view-crmmeta .cmx-atualizado,#view-crmmeta .cmx-atu-aviso{display:none}
/* sem "Colunas" (abas de análise) o Atualizar vai para a direita */
#view-crmmeta .cmx-barra:not(:has([data-dd="colunas"])) [data-acao="atualizar"]{margin-left:auto}
/* Atualizar: só o ícone (a hora da última coleta está na dica) */
#view-crmmeta .cmx-barra [data-acao="atualizar"]{position:relative;width:36px;padding:0;justify-content:center;gap:0}
#view-crmmeta .cmx-barra [data-acao="atualizar"]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#view-crmmeta .cmx-barra [data-acao="atualizar"] .cmx-ic{color:var(--ouro-deep)}
#view-crmmeta .cmx-barra [data-acao="atualizar"].tem-aviso::after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:#D4A017;box-shadow:0 0 0 2px var(--branco)}
#view-crmmeta .cmx-barra [data-acao="atualizar"][disabled]{opacity:.7;cursor:progress}
/* chave "Só com gasto" no lugar do botão dourado */
#view-crmmeta .cmx-chip[data-chave]{gap:8px;padding:0 12px 0 8px;border:1px solid var(--linha);border-style:solid;background:var(--branco);color:var(--c700);font-weight:500}
#view-crmmeta .cmx-chip[data-chave]:hover{border-color:var(--ouro-suave);color:var(--text-strong)}
#view-crmmeta .cmx-chip[data-chave].on{background:var(--branco);border-color:var(--linha);color:var(--text-strong);font-weight:500}
#view-crmmeta .cmx-chave{position:relative;width:30px;height:18px;border-radius:999px;background:color-mix(in srgb,var(--c300) 55%,transparent);transition:background .18s;flex:none}
#view-crmmeta .cmx-chave::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s}
#view-crmmeta .cmx-chip.on .cmx-chave{background:var(--ouro-btn)}
#view-crmmeta .cmx-chip.on .cmx-chave::after{transform:translateX(12px)}
@media (max-width:760px){
  #view-crmmeta .cmx-busca{flex:1 1 100%;width:auto}
  #view-crmmeta .cmx-barra [data-dd="colunas"]{margin-left:0}
  #view-crmmeta .cmx-barra [data-dd="periodo"]{order:4}
  #view-crmmeta .cmx-datas-txt{order:5;flex:1 1 auto}
  #view-crmmeta .cmx-barra [data-acao="atualizar"]{order:7;margin-left:auto}
  #view-crmmeta .cmx-barra [data-acao="exportar"]{order:8;margin-left:0}
}
/* cabe numa linha em 1440: busca 220, "Colunas:" sai (fica o ícone e o nome do conjunto) */
#view-crmmeta .cmx-barra{gap:8px}
#view-crmmeta .cmx-busca{width:220px}
#view-crmmeta .cmx-barra [data-dd="colunas"] .cmx-btn__rot{display:none}
/* barra "Ir para" e cabeçalho presos: cobrem a faixa acima deles, para o conteúdo não aparecer por cima ao rolar */
#view-crmmeta .cmx-indice{box-shadow:0 -24px 0 0 var(--branco),0 8px 20px -16px rgba(20,16,10,.3)}
#view-crmmeta .cmx-bloco2>.cmx-tbl.cmx-cabe thead th{box-shadow:0 1px 0 var(--linha),0 -9px 0 0 var(--branco)}
/* a barra "Ir para" não rola nem esmaece; quem rola é a trilha de dentro (assim a cobertura de cima não é cortada) */
#view-crmmeta .cmx-indice{overflow:visible;-webkit-mask-image:none;mask-image:none;flex-wrap:nowrap}
#view-crmmeta .cmx-indice__trilha{display:flex;align-items:center;gap:6px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
#view-crmmeta .cmx-indice__trilha::-webkit-scrollbar{display:none}
#view-crmmeta .cmx-indice__trilha button{flex:none}
/* celular: busca · chave + colunas · período + atualizar + exportar (ícones) · data embaixo */
@media (max-width:760px){
  #view-crmmeta .cmx-busca{order:1;flex:1 1 100%}
  #view-crmmeta .cmx-chip{order:2}
  #view-crmmeta .cmx-barra [data-dd="evento"]{order:2}
  #view-crmmeta .cmx-barra [data-dd="situacao"]{order:3}
  #view-crmmeta .cmx-barra [data-dd="colunas"]{order:3;margin-left:auto}
  #view-crmmeta .cmx-barra [data-dd="periodo"]{order:4}
  #view-crmmeta .cmx-barra [data-acao="atualizar"]{order:5;margin-left:auto}
  #view-crmmeta .cmx-barra [data-acao="exportar"]{order:6;margin-left:0;width:36px;padding:0;justify-content:center;gap:0}
  #view-crmmeta .cmx-barra [data-acao="exportar"]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #view-crmmeta .cmx-datas-txt{order:7;flex:1 1 100%;padding-left:2px}
}
@media (max-width:760px){
  #view-crmmeta .cmx-barra{padding:12px;gap:8px 6px}
  #view-crmmeta .cmx-chip[data-chave]{padding:0 10px 0 6px;gap:6px;font-size:12.5px}
  #view-crmmeta .cmx-barra [data-dd="colunas"] .cmx-btn{padding:0 10px;font-size:12.5px;gap:6px}
}

/* ======================= v3 "altíssimo nível" (Higor 21/10) ======================= */
/* ---------- rótulos do resumo cabem numa linha ---------- */
#view-crmmeta .cmx-res__i>span{letter-spacing:.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- carregando: esqueleto da tela em vez dos três pontinhos ---------- */
#view-crmmeta .cmx-carregando{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:20px}
#view-crmmeta .cmx-carregando span,#view-crmmeta .cmx-carregando::before,#view-crmmeta .cmx-carregando::after{content:"";display:block;width:auto;height:96px;border-radius:12px;animation:cmxBrilho 1.3s ease-in-out infinite;background:linear-gradient(90deg,var(--creme2) 0%,color-mix(in srgb,var(--creme2) 40%,var(--branco)) 50%,var(--creme2) 100%);background-size:200% 100%;opacity:1;transform:none}
#view-crmmeta .cmx-carregando::before,#view-crmmeta .cmx-carregando::after{grid-column:span 3}
#view-crmmeta .cmx-carregando::after{grid-column:1/-1;height:320px}
#view-crmmeta .cmx-carregando span:nth-child(2),#view-crmmeta .cmx-carregando span:nth-child(3){animation-delay:.12s}
@keyframes cmxBrilho{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){#view-crmmeta .cmx-carregando span,#view-crmmeta .cmx-carregando::before,#view-crmmeta .cmx-carregando::after{animation:none}}

/* ---------- criativos: miniatura maior, código do Meta discreto ---------- */
#view-crmmeta .cmx-cria{gap:12px}
#view-crmmeta .cmx-cria img{width:56px;height:56px;border-radius:10px;box-shadow:0 2px 8px -4px rgba(20,16,10,.35);transition:transform .18s}
#view-crmmeta .cmx-cria:hover img{transform:scale(1.06)}
#view-crmmeta .cmx-cria small{font-size:10.5px;color:var(--c300);font-variant-numeric:tabular-nums}

/* ---------- celular: cada linha de tabela vira um cartão (rótulos vêm de crm-meta-ux.js) ---------- */
@media (max-width:760px){
  #view-crmmeta .cmx-tbl,#view-crmmeta .cmx-bloco2>.cmx-tbl{max-height:none;overflow:visible;border:0;margin:0;background:none;-webkit-mask-image:none;mask-image:none}
  #view-crmmeta .cmx-bloco2>.cmx-tbl{margin:4px 0 0}
  #view-crmmeta .cmx-tbl table,#view-crmmeta .cmx-tbl tbody,#view-crmmeta .cmx-tbl tfoot{display:block;min-width:0;width:100%}
  #view-crmmeta .cmx-tbl thead{display:none}
  #view-crmmeta .cmx-tbl tbody tr,#view-crmmeta .cmx-tbl tfoot tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0 0 10px;padding:14px;border:1px solid var(--linha);border-radius:14px;background:var(--branco)}
  #view-crmmeta .cmx-tbl tbody tr.cmx-oculta{display:none}
  #view-crmmeta .cmx-tbl tfoot tr{background:color-mix(in srgb,var(--floral) 45%,var(--branco));border-color:var(--ouro-suave)}
  #view-crmmeta .cmx-tbl td,#view-crmmeta .cmx-tbl tfoot td{position:static;display:block;min-width:0;max-width:none;padding:0;border:0;background:none !important;box-shadow:none !important;text-align:left !important;white-space:normal;font-size:13.5px;font-weight:600;color:var(--text-strong)}
  #view-crmmeta .cmx-tbl td::before{content:attr(data-rot);display:block;margin-bottom:2px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c700)}
  #view-crmmeta .cmx-tbl td.cmx-nome{grid-column:1/-1;font-size:14px;padding-bottom:10px;border-bottom:1px solid var(--linha)}
  #view-crmmeta .cmx-tbl td.cmx-nome::before{display:none}
  #view-crmmeta .cmx-tbl td.cmx-nome .cmx-link{-webkit-line-clamp:3}
  #view-crmmeta .cmx-tbl td.cmx-chk{display:none}
  #view-crmmeta .cmx-tbl td.cmx-g-crm{color:var(--ouro-deep)}
  #view-crmmeta .cmx-tbl td.cmx-zero,#view-crmmeta .cmx-tbl td .cmx-zero{color:var(--c300)}
  #view-crmmeta .cmx-tbl td:empty{display:none}
  #view-crmmeta .cmx-tbl td.cmx-vazio{grid-column:1/-1;text-align:center !important}
  #view-crmmeta .cmx-tbl td.cmx-vazio::before{display:none}
  #view-crmmeta .cmx-mais{margin:0;border:1px solid var(--linha);border-radius:12px}
}
/* resumo: quantos cartões vierem, ocupam a largura (3 numa aba, 6 noutra) */
#view-crmmeta .cmx-res{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
#view-crmmeta .cmx-res__i>span{white-space:normal;overflow:visible}
/* Alertas: os contadores já estão no resumo do topo; a linha "27 críticos · 16 altos · 19 médios" repetia */
#view-crmmeta .cmx-corpo>.cmx-res~.cmx-legenda:has(>span>b){display:none}
@media (max-width:760px){
  #view-crmmeta .cmx-tbl td,#view-crmmeta .cmx-tbl tfoot td{border:0 !important}
  #view-crmmeta .cmx-tbl td.cmx-nome{border-bottom:1px solid var(--linha) !important}
  #view-crmmeta .cmx-res{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* esqueleto visível nos dois temas: tom do texto bem leve, brilho passando */
#view-crmmeta .cmx-carregando span,#view-crmmeta .cmx-carregando::before,#view-crmmeta .cmx-carregando::after{background:linear-gradient(90deg,color-mix(in srgb,var(--text-strong) 6%,transparent) 0%,color-mix(in srgb,var(--text-strong) 12%,transparent) 50%,color-mix(in srgb,var(--text-strong) 6%,transparent) 100%);background-size:200% 100%}

/* ---------- hover e transição: um tom só, igual nos dois temas, sem "rasgar" a linha ---------- */
#view-crmmeta .cmx,.cmx-ord{--cmx-hov:color-mix(in srgb,var(--ouro) 9%,transparent);--cmx-hov-forte:color-mix(in srgb,var(--ouro) 16%,transparent)}
/* linha da tabela: troca de cor na hora e em todas as células juntas (antes as colunas fixas trocavam
   na hora e o resto em 0,12 s, a linha parecia rasgada) */
#view-crmmeta .cmx-tbl tbody td,#view-crmmeta .cmx-tbl .cmx-nome,#view-crmmeta .cmx-tbl .cmx-chk{transition:none}
#view-crmmeta .cmx-tbl tbody tr:hover td{background:color-mix(in srgb,var(--ouro) 7%,var(--branco))}
#view-crmmeta .cmx-tbl tbody tr.is-sel td{background:color-mix(in srgb,var(--ouro) 13%,var(--branco))}
#view-crmmeta .cmx-tbl tbody tr.is-sel:hover td{background:color-mix(in srgb,var(--ouro) 17%,var(--branco))}
/* destaques que usavam o "floral" (some no escuro) passam a usar o dourado transparente */
#view-crmmeta .cmx-tbl thead th button[data-ordena]:hover,#view-crmmeta .cmx-tbl thead th.is-menu button[data-ordena]{background:var(--cmx-hov)}
#view-crmmeta .cmx-cal__d:hover:not(:disabled){background:var(--cmx-hov-forte)}
#view-crmmeta .cmx-cal__d.is-entre{background:var(--cmx-hov-forte)}
#view-crmmeta .cmx-menu__it:hover{background:var(--cmx-hov)}
#view-crmmeta .cmx-menu__it.on{background:var(--cmx-hov)}
.cmx-ord__it:hover,.cmx-ord__it:focus-visible{background:var(--cmx-hov)}
#view-crmmeta .cmx-dica:hover,#view-crmmeta .cmx-dica:focus-visible{background:var(--cmx-hov-forte)}
#view-crmmeta .cmx-indice button.on,#view-crmmeta .cmx-mais button[data-mais]{background:var(--cmx-hov-forte)}
/* cartões do resumo e do Não enviou: só borda e sombra, mesma duração */
#view-crmmeta .cmx-res__i,#view-crmmeta .cmx-motivo{transition:border-color .16s ease,box-shadow .16s ease}
#view-crmmeta .cmx-res__i:hover{box-shadow:0 6px 18px -12px rgba(20,16,10,.28)}
[data-theme="dark"] #view-crmmeta .cmx-res__i:hover,[data-theme="dark"] #view-crmmeta .cmx-motivo:hover{box-shadow:0 6px 18px -10px rgba(0,0,0,.6)}
/* botões e abas: mesma curva e duração em todos */
#view-crmmeta .cmx-btn,#view-crmmeta .cmx-chip,#view-crmmeta .cmx-busca,#view-crmmeta .cmx-aba,#view-crmmeta .cmx-indice button,#view-crmmeta .cmx-mais button,#view-crmmeta .cmx-ler{transition:color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease}
#view-crmmeta .cmx-btn:hover:not(:disabled){border-color:var(--ouro-suave);background:var(--cmx-hov)}
#view-crmmeta .cmx-btn--pri:hover{background:var(--ouro-deep)}
#view-crmmeta .cmx-chip[data-chave]:hover{background:var(--cmx-hov)}
#view-crmmeta .cmx-link{transition:none}

/* chave "Só com gasto" desliza ao trocar (crm-meta-ux.js põe a posição antiga por um quadro) */
#view-crmmeta .cmx-chip.cmx-de-desligado .cmx-chave{background:color-mix(in srgb,var(--c300) 55%,transparent);transition:none}
#view-crmmeta .cmx-chip.cmx-de-desligado .cmx-chave::after{transform:none;transition:none}
#view-crmmeta .cmx-chip.cmx-de-ligado .cmx-chave{background:var(--ouro-btn);transition:none}
#view-crmmeta .cmx-chip.cmx-de-ligado .cmx-chave::after{transform:translateX(12px);transition:none}
#view-crmmeta .cmx-chave,#view-crmmeta .cmx-chave::after{transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
/* criativos: sem o código do Meta na tela (fica na dica); prévia grande ao passar o mouse */
#view-crmmeta .cmx-cria small{display:none}
#view-crmmeta .cmx-cria img{cursor:zoom-in}
.cmx-previa-img{position:fixed;z-index:300;width:240px;height:240px;padding:6px;border:1px solid var(--linha);border-radius:14px;background:var(--branco);box-shadow:0 18px 40px rgba(20,16,10,.25);pointer-events:none;animation:cmxOrd .14s ease-out}
.cmx-previa-img img{width:100%;height:100%;object-fit:contain;border-radius:9px;background:var(--creme2);display:block}
@media (prefers-reduced-motion:reduce){.cmx-previa-img{animation:none}}
/* escuro: o dourado precisa de um pouco mais para aparecer sobre o fundo marrom */
[data-theme="dark"] #view-crmmeta .cmx-tbl tbody tr:hover td{background:color-mix(in srgb,var(--ouro) 14%,var(--branco))}
[data-theme="dark"] #view-crmmeta .cmx-tbl tbody tr.is-sel td{background:color-mix(in srgb,var(--ouro) 20%,var(--branco))}
[data-theme="dark"] #view-crmmeta .cmx,[data-theme="dark"] .cmx-ord{--cmx-hov:color-mix(in srgb,var(--ouro) 15%,transparent);--cmx-hov-forte:color-mix(in srgb,var(--ouro) 24%,transparent)}

/* ======================= acabamento sênior (Higor 21/10: "o mais alto nível") ======================= */
/* ---------- contraste: texto pequeno nunca no cinza mais claro (o --c300 ficava abaixo de 4,5:1) ---------- */
#view-crmmeta .cmx,.cmx-ord,.cmx-avisos{--cmx-fraco:color-mix(in srgb,var(--c700) 82%,var(--branco))}
#view-crmmeta .cmx-tbl td.cmx-zero,#view-crmmeta .cmx-tbl td .cmx-zero,#view-crmmeta .cmx-cal__sem span,#view-crmmeta .cmx-indice>span,#view-crmmeta .cmx-heat__cab span,#view-crmmeta .cmx-heat__rod span,#view-crmmeta .cmx-legenda__dica,#view-crmmeta .cmx-cal__d.is-fora,#view-crmmeta .cmx-datas span{color:var(--cmx-fraco)}
#view-crmmeta .cmx-tbl td.cmx-zero,#view-crmmeta .cmx-tbl td .cmx-zero{opacity:.75}
/* nada menor que 11px */
#view-crmmeta .cmx-res__i>span,#view-crmmeta .cmx-tbl thead tr.cmx-l2 th,#view-crmmeta .cmx-indice>span,#view-crmmeta .cmx-heat__cab span,#view-crmmeta .cmx-heat__rod span,#view-crmmeta .cmx-cal__sem span,#view-crmmeta .cmx-menu__tit{font-size:11px}

/* ---------- linha de tendência dentro dos cartões (valor usado, leads, custo por lead) ---------- */
#view-crmmeta .cmx-res__i{position:relative}
#view-crmmeta .cmx-tend{display:block;width:100%;height:28px;margin-top:auto;padding-top:8px;overflow:visible}
#view-crmmeta .cmx-tend polyline{fill:none;stroke:var(--ouro);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
#view-crmmeta .cmx-tend polygon{fill:color-mix(in srgb,var(--ouro) 12%,transparent)}
#view-crmmeta .cmx-tend circle{fill:var(--ouro-deep);vector-effect:non-scaling-stroke}

/* ---------- vazio e erro: ícone em círculo, frase central, botão no erro ---------- */
#view-crmmeta .cmx-vazio-bloco{flex-direction:column;gap:12px;padding:56px 20px;border:1px dashed var(--linha);border-radius:14px;background:color-mix(in srgb,var(--creme) 40%,var(--branco));text-align:center;color:var(--c700)}
#view-crmmeta .cmx-vazio-bloco>svg{width:22px;height:22px;padding:13px;box-sizing:content-box;border-radius:50%;background:var(--cmx-hov-forte);color:var(--ouro-deep)}
#view-crmmeta .cmx-vazio-bloco b{font-size:14px;font-weight:600;color:var(--text-strong);max-width:420px;line-height:1.45}
#view-crmmeta .cmx-vazio-bloco--erro{border-style:solid;border-color:color-mix(in srgb,#C0392B 35%,var(--linha));background:color-mix(in srgb,#FBE6E3 45%,var(--branco))}
#view-crmmeta .cmx-vazio-bloco--erro>svg{background:color-mix(in srgb,#C0392B 14%,transparent);color:#A1271B}
[data-theme="dark"] #view-crmmeta .cmx-vazio-bloco--erro{background:#2b1714}
[data-theme="dark"] #view-crmmeta .cmx-vazio-bloco--erro>svg{color:#f0a497}
#view-crmmeta .cmx-tentar{margin-top:4px}
#view-crmmeta .cmx-tbl td.cmx-vazio{padding:40px 12px !important;font-weight:500}

/* ---------- avisos no canto (Exportar, Atualizar, erro) ---------- */
.cmx-avisos{position:fixed;right:20px;bottom:20px;z-index:400;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.cmx-aviso{display:flex;align-items:center;gap:10px;max-width:380px;padding:11px 10px 11px 14px;border:1px solid var(--linha);border-radius:12px;background:var(--branco);box-shadow:0 14px 34px rgba(20,16,10,.18),0 2px 6px rgba(20,16,10,.08);font-family:inherit;font-size:13px;line-height:1.4;color:var(--text-strong);pointer-events:auto;animation:cmxAvisoEntra .22s cubic-bezier(.2,.8,.2,1)}
.cmx-aviso svg{width:18px;height:18px;flex:none}
.cmx-aviso--ok svg{color:#1E7A3C}
.cmx-aviso--info svg{color:var(--ouro)}
.cmx-aviso--aviso svg{color:#B07A00}
[data-theme="dark"] .cmx-aviso--ok svg{color:#8fd6a3}
[data-theme="dark"] .cmx-aviso--aviso svg{color:#e6c463}
.cmx-aviso button{flex:none;width:24px;height:24px;margin-left:4px;border:0;border-radius:6px;background:none;font-size:16px;line-height:1;color:var(--c700);cursor:pointer}
.cmx-aviso button:hover{background:color-mix(in srgb,var(--ouro) 12%,transparent);color:var(--text-strong)}
.cmx-aviso.is-saindo{animation:cmxAvisoSai .2s ease-in forwards}
@keyframes cmxAvisoEntra{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes cmxAvisoSai{to{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.cmx-aviso,.cmx-aviso.is-saindo{animation:none}}
@media (max-width:760px){.cmx-avisos{left:12px;right:12px;bottom:12px;align-items:stretch}.cmx-aviso{max-width:none}}
/* zero: apagado mas legível (cinza médio, sem transparência; ≥ 4,5:1 nos dois temas) */
#view-crmmeta .cmx-tbl td.cmx-zero,#view-crmmeta .cmx-tbl td .cmx-zero{color:var(--c700);opacity:1;font-weight:400}
#view-crmmeta .cmx,.cmx-ord,.cmx-avisos{--cmx-fraco:var(--c700)}

/* ======================= micro-interações refinadas (Higor 21/10) ======================= */
/* ---------- checkbox da marca: tamanho fixo (não mexe ao clicar), check desenhando ---------- */
#view-crmmeta .cmx-tbl input[type="checkbox"]{-webkit-appearance:none;appearance:none;display:inline-block;box-sizing:border-box;width:18px;height:18px;min-width:18px;margin:0;padding:0;vertical-align:middle;border:1.5px solid color-mix(in srgb,var(--c700) 45%,transparent);border-radius:5px;background:var(--branco) center/12px 12px no-repeat;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease}
#view-crmmeta .cmx-tbl input[type="checkbox"]:hover{border-color:var(--ouro);box-shadow:0 0 0 4px var(--cmx-hov)}
#view-crmmeta .cmx-tbl input[type="checkbox"]:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
#view-crmmeta .cmx-tbl input[type="checkbox"]:checked{border-color:var(--ouro-btn);background-color:var(--ouro-btn);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
#view-crmmeta .cmx-tbl input[type="checkbox"]:indeterminate{border-color:var(--ouro-btn);background-color:var(--ouro-btn);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")}
#view-crmmeta .cmx-tbl input[type="checkbox"].cmx-pulso{animation:cmxPulso2 .34s cubic-bezier(.2,.8,.2,1)}
#view-crmmeta .cmx-tbl input[type="checkbox"].cmx-pulso:checked{animation:cmxPulso2 .34s cubic-bezier(.2,.8,.2,1),cmxCheck .3s ease-out}
/* sem mudar de tamanho nem de lugar: só um anel que se abre e some */
@keyframes cmxPulso2{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ouro) 40%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
@keyframes cmxCheck{from{background-size:0 0}to{background-size:12px 12px}}
/* célula do checkbox: largura e altura fixas, nada desloca quando a linha fica marcada */
#view-crmmeta .cmx-tbl .cmx-chk{width:44px;min-width:44px;max-width:44px;padding:0 0 0 16px;line-height:0}
#view-crmmeta .cmx-tbl tbody tr.is-sel td.cmx-chk{box-shadow:inset 3px 0 0 var(--ouro)}
#view-crmmeta .cmx-tbl tbody tr td{transition:none}
/* "N selecionados" na aba aparece sem empurrar com tranco */
#view-crmmeta .cmx-aba__sel{animation:cmxSurge .22s ease-out}

/* ---------- Exportar só com o ícone (igual ao Atualizar); "CRM × Meta" sem o ícone ---------- */
#view-crmmeta .cmx-barra [data-acao="exportar"]{position:relative;width:36px;padding:0;justify-content:center;gap:0}
#view-crmmeta .cmx-barra [data-acao="exportar"]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#view-crmmeta .cmx-barra [data-acao="exportar"] .cmx-ic{color:var(--ouro-deep)}
#view-crmmeta .cmx-barra [data-dd="colunas"] .cmx-btn>.cmx-ic:not(.cmx-ic--seta){display:none}
#view-crmmeta .cmx-barra [data-dd="colunas"] .cmx-btn{padding:0 10px 0 14px}

/* ---------- menus (período, colunas): abrem com fade e escala; seta gira ---------- */
#view-crmmeta .cmx-dd.cmx-abrindo .cmx-menu{animation:cmxMenu .2s cubic-bezier(.2,.8,.2,1);transform-origin:top left}
#view-crmmeta .cmx-barra [data-dd="colunas"].cmx-abrindo .cmx-menu{transform-origin:top right}
#view-crmmeta .cmx-dd.cmx-abrindo .cmx-ic--seta{animation:cmxSeta .2s ease-out}
@keyframes cmxMenu{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cmxSeta{from{transform:rotate(0)}to{transform:rotate(180deg)}}

/* ---------- troca de aba: conteúdo entra suave, traço da aba cresce ---------- */
#view-crmmeta .cmx-corpo.cmx-troca{animation:cmxTroca .28s cubic-bezier(.2,.8,.2,1)}
@keyframes cmxTroca{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#view-crmmeta .cmx-aba{position:relative}
#view-crmmeta .cmx-aba.on{border-bottom-color:transparent}
#view-crmmeta .cmx-aba.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--ouro)}
#view-crmmeta .cmx-aba.cmx-aba--entra::after{animation:cmxTraco .3s cubic-bezier(.2,.8,.2,1)}
@keyframes cmxTraco{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- linhas que aparecem ("Mostrar mais") e nota que abre ("Como ler") ---------- */
#view-crmmeta .cmx-surge{animation:cmxSurge .32s ease-out}
@keyframes cmxSurge{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
#view-crmmeta .cmx-ler svg{transition:transform .2s ease}
#view-crmmeta .cmx-ler[aria-expanded="true"] svg{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  #view-crmmeta .cmx-tbl input[type="checkbox"].cmx-pulso,#view-crmmeta .cmx-dd.cmx-abrindo .cmx-menu,#view-crmmeta .cmx-dd.cmx-abrindo .cmx-ic--seta,#view-crmmeta .cmx-corpo.cmx-troca,#view-crmmeta .cmx-aba.cmx-aba--entra::after,#view-crmmeta .cmx-surge,#view-crmmeta .cmx-aba__sel{animation:none}
}
@media (max-width:760px){#view-crmmeta .cmx-aba.on::after{left:6px;right:6px}}
/* etiquetas dentro da aba ("43", "1 selecionado") não podem aumentar a altura da aba: senão a tabela inteira
   desce 3px quando você marca uma linha */
#view-crmmeta .cmx-aba em,#view-crmmeta .cmx-aba .cmx-aba__sel{height:20px;line-height:20px;padding-top:0;padding-bottom:0;margin-top:-4px;margin-bottom:-4px;box-sizing:border-box}
#view-crmmeta .cmx-aba{height:44px;box-sizing:border-box}

/* abas mais respiráveis (Higor 21/10: "muito grudadas"): espaço entre elas acompanha a largura da tela
   (2px → até 18px), assim não quebra a linha em tela menor */
#view-crmmeta .cmx-aba+.cmx-aba{margin-left:clamp(4px,1vw,18px)}
#view-crmmeta .cmx-aba{padding-left:6px;padding-right:6px}
#view-crmmeta .cmx-aba.on::after{left:4px;right:4px}
@media (min-width:900px){#view-crmmeta .cmx-abas{padding:0 22px}}
@media (max-width:760px){#view-crmmeta .cmx-aba+.cmx-aba{margin-left:10px}}

/* ---------- abas sem traços (Higor 21/10: "muito traço, carregado") ----------
   sem sublinhado, sem linha entre as fileiras e embaixo; a aba aberta é um fundo dourado claro arredondado */
#view-crmmeta .cmx-abas{border-bottom:0;padding:12px 22px 6px}
#view-crmmeta .cmx-abas__div+.cmx-abas__grupo{border-top:0;margin-top:6px}
#view-crmmeta .cmx-aba{height:36px;padding:0 10px;border:0;border-radius:10px;margin-bottom:0}
#view-crmmeta .cmx-aba+.cmx-aba{margin-left:clamp(2px,.35vw,6px)}
#view-crmmeta .cmx-aba.on::after{content:none}
#view-crmmeta .cmx-aba:hover:not(.on){background:var(--cmx-hov);color:var(--text-strong)}
#view-crmmeta .cmx-aba.on{background:var(--cmx-hov-forte);color:var(--ouro-deep)}
#view-crmmeta .cmx-aba.on .cmx-ic{color:var(--ouro-deep)}
#view-crmmeta .cmx-aba.cmx-aba--entra{animation:cmxPilula .26s ease-out}
@keyframes cmxPilula{from{background-color:transparent}to{background-color:var(--cmx-hov-forte)}}
/* a barra de filtros ganha uma linha fina em cima, a única separação que fica entre navegação e conteúdo */
#view-crmmeta .cmx-barra{border-top:1px solid var(--cmx-sep)}
@media (max-width:760px){#view-crmmeta .cmx-abas{padding:10px 14px 4px}#view-crmmeta .cmx-aba{padding:0 9px;height:34px}}
@media (prefers-reduced-motion:reduce){#view-crmmeta .cmx-aba.cmx-aba--entra{animation:none}}

/* ---------- sem o quadro branco em volta (Higor 21/10: "elimina esse container, largura maior, menos traços") ----------
   abas, barra, cartões e tabela ficam direto na página, alinhados à capa; sem borda, sombra nem fundo próprio */
#view-crmmeta .cmx-quadro{border:0;border-radius:0;background:none;box-shadow:none}
#view-crmmeta .cmx-abas,#view-crmmeta .cmx-abas.cmx-abas--sub{padding-left:0;padding-right:0}
#view-crmmeta .cmx-barra{padding-left:0;padding-right:0;background:none;border-top:0;border-bottom:0}
#view-crmmeta .cmx-corpo{padding-left:0;padding-right:0;padding-top:6px}
@media (min-width:900px){#view-crmmeta .cmx-abas{padding:4px 0 2px}}
@media (max-width:760px){
  #view-crmmeta .cmx-abas{padding:4px 0 2px}
  #view-crmmeta .cmx-barra{padding:10px 0}
  #view-crmmeta .cmx-corpo{padding:6px 0 0}
}
/* 20px a mais acima da barra de busca, separando das abas (Higor 21/10) */
#view-crmmeta .cmx-barra{margin-top:20px}
/* mesmo respiro acima e abaixo das abas: capa → abas = abas → busca = 34px (Higor 21/10) */
#view-crmmeta .cmx-abas,#view-crmmeta .cmx-abas.cmx-abas--sub{padding-top:14px}