/* ===========================================================================
   Potencial Baterias — /comercial/potencial-baterias
   Só tokens --theme-* / --comerc-*: nenhuma cor literal nova, para o claro e o
   escuro saírem certos sem duplicar regra. Este arquivo mora na RAIZ de
   assets/ de propósito: o Dash percorre assets/ com os.walk, que entrega os
   arquivos da raiz ANTES dos de assets/css/, então assets/css/zz_theme_dark.css
   continua vencendo a cascata do tema escuro. Renomear quebra isso.
   =========================================================================== */

.pb-page {
  display: block;
}

/* ── workspace: premissas + conteúdo ─────────────────────────────────────── */
.pb-workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* Recolhido pelo callback clientside: só CSS, o DOM não desmonta e os State
   seguem legíveis. */
.pb-workspace.pb-side-oculta {
  grid-template-columns: 0 minmax(0, 1fr);
}

.pb-workspace.pb-side-oculta .pb-sidebar {
  display: none;
}

@media (max-width: 1100px) {
  .pb-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pb-content {
  min-width: 0;   /* sem isto o grid estoura quando a DataTable é larga */
}

/* ── barra de premissas ──────────────────────────────────────────────────── */
.pb-sidebar {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
  background: var(--theme-panel);
}

/* O topo (título + Atualizar) fica visível enquanto a lista rola. */
.pb-side-topo {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px 10px;
  background: var(--theme-panel);
  border-bottom: 1px solid var(--theme-line);
}

.pb-side-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.pb-side-titulo {
  font-family: var(--theme-serif);
  font-size: 1.2rem;
  margin: 0;
  color: var(--theme-ink);
}

.pb-side-colapsa {
  background: transparent;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  color: var(--theme-mut);
  padding: 3px 8px;
  cursor: pointer;
}

.pb-side-colapsa:hover,
.pb-side-colapsa:focus-visible {
  color: var(--theme-ink);
  border-color: var(--theme-ink);
}

/* Atualizar: a única ação que calcula. Mesmo par de cores do .chip.gr. */
.pb-btn-atualizar {
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--theme-bg);
  background: var(--comerc-green-dark, var(--comerc-green));
  cursor: pointer;
  transition: box-shadow .15s ease;
}

.pb-btn-atualizar:hover {
  filter: brightness(1.05);
}

.pb-btn-atualizar:focus-visible {
  outline: 2px solid var(--theme-ink);
  outline-offset: 2px;
}

/* Premissa mudou e ainda não foi aplicada: anel em volta do botão + a frase
   logo abaixo (a cor nunca carrega o recado sozinha). */
.pb-btn-atualizar.pb-pendente-on {
  box-shadow: 0 0 0 3px var(--comerc-green-lighter, var(--theme-line));
}

.pb-pendente {
  margin-top: 6px;
  font-size: .8rem;
  color: var(--theme-ink);
}

.pb-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.pb-btn-preset {
  padding: 5px 8px;
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  background: transparent;
  color: var(--theme-mut);
  font-size: .78rem;
  cursor: pointer;
}

.pb-btn-preset:hover,
.pb-btn-preset:focus-visible {
  color: var(--theme-ink);
  border-color: var(--theme-ink);
}

.pb-status {
  margin-top: 8px;
  color: var(--theme-mut);
  font-size: .78rem;
  line-height: 1.4;
}

.pb-status:empty {
  display: none;
}

.pb-status-erro {
  color: var(--theme-ink);
}

.pb-erro:not(:empty) {
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 3px solid var(--theme-ink);
  border-radius: 4px;
  background: var(--theme-panel2);
  color: var(--theme-ink);
  font-size: .78rem;
}

/* ── grupos recolhíveis ──────────────────────────────────────────────────── */
.pb-grupo {
  border-bottom: 1px solid var(--theme-line);
}

.pb-grupo:last-child {
  border-bottom: 0;
}

.pb-grupo-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  color: var(--theme-ink);
}

.pb-grupo-summary::-webkit-details-marker {
  display: none;
}

.pb-grupo-titulo {
  font-weight: 600;
  font-size: .92rem;
}

.pb-grupo-icone {
  color: var(--theme-mut);
  font-size: .75rem;
  transition: transform .15s ease;
}

