/* ==========================================================================
   COMISSÕES — bloco de comissão no alto da tela (spec crm-menu §6.2).
   Toda regra prefixada com .com- para não afetar outras telas. Só tokens --de-* de css/tokens.css:
   nenhuma cor escrita aqui. Fica dentro de .fin-wrap, que nunca rola de lado.
   ========================================================================== */

.com-bloco {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--de-borda);
  border-radius: var(--de-raio-card);
  background: var(--de-branco);
  font-variant-numeric: tabular-nums;
}
.com-bloco *, .com-bloco *::before, .com-bloco *::after { box-sizing: border-box; }

.com-total, .com-mes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  min-width: 0;
}
.com-rotulo {
  font-size: var(--de-tamanho-rotulo);
  font-weight: var(--de-peso-rotulo);
  letter-spacing: var(--de-espacamento-rotulo);
  text-transform: uppercase;
  color: var(--de-texto-secundario);
}
.com-valor {
  font-family: var(--de-fonte-titulo);
  font-size: var(--de-tamanho-numero-destaque);
  font-weight: 700;
  color: var(--de-grafite);
  overflow-wrap: anywhere;
}
.com-pendente { font-size: 15px; font-weight: 600; color: var(--de-texto-secundario); }
.com-partes { flex-basis: 100%; font-size: 13px; color: var(--de-texto-secundario); }

.com-percentual {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  min-width: 0;
}
.com-percentual .field { flex: 0 1 180px; min-width: 120px; margin: 0; }
.com-percentual input { width: 100%; min-height: 48px; }
.com-percentual .fin-principal { flex: 0 0 auto; }

.com-pilula {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: var(--de-raio-pilula);
  background: var(--de-laranja-claro2);
  color: var(--de-laranja-escuro);
  font-size: 12px;
  font-weight: 700;
}
.com-marca { font-size: 12px; font-weight: 700; color: var(--de-laranja-escuro); }

.com-mes .quiet { min-height: 44px; }
.com-ano { margin: 0; font-weight: 600; color: var(--de-grafite); }
.com-nota { margin: 0; font-size: 13px; color: var(--de-texto-secundario); }
.com-aviso {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--de-raio-controle);
  background: var(--de-laranja-claro);
  border: 1px solid var(--de-laranja-claro3);
  color: var(--de-laranja-escuro);
}

.com-tabela summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
  color: var(--de-grafite);
}
.com-tabela table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.com-tabela th, .com-tabela td {
  padding: 10px 8px;
  text-align: right;
  border-bottom: 1px solid var(--de-divisoria);
  font-size: 14px;
  white-space: nowrap; /* "mai/2026" e "Comissão" nunca quebram no meio (telas.css força 20px de lado nas células) */
}
.com-tabela table { display: block; max-width: 100%; overflow-x: auto; } /* no celular a tabela rola de lado em vez de quebrar palavra */
.com-tabela th:first-child { text-align: left; }
.com-tabela thead th { font-size: var(--de-tamanho-rotulo); color: var(--de-texto-secundario); }

/* F1 — comissão por banco e prazo (handoff/comissao-prazo/SPEC.md §7). A tabela e a lista de vendas rolam de lado
   dentro de .com-rolagem, com a coluna do banco/venda parada; a página nunca rola de lado. */
.com-dequem { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; min-width: 0; margin: 0 0 14px; }
.com-dequem .field { flex: 0 1 280px; min-width: 160px; margin: 0; }
.com-dequem input, .com-dequem select { width: 100%; min-height: 48px; }
.com-dequem .quiet { min-height: 48px; }
.com-de-outro { flex-basis: 100%; margin: 0; color: var(--de-grafite); }

.com-tabela-prazo { flex-basis: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.com-tabela-prazo legend { padding: 0; margin-bottom: 4px; font-weight: 700; color: var(--de-grafite); }
.com-outros summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--de-grafite); }

.com-rolagem { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
/* Prova na tela (A1): a regra global table{overflow:hidden} (telas.css) anulava o sticky da coluna do banco; quem rola
   é o .com-rolagem (mesma correção do PF-1 em financas.css). */
.com-grade { border-collapse: collapse; margin-top: 6px; overflow: visible; }
.com-grade th, .com-grade td {
  padding: 6px;
  border-bottom: 1px solid var(--de-divisoria);
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
}
.com-grade thead th { font-size: var(--de-tamanho-rotulo); color: var(--de-texto-secundario); }
.com-grade tbody th { position: sticky; left: 0; z-index: 1; background: var(--de-branco); font-weight: 600; color: var(--de-grafite); }
.com-grade thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--de-branco); }
.com-grade input { width: 64px; min-height: 44px; text-align: right; }
.com-grade small { display: block; font-weight: 400; color: var(--de-texto-secundario); }
.com-grade select { min-height: 44px; }

.com-sem-prazo {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--de-raio-controle);
  background: var(--de-laranja-claro);
  border: 1px solid var(--de-laranja-claro3);
  color: var(--de-laranja-escuro);
}
.com-alteracao { margin: 0; font-size: 13px; color: var(--de-texto-secundario); }
.com-vinda { display: block; font-size: 12px; color: var(--de-laranja-escuro); white-space: normal; }
.com-meses { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; padding: 0; border: 0; }
.com-meses legend { padding: 0; margin-bottom: 6px; font-weight: 700; color: var(--de-grafite); }
.com-caixa { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.com-caixa input { width: 20px; height: 20px; }

@media (max-width: 599px) {
  .com-bloco { padding: 16px; }
  .com-percentual .field { flex: 1 1 100%; }
  .com-percentual .fin-principal { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .com-bloco, .com-bloco * { transition: none; animation: none; }
}

/* Abas de Comissões: Comissões | Minhas finanças (só com o módulo financas) */
.com-abas { display: flex; gap: 6px; margin: 0 0 18px; border-bottom: 1px solid var(--de-borda); overflow-x: auto; }
.com-aba { padding: 10px 14px; font-weight: 600; color: var(--de-texto-secundario); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.com-aba:hover { color: var(--de-grafite); }
.com-aba.current { color: var(--de-grafite); border-bottom-color: var(--de-laranja-principal); }
.com-aba:focus-visible { outline: 3px solid var(--de-laranja-principal); outline-offset: -3px; border-radius: 6px; }