/* =====================================================================
   Vesper — tema dos componentes Dash/Bootstrap e ajustes sobre o CSS
   copiado do SIAPE (20/21/30/31). Carrega por último: vence os copiados.
   Dash 3.2 = dcc.Dropdown em react-select v1 (classes .Select-*).
   ===================================================================== */

/* ── cabeçalho de página (components/ui.page_header) ───────────────────── */
.page-hero { margin: 0 0 14px; }
.page-hero h1, .page-hero h2 {
  font-family: var(--vesper-fonte); font-size: var(--vesper-t-2xl); font-weight: 760;
  font-variation-settings: "wdth" var(--vesper-largo); letter-spacing: -0.01em;
  line-height: 1.12; margin: 0 0 6px; color: var(--vesper-tinta); text-transform: none;
}
/* destaque não muda de cor: o título é uma frase só */
.page-hero h1 em, .page-hero h2 em { font-style: normal; color: inherit; }
.page-hero .hero-sub { color: var(--vesper-tinta-2); font-size: 16px; max-width: 78ch; margin: 0; }

.chip {
  display: inline-block; margin: 10px 8px 0 0; padding: 3px 12px;
  font-size: var(--vesper-t-s); color: var(--vesper-tinta-2);
  border: 1px solid var(--vesper-linha); border-radius: 999px; background: var(--vesper-painel);
  white-space: nowrap;
}
/* chip de estado ligado: acento de controle (tinta); verde é só carga */
.chip.gr { color: var(--vesper-tinta); background: var(--vesper-acento-suave); border-color: var(--vesper-tinta-3); font-weight: 620; }

/* ── títulos de seção e rótulos ───────────────────────────────────────── */
.section-title {
  font-family: var(--vesper-fonte); font-weight: 680; font-size: var(--vesper-t-l);
  font-variation-settings: "wdth" 110; color: var(--vesper-tinta); letter-spacing: 0;
}
.section-title em { font-style: normal; color: inherit; }
.filter-label {
  font-size: var(--vesper-t-s) !important; font-weight: 620 !important; color: var(--vesper-tinta-2) !important;
  font-variation-settings: "wdth" var(--vesper-estreito); text-transform: none !important; letter-spacing: 0 !important;
}
.theme-note { color: var(--vesper-tinta-3); font-size: var(--vesper-t-s); }

/* ── cards e KPIs ─────────────────────────────────────────────────────── */
.theme-card {
  background: var(--vesper-painel) !important; border: 1px solid var(--vesper-linha) !important;
  border-radius: var(--vesper-raio-painel) !important; box-shadow: none !important;
}
.kpi-strip {
  border: 1px solid var(--vesper-linha); border-radius: var(--vesper-raio-painel);
  background: var(--vesper-painel); padding: 16px 20px; margin: 14px 0;
  display: flex; flex-wrap: wrap; gap: 10px 40px;
}
.kpi-stat .v {
  font-family: var(--vesper-fonte); font-size: 28px; font-weight: 720; line-height: 1.05;
  font-variation-settings: "wdth" 112; color: var(--vesper-tinta);
}
.kpi-stat .v small { font-size: 14px; font-weight: 500; color: var(--vesper-tinta-2); }
.kpi-stat .k { color: var(--vesper-tinta-2); font-size: var(--vesper-t-s); margin-top: 4px; }

/* ── botões herdados das páginas copiadas ─────────────────────────────── */
.btn.comerc-btn, .btn.comerc-btn:focus, .btn.comerc-btn:active {
  background: var(--vesper-tinta); border: 1px solid var(--vesper-tinta); color: var(--vesper-painel);
  font-weight: 650; border-radius: var(--vesper-raio-controle); box-shadow: none;
}
.btn.comerc-btn:hover { background: var(--vesper-acao-hover); border-color: var(--vesper-acao-hover); color: var(--vesper-painel); }
.btn.btn-comerc-outline, .btn.btn-outline-primary {
  background: transparent; color: var(--vesper-tinta); border: 1px solid var(--vesper-linha-forte);
  border-radius: var(--vesper-raio-controle); font-weight: 600;
}
.btn.btn-comerc-outline:hover, .btn.btn-outline-primary:hover {
  background: var(--vesper-painel-2); color: var(--vesper-tinta); border-color: var(--vesper-tinta-3);
}
/* btn-primary é o padrão do dbc.Button: vale só onde a página não deu classe
   própria (.vesper-btn manda nas páginas de sistema). */
