:root {
  --cor-fundo: #ffffff;
  --cor-caixa: #ffffff;
  --cor-caixa-borda: #d8c58e;
  --cor-card: #fff5d6;
  --cor-card-borda: #d6bf7c;
  --cor-texto: #092312;
  --cor-verde: #006B2D;
  --cor-marrom: #7A3F1D;
  --cor-input-borda: #d8c58e;
  --sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.08);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--cor-fundo);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--cor-texto);
}

/* v24 — Controle de escala do painel.
   A coluna esquerda ocupa 4vw e fixa a ancoragem em (4%; 0%).
   Todo o painel é tratado como um canvas-base de 1440 x 900 px e escalado por transform.
   Assim, o usuário reduz/aumenta o painel como se estivesse redimensionando uma imagem a partir
   do canto superior esquerdo do conteúdo, sem depender do zoom/escala do Windows. */
#painel-shell {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
}

#painel-scale-controls {
  position: fixed;
  left: 0;
  top: 0;
  width: 4vw;
  min-width: 48px;
  height: 100vh;
  z-index: 10000;
  box-sizing: border-box;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #fbfaf3, #f3efe0);
  border-right: 1px solid #d8c58e;
}

.scale-btn {
  width: min(38px, 3.2vw);
  min-width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid #a98d3a;
  background: #fff8df;
  color: #073916;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}

.scale-btn:hover {
  background: #f4df99;
}

.scale-reset {
  font-size: 11px;
}

.scale-label {
  margin-top: 2px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
  font-weight: 900;
  color: #073916;
  letter-spacing: .08em;
}

#painel-viewport {
  position: fixed;
  left: max(4vw, 48px);
  top: 0;
  width: calc(100vw - max(4vw, 48px));
  height: 100vh;
  overflow: auto;
  background: #ffffff;
}

#painel-scale-root {
  position: relative;
  transform-origin: top left;
  width: 1296px;
  height: 810px;
}

#painel-executivo {
  position: relative;
  width: 1440px;
  height: 900px;
  min-width: 1440px;
  min-height: 900px;
  overflow: visible;
  background: #ffffff;
}

/* v23 — Tela adaptável:
   1) o painel passa a ter um canvas mínimo, para telas/zooms menores não comerem conteúdo;
   2) a página ganha rolagem quando necessário;
   3) os blocos deixam de cortar setas/dropdowns por overflow interno. */
#painel-executivo {
  position: relative;
  width: max(100vw, 1440px);
  height: max(100vh, 900px);
  min-width: 1440px;
  min-height: 900px;
  overflow: visible;
  background: #ffffff;
}

.painel-bloco {
  position: absolute;
  box-sizing: border-box;
}

