/* ===========================================================================
   Página Comercial (/comercial), 2026-10-06 — visão global por raiz de CNPJ.
   Escopo integral em .com-page: nenhuma regra altera outras páginas.
   Só tokens --vesper-*; nada de hex.

   Cor da página (Moldura viva): Simulador = o dia (verde), Potencial = o
   entardecer (âmbar), Comercial = a brasa, o fim do dia (a hora da Vesper).
   A brasa aqui é MOLDURA (ícone de seção e barra do KPI), nunca dado: no
   gráfico e na tabela ela continua só significando descarga. A linha de UC
   viável usa o verde do dia (--vesper-viavel-*), com a palavra "Sim" e o
   negrito junto: a cor nunca vai sozinha.

   PENDÊNCIA PARA 00_tokens.css (não editado por este pacote): promover as três
   variáveis abaixo a --vesper-acento-com, --vesper-acento-com-suave e
   --vesper-acento-com-barra (igual a sim/pot), com os contrastes medidos lá.
   Contrastes aqui (calculados, WCAG, 2026-10-06): ícone (acento) sobre o
   quadrado suave 5,1:1 no claro e 4,8:1 no escuro; barra (brasa) sobre o
   painel 3,1:1 no claro e 4,4:1 no escuro (gráfico/ícone pede ≥ 3:1).
   =========================================================================== */
.com-page,
.vesper-pagina--comercial {
  --vesper-pagina-acento: color-mix(in srgb, var(--vesper-brasa) 62%, var(--vesper-tinta));
  --vesper-pagina-acento-suave: color-mix(in srgb, var(--vesper-brasa) 14%, transparent);
  --vesper-pagina-barra: var(--vesper-brasa);
}
html[data-theme="dark"] .com-page,
html[data-theme="dark"] .vesper-pagina--comercial {
  --vesper-pagina-acento: color-mix(in srgb, var(--vesper-brasa) 65%, var(--vesper-tinta));
  --vesper-pagina-acento-suave: color-mix(in srgb, var(--vesper-brasa) 18%, transparent);
}

.com-page { max-width: 1480px; }

/* título da página: ícone de seção + nome */
.com-titulo-pagina { display: inline-flex; align-items: center; }
.com-titulo-pagina .vesper-icone-secao { width: 36px; height: 36px; font-size: 17px; margin-right: 12px; }

/* faixa de status/nota e resumo das condições (sempre visíveis) */
.com-topo { margin: 0 0 8px; }
.com-nota { color: var(--vesper-tinta-2); font-size: var(--vesper-t-xs); }
.com-pot-status:not(:empty) {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-left: 3px solid var(--vesper-aviso);
  border-radius: var(--vesper-raio-celula);
  background: var(--vesper-aviso-suave);
  color: var(--vesper-tinta);
  font-size: var(--vesper-t-xs);
}
.com-pot-resumo { margin: 0 0 12px; }
.com-regra { margin: 0 0 4px; color: var(--vesper-tinta-2); font-size: var(--vesper-t-s); }
.com-pot-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.com-pot-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--vesper-linha-forte);
  border-radius: var(--vesper-raio-controle);
  background: var(--vesper-painel-2);
  color: var(--vesper-tinta);
  font-size: var(--vesper-t-xs);
  line-height: 1.4;
}
.com-pot-chip-rot { color: var(--vesper-tinta-2); }
.com-pot-chip-val { font-weight: 650; font-variant-numeric: tabular-nums; }
.com-pot-chip--padrao { color: var(--vesper-tinta-2); font-weight: 600; }
.com-pot-chip--alterada {
  border-color: var(--vesper-aviso);
  border-left-width: 3px;
  background: var(--vesper-aviso-suave);
  font-weight: 650;
}
.com-pot-todas { margin: 6px 0 0; }
.com-pot-todas-sum {
  display: inline-block;
  padding: 2px 0;
  color: var(--vesper-tinta);
  font-size: var(--vesper-t-s);
  font-weight: 600;
  cursor: pointer;
}
.com-pot-todas-sum:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.com-pot-todas .theme-tablewrap { max-width: 640px; margin-top: 6px; }
.com-pot-todas th[scope="row"] { font-weight: 600; text-align: left; }