.btn.btn-primary:not(.vesper-btn), .btn.btn-primary:not(.vesper-btn):focus,
.btn.btn-primary:not(.vesper-btn):active {
  background: var(--vesper-tinta); border-color: var(--vesper-tinta); color: var(--vesper-painel);
}
.btn.btn-primary:not(.vesper-btn):hover { background: var(--vesper-acao-hover); border-color: var(--vesper-acao-hover); color: var(--vesper-painel); }
.btn.btn-outline-secondary, .btn.btn-secondary.btn-outline {
  color: var(--vesper-tinta-2); border-color: var(--vesper-linha-forte); background: transparent;
}
.btn.btn-outline-secondary:hover { background: var(--vesper-painel-2); color: var(--vesper-tinta); }
.btn.btn-outline-success { color: var(--vesper-tinta); border-color: var(--vesper-linha-forte); }
.btn.btn-outline-success:hover { background: var(--vesper-acento-suave); color: var(--vesper-tinta); border-color: var(--vesper-tinta-3); }
.btn { border-radius: var(--vesper-raio-controle); }

/* ── dcc.Dropdown (react-select v1) ───────────────────────────────────── */
.Select-control {
  border-radius: var(--vesper-raio-controle) !important; border-color: var(--vesper-linha-forte) !important;
  background-color: var(--vesper-painel) !important; color: var(--vesper-tinta);
}
.Select-value-label,
.has-value.Select--single > .Select-control .Select-value .Select-value-label,
.Select-input > input { color: var(--vesper-tinta) !important; }
.Select-placeholder, .Select--single > .Select-control .Select-value { color: var(--vesper-tinta-3); }
.Select-arrow { border-top-color: var(--vesper-tinta-2); }
.Select-menu-outer {
  background-color: var(--vesper-painel) !important; border-color: var(--vesper-linha) !important;
  box-shadow: var(--shadow-md) !important; border-radius: 0 0 var(--vesper-raio-controle) var(--vesper-raio-controle);
}
.Select-option, .VirtualizedSelectOption { color: var(--vesper-tinta); background: transparent; }
.Select-option.is-focused, .VirtualizedSelectFocusedOption { background-color: var(--vesper-acento-suave); }
.Select-option.is-selected, .VirtualizedSelectSelectedOption { background-color: var(--vesper-acento-suave); font-weight: 600; }
.Select-option.is-disabled, .VirtualizedSelectDisabledOption { color: var(--vesper-tinta-3); }
.Select--multi .Select-value {
  background-color: var(--vesper-acento-suave); border-color: var(--vesper-linha-forte); color: var(--vesper-tinta);
}
.Select--multi .Select-value-icon { border-right-color: var(--vesper-linha-forte); }
.Select--multi .Select-value-icon:hover { background-color: var(--vesper-acento-suave); color: var(--vesper-tinta); }
.Select.is-disabled > .Select-control { background-color: var(--vesper-painel-2) !important; }
.Select-noresults { color: var(--vesper-tinta-3); }

