/* Dashboard da area Salarial.

   A casca e a MESMA do Incentivo APP: `.analytics-console`, `.console-sidebar`,
   `.console-main`, `.analytics-kpis`, `.console-panel`. Reaproveitar em vez de
   refazer garante que os dois dashboards se pareçam de verdade, e nao apenas
   por acidente.

   O tema segue a mesma paleta do Incentivo: vermelho como dado principal,
   cinza para comparação e verde apenas para leitura positiva. A troca acontece
   so dentro de `.sal-console`, entao o dashboard do Incentivo continua igual.

   O console e escuro nos dois casos, de proposito: e uma tela de analise, nao
   de operacao. Por isso as cores aqui sao literais, e nao tokens do painel
   claro. */

.sal-console {
  --sal-acento: #ff313d;
  --sal-acento-forte: #ff6670;
  --sal-acento-fundo: #4c1a20;
  --sal-linha: #304149;
  --sal-fundo: #0a1418;
  --sal-fundo-2: #101c21;
  --sal-fundo-3: #16242a;
  --sal-texto: #f3f7f7;
  --sal-apoio: #adbec0;
  --sal-verde: #6ee07a;
  --sal-vermelho: #ff6870;
  --sal-amarelo: #efbe54;
  --sal-azul: #ff8a92;

  border-color: var(--sal-linha);
  color: var(--sal-texto);
  background: var(--sal-fundo);
}

.sal-console .console-sidebar {
  border-right-color: var(--sal-linha);
  background: var(--sal-fundo-2);
}

/* O acento aparece nos rotulos de secao e na marca da lateral. */
.sal-console .console-brand span,
.sal-console .console-heading > div > p,
.sal-console .console-panel-heading p {
  color: var(--sal-acento);
}

.sal-console .console-brand strong { color: var(--sal-texto); }

.sal-console .console-sidebar select,
.sal-console .console-top-controls select {
  border-color: #3a4d54;
  color: var(--sal-texto);
  background: var(--sal-fundo-3);
}

.sal-console .console-sidebar select:focus,
.sal-console .console-top-controls select:focus {
  border-color: var(--sal-acento);
  outline: 2px solid var(--sal-acento-fundo);
}

.sal-console .console-main {
  background: var(--sal-fundo);
}

.sal-console .console-topbar,
.sal-console .console-panel-heading {
  border-color: var(--sal-linha);
}

.sal-console .console-tab.is-active {
  color: #fff;
  background: var(--sal-acento);
}

.sal-console .console-panel {
  border-color: var(--sal-linha);
  background: var(--sal-fundo-2);
}

.sal-console .console-panel-heading h3 { color: var(--sal-texto); }
.sal-console .console-scope { color: var(--sal-apoio); }
/* O nome técnico das fontes não é útil para quem acompanha o resultado. */
.sal-console #sal-dash-status { display: none; }
.test-bar #teste-origem,
.test-bar #sal-teste-origem { display: none; }

/* ---------------------------------------------------------------------------
   Cartoes de indicador
   O primeiro e o numero que a area olha primeiro, entao ele ganha o fundo do
   acento em vez de so a borda — e o equivalente do cartao vermelho do
   Incentivo, no tema desta area.
   --------------------------------------------------------------------------- */
.sal-console .analytics-kpi {
  border-color: #30434a;
  border-top-color: #596b70;
  background: var(--sal-fundo-3);
}