.quadro {
  background: #ffffff;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  box-shadow: var(--sombra-suave);
  padding: clamp(8px, 0.75vw, 14px);
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.quadro-titulo {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: clamp(4px, 0.4vw, 8px);
  font-size: clamp(10px, 0.90vw, 15px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #073916;
  text-transform: uppercase;
}

.quadro-titulo::before {
  content: "▦";
  color: var(--cor-verde);
  font-size: 0.95em;
}

.linha-premissa {
  display: grid;
  grid-template-columns: 1fr clamp(62px, 5.4vw, 92px);
  align-items: center;
  gap: clamp(6px, 0.65vw, 12px);
  margin: clamp(2px, 0.25vw, 5px) 0;
  min-height: clamp(18px, 1.8vw, 25px);
}

.linha-premissa.dupla {
  grid-template-columns: 1fr clamp(136px, 11vw, 168px);
}

.valores-duplos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(5px, 0.4vw, 8px);
}

.rotulo-premissa {
  font-size: clamp(9px, 0.78vw, 13px);
  font-weight: 800;
  line-height: 1.04;
}

.valor-premissa {
  height: clamp(18px, 1.75vw, 25px);
  padding: 0 clamp(4px, 0.35vw, 7px);
  border: 1px solid var(--cor-input-borda);
  border-radius: 4px;
  background: #fffdf4;
  font-size: clamp(9px, 0.75vw, 13px);
  line-height: clamp(18px, 1.75vw, 25px);
  color: #001a08;
  overflow: hidden;
  white-space: nowrap;
}

.texto-destaque {
  margin-top: clamp(8px, 0.6vw, 10px);
  font-size: clamp(10px, 0.95vw, 16px);
  font-weight: 800;
  color: #102718;
}

.kpi-card, .comp-card {
  background: var(--cor-card);
  border: 1px solid var(--cor-card-borda);
  border-radius: 6px;
  box-shadow: var(--sombra-suave);
  overflow: hidden;
}

.kpi-card {
  padding: clamp(5px, 0.42vw, 7px) clamp(7px, 0.52vw, 10px) clamp(5px, 0.38vw, 6px);
  display: grid;
  grid-template-rows: 32% 68%;
  align-items: stretch;
}

.kpi-titulo {
  width: 100%;
  text-align: center;
  font-size: clamp(8px, 0.70vw, 12px);
  line-height: 1.05;
  letter-spacing: 0.08em;
  font-weight: 900;
  text-transform: uppercase;
  color: #0c1a10;
  margin: 0;
  align-self: start;
  padding-top: clamp(1px, 0.10vw, 2px);
}

.kpi-valor {
  align-self: center;
  justify-self: center;
  text-align: center;
  font-size: clamp(17px, 1.48vw, 28px);
  line-height: 1.0;
  font-weight: 900;
  white-space: nowrap;
  transform: translateY(-0.08em);
}

.kpi-verde .kpi-valor { color: var(--cor-verde); }
.kpi-marrom .kpi-valor { color: var(--cor-marrom); }

.comp-card {
  padding: clamp(8px, 0.55vw, 12px) clamp(10px, 0.8vw, 14px);
}

.comp-titulo {
  text-align: center;
  font-size: clamp(10px, 0.85vw, 14px);
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #173220;
  margin-bottom: clamp(6px, 0.55vw, 10px);
  text-transform: uppercase;
}

.comp-row {
  display: grid;
  grid-template-columns: clamp(46px, 4.5vw, 72px) 1fr clamp(74px, 6.2vw, 102px);
  align-items: center;
  gap: clamp(5px, 0.55vw, 10px);
  margin: clamp(3px, 0.35vw, 6px) 0;
  min-height: clamp(13px, 1.25vw, 18px);
}

.comp-label, .comp-value {
  font-size: clamp(9px, 0.72vw, 12px);
  font-weight: 800;
  white-space: nowrap;
}

.comp-green { color: var(--cor-verde); }
.comp-brown { color: var(--cor-marrom); }

.comp-track {
  width: 100%;
  height: clamp(12px, 1.12vw, 18px);
  background: #eee5c8;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}

.comp-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-sizing: border-box;
  color: #ffffff;
  font-size: clamp(7px, 0.56vw, 10px);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
}

.seg-invest { background: #5d8bc6; }
.seg-fin { background: #404a59; }
.seg-bio { background: #16943a; }
.seg-gnv { background: #8f8d2a; }
.seg-diesel { background: #9d6e43; }
.seg-om { background: #eb9228; }
.seg-resid { background: #e66a6a; margin-left: auto; }
.seg-total-bio { background: #2d7331; }
.seg-total-diesel { background: #815126; }

.barra-status {
  background: #f6ebc7;
  border: 1px solid #d6bf7c;
  border-radius: 6px;
  padding: 0 clamp(10px, 0.8vw, 14px);
  font-size: clamp(9px, 0.72vw, 12px);
  line-height: 2.6;
  color: #5d5028;
  overflow: hidden;
  white-space: nowrap;
}

.rodape-texto {
  font-size: clamp(8px, 0.68vw, 11px);
  color: #646464;
  line-height: 1.2;
}


.cabecalho-duplo {
  display: grid;
  grid-template-columns: 1fr clamp(136px, 11vw, 168px);
  align-items: end;
  gap: clamp(6px, 0.65vw, 12px);
  margin: 0 0 clamp(6px, 0.55vw, 9px) 0;
  min-height: clamp(18px, 1.4vw, 24px);
}

.cabecalho-duplo-espaco {
  min-height: 1px;
}

.cabecalho-duplo-valores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(5px, 0.4vw, 8px);
}

.cabecalho-coluna {
  text-align: center;
  font-size: clamp(9px, 0.78vw, 13px);
  font-weight: 900;
  color: #073916;
  line-height: 1.0;
}


.seletor-premissa {
  appearance: auto;
  -webkit-appearance: auto;
  line-height: 1.0;
  cursor: pointer;
}

.linha-pager {
  margin-top: auto;
  min-height: clamp(18px, 1.55vw, 25px);
  flex: 0 0 auto;
}

.pager-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.8vw, 14px);
  width: 100%;
}

.pager-seta {
  width: clamp(26px, 2.2vw, 38px);
  height: clamp(18px, 1.55vw, 25px);
  border-radius: 999px;
  border: 1px solid #b58a18;
  background: linear-gradient(180deg, #f6d266, #d5a821);
  color: #3a2a00;
  font-weight: 900;
  font-size: clamp(10px, 0.95vw, 15px);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.16);
}

.pager-seta.invisivel {
  visibility: hidden;
}


/* v14: dcc.Dropdown substitui html.Select, porque html.Select não aceita prop value no Dash. */
.seletor-premissa.valor-premissa {
  padding: 0 !important;
  line-height: 1 !important;
  overflow: visible !important;
}
.seletor-premissa .Select-control,
.seletor-premissa .Select-placeholder,
.seletor-premissa .Select-value,
.seletor-premissa .Select-input,
.seletor-premissa .Select-value-label {
  min-height: clamp(18px, 1.75vw, 25px) !important;
  height: clamp(18px, 1.75vw, 25px) !important;
  line-height: clamp(18px, 1.75vw, 25px) !important;
}
.seletor-premissa .Select-control {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.seletor-premissa .Select-value-label,
.seletor-premissa .Select-placeholder {
  font-size: clamp(9px, 0.75vw, 13px) !important;
  color: #001a08 !important;
  padding-left: clamp(4px, 0.35vw, 7px) !important;
}
.seletor-premissa .Select-arrow-zone {
  width: 22px !important;
}
.seletor-premissa .Select-menu-outer {
  z-index: 9999 !important;
  font-size: clamp(9px, 0.75vw, 13px) !important;
}

/* v15 — Composição do TCO no formato executivo conceitual */
.comp-card-new {
  padding: clamp(6px, 0.55vw, 10px) clamp(8px, 0.7vw, 12px);
  background: radial-gradient(circle at 50% 15%, #fff9df 0%, #f7efcf 72%, #f3e8c4 100%);
  border: 1px solid #c8ad67;
  border-radius: 10px;
  box-shadow: 0 2px 7px rgba(75, 61, 24, 0.13);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.comp-titulo-new {
  font-size: clamp(12px, 1.15vw, 21px);
  letter-spacing: 0.10em;
  color: #123f1d;
  margin-bottom: clamp(6px, 0.58vw, 11px);
  position: relative;
}

.comp-titulo-new::before,
.comp-titulo-new::after {
  content: "";
  display: inline-block;
  width: clamp(50px, 9vw, 150px);
  height: 1px;
  background: #a58d48;
  vertical-align: middle;
  margin: 0 clamp(8px, 1.1vw, 16px);
  opacity: 0.75;
}

.tco-layout-new {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(142px, 17.5%) minmax(520px, 1fr) minmax(142px, 17.5%);
  gap: clamp(8px, 0.75vw, 14px);
  align-items: stretch;
}

.tco-legend-card {
  background: rgba(255, 253, 241, 0.70);
  border: 1px solid rgba(180, 153, 84, 0.55);
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

.tco-legend-title {
  text-align: center;
  color: #12451f;
  font-weight: 900;
  font-size: clamp(10px, 0.9vw, 16px);
  padding: clamp(4px, 0.45vw, 8px) 4px;
  border-bottom: 1px solid rgba(180,153,84,.35);
}

.tco-legend-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.legend-row {
  display: grid;
  grid-template-columns: clamp(8px, 0.65vw, 12px) minmax(0, 1fr) auto;
  gap: clamp(4px, 0.38vw, 7px);
  align-items: center;
  min-height: clamp(17px, 1.45vw, 27px);
  padding: 0 clamp(5px, 0.45vw, 8px);
  border-bottom: 1px solid rgba(160, 140, 88, 0.22);
}

.legend-row.total {
  font-weight: 900;
  color: #12451f;
}

.legend-row.residual {
  font-weight: 900;
  color: #8f0d0d;
}

.legend-swatch {
  width: clamp(8px, 0.65vw, 12px);
  height: clamp(8px, 0.65vw, 12px);
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
}

.legend-name,
.legend-value {
  font-size: clamp(8px, 0.72vw, 12px);
  line-height: 1.05;
  white-space: nowrap;
}

.legend-name { overflow: hidden; text-overflow: ellipsis; }
.legend-value { font-weight: 900; }
.legend-separator {
  height: 1px;
  margin: clamp(3px, 0.35vw, 6px) clamp(7px, 0.6vw, 10px);
  border-top: 1px dashed rgba(155, 130, 70, 0.50);
}

.tco-chart-area {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 1.04fr 0.88fr 0.88fr 1.04fr;
  gap: clamp(9px, 1.0vw, 18px);
  align-items: end;
  padding: clamp(3px, 0.3vw, 6px) 0 0;
}

.tco-chart-col {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.tco-positive-stack,
.tco-result-stack {
  width: min(100%, clamp(70px, 7.6vw, 130px));
  min-height: 40px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  border-bottom: 1px solid rgba(38, 34, 24, 0.35);
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.10));
}

.tco-result-stack {
  width: min(100%, clamp(74px, 8.1vw, 140px));
}

.tco-stack-seg,
.tco-result-main,
.tco-result-residual {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.22);
  color: #ffffff;
}

.tco-stack-seg:first-child,
.tco-result-main:first-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.tco-result-main {
  border-radius: 7px 7px 4px 4px;
  border: 2px solid rgba(0,0,0,.18);
  box-shadow: inset 0 7px 12px rgba(255,255,255,.10), inset 0 -8px 14px rgba(0,0,0,.18);
}

.tco-result-residual {
  background: #8f0d0d !important;
  border-radius: 4px 4px 0 0;
  border: 1px solid rgba(80, 0, 0, .30);
}

.tco-seg-label,
.tco-result-label,
.tco-residual-label {
  white-space: pre-line;
  line-height: 1.08;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.tco-seg-label { font-size: clamp(7px, 0.62vw, 11px); }
.tco-result-label { font-size: clamp(10px, 0.95vw, 17px); }
.tco-residual-label { font-size: clamp(7px, 0.66vw, 12px); }

.tco-col-caption {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tco-summary-strip {
  flex: 0 0 auto;
  margin-top: clamp(5px, 0.55vw, 10px);
  border: 1px solid rgba(180, 153, 84, .62);
  border-radius: 7px;
  background: rgba(255,253,241,.58);
  display: grid;
  grid-template-columns: 1.08fr 1.12fr .95fr .95fr 1.15fr;
  align-items: stretch;
  overflow: hidden;
}

.tco-summary-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(5px, 0.6vw, 11px);
  align-items: center;
  padding: clamp(4px, 0.5vw, 8px) clamp(6px, 0.7vw, 12px);
  border-right: 1px solid rgba(160, 140, 88, 0.34);
}

.tco-summary-item:last-child { border-right: none; }

.tco-summary-icon {
  width: clamp(22px, 2.2vw, 36px);
  height: clamp(22px, 2.2vw, 36px);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  font-weight: 900;
  font-size: clamp(12px, 1.1vw, 18px);
}

.tco-summary-title {
  font-size: clamp(8px, 0.72vw, 12px);
  line-height: 1.08;
  color: #1b1b1b;
}

.tco-summary-value {
  font-size: clamp(12px, 1.1vw, 20px);
  line-height: 1.0;
  margin-top: 2px;
  font-weight: 900;
}

.summary-green { color: #12451f; }
.summary-brown { color: #693816; }

.seg-invest { background: #4e79a7; }
.seg-fin { background: #263440; }
.seg-bio { background: #0b8f3a; }
.seg-gnv { background: #6f842d; }
.seg-diesel { background: #7a4218; }
.seg-om { background: #ee8c23; }
.seg-resid { background: #8f0d0d; }
.seg-total-bio { background: linear-gradient(180deg, #3f7b3a, #0b4f18); }
.seg-total-diesel { background: linear-gradient(180deg, #8c6234, #5a2f0f); }


/* v17 refinamentos: setas sempre visíveis na linha final e sem texto sob as colunas */
.tco-summary-item .tco-summary-value {
  white-space: nowrap;
}
.linha-pager .rotulo-premissa {
  min-height: 1px;
}


/* v24 — Hero volta ao recorte executivo original; a escala geral controla o encaixe na tela. */
.hero-banner {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
  background: #071b1f;
  z-index: 0;
}


/* v25 — Correção da ancoragem do controle de escala.
   O ponto de ancoragem passa a ser exatamente o canto superior esquerdo
   da área útil do painel, imediatamente após a faixa de controles (4vw).
   O painel não é centralizado e não recebe margem automática. */
:root {
  --largura-controle-escala: max(4vw, 56px);
}

#painel-shell {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

#painel-scale-controls {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--largura-controle-escala) !important;
  height: 100vh !important;
  z-index: 10000 !important;
  box-sizing: border-box !important;
  padding: 8px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  background: #ffffff !important;
  border-right: 1px solid #d8c58e !important;
}

#painel-viewport {
  position: fixed !important;
  left: var(--largura-controle-escala) !important;
  top: 0 !important;
  width: calc(100vw - var(--largura-controle-escala)) !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
}

#painel-scale-root {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform-origin: 0 0 !important;
  width: 1440px !important;
  height: 900px !important;
}

#painel-executivo {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  width: 1440px !important;
  height: 900px !important;
  min-width: 1440px !important;
  min-height: 900px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #ffffff !important;
}

.scale-btn {
  width: 38px !important;
  min-width: 38px !important;
  height: 32px !important;
}

.scale-label {
  writing-mode: horizontal-tb !important;
  transform: none !important;
  margin-top: 4px !important;
  font-size: 12px !important;
}

/* v26 — Ancoragem real no canto superior esquerdo da área útil.
   O painel escalado sai do fluxo normal e fica fixo em left = faixa dos botões.
   Assim, ao reduzir, o canto superior esquerdo permanece parado e somente o canto
   inferior direito se desloca para cima/esquerda, como no redimensionamento do Paint. */
#painel-shell {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

#painel-scale-root {
  position: fixed !important;
  left: var(--largura-controle-escala) !important;
  top: 0 !important;
  width: 1440px !important;
  height: 900px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform-origin: left top !important;
  will-change: transform !important;
  z-index: 1 !important;
}

#painel-viewport {
  display: contents !important;
}

#painel-scale-controls {
  z-index: 10000 !important;
}

/* v27 — Auto-fit real pelo viewport do navegador.
   O JS calcula a escala usando a área entre x=4% e o limite inferior y=99,75%.
   O CSS só fixa a faixa de botões e deixa o painel obedecer ao style calculado. */
:root {
  --largura-controle-escala: 4vw;
}

#painel-shell {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

#painel-scale-controls {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--largura-controle-escala) !important;
  min-width: 0 !important;
  height: 100vh !important;
  z-index: 10000 !important;
  box-sizing: border-box !important;
  padding: 8px 3px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  background: #ffffff !important;
  border-right: 1px solid #d8c58e !important;
}

#painel-scale-root {
  position: fixed !important;
  width: 1440px !important;
  height: 900px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform-origin: left top !important;
  will-change: transform !important;
  z-index: 1 !important;
}

.scale-btn {
  width: clamp(28px, 2.7vw, 38px) !important;
  min-width: 28px !important;
  height: 32px !important;
  border-radius: 9px !important;
}

.scale-reset {
  font-size: clamp(10px, 0.85vw, 12px) !important;
}

.scale-label {
  writing-mode: horizontal-tb !important;
  transform: none !important;
  margin-top: 4px !important;
  font-size: clamp(10px, 0.85vw, 12px) !important;
  font-weight: 900 !important;
}


/* v28 — Auto-fit horizontal + vertical independente.
   O JavaScript agora aplica scaleX e scaleY separadamente:
   x0=4%, xMax=95%, y0=0,25%, yMax=99,75%.
   A coluna lateral continua fixa e o painel fica ancorado no canto superior esquerdo da área útil. */
#painel-scale-root {
  transform-origin: left top !important;
}
.scale-label {
  max-width: 3.8vw !important;
  text-align: center !important;
  line-height: 1.15 !important;
  word-break: normal !important;
}


/* v29 — Auto-fit horizontal sem deformar fontes.
   O JS aumenta a largura lógica do painel e aplica escala uniforme.
   Portanto, não use scaleX/scaleY separado aqui. */
#painel-scale-root {
  transform-origin: left top !important;
}
#painel-executivo {
  overflow: visible !important;
}

/* Textos de premissas: evita 3 linhas e encavalamento. */
.rotulo-premissa {
  font-size: clamp(8px, 0.68vw, 12px) !important;
  line-height: 0.98 !important;
  overflow: visible !important;
}
.linha-premissa {
  min-height: 24px !important;
  margin: 3px 0 !important;
  align-items: center !important;
}
.valor-premissa {
  height: 25px !important;
  line-height: 25px !important;
}

/* Setas/paginadores sempre dentro dos quadros. */
.quadro {
  position: absolute !important;
  overflow: hidden !important;
  padding-bottom: 32px !important;
}
.linha-pager {
  position: absolute !important;
  right: 10px !important;
  bottom: 8px !important;
  min-height: 24px !important;
  height: 24px !important;
  width: auto !important;
  margin: 0 !important;
  display: block !important;
}
.linha-pager .rotulo-premissa {
  display: none !important;
}
.pager-controles {
  width: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
}
.pager-seta {
  width: 31px !important;
  min-width: 31px !important;
  height: 23px !important;
  min-height: 23px !important;
  font-size: 13px !important;
}

/* Ajustes específicos dos cards laterais densos. */
#dados-utilizacao .rotulo-premissa,
#capex .rotulo-premissa,
#valor-residual .rotulo-premissa {
  font-size: clamp(8px, 0.64vw, 11px) !important;
  line-height: 0.95 !important;
}
#valor-residual .cabecalho-duplo {
  margin-top: 2px !important;
  margin-bottom: 6px !important;
}


/* v30 — Expansão horizontal real sem distorcer tipografia.
   A largura lógica do painel aumenta via JS; estes ajustes fazem cards e gráficos
   aproveitarem melhor essa largura extra, mantendo fonte em tamanho normal. */
#painel-executivo {
  overflow: visible !important;
}
.comp-card-new,
.tco-layout-new,
.tco-chart-area,
.tco-legend-card,
.tco-summary-strip {
  min-width: 0 !important;
}

/* Dá mais largura às legendas laterais quando houver espaço horizontal disponível. */
.tco-layout-new {
  grid-template-columns: minmax(175px, 19.5%) minmax(560px, 1fr) minmax(175px, 19.5%) !important;
  gap: clamp(10px, 0.9vw, 18px) !important;
}

/* Os nomes das legendas deixam de ser esmagados pelo ellipsis cedo demais. */
.legend-row {
  grid-template-columns: clamp(8px, 0.65vw, 12px) minmax(54px, 1fr) auto !important;
  gap: clamp(5px, 0.45vw, 9px) !important;
}
.legend-name {
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.legend-value {
  white-space: nowrap !important;
}

/* Com largura adicional, as barras podem respirar um pouco mais sem aumentar fonte. */
.tco-chart-area {
  grid-template-columns: 1.08fr 0.92fr 0.92fr 1.08fr !important;
  gap: clamp(12px, 1.1vw, 22px) !important;
}
.tco-positive-stack {
  width: min(100%, clamp(82px, 8.0vw, 150px)) !important;
}
.tco-result-stack {
  width: min(100%, clamp(86px, 8.5vw, 160px)) !important;
}

/* Exibe a imagem inteira no banner; evita o corte lateral quando a largura varia por navegador. */


/* Mais proteção para setas/dropdowns dentro dos quadros. */
.quadro {
  overflow: visible !important;
}
.linha-pager {
  margin-top: auto !important;
  padding-bottom: 4px !important;
}
.pager-controles {
  justify-self: end !important;
  padding-right: 0 !important;
  transform: none !important;
}

/* v31 — expansão horizontal real sem deformar fontes.
   O layout JSON agora faz os blocos da direita terminarem em 100% do canvas lógico.
   O auto-fit abaixo só aplica escala uniforme; a largura lógica maior dá espaço aos cards.
   As letras continuam no tamanho original relativo, sem scaleX separado. */
#painel-scale-root {
  transform-origin: left top !important;
}
#painel-executivo {
  overflow: visible !important;
}
.tco-legend-card,
.tco-summary-item,
.quadro,
.comp-card-new {
  min-width: 0 !important;
}
.legend-name {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.legend-value {
  white-space: nowrap !important;
}

/* v32 — controles manuais de largura lógica do painel. */
.width-btn {
  font-size: 13px;
  letter-spacing: -0.03em;
}
.width-label {
  color: #4a2a10;
}


/* v33 — expansão geométrica real dos cards, sem deformar letras */
.hero-banner {
  background: #062117;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.20);
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* O card externo do TCO aceita crescer horizontalmente. */
.comp-card-new {
  container-type: inline-size;
}

/* Legendas internas ganham espaço real quando o card externo alarga. */
.tco-layout-new {
  grid-template-columns: minmax(160px, 18%) minmax(0, 1fr) minmax(160px, 18%) !important;
}

/* Barras e cartões internos também expandem; fontes não são escaladas separadamente. */
.tco-positive-stack,
.tco-result-stack {
  width: 88% !important;
  max-width: none !important;
}

.tco-chart-area {
  grid-template-columns: minmax(90px, 1.05fr) minmax(90px, 0.92fr) minmax(90px, 0.92fr) minmax(90px, 1.05fr) !important;
}

/* Em larguras maiores, mostrar mais texto da legenda em vez de reticências agressivas. */
@container (min-width: 980px) {
  .legend-name { text-overflow: clip; }
  .tco-layout-new { grid-template-columns: minmax(190px, 19%) minmax(0, 1fr) minmax(190px, 19%) !important; }
}

/* Garante que setas fiquem dentro dos quadros. */
.quadro { position: absolute; }
.linha-pager { margin-top: auto !important; }
.pager-controles { justify-content: end !important; padding-right: 4px; box-sizing: border-box; }

/* Evita encavalamento em rótulos de formulário quando há pouco espaço vertical. */
.rotulo-premissa { overflow-wrap: anywhere; }

/* v34 — layout executivo com área central para campeão.
   - Legendas laterais 20% menores.
   - Colunas de decomposição 50% menores, apenas com valores R$/km.
   - Colunas TCO com 80% da largura anterior.
   - Espaço central reservado para sinalização de vencedor/empate.
   - Tipografia preservada: nada de scaleX nas fontes. */
.tco-layout-new {
  grid-template-columns: minmax(146px, 15.7%) minmax(0, 1fr) minmax(146px, 15.7%) !important;
  gap: clamp(6px, 0.48vw, 10px) !important;
}

.tco-legend-card {
  max-width: none !important;
}

.tco-chart-area {
  grid-template-columns: minmax(48px, 0.47fr) minmax(82px, 0.88fr) clamp(120px, 12.8vw, 172px) minmax(82px, 0.88fr) minmax(48px, 0.47fr) !important;
  gap: clamp(6px, 0.55vw, 11px) !important;
  align-items: end !important;
}

.tco-positive-stack {
  width: min(100%, clamp(46px, 4.4vw, 82px)) !important;
  max-width: 82px !important;
}

.tco-result-stack {
  width: min(100%, clamp(76px, 7.4vw, 132px)) !important;
  max-width: 132px !important;
}

.tco-seg-label {
  font-size: clamp(7px, 0.52vw, 9px) !important;
  line-height: 1.02 !important;
  padding: 0 2px;
}

.tco-result-label {
  font-size: clamp(10px, 0.86vw, 15px) !important;
}

.tco-residual-label {
  font-size: clamp(7px, 0.58vw, 10px) !important;
}

.tco-winner-card {
  align-self: stretch;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(176, 151, 82, 0.70);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.86), rgba(255,247,212,.82) 52%, rgba(244,226,167,.72));
  box-shadow: inset 0 0 24px rgba(255,255,255,.45), 0 2px 5px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(5px, 0.6vw, 10px);
  color: #0b3f1d;
}

.winner-icon {
  font-size: clamp(18px, 1.8vw, 32px);
  line-height: 1;
  margin-bottom: clamp(2px, 0.3vw, 5px);
}

.winner-title {
  font-size: clamp(14px, 1.45vw, 25px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.winner-subtitle {
  margin-top: clamp(2px, 0.35vw, 6px);
  font-size: clamp(9px, 0.86vw, 15px);
  font-weight: 900;
  color: #4b2a10;
}

.winner-detail {
  margin-top: clamp(4px, 0.55vw, 10px);
  padding: clamp(3px, 0.35vw, 6px) clamp(5px, 0.55vw, 9px);
  border-radius: 6px;
  background: rgba(6, 88, 36, 0.88);
  color: #fff6d4;
  font-size: clamp(7px, 0.62vw, 11px);
  line-height: 1.1;
  font-weight: 800;
}

.winner-diesel .winner-detail {
  background: rgba(109, 57, 20, 0.90);
}

.winner-empate .winner-detail {
  background: rgba(91, 80, 49, 0.90);
}

.winner-empate .winner-title {
  color: #4f3b13;
}

@container (min-width: 980px) {
  .tco-layout-new {
    grid-template-columns: minmax(152px, 15.7%) minmax(0, 1fr) minmax(152px, 15.7%) !important;
  }
}


/* Ajuste v35 — gaps menores, legendas e TCOs mais largos, campeão mantido. */
.tco-layout-new {
  grid-template-columns: minmax(146px, 15.7%) minmax(0, 1fr) minmax(146px, 15.7%) !important;
  gap: clamp(6px, 0.48vw, 10px) !important;
}
.tco-chart-area {
  grid-template-columns: minmax(48px, 0.47fr) minmax(82px, 0.88fr) clamp(120px, 12.8vw, 172px) minmax(82px, 0.88fr) minmax(48px, 0.47fr) !important;
  gap: clamp(6px, 0.55vw, 11px) !important;
}
.tco-positive-stack {
  width: min(100%, clamp(46px, 4.4vw, 82px)) !important;
  max-width: 82px !important;
}
.tco-result-stack {
  width: min(100%, clamp(76px, 7.4vw, 132px)) !important;
  max-width: 132px !important;
}
.tco-winner-card {
  width: clamp(120px, 12.8vw, 172px) !important;
  max-width: 172px !important;
}

/* v36 — correção real dos gaps: aproxima elementos e usa largura dos próprios cards.
   O problema da v35 era que as colunas do grid ficavam largas, mas os gráficos internos
   tinham max-width pequeno e ficavam centralizados, criando vazio visual. Aqui os stacks
   ocupam a coluna inteira; o card central do campeão permanece com a mesma largura. */
.tco-layout-new {
  grid-template-columns: minmax(170px, 17.2%) minmax(0, 1fr) minmax(170px, 17.2%) !important;
  gap: clamp(3px, 0.28vw, 6px) !important;
}

.tco-chart-area {
  grid-template-columns:
    minmax(74px, 0.66fr)
    minmax(118px, 0.98fr)
    clamp(120px, 12.8vw, 172px)
    minmax(118px, 0.98fr)
    minmax(74px, 0.66fr) !important;
  gap: clamp(3px, 0.30vw, 6px) !important;
  justify-items: stretch !important;
}

.tco-chart-col {
  width: 100% !important;
  align-items: stretch !important;
}

.tco-positive-stack,
.tco-result-stack {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: stretch !important;
}

.tco-winner-card {
  width: clamp(120px, 12.8vw, 172px) !important;
  max-width: 172px !important;
  justify-self: center !important;
  align-self: stretch !important;
}

/* Ligeiro ganho de leitura das legendas laterais, usando o espaço recuperado dos gaps. */
.legend-row {
  grid-template-columns: clamp(8px, 0.65vw, 12px) minmax(0, 1fr) auto !important;
  gap: clamp(4px, 0.32vw, 6px) !important;
  padding-left: clamp(5px, 0.38vw, 8px) !important;
  padding-right: clamp(5px, 0.38vw, 8px) !important;
}

.legend-name,
.legend-value {
  font-size: clamp(8px, 0.70vw, 12px) !important;
}

.tco-seg-label {
  font-size: clamp(7px, 0.55vw, 10px) !important;
}

.tco-result-label {
  font-size: clamp(10px, 0.90vw, 16px) !important;
}


/* v38 — novo hero cinematográfico enviado pelo usuário.
   A imagem deve ocupar o banner superior como faixa executiva, sem sobras laterais. */
.hero-banner {
  background: #061b16 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}


/* v39 — ajustes solicitados pelo usuário.
   1) Hero passa a preencher toda a faixa superior útil do painel.
   2) Colunas TCO centrais ficam mais estreitas.
   3) Card central de campeão/empate fica mais largo.
   4) Gaps ao redor do card campeão aumentam para dar respiro visual.
*/
.hero-banner {
  border-radius: 8px !important;
  background: #061b16 !important;
}
.hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Mantém legendas laterais estáveis e entrega mais área para a arena central. */
.tco-layout-new {
  grid-template-columns: minmax(170px, 16.7%) minmax(0, 1fr) minmax(170px, 16.7%) !important;
  gap: clamp(4px, 0.34vw, 7px) !important;
}

/* Ordem: decomposição Bio | TCO Bio | CAMPEÃO | TCO Diesel | decomposição Diesel.
   As colunas TCO foram reduzidas; o centro foi ampliado; os gaps cresceram. */
.tco-chart-area {
  grid-template-columns:
    minmax(72px, 0.62fr)
    minmax(72px, 0.54fr)
    clamp(180px, 18.5vw, 270px)
    minmax(72px, 0.54fr)
    minmax(72px, 0.62fr) !important;
  column-gap: clamp(11px, 0.95vw, 20px) !important;
  row-gap: 0 !important;
  justify-items: stretch !important;
  align-items: end !important;
}

.tco-chart-col {
  width: 100% !important;
  align-items: stretch !important;
}
.tco-positive-stack,
.tco-result-stack {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Redução visual específica das colunas TCO, sem mexer no texto por scaleX. */
.result-col-wrap .tco-result-stack {
  width: 82% !important;
  justify-self: center !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Card central largo e preservado como peça principal do resultado. */
.tco-winner-card {
  width: 100% !important;
  max-width: 270px !important;
  min-width: 180px !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  padding-left: clamp(8px, 0.8vw, 14px) !important;
  padding-right: clamp(8px, 0.8vw, 14px) !important;
}
.winner-title {
  font-size: clamp(16px, 1.65vw, 30px) !important;
}
.winner-subtitle {
  font-size: clamp(10px, 0.96vw, 17px) !important;
}
.winner-detail {
  max-width: 88% !important;
}

/* v40 — ajustes finais solicitados:
   - Hero alinhado à projeção horizontal dos demais cards, sem invadir a área dos botões.
   - Reintrodução dos textos nas colunas de decomposição: 1ª linha categoria, 2ª linha valor.
   - Rótulos centralizados vertical e horizontalmente dentro de cada segmento. */
.tco-seg-label {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.05 !important;
  padding: 0 2px !important;
  white-space: normal !important;
  overflow: hidden !important;
}
.tco-seg-name,
.tco-seg-value {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
.tco-seg-name {
  font-weight: 900 !important;
  font-size: clamp(6px, 0.48vw, 9px) !important;
  line-height: 1.02 !important;
}
.tco-seg-value {
  font-weight: 900 !important;
  font-size: clamp(6px, 0.48vw, 9px) !important;
  line-height: 1.02 !important;
}
/* Mantém a decomposição legível mesmo nas colunas estreitas da v39. */
.tco-positive-stack {
  min-width: 76px !important;
}


/* v42 — abas TCO/Diferenças e treemap factual */
.nav-aba-btn {
  width: min(44px, 3.55vw);
  min-width: 38px;
  min-height: 78px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-radius: 12px;
  border: 1px solid #a98d3a;
  background: #073916;
  color: #fff7d6;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.20);
}
.nav-aba-btn:hover { background: #0B6B2D; }
.nav-aba-diferencas { background: #7A3F1D; }
.nav-aba-diferencas:hover { background: #9A5A2A; }

.diff-card-body {
  height: calc(100% - 92px);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(160px, 15vw, 235px) minmax(0, 1fr);
  gap: clamp(10px, 1vw, 18px);
  align-items: stretch;
  padding: 0 clamp(8px, .8vw, 14px);
  box-sizing: border-box;
}
.diff-side {
  min-width: 0;
  border: 1px solid rgba(176,151,82,.62);
  border-radius: 10px;
  background: rgba(255, 251, 238, .88);
  box-shadow: inset 0 0 14px rgba(255,255,255,.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.diff-side-title {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: clamp(11px, .85vw, 15px);
  letter-spacing: .02em;
  color: #092312;
  background: linear-gradient(180deg, #fff8dd, #ead89f);
  border-bottom: 1px solid rgba(176,151,82,.55);
}
.diff-bio .diff-side-title { color: #064B22; }
.diff-diesel .diff-side-title { color: #6A3416; }
.diff-graph { flex: 1; min-height: 0; }
.diff-graph .js-plotly-plot, .diff-graph .plot-container, .diff-graph .svg-container { height: 100% !important; }
.diff-center {
  border-radius: 12px;
  border: 1px solid rgba(176,151,82,.78);
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.96), rgba(255,247,212,.88) 50%, rgba(235,212,139,.76));
  box-shadow: inset 0 0 24px rgba(255,255,255,.50), 0 2px 6px rgba(0,0,0,.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(8px, .9vw, 16px);
  color: #092312;
}
.diff-center-title {
  font-size: clamp(12px, 1.0vw, 18px);
  font-weight: 900;
  letter-spacing: .08em;
  color: #5a4517;
}
.diff-center-value {
  margin-top: 8px;
  font-size: clamp(19px, 2.0vw, 34px);
  line-height: 1;
  font-weight: 950;
  color: #073916;
}
.diff-center-winner {
  margin-top: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #073916;
  color: #fff7d6;
  font-size: clamp(12px, 1.0vw, 18px);
  font-weight: 900;
}
.diff-center-note {
  margin-top: 10px;
  font-size: clamp(9px, .75vw, 13px);
  line-height: 1.18;
  color: #4b3b15;
  font-weight: 800;
}
.diff-summary-strip { margin-top: clamp(7px, .65vw, 12px) !important; }


/* v43 — remove botões manuais de zoom/largura, mantendo a automação e as abas. */
#painel-scale-up,
#painel-scale-down,
#painel-scale-reset,
#painel-width-up,
#painel-width-down,
#painel-scale-label,
#painel-width-label {
  display: none !important;
}

#painel-scale-controls {
  padding-top: 14px !important;
  gap: 10px !important;
}

/* v43 — a fonte dos rótulos é calibrada via clientside_callback.
   Não aplicar clamp conflitante aqui. */
.rotulo-premissa {
  line-height: 1.02 !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* v44 — tipografia realmente automática nos pontos marcados.
   O JS aplica font-size com prioridade !important. Aqui removemos compressões
   artificiais e damos altura/folga para que os rótulos possam crescer sem
   invadir o campo de valor. */
.linha-premissa:not(.linha-pager) {
  min-height: 30px !important;
  margin: 4px 0 !important;
  align-items: center !important;
}
.rotulo-premissa {
  white-space: normal !important;
  overflow: visible !important;
  line-height: 1.03 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.valor-premissa {
  font-size: 13px !important;
  height: 26px !important;
  line-height: 26px !important;
}

/* Rótulos internos das colunas coloridas do TCO também entram no ajuste automático. */
.tco-seg-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 3px !important;
  line-height: 1.04 !important;
}
.tco-seg-name,
.tco-seg-value {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  line-height: 1.04 !important;
  font-weight: 900 !important;
}


/* v45 — limite de fonte 16px e sem negrito nos rótulos ajustáveis. */
.rotulo-premissa {
  font-weight: 500 !important;
}
.tco-seg-name,
.tco-seg-value {
  font-weight: 500 !important;
}
.tco-seg-label {
  font-weight: 500 !important;
}

/* v46 — hierarquia tipográfica global por automação.
   Apenas títulos dos cards permanecem em negrito; todos os demais textos são calibrados via JS. */
.quadro-titulo,
.comp-titulo,
.comp-titulo-new,
.tco-legend-title {
  font-weight: 800 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.rotulo-premissa,
.valor-premissa,
.seletor-premissa .Select-value-label,
.seletor-premissa .Select-placeholder,
.legend-name,
.legend-value,
.cabecalho-coluna,
.tco-summary-title,
.tco-summary-value,
.winner-title,
.winner-subtitle,
.winner-note,
.kpi-titulo,
.kpi-valor,
.diff-center-title,
.diff-center-value,
.diff-center-winner,
.diff-center-note,
.tco-seg-label,
.tco-seg-name,
.tco-seg-value,
.tco-result-label,
.tco-residual-label {
  font-weight: 400 !important;
  box-sizing: border-box !important;
}

.rotulo-premissa {
  line-height: 1.06 !important;
  white-space: normal !important;
  overflow: visible !important;
  max-width: 100% !important;
}

.valor-premissa,
.seletor-premissa {
  max-width: 100% !important;
  overflow: hidden !important;
}

.legend-row.total,
.legend-row.residual,
.legend-value,
.tco-summary-value,
.kpi-valor,
.diff-center-value,
.diff-center-winner {
  font-weight: 400 !important;
}

.tco-seg-name,
.tco-seg-value,
.tco-result-label,
.tco-residual-label {
  font-weight: 400 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.30) !important;
}

/* Dá margem de segurança para a automação reduzir a fonte antes de algum input sair do quadro. */
.linha-premissa:not(.linha-pager) {
  overflow: visible !important;
}

/* v47 — ajustes solicitados: títulos sem corte, rótulos TCO em duas linhas, resumo inferior reforçado. */
.quadro {
  padding-top: clamp(10px, 0.85vw, 16px) !important;
}
.quadro-titulo {
  flex: 0 0 auto !important;
  min-height: 20px !important;
  line-height: 1.18 !important;
  margin-bottom: clamp(7px, 0.55vw, 11px) !important;
  overflow: visible !important;
}
#financiamento .quadro-titulo {
  margin-bottom: clamp(9px, 0.70vw, 13px) !important;
}
#financiamento .cabecalho-duplo {
  margin-top: 1px !important;
}

.tco-result-label,
.tco-residual-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100% !important;
  height: 100% !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  line-height: 1.06 !important;
}
.tco-result-name,
.tco-result-value {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  line-height: 1.06 !important;
}
.tco-result-name { font-size: clamp(8px, 0.72vw, 13px) !important; }
.tco-result-value { font-size: clamp(9px, 0.80vw, 14px) !important; }

.tco-summary-title {
  font-weight: 800 !important;
  font-size: clamp(10px, 0.90vw, 14px) !important;
  line-height: 1.08 !important;
}
.tco-summary-value {
  font-weight: 900 !important;
  font-size: clamp(14px, 1.25vw, 22px) !important;
  line-height: 1.02 !important;
}
.tco-summary-icon {
  font-size: clamp(14px, 1.25vw, 20px) !important;
}

/* v48 — cenário com biometano a R$ 4,10/Nm³ e slots laterais de vitória.
   A geometria do painel permanece; os espaços de vitória são reservados sempre,
   mas só recebem texto/borda dourada quando o respectivo veículo vence. */
.tco-chart-area {
  grid-template-columns: minmax(0, 1fr) clamp(190px, 19vw, 300px) minmax(0, 1fr) !important;
  column-gap: clamp(11px, 0.95vw, 19px) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}
.tco-side-group {
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  padding: 2px !important;
}
.tco-side-group.side-winner-active {
  border-color: #d7ad36 !important;
  box-shadow: 0 0 0 1px rgba(95, 70, 10, .22), 0 0 14px rgba(215, 173, 54, .38) !important;
  background: rgba(255, 249, 222, .28) !important;
}
.tco-side-win-slot {
  flex: 0 0 clamp(22px, 2.35vw, 36px) !important;
  min-height: clamp(22px, 2.35vw, 36px) !important;
  margin-bottom: clamp(4px, 0.45vw, 8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.side-win-inner {
  max-width: 96% !important;
  padding: 3px 9px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(156, 115, 15, .75) !important;
  background: linear-gradient(180deg, #fff7cf, #d7ad36) !important;
  color: #0a3618 !important;
  font-weight: 800 !important;
  font-size: clamp(9px, 0.72vw, 13px) !important;
  line-height: 1.05 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 1px 3px rgba(0,0,0,.18) !important;
  white-space: normal !important;
}
.tco-side-columns {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  column-gap: clamp(8px, 0.72vw, 15px) !important;
  align-items: end !important;
}
.side-bio .tco-side-columns {
  grid-template-columns: minmax(68px, 0.72fr) minmax(72px, 0.58fr) !important;
}
.side-diesel .tco-side-columns {
  grid-template-columns: minmax(72px, 0.58fr) minmax(68px, 0.72fr) !important;
}
.tco-side-columns .tco-chart-col {
  height: 100% !important;
  min-height: 0 !important;
}
.tco-side-columns .tco-positive-stack,
.tco-side-columns .tco-result-stack {
  width: 100% !important;
  max-width: none !important;
}
.result-col-wrap .tco-result-stack {
  width: 100% !important;
}
/* Força a leitura em duas linhas nos blocos de TCO e nas decomposições: nome em cima, valor embaixo. */
.tco-seg-label,
.tco-result-label,
.tco-residual-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  white-space: normal !important;
  line-height: 1.05 !important;
}
.tco-seg-name,
.tco-result-name,
.tco-residual-label .tco-result-name {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: clamp(8px, 0.63vw, 11px) !important;
  line-height: 1.03 !important;
}
.tco-seg-value,
.tco-result-value,
.tco-residual-label .tco-result-value {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: clamp(9px, 0.72vw, 13px) !important;
  line-height: 1.03 !important;
}
/* Com o slot superior reservado, as legendas e gráficos reduzem altura sem quebrar a proporção do painel. */
.tco-legend-card,
.tco-chart-area {
  max-height: 100% !important;
}

/* v49 — simetria absoluta e moldura de campeão envolvendo legenda + gráficos.
   O cálculo dos valores continua vindo do modelo_tco.py; a camada abaixo altera apenas geometria visual. */
.tco-layout-new.tco-layout-simetrico {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(205px, 19vw, 320px) minmax(0, 1fr) !important;
  column-gap: clamp(9px, 0.8vw, 16px) !important;
  align-items: stretch !important;
  min-height: 0 !important;
}

.tco-layout-simetrico .tco-chart-area,
.tco-layout-simetrico > .tco-legend-card {
  display: none !important;
}

.vehicle-comp-group {
  min-width: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: clamp(24px, 2.45vw, 38px) minmax(0, 1fr) !important;
  box-sizing: border-box !important;
  padding: clamp(3px, 0.25vw, 5px) !important;
  border: 3px solid transparent !important;
  border-radius: 11px !important;
  background: transparent !important;
  position: relative !important;
}

.vehicle-comp-group.vehicle-winner-active {
  border-color: #d7ad36 !important;
  background: linear-gradient(180deg, rgba(255,249,220,.24), rgba(255,249,220,.08)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 245, 185, .70),
    0 0 0 1px rgba(115, 80, 8, .36),
    0 0 18px rgba(215, 173, 54, .42) !important;
}

.vehicle-comp-group.vehicle-winner-active::before,
.vehicle-comp-group.vehicle-winner-active::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: clamp(5px, 0.42vw, 8px);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff3ad, #d7ad36 42%, #8e6413 100%);
  opacity: .92;
  pointer-events: none;
}
.vehicle-comp-group.vehicle-winner-active::before { left: -3px; }
.vehicle-comp-group.vehicle-winner-active::after { right: -3px; }

.vehicle-win-slot {
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  padding: 0 clamp(3px, 0.28vw, 6px) !important;
}

.vehicle-win-inner {
  width: min(96%, 250px) !important;
  padding: clamp(3px, .28vw, 6px) clamp(9px, .72vw, 14px) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(123, 84, 11, .90) !important;
  background: linear-gradient(180deg, #fff6c8, #e1bb4c 58%, #ba8726) !important;
  color: #0a3618 !important;
  font-weight: 800 !important;
  font-size: clamp(9px, 0.74vw, 14px) !important;
  line-height: 1.05 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 1px 3px rgba(0,0,0,.20) !important;
  white-space: normal !important;
  z-index: 1 !important;
}

.vehicle-comp-body {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  column-gap: clamp(6px, 0.55vw, 11px) !important;
  align-items: stretch !important;
}
.vehicle-bio .vehicle-comp-body {
  grid-template-columns: minmax(135px, 42%) minmax(0, 58%) !important;
}
.vehicle-diesel .vehicle-comp-body {
  grid-template-columns: minmax(0, 58%) minmax(135px, 42%) !important;
}

.vehicle-chart-pair {
  min-width: 0 !important;
  height: 100% !important;
  display: grid !important;
  align-items: end !important;
  column-gap: clamp(6px, 0.5vw, 10px) !important;
}
.vehicle-bio .vehicle-chart-pair {
  grid-template-columns: minmax(62px, 0.78fr) minmax(62px, 0.60fr) !important;
}
.vehicle-diesel .vehicle-chart-pair {
  grid-template-columns: minmax(62px, 0.60fr) minmax(62px, 0.78fr) !important;
}

.vehicle-comp-group .tco-legend-card,
.vehicle-chart-pair .tco-chart-col {
  height: 100% !important;
  min-height: 0 !important;
}
.vehicle-chart-pair .tco-positive-stack,
.vehicle-chart-pair .tco-result-stack {
  width: 100% !important;
  max-width: none !important;
}

/* Garante que as colunas voltem a mostrar nome na primeira linha e valor na segunda, sem miniaturizar tudo na mesma linha. */
.tco-seg-label,
.tco-result-label,
.tco-residual-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.05 !important;
  overflow: hidden !important;
  padding: 1px 2px !important;
}
.tco-seg-name,
.tco-seg-value,
.tco-result-name,
.tco-result-value {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  line-height: 1.05 !important;
}
.tco-seg-name { font-size: clamp(7px, .62vw, 11px) !important; }
.tco-seg-value { font-size: clamp(8px, .70vw, 12px) !important; }
.tco-result-name { font-size: clamp(8px, .70vw, 12px) !important; }
.tco-result-value { font-size: clamp(9px, .78vw, 13px) !important; }
.tco-residual-label .tco-result-name { font-size: clamp(7px, .58vw, 10px) !important; }
.tco-residual-label .tco-result-value { font-size: clamp(7px, .58vw, 10px) !important; }

/* Legendas e cards dos lados precisam ter a mesma altura útil dentro da moldura. */
.vehicle-comp-group .tco-legend-card {
  border-radius: 8px !important;
  overflow: hidden !important;
}
.vehicle-comp-group .legend-name,
.vehicle-comp-group .legend-value {
  font-size: clamp(8px, .70vw, 12px) !important;
  font-weight: 400 !important;
}
.vehicle-comp-group .legend-row.total .legend-name,
.vehicle-comp-group .legend-row.total .legend-value,
.vehicle-comp-group .legend-row.residual .legend-name,
.vehicle-comp-group .legend-row.residual .legend-value {
  font-weight: 500 !important;
}

/* v50 — moldura clássica retangular do campeão e card central maior.
   A moldura dourada é uma borda simples, retangular, com brilho mais forte no canto
   superior esquerdo e decaimento até o canto inferior direito. Mantém simetria absoluta. */
.tco-layout-new.tco-layout-simetrico {
  grid-template-columns: minmax(0, 1fr) clamp(245px, 22.5vw, 380px) minmax(0, 1fr) !important;
  column-gap: clamp(8px, 0.68vw, 14px) !important;
  align-items: stretch !important;
}

.vehicle-comp-group {
  border: 4px solid transparent !important;
  border-radius: 3px !important;
  padding: clamp(3px, 0.24vw, 5px) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.vehicle-comp-group.vehicle-winner-active {
  border: 4px solid transparent !important;
  border-image: linear-gradient(135deg,
    #fff9cb 0%,
    #f5d66a 16%,
    #d5a133 40%,
    #a3731f 67%,
    #5c4316 100%) 1 !important;
  border-radius: 3px !important;
  background:
    linear-gradient(135deg, rgba(255,248,205,.20), rgba(255,248,205,.07) 46%, rgba(80,55,12,.03) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 190, .42),
    0 1px 4px rgba(70, 45, 6, .18) !important;
}

.vehicle-comp-group.vehicle-winner-active::before,
.vehicle-comp-group.vehicle-winner-active::after {
  display: none !important;
  content: none !important;
}

.vehicle-win-slot {
  padding: 0 clamp(4px, 0.30vw, 7px) !important;
}

.vehicle-win-inner {
  width: min(97%, 280px) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(103, 73, 14, .92) !important;
  background: linear-gradient(135deg, #fff8c9 0%, #e6bf4f 55%, #b17c22 100%) !important;
  color: #0a3618 !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 1px 2px rgba(0,0,0,.15) !important;
}

.tco-winner-card {
  min-height: 100% !important;
  width: 100% !important;
  padding: clamp(18px, 1.7vw, 28px) clamp(12px, 1.05vw, 20px) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(165, 132, 55, .55) !important;
  box-shadow: inset 0 0 28px rgba(255, 239, 170, .32), 0 1px 5px rgba(74, 52, 10, .12) !important;
}

.winner-icon { font-size: clamp(20px, 2.0vw, 36px) !important; }
.winner-title { font-size: clamp(20px, 2.0vw, 34px) !important; }
.winner-subtitle { font-size: clamp(13px, 1.18vw, 20px) !important; }
.winner-detail { font-size: clamp(10px, .86vw, 15px) !important; }

/* Espelhamento rígido dos lados: legenda e pares de colunas preservam a mesma proporção. */
.vehicle-bio .vehicle-comp-body {
  grid-template-columns: minmax(135px, 42%) minmax(0, 58%) !important;
}
.vehicle-diesel .vehicle-comp-body {
  grid-template-columns: minmax(0, 58%) minmax(135px, 42%) !important;
}
.vehicle-bio .vehicle-chart-pair {
  grid-template-columns: minmax(62px, 0.78fr) minmax(62px, 0.60fr) !important;
}
.vehicle-diesel .vehicle-chart-pair {
  grid-template-columns: minmax(62px, 0.60fr) minmax(62px, 0.78fr) !important;
}

/* v51 — fundo sóbrio com gradiente horizontal no card "Composição do TCO".
   Gradiente aplicado apenas no eixo X; uniforme no eixo Y; demais cards preservados. */
#composicao-tco.comp-card-new,
#composicao-tco {
  background: linear-gradient(
    90deg,
    #4f552b 0%,
    #6f7537 8%,
    #9c9650 20%,
    #c7b96e 34%,
    #efe5ad 50%,
    #c7b96e 66%,
    #9c9650 80%,
    #6f7537 92%,
    #4f552b 100%
  ) !important;
  background-size: 140% 100% !important;
  background-position: center center !important;
}

#composicao-tco .tco-legend-card,
#composicao-tco .tco-winner-card,
#composicao-tco .tco-summary-strip,
#composicao-tco .tco-summary-item {
  background-color: rgba(255, 253, 241, 0.78) !important;
  backdrop-filter: saturate(0.95);
}

#composicao-tco .vehicle-comp-group.vehicle-winner-active {
  background: linear-gradient(135deg, rgba(255,248,205,.24), rgba(255,248,205,.08) 46%, rgba(80,55,12,.04) 100%) !important;
}

/* v52 — Card central equidistante entre as colunas de TCO.
   Mantém a largura atual do card de vitória; apenas encosta as colunas de TCO
   no lado interno de cada veículo para que a distância visual até o card central
   seja espelhada. */
#composicao-tco .vehicle-bio .result-col-wrap {
  align-items: flex-end !important;
}
#composicao-tco .vehicle-diesel .result-col-wrap {
  align-items: flex-start !important;
}
#composicao-tco .vehicle-bio .positive-col-wrap {
  align-items: center !important;
}
#composicao-tco .vehicle-diesel .positive-col-wrap {
  align-items: center !important;
}
#composicao-tco .tco-winner-card {
  justify-self: center !important;
  align-self: stretch !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Reduz respiros internos que geravam assimetria aparente em uma das pontas. */
#composicao-tco .vehicle-comp-body {
  column-gap: clamp(5px, 0.42vw, 9px) !important;
}
#composicao-tco .vehicle-chart-pair {
  column-gap: clamp(5px, 0.42vw, 8px) !important;
}

/* v53 — Diferenças: nomes, cores por combustível, 4 casas e faixa dourada de vantagem. */
#composicao-tco .diff-card-body {
  grid-template-columns: minmax(0, 1fr) clamp(160px, 15vw, 235px) minmax(0, 1fr) !important;
  gap: clamp(10px, 1vw, 18px) !important;
}
#composicao-tco .diff-side {
  display: grid !important;
  grid-template-rows: 28px 22px 44px minmax(0, 1fr) !important;
  min-height: 0 !important;
}
#composicao-tco .diff-side-title {
  height: 28px !important;
  font-weight: 900 !important;
  font-size: clamp(11px, .85vw, 15px) !important;
}
#composicao-tco .diff-side-subtitle {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(8px, .62vw, 11px);
  line-height: 1.05;
  color: #302813;
  background: rgba(255, 251, 238, .78);
  border-bottom: 1px solid rgba(176,151,82,.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#composicao-tco .diff-bio .diff-side-title { color: #064B22 !important; }
#composicao-tco .diff-diesel .diff-side-title { color: #6A3416 !important; }
#composicao-tco .diff-advantage-strip {
  height: 44px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(176,151,82,.40);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.05;
}
#composicao-tco .diff-advantage-empty {
  background: rgba(255, 253, 241, .38);
}
#composicao-tco .diff-advantage-active {
  background: linear-gradient(90deg, #8a6a18 0%, #d8b243 24%, #fff0a8 50%, #d8b243 76%, #8a6a18 100%);
  border-top: 1px solid rgba(255,246,181,.80);
  box-shadow: inset 0 1px 3px rgba(255,255,255,.55), inset 0 -1px 3px rgba(86,61,10,.25);
  color: #153a12;
}
#composicao-tco .diff-advantage-title {
  font-size: clamp(9px, .72vw, 13px);
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96%;
}
#composicao-tco .diff-advantage-value {
  margin-top: 2px;
  font-size: clamp(10px, .82vw, 14px);
  font-weight: 950;
}
#composicao-tco .diff-graph {
  flex: unset !important;
  height: 100% !important;
  min-height: 0 !important;
}
#composicao-tco .diff-center-value {
  font-size: clamp(14px, 1.25vw, 24px) !important;
}

/* v54 — Correção conceitual das diferenças e faixa dourada de vitória no TCO.
   1) No TCO, a faixa "Veículo ... Vence" passa a ocupar o slot inteiro do lado vencedor.
   2) Em Diferenças, a área de cada lado representa a mesma escala R$/km.
      O lado vencedor mostra a vantagem competitiva em faixa dourada no topo;
      suas desvantagens remanescentes ficam embaixo, proporcionais ao mesmo denominador.
*/
#composicao-tco .vehicle-win-slot {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
#composicao-tco .vehicle-win-inner {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  border-radius: 2px !important;
  border: 1px solid rgba(96, 66, 10, .92) !important;
  background: linear-gradient(90deg,
    #8a6a18 0%,
    #d8b243 22%,
    #fff0a8 50%,
    #d8b243 78%,
    #8a6a18 100%) !important;
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,.55),
    inset 0 -1px 3px rgba(86,61,10,.25) !important;
  color: #153a12 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: clamp(10px, .78vw, 14px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#composicao-tco .diff-side {
  display: grid !important;
  grid-template-rows: 28px 22px minmax(0, 1fr) !important;
  min-height: 0 !important;
}
#composicao-tco .diff-map-shell {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
  background: rgba(255,253,241,.44) !important;
}
#composicao-tco .diff-map-shell .diff-advantage-strip {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid rgba(176,151,82,.48) !important;
}
#composicao-tco .diff-map-shell .diff-advantage-empty {
  display: none !important;
}
#composicao-tco .diff-map-shell .diff-advantage-active {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(90deg,
    #8a6a18 0%,
    #d8b243 24%,
    #fff0a8 50%,
    #d8b243 76%,
    #8a6a18 100%) !important;
  color: #153a12 !important;
  box-shadow: inset 0 1px 3px rgba(255,255,255,.55), inset 0 -1px 3px rgba(86,61,10,.25) !important;
  overflow: hidden !important;
}
#composicao-tco .diff-advantage-title {
  font-size: clamp(9px, .72vw, 13px) !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 96% !important;
  line-height: 1.05 !important;
}
#composicao-tco .diff-advantage-value {
  margin-top: 1px !important;
  font-size: clamp(10px, .82vw, 14px) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
}
#composicao-tco .diff-graph-wrap {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#composicao-tco .diff-graph,
#composicao-tco .diff-graph > div,
#composicao-tco .diff-graph .js-plotly-plot,
#composicao-tco .diff-graph .plot-container,
#composicao-tco .diff-graph .svg-container {
  height: 100% !important;
  min-height: 0 !important;
}
#composicao-tco .diff-graph .main-svg {
  height: 100% !important;
}