/* ── inputs Bootstrap ─────────────────────────────────────────────────── */
.form-control, .form-select, .input-group-text {
  border-color: var(--vesper-linha-forte); border-radius: var(--vesper-raio-controle);
  background-color: var(--vesper-painel); color: var(--vesper-tinta);
}
.form-control:disabled, .form-select:disabled { background-color: var(--vesper-painel-2); color: var(--vesper-tinta-3); }
.form-control::placeholder { color: var(--vesper-tinta-3); opacity: 1; }
.input-group-text { background-color: var(--vesper-painel-2); color: var(--vesper-tinta-2); }
.form-check-input:checked { background-color: var(--vesper-acento); border-color: var(--vesper-acento); }
html[data-theme="dark"] .form-check-input { background-color: var(--vesper-painel-2); border-color: var(--vesper-linha-forte); }
html[data-theme="dark"] .form-check-input:checked { background-color: var(--vesper-acento); border-color: var(--vesper-acento); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--vesper-acento); }
html[data-theme="dark"] input[type="radio"], html[data-theme="dark"] input[type="checkbox"] { accent-color: var(--vesper-acento); }

/* ── sliders (dcc.Slider / RangeSlider, rc-slider) ────────────────────── */
.rc-slider-track { background-color: var(--vesper-acento) !important; }
.rc-slider-rail { background-color: var(--vesper-ociosa) !important; }
.rc-slider-handle { border-color: var(--vesper-acento) !important; background: var(--vesper-painel) !important; }
.rc-slider-mark-text { color: var(--vesper-tinta-3) !important; }
.rc-slider-dot { border-color: var(--vesper-linha-forte) !important; background: var(--vesper-painel) !important; }

/* ── abas Bootstrap (Potencial) ───────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--vesper-linha); }
.nav-tabs .nav-link {
  color: var(--vesper-tinta-2); font-weight: 620; border: 0; background: transparent;
  border-bottom: 3px solid transparent; border-radius: 0; padding: 10px 14px;
}
.nav-tabs .nav-link:hover { color: var(--vesper-tinta); border-bottom-color: var(--vesper-linha-forte); }
.nav-tabs .nav-link.active, .comp-section-tabs .nav-link.active {
  color: var(--vesper-tinta) !important; background: transparent !important;
  border-bottom: 3px solid var(--vesper-tinta) !important;
}

/* ── tabelas (sistema único; HTML em 20_componentes.css) ───────────────────
   Aqui: o que sobrescreve o CSS copiado (30/31) e tudo do DataTable.
   Mecanismo: o DataTable escreve borda, largura e white-space INLINE em cada
   th/td; o que o CSS consegue sem !important (fundo, tipografia, padding,
   foco, paginação) fica sem; o que o inline trava leva !important e vem
   marcado "inline" no comentário. */
.theme-table .dash-spreadsheet-container { border: 0; }
.dash-table-tooltip { background: var(--vesper-painel); color: var(--vesper-tinta); border: 1px solid var(--vesper-linha); }
.show-hide, .show-hide-menu { display: none !important; }  /* menu de colunas do DataTable: sem uso aqui */
.table { color: var(--vesper-tinta); }
.table > :not(caption) > * > * { background: transparent; color: inherit; border-color: var(--vesper-linha); }

/* o CSS do Simulador forçava raio de controle (8px) com !important: tabela é painel */
.cli-page .theme-table,
.cli-page .theme-tablewrap { border-radius: var(--vesper-raio-painel) !important; }  /* vence o !important de 30_simulador.css */
.cli-page .theme-tablewrap > table.theme-table { border-radius: 0 !important; }      /* idem: a moldura é a do wrap */
.cli-page .theme-tablewrap[role="region"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* tabelas HTML do Potencial e da Modulação */
.pb-tabela td.pb-num, .pb-tabela th.pb-num,
.theme-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pb-capex-tabela { width: 100%; font-size: var(--vesper-t-s); }
.pb-capex-tabela thead th, .pb-capex-tabela tbody th, .pb-capex-tabela tbody td { padding: 6px 8px; }  /* painel estreito: linha compacta */
.pb-capex-legenda { caption-side: top; color: var(--vesper-tinta-3); padding: 0 0 6px; text-align: left; }
.cli-page #cli-bat-mod-tabela > table.theme-table { width: 100%; }

/* ── DataTable (#cli-datatable, #pb-datatable, qualquer outro) ───────────── */
.theme-table .dash-table-container .dash-spreadsheet-container { border: 0; border-radius: 0; }  /* a moldura é a do .theme-table */
html .dash-table-container .dash-spreadsheet-container {
  border: 1px solid var(--vesper-linha);
  border-radius: var(--vesper-raio-painel);
  background: var(--vesper-painel);
}
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner { background: transparent; }
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner,
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td,
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th,
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input {
  font-family: var(--vesper-fonte) !important;  /* inline: table_styles() põe Segoe UI em toda célula */
}

/* inline: o DataTable traz border 1px lightgrey em toda célula. Aqui: só filete
   horizontal (cor de linha), nada de vertical, sem borda de topo. */
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th,
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
  border-top-width: 0 !important;
  border-left-width: 0 !important;
  border-right-width: 0 !important;
  border-bottom-width: 1px !important;
  border-color: var(--vesper-linha) !important;
}