/* cartões e títulos de seção */
.com-card { margin: 0 0 14px; }
.com-secao-titulo {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 18px;
}
.com-secao-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 10px;
}
.com-secao-cabecalho .com-secao-titulo { margin-right: auto; }
.com-contagem { color: var(--vesper-tinta-2); font-size: var(--vesper-t-s); font-variant-numeric: tabular-nums; }
.com-export-msg { color: var(--vesper-tinta-2); font-size: var(--vesper-t-xs); }
.com-dica { margin: 8px 0 0; color: var(--vesper-tinta-3); font-size: var(--vesper-t-xs); }
.com-vazio { margin: 0; color: var(--vesper-tinta-2); font-size: var(--vesper-t-s); }
.com-tabela-aviso:not(:empty) { margin: 0 0 8px; }

/* ação é tinta (inverte com o tema), nunca verde nem brasa */
.com-btn-export,
.com-pot-aplicar,
.com-pot-preset {
  padding: 7px 14px;
  border-radius: var(--vesper-raio-controle);
  font-size: var(--vesper-t-s);
  cursor: pointer;
}
.com-btn-export,
.com-pot-preset {
  border: 1px solid var(--vesper-linha-forte);
  background: transparent;
  color: var(--vesper-tinta-2);
  font-weight: 600;
}
.com-btn-export:hover:not(:disabled),
.com-pot-preset:hover { color: var(--vesper-tinta); border-color: var(--vesper-tinta-3); background: var(--vesper-painel-2); }
.com-btn-export:disabled { opacity: .55; cursor: progress; }
.com-pot-aplicar { border: 0; background: var(--vesper-tinta); color: var(--vesper-painel); font-weight: 650; }
.com-pot-aplicar:hover:not(:disabled) { background: var(--vesper-acao-hover); }
.com-pot-aplicar:disabled { opacity: .55; cursor: progress; }
.com-pot-aplicar.com-pot-pendente-on { box-shadow: 0 0 0 3px var(--vesper-aviso-suave), 0 0 0 4px var(--vesper-aviso); }
.com-btn-export:focus-visible,
.com-pot-aplicar:focus-visible,
.com-pot-preset:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* barra de filtros */
.com-page .filters-panel { margin: 0 0 12px; }
.com-page .ui-filtros-campos { align-items: flex-end; }
.com-econ-min { width: 110px; }
.com-busca { min-width: 340px; }
.com-checks { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 4px 0; }
.com-check { display: inline-flex; }
.com-check-rotulo { display: inline-flex !important; /* o Dash grava display:block inline */ align-items: center; gap: 6px; margin: 0; color: var(--vesper-tinta); font-size: var(--vesper-t-s); cursor: pointer; }
.com-check-input { margin: 0; cursor: pointer; }

/* KPIs: a faixa vem de config.theme.kpi_strip (barra na cor da página) */
.com-kpis { margin: 0 0 14px; }

/* tabela por raiz (DataTable): a linha clicável */
.com-tabela-caixa .dash-spreadsheet-inner td { cursor: pointer; }

/* editor das condições: seção recolhível */
.com-pot-secao { padding: 0; }
.com-sec-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}
.com-sec-summary::-webkit-details-marker { display: none; }
.com-sec-summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.com-sec-chevron { color: var(--vesper-tinta-3); transition: transform .15s ease; }
.com-sec:not([open]) .com-sec-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .com-sec-chevron { transition: none; } }
.com-sec-corpo { padding: 0 16px 16px; }
.com-pot-intro { margin: 0 0 12px; color: var(--vesper-tinta-2); font-size: var(--vesper-t-s); }
.com-pot-barra { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.com-pot-pendente:not([hidden]),
.com-pot-avisos:not(:empty) {
  margin: 0 0 10px;
  padding: 6px 10px;
  border-left: 3px solid var(--vesper-aviso);
  border-radius: var(--vesper-raio-celula);
  background: var(--vesper-aviso-suave);
  color: var(--vesper-tinta);
  font-size: var(--vesper-t-xs);
}
.com-pot-avisos ul { margin: 4px 0 0; padding-left: 18px; }
.com-pot-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 12px;
  align-items: start;
}
.com-pot-grupos .pb-grupo {
  border: 1px solid var(--vesper-linha);
  border-radius: var(--vesper-raio-controle);
  background: var(--vesper-painel);
}
/* o CSS do Potencial tira o spinner dos number só dentro de .pb-sidebar */
.com-pot-grupos input[type=number]::-webkit-inner-spin-button,
.com-pot-grupos input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.com-pot-grupos input[type=number] { -moz-appearance: textfield; appearance: textfield; padding-left: 6px; padding-right: 6px; }