/* v55 — Diferenças proporcionais corretas + respiro do título de vitória no TCO.
   - Os dois mapas têm retângulo-mãe idêntico.
   - A faixa dourada é parte da área do mapa vencedor, proporcional à vantagem.
   - As desvantagens remanescentes ficam abaixo, com a mesma escala de área dos dois lados.
   - No TCO, a faixa de vitória ganha respiro para não ficar colada à legenda/gráficos. */
#composicao-tco .vehicle-comp-group {
  grid-template-rows: clamp(32px, 3.05vw, 48px) minmax(0, 1fr) !important;
  row-gap: clamp(5px, 0.50vw, 9px) !important;
  padding-top: clamp(5px, 0.45vw, 8px) !important;
}
#composicao-tco .vehicle-win-slot {
  padding: clamp(2px, 0.20vw, 4px) clamp(5px, 0.38vw, 8px) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
#composicao-tco .vehicle-win-inner {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 3px !important;
}

/* Área Diferenças: título/subtítulo mais arejados e mapa totalmente proporcional. */
#composicao-tco .diff-card-body {
  height: calc(100% - 92px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(170px, 15vw, 240px) minmax(0, 1fr) !important;
  gap: clamp(12px, 1.05vw, 20px) !important;
  align-items: stretch !important;
  padding: 0 clamp(8px, .8vw, 14px) !important;
  box-sizing: border-box !important;
}
#composicao-tco .diff-side {
  display: grid !important;
  grid-template-rows: 30px 24px minmax(0, 1fr) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 9px !important;
}
#composicao-tco .diff-side-title {
  height: 30px !important;
  font-size: clamp(12px, .90vw, 16px) !important;
  line-height: 1 !important;
}
#composicao-tco .diff-side-subtitle {
  height: 24px !important;
  font-size: clamp(8px, .64vw, 11px) !important;
  line-height: 1.05 !important;
}
#composicao-tco .diff-map-shell {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  background: rgba(255, 253, 241, .46) !important;
}
#composicao-tco .diff-map-shell .diff-advantage-strip {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(90, 63, 9, .40) !important;
}
#composicao-tco .diff-map-shell .diff-advantage-empty {
  display: none !important;
  height: 0 !important;
}
#composicao-tco .diff-map-shell .diff-advantage-active {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: linear-gradient(90deg,
    #8a6a18 0%,
    #d8b243 24%,
    #fff0a8 50%,
    #d8b243 76%,
    #8a6a18 100%) !important;
  color: #153a12 !important;
  box-shadow: inset 0 1px 3px rgba(255,255,255,.55), inset 0 -1px 3px rgba(86,61,10,.25) !important;
}
#composicao-tco .diff-advantage-title {
  font-size: clamp(8px, .66vw, 12px) !important;
  font-weight: 900 !important;
  max-width: 96% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.05 !important;
}
#composicao-tco .diff-advantage-value {
  margin-top: 1px !important;
  font-size: clamp(9px, .76vw, 13px) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
}
#composicao-tco .diff-graph-wrap {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background: transparent !important;
}
#composicao-tco .diff-html-treemap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: transparent !important;
}
#composicao-tco .diff-html-rect {
  position: absolute !important;
  box-sizing: border-box !important;
  border: 2px solid !important;
  overflow: hidden !important;
  padding: clamp(3px, .28vw, 6px) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}