/* cabeçalho: trilho + tinta, Archivo estreito 620 em caixa de frase */
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-header {
  background-color: var(--vesper-trilho) !important;
  color: var(--vesper-tinta);
  font-size: var(--vesper-t-s) !important;
  font-weight: 620;
  font-variation-settings: "wdth" var(--vesper-estreito);
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 8px !important;
  text-align: left;
}
/* o rótulo quebra em vez de ser cortado ("Modalidade cadastrad…"); o span é nosso, sem inline */
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header-name { white-space: normal; overflow-wrap: break-word; }
/* fim do cabeçalho: filete forte (inline: vence a cor de borda inline) */
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:has(+ tr th.dash-filter) th.dash-header,
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:last-child th.dash-header { border-bottom-color: var(--vesper-linha-forte) !important; }
/* nível de grupo ("Cadastro", "Potencial de fatura"): menor, mais leve, e um
   traço separa os grupos (box-shadow: não briga com a borda inline) */
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-header:not([colspan="1"]) {
  font-size: var(--vesper-t-xs);
  font-weight: 560;
  color: var(--vesper-tinta-2);
  padding-top: 7px; padding-bottom: 7px;
  box-shadow: inset 1px 0 0 var(--vesper-linha-forte);
}

/* coluna do checkbox: mesma faixa do cabeçalho e do filtro */
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-select-header { background-color: var(--vesper-trilho) !important; padding: 0 8px !important; text-align: center; }
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:has(th.dash-filter) th.dash-select-header { background-color: var(--vesper-painel-2) !important; }

/* inline: config/theme.table_styles() (pb-datatable) põe fundo transparente, padding e 15px em
   toda célula; sem !important o zebra/hover/seleção e o cabeçalho tingido não aparecem ali.
   Quando table_styles() perder o visual inline, estes !important podem sair. */

/* ordenação: ícone discreto; a coluna ordenada vai a tinta */
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--sort { color: var(--vesper-tinta-3); cursor: pointer; }
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--sort svg { width: .62rem; height: .8rem; opacity: .75; }
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--sort:hover,
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--sort:hover svg { color: var(--vesper-tinta); }
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--sort:has(svg[data-icon="sort-up"]),
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--sort:has(svg[data-icon="sort-down"]),
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--sort svg[data-icon="sort-up"],
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--sort svg[data-icon="sort-down"] { color: var(--vesper-tinta); opacity: 1; }