/* painel das UCs da raiz */
.com-painel .com-secao-titulo { margin: 0 0 8px; }
.com-raiz { font-variant-numeric: tabular-nums; margin-left: .35em; }
.com-raiz-sep { margin: 0 .5em; color: var(--vesper-tinta-3); }
.com-raiz-empresa { font-weight: 500; color: var(--vesper-tinta-2); }
/* position: relative contém o texto oculto (ui-sr-only, absolute) das linhas: sem ele o texto escapava da
   caixa com rolagem e esticava a página para ~16 mil px (achado do C3, 2026-10-06). */
.com-uc-caixa { position: relative; max-height: 520px; overflow: auto; }
.com-uc-tabela { width: 100%; border-collapse: separate; border-spacing: 0; }
.com-uc-tabela th { position: sticky; top: 0; z-index: 1; white-space: normal; vertical-align: bottom; }
.com-uc-tabela th.num { text-align: right; }
.com-uc-tabela td { white-space: nowrap; }
.com-uc-codigo { font-variant-numeric: tabular-nums; font-weight: 600; }
.com-uc-link { font-weight: 600; color: var(--vesper-tinta); text-decoration: underline; text-underline-offset: 2px; }
.com-uc-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.com-uc-muda { font-weight: 650; }

/* UC viável: o mesmo recado do Simulador (fundo, barra e negrito com a palavra
   "Sim"). O CSS do sistema de tabelas pinta toda célula com !important; aqui o
   fundo vence pela especificidade. */
.com-page .com-uc-tabela tbody tr.com-uc--viavel td { background-color: var(--vesper-viavel-fundo) !important; }
.com-page .com-uc-tabela tbody tr.com-uc--viavel:hover td {
  background-color: color-mix(in srgb, var(--vesper-tinta) 5%, var(--vesper-viavel-fundo)) !important;
}
.com-page .com-uc-tabela tbody tr.com-uc--viavel td:first-child { box-shadow: inset 3px 0 0 var(--vesper-viavel-barra); }
.com-uc-tabela td.com-uc-viavel { font-weight: 700; color: var(--vesper-viavel-texto); }

/* rodapé de ressalvas */
.com-rodape { margin: 18px 0 0; padding-top: 10px; border-top: 1px solid var(--vesper-linha); font-size: var(--vesper-t-xs); }
.com-rodape p { margin: 0 0 4px; }

@media (max-width: 900px) {
  .com-busca { min-width: 0; width: 100%; }
  .com-titulo-pagina .vesper-icone-secao { width: 30px; height: 30px; font-size: 14px; }
}

/* ===========================================================================
   Visão por unidade (/comercial/unidade, pacote C3, 2026-10-06). Prefixo cou-.
   Mesma moldura da Comercial (.com-page): a brasa só no ícone de seção. O que
   chama a atenção é o VEREDITO (viável Sim/Não + economia), com o fundo do
   viável (--vesper-viavel-*) e a palavra; o resto é tabela quieta. Escolha do
   motor ("melhor"), tipo contratado e origem do dado são palavra + forma
   (selo, contorno), nunca só cor.
   =========================================================================== */
.cou-page .com-secao-titulo { margin: 0 0 8px; }