#composicao-tco .diff-html-label {
  font-weight: 900 !important;
  font-size: clamp(8px, .70vw, 13px) !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  overflow: hidden !important;
}
#composicao-tco .diff-html-value {
  margin-top: 2px !important;
  font-weight: 900 !important;
  font-size: clamp(8px, .68vw, 12px) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#composicao-tco .diff-html-empty {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5c5130 !important;
  font-size: clamp(10px, .78vw, 13px) !important;
}

/* v56 — Respiro entre composição e resumo + alinhamento do título de vitória.
   1) O card central passa a usar uma grade de 3 linhas: título, conteúdo e resumo.
      Isso impede que o resumo das 4 variáveis encavale com legenda/gráficos nas duas abas.
   2) A faixa "Veículo ... Vence" passa a ter exatamente a mesma projeção horizontal
      do bloco interno (legenda + colunas), sem ficar mais estreita/desalinhada.
*/
#composicao-tco.comp-card-new,
#composicao-tco {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  row-gap: clamp(8px, 0.72vw, 14px) !important;
  padding-top: clamp(8px, 0.70vw, 12px) !important;
  padding-bottom: clamp(9px, 0.80vw, 14px) !important;
  overflow: hidden !important;
}

#composicao-tco .comp-titulo-new,
#composicao-tco .comp-titulo {
  margin: 0 !important;
  align-self: start !important;
  line-height: 1.10 !important;
}

#composicao-tco .tco-layout-new,
#composicao-tco .diff-card-body {
  min-height: 0 !important;
  height: auto !important;
  align-self: stretch !important;
  overflow: hidden !important;
  margin: 0 !important;
}

#composicao-tco .tco-summary-strip,
#composicao-tco .diff-summary-strip {
  margin-top: clamp(2px, 0.22vw, 5px) !important;
  align-self: end !important;
  min-height: clamp(52px, 5.6vh, 72px) !important;
  max-height: clamp(58px, 6.2vh, 80px) !important;
  overflow: hidden !important;
}

/* TCO: reduz levemente a área útil dos gráficos para criar respiro real antes do resumo. */
#composicao-tco .tco-layout-new.tco-layout-simetrico {
  align-items: stretch !important;
  padding-bottom: clamp(2px, 0.30vw, 6px) !important;
}

/* Título de campeão: projeção horizontal igual à área interna do lado vencedor. */
#composicao-tco .vehicle-comp-group {
  grid-template-rows: clamp(34px, 3.20vw, 50px) minmax(0, 1fr) !important;
  row-gap: clamp(7px, 0.65vw, 12px) !important;
  padding: clamp(4px, 0.34vw, 7px) !important;
}

#composicao-tco .vehicle-win-slot {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#composicao-tco .vehicle-win-inner {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 3px !important;
}

#composicao-tco .vehicle-comp-body {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Diferenças: mantém a área proporcional, mas separa mapa e resumo inferior. */
#composicao-tco .diff-card-body {
  padding-bottom: clamp(2px, 0.30vw, 6px) !important;
}


/* v57 — correção sem corte: composição e resumo com respiro real.
   - Nada é simplesmente escondido para caber.
   - A área de conteúdo do TCO encolhe de forma controlada.
   - O resumo inferior fica abaixo, centralizado, sem encavalar.
   - A moldura dourada não é cortada.
   - Rótulos internos dos gráficos ficam menores e proporcionais às legendas. */
#composicao-tco.comp-card-new,
#composicao-tco {
  display: grid !important;
  grid-template-rows: 26px minmax(0, 1fr) 62px !important;
  row-gap: 8px !important;
  padding: 8px 10px 10px 10px !important;
  overflow: hidden !important;
}

#composicao-tco .comp-titulo-new,
#composicao-tco .comp-titulo {
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
  line-height: 1.05 !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#composicao-tco .tco-layout-new.tco-layout-simetrico,
#composicao-tco .diff-card-body {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

#composicao-tco .tco-summary-strip,
#composicao-tco .diff-summary-strip {
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  margin: 0 !important;
  align-self: end !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#composicao-tco .tco-summary-item {
  height: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  padding: 6px 10px !important;
  overflow: hidden !important;
}

#composicao-tco .tco-summary-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  font-size: 15px !important;
  align-self: center !important;
  justify-self: center !important;
}

#composicao-tco .tco-summary-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#composicao-tco .tco-summary-title {
  font-size: 13px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  max-height: 28px !important;
  overflow: hidden !important;
}

#composicao-tco .tco-summary-value {
  font-size: 17px !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* A moldura clássica fica inteira dentro da linha de conteúdo. */
#composicao-tco .vehicle-comp-group {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-rows: 34px minmax(0, 1fr) !important;
  row-gap: 6px !important;
  padding: 5px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#composicao-tco .vehicle-comp-group.vehicle-winner-active {
  border-width: 4px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,246,190,.42),
    0 1px 4px rgba(70,45,6,.18) !important;
}

#composicao-tco .vehicle-win-slot {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#composicao-tco .vehicle-win-inner {
  height: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
}

#composicao-tco .vehicle-comp-body {
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  align-items: stretch !important;
}

#composicao-tco .vehicle-comp-group .tco-legend-card,
#composicao-tco .vehicle-chart-pair .tco-chart-col {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Compacta levemente as legendas para não forçar corte vertical. */
#composicao-tco .tco-legend-title {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

#composicao-tco .legend-row {
  min-height: 20px !important;
  height: auto !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

#composicao-tco .legend-separator {
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}

#composicao-tco .legend-name,
#composicao-tco .legend-value {
  font-size: 11px !important;
  line-height: 1.05 !important;
}

/* Textos dos gráficos de decomposição/TCO menores e consistentes. */
#composicao-tco .tco-seg-name,
#composicao-tco .tco-seg-value,
#composicao-tco .tco-result-name,
#composicao-tco .tco-result-value,
#composicao-tco .tco-residual-label .tco-result-name,
#composicao-tco .tco-residual-label .tco-result-value {
  font-weight: 500 !important;
  line-height: 1.04 !important;
}

#composicao-tco .tco-seg-name { font-size: 9px !important; }
#composicao-tco .tco-seg-value { font-size: 10px !important; }
#composicao-tco .tco-result-name { font-size: 10px !important; }
#composicao-tco .tco-result-value { font-size: 11px !important; }
#composicao-tco .tco-residual-label .tco-result-name,
#composicao-tco .tco-residual-label .tco-result-value { font-size: 8px !important; }

#composicao-tco .tco-seg-label,
#composicao-tco .tco-result-label,
#composicao-tco .tco-residual-label {
  padding: 1px 2px !important;
  overflow: hidden !important;
}

/* Evita que barras/gráficos atravessem a faixa de resumo. */
#composicao-tco .tco-positive-stack,
#composicao-tco .tco-result-stack {
  max-height: 100% !important;
  overflow: hidden !important;
}


/* ==========================================================
   v60 — tipografia estável por teto/piso, sem pulsação
   - Rótulos de parâmetros: teto 12px, piso 10px
   - Inputs/valores de parâmetros: mesmo teto/piso para evitar desalinhamento
   - Títulos dos cards: teto 18px, piso 14px
   - Legendas do TCO: textos e números no mesmo intervalo estável
   ========================================================== */
