/* ── Compras (compras.js): reaproveita o visual do Comercial (cm-*); aqui só o que é próprio ── */
/* grade de meses no menu */
.cp-meses{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:2px 0 6px;}
.cp-meses.off{opacity:.45;}
.cp-mes{position:relative;padding:6px 0 5px;border:1px solid var(--border);border-radius:6px;background:var(--surface2);color:var(--text);font-family:var(--sans);font-size:11.5px;cursor:pointer;line-height:1.1;}
.cp-mes small{display:block;font-size:9.5px;color:var(--muted);margin-top:1px;}
.cp-mes.zero{color:var(--muted);}
.cp-mes:hover:not(:disabled){border-color:var(--accent);}
.cp-mes.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;}
.cp-mes.on small{color:#fff;opacity:.85;}
.cp-mes.todos{grid-column:1/-1;}
.cp-mes:disabled{cursor:default;}
.cp-limpar{margin:0 0 0 6px;font-size:10.5px;text-transform:none;letter-spacing:0;}
/* card */
.cp-cc{color:var(--text);}
.cp-aprov{color:var(--green);font-weight:600;}
/* tabela dos centros de custo */
.cp-tab th:nth-child(1){width:34%;}
.cp-tab th:nth-child(2){width:14%;}
.cp-aguarda{color:var(--orange);font-weight:600;}

/* ── Visual mais leve no Compras (2026-10-16): menos negrito, cores suaves, cartões claros ── */
#comprasView .cm-col{border-top-width:2px;background:color-mix(in srgb,var(--surface) 70%,var(--bg));}
#comprasView .cm-col-cab{padding:10px 12px 8px;}
#comprasView .cm-col-nome{font-weight:500;font-size:12.5px;}
#comprasView .cm-col-n{background:transparent;color:var(--muted);font-weight:500;padding:0;min-width:0;}
#comprasView .cm-col-l2 b{font-weight:500;font-size:13px;color:var(--muted);}
#comprasView .cm-col-l2 span{font-size:10.5px;}
/* cartão: fundo claro, faixa fina, título sem negrito pesado */
#comprasView .cm-card{background:var(--surface);border-left-width:2px;gap:3px;padding:9px 11px;box-shadow:0 1px 2px rgba(0,0,0,.04);}
#comprasView .cm-card-tit{font-size:12.5px;}
#comprasView .cm-card-tit b{font-weight:500;}
#comprasView .cm-meta{font-size:10.5px;}
#comprasView .cm-cli{font-size:11.5px;color:var(--muted);}
#comprasView .cm-valor{font-weight:500;font-size:12px;}
#comprasView .cm-tag{font-size:10.5px;border-color:transparent;background:var(--surface2);}
#comprasView .cm-rodape{font-size:10.5px;border-top-style:solid;border-top-color:color-mix(in srgb,var(--border) 60%,transparent);}
#comprasView .cp-aprov,#comprasView .cp-aguarda{font-weight:500;}
/* menu: resultados sem números gritando; mês escolhido com tom suave */
#comprasView .cm-res{background:transparent;border-color:color-mix(in srgb,var(--border) 70%,transparent);padding:7px 10px;}
#comprasView .cm-res b{font-size:14px;font-weight:500;color:var(--text)!important;}
#comprasView .cm-res-rot{font-size:11px;}
#comprasView .cp-mes{background:transparent;border-color:color-mix(in srgb,var(--border) 70%,transparent);font-size:11px;}
#comprasView .cp-mes.on{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent);font-weight:500;}
#comprasView .cp-mes.on small{color:var(--accent);}
#comprasView .cm-add{border-style:dashed;font-size:11.5px;}
/* tabelas (Clientes no Comercial, Centros de custo no Compras): nomes e totais sem negrito pesado */
#comprasView .cm-tab td b{font-weight:500;}
#comprasView .cm-tab td.forte{font-weight:500;}
#comprasView .cm-tab tfoot td{font-weight:600;}
#comprasView .cm-tab th{font-weight:500;}