.pb-grupo[open] .pb-grupo-icone {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .pb-grupo-icone,
  .pb-btn-atualizar {
    transition: none;
  }
}

.pb-grupo-corpo {
  padding: 0 14px 12px;
}

/* ── campos ──────────────────────────────────────────────────────────────── */
.pb-campo {
  margin-top: 10px;
}

.pb-campo:first-child {
  margin-top: 0;
}

.pb-rotulo-linha {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}

.pb-rotulo {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--theme-mut);
}

.pb-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.pb-duo .pb-campo {
  margin-top: 0;
}

.pb-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.pb-trio .input-group-text {
  padding: 0 5px;
  font-size: .7rem;
}

.pb-mini {
  min-width: 0;
}

.pb-mini-rotulo {
  display: block;
  margin: 0 0 2px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--theme-mut);
}

/* Spinner nativo do input number come ~16px e cobre o ultimo digito nos
   campos estreitos (170 aparecia como 17). Digitar e o caminho aqui. */
.pb-sidebar input[type=number]::-webkit-inner-spin-button,
.pb-sidebar input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pb-sidebar input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
  padding-left: 6px;
  padding-right: 6px;
}

.pb-radio label,
.pb-check label {
  display: block;
  font-size: .84rem;
  color: var(--theme-ink);
  margin-bottom: 3px;
  cursor: pointer;
}

.pb-radio input,
.pb-check input {
  margin-right: 6px;
}

.pb-radio-inline label {
  display: inline-block;
  margin-right: 12px;
}

.pb-switch {
  margin-top: 10px;
  font-size: .84rem;
}

/* ── ajuda em tooltip ────────────────────────────────────────────────────── */
.pb-info-slot {
  display: inline-flex;
  align-items: center;
}

.pb-info-btn {
  background: transparent;
  border: 0;
  padding: 0 2px;
  color: var(--theme-dim);
  font-size: .75rem;
  cursor: help;
}

.pb-info-btn:hover,
.pb-info-btn:focus-visible {
  color: var(--theme-ink);
}

.pb-info-tip {
  max-width: 320px;
  text-align: left;
}

/* ── coluna de conteúdo ──────────────────────────────────────────────────── */
.pb-chips {
  display: flex;
  flex-wrap: wrap;
  margin: 4px 0 6px;
}

.pb-kpis {
  margin-bottom: 14px;
}

.pb-zero {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--theme-ink);
  border-radius: 4px;
  background: var(--theme-panel2);
  color: var(--theme-ink);
  font-size: .88rem;
}

.pb-sec-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pb-sec-body {
  margin-top: 10px;
}

/* Seletor segmentado (métrica da matriz, recorte da tabela). */
.pb-seg label {
  margin: 0 0 0 4px;
  padding: 3px 10px;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  font-size: .8rem;
}

.pb-seg input {
  margin-right: 4px;
}

.pb-rank-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