.quadro-titulo,
.comp-titulo,
.comp-titulo-new,
.tco-legend-title {
  font-size: clamp(14px, 0.95vw, 18px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  overflow: visible !important;
}

.rotulo-premissa,
.linha-premissa .rotulo-premissa,
.quadro .rotulo-premissa {
  font-size: clamp(10px, 0.66vw, 12px) !important;
  font-weight: 400 !important;
  line-height: 1.10 !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.valor-premissa,
.valor-premissa input,
.valores-duplos input,
.seletor-premissa,
.Select-value-label,
.Select-placeholder,
.quadro input {
  font-size: clamp(10px, 0.66vw, 12px) !important;
  font-weight: 400 !important;
  line-height: 1.10 !important;
}

.tco-legend-card .legend-name,
.tco-legend-card .legend-value,
.tco-legend-card .legend-row {
  font-size: clamp(10px, 0.66vw, 12px) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
}

.tco-legend-card .legend-value {
  text-align: right !important;
}

/* Mantém o resumo inferior legível e estável. */
.tco-summary-title {
  font-size: clamp(12px, 0.90vw, 16px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
}
.tco-summary-value {
  font-size: clamp(12px, 0.95vw, 17px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

/* Evita microvariações visuais causadas por transições durante auto-fit. */
.rotulo-premissa,
.valor-premissa,
.valor-premissa input,
.valores-duplos input,
.tco-legend-card .legend-name,
.tco-legend-card .legend-value,
.quadro-titulo,
.tco-summary-title,
.tco-summary-value {
  transition: none !important;
  animation: none !important;
}

/* v61 — Parâmetros vivos e conta de chegada */
.input-premissa {
  box-sizing: border-box !important;
  width: 100% !important;
  text-align: left !important;
  outline: none !important;
}
.input-premissa:focus {
  border-color: #9b7a1e !important;
  box-shadow: 0 0 0 2px rgba(184, 150, 45, .18) !important;
}
.solve-btn {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin-right: 4px !important;
  border-radius: 999px !important;
  border: 1px solid #b89d45 !important;
  background: linear-gradient(180deg, #fff8d9, #d8bd54) !important;
  color: #073916 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.12) !important;
}
.solve-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.rotulo-premissa .rotulo-texto {
  vertical-align: middle !important;
}
.valores-duplos .input-premissa {
  text-align: left !important;
}

/* v62 — seletor da aba Diferenças e tela Distinção em Prazos */
.diff-topbar {
  position: relative !important;
  flex: 0 0 auto !important;
  min-height: clamp(26px, 2.3vw, 38px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: clamp(5px, 0.55vw, 10px) !important;
}
.diff-topbar .diff-main-title {
  margin: 0 !important;
  width: 100% !important;
}
.diff-mode-selector-wrap {
  position: absolute !important;
  right: clamp(8px, 0.7vw, 14px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: clamp(165px, 13.5vw, 230px) !important;
  z-index: 5 !important;
}
.diff-mode-selector .Select-control,
.diff-mode-selector .Select-placeholder,
.diff-mode-selector .Select-value,
.diff-mode-selector .Select-input,
.diff-mode-selector .Select-value-label {
  min-height: 25px !important;
  height: 25px !important;
  line-height: 25px !important;
}
.diff-mode-selector .Select-control {
  border: 1px solid rgba(128, 105, 40, .65) !important;
  border-radius: 6px !important;
  background: rgba(255, 248, 218, .92) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
}
.diff-mode-selector .Select-value-label,
.diff-mode-selector .Select-placeholder {
  color: #173220 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-align: center !important;
}
.diff-mode-selector .Select-menu-outer {
  z-index: 20000 !important;
  font-size: 11px !important;
}
.prazos-card-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: clamp(5px, .45vw, 8px) !important;
  padding: 0 clamp(10px, .8vw, 14px) !important;
}
.prazos-note {
  text-align: center !important;
  font-size: clamp(9px, .72vw, 12px) !important;
  line-height: 1.15 !important;
  color: #3c3318 !important;
  background: rgba(255,253,241,.42) !important;
  border: 1px solid rgba(160,140,88,.24) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
}
.prazos-graph {
  height: 100% !important;
  min-height: 0 !important;
}
.prazos-graph .js-plotly-plot,
.prazos-graph .plot-container,
.prazos-graph .svg-container {
  height: 100% !important;
}

/* ==========================================================
   v63 — Tela Diferenças > Decomposição
   Treemaps de composição total do TCO, com macro-rubricas
   e subitens em R$/km, preservando as cores da Composição.
   ========================================================== */
#composicao-tco .decomp-card-body {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(125px, 10vw, 180px) minmax(0, 1fr) !important;
  gap: clamp(10px, 0.9vw, 16px) !important;
  align-items: stretch !important;
  padding: 0 clamp(8px, .7vw, 14px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#composicao-tco .decomp-side {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 27px 20px minmax(0, 1fr) !important;
  border: 1px solid rgba(176,151,82,.68) !important;
  border-radius: 10px !important;
  background: rgba(255, 251, 238, .88) !important;
  box-shadow: inset 0 0 14px rgba(255,255,255,.42) !important;
  overflow: hidden !important;
}

#composicao-tco .decomp-title {
  height: 27px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(12px, .88vw, 16px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  background: linear-gradient(180deg, #fff8dd, #ead89f) !important;
  border-bottom: 1px solid rgba(176,151,82,.55) !important;
}

#composicao-tco .decomp-side-bio .decomp-title { color: #064B22 !important; }
#composicao-tco .decomp-side-diesel .decomp-title { color: #6A3416 !important; }

#composicao-tco .decomp-subtitle {
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(8px, .62vw, 11px) !important;
  line-height: 1 !important;
  color: #302813 !important;
  background: rgba(255,253,241,.74) !important;
  border-bottom: 1px solid rgba(176,151,82,.28) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#composicao-tco .decomp-map {
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(255,253,241,.26) !important;
  overflow: hidden !important;
}

#composicao-tco .decomp-band {
  min-height: 0 !important;
  box-sizing: border-box !important;
  border-bottom: 2px solid rgba(255,255,255,.65) !important;
  display: grid !important;
  grid-template-rows: minmax(14px, 18px) minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#composicao-tco .decomp-band-head {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 1px 5px !important;
  box-sizing: border-box !important;
  background: rgba(255,255,255,.78) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  overflow: hidden !important;
}

#composicao-tco .decomp-band-title {
  font-size: clamp(8px, .65vw, 12px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #173220 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#composicao-tco .decomp-band-total {
  font-size: clamp(8px, .62vw, 11px) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: #3b3116 !important;
  white-space: nowrap !important;
}

#composicao-tco .decomp-band-body {
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
}

#composicao-tco .decomp-subrect {
  min-width: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
  border-right: 2px solid rgba(255,255,255,.62) !important;
  color: white !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.38) !important;
  padding: clamp(2px, .23vw, 5px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

#composicao-tco .decomp-sub-label {
  font-size: clamp(7px, .61vw, 11px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: hidden !important;
}

#composicao-tco .decomp-sub-value {
  margin-top: 1px !important;
  font-size: clamp(7px, .58vw, 10px) !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#composicao-tco .decomp-center {
  border-radius: 12px !important;
  border: 1px solid rgba(176,151,82,.78) !important;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.96), rgba(255,247,212,.88) 50%, rgba(235,212,139,.76)) !important;
  box-shadow: inset 0 0 24px rgba(255,255,255,.50), 0 2px 6px rgba(0,0,0,.14) !important;
  color: #092312 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: clamp(7px, .75vw, 13px) !important;
  overflow: hidden !important;
}

#composicao-tco .decomp-center-title {
  font-size: clamp(11px, .86vw, 15px) !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  color: #5a4517 !important;
  margin-bottom: 8px !important;
}

#composicao-tco .decomp-center-note {
  font-size: clamp(8px, .65vw, 11px) !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  color: #3c3318 !important;
  margin: 4px 0 !important;
}

#composicao-tco .decomp-center-note.small {
  font-size: clamp(7px, .58vw, 10px) !important;
  color: #5c5130 !important;
}

#composicao-tco .decomp-empty {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5c5130 !important;
  font-size: 12px !important;
}

/* ==========================================================
   v64 — Alternância R$/km x R$ totais + Decomposição limpa
   ========================================================== */
.nav-unidade-btn {
  background: #1f3b1f !important;
  color: #fff7d6 !important;
  font-size: 11px !important;
  letter-spacing: .01em !important;
}
.nav-unidade-btn:hover { background: #355f30 !important; }

/* Decomposição: título + legenda repetida + maptree sem textos de subtotais. */
#composicao-tco .decomp-side {
  grid-template-rows: 27px minmax(54px, auto) minmax(0, 1fr) !important;
}

#composicao-tco .decomp-legend {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2px 6px !important;
  padding: 4px 7px !important;
  background: rgba(255,253,241,.78) !important;
  border-bottom: 1px solid rgba(176,151,82,.34) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#composicao-tco .decomp-legend-row {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 9px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 3px !important;
  overflow: hidden !important;
}

#composicao-tco .decomp-legend-swatch {
  width: 8px !important;
  height: 8px !important;
  border-radius: 1px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
}

#composicao-tco .decomp-legend-name {
  min-width: 0 !important;
  font-size: clamp(6px, .52vw, 9px) !important;
  line-height: 1.0 !important;
  font-weight: 700 !important;
  color: #173220 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#composicao-tco .decomp-legend-value {
  font-size: clamp(6px, .50vw, 8.5px) !important;
  line-height: 1.0 !important;
  font-weight: 700 !important;
  color: #2a2512 !important;
  white-space: nowrap !important;
}

#composicao-tco .decomp-band {
  grid-template-rows: minmax(0, 1fr) !important;
}

#composicao-tco .decomp-band-head,
#composicao-tco .decomp-band-title,
#composicao-tco .decomp-band-total,
#composicao-tco .decomp-sub-label,
#composicao-tco .decomp-sub-value {
  display: none !important;
}

#composicao-tco .decomp-subrect {
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
}

/* ==========================================================
   v65 — Rótulos internos condicionais no treemap + botão preto
   ========================================================== */
.nav-unidade-btn {
  background: #050505 !important;
  color: #ffffff !important;
  border-color: #1a1a1a !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.28) !important;
}
.nav-unidade-btn:hover {
  background: #222222 !important;
  color: #fff7d6 !important;
}

/* Reabilita os textos internos dos retângulos da Decomposição; a decisão de
   mostrar rubrica+valor, só rubrica, ou nada é feita no Python por área útil. */
#composicao-tco .decomp-subrect .decomp-sub-label,
#composicao-tco .decomp-subrect .decomp-sub-value {
  display: block !important;
}

#composicao-tco .decomp-subrect {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  padding: clamp(2px, .22vw, 5px) !important;
}

#composicao-tco .decomp-sub-label {
  font-size: clamp(6.5px, .55vw, 10px) !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
  max-height: 2.08em !important;
  overflow: hidden !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#composicao-tco .decomp-sub-value {
  margin-top: 2px !important;
  font-size: clamp(6.2px, .50vw, 9px) !important;
  line-height: 1.0 !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#composicao-tco .decomp-sub-label-only {
  max-height: 2.08em !important;
}

#composicao-tco .decomp-subrect-vazio {
  padding: 0 !important;
}

/* v68 — Aba Paridade */
.nav-aba-paridade {
  background: #0B0B0B !important;
  color: #F7E7A4 !important;
}
.nav-aba-paridade:hover { background: #2B2B2B !important; }

.linha-premissa.param-em-analise .rotulo-texto,
.linha-premissa.param-em-analise .rotulo-premissa {
  font-weight: 900 !important;
  color: #061F0D !important;
}
.linha-premissa.param-em-analise {
  background: rgba(212, 175, 55, 0.10) !important;
  border-radius: 5px !important;
}

#composicao-tco .paridade-topbar {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: clamp(10px, 1vw, 20px) !important;
  align-items: center !important;
  padding: clamp(4px, .5vw, 8px) clamp(12px, 1.2vw, 22px) clamp(4px, .5vw, 8px) !important;
}
#composicao-tco .paridade-card-body {
  height: calc(100% - 92px) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: clamp(170px, 18vw, 260px) 1fr !important;
  gap: clamp(12px, 1.2vw, 22px) !important;
  align-items: stretch !important;
  padding: 0 clamp(12px, 1.1vw, 22px) clamp(7px, .8vw, 12px) !important;
  box-sizing: border-box !important;
}
#composicao-tco .paridade-info {
  background: radial-gradient(circle at 50% 18%, #fffef4 0%, #f4e9b6 62%, #e5d184 100%) !important;
  border: 1px solid rgba(125, 96, 34, 0.42) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.12) !important;
  padding: clamp(12px, 1vw, 18px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 0 !important;
}
#composicao-tco .paridade-info-title {
  font-size: clamp(10px, .85vw, 13px) !important;
  letter-spacing: .11em !important;
  color: #6D4C13 !important;
  font-weight: 900 !important;
  margin-bottom: 8px !important;
}
#composicao-tco .paridade-param-name {
  font-size: clamp(15px, 1.35vw, 22px) !important;
  line-height: 1.08 !important;
  color: #063B17 !important;
  font-weight: 900 !important;
  margin-bottom: 10px !important;
}
#composicao-tco .paridade-note {
  font-size: clamp(10px, .8vw, 13px) !important;
  line-height: 1.18 !important;
  color: #3D351C !important;
  margin-top: 5px !important;
}
#composicao-tco .paridade-note.small {
  font-size: clamp(9px, .72vw, 11px) !important;
  color: #5F5637 !important;
}
#composicao-tco .paridade-graph-wrap {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  gap: clamp(5px, .55vw, 10px) !important;
  background: rgba(255, 253, 241, 0.38) !important;
  border: 1px solid rgba(145, 124, 60, 0.32) !important;
  border-radius: 10px !important;
  padding: clamp(5px, .55vw, 10px) !important;
  box-sizing: border-box !important;
}
#composicao-tco .paridade-graph,
#composicao-tco .paridade-graph .js-plotly-plot,
#composicao-tco .paridade-graph .plot-container,
#composicao-tco .paridade-graph .svg-container {
  height: 100% !important;
  min-height: 0 !important;
}
#composicao-tco .paridade-range-row {
  display: grid !important;
  grid-template-columns: auto minmax(70px, 95px) auto minmax(70px, 95px) !important;
  gap: 7px !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 2px 0 0 !important;
}
#composicao-tco .paridade-range-label {
  font-size: clamp(9px, .72vw, 11px) !important;
  color: #22351F !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
#composicao-tco .paridade-range-input {
  height: 24px !important;
  border: 1px solid rgba(128, 105, 40, .55) !important;
  border-radius: 5px !important;
  background: #fffaf0 !important;
  font-size: 11px !important;
  text-align: center !important;
}

/* v73 — Paridade: gráfico ocupando a área analítica central inteira.
   A tela de paridade deixa de ter card lateral grande; o parâmetro selecionado
   vira uma faixa compacta acima do gráfico, liberando a maior parte do painel
   para a curva TCO Bio/GNV x variável. */
#composicao-tco .paridade-card-body.paridade-card-body-full {
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  align-items: stretch !important;
  padding: 0 clamp(16px, 1.25vw, 26px) clamp(6px, .55vw, 10px) !important;
  box-sizing: border-box !important;
}

#composicao-tco .paridade-graph-wrap.paridade-graph-wrap-full {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(4px, .40vw, 7px) !important;
  background: rgba(255, 253, 241, 0.40) !important;
  border: 1px solid rgba(145, 124, 60, 0.32) !important;
  border-radius: 10px !important;
  padding: clamp(6px, .55vw, 10px) clamp(8px, .75vw, 14px) clamp(5px, .50vw, 9px) !important;
  box-sizing: border-box !important;
}

#composicao-tco .paridade-inline-header {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  gap: clamp(7px, .70vw, 14px) !important;
  align-items: center !important;
  justify-content: start !important;
  min-height: 24px !important;
  padding: 1px 4px 0 !important;
  overflow: hidden !important;
}

#composicao-tco .paridade-info-title-inline {
  margin: 0 !important;
  font-size: clamp(9px, .70vw, 12px) !important;
  white-space: nowrap !important;
}

#composicao-tco .paridade-param-name-inline {
  margin: 0 !important;
  font-size: clamp(12px, .95vw, 16px) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

#composicao-tco .paridade-note-inline {
  margin: 0 !important;
  font-size: clamp(9px, .65vw, 11px) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#composicao-tco .paridade-graph-full,
#composicao-tco .paridade-graph-full .js-plotly-plot,
#composicao-tco .paridade-graph-full .plot-container,
#composicao-tco .paridade-graph-full .svg-container {
  height: 100% !important;
  min-height: 0 !important;
  width: 100% !important;
}

#composicao-tco .paridade-range-row {
  min-height: 28px !important;
  padding: 1px 0 0 !important;
}

/* v74 — Paridade: título alinhado como os demais modos e sem texto explicativo truncado. */
#composicao-tco .paridade-topbar {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: clamp(10px, 1vw, 18px) !important;
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 clamp(12px, 1vw, 20px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#composicao-tco .paridade-topbar .diff-main-title {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  letter-spacing: .18em !important;
  font-size: clamp(15px, 1.35vw, 22px) !important;
}

#composicao-tco .paridade-card-body.paridade-card-body-full {
  padding-top: clamp(2px, .25vw, 5px) !important;
}

#composicao-tco .paridade-inline-header {
  grid-template-columns: auto auto !important;
  justify-content: center !important;
  gap: clamp(9px, .8vw, 15px) !important;
  min-height: 20px !important;
  padding: 0 !important;
}

#composicao-tco .paridade-info-title-inline {
  font-size: clamp(9px, .64vw, 11px) !important;
  letter-spacing: .14em !important;
  opacity: .86 !important;
}

#composicao-tco .paridade-param-name-inline {
  font-size: clamp(11px, .85vw, 15px) !important;
  letter-spacing: .03em !important;
}

#composicao-tco .paridade-note-inline {
  display: none !important;
}

/* v74 — botão inferior para exportar a área de análise. */
.save-png-btn {
  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) rotate(180deg) !important;
  width: min(42px, 3.4vw) !important;
  min-width: 36px !important;
  min-height: 76px !important;
  writing-mode: vertical-rl !important;
  border-radius: 12px !important;
  border: 1px solid #111111 !important;
  background: #111111 !important;
  color: #fff7d6 !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  cursor: pointer !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.30) !important;
  z-index: 10020 !important;
}
.save-png-btn:hover {
  background: #2b2b2b !important;
}

/* v82 — Paridade: legenda como subtítulo externo ao gráfico e rótulos mais próximos. */
#composicao-tco .paridade-graph-wrap.paridade-graph-wrap-full {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

