/* ================================================
   CONFERÊNCIA DE MODULAÇÃO — escopo .cfm-page
   paginas/comercial/conferencia_modulacao.py
   Tokens do tema (--theme-*), acento verde via --brand-text.
   Assinatura: o carpet plot dia × hora (Plotly). Todo o resto é quieto:
   sem gradiente, sem sombra repetida, sem caixa alta espaçada.
   Status = ícone + texto + cor (nunca só cor):
     aderente azul · divergente laranja · pendente/não se aplica cinza.
   ================================================ */

.cfm-page {
  --cfm-pos: #2166ac;          /* aderente / registrado acima do esperado */
  --cfm-neg: #b35806;          /* divergente / registrado abaixo do esperado */
  --cfm-cinza: var(--theme-mut);
  --cfm-raio: 10px;
  color: var(--theme-ink);
  padding: 1.25rem 1.5rem 2.5rem;
  max-width: 1480px;
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .cfm-page {
  --cfm-pos: #79b8ec;          /* 7:1 sobre o painel escuro */
  --cfm-neg: #f1a340;
}

/* foco visível em tudo que é interativo */
.cfm-page :focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
  border-radius: 4px;
}

/* botões: frase normal e cor lisa (o global usa caixa alta espaçada e gradiente) */
.cfm-page .comerc-btn {
  text-transform: none; letter-spacing: 0;
  background: var(--comerc-green); box-shadow: none;
}
.cfm-page .comerc-btn:hover { background: var(--comerc-green-light); box-shadow: none; }
.cfm-page .cfm-btn-sec {
  background: transparent; color: var(--theme-ink);
  border: 1px solid var(--theme-line); border-radius: 8px;
  padding: .5rem .9rem; font-weight: 600; font-size: .9rem;
}
.cfm-page .cfm-btn-sec:hover { border-color: var(--brand-text); color: var(--brand-text); }
.cfm-page .cfm-link {
  background: none; border: 0; padding: 0; color: var(--brand-text);
  font-size: .88rem; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; display: inline-flex; gap: .4rem;
  align-items: center;
}

