/* Estilos da aba Salarial.
   Reaproveitam os tokens e componentes da V16 do painel (--ink, --line,
   .panel, .goal-card, .progress-ring, .context-strip, .table-wrap) e
   acrescentam so o que esta area precisa: a tabela larga com as doze colunas
   da base, os cartoes de marca, a arvore da equipe e a gaveta de detalhe.

   A identidade Coca-Cola da lateral e os grupos da navegacao vem de
   `imperdoaveis.css`, que e carregado antes deste arquivo tanto na previa
   quanto no pacote. Este arquivo nao redefine nada de la.

   Arquivo de TESTE: nada aqui foi aplicado no painel publicado. */

/* ---------------------------------------------------------------------------
   1. Faixa de contexto e leitura de abertura
   --------------------------------------------------------------------------- */
.sal-insight {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--coke-red, #d81f26);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.sal-insight-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--coke-red, #d81f26);
  background: var(--coke-red-soft, #fdeceb);
}

.sal-insight-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sal-insight p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.55;
}

.sal-insight b {
  color: var(--ink);
  font-weight: 850;
}

.sal-insight em {
  font-style: normal;
  font-weight: 850;
  color: var(--coke-red, #d81f26);
}

/* ---------------------------------------------------------------------------
   2. Cartoes de anel do resumo
   Os tres tons seguem a leitura da area: meta em azul, realizado no laranja do
   incentivo e o que falta no vermelho, que e o numero que move o dia.
   --------------------------------------------------------------------------- */
.goal-card.sal-meta {
  --tone: var(--blue);
  --tone-soft: var(--blue-soft);
  border-left: 3px solid var(--blue);
}

.goal-card.sal-realizado {
  --tone: var(--orange);
  --tone-soft: var(--orange-soft);
  border-left: 3px solid var(--orange);
}

.goal-card.sal-falta {
  --tone: var(--red);
  --tone-soft: var(--red-soft);
  border-left: 3px solid var(--red);
}

/* Valor em reais nao cabe no tamanho do anel do incentivo, que era contagem. */
.goal-card.sal-meta .progress-ring-content strong,
.goal-card.sal-realizado .progress-ring-content strong,
.goal-card.sal-falta .progress-ring-content strong {
  font-size: 17px;
}

.sal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.app-page[data-page^="sal-"] > .panel {
  margin-top: 16px;
}

.sal-grid > .panel {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   3. Indicadores do topo
   --------------------------------------------------------------------------- */
.sal-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.sal-kpi {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.sal-kpi.bom { border-top: 3px solid var(--green); }
.sal-kpi.alerta { border-top: 3px solid var(--gold); }
.sal-kpi.ruim { border-top: 3px solid var(--red); }
.sal-kpi.neutro { border-top: 3px solid var(--blue); }

.sal-kpi span {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sal-kpi strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.sal-kpi small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   4. Lista de marcas do resumo
   A barra nativa recebe o percentual pelo atributo `value`, que continua
   funcionando com a CSP do painel e mostra o progresso real de cada marca.
   --------------------------------------------------------------------------- */
.sal-marcas {
  display: grid;
  gap: 3px;
  max-height: 430px;
  padding: 8px;
  overflow-y: auto;
}

.sal-marcas::-webkit-scrollbar { width: 9px; }
.sal-marcas::-webkit-scrollbar-thumb { border: 3px solid #fff; border-radius: 999px; background: var(--line-strong); }

.sal-marca {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  padding: 9px 10px;
  border: 0;
  border-radius: 11px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}

.sal-marca:hover { background: var(--surface-2); }

.sal-marca-nome {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.sal-marca-valor {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 750;
  text-align: right;
  white-space: nowrap;
}

.sal-marca-valor b {
  color: var(--ink);
  font-weight: 850;
}

.sal-progress {
  display: block;
  width: 100%;
  grid-column: 1 / -1;
  height: 10px;
  margin-top: 3px;
  border: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  color: var(--orange);
  overflow: hidden;
}

.sal-progress::-webkit-progress-bar {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}

.sal-progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #ff9a61, var(--orange));
  transition: width .35s ease;
}

.sal-progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #ff9a61, var(--orange));
}

.sal-progress.is-ok { color: var(--green); }
.sal-progress.is-ok::-webkit-progress-value { background: linear-gradient(90deg, #47ba7d, var(--green)); }
.sal-progress.is-ok::-moz-progress-bar { background: linear-gradient(90deg, #47ba7d, var(--green)); }

.sal-progress.is-critico { color: var(--red); }
.sal-progress.is-critico::-webkit-progress-value { background: linear-gradient(90deg, #ee7777, var(--red)); }
.sal-progress.is-critico::-moz-progress-bar { background: linear-gradient(90deg, #ee7777, var(--red)); }

/* ---------------------------------------------------------------------------
   5. Barra de ferramentas da tabela
   --------------------------------------------------------------------------- */
.sal-toolbar {
  display: grid;
  gap: 12px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--line);
}

.sal-chipbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sal-tab {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.sal-tab b {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
  text-align: center;
}

.sal-tab:hover { border-color: var(--line-strong); background: var(--surface-2); }

.sal-tab.is-active {
  border-color: var(--coke-red, #d81f26);
  background: var(--coke-red, #d81f26);
  color: #fff;
}

.sal-tab.is-active b { background: rgba(255, 255, 255, .22); color: #fff; }

.sal-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.sal-filters label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.sal-filters select,
.sal-filters input {
  min-height: 36px;
  min-width: 150px;
  max-width: 230px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sal-filters select:focus,
.sal-filters input:focus {
  outline: 2px solid var(--coke-red-soft, #fdeceb);
  border-color: var(--coke-red, #d81f26);
}

.sal-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.sal-download {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 850;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.sal-download svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sal-download:hover { border-color: var(--coke-red, #d81f26); color: var(--coke-red, #d81f26); }
.sal-download.is-clear { color: var(--red); }

/* ---------------------------------------------------------------------------
   6. A tabela com as doze colunas da base
   Ela e larga de proposito: a area pediu o arquivo inteiro, sem coluna
   escondida. Por isso rola na horizontal dentro do painel e a coluna de
   identificacao fica fixa, para nao se perder a linha ao rolar.
   --------------------------------------------------------------------------- */
/* O painel esconde `.table-wrap` abaixo de 600px porque troca a tabela por uma
   lista propria. Aqui nao existe lista equivalente — a tabela E o conteudo da
   aba —, entao ela precisa continuar visivel e rolar dentro do painel. */
.panel .sal-wrap {
  display: block;
  max-height: 620px;
  overflow: auto;
}

.sal-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

.sal-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.sal-table th.num,
.sal-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sal-table td {
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: middle;
}

.sal-table tbody tr:hover td { background: var(--surface-2); }

/* Identificacao fixa: e o que diz de quem e a linha. */
.sal-table th.sal-fix,
.sal-table td.sal-fix {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 210px;
  background: #fff;
  box-shadow: 1px 0 0 var(--line);
}

.sal-table th.sal-fix { z-index: 4; background: var(--surface-2); }
.sal-table tbody tr:hover td.sal-fix { background: var(--surface-2); }

.sal-cell-nome {
  display: grid;
  gap: 2px;
}

.sal-cell-nome strong {
  font-size: 13px;
  font-weight: 850;
  color: var(--ink);
}

.sal-cell-nome span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

.sal-table td.is-neg { color: var(--red); font-weight: 800; }
.sal-table td.is-pos { color: var(--green); font-weight: 800; }
.sal-table td.is-forte { color: var(--ink); font-weight: 850; }

.sal-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 2px solid var(--line-strong);
  border-bottom: 0;
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 850;
}

.sal-table tfoot td.sal-fix { z-index: 3; background: var(--surface-2); }

.sal-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 850;
  white-space: nowrap;
}

.sal-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.sal-badge.bateu { color: var(--green); background: var(--green-soft); }
.sal-badge.ritmo { color: var(--blue); background: var(--blue-soft); }
.sal-badge.risco { color: var(--gold); background: var(--gold-soft); }
.sal-badge.critico { color: var(--red); background: var(--red-soft); }
.sal-badge.sem { color: var(--muted); background: var(--surface-2); }

.sal-detail-button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.sal-detail-button:hover { border-color: var(--coke-red, #d81f26); color: var(--coke-red, #d81f26); }

.sal-more {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--coke-red, #d81f26);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 850;
  cursor: pointer;
}

.sal-more:hover { background: var(--coke-red-soft, #fdeceb); }

.sal-note {
  margin: 0;
  padding: 12px 17px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.sal-vazio {
  display: grid;
  gap: 6px;
  padding: 40px 20px;
  text-align: center;
}

.sal-vazio strong { font-size: 15px; }
.sal-vazio p { margin: 0; color: var(--muted); font-size: 12.5px; }

/* ---------------------------------------------------------------------------
   7. Equipe: coordenador -> supervisor -> rota
   --------------------------------------------------------------------------- */
.sal-people {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.sal-node {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.sal-node-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 0;
  background: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.sal-node-head:hover { background: var(--surface-2); }

.sal-node-caret {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg);
  transition: transform .18s ease;
}

.sal-node:not(.is-open) .sal-node-caret { transform: rotate(0deg); }

.sal-node-id { display: grid; gap: 2px; min-width: 0; }

.sal-node-id strong {
  font-size: 14px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.sal-node-id span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
}

.sal-node-num {
  display: grid;
  gap: 2px;
  text-align: right;
  white-space: nowrap;
}

.sal-node-num strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.sal-node-num span { color: var(--muted); font-size: 10.5px; font-weight: 750; }

.sal-node-progress {
  height: 9px;
  margin-top: 0;
}

/* A pagina de equipe so e um atalho de gestao para supervisor e coordenador. */
[data-page-target="sal-equipe"][hidden],
[data-page="sal-equipe"][hidden] { display: none !important; }

.sal-node-body {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.sal-node:not(.is-open) .sal-node-body { display: none; }

.sal-node-body .sal-node { border-color: var(--line); background: var(--surface-2); }
.sal-node-body .sal-node .sal-node { background: #fff; }

/* ---------------------------------------------------------------------------
   8. Gaveta de detalhe da rota
   --------------------------------------------------------------------------- */
.sal-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  width: min(560px, 100vw);
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  box-shadow: var(--shadow-md);
  animation: sal-slide .2s ease;
}

@keyframes sal-slide {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.sal-drawer-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.sal-drawer-head h2 { margin: 5px 0 0; font-size: 19px; letter-spacing: -.02em; }
.sal-drawer-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }

.sal-drawer-head button {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
}

.sal-drawer-head button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.sal-drawer-body {
  padding: 18px 20px 28px;
  overflow-y: auto;
}

.sal-drawer-score {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.sal-drawer-score > div {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.sal-drawer-score span {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sal-drawer-score strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.sal-drawer-score .is-falta strong { color: var(--red); }

.sal-drawer-lista { display: grid; gap: 8px; }

.sal-drawer-item {
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.sal-drawer-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sal-drawer-item-head strong { font-size: 13.5px; }

.sal-drawer-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
  margin: 10px 0 0;
}

.sal-drawer-dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dashed var(--line);
}

.sal-drawer-dl dt { color: var(--muted); font-size: 11px; font-weight: 750; }
.sal-drawer-dl dd { margin: 0; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sal-drawer-dl dd.is-neg { color: var(--red); }
.sal-drawer-dl dd.is-pos { color: var(--green); }

/* ---------------------------------------------------------------------------
   9. Faixa da previa (nao existe no painel) e telas menores
   --------------------------------------------------------------------------- */
.sal-fonte.is-arquivo { color: var(--gold); }

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

@media (max-width: 900px) {
  .sal-insight { align-items: start; }
  .sal-downloads { margin-left: 0; }
  .sal-filters select,
  .sal-filters input { min-width: 0; width: 100%; max-width: none; }
  .sal-filters label { flex: 1 1 160px; }
  .sal-drawer-score { grid-template-columns: minmax(0, 1fr); }
  .sal-drawer-dl { grid-template-columns: minmax(0, 1fr); }
  .goal-card.sal-meta .progress-ring-content strong,
  .goal-card.sal-realizado .progress-ring-content strong,
  .goal-card.sal-falta .progress-ring-content strong { font-size: 14px; }
  /* No celular a coluna fixa comeria metade da tela. */
  .sal-table th.sal-fix,
  .sal-table td.sal-fix { position: static; min-width: 170px; box-shadow: none; }
  /* A tabela tem quinze colunas: no telefone ela rola nos dois eixos dentro do
     painel, em vez de esticar a página inteira. */
  .panel .sal-wrap { max-height: 70vh; }
  .sal-table { font-size: 12px; }
  .sal-table th, .sal-table td { padding: 9px 9px; }
}