/* [COM-LAYOUT-V1] Comissões no visual do LAYOUT-SIDEBAR (22/10/2026) — só aparência, nenhuma regra muda */

/* acento do módulo = acento do sistema (sai o âmbar/marrom) */
.cx-wrap { --cx-most: var(--terracota); --cx-terr: var(--terracota); max-width:none !important; padding:18px 28px 40px !important; }

/* cabeçalho: a faixa do módulo já diz "Comissões" → some o selo da loja e o título repetido */
.cx-wrap .cx-head { display:none !important; }

/* abas: sublinhado, iguais às do Admin, presas no topo ao rolar */
.cx-wrap .cx-tabs { position:sticky; top:var(--lx-hb-h, 60px); z-index:6; gap:2px !important; margin:0 0 18px !important; padding:0 2px; background:var(--bg-0); border-bottom:1px solid var(--border); flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; }
.cx-wrap .cx-tabs::-webkit-scrollbar { display:none; }
.cx-wrap .cx-tab { background:transparent !important; border:0 !important; border-bottom:2px solid transparent !important; border-radius:0 !important; padding:11px 14px !important; margin-bottom:-1px; color:var(--text-mid) !important; font-weight:500 !important; font-size:13px !important; white-space:nowrap; box-shadow:none !important; }
.cx-wrap .cx-tab:hover { color:var(--text) !important; }
.cx-wrap .cx-tab.ativa { color:var(--terracota) !important; border-bottom-color:var(--terracota) !important; font-weight:600 !important; }