/* ---------- abas ---------- */
.cfm-page .cfm-abas-pai { margin-top: .75rem; }
.cfm-page .cfm-abas {
  border-bottom: 1px solid var(--theme-line);
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.cfm-page .cfm-abas .cfm-aba {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  color: var(--theme-mut) !important;
  font-weight: 600; padding: .7rem 1.1rem !important;
  width: auto !important;
}
.cfm-page .cfm-abas .cfm-aba:hover { color: var(--theme-ink) !important; }
.cfm-page .cfm-abas .cfm-aba--ativa {
  color: var(--theme-ink) !important;
  border-bottom-color: var(--brand-text) !important;
  background: transparent !important;
}
.cfm-page .cfm-aba-corpo { padding-top: 1rem; display: flex; flex-direction: column; gap: 1rem; }

/* filtros: contrato e metodologia têm rótulos longos (nome + contraparte) */
.cfm-page .ui-filtro:has(#cfm-contrato),
.cfm-page .ui-filtro:has(#cfm-sim-contrato) { min-width: 300px; }
.cfm-page .ui-filtro:has(#cfm-metodologia) { min-width: 250px; }
.cfm-page .ui-filtro:has(#cfm-hist-contratos) { min-width: 340px; flex: 1 1 340px; }

/* ---------- contexto do contrato ---------- */
.cfm-page .cfm-contexto { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cfm-page .cfm-chip {
  display: inline-block; font-size: .8rem; color: var(--theme-mut);
  border: 1px solid var(--theme-line); border-radius: 999px;
  padding: .1rem .6rem; background: var(--theme-panel);
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;   /* celular: quebra, não estoura */
}
.cfm-page .cfm-chip--sim { border-style: dashed; }
.cfm-page .cfm-selo-sim {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 700; color: var(--theme-ink);
  border: 1px dashed var(--theme-mut); border-radius: 4px; padding: .05rem .45rem;
  vertical-align: middle; font-family: var(--font-primary);
}
.cfm-page .cfm-rotulo-inline { font-size: .85rem; color: var(--theme-mut); margin-right: .25rem; }
.cfm-page .cfm-nota { color: var(--theme-mut); font-size: .88rem; margin: 0; max-width: 80ch; }
.cfm-page .cfm-h3 { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--theme-ink); }
.cfm-page .cfm-h4 { font-size: .95rem; font-weight: 700; margin: 1rem 0 .4rem; color: var(--theme-ink);
                    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---------- entradas (uploads) ---------- */
.cfm-page .cfm-entradas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem;
}
.cfm-page .cfm-upload {
  border: 1px solid var(--theme-line); border-radius: var(--cfm-raio);
  background: var(--theme-panel); padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .7rem; min-width: 0;
}
.cfm-page .cfm-upload-cab { display: flex; justify-content: space-between; align-items: baseline;
                            gap: .75rem; flex-wrap: wrap; }
.cfm-page .cfm-fonte { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cfm-page .cfm-radio label, .cfm-page .cfm-checklist-cod label {
  display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; cursor: pointer;
  font-size: .9rem;
}
.cfm-page .cfm-check-input { accent-color: var(--brand-text); width: 1rem; height: 1rem; }
.cfm-page .cfm-drop {
  border: 1.5px dashed var(--theme-line); border-radius: var(--cfm-raio);
  background: var(--theme-panel2); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.cfm-page .cfm-drop:hover { border-color: var(--brand-text); }
.cfm-page .cfm-drop--ativo { border-color: var(--brand-text); border-style: solid; }
.cfm-page .cfm-drop--rejeitado { border-color: var(--cfm-neg); }
.cfm-page .cfm-drop-texto {
  display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
  padding: 1.1rem .8rem; color: var(--theme-ink); font-size: .92rem; text-align: center;
}
.cfm-page .cfm-drop-texto .fas { color: var(--theme-mut); font-size: 1.2rem; }
.cfm-page .cfm-drop-texto small { color: var(--theme-mut); width: 100%; }
.cfm-page .cfm-banco {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  font-size: .88rem; color: var(--theme-mut);
  border-top: 1px dashed var(--theme-line); padding-top: .6rem;
}
.cfm-page .cfm-banco[hidden] { display: none; }
.cfm-page .cfm-check-cab { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cfm-page .cfm-arquivo { font-size: .85rem; color: var(--theme-mut); overflow-wrap: anywhere; }
.cfm-page .cfm-checklist ul { list-style: none; margin: .3rem 0 0; padding: 0; }
.cfm-page .cfm-check-titulo { margin: .5rem 0 0; font-weight: 600; font-size: .9rem; }
.cfm-page .cfm-check { display: flex; gap: .5rem; align-items: baseline; font-size: .88rem;
                       padding: .12rem 0; }
.cfm-page .cfm-check .fas { width: 1rem; flex: 0 0 1rem; text-align: center; }
.cfm-page .cfm-check--ok .fas { color: var(--brand-text); }
.cfm-page .cfm-check--alerta .fas, .cfm-page .cfm-check--erro .fas { color: var(--cfm-neg); }
.cfm-page .cfm-check--info .fas { color: var(--theme-mut); }
.cfm-page .cfm-detalhe-tecnico { margin-top: .4rem; font-size: .82rem; color: var(--theme-mut); }
.cfm-page .cfm-detalhe-tecnico pre { white-space: pre-wrap; margin: .3rem 0 0; color: var(--theme-mut); }

.cfm-page .cfm-acao-principal { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cfm-page .cfm-btn-principal { font-size: 1rem; }
.cfm-page .cfm-aviso { display: flex; gap: .5rem; align-items: baseline; margin: .25rem 0;
                       font-size: .9rem; }
.cfm-page .cfm-aviso--alerta .fas { color: var(--cfm-neg); }
.cfm-page .cfm-aviso--ok .fas { color: var(--brand-text); }
.cfm-page .cfm-aviso--info .fas { color: var(--theme-mut); }

/* ---------- status (ícone + texto + cor) ---------- */
.cfm-page .cfm-status { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700;
                        font-size: .9rem; white-space: nowrap; }
.cfm-page .cfm-st--aderente { color: var(--cfm-pos); }
.cfm-page .cfm-st--divergente { color: var(--cfm-neg); }
.cfm-page .cfm-st--pendente, .cfm-page .cfm-st--nao_aplicavel { color: var(--cfm-cinza); }

/* ---------- veredito ---------- */
.cfm-page #cfm-resultado:not([hidden]) { display: flex; flex-direction: column; gap: 1rem; }
.cfm-page .cfm-veredito-sec {
  border: 1px solid var(--theme-line); border-radius: var(--cfm-raio);
  background: var(--theme-panel); padding: 1.1rem 1.2rem;
}
.cfm-page .cfm-veredito-cab { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
                              margin-bottom: .2rem; }
.cfm-page .cfm-veredito-cab .cfm-status { font-size: 1.05rem; }
.cfm-page .cfm-veredito {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0;
}
.cfm-page .cfm-ind {
  padding: .2rem 1rem .3rem; border-left: 3px solid var(--theme-line); min-width: 0;
}
.cfm-page .cfm-ind--aderente { border-left-color: var(--cfm-pos); }
.cfm-page .cfm-ind--divergente { border-left-color: var(--cfm-neg); }
.cfm-page .cfm-ind--pendente, .cfm-page .cfm-ind--nao_aplicavel {
  border-left-color: var(--theme-line); border-left-style: dashed;
}
.cfm-page .cfm-ind-cab { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
                         flex-wrap: wrap; }
.cfm-page .cfm-ind-nome { font-size: .92rem; font-weight: 600; margin: 0; color: var(--theme-mut); }
.cfm-page .cfm-ind-valor { font-family: var(--theme-serif); font-size: 1.45rem; line-height: 1.15;
                           margin: .35rem 0 0; color: var(--theme-ink); }
.cfm-page .cfm-ind-sec { margin: .1rem 0 0; font-size: .88rem; color: var(--theme-mut); }
.cfm-page .cfm-ind-msg { margin: .45rem 0 0; font-size: .85rem; color: var(--theme-ink); }
.cfm-page .cfm-ind-tol { margin: .3rem 0 0; font-size: .8rem; color: var(--theme-mut); font-style: italic; }

/* KPI: a faixa global tem gradiente decorativo — aqui fica lisa */
.cfm-page .kpi-strip {
  background: var(--theme-panel) !important; border-color: var(--theme-line) !important;
  margin: 0; gap: 8px 36px;
}
/* números em tinta, não em verde: aqui cor carrega status (azul/laranja) */
.cfm-page .kpi-stat .v { font-size: 22px; color: var(--theme-ink) !important; }
.cfm-page .cfm-origens { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

/* ---------- carpet + envelope (o elemento memorável) ---------- */
.cfm-page .cfm-card-heroi .ui-card-titulo { font-size: 1.15rem; }
.cfm-page .cfm-carpet-grade {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.25rem;
  align-items: start; margin-top: .6rem;
}
.cfm-page .cfm-envelope .cfm-h4 { margin-top: 0; min-height: 1.4em; }
.cfm-page .cfm-grafico { width: 100%; min-width: 0; }

/* ---------- blocos quietos (consistência, avisos, parâmetros) ---------- */
.cfm-page .cfm-bloco-quieto {
  border-top: 1px solid var(--theme-line); padding-top: .9rem;
}
.cfm-page .cfm-consistencia .cfm-cons-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .5rem 2rem;
}
.cfm-page .cfm-rodape-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem 2rem;
}
.cfm-page .cfm-dl {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem 1rem;
  margin: .5rem 0 0; font-size: .88rem;
}
.cfm-page .cfm-dl dt { color: var(--theme-mut); font-weight: 400; }
.cfm-page .cfm-dl dd { margin: 0; color: var(--theme-ink); overflow-wrap: anywhere; }
.cfm-page .cfm-dl code { color: var(--theme-ink); background: var(--theme-panel2); padding: 0 .3rem;
                         border-radius: 3px; }
.cfm-page .cfm-lista-avisos, .cfm-page .cfm-lista-pend {
  margin: .5rem 0 0; padding-left: 1.1rem; font-size: .88rem;
}
.cfm-page .cfm-lista-avisos li, .cfm-page .cfm-lista-pend li { margin: .15rem 0; }

/* exceções: caixa com rolagem própria e cabeçalho fixo (até 200 linhas) */
.cfm-page .cfm-scroll .theme-tablewrap { max-height: 460px; overflow: auto; }
.cfm-page .cfm-scroll thead th { position: sticky; top: 0; z-index: 2; }

/* tabela de exceções: números (inclusive o R$ pré-formatado) à direita */
.cfm-page #cfm-tabela-excecoes td:nth-child(n+3):nth-child(-n+8),
.cfm-page #cfm-tabela-simulacao td:nth-child(n+4):nth-child(-n+8) { text-align: right; }

/* ---------- registrar ---------- */
.cfm-page .cfm-registrar {
  border: 1px solid var(--theme-line); border-radius: var(--cfm-raio);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem;
  background: var(--theme-panel2);
}
.cfm-page .cfm-textarea {
  width: 100%; min-height: 4.5rem; border: 1px solid var(--theme-line); border-radius: 8px;
  background: var(--theme-panel); color: var(--theme-ink); padding: .5rem .7rem; font-size: .92rem;
}
.cfm-page .cfm-acoes { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------- histórico: matriz de status ---------- */
.cfm-page .cfm-matriz-wrap { overflow-x: auto; }
.cfm-page .cfm-matriz { border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.cfm-page .cfm-matriz th, .cfm-page .cfm-matriz td {
  padding: .3rem .35rem; text-align: center; border-bottom: 1px solid var(--theme-line);
  white-space: nowrap;
}
.cfm-page .cfm-matriz thead th { color: var(--theme-mut); font-weight: 600; }
.cfm-page .cfm-matriz tbody th[scope="row"] {
  text-align: left; position: sticky; left: 0; background: var(--theme-panel);
  font-weight: 600; padding-right: 1rem; z-index: 1;
}
.cfm-page .cfm-celula {
  width: 2.25rem; height: 2.25rem; border-radius: 6px; cursor: pointer;
  border: 1px solid currentColor; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.cfm-page .cfm-celula:hover { background: var(--theme-panel2); }
.cfm-page .cfm-celula.cfm-st--pendente { border-style: dashed; }
.cfm-page .cfm-cel-vazia { color: var(--theme-line); }
.cfm-page .cfm-legenda-status { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .6rem 0 0;
                                font-size: .85rem; }
.cfm-page .cfm-comentario {
  margin: .6rem 0 0; padding: .4rem .8rem; border-left: 3px solid var(--theme-line);
  color: var(--theme-ink); font-size: .9rem;
}
.cfm-page .cfm-serie-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1rem 1.5rem;
}
.cfm-page .cfm-dd-curto { max-width: 420px; }
.cfm-page .cfm-sim-cab { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
                         margin-bottom: .6rem; }

/* ---------- resultado da modulação no ano (topo da aba Histórico) ----------
   A resposta vem como frase (serif) antes dos números; tabelas com total no tfoot.
   Valores em R$ na cor do texto (o sinal diz ganho/perda; sem colorir célula). */
.cfm-page .cfm-res { display: flex; flex-direction: column; gap: 1rem;
                     padding-bottom: 1.5rem; border-bottom: 1px solid var(--theme-line); }
.cfm-page .cfm-res-h2 { font-family: var(--theme-serif); font-size: 1.45rem; font-weight: 600;
                        margin: 0; color: var(--theme-ink); }
.cfm-page .cfm-res-frase { font-family: var(--theme-serif); font-size: 1.2rem; line-height: 1.5;
                           margin: 0 0 .75rem; max-width: 70ch; color: var(--theme-ink); }
.cfm-page .ui-filtro:has(#cfm-res-contratos) { min-width: 340px; flex: 1 1 340px; }
.cfm-page .cfm-dd-ano { min-width: 110px; }
.cfm-page .cfm-res-tabelas { display: flex; flex-direction: column; gap: 1rem; }
.cfm-page .cfm-res tfoot th, .cfm-page .cfm-res tfoot td { font-weight: 700;
                                                          border-top: 2px solid var(--theme-line); }
.cfm-page .cfm-res-notas { font-size: .85rem; color: var(--theme-mut); max-width: 100ch; }
.cfm-page .cfm-res tfoot tr + tr th, .cfm-page .cfm-res tfoot tr + tr td { border-top-width: 1px; }
/* estimado pela geração CCEE (mês sem registro): entra no oficial (fallback), mas sempre
   itálico, esmaecido e com "est." — nunca com a mesma cara do registrado */
.cfm-page .cfm-res tfoot tr.cfm-res-info th { font-weight: 400; font-style: italic;
                                              color: var(--theme-mut); }
.cfm-page .cfm-cel-estimada { font-style: italic; color: var(--theme-mut); font-weight: 400; }
.cfm-page .cfm-est-marca { font-size: .78em; font-style: italic; color: var(--theme-mut);
                           font-weight: 400; }

/* ---------- evolução diária (aba 3) ----------
   Quieta como o resto: KPIs só com título e valor, um gráfico por pergunta,
   controle secundário (Ano) numa linha própria, nunca ao lado do multi-select. */
.cfm-page .ui-filtro:has(#cfm-dia-contratos) { min-width: 340px; flex: 1 1 340px; }
.cfm-page .cfm-dd-mes { min-width: 130px; }
.cfm-page .cfm-dia-ate { margin: 0 0 .5rem; font-size: .92rem; color: var(--theme-mut); }
.cfm-page .cfm-dia-grade {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
.cfm-page .cfm-dia-grade--larga { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.cfm-page .cfm-dia-ano { display: flex; flex-direction: column; gap: .75rem;
                         padding-top: 1.25rem; border-top: 1px solid var(--theme-line); }
.cfm-page .cfm-dia-linha-controle { display: flex; align-items: flex-end; gap: 1rem; }
.cfm-page .cfm-dia-linha-controle .ui-filtro { min-width: 130px; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .cfm-page .cfm-carpet-grade { grid-template-columns: minmax(0, 1fr); }
  .cfm-page .cfm-dia-grade,
  .cfm-page .cfm-dia-grade--larga { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cfm-page { padding: 1rem 16px 2rem; }
  .cfm-page .cfm-entradas,
  .cfm-page .cfm-rodape-grade,
  .cfm-page .cfm-serie-grade { grid-template-columns: minmax(0, 1fr); }
  .cfm-page .cfm-abas .cfm-aba { padding: .6rem .6rem !important; font-size: .88rem; }
  .cfm-page .cfm-dl { grid-template-columns: minmax(0, 1fr); }
  .cfm-page .cfm-dl dt { margin-top: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cfm-page *, .cfm-page *::before, .cfm-page *::after {
    transition: none !important; animation: none !important;
  }
}

/* Resultado do ano: "Visão" numa linha própria, abaixo de Ano e Contratos (feedback do dono do
   produto, 2026-10-26: "deixa a visão embaixo e não do lado"). */
.cfm-page .cfm-res-visao { margin: -4px 0 14px; }
.cfm-page .cfm-res-visao .cfm-radio label { margin-right: 18px; }

/* KPIs do resultado: um card por indicador, faixa lateral e ícone na cor do significado
   (padrão das outras páginas; feedback do dono do produto, 2026-10-26: "tá branco e preto só").
   --kpi-cor: perda vermelho, ganho verde, estimado âmbar, preço azul, PLD ardósia, contagem
   no verde da marca; tons mais claros no tema escuro. */
.cfm-page .kpi-strip.cfm-kpis {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px;
}
.cfm-page .kpi-stat.cfm-kpi {
  --kpi-cor: var(--brand-text);
  position: relative; background: var(--theme-panel); border: 1px solid var(--theme-line);
  border-left: 4px solid var(--kpi-cor); border-radius: 10px; padding: 14px 40px 12px 16px;
  box-shadow: 0 2px 10px rgba(22, 36, 27, .06);
}
html[data-theme="dark"] .cfm-page .kpi-stat.cfm-kpi { box-shadow: 0 2px 10px rgba(0, 0, 0, .28); }
.cfm-page .kpi-stat.cfm-kpi .v { color: var(--kpi-cor) !important; font-size: 22px; white-space: nowrap; }
.cfm-page .kpi-stat.cfm-kpi .k {
  text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; font-weight: 600; margin-top: 6px;
}
.cfm-page .cfm-kpi-icone {
  position: absolute; top: 13px; right: 14px; font-size: 15px; color: var(--kpi-cor); opacity: .6;
}
.cfm-page .kpi-stat.cfm-kpi--perda { --kpi-cor: #B3261E; }
.cfm-page .kpi-stat.cfm-kpi--ganho { --kpi-cor: #2E7D32; }
.cfm-page .kpi-stat.cfm-kpi--neutro { --kpi-cor: var(--theme-ink); }
.cfm-page .kpi-stat.cfm-kpi--estimado { --kpi-cor: #B26A00; }
.cfm-page .kpi-stat.cfm-kpi--preco { --kpi-cor: #1F6FB2; }
.cfm-page .kpi-stat.cfm-kpi--pld { --kpi-cor: #52606D; }
.cfm-page .kpi-stat.cfm-kpi--marca { --kpi-cor: var(--brand-text); }
html[data-theme="dark"] .cfm-page .kpi-stat.cfm-kpi--perda { --kpi-cor: #FF8A80; }
html[data-theme="dark"] .cfm-page .kpi-stat.cfm-kpi--ganho { --kpi-cor: #81C784; }
html[data-theme="dark"] .cfm-page .kpi-stat.cfm-kpi--estimado { --kpi-cor: #FFB74D; }
html[data-theme="dark"] .cfm-page .kpi-stat.cfm-kpi--preco { --kpi-cor: #64B5F6; }
html[data-theme="dark"] .cfm-page .kpi-stat.cfm-kpi--pld { --kpi-cor: #B0BEC5; }

/* Filtros alinhados pelo TOPO: com a caixa de contratos em duas linhas, Ano/De/Até ficavam
   colados embaixo (feedback do dono do produto, 2026-10-26: "ordena pra cima e não pra baixo"). */
.cfm-page .ui-filtros-campos { align-items: flex-start !important; }

/* ---------- forecast e orçado (aba 5) ----------
   Cadastro de 12 meses (grade de inputs nativos: funciona no celular) + histórico de envios.
   Pouco texto: o rótulo da grade diz a unidade e o sinal; status = marca "real" por mês. */
.cfm-page .cfm-fc-bloco { display: flex; flex-direction: column; gap: .75rem; }
.cfm-page .cfm-fc-bloco--hist { padding-top: 1.25rem; border-top: 1px solid var(--theme-line); }
.cfm-page .cfm-dd-serie { min-width: 150px; }
.cfm-page .ui-filtro:has(#cfm-fc-data) { min-width: 160px; }
.cfm-page .cfm-fc-grade {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .5rem;
}
.cfm-page .cfm-fc-celula {
  display: flex; flex-direction: column; gap: .3rem; min-width: 0;
  border: 1px solid var(--theme-line); border-radius: 8px; padding: .45rem .5rem;
  background: var(--theme-panel2);
}
.cfm-page .cfm-fc-mes { font-size: .85rem; font-weight: 700; color: var(--theme-mut); margin: 0; }
.cfm-page .cfm-fc-input {
  width: 100%; min-width: 0; border: 1px solid var(--theme-line); border-radius: 6px;
  background: var(--theme-panel); color: var(--theme-ink); padding: .35rem .45rem;
  font-size: .95rem; text-align: right; font-variant-numeric: tabular-nums;
}
.cfm-page .cfm-fc-input:focus { border-color: var(--brand-text); outline: none; }
.cfm-page .cfm-fc-status label {
  display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-size: .8rem;
  color: var(--theme-mut); cursor: pointer;
}
.cfm-page .cfm-fc-status input { margin: 0 .3rem 0 0; }
.cfm-page #cfm-fc-h-conteudo[hidden] { display: none; }
/* data de referência (dmc.DatePickerInput) com a mesma cara dos dropdowns da página: 38px, fonte 1rem
   (o global .comerc-datepicker-dmc usa 36px e fonte menor; aqui só o ajuste fino, com !important p/ vencê-lo) */
.cfm-page .cfm-fc-data .mantine-InputBase-input,
.cfm-page .cfm-fc-data .mantine-DatePickerInput-input {
  height: 38px !important; min-height: 38px !important; border-radius: 8px !important;
  border: 1px solid var(--theme-line) !important; background-color: var(--theme-panel) !important;
  color: var(--theme-ink) !important; font-size: 1rem !important; box-shadow: none !important;
}
.cfm-page .cfm-fc-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
                          margin-top: .9rem; }
.cfm-page .cfm-fc-upload { display: inline-block; }
.cfm-page .cfm-fc-salvar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem;
                           margin-top: .75rem; }
.cfm-page .cfm-fc-coment-wrap { flex: 1 1 320px; min-width: 0; }
.cfm-page .cfm-fc-comentario {
  width: 100%; border: 1px solid var(--theme-line); border-radius: 8px; height: 38px;
  background: var(--theme-panel); color: var(--theme-ink); padding: .4rem .7rem; font-size: .92rem;
}
.cfm-page .cfm-fc-linha-controle { max-width: 360px; margin-bottom: .5rem; }
.cfm-page .cfm-chip--vigente {
  margin-left: .4rem; color: var(--brand-text); border-color: var(--brand-text); font-weight: 700;
}
.cfm-page .cfm-fc-data-cel { white-space: nowrap; }
.cfm-page .cfm-fc-quebra { white-space: normal; min-width: 14ch; max-width: 40ch; overflow-wrap: anywhere; }
.cfm-page tr.cfm-fc-vigente th, .cfm-page tr.cfm-fc-vigente td { font-weight: 600; }
.cfm-page .cfm-fc-total { font-weight: 700; }
@media (max-width: 1100px) {
  .cfm-page .cfm-fc-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cfm-page .cfm-fc-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cfm-page .cfm-fc-linha-controle { max-width: none; }
}

/* modal de confirmação do envio (renderizado fora de .cfm-page, no <body>) */
.cfm-modal .cfm-fc-confirma {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1.25rem; margin: 0;
  font-variant-numeric: tabular-nums;
}
.cfm-modal .cfm-fc-confirma dt { font-weight: 400; color: var(--theme-mut); }
.cfm-modal .cfm-fc-confirma dd { margin: 0; font-weight: 700; color: var(--theme-ink); }
.cfm-modal .comerc-btn {
  text-transform: none; letter-spacing: 0; background: var(--comerc-green); box-shadow: none; border: 0;
}
.cfm-modal .comerc-btn:hover { background: var(--comerc-green-light); }