#composicao-tco .paridade-legenda-subtitulo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 1.2vw, 24px) !important;
  min-height: 18px !important;
  margin-top: -2px !important;
  margin-bottom: 0 !important;
  color: #173220 !important;
  font-size: clamp(9px, .72vw, 11px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

#composicao-tco .paridade-legenda-subtitulo .legenda-linha {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#composicao-tco .paridade-legenda-subtitulo .swatch-line {
  display: inline-block !important;
  width: 30px !important;
  height: 0 !important;
  border-top: 3px solid #087C2A !important;
}

#composicao-tco .paridade-legenda-subtitulo .swatch-bio {
  border-top-color: #087C2A !important;
}

#composicao-tco .paridade-legenda-subtitulo .swatch-diesel {
  border-top: 2px dashed #7A421E !important;
}

#composicao-tco .paridade-legenda-subtitulo .swatch-dot {
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

#composicao-tco .paridade-legenda-subtitulo .swatch-paridade {
  background: #D4AF37 !important;
  border: 1.5px solid #422A00 !important;
}

#composicao-tco .paridade-legenda-subtitulo .swatch-atual {
  background: #FFFFFF !important;
  border: 1.5px solid #0B3D16 !important;
}

/* v83 — Paridade: eixo X em linha inferior e mais altura útil para o gráfico. */
#composicao-tco .paridade-graph-wrap.paridade-graph-wrap-full {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: clamp(3px, .32vw, 6px) !important;
}

#composicao-tco .paridade-graph-full,
#composicao-tco .paridade-graph-full .js-plotly-plot,
#composicao-tco .paridade-graph-full .plot-container,
#composicao-tco .paridade-graph-full .svg-container {
  height: 100% !important;
  min-height: 0 !important;
  width: 100% !important;
}

#composicao-tco .paridade-range-row {
  display: grid !important;
  grid-template-columns: auto minmax(70px, 95px) minmax(220px, 1fr) auto minmax(70px, 95px) !important;
  gap: clamp(6px, .55vw, 11px) !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 0 !important;
  width: min(760px, 80%) !important;
  margin: 0 auto !important;
}

#composicao-tco .paridade-bottom-x-title {
  text-align: center !important;
  font-size: clamp(10px, .78vw, 12px) !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #173220 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 clamp(8px, .6vw, 14px) !important;
}

#composicao-tco .paridade-range-label {
  font-size: clamp(9px, .70vw, 11px) !important;
}

#composicao-tco .paridade-range-input {
  height: 23px !important;
}


/* v84 — paginação segura: o botão de navegação não pode encavalar com a última variável.
   O pager volta a ocupar espaço no fluxo vertical do card; se uma variável não couber,
   a paginação mais conservadora do Python a empurra para a próxima tela. */
.quadro .linha-pager {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-height: 25px !important;
  height: 25px !important;
  margin-top: auto !important;
  padding: 2px 0 0 !important;
  display: grid !important;
  box-sizing: border-box !important;
}
.quadro .pager-controles {
  width: 100% !important;
  justify-content: flex-end !important;
  padding-right: 4px !important;
  box-sizing: border-box !important;
}

/* v85 — Registro inferior de alterações e rolagem vertical para acessar o histórico. */
html, body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#painel-shell {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#painel-scale-root {
  min-height: 1160px !important;
  height: 1160px !important;
}
#painel-executivo {
  min-height: 1160px !important;
  height: 1160px !important;
}
.registro-alteracoes {
  background: #fffdf4 !important;
  border: 1px solid #d8c58e !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  padding: 14px 18px !important;
  overflow: hidden !important;
}
.registro-titulo {
  margin-bottom: 8px !important;
}
.registro-conteudo {
  height: calc(100% - 32px) !important;
  overflow-y: auto !important;
  padding-right: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
.registro-vazio {
  color: #64748B !important;
  font-size: 13px !important;
  padding: 4px 0 !important;
}
.registro-linha {
  display: grid !important;
  grid-template-columns: 78px minmax(250px, 1fr) minmax(210px, 0.75fr) minmax(150px, 0.55fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 24px !important;
  padding: 3px 6px !important;
  border-bottom: 1px solid rgba(120,100,30,.16) !important;
  font-size: 12px !important;
  color: #173220 !important;
}
.registro-numero {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 52px !important;
  height: 19px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  background: #0b4f22 !important;
  color: #fff8d8 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
.registro-nome {
  font-weight: 700 !important;
  color: #0a3a18 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.registro-valores,
.registro-delta {
  color: #3b3420 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.registro-delta {
  color: #6A4218 !important;
}


/* v87 — histórico acessível por rolagem e sem loop de atualização. */
#painel-shell {
  overflow: auto !important;
}
#painel-scale-root {
  position: absolute !important;
}
#registro-alteracoes {
  display: block !important;
}


/* v88 — Paridade: linha do preço do biometano no eixo Y secundário. */
#composicao-tco .paridade-legenda-subtitulo .swatch-preco-bio {
  border-top: 2.5px dotted #B08A10 !important;
}

/* v94 — Download/Upload próximos do botão PNG, separados dos modos de visualização. */
.sim-file-btn {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(180deg) !important;
  width: min(42px, 3.4vw) !important;
  min-width: 36px !important;
  min-height: 76px !important;
  writing-mode: vertical-rl !important;
  border-radius: 12px !important;
  border: 1px solid #a98d3a !important;
  color: #fff7d6 !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  cursor: pointer !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.25) !important;
  z-index: 10021 !important;
  margin: 0 !important;
}
.sim-file-btn:hover { background: #0B6B2D !important; }
.sim-download-btn {
  bottom: 112px !important;
  background: #111111 !important;
  border-color: #111111 !important;
}
.sim-download-btn:hover { background: #2b2b2b !important; }
.sim-upload-btn {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: rotate(180deg) !important;
  background: #073916 !important;
}
#upload-simulacao {
  position: absolute !important;
  left: 50% !important;
  bottom: 210px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(42px, 3.4vw) !important;
  min-width: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10022 !important;
}
.upload-simulacao-status {
  position: absolute !important;
  left: 54px !important;
  top: 480px !important;
  min-width: 180px !important;
  max-width: 280px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  z-index: 10022 !important;
  pointer-events: none !important;
}
.upload-simulacao-status .upload-ok {
  display: inline-block !important;
  background: rgba(7, 57, 22, .92) !important;
  color: #fff7d6 !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  border: 1px solid #d7bf55 !important;
}
.upload-simulacao-status .upload-erro {
  display: inline-block !important;
  background: rgba(128, 13, 22, .94) !important;
  color: #fff7d6 !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  border: 1px solid #d7bf55 !important;
}

/* v95 — Upload: arquivo carregado registrado no histórico, sem toast persistente. */
.registro-linha-arquivo .registro-nome {
  font-weight: 900 !important;
  color: #0B3D1B !important;
}
.registro-linha-arquivo .registro-valores {
  color: #5f4a18 !important;
  font-weight: 700 !important;
}

/* v96 — wrapper clicável para selecionar variáveis duplas no modo Paridade */
.valor-premissa-click-wrap {
  width: 100% !important;
  min-width: 0 !important;
}
.valor-premissa-click-wrap .input-premissa,
.valor-premissa-click-wrap .valor-premissa {
  width: 100% !important;
  box-sizing: border-box !important;
}
.valor-premissa-click-wrap.param-em-analise .input-premissa,
.valor-premissa-click-wrap.param-em-analise .valor-premissa {
  font-weight: 800 !important;
  background: rgba(255, 247, 207, 0.95) !important;
  border-color: #8a6a08 !important;
}

/* v100 — vantagem visual no modo TCO
   - O lado vencedor recebe segmento amarelo/dourado de vantagem.
   - A linha de legenda é reservada em ambos os lados para manter simetria.
   - A vantagem entra como complemento visual para equalizar a leitura das colunas. */
.seg-vantagem {
  background: linear-gradient(90deg, #a4891d 0%, #e6cf55 52%, #9e7f12 100%) !important;
  color: #0f3d1c !important;
}
#composicao-tco .legend-row.vantagem {
  min-height: 20px !important;
}
#composicao-tco .legend-row.legend-placeholder {
  visibility: hidden !important;
}
#composicao-tco .tco-result-vantagem {
  background: linear-gradient(90deg, #a4891d 0%, #e6cf55 52%, #9e7f12 100%) !important;
  color: #0f3d1c !important;
  border-radius: 4px 4px 0 0;
  border: 1px solid rgba(115, 82, 8, .45);
  box-shadow: inset 0 5px 10px rgba(255,255,255,.18), inset 0 -6px 10px rgba(90,62,5,.20);
}
#composicao-tco .tco-vantagem-label {
  white-space: pre-line;
  line-height: 1.04;
  font-weight: 800;
  text-align: center;
  padding: 1px 2px;
  overflow: hidden;
  text-shadow: 0 1px 1px rgba(255,255,255,.25);
}
#composicao-tco .tco-vantagem-label .tco-result-name,
#composicao-tco .tco-vantagem-label .tco-result-value {
  color: #0f3d1c !important;
  font-weight: 800 !important;
}

/* v102 — Decomposição com vantagem e valor antes da rubrica quando houver pouco espaço. */
#composicao-tco .decomp-subrect-vantagem {
  background: linear-gradient(90deg, #a4891d 0%, #e6cf55 52%, #9e7f12 100%) !important;
  box-shadow: inset 0 4px 9px rgba(255,255,255,.18), inset 0 -5px 9px rgba(90,62,5,.20) !important;
}
#composicao-tco .decomp-sub-value-first {
  margin-top: 0 !important;
  margin-bottom: 1px !important;
  font-size: clamp(6.4px, .52vw, 9.4px) !important;
  color: #ffffff !important;
}
#composicao-tco .decomp-sub-value-first + .decomp-sub-label {
  font-size: clamp(6.2px, .50vw, 9px) !important;
  max-height: 1.1em !important;
}
#composicao-tco .decomp-legend-row .decomp-legend-name {
  min-width: 0 !important;
}

/* v103 — Custos Exclusivos: valor/percentual antes da rubrica em retângulos críticos. */
#composicao-tco .diff-html-rect-value-first .diff-html-value-first {
  margin-top: 0 !important;
  margin-bottom: 1px !important;
  font-size: clamp(7.2px, .62vw, 11px) !important;
  line-height: 1.0 !important;
  font-weight: 950 !important;
}
#composicao-tco .diff-html-rect-value-first .diff-html-label {
  font-size: clamp(7px, .58vw, 10px) !important;
  line-height: 1.0 !important;
  max-height: 1.05em !important;
}

/* v104 — seletor do modo de Paridade */
#composicao-tco .paridade-mode-selector-wrap {
  position: absolute !important;
  right: clamp(8px, 0.7vw, 14px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: clamp(175px, 14.5vw, 245px) !important;
  z-index: 25 !important;
}
#composicao-tco .paridade-mode-selector .Select-control,
#composicao-tco .paridade-mode-selector .Select-placeholder,
#composicao-tco .paridade-mode-selector .Select-value,
#composicao-tco .paridade-mode-selector .Select-input,
#composicao-tco .paridade-mode-selector .Select-value-label {
  min-height: 25px !important;
  height: 25px !important;
  line-height: 25px !important;
}
#composicao-tco .paridade-mode-selector .Select-control {
  border: 1px solid rgba(128, 105, 40, .65) !important;
  border-radius: 6px !important;
  background: rgba(255, 248, 218, .92) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
}
#composicao-tco .paridade-mode-selector .Select-value-label,
#composicao-tco .paridade-mode-selector .Select-placeholder {
  color: #173220 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-align: center !important;
}
#composicao-tco .paridade-mode-selector .Select-menu-outer {
  z-index: 20000 !important;
  font-size: 11px !important;
}

/* v112 — Análise 2D acionada sob demanda */
.nav-aba-analise2d {
  background: #0B3D16 !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
}
.nav-aba-analise2d:hover { background: #14672A !important; }

#composicao-tco .analise2d-card-body {
  padding-top: 0.4vh !important;
}

#composicao-tco .analise2d-graph-wrap {
  padding-top: 0.6vh !important;
}

#composicao-tco .analise2d-control-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 0.75fr 0.45fr 0.55fr 0.42fr;
  gap: 8px;
  align-items: end;
  width: 96%;
  margin: 0 auto 6px auto;
}

#composicao-tco .analise2d-control {
  min-width: 0;
}

#composicao-tco .analise2d-control .paridade-info-title-inline {
  margin-bottom: 2px;
  font-size: 9px !important;
  letter-spacing: 0.13em;
}

#composicao-tco .analise2d-selector .Select-control,
#composicao-tco .analise2d-selector .Select-placeholder,
#composicao-tco .analise2d-selector .Select-value,
#composicao-tco .analise2d-selector .Select-input,
#composicao-tco .analise2d-selector .Select-value-label {
  height: 28px !important;
  line-height: 28px !important;
  min-height: 28px !important;
  font-size: 11px !important;
}

#composicao-tco .analise2d-input {
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  font-size: 11px !important;
}

#composicao-tco .analise2d-calc-btn {
  width: 100%;
  height: 30px;
  border: none;
  border-radius: 7px;
  background: #0B3D16;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
}

#composicao-tco .analise2d-calc-btn:hover { background: #14672A; }

/* v114 — Overlay de progresso da Análise 2D */
.analise2d-progress-overlay {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.18);
  z-index: 50000;
  pointer-events: none;
}
.analise2d-progress-text {
  min-width: 320px;
  padding: 18px 26px;
  border-radius: 14px;
  background: rgba(255, 253, 238, 0.96);
  border: 2px solid rgba(8, 124, 42, 0.35);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  color: #0B3D16;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.03em;
}

/* v117 — Análise 2D: mais altura útil para o gráfico.
   O objetivo é fazer o retângulo de plotagem ocupar mais da área interna do módulo,
   sem alterar a lógica de cálculo nem os demais modos do painel. */
#composicao-tco .analise2d-card-body {
  padding-top: 0.15vh !important;
  padding-bottom: 0.15vh !important;
  overflow: visible !important;
}

#composicao-tco .analise2d-graph-wrap {
  padding-top: 0.35vh !important;
  padding-bottom: 0.25vh !important;
  grid-template-rows: auto auto minmax(185px, 1fr) !important;
  overflow: visible !important;
}

#composicao-tco .analise2d-control-grid {
  margin-bottom: 2px !important;
}

#composicao-tco .analise2d-graph-wrap .paridade-legenda-subtitulo {
  min-height: 14px !important;
  margin-top: -3px !important;
  margin-bottom: -2px !important;
}

#composicao-tco #grafico-analise2d,
#composicao-tco #grafico-analise2d .js-plotly-plot,
#composicao-tco #grafico-analise2d .plot-container,
#composicao-tco #grafico-analise2d .svg-container {
  min-height: 185px !important;
  height: 100% !important;
}


/* v118 — Análise 2D: aumento real da dimensão física do gráfico.
   A versão anterior aumentava a altura mínima, mas o Graph ainda era comprimido
   pela grade interna. Aqui o módulo reserva uma linha física maior para o Plotly,
   reduz margens visuais e faz o retângulo branco ocupar melhor o painel. */
#composicao-tco .analise2d-card-body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#composicao-tco .analise2d-graph-wrap {
  padding-top: 0.20vh !important;
  padding-bottom: 0.10vh !important;
  grid-template-rows: auto auto 270px !important;
  gap: 1px !important;
  align-content: start !important;
}

#composicao-tco .analise2d-control-grid {
  margin-bottom: 0 !important;
}

#composicao-tco .analise2d-graph-wrap .paridade-legenda-subtitulo {
  min-height: 12px !important;
  margin-top: -4px !important;
  margin-bottom: -4px !important;
  transform: translateY(-1px);
}

#composicao-tco #grafico-analise2d,
#composicao-tco #grafico-analise2d .dash-graph,
#composicao-tco #grafico-analise2d .js-plotly-plot,
#composicao-tco #grafico-analise2d .plot-container,
#composicao-tco #grafico-analise2d .svg-container,
#composicao-tco #grafico-analise2d .main-svg {
  height: 270px !important;
  min-height: 270px !important;
  width: 100% !important;
}

#composicao-tco #grafico-analise2d .xtitle {
  transform: translateY(4px) !important;
}


/* v119 — Análise 2D: gráfico alto, mas sem encavalar nos indicadores.
   A v118 aumentou a dimensão física do Plotly, porém o componente passou a
   invadir a faixa de resumo e esconder marcações/rótulo do eixo X. Aqui a
   área do gráfico continua maior que na v117, mas fica contida no bloco
   analítico. Também removemos a moldura/fundo do wrapper interno, que virava
   um retângulo visual atrás do gráfico e dos indicadores. */
#composicao-tco .analise2d-card-body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

#composicao-tco .analise2d-graph-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 clamp(14px, 1.0vw, 20px) 4px !important;
  grid-template-rows: auto auto 238px !important;
  gap: 2px !important;
  align-content: start !important;
  overflow: hidden !important;
}

#composicao-tco .analise2d-control-grid {
  margin-bottom: 0 !important;
}

#composicao-tco .analise2d-graph-wrap .paridade-legenda-subtitulo {
  min-height: 13px !important;
  margin-top: -3px !important;
  margin-bottom: -1px !important;
  transform: none !important;
}

#composicao-tco #grafico-analise2d,
#composicao-tco #grafico-analise2d .dash-graph,
#composicao-tco #grafico-analise2d .js-plotly-plot,
#composicao-tco #grafico-analise2d .plot-container,
#composicao-tco #grafico-analise2d .svg-container,
#composicao-tco #grafico-analise2d .main-svg {
  height: 238px !important;
  min-height: 238px !important;
  max-height: 238px !important;
  width: 100% !important;
}

#composicao-tco #grafico-analise2d .xtitle {
  transform: translateY(0) !important;
}

/* v120 — Análise 2D: rótulo do eixo X visível e tooltip menos intrusivo. */
#composicao-tco .analise2d-graph-wrap {
  grid-template-rows: auto auto 246px !important;
  padding-bottom: 6px !important;
}
#composicao-tco #grafico-analise2d,
#composicao-tco #grafico-analise2d .dash-graph,
#composicao-tco #grafico-analise2d .js-plotly-plot,
#composicao-tco #grafico-analise2d .plot-container,
#composicao-tco #grafico-analise2d .svg-container,
#composicao-tco #grafico-analise2d .main-svg {
  height: 246px !important;
  min-height: 246px !important;
  max-height: 246px !important;
  width: 100% !important;
}
.analise2d-tooltip .tooltip-inner,
.analise2d-tooltip-card {
  max-width: 310px !important;
}
.analise2d-tooltip-card {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(122,66,30,0.30);
  background: rgba(255,253,238,0.96);
  color: #173220;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.22;
  box-shadow: 0 4px 12px rgba(0,0,0,0.16);
}
.analise2d-tooltip-title {
  font-weight: 900;
  margin-bottom: 4px;
  color: #0B3D16;
}
.analise2d-tooltip-row {
  white-space: normal;
  margin-top: 2px;
}