.sal-console .analytics-kpi > span,
.sal-console .analytics-kpi-head span { color: #bbcbcd; }
.sal-console .analytics-kpi > strong { color: #fff; }
.sal-console .analytics-kpi > p { color: var(--sal-apoio); }

.sal-console .analytics-kpi.is-principal {
  border-color: #bb3548;
  border-top-color: #ef6373;
  background: linear-gradient(160deg, #8a2031, #511425);
}

.sal-console .analytics-kpi.is-principal > strong { font-size: 20px; }
.sal-console .analytics-kpi.is-principal > span,
.sal-console .analytics-kpi.is-principal > p { color: #ffe4e7; }

.sal-console .analytics-kpi.tom-pvd { border-top-color: var(--sal-azul); }
.sal-console .analytics-kpi.tom-cf { border-top-color: var(--sal-amarelo); }
.sal-console .analytics-kpi.tom-projecao { border-top-color: #a970ff; }
.sal-console .analytics-kpi.tom-meta { border-top-color: #8c999b; }
.sal-console .analytics-kpi.tom-falta { border-top-color: var(--sal-vermelho); }
.sal-console .analytics-kpi.tom-atingido { border-top-color: var(--sal-verde); }

.sal-console .analytics-kpi-icon { color: var(--sal-acento); }

.sal-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
}

.sal-kpi-delta.sobe { color: var(--sal-verde); }
.sal-kpi-delta.desce { color: var(--sal-vermelho); }

/* ---------------------------------------------------------------------------
   Graficos
   Tudo SVG montado a mao: a politica de seguranca do painel (`script-src
   'self'`) nao permite biblioteca de fora, e um grafico de barras e linha nao
   justifica embutir uma.
   --------------------------------------------------------------------------- */
.sal-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.sal-console .sal-dash-panel { margin-top: 10px; }

.sal-dash-chart {
  padding: 12px 14px 10px;
  overflow-x: auto;
}

.sal-dash-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

/* Eixos em HTML: eles não diminuem junto com o SVG e permanecem legíveis em
   cartões de qualquer largura. O desenho fica restrito às linhas e pontos. */
.sal-grafico-grade {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  grid-template-rows: auto 25px;
  column-gap: 8px;
  align-items: stretch;
}

.sal-grafico-eixo-y {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0 2px;
  color: #e5eeee;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sal-grafico-area {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.sal-grafico-area svg { width: 100%; height: auto; }

.sal-grafico-eixo-x {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  align-items: start;
  padding-top: 7px;
  color: #e5eeee;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sal-grafico-eixo-x.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sal-grafico-eixo-x.doze { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sal-grafico-eixo-x.doze span { font-size: 11px; }

.sal-eixo { stroke: #4d6268; stroke-width: 1.2; }
.sal-grade { stroke: #2d4147; stroke-width: 1; stroke-dasharray: 3 4; }

.sal-rotulo {
  fill: #c8d5d6;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: .01em;
}

.sal-rotulo.forte { fill: #eff4f4; }
.sal-rotulo.fim { text-anchor: end; }
.sal-rotulo.meio { text-anchor: middle; }

.sal-barra { fill: var(--sal-acento); }
.sal-barra.antes { fill: #4a4468; }
.sal-barra.pvd { fill: var(--sal-azul); opacity: .85; }

.sal-linha-serie {
  fill: none;
  stroke: var(--sal-amarelo);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sal-linha-serie.meta {
  stroke: var(--sal-apoio);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
}

.sal-linha-serie.acumulado { stroke: var(--sal-acento-forte); }
.sal-linha-serie.pvd {
  stroke: #ff9ca3;
  stroke-width: 2;
  stroke-dasharray: 5 4;
}
.sal-linha-serie.mensal { stroke-width: 3.2; }
.sal-linha-serie.mensal.atual { stroke: #ff313d; }
.sal-linha-serie.mensal.anterior { stroke: #9ea8aa; stroke-width: 2.6; }

.sal-ponto { fill: var(--sal-amarelo); }
.sal-ponto.acumulado { fill: var(--sal-acento-forte); }
.sal-ponto.pvd { fill: #101c21; stroke: #ff9ca3; stroke-width: 2; }
.sal-ponto.mensal.atual { fill: #ff313d; stroke: #ffd8da; stroke-width: 1.2; }
.sal-ponto.mensal.anterior { fill: #9ea8aa; stroke: #dce3e3; stroke-width: 1; }
.sal-faixa-parcial { fill: url(#sal-hachura-parcial); opacity: .32; }
.sal-etiqueta text { fill: #fff; font-family: inherit; font-size: 12.5px; font-weight: 900; }
.sal-etiqueta.atual rect { fill: #d72e38; stroke: #ff6f78; stroke-width: 1; }
.sal-etiqueta.anterior rect { fill: #4f5e63; stroke: #aeb8b9; stroke-width: 1; }

.sal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 0 14px 12px;
}

.sal-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sal-apoio);
  font-size: 11.5px;
  font-weight: 800;
}

.sal-legenda i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--sal-acento);
}

.sal-legenda i.antes { background: #4a4468; }
.sal-legenda i.linha { height: 3px; border-radius: 999px; background: var(--sal-amarelo); }
.sal-legenda i.linha.anterior { background: #9ea8aa; }
.sal-legenda i.linha.atual { background: #ff313d; }
.sal-legenda i.meta { height: 3px; border-radius: 999px; background: var(--sal-apoio); }
.sal-legenda i.acumulado { height: 3px; border-radius: 999px; background: var(--sal-acento-forte); }
.sal-legenda i.pvd { background: #ff9ca3; }
.sal-legenda i.parcial {
  background: repeating-linear-gradient(45deg, #ff5965 0 2px, #27353a 2px 4px);
}

.sal-resumo-ritmo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 14px 12px;
}

.sal-resumo-ritmo span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #30434a;
  border-radius: 7px;
  background: #0c171b;
}

.sal-resumo-ritmo small { color: var(--sal-apoio); font-size: 10px; font-weight: 850; }
.sal-resumo-ritmo b { color: var(--sal-texto); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sal-resumo-ritmo em { color: #9aacaf; font-size: 10px; font-style: normal; }

.sal-comparativos-diarios {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.sal-comparativo-diario {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #35484e;
  border-radius: 10px;
  background: #0c171b;
}

.sal-comparativo-diario.is-pvd { border-color: #73363c; }
.sal-comparativo-titulo { color: #e9eeee; font-size: 10.5px; font-weight: 850; }
.sal-comparativo-diario p { margin: 0; color: #d7e0e0; font-size: 10.5px; font-weight: 800; line-height: 1.35; }
.sal-comparativo-diario.up p { color: var(--sal-verde); }
.sal-comparativo-diario.down p { color: #ff9c9f; }
.sal-comparativo-diario.neutral p { color: #d7e0e0; }
.sal-comparativo-diario em { color: var(--sal-apoio); font-style: normal; font-weight: 700; }

/* Os dois acompanhamentos diários são independentes: o realizado fecha no
   último dia faturado e o segundo avança mais um dia com a pré-venda. */
.sal-graficos-diarios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sal-grafico-diario {
  min-width: 0;
  padding: 10px;
  border: 1px solid #30434a;
  border-radius: 10px;
  background: #0c171b;
}

.sal-grafico-diario.is-pvd { border-color: #73363c; }
.sal-grafico-diario .daily-trend-shell { gap: 8px; }
.sal-grafico-diario .daily-trend-topline { align-items: flex-start; }
.sal-grafico-diario .daily-trend-topline > div:first-child { display: grid; gap: 6px; }
.sal-grafico-diario .daily-trend-legend { gap: 8px 10px; font-size: 10px; }
.sal-grafico-diario .daily-trend-legend i { width: 14px; }
.sal-grafico-diario .daily-trend-status { padding-top: 1px; }
.sal-grafico-diario .sal-comparativo-diario { padding: 8px 9px; }
.sal-grafico-diario .daily-trend-scroll { border-radius: 7px; }
/* Nos cartões lado a lado os valores já aparecem acima do desenho. Tirar os
   selos internos evita que eles sejam cortados quando o SVG se ajusta. */
.sal-grafico-diario .daily-badge-overlay { display: none; }

.sal-dash-vazio {
  padding: 34px 18px;
  color: var(--sal-apoio);
  font-size: 12px;
  text-align: center;
}

.sal-dash-nota {
  margin: 0;
  padding: 0 14px 12px;
  color: #c3d0d1;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

/* Em telas largas, o gráfico diário usa toda a área disponível. Antes ele
   carregava uma largura fixa e deixava metade do cartão em branco. */
.sal-console .daily-trend-scroll { overflow-x: hidden; }
.sal-console .daily-chart-shell {
  width: 100%;
  min-width: 0;
  grid-template-columns: 70px minmax(0, 1fr);
}
.sal-console .daily-y-axis {
  height: auto;
  align-self: stretch;
  padding-block: 5px 7px;
  font-size: 12px;
}
.sal-console .daily-chart-main { width: 100%; min-width: 0; }
.sal-console .daily-plot-stage {
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 178;
}
.sal-console .daily-trend-svg {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
}
.sal-console .daily-x-axis { width: 100%; font-size: 11px; }
.sal-console .daily-x-axis span.is-current { font-size: 12px; }

/* Mantém linhas, pontos e textos nítidos mesmo quando o gráfico ocupa uma
   largura diferente da original. */
.sal-dash-chart svg {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}
.sal-dash-chart svg path,
.sal-dash-chart svg line,
.sal-dash-chart svg circle,
.sal-dash-chart svg rect { vector-effect: non-scaling-stroke; }

/* ---------------------------------------------------------------------------
   Telas menores
   No celular o console vira uma coluna, os filtros viram duas e o grafico
   diario rola na horizontal — trinta e um dias nao cabem em 355px.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .sal-dash-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* Evita a barra horizontal da página. Só os gráficos que precisam de
     detalhe mantêm rolagem própria, dentro de seus cartões. */
  body { overflow-x: hidden; }
  .app-frame { width: auto; margin-inline: 10px; }
  .sal-console .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sal-console .analytics-kpi { min-height: 0; padding: 11px 12px; }
  .sal-console .analytics-kpi > strong,
  .sal-console .analytics-kpi.is-principal > strong { font-size: 16px; }
  .sal-console .analytics-kpi > p { margin-top: 8px; font-size: 9.5px; }
  .sal-dash-chart { padding: 10px 8px 8px; }
  .sal-dash-chart.rola svg { width: 620px; max-width: none; }
  .sal-comparativos-diarios,
  .sal-resumo-ritmo { grid-template-columns: minmax(0, 1fr); }
  .sal-graficos-diarios { grid-template-columns: minmax(0, 1fr); }
  .sal-grafico-diario { padding: 10px 8px; }
  .sal-console .daily-trend-scroll { overflow-x: auto; }
  .sal-console .daily-chart-shell {
    width: 650px;
    min-width: 650px;
    grid-template-columns: 70px 560px;
  }
  .sal-console .daily-y-axis {
    height: 178px;
    align-self: auto;
    padding-block: 0;
    font-size: 11px;
  }
  .sal-console .daily-chart-main { width: 560px; min-width: 560px; }
  .sal-console .daily-plot-stage {
    width: 560px;
    height: 178px;
    aspect-ratio: auto;
  }
  .sal-console .daily-trend-svg {
    width: 560px !important;
    min-width: 560px !important;
    height: 178px !important;
  }
  .sal-console .daily-x-axis { width: 560px; font-size: 10px; }
  .sal-grafico-grade { min-width: 690px; }
  .sal-console #sal-dash-acum svg { width: 100%; max-width: none; }
  .sal-legenda { gap: 6px 10px; padding-inline: 8px; }
  .sal-dash-nota { padding-inline: 8px; font-size: 10.5px; }
  .sal-resumo-ritmo { padding-inline: 8px; }
}