/* raiz: razão social e dados do grupo */
.cou-grupo { margin: 0 0 14px; }
.cou-grupo-nome {
  margin: 0 0 6px;
  font-family: var(--vesper-fonte-titulo);
  font-size: var(--vesper-t-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vesper-tinta);
}
.cou-grupo-dados { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.cou-grupo-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cou-grupo-item dt { color: var(--vesper-tinta-2); font-size: var(--vesper-t-xs); font-weight: 600; }
.cou-grupo-item dd { margin: 0; color: var(--vesper-tinta); font-size: var(--vesper-t-s); font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* topo: UCs da raiz | dados da fatura */
.cou-topo-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  gap: 14px;
  align-items: start;
}
.cou-topo-grade > .com-card { margin: 0 0 14px; }
.cou-lista-caixa { max-height: 430px; position: relative; }
/* position: o texto oculto (.ui-sr-only, absoluto) de cada linha passa a ser recortado pela
   caixa com rolagem; sem isso ele escapa da caixa e estica a página (medido: 16 mil px). */
.cou-page .com-uc-tabela tbody td { text-align: left; }
.cou-page .com-uc-tabela tbody td.num { text-align: right; }
.cou-page .com-uc-tabela tbody tr.cou-uc--atual td {
  background-color: color-mix(in srgb, var(--vesper-tinta) 7%, var(--vesper-painel)) !important;
  font-weight: 650;
}
.cou-page .com-uc-tabela tbody tr.cou-uc--atual td:first-child { box-shadow: inset 4px 0 0 var(--vesper-tinta); }

/* selos e marcas: palavra sempre */
.cou-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border: 1px solid var(--vesper-linha-forte);
  border-radius: 999px;
  color: var(--vesper-tinta-2);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.55;
  vertical-align: 1px;
  white-space: nowrap;
}
.cou-tag--melhor { border-color: var(--vesper-tinta); color: var(--vesper-tinta); }
.cou-tag--contratado { border-style: dashed; border-color: var(--vesper-tinta-3); }
.cou-tag--sugerida { border-color: var(--vesper-aviso); color: var(--vesper-aviso); background: var(--vesper-aviso-suave); }
.cou-tag--mudou { border-color: var(--vesper-aviso); color: var(--vesper-aviso); }
.cou-tag--aberta { border-color: var(--vesper-tinta); color: var(--vesper-tinta); }
.cou-selo {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: var(--vesper-t-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.cou-selo--base { background: var(--vesper-painel-2); color: var(--vesper-tinta-2); border: 1px solid var(--vesper-linha); }
.cou-selo--informada { background: var(--vesper-acento-suave); color: var(--vesper-tinta); border: 1.5px solid var(--vesper-tinta); font-weight: 700; }

/* entrada da fatura */
.cou-upload {
  display: block;
  margin: 0 0 10px;
  padding: 14px 12px;
  border: 1.5px dashed var(--vesper-linha-forte);
  border-radius: var(--vesper-raio-controle);
  background: var(--vesper-painel-2);
  color: var(--vesper-tinta-2);
  font-size: var(--vesper-t-s);
  text-align: center;
  cursor: pointer;
}
.cou-upload:hover { border-color: var(--vesper-tinta-3); color: var(--vesper-tinta); }
.cou-upload:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cou-upload-corpo { display: inline-flex; align-items: center; gap: 10px; }
.cou-upload-icone { font-size: 20px; color: var(--vesper-pagina-acento); }
.cou-upload-link { color: var(--vesper-tinta); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.cou-fieldset { margin: 0 0 10px; padding: 0; border: 0; min-width: 0; }
.cou-legenda {
  float: none;
  width: auto;
  margin: 0 0 6px;
  padding: 0;
  color: var(--vesper-tinta);
  font-size: var(--vesper-t-s);
  font-weight: 650;
}
.cou-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; }
.cou-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cou-rotulo {
  margin: 0;
  color: var(--vesper-tinta-2);
  font-size: var(--vesper-t-s);
  font-weight: 620;
  font-variation-settings: "wdth" var(--vesper-estreito);
}
.cou-dica-campo { color: var(--vesper-tinta-3); font-size: var(--vesper-t-xs); }
.cou-conferir { color: var(--vesper-aviso); font-size: var(--vesper-t-xs); font-weight: 650; }
.cou-conferir:empty { display: none; }
.cou-campo:has(.cou-conferir:not(:empty)) input,
.cou-campo:has(.cou-conferir:not(:empty)) .Select-control {
  border-color: var(--vesper-aviso) !important;
  box-shadow: 0 0 0 1px var(--vesper-aviso);
}
.cou-campos input[type=number]::-webkit-inner-spin-button,
.cou-campos input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cou-campos input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.cou-form-alvo { margin: 2px 0 8px; color: var(--vesper-tinta-2); font-size: var(--vesper-t-xs); }
.cou-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.cou-msg:empty { display: none; }
.cou-msg { margin: 0 0 10px; font-size: var(--vesper-t-xs); }
.cou-msg p { margin: 0; }
.cou-msg ul { margin: 4px 0 0; padding-left: 18px; }
.cou-msg-aviso,
.cou-avisos {
  padding: 6px 10px;
  border-left: 3px solid var(--vesper-aviso);
  border-radius: var(--vesper-raio-celula);
  background: var(--vesper-aviso-suave);
  color: var(--vesper-tinta);
  font-size: var(--vesper-t-xs);
}
/* estado de sucesso: verde de propósito (como .alert-success), com a palavra */
.cou-msg-ok {
  padding: 6px 10px;
  border-left: 3px solid var(--vesper-carga-texto);
  border-radius: var(--vesper-raio-celula);
  background: var(--vesper-carga-suave);
  color: var(--vesper-tinta);
}
.cou-avisos { margin: 0 0 14px; }
.cou-avisos ul { margin: 4px 0 0; padding-left: 18px; }

/* barra do dossiê: status e "Já contratado em" */
.cou-dossie-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 10px; }
.cou-contratado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-left: auto; }
.cou-radio { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.cou-radio-rotulo { display: inline-flex !important; /* o Dash grava display inline */ align-items: center; gap: 6px; margin: 0; color: var(--vesper-tinta); font-size: var(--vesper-t-s); cursor: pointer; }

/* cabeçalho da UC e o veredito (o elemento que se lembra) */
.cou-uc-cabecalho { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 0 0 10px; }
.cou-uc-titulo {
  margin: 0;
  font-family: var(--vesper-fonte-titulo);
  font-size: var(--vesper-t-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cou-veredito {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: end;
  gap: 8px 40px;
  margin: 0 0 14px;
  padding: 18px 24px;
  border-radius: var(--vesper-raio-painel);
  border: 1px solid var(--vesper-linha-forte);
  background: var(--vesper-painel-2);
}
.cou-veredito--sim { background: var(--vesper-viavel-fundo); border-color: var(--vesper-viavel-barra); }
.cou-veredito-selo,
.cou-veredito-num { display: flex; flex-direction: column; gap: 2px; }
.cou-veredito-k { color: var(--vesper-tinta-2); font-size: var(--vesper-t-xs); font-weight: 600; }
.cou-veredito-v {
  font-family: var(--vesper-fonte-titulo);
  font-size: var(--vesper-t-3xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--vesper-tinta);
}
.cou-veredito--sim .cou-veredito-v { color: var(--vesper-viavel-texto); }
.cou-veredito-n {
  font-family: var(--vesper-fonte-titulo);
  font-size: var(--vesper-t-2xl);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--vesper-tinta);
}
.cou-veredito-frase { grid-column: 1 / -1; margin: 4px 0 0; color: var(--vesper-tinta); font-size: var(--vesper-t-s); }
.cou-veredito-muda { font-weight: 650; }

/* blocos do dossiê */
.cou-bloco { margin: 0 0 14px; padding: 16px 18px; }
.cou-h3 { margin: 0 0 10px; font-size: 17px; font-weight: 650; color: var(--vesper-tinta); }
.cou-h4 { margin: 0 0 6px; font-size: var(--vesper-t-s); font-weight: 650; color: var(--vesper-tinta-2); }
.cou-bloco .theme-tablewrap + .cou-h4 { margin-top: 18px; }
.cou-premissas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px 14px;
  margin: 0;
}
.cou-premissa { padding: 10px 12px; border: 1px solid var(--vesper-linha); border-radius: var(--vesper-raio-controle); }
.cou-premissa dt { margin: 0 0 3px; color: var(--vesper-tinta-2); font-size: var(--vesper-t-xs); font-weight: 650; }
.cou-premissa dd { margin: 0; }
.cou-premissa-valor { color: var(--vesper-tinta); font-size: var(--vesper-t-m); font-weight: 650; font-variant-numeric: tabular-nums; }
.cou-premissa-detalhe { display: block; margin-top: 2px; color: var(--vesper-tinta-3); font-size: var(--vesper-t-xs); }
.cou-premissa-lista { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; padding: 0; list-style: none; }
.cou-premissa-lista li { display: inline-flex; gap: 5px; align-items: baseline; }
.cou-premissa-tipo { color: var(--vesper-tinta-2); font-size: var(--vesper-t-xs); font-weight: 500; }
.cou-referencia {
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px dashed var(--vesper-tinta-3);
  border-radius: var(--vesper-raio-controle);
  color: var(--vesper-tinta);
  font-size: var(--vesper-t-s);
}
.cou-faturas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: start; }
.cou-nota-tabela { margin: 6px 0 0; color: var(--vesper-tinta-3); font-size: var(--vesper-t-xs); }