/* v121 — Análise 2D: restaura hover nativo do Plotly e garante título do eixo X. */
#composicao-tco .analise2d-graph-wrap {
  grid-template-rows: auto auto 252px !important;
  padding-bottom: 8px !important;
}
#composicao-tco #grafico-analise2d,
#composicao-tco #grafico-analise2d .dash-graph,
#composicao-tco #grafico-analise2d .js-plotly-plot,
#composicao-tco #grafico-analise2d .plot-container,
#composicao-tco #grafico-analise2d .svg-container,
#composicao-tco #grafico-analise2d .main-svg {
  height: 252px !important;
  min-height: 252px !important;
  max-height: 252px !important;
  width: 100% !important;
}
#composicao-tco #grafico-analise2d .xtitle {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* v122 — Análise 2D: rótulo do eixo X fora do SVG do Plotly, visível entre
   os ticks e a faixa de resumo; gráfico continua alto, sem encavalar. */
#composicao-tco .analise2d-graph-wrap {
  grid-template-rows: auto auto 228px 20px !important;
  padding-bottom: 6px !important;
  overflow: visible !important;
}
#composicao-tco #grafico-analise2d,
#composicao-tco #grafico-analise2d .dash-graph,
#composicao-tco #grafico-analise2d .js-plotly-plot,
#composicao-tco #grafico-analise2d .plot-container,
#composicao-tco #grafico-analise2d .svg-container,
#composicao-tco #grafico-analise2d .main-svg {
  height: 228px !important;
  min-height: 228px !important;
  max-height: 228px !important;
  width: 100% !important;
}
#composicao-tco .analise2d-x-axis-title {
  height: 20px !important;
  line-height: 18px !important;
  margin-top: -2px !important;
  text-align: center !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  color: #0B3D16 !important;
  font-weight: 500 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
#composicao-tco #grafico-analise2d .xtitle {
  display: none !important;
}

/* v125 — Análise 2D: informações do ponto no cartão de resumo, não em balão sobre o gráfico. */
#analise2d-hover-summary-title {
  white-space: normal !important;
}
#analise2d-hover-summary-value {
  font-size: 13px !important;
  line-height: 1.12 !important;
  white-space: normal !important;
}
#analise2d-hover-summary-value .analise2d-summary-hover-box {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
#analise2d-hover-summary-value .analise2d-summary-hover-line {
  font-size: 12px !important;
  line-height: 1.12 !important;
  font-weight: 700;
}

/* v126 — Análise 2D: quarto cartão limpo para informações do ponto. */
#composicao-tco .analise2d-hover-summary-clean {
  padding-left: 18px !important;
  padding-right: 18px !important;
}
#composicao-tco .analise2d-hover-summary-clean .tco-summary-icon {
  display: none !important;
}
#composicao-tco .analise2d-hover-summary-text {
  width: 100% !important;
  min-width: 0 !important;
}
#analise2d-hover-summary-title,
#composicao-tco .analise2d-hover-summary-title-hidden {
  display: none !important;
}
#analise2d-hover-summary-value,
#composicao-tco .analise2d-hover-summary-value-clean {
  font-size: 13px !important;
  line-height: 1.10 !important;
  white-space: normal !important;
  overflow: visible !important;
}
#analise2d-hover-summary-value .analise2d-summary-hover-box {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
#analise2d-hover-summary-value .analise2d-summary-hover-line {
  font-size: 12px !important;
  line-height: 1.10 !important;
  font-weight: 800;
}

/* v127 — Corrige o quarto cartão da Análise 2D sem quebrar o resumo.
   Estado normal: mostra "Último cálculo" + status.
   Estado hover: o callback envia título vazio e as linhas do ponto ocupam todo o cartão. */
#composicao-tco .analise2d-hover-summary-clean {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 6px 16px !important;
  overflow: visible !important;
}
#composicao-tco .analise2d-hover-summary-clean .tco-summary-icon {
  display: none !important;
}
#composicao-tco .analise2d-hover-summary-text {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}
#composicao-tco #analise2d-hover-summary-title {
  display: block !important;
  min-height: 0 !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  white-space: normal !important;
  color: #173220 !important;
}
#composicao-tco #analise2d-hover-summary-title:empty {
  display: none !important;
}
#composicao-tco #analise2d-hover-summary-value {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.10 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
#composicao-tco #analise2d-hover-summary-value .analise2d-summary-hover-box {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
#composicao-tco #analise2d-hover-summary-value .analise2d-summary-hover-line {
  display: block !important;
  width: 100% !important;
  font-size: 11px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* v128 — Análise 2D: quarto cartão usa toda a área disponível.
   A causa do corte era o grid herdado de .tco-summary-item, que mantinha
   duas colunas mesmo sem ícone; com um único filho, o texto ficava preso
   à primeira coluna. */
#composicao-tco .analise2d-hover-summary-clean {
  display: block !important;
  grid-template-columns: 1fr !important;
  grid-auto-columns: 1fr !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 6px 18px !important;
  overflow: hidden !important;
}
#composicao-tco .analise2d-hover-summary-clean > .analise2d-hover-summary-text,
#composicao-tco .analise2d-hover-summary-clean > .tco-summary-text {
  display: flex !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: visible !important;
}
#composicao-tco .analise2d-hover-summary-clean .tco-summary-icon {
  display: none !important;
}
#composicao-tco #analise2d-hover-summary-title {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  white-space: normal !important;
  overflow: visible !important;
}
#composicao-tco #analise2d-hover-summary-title:empty {
  display: none !important;
}
#composicao-tco #analise2d-hover-summary-value {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
#composicao-tco #analise2d-hover-summary-value .analise2d-summary-hover-box {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}
#composicao-tco #analise2d-hover-summary-value .analise2d-summary-hover-line {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  font-size: 12px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* v129 — Análise 2D: informações do ponto na cor da respectiva curva. */
#composicao-tco #analise2d-hover-summary-value .analise2d-summary-hover-principal,
#composicao-tco #analise2d-hover-summary-value .analise2d-summary-hover-principal .analise2d-summary-hover-line {
  color: #087C2A !important;
}
#composicao-tco #analise2d-hover-summary-value .analise2d-summary-hover-oposta,
#composicao-tco #analise2d-hover-summary-value .analise2d-summary-hover-oposta .analise2d-summary-hover-line {
  color: #7A421E !important;
}
#composicao-tco #analise2d-hover-summary-value .analise2d-summary-hover-sem-solucao,
#composicao-tco #analise2d-hover-summary-value .analise2d-summary-hover-sem-solucao .analise2d-summary-hover-line {
  color: #9A111A !important;
}

/* v133 — Análise 2D: mantém o menu de seleção colado ao respectivo seletor. */
#composicao-tco .analise2d-control .Select {
  position: relative !important;
}
#composicao-tco .analise2d-control .Select-menu-outer {
  position: absolute !important;
  left: 0 !important;
  top: 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  z-index: 99999 !important;
}
#composicao-tco .analise2d-control .VirtualizedSelectOption {
  white-space: normal !important;
  line-height: 1.15 !important;
}

/* v139 — Análise 2D: título do eixo X em preto. */
#composicao-tco .analise2d-x-axis-title {
  color: #111111 !important;
}

/* v152 — edição visual inline do primeiro card do resumo, sem callbacks Dash. */
.summary-inline-editable {
  cursor: pointer;
  position: relative;
}

.summary-inline-editable:hover .summary-inline-title,
.summary-inline-editable:hover .summary-inline-value {
  background: rgba(197, 180, 103, 0.16);
  box-shadow: inset 0 -1px 0 rgba(18, 69, 31, 0.25);
}

.summary-inline-editable.is-editing {
  cursor: default;
  background: rgba(255, 253, 238, 0.70);
  box-shadow: inset 0 0 0 1px rgba(18, 69, 31, 0.20);
}

.summary-inline-editor {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-width: 0;
}

.summary-inline-editor input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid rgba(160, 140, 88, 0.60);
  border-radius: 5px;
  background: rgba(255, 253, 238, 0.96);
  color: #12451f;
  padding: 2px 5px;
  font-family: Arial, sans-serif;
  outline: none;
}

.summary-inline-editor .summary-inline-input-title {
  font-size: clamp(8px, 0.72vw, 12px);
  font-weight: 700;
  line-height: 1.05;
}

.summary-inline-editor .summary-inline-input-value {
  font-size: clamp(11px, 1.0vw, 18px);
  font-weight: 900;
  line-height: 1.0;
}

.summary-inline-editor-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 1px;
}

.summary-inline-editor-actions button {
  border: 1px solid rgba(18, 69, 31, 0.30);
  border-radius: 6px;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  padding: 2px 7px;
  cursor: pointer;
}

.summary-inline-save {
  background: #0b4f18;
  color: #fffdf0;
}

.summary-inline-cancel {
  background: #ffffff;
  color: #693816;
}

/* v153 — registro visual da edição do card de resumo, com desfazer em X vermelho. */
.registro-linha-resumo-editavel {
  grid-template-columns: 78px minmax(250px, 1fr) minmax(210px, 1.15fr) 44px !important;
  background: rgba(255, 248, 216, 0.72) !important;
}

.registro-numero-editavel {
  background: #7A421E !important;
}

.registro-delta-editavel {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.registro-desfazer-editavel {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1px solid #9b111e !important;
  background: #fff5f5 !important;
  color: #b00020 !important;
  font-size: 18px !important;
  line-height: 18px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.registro-desfazer-editavel:hover {
  background: #b00020 !important;
  color: #ffffff !important;
}

/* v158 — módulo Mapa: nome, rolagem robusta, coluna visual de mecanismo */
.nav-aba-total {
  background: #3B3011 !important;
  font-size: 12px !important;
  line-height: 1.04 !important;
}
.nav-aba-total:hover { background: #5C4715 !important; }

#composicao-tco .total-topbar {
  min-height: 42px !important;
  height: 42px !important;
  padding-top: 2px !important;
  padding-bottom: 0 !important;
}
#composicao-tco .total-topbar-left,
#composicao-tco .total-topbar-right {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}
#composicao-tco .total-topbar-left {
  justify-content: flex-start !important;
}
#composicao-tco .total-topbar-right {
  justify-content: flex-end !important;
}
#composicao-tco .total-topbar-title {
  align-self: center !important;
}
#composicao-tco .total-card-body {
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 clamp(10px, .85vw, 16px) clamp(10px, .85vw, 16px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
#composicao-tco .total-note {
  color: #173220 !important;
  font-size: clamp(11px, .82vw, 13px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  margin-top: 1px !important;
}
#composicao-tco .total-download-btn {
  min-width: 118px !important;
  height: 30px !important;
  border-radius: 8px !important;
  border: 1px solid #0B3D16 !important;
  background: #0B3D16 !important;
  color: #fff8d8 !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.20) !important;
}
#composicao-tco .total-download-btn:hover {
  background: #14672A !important;
}
#composicao-tco .total-table-wrap {
  min-height: 0 !important;
  height: 100% !important;
  flex: 1 1 0 !important;
  max-height: 100% !important;
  margin-top: -1px !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable both-edges !important;
  background: rgba(255,253,238,.90) !important;
  border: 1px solid rgba(176,151,82,.62) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 12px rgba(255,255,255,.45) !important;
}
#composicao-tco .total-table {
  width: 100% !important;
  min-width: 1120px !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  color: #173220 !important;
  font-size: clamp(10px, .74vw, 12px) !important;
  line-height: 1.22 !important;
}
#composicao-tco .total-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: #0B3D16 !important;
  color: #fff8d8 !important;
  font-weight: 900 !important;
  text-align: left !important;
  padding: 8px 9px !important;
  border-bottom: 1px solid #D6C48A !important;
}
#composicao-tco .total-table td {
  vertical-align: top !important;
  padding: 7px 9px !important;
  border-bottom: 1px solid rgba(176,151,82,.32) !important;
  background: rgba(255,253,238,.70) !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
#composicao-tco .total-table tbody tr:nth-child(even) td {
  background: rgba(246,239,203,.58) !important;
}
#composicao-tco .total-table th:nth-child(1),
#composicao-tco .total-table td:nth-child(1) { width: 15% !important; }
#composicao-tco .total-table th:nth-child(2),
#composicao-tco .total-table td:nth-child(2) { width: 40% !important; }
#composicao-tco .total-table th:nth-child(3),
#composicao-tco .total-table td:nth-child(3) { width: 20% !important; }
#composicao-tco .total-table th:nth-child(4),
#composicao-tco .total-table td:nth-child(4) { width: 25% !important; }

#composicao-tco .total-impact-pill {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(23,50,32,.18) !important;
  background: rgba(255,255,255,.72) !important;
  font-weight: 800 !important;
}
#composicao-tco .total-impact-segment {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}
#composicao-tco .total-impact-divider {
  color: rgba(23,50,32,.42) !important;
  font-weight: 700 !important;
}
#composicao-tco .total-impact-label {
  color: #173220 !important;
}
#composicao-tco .total-impact-arrow {
  font-size: 14px !important;
  line-height: 1 !important;
}
#composicao-tco .total-impact-up .total-impact-arrow {
  color: #0F8A2A !important;
}
#composicao-tco .total-impact-down .total-impact-arrow {
  color: #C62828 !important;
}
#composicao-tco .total-impact-flat .total-impact-arrow {
  color: #7B7460 !important;
}

#composicao-tco .total-var-cell-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
  width: 100% !important;
}
#composicao-tco .total-var-line {
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  line-height: 1.10 !important;
  color: #173220 !important;
}
#composicao-tco .total-var-prefix {
  font-size: 10.9px !important;
  font-weight: 600 !important;
}
#composicao-tco .total-var-detail {
  font-size: 10.7px !important;
  font-weight: 500 !important;
}
#composicao-tco .total-var-fit-1 { font-size: 10.1px !important; }
#composicao-tco .total-var-fit-2 { font-size: 9.5px !important; }
#composicao-tco .total-var-fit-3 { font-size: 8.9px !important; }

#composicao-tco .total-col-variavel,
#composicao-tco .total-col-tco {
  overflow: hidden !important;
}

#composicao-tco .total-gap-delta {
  font-weight: 900 !important;
  white-space: nowrap !important;
}
#composicao-tco .total-gap-reducao {
  color: #C62828 !important;
}
#composicao-tco .total-summary-strip {
  margin-top: clamp(2px, 0.22vw, 5px) !important;
  align-self: end !important;
}

/* v162 — barra lateral com malha fixa de 10 posições e um espaço vazio antes do Upload.
   Regra pedida: tratar a coluna como 10 botões equivalentes, com vão = 10% da altura
   de um botão. Os 9 controles visíveis passam a ocupar 9 dessas 10 posições, deixando
   a 7ª casa vazia antes do Upload. */
#painel-scale-controls {
  --side-pad: clamp(8px, 0.9vh, 12px);
  --btn-gap: calc((100vh - (2 * var(--side-pad))) / 109);
  --btn-h: calc(var(--btn-gap) * 10);
  --btn-w: calc(100% - 8px);
  padding: var(--side-pad) 4px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(10, var(--btn-h)) !important;
  row-gap: var(--btn-gap) !important;
  align-items: stretch !important;
  justify-items: center !important;
  align-content: start !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Base comum dos 9 botões laterais visíveis */
#btn-toggle-unidade,
#btn-aba-tco,
#btn-aba-diferencas,
#btn-aba-paridade,
#btn-aba-analise2d,
#btn-aba-total,
#btn-salvar-analise,
#btn-download-simulacao,
#upload-simulacao,
#btn-upload-simulacao-visual {
  width: var(--btn-w) !important;
  min-width: 0 !important;
  max-width: var(--btn-w) !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
}

#btn-toggle-unidade,
#btn-aba-tco,
#btn-aba-diferencas,
#btn-aba-paridade,
#btn-aba-analise2d,
#btn-aba-total,
#btn-salvar-analise,
#btn-download-simulacao,
#btn-upload-simulacao-visual {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: rotate(180deg) !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(4px, 0.42vw, 7px) !important;
  overflow: hidden !important;
  white-space: normal !important;
  word-break: break-word !important;
  text-align: center !important;
  line-height: 1.02 !important;
  font-size: clamp(8px, calc(var(--btn-h) * 0.145), 13px) !important;
  letter-spacing: 0.01em !important;
}

/* Distribuição fixa nas 10 casas */
#btn-toggle-unidade { grid-row: 1 !important; }
#btn-aba-tco { grid-row: 2 !important; }
#btn-aba-diferencas { grid-row: 3 !important; }
#btn-aba-paridade { grid-row: 4 !important; }
#btn-aba-analise2d { grid-row: 5 !important; }
#btn-aba-total { grid-row: 6 !important; }
/* grid-row 7 fica vazio, como reserva antes do Upload */
#upload-simulacao { grid-row: 8 !important; }
#btn-download-simulacao { grid-row: 9 !important; }
#btn-salvar-analise { grid-row: 10 !important; }

/* Wrapper do upload ocupa a célula; o botão interno preenche a célula inteira. */
#upload-simulacao {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  z-index: 10022 !important;
}
#upload-simulacao > div,
#upload-simulacao .dash-uploader,
#upload-simulacao .dash-upload {
  width: 100% !important;
  height: 100% !important;
}
#btn-upload-simulacao-visual {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Cores originais preservadas; apenas consolidamos a geometria. */
#btn-download-simulacao {
  background: #111111 !important;
  border-color: #111111 !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.25) !important;
  z-index: 10021 !important;
}
#btn-download-simulacao:hover { background: #2b2b2b !important; }

#btn-salvar-analise {
  background: #111111 !important;
  border-color: #111111 !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.30) !important;
  z-index: 10020 !important;
}
#btn-salvar-analise:hover { background: #2b2b2b !important; }