/* linha de filtro: painel-2, campo discreto; sem o "Aa" (sensibilidade) */
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter { background-color: var(--vesper-painel-2) !important; padding: 6px 8px !important; }
html .dash-table-container .dash-filter--case { display: none; }
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter input:not([type="radio"]):not([type="checkbox"]),
.cli-page #cli-datatable.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%; min-width: 58px; height: 30px; line-height: 1.2; padding: 3px 8px;
  border: 1px solid var(--vesper-linha); border-radius: var(--vesper-raio-controle);
  background: var(--vesper-painel); color: var(--vesper-tinta);
  font-family: var(--vesper-fonte); font-size: var(--vesper-t-xs); text-align: left;
}
html .dash-table-container .dash-filter input::placeholder,
.cli-page #cli-datatable.dash-table-container .dash-filter input::placeholder { color: var(--vesper-tinta-3); opacity: 1; }
html .dash-table-container .dash-filter input:focus,
html .dash-table-container .dash-filter input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: var(--vesper-linha-forte); }

/* corpo: tipografia, zebra, hover e seleção (ação é tinta) */
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
  background-color: var(--vesper-painel) !important;
  color: var(--vesper-tinta);
  font-size: var(--vesper-t-s) !important;
  line-height: 1.35;
  padding: 8px 12px !important;
  text-align: left;       /* número à direita: style_cell_conditional (inline) das colunas numéricas */
  font-variant-numeric: tabular-nums;
}
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tbody tr:nth-child(even) td { background-color: var(--vesper-painel-2) !important; }
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tbody tr:hover td {
  background-color: color-mix(in srgb, var(--vesper-tinta) 7%, var(--vesper-painel)) !important;
}
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tbody tr:has(td.dash-select-cell input:checked) td {
  background-color: color-mix(in srgb, var(--vesper-tinta) 12%, var(--vesper-painel)) !important;
}
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tbody tr:has(td.dash-select-cell input:checked):hover td {
  background-color: color-mix(in srgb, var(--vesper-tinta) 16%, var(--vesper-painel)) !important;
}
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-select-cell:has(input:checked) { box-shadow: inset 3px 0 0 var(--vesper-tinta); }
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.focused,
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.focused.cell--selected { background-color: var(--vesper-acento-suave); outline: 2px solid var(--focus-ring); outline-offset: -2px; }
html .dash-table-container input[type="checkbox"], .cli-select-all-cb { accent-color: var(--vesper-tinta); cursor: pointer; }
html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-select-cell, html .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-select-header { text-align: center; padding: 0; text-overflow: clip; }  /* célula de 30px: padding maior fazia o "…" aparecer ao lado da caixa */

/* paginação: controles discretos em tinta, página atual legível */
html .dash-table-container .previous-next-container {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  padding: 10px 4px 2px; color: var(--vesper-tinta-2); font-size: var(--vesper-t-s);
}
html .dash-table-container .previous-next-container button {
  width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  color: var(--vesper-tinta); background: var(--vesper-painel);
  border: 1px solid var(--vesper-linha); border-radius: var(--vesper-raio-controle);
  cursor: pointer; transition: background-color .12s ease, border-color .12s ease;
}
html .dash-table-container .previous-next-container button:hover:not(:disabled) { background: var(--vesper-acento-suave); border-color: var(--vesper-linha-forte); }
html .dash-table-container .previous-next-container button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
html .dash-table-container .previous-next-container button:disabled { color: var(--vesper-tinta-3); opacity: .45; cursor: default; }
html .dash-table-container .previous-next-container, html .dash-table-container .previous-next-container * { font-family: var(--vesper-fonte); }
html .dash-table-container .previous-next-container .page-number { display: inline-flex; align-items: center; gap: 6px; color: var(--vesper-tinta-2); }
html .dash-table-container .previous-next-container .current-page-container {
  position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 8px;
  background: var(--vesper-painel); border: 1px solid var(--vesper-linha-forte); border-radius: var(--vesper-raio-controle);
}
/* o "shadow" só dimensiona a caixa pelo texto; o input (absoluto) é quem desenha */
html .dash-table-container .previous-next-container .page-number .current-page-container .current-page-shadow { visibility: hidden; border: 0; color: var(--vesper-tinta); font-family: var(--vesper-fonte); font-weight: 650; }
html .dash-table-container .previous-next-container .page-number .current-page-container input.current-page {
  background: transparent; border: 0; padding: 0; width: 100%;
  /* a cor mora aqui (cadeia completa): o CSS do DataTable usa a mesma cadeia e
     pintava o número de preto, sumindo no tema escuro (medido em 2026-10-06) */
  color: var(--vesper-tinta); -webkit-text-fill-color: var(--vesper-tinta);
}
html .dash-table-container .previous-next-container .page-number .current-page-container input.current-page::placeholder {
  color: var(--vesper-tinta); -webkit-text-fill-color: var(--vesper-tinta); opacity: 1;
}
html .dash-table-container .previous-next-container input.current-page {
  height: 30px; text-align: center; font-weight: 650; font-size: var(--vesper-t-s);
  color: var(--vesper-tinta);
}
html .dash-table-container .previous-next-container input.current-page::placeholder { color: var(--vesper-tinta); opacity: 1; }
html .dash-table-container .previous-next-container input.current-page:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
@media (prefers-reduced-motion: reduce) {
  .dash-table-container .previous-next-container button { transition: none; }
}