/* cartões e botões */
.cx-wrap .cx-card, .cx-wrap .cxmec, .cx-wrap .cx-res-card { border-radius:12px !important; border-color:var(--border) !important; box-shadow:0 1px 2px rgba(24,24,27,.04); }
.cx-wrap .cx-card-hdr, .cx-wrap .cx-card-hdr span:first-child { font-size:11.5px !important; letter-spacing:.9px !important; color:var(--text-mid) !important; }
.cx-wrap .cx-in, .cx-wrap .cxmInp { height:36px; border-radius:9px !important; border:1px solid var(--border) !important; background:var(--bg-1) !important; color:var(--text) !important; font-size:13px !important; padding:0 10px !important; }
.cx-wrap .cx-btn-primary, .cx-wrap .cxmBtn.pri { background:var(--terracota) !important; border-color:var(--terracota) !important; color:#fff !important; border-radius:9px !important; }
.cx-wrap .cx-btn-sec, .cx-wrap .cx-btn-ghost, .cx-wrap .cxmBtn:not(.pri) { border-radius:9px !important; border:1px solid var(--border) !important; background:var(--bg-1) !important; color:var(--text) !important; }
.cx-wrap .cxmec-sw button.on { background:var(--terracota) !important; color:#fff !important; }

/* Calculadora: resultado */
.cx-wrap .cx-res-faixa { border-color:var(--terracota) !important; }
.cx-wrap .cx-res-faixa-nome { color:var(--terracota) !important; }
.cx-wrap .cx-nota { border-left-color:var(--terracota) !important; border-radius:0 10px 10px 0; background:var(--bg-2) !important; }

/* grade de sensibilidade: tons mais calmos, mesma leitura (verde bom → vermelho Corporativo) */
.cx-wrap .cx-sb-cel { border:2px solid var(--bg-card) !important; border-radius:6px; font-weight:600; font-size:11px; }
.cx-wrap .cx-c1 { background:#DCFCE7 !important; color:#166534 !important; }
.cx-wrap .cx-c2 { background:#ECFCCB !important; color:#3F6212 !important; }
.cx-wrap .cx-c3 { background:#FEF3C7 !important; color:#92400E !important; }
.cx-wrap .cx-c4 { background:#E0E7FF !important; color:#3730A3 !important; }
.cx-wrap .cx-ccorp { background:#FEE2E2 !important; color:#991B1B !important; }
.cx-wrap .cx-csale { background:#F3E8FF !important; color:#6B21A8 !important; }
.cx-wrap .cx-sb-atual { outline:2px solid var(--text) !important; outline-offset:-2px; }
html[data-tema="escuro"] .cx-wrap .cx-c1 { background:rgba(34,197,94,.18) !important; color:#86EFAC !important; }
html[data-tema="escuro"] .cx-wrap .cx-c2 { background:rgba(132,204,22,.18) !important; color:#BEF264 !important; }
html[data-tema="escuro"] .cx-wrap .cx-c3 { background:rgba(245,158,11,.18) !important; color:#FCD34D !important; }
html[data-tema="escuro"] .cx-wrap .cx-c4 { background:rgba(99,102,241,.22) !important; color:#C7D2FE !important; }
html[data-tema="escuro"] .cx-wrap .cx-ccorp { background:rgba(239,68,68,.18) !important; color:#FCA5A5 !important; }
html[data-tema="escuro"] .cx-wrap .cx-csale { background:rgba(168,85,247,.2) !important; color:#E9D5FF !important; }

/* Margem por Pedido: indicadores em grade uniforme */
#cxm-root .cxmKpis { display:grid !important; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:10px !important; margin-bottom:14px !important; }
#cxm-root .cxmKpi { background:var(--bg-card) !important; border:1px solid var(--border) !important; border-radius:12px !important; padding:12px 14px !important; min-width:0 !important; min-height:78px; box-shadow:0 1px 2px rgba(24,24,27,.04); }
#cxm-root .cxmKpi b { font-size:10.5px !important; letter-spacing:.7px !important; color:var(--text-mid); opacity:1 !important; margin-bottom:6px; }
#cxm-root .cxmKpi > span { font-size:17px !important; font-weight:700 !important; line-height:1.25; display:block; white-space:normal; }
#cxm-root .cxmKpi > span small, #cxm-root .cxmKpi > span span, #cxm-root .cxmKpi > span i { font-size:11.5px !important; font-weight:500 !important; color:var(--text-mid); line-height:1.35; }

/* chips de mês e filtros rápidos */
#cxm-root .cxmChips { gap:6px !important; margin-bottom:12px !important; }
#cxm-root .cxmChip { border-radius:999px !important; border:1px solid var(--border) !important; background:var(--bg-1) !important; color:var(--text-mid) !important; padding:4px 11px !important; font-size:12px !important; }
#cxm-root .cxmChip:hover { color:var(--text) !important; border-color:var(--border-hi) !important; }
#cxm-root .cxmChip.on, #cxm-root .cxmChip.ativo, #cxm-root .cxmChip[aria-pressed="true"] { background:var(--terracota) !important; border-color:var(--terracota) !important; color:#fff !important; }

/* barra de filtros: um bloco só, campos com a mesma altura */
#cxm-root > div:not([class]) { display:flex; flex-wrap:wrap; align-items:center; gap:8px !important; margin-bottom:10px !important; }
#cxm-root .cxmWrap { border:1px solid var(--border) !important; border-radius:12px !important; overflow:auto; background:var(--bg-card); max-height:calc(100vh - 140px); }
#cxm-root .cxmT thead th { position:sticky; top:0; z-index:2; background:var(--bg-2) !important; color:var(--text-mid) !important; font-size:10.5px !important; letter-spacing:.6px; }
#cxm-root .cxmT tbody tr:hover td { background:var(--bg-2) !important; }
#cxm-root .cxmT tfoot td { position:sticky; bottom:0; background:var(--bg-2) !important; font-weight:700; }

@media (max-width: 900px) { .cx-wrap { padding:12px 16px 30px !important; } #cxm-root .cxmKpis { grid-template-columns:repeat(2, 1fr); } }

/* tabela dentro da área de conteúdo (antes ocupava a tela inteira, por baixo do menu lateral) */
#cxm-root .cxmWrap { width:auto !important; margin-left:0 !important; max-height:72vh !important; }
#cxm-root > div:not([class]) > .cxmInp { flex:1 1 140px; min-width:0; width:auto !important; }
#cxm-root > div:not([class]) > select.cxmInp { flex:1 1 150px; max-width:220px; }
#cxm-root > div:not([class]) > .cxmBtn, #cxm-root > div:not([class]) > label { flex:0 0 auto; }
#cxm-root > div:not([class]) > .cxmBtn { height:36px; padding:0 14px !important; }
#cxm-root > div:not([class]) > span { flex:1 1 100%; order:9; font-size:11.5px !important; color:var(--text-mid); }