/* Mantém o status do upload fora da malha, sem perturbar a coluna dos botões. */
.upload-simulacao-status {
  position: fixed !important;
  left: calc(var(--largura-controle-escala) + 8px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  min-width: 180px !important;
  max-width: 280px !important;
  z-index: 10030 !important;
}

/* v163 — equalização rígida da largura VISUAL dos botões laterais.
   O ajuste anterior ainda deixava classes antigas interferirem em min-content/width
   de alguns botões. Aqui todos os botões passam a receber a mesma largura explícita,
   com inline-size/block-size e flex-basis travados. */
#painel-scale-controls {
  --side-btn-w: calc(var(--largura-controle-escala) - 8px);
  grid-template-columns: minmax(0, var(--side-btn-w)) !important;
  justify-content: center !important;
  justify-items: center !important;
}

#painel-scale-controls > *,
#upload-simulacao,
#upload-simulacao > div,
#upload-simulacao .dash-uploader,
#upload-simulacao .dash-upload {
  min-width: 0 !important;
  max-width: var(--side-btn-w) !important;
  width: var(--side-btn-w) !important;
  box-sizing: border-box !important;
}

#btn-toggle-unidade,
#btn-aba-tco,
#btn-aba-diferencas,
#btn-aba-paridade,
#btn-aba-analise2d,
#btn-aba-total,
#btn-salvar-analise,
#btn-download-simulacao,
#btn-upload-simulacao-visual {
  inline-size: var(--side-btn-w) !important;
  min-inline-size: var(--side-btn-w) !important;
  max-inline-size: var(--side-btn-w) !important;
  width: var(--side-btn-w) !important;
  min-width: var(--side-btn-w) !important;
  max-width: var(--side-btn-w) !important;
  flex: 0 0 var(--side-btn-w) !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#btn-toggle-unidade,
#btn-aba-tco,
#btn-aba-diferencas,
#btn-aba-paridade,
#btn-aba-analise2d,
#btn-aba-total,
#btn-salvar-analise,
#btn-download-simulacao,
#btn-upload-simulacao-visual {
  block-size: var(--btn-h) !important;
  min-block-size: var(--btn-h) !important;
  max-block-size: var(--btn-h) !important;
  height: var(--btn-h) !important;
  min-height: var(--btn-h) !important;
  max-height: var(--btn-h) !important;
}

#upload-simulacao {
  width: var(--side-btn-w) !important;
  min-width: var(--side-btn-w) !important;
  max-width: var(--side-btn-w) !important;
  height: var(--btn-h) !important;
  min-height: var(--btn-h) !important;
  max-height: var(--btn-h) !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
}

/* Dash envolve o Upload em uma div interna; esta regra impede que o botão interno
   herde largura automática baseada no texto. */
#upload-simulacao > div,
#upload-simulacao > div > div {
  width: var(--side-btn-w) !important;
  min-width: var(--side-btn-w) !important;
  max-width: var(--side-btn-w) !important;
  height: var(--btn-h) !important;
  min-height: var(--btn-h) !important;
  max-height: var(--btn-h) !important;
  box-sizing: border-box !important;
}

/* v164 — unificação final dos botões laterais: Upload idêntico, fonte fixa e paleta por blocos. */
#btn-toggle-unidade,
#btn-aba-tco,
#btn-aba-diferencas,
#btn-aba-paridade,
#btn-aba-analise2d,
#btn-aba-total,
#btn-salvar-analise,
#btn-download-simulacao,
#btn-upload-simulacao-visual {
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-align: center !important;
  padding: 4px 3px !important;
  border-radius: 12px !important;
}

/* 1º botão: prata com texto escuro */
#btn-toggle-unidade {
  background: linear-gradient(180deg, #d9d9d9 0%, #bfbfbf 100%) !important;
  border-color: #8f8f8f !important;
  color: #202020 !important;
}
#btn-toggle-unidade:hover {
  background: linear-gradient(180deg, #e5e5e5 0%, #c9c9c9 100%) !important;
  color: #181818 !important;
}

/* Bloco superior principal: preto com texto branco */
#btn-aba-tco,
#btn-aba-diferencas,
#btn-aba-paridade,
#btn-aba-analise2d,
#btn-aba-total {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}
#btn-aba-tco:hover,
#btn-aba-diferencas:hover,
#btn-aba-paridade:hover,
#btn-aba-analise2d:hover,
#btn-aba-total:hover {
  background: #2b2b2b !important;
  border-color: #2b2b2b !important;
  color: #ffffff !important;
}

/* 3 botões inferiores: todos iguais em verde escuro com texto branco */
#btn-upload-simulacao-visual,
#btn-download-simulacao,
#btn-salvar-analise {
  background: #073916 !important;
  border-color: #073916 !important;
  color: #ffffff !important;
}
#btn-upload-simulacao-visual:hover,
#btn-download-simulacao:hover,
#btn-salvar-analise:hover {
  background: #0B6B2D !important;
  border-color: #0B6B2D !important;
  color: #ffffff !important;
}

/* Remove diferenças residuais do wrapper do upload. */
#upload-simulacao,
#upload-simulacao > div,
#upload-simulacao > div > div,
#upload-simulacao .dash-uploader,
#upload-simulacao .dash-upload {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* v165 — fonte lateral contra-compensada por JS em caso de Ctrl+ / Ctrl-. */
#btn-toggle-unidade,
#btn-aba-tco,
#btn-aba-diferencas,
#btn-aba-paridade,
#btn-aba-analise2d,
#btn-aba-total,
#btn-salvar-analise,
#btn-download-simulacao,
#btn-upload-simulacao-visual {
  font-size: var(--side-btn-font-px, 11px) !important;
  line-height: 1 !important;
}

/* v166 — botões laterais como imagem/SVG, com centro fixo e compensação do zoom. */
#btn-toggle-unidade,
#btn-aba-tco,
#btn-aba-diferencas,
#btn-aba-paridade,
#btn-aba-analise2d,
#btn-aba-total,
#btn-salvar-analise,
#btn-download-simulacao,
#btn-upload-simulacao-visual {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  transform: scale(var(--side-btn-zoom-comp, 1)) !important;
  transform-origin: center center !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  font-size: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  border-color: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
}
#btn-toggle-unidade::selection,
#btn-aba-tco::selection,
#btn-aba-diferencas::selection,
#btn-aba-paridade::selection,
#btn-aba-analise2d::selection,
#btn-aba-total::selection,
#btn-salvar-analise::selection,
#btn-download-simulacao::selection,
#btn-upload-simulacao-visual::selection {
  color: transparent !important;
  background: transparent !important;
}

/* v167 — correção: botão-imagem real, sem contraescala de zoom que distorce a malha.
   O tamanho de 100% fica como referência. O navegador pode ampliar a página, mas o
   desenho interno do botão não reflui nem perde o texto. */
#btn-toggle-unidade,
#btn-aba-tco,
#btn-aba-diferencas,
#btn-aba-paridade,
#btn-aba-analise2d,
#btn-aba-total,
#btn-salvar-analise,
#btn-download-simulacao,
#btn-upload-simulacao-visual {
  transform: none !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  background-image: none !important;
  background-color: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#painel-scale-controls .side-button-svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  pointer-events: none !important;
  shape-rendering: geometricPrecision !important;
  image-rendering: auto !important;
}
#painel-scale-controls .side-button-svg text {
  dominant-baseline: central;
  text-anchor: middle;
  font-family: 'Helvetica Neue', 'Arial Narrow', Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.7px;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


#composicao-tco .total-topbar-right {
  gap: 10px !important;
}
#composicao-tco .total-image-btn {
  min-width: 132px !important;
}


#composicao-tco .total-tco-cell-wrap {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  width: 100% !important;
}
#composicao-tco .total-tco-item-line {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  white-space: nowrap !important;
  width: 100% !important;
  overflow: hidden !important;
  font-size: 12.2px !important;
  line-height: 1.14 !important;
}
#composicao-tco .total-tco-item-line.total-tco-fit-1 {
  font-size: 11.4px !important;
}
#composicao-tco .total-tco-item-line.total-tco-fit-2 {
  font-size: 10.6px !important;
}
#composicao-tco .total-tco-item-line.total-tco-fit-3 {
  font-size: 9.8px !important;
}
#composicao-tco .total-tco-pair {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
  white-space: nowrap !important;
  font-weight: 400 !important;
  flex: 0 1 auto !important;
}
#composicao-tco .total-tco-neg-sign {
  color: #C62828 !important;
  font-weight: 400 !important;
}
#composicao-tco .total-tco-pos-empty {
  color: transparent !important;
  width: 0 !important;
  display: inline-block !important;
}
#composicao-tco .total-tco-left-num {
  color: #0F8A2A !important;
  font-weight: 400 !important;
}
#composicao-tco .total-tco-right-num {
  color: #7A4A11 !important;
  font-weight: 400 !important;
}
#composicao-tco .total-tco-sep,
#composicao-tco .total-tco-close,
#composicao-tco .total-tco-pair > span:first-child,
#composicao-tco .total-tco-colon {
  color: #243C2F !important;
  font-weight: 400 !important;
}
#composicao-tco .total-tco-components-text {
  color: #243C2F !important;
  font-weight: 500 !important;
  flex: 0 0 auto !important;
}
#composicao-tco .total-limite-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  width: 100% !important;
}
#composicao-tco .total-limite-line {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  line-height: 1.12 !important;
}
#composicao-tco .total-gap-delta {
  font-weight: 700 !important;
}


/* v194 — quinto card executivo e diferença de preço ao lado do título. */
#composicao-tco .tco-summary-strip,
#composicao-tco .diff-summary-strip {
  grid-template-columns: 1.06fr 1.14fr 0.92fr 0.92fr 1.02fr !important;
}

#composicao-tco .summary-parity-price .tco-summary-title {
  white-space: nowrap !important;
  font-size: 12.5px !important;
  max-height: none !important;
}
#composicao-tco .summary-current-price {
  padding-right: 6px !important;
}
#composicao-tco .summary-current-price .tco-summary-text {
  padding-right: 0 !important;
}
#composicao-tco .summary-current-value-line {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  width: 100% !important;
}
#composicao-tco .summary-current-main-value {
  color: #12451f !important;
  flex: 0 0 auto !important;
}
#composicao-tco .summary-current-parity-delta {
  color: #12451f !important;
  font-size: 0.73em !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  letter-spacing: -0.02em !important;
  flex: 0 1 auto !important;
}
#composicao-tco .summary-current-delta-part.summary-delta-positive {
  color: #C62828 !important;
  font-weight: 900 !important;
}
#composicao-tco .summary-current-delta-part.summary-delta-negative {
  color: #0F8A2A !important;
  font-weight: 900 !important;
}

/* v194 — registro com coluna de paridade. */
.registro-linha {
  grid-template-columns: 78px minmax(230px, 1fr) minmax(170px, 0.62fr) minmax(230px, 0.82fr) minmax(135px, 0.48fr) !important;
}
.registro-paridade {
  color: #12451f !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 700 !important;
}
.registro-linha-arquivo .registro-paridade {
  color: #3b3420 !important;
  font-weight: 500 !important;
}


/* v205 — reequilíbrio do strip inferior do quadro principal.
   A v204 fixou o tamanho do PNG, mas o strip com 5 cards ficou comprimido.
   Aqui ampliamos o peso relativo dos cards 1, 2 e 5 e compactamos a tipografia
   apenas onde necessário, preservando a leitura em linha única do preço atual. */
#composicao-tco .tco-summary-strip,
#composicao-tco .diff-summary-strip {
  grid-template-columns: 1.16fr 1.48fr 0.96fr 0.90fr 1.18fr !important;
}
#composicao-tco .tco-summary-item {
  padding: 5px 8px !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
}
#composicao-tco .tco-summary-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: 14px !important;
}
#composicao-tco .summary-parity-price .tco-summary-title,
#composicao-tco .tco-summary-item:last-child .tco-summary-title {
  white-space: normal !important;
  max-height: 30px !important;
  font-size: 12.2px !important;
  line-height: 1.04 !important;
}
#composicao-tco .summary-parity-price .tco-summary-value,
#composicao-tco .tco-summary-item:last-child .tco-summary-value {
  font-size: 15.6px !important;
}
#composicao-tco .summary-current-price {
  padding-right: 4px !important;
}
#composicao-tco .summary-current-price .tco-summary-title {
  white-space: nowrap !important;
  font-size: 12.6px !important;
  line-height: 1.02 !important;
  max-height: none !important;
}
#composicao-tco .summary-current-value-line {
  gap: 3px !important;
}
#composicao-tco .summary-current-main-value {
  font-size: 0.98em !important;
}
#composicao-tco .summary-current-parity-delta {
  font-size: 0.62em !important;
  letter-spacing: -0.03em !important;
}
#composicao-tco .tco-summary-item:nth-child(3) .tco-summary-title,
#composicao-tco .tco-summary-item:nth-child(4) .tco-summary-title {
  font-size: 12.6px !important;
}
#composicao-tco .tco-summary-item:nth-child(3) .tco-summary-value,
#composicao-tco .tco-summary-item:nth-child(4) .tco-summary-value {
  font-size: 15.8px !important;
}

/* v206 — correção das tabelas superiores na composição do TCO
   - reserva coluna fixa suficiente para os valores da legenda
   - força truncamento do nome antes de encavalar no valor
   - preserva o ajuste já feito dos cards inferiores */
#composicao-tco .tco-legend-card .legend-row {
  display: grid !important;
  grid-template-columns: 10px minmax(0, 1fr) minmax(90px, auto) !important;
  column-gap: 6px !important;
  align-items: center !important;
}

#composicao-tco .tco-legend-card .legend-name {
  min-width: 0 !important;
  padding-right: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 10px !important;
  line-height: 1.06 !important;
}

#composicao-tco .tco-legend-card .legend-value {
  min-width: 90px !important;
  justify-self: end !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  line-height: 1.06 !important;
}

#composicao-tco .tco-legend-card .legend-row.residual .legend-name,
#composicao-tco .tco-legend-card .legend-row.residual .legend-value,
#composicao-tco .tco-legend-card .legend-row.total .legend-name,
#composicao-tco .tco-legend-card .legend-row.total .legend-value {
  font-size: 10px !important;
}

/* v207 — reequilíbrio da área superior de composição do TCO
   Objetivo: devolver espaço para a legenda escrita externa e tirar um pouco
   da área do gráfico empilhado central, sem afetar os cards inferiores. */
#composicao-tco .vehicle-bio .vehicle-comp-body {
  grid-template-columns: minmax(0, 47%) minmax(0, 53%) !important;
}
#composicao-tco .vehicle-diesel .vehicle-comp-body {
  grid-template-columns: minmax(0, 53%) minmax(0, 47%) !important;
}

/* Encolhe levemente a dupla de colunas empilhadas, preservando a leitura. */
#composicao-tco .vehicle-bio .vehicle-chart-pair {
  grid-template-columns: minmax(58px, 0.74fr) minmax(56px, 0.56fr) !important;
  column-gap: clamp(4px, 0.36vw, 7px) !important;
}
#composicao-tco .vehicle-diesel .vehicle-chart-pair {
  grid-template-columns: minmax(56px, 0.56fr) minmax(58px, 0.74fr) !important;
  column-gap: clamp(4px, 0.36vw, 7px) !important;
}

/* A legenda escrita ganha mais área útil e reserva só o necessário ao valor. */
#composicao-tco .tco-legend-card .legend-row {
  display: grid !important;
  grid-template-columns: 10px minmax(0, 1fr) minmax(82px, auto) !important;
  column-gap: 7px !important;
  align-items: center !important;
}
#composicao-tco .tco-legend-card .legend-name {
  min-width: 0 !important;
  padding-right: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-size: 11px !important;
  line-height: 1.08 !important;
}
#composicao-tco .tco-legend-card .legend-value {
  min-width: 82px !important;
  justify-self: end !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 1.08 !important;
}
#composicao-tco .tco-legend-card .legend-row.residual .legend-name,
#composicao-tco .tco-legend-card .legend-row.residual .legend-value,
#composicao-tco .tco-legend-card .legend-row.total .legend-name,
#composicao-tco .tco-legend-card .legend-row.total .legend-value {
  font-size: 11px !important;
}

/* v208 — mais espaço para as tabelas laterais superiores.
   - Aproxima os blocos laterais do card central (card central mais estreito).
   - Reduz um pouco a dupla de barras empilhadas.
   - Dá mais largura útil à legenda escrita, cortando mais perto dos números. */
#composicao-tco .tco-layout-new.tco-layout-simetrico {
  grid-template-columns: minmax(0, 1fr) clamp(218px, 19.2vw, 330px) minmax(0, 1fr) !important;
  column-gap: clamp(4px, 0.42vw, 8px) !important;
}
#composicao-tco .tco-winner-card {
  padding: clamp(14px, 1.32vw, 22px) clamp(10px, 0.85vw, 16px) !important;
}

/* Mais área para a tabela escrita de cada lateral. */
#composicao-tco .vehicle-bio .vehicle-comp-body {
  grid-template-columns: minmax(0, 50.5%) minmax(0, 49.5%) !important;
}
#composicao-tco .vehicle-diesel .vehicle-comp-body {
  grid-template-columns: minmax(0, 49.5%) minmax(0, 50.5%) !important;
}

/* A coluna central empilhada encolhe um pouco para liberar espaço às legendas. */
#composicao-tco .vehicle-bio .vehicle-chart-pair {
  grid-template-columns: minmax(52px, 0.70fr) minmax(50px, 0.52fr) !important;
  column-gap: clamp(3px, 0.28vw, 6px) !important;
}
#composicao-tco .vehicle-diesel .vehicle-chart-pair {
  grid-template-columns: minmax(50px, 0.52fr) minmax(52px, 0.70fr) !important;
  column-gap: clamp(3px, 0.28vw, 6px) !important;
}

/* O corte da legenda vai mais para perto dos números. */
#composicao-tco .tco-legend-card .legend-row {
  grid-template-columns: 10px minmax(0, 1fr) minmax(72px, auto) !important;
  column-gap: 4px !important;
}
#composicao-tco .tco-legend-card .legend-name {
  padding-right: 1px !important;
  font-size: 11px !important;
}
#composicao-tco .tco-legend-card .legend-value {
  min-width: 72px !important;
  font-size: 11px !important;
}