/* ── alertas, badges, tooltip, accordion ──────────────────────────────── */
.alert { border-radius: var(--vesper-raio-controle); }
.alert-info { background: var(--vesper-acento-suave); border-color: var(--vesper-linha-forte); color: var(--vesper-tinta); }
.alert-warning { background: var(--vesper-aviso-suave); border-color: rgba(230, 159, 0, .45); color: var(--vesper-tinta); }
.alert-danger { background: var(--vesper-perigo-suave); border-color: var(--vesper-perigo); color: var(--vesper-tinta); }
.alert-success { background: var(--vesper-carga-suave); border-color: var(--vesper-carga); color: var(--vesper-tinta); }
.alert-light, .alert-secondary { background: var(--vesper-painel-2); border-color: var(--vesper-linha); color: var(--vesper-tinta-2); }
.badge.bg-light { background: var(--vesper-painel-2) !important; color: var(--vesper-tinta) !important; border: 1px solid var(--vesper-linha); }
.badge.bg-success { background: var(--vesper-carga-texto) !important; }
.badge.bg-warning { color: #16241B !important; }
.tooltip-inner { background: var(--vesper-tinta); color: var(--vesper-painel); font-size: var(--vesper-t-s); text-align: left; max-width: 340px; }
.accordion-item { background: var(--vesper-painel); border-color: var(--vesper-linha); color: var(--vesper-tinta); }
.accordion-button { background: var(--vesper-painel); color: var(--vesper-tinta); font-weight: 620; }
.accordion-button:not(.collapsed) { background: var(--vesper-painel-2); color: var(--vesper-tinta); box-shadow: none; }
html[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.4); }
.spinner-border { color: var(--vesper-tinta-2) !important; }

/* ── tema escuro: o que o Bootstrap pinta fixo ────────────────────────── */
html[data-theme="dark"] body, html[data-theme="dark"] p, html[data-theme="dark"] label,
html[data-theme="dark"] li { color: var(--vesper-tinta); }
html[data-theme="dark"] .text-muted { color: var(--vesper-tinta-2) !important; }
html[data-theme="dark"] hr { border-color: var(--vesper-linha); opacity: 1; }
html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .card {
  background: var(--vesper-painel); color: var(--vesper-tinta); border-color: var(--vesper-linha);
}
html[data-theme="dark"] .btn-close { filter: invert(1); }
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--vesper-papel); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--vesper-linha-forte); border-radius: 6px; }

/* ── páginas copiadas: o shell já dá o respiro lateral ────────────────── */
.cli-page > .container-fluid, .pb-page > .container-fluid { padding-left: 0; padding-right: 0; }

/* tabelas das páginas de sistema: cabeçalho alinhado com o conteúdo */
.vesper-painel .theme-table th, .vesper-painel .theme-table td { text-align: left; }
.vesper-painel .theme-table { width: 100%; }