@media (max-width: 900px) {
  .pb-rank-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pb-tabela td.pb-num,
.pb-tabela th.pb-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pb-nota {
  color: var(--theme-mut);
  font-size: .84rem;
  line-height: 1.5;
  margin: 8px 0 0;
}

.pb-nota:empty {
  display: none;
}

/* ── aba Unidades ────────────────────────────────────────────────────────── */
.pb-unid-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.pb-unid-barra .pb-seg label:first-child {
  margin-left: 0;
}

.pb-contagem {
  color: var(--theme-mut);
  font-size: .84rem;
}

.pb-export {
  margin-left: auto;
}

.pb-motivos {
  flex-basis: 100%;
  margin-top: 6px;
}

.pb-export-msg {
  flex-basis: 100%;
  margin-top: 0;
}

/* ── CAPEX por faixa de racks (barra Comercial) ─────────────────────────── */
.pb-capex-faixas[hidden] {
  display: none;
}

.pb-capex-tabela {
  width: 100%;
  font-size: .84rem;
}

.pb-capex-legenda {
  caption-side: top;
  color: var(--theme-mut);
  padding: 0 0 4px;
  text-align: left;
}

/* ===========================================================================
   Identidade Vesper (2026-10-06): tokens --vesper-*, ação é tinta, verde é
   carga e brasa é descarga (nenhum dos dois é cor de interface aqui).
   Este bloco vem por último de propósito: vence as regras copiadas do SIAPE
   acima sem !important. Regras de tabela (.pb-tabela, .pb-capex-tabela,
   .pb-num) ficam como estavam: são do pacote de tabelas.
   =========================================================================== */

/* painel de premissas */
.pb-sidebar {
  border-color: var(--vesper-linha);
  border-radius: var(--vesper-raio-painel);
  background: var(--vesper-painel);
}
.pb-side-topo {
  background: var(--vesper-painel);
  border-bottom-color: var(--vesper-linha);
}
.pb-side-titulo {
  font-family: var(--vesper-fonte);
  font-size: 17px;
  font-weight: 650;
  font-variation-settings: "wdth" 105;
  color: var(--vesper-tinta);
}
.pb-side-colapsa {
  border-color: var(--vesper-linha-forte);
  border-radius: var(--vesper-raio-controle);
  color: var(--vesper-tinta-2);
}
.pb-side-colapsa:hover { color: var(--vesper-tinta); border-color: var(--vesper-tinta-3); background: var(--vesper-painel-2); }
.pb-side-colapsa:focus-visible,
.pb-btn-preset:focus-visible,
.pb-info-btn:focus-visible,
.pb-grupo-summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Atualizar: tinta, inverte no tema escuro (a tinta clareia) */
.pb-btn-atualizar {
  border-radius: var(--vesper-raio-controle);
  color: var(--vesper-painel);
  background: var(--vesper-tinta);
  font-weight: 650;
  font-size: var(--vesper-t-m);
}
.pb-btn-atualizar:hover { filter: none; background: var(--vesper-acao-hover); }
.pb-btn-atualizar:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pb-btn-atualizar.pb-pendente-on { box-shadow: 0 0 0 3px var(--vesper-aviso-suave), 0 0 0 4px var(--vesper-aviso); }

/* alterações não aplicadas: aviso com a frase (a cor não carrega o recado sozinha) */
.pb-pendente {
  margin-top: 8px;
  font-size: var(--vesper-t-xs);
  color: var(--vesper-tinta);
}
.pb-pendente:not(:empty) {
  padding: 6px 8px;
  border-left: 3px solid var(--vesper-aviso);
  border-radius: var(--vesper-raio-celula);
  background: var(--vesper-aviso-suave);
}

/* presets */
.pb-btn-preset {
  border-color: var(--vesper-linha-forte);
  border-radius: var(--vesper-raio-controle);
  color: var(--vesper-tinta-2);
  font-size: var(--vesper-t-xs);
  font-weight: 600;
}
.pb-btn-preset:hover { color: var(--vesper-tinta); border-color: var(--vesper-tinta-3); background: var(--vesper-painel-2); }

/* status do cálculo e erros */
.pb-status { color: var(--vesper-tinta-3); font-size: var(--vesper-t-xs); }
.pb-status-erro { color: var(--vesper-perigo); font-weight: 600; }
.pb-erro:not(:empty) {
  border-left-color: var(--vesper-perigo);
  border-radius: var(--vesper-raio-celula);
  background: var(--vesper-perigo-suave);
  color: var(--vesper-tinta);
  font-size: var(--vesper-t-xs);
}

/* grupos recolhíveis */
.pb-grupo { border-bottom-color: var(--vesper-linha); }
.pb-grupo-summary { color: var(--vesper-tinta); }
.pb-grupo-summary:hover { background: var(--vesper-painel-2); }
.pb-grupo-titulo { font-weight: 650; font-size: var(--vesper-t-s); }
.pb-grupo-icone { color: var(--vesper-tinta-3); }

/* rótulos e campos: caixa de frase, tinta secundária */
.pb-rotulo,
.pb-mini-rotulo {
  color: var(--vesper-tinta-2);
  font-size: var(--vesper-t-xs);
  font-weight: 620;
  font-variation-settings: "wdth" var(--vesper-estreito);
  text-transform: none;
  letter-spacing: 0;
}
.pb-radio label,
.pb-check label { color: var(--vesper-tinta); font-size: var(--vesper-t-s); }
.pb-switch { color: var(--vesper-tinta); font-size: var(--vesper-t-s); }
.pb-switch .form-check-input:focus { border-color: var(--vesper-tinta-3); box-shadow: 0 0 0 2px var(--focus-ring); }
.pb-info-btn { color: var(--vesper-tinta-3); }
.pb-info-btn:hover { color: var(--vesper-tinta); }

/* seletor segmentado: pílula com a opção ativa em tinta */
.pb-seg label {
  display: inline-block;
  position: relative;
  border-color: var(--vesper-linha-forte);
  background: var(--vesper-painel);
  color: var(--vesper-tinta-2);
  font-size: var(--vesper-t-xs);
  font-weight: 620;
  cursor: pointer;
}
.pb-seg label:hover { color: var(--vesper-tinta); border-color: var(--vesper-tinta-3); background: var(--vesper-painel-2); }
.pb-seg label:has(input:checked) {
  background: var(--vesper-tinta);
  border-color: var(--vesper-tinta);
  color: var(--vesper-painel);
}
.pb-seg label:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pb-seg input {
  position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}

/* área de conteúdo */
.pb-nota { color: var(--vesper-tinta-3); font-size: var(--vesper-t-s); }
.pb-contagem { color: var(--vesper-tinta-2); font-size: var(--vesper-t-s); }
.pb-chips .chip { margin-top: 8px; }
.pb-zero {
  border-left-color: var(--vesper-aviso);
  border-radius: var(--vesper-raio-controle);
  background: var(--vesper-aviso-suave);
  color: var(--vesper-tinta);
  font-size: var(--vesper-t-s);
}
.pb-kpis { margin-bottom: 14px; }
.pb-capex-legenda { color: var(--vesper-tinta-3); }

/* títulos dos cartões (CAPEX x modulação, rankings): Archivo 650, 17px */
.pb-content .theme-card h3,
.pb-content .theme-card h4,
.pb-content .section-title {
  font-family: var(--vesper-fonte);
  font-size: 17px;
  font-weight: 650;
  font-variation-settings: "wdth" 105;
  color: var(--vesper-tinta);
}

/* abas: sublinhado e peso em tinta (rede de segurança sobre o 90) */
.pb-content .nav-tabs .nav-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

/* ===========================================================================
   Moldura viva (2026-10-06): a cor da página (entardecer, âmbar) só em ícones
   e barra de KPI; abas, botões, seleção e foco seguem tinta. Plano:
   docs/planos/moldura-viva.md
   =========================================================================== */

/* título do cartão com o ícone de seção ao lado */
.pb-content .ui-card-titulo { display: flex; align-items: center; }
.pb-content .ui-card-titulo .vesper-icone-secao { margin-right: 10px; }

/* versão menor (Premissas e seus grupos): 24 px, ícone de 12 px */
.pb-icone-pequeno { width: 24px; height: 24px; margin-right: 8px; font-size: 12px; }
.pb-side-titulo { display: flex; align-items: center; }
.pb-grupo-summary .pb-icone-pequeno { margin-right: 8px; }

/* KPIs: um cartão, vários números; a barra de 3 px fica em cima de cada número
   e o cartão ganha um respiro no topo para a barra não colar na borda */
.pb-kpi-strip { padding-top: 18px; gap: 14px 28px; }
.pb-kpi-strip .vesper-kpi { padding-left: 2px; padding-right: 2px; }

/* chip de estimativa: tokens de aviso, com a frase e o ícone (não só a cor) */
.chip.aviso {
  color: var(--vesper-tinta);
  background: var(--vesper-aviso-suave);
  border-color: var(--vesper-aviso);
  font-weight: 620;
}
.chip.aviso .fas { color: var(--vesper-aviso); }

/* cartões da página: sem sombra, painel sobre o papel esverdeado */
.pb-content .theme-card { margin-bottom: 14px; }

/* as duas colunas dos rankings alinham no topo (a regra "card + card" do 20 empurrava a 2ª) */
.pb-content .pb-rank-grid > .theme-card { margin-top: 0; }
/* título do grupo à esquerda, ao lado do ícone */
.pb-grupo-summary .pb-grupo-titulo { flex: 1; text-align: left; }