/* tabelas do dossiê: texto à esquerda, número à direita */
.cou-tabela { width: 100%; }
.cou-page .cou-tabela thead th { text-align: left; white-space: normal; vertical-align: bottom; }
.cou-page .cou-tabela thead th.num { text-align: right; }
.cou-page .cou-tabela tbody td { text-align: left; }
.cou-page .cou-tabela tbody td.num { text-align: right; white-space: nowrap; }
.cou-tabela tbody th {
  padding: 8px 12px;
  border-bottom: 1px solid var(--vesper-linha);
  color: var(--vesper-tinta);
  font-weight: 500;
  text-align: left;
}
.cou-page .theme-table tbody tr:nth-child(even) th { background: var(--vesper-painel-2); }
.cou-page .theme-table tbody tr:last-child th { border-bottom: none; }
.cou-th-sub { display: block; margin-top: 2px; color: var(--vesper-tinta-2); font-size: var(--vesper-t-xs); font-weight: 500; }
.cou-th-tipo { color: var(--vesper-tinta); font-weight: 700; }
.cou-page .cou-tabela tbody td.cou-melhor {
  background-color: color-mix(in srgb, var(--vesper-tinta) 7%, var(--vesper-painel)) !important;
  box-shadow: inset 3px 0 0 var(--vesper-tinta);
}
.cou-page .cou-tabela tbody tr.cou-linha--subtotal > * { border-top: 1px solid var(--vesper-linha-forte); font-weight: 650; }
.cou-page .cou-tabela tbody tr.cou-linha--total > * { border-top: 1px solid var(--vesper-linha-forte); font-weight: 700; background-color: var(--vesper-painel-2) !important; }
.cou-page .cou-tabela tbody tr.cou-linha--mudou > * { font-weight: 650; }
.cou-page .cou-tabela tbody tr.cou-tarifa--usada > * { font-weight: 600; }
.cou-uso { white-space: nowrap; }
/* por tipo de energia: a marca (melhor, contratado) desce para baixo do valor; a tabela
   fica estreita o bastante para dividir a linha com a de componentes */
.cou-tipos .cou-tag { display: table; margin: 3px 0 0; }
.cou-tipos td.num .cou-tag { margin-left: auto; }

@media (max-width: 1100px) {
  .cou-topo-grade,
  .cou-faturas { grid-template-columns: minmax(0, 1fr); }
  .cou-veredito { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 20px; }
}
@media (max-width: 600px) {
  .cou-veredito { padding: 14px 16px; }
  .cou-veredito-v { font-size: var(--vesper-t-2xl); }
  .cou-veredito-n { font-size: var(--vesper-t-xl); }
  .cou-contratado { margin-left: 0; }
}

/* ── Modulação calculada por UC (S3, 2026-10-06) ──
   Coluna do σ no painel: o número na linha de cima (tabular, à direita) e a
   origem embaixo, menor, em tinta 2 — a origem é palavra, não cor. A nota "sem
   versão calculada" usa o suave de aviso com ícone e texto. */
.com-uc-tabela td.com-uc-sigma { white-space: normal; min-width: 128px; }
.com-uc-sigma > span:first-child { display: block; font-variant-numeric: tabular-nums; }
.com-uc-origem {
  display: block;
  color: var(--vesper-tinta-2);
  font-size: var(--vesper-t-xs);
  line-height: 1.25;
  white-space: nowrap;
}
.com-regra.com-sem-versao {
  margin: 6px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--vesper-aviso);
  border-radius: var(--vesper-raio-celula);
  background: var(--vesper-aviso-suave);
  color: var(--vesper-tinta);
}
.com-sem-versao i { color: var(--vesper-aviso); margin-right: 4px; }