/* ── Simulador: ajustes sobre o CSS copiado (30_simulador.css) ─────────── */
/* rótulos da coluna lateral em caixa normal (o SIAPE usa caixa alta espaçada) */
.cli-side-title, .cli-side-divider, .cli-side-card-title, .cli-rail-label,
.cli-card-divider, .cli-page .cli-bat-grupo-legend, .cli-page .cli-sazo-legend {
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: var(--vesper-t-s) !important; font-weight: 650 !important;
  color: var(--vesper-tinta-2) !important;
  font-variation-settings: "wdth" var(--vesper-estreito);
}
.cli-side-card-title { color: var(--vesper-tinta) !important; font-size: 14px !important; }
.cli-period-arrow, .cli-side-kicker { font-family: var(--vesper-fonte) !important; }

/* DataTable: fonte do app (o padrão do componente é monoespaçada) */
.dash-spreadsheet-container .dash-spreadsheet-inner td,
.dash-spreadsheet-container .dash-spreadsheet-inner th,
.dash-spreadsheet-container .dash-spreadsheet-inner input,
.dash-spreadsheet-container .dash-spreadsheet-inner .dash-cell-value {
  font-family: var(--vesper-fonte) !important;
}

/* chips da seleção (no SIAPE o estilo base morava no style.css) */
.cli-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 2px 6px 2px 0; padding: 3px 6px 3px 12px;
  background: var(--vesper-acento-suave); border: 1px solid var(--vesper-linha-forte);
  border-radius: 999px; color: var(--vesper-tinta); font-size: var(--vesper-t-s); line-height: 1.4;
}
.cli-chip-summary {
  background: var(--vesper-painel); border-color: var(--vesper-linha-forte);
  font-weight: 650; padding-right: 12px;
}
.cli-chip .cli-chip-x {
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--vesper-tinta-2); font-size: 1rem; font-weight: 700; line-height: 1; padding: 0 5px;
}
.cli-chip .cli-chip-x:hover { color: var(--vesper-perigo); background: var(--vesper-perigo-suave); }

/* ── Potencial: ação é tinta (31_potencial.css pintava o Atualizar de verde) ── */
.btn.pb-btn-atualizar, .pb-btn-atualizar {
  background: var(--vesper-tinta) !important; border: 1px solid var(--vesper-tinta) !important;
  color: var(--vesper-painel) !important;
}
.btn.pb-btn-atualizar:hover, .pb-btn-atualizar:hover {
  background: var(--vesper-acao-hover) !important; border-color: var(--vesper-acao-hover) !important;
  filter: none;
}
/* premissa pendente: anel de aviso em volta (a frase abaixo continua dizendo o recado) */
.pb-btn-atualizar.pb-pendente-on { box-shadow: 0 0 0 3px var(--vesper-aviso) !important; }

/* ── gráficos Plotly nos dois temas (mesmo mecanismo do SIAPE) ─────────── */
/* O template "comerc" (config/theme.py) desenha fundo transparente e fonte
   cinza fixa; o texto do SVG passa a seguir a tinta do tema sem re-render.
   O tooltip é tratado por assets/hover_theme.js (Plotly.relayout no toggle). */
.plotly, .plotly text { font-family: var(--vesper-fonte) !important; }
.plotly text { fill: var(--vesper-tinta) !important; }
.js-plotly-plot .bg { fill: transparent !important; }
.js-plotly-plot .hoverlayer .bg { fill: var(--vesper-painel) !important; }
.js-plotly-plot .hoverlayer .hovertext > path,
.js-plotly-plot .hoverlayer .hovertext > rect {
  fill: var(--vesper-painel) !important; fill-opacity: 1 !important; stroke: var(--vesper-linha) !important;
}
.js-plotly-plot .hoverlayer .hovertext text { fill: var(--vesper-tinta) !important; }
.plotly .xaxislayer text, .plotly .yaxislayer text { font-size: 12px; font-weight: 500; }
.plotly .legend { background-color: transparent; }