/* ===========================================================================
   Página Custos (/custos, só admin), 2026-10-06. Escopo em .vesper-pagina--custos:
   nenhuma regra altera outras páginas. Só tokens --vesper-*; nada de hex.

   Página de administração é NEUTRA (Moldura viva): ícone de seção e barra do KPI
   ficam no padrão neutro, sem cor de página. A régua do banco não usa verde
   (carga) nem brasa (descarga): Vesper = tinta cheia, SIAPE = neutro claro,
   ETL e outros = neutro hachurado. A legenda traz a palavra e o percentual:
   a cor nunca é o único canal. Tinta sobre ociosa: >= 3:1 nos dois temas
   (tinta 16,1:1 no claro; no escuro a tinta inverte para #E6EFEA).
   =========================================================================== */
.vesper-pagina--custos .vesper-custos-regua-figura { margin: 4px 0 18px; }

.vesper-pagina--custos .vesper-custos-regua {
  display: flex;
  height: 22px;
  border-radius: var(--vesper-raio-celula);
  overflow: hidden;
  background: var(--vesper-ociosa);
  border: 1px solid var(--vesper-linha-forte);
}
.vesper-pagina--custos .vesper-custos-regua__faixa { display: block; height: 100%; }
.vesper-pagina--custos .vesper-custos-regua__faixa + .vesper-custos-regua__faixa {
  border-left: 2px solid var(--vesper-painel);
}

.vesper-pagina--custos .is-vesper { background: var(--vesper-tinta); }
.vesper-pagina--custos .is-siape { background: var(--vesper-ociosa); }
.vesper-pagina--custos .is-outros {
  background: repeating-linear-gradient(135deg, var(--vesper-ociosa) 0 4px,
                                        var(--vesper-linha-forte) 4px 6px);
}

.vesper-pagina--custos .vesper-custos-regua__legenda {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  list-style: none; margin: 8px 0 0; padding: 0;
  font-size: var(--vesper-t-s); color: var(--vesper-tinta-2);
}
.vesper-pagina--custos .vesper-custos-regua__legenda li { display: inline-flex; align-items: center; }
.vesper-pagina--custos .vesper-custos-regua__amostra {
  display: inline-block; width: 12px; height: 12px; margin-right: 8px;
  border-radius: 2px; border: 1px solid var(--vesper-linha-forte);
}

.vesper-pagina--custos .vesper-custos-sub {
  font-size: var(--vesper-t-m); font-weight: 650; margin: 18px 0 8px;
}
.vesper-pagina--custos .vesper-custos-total th,
.vesper-pagina--custos .vesper-custos-total td { font-weight: 700; }
.vesper-pagina--custos td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }