.divTableFunc {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: 0.8em;
}

/* Cabeçalho visual em desktop */
.theadFunc {
  display: table-header-group;
  background-color: #006064;
  color: #fff;
  font-weight: bold;
}

.tbodyFunc {
  display: table-row-group;
}

.rowFunc {
  display: table-row;
}

.headerFunc,
.cellFunc {
  display: table-cell;
  padding: 2px;
  border: 1px solid #ccc;
  text-align: left;
  vertical-align: middle;
  /* Evita quebra de números de salário; ajuste se desejar quebrar */
  white-space: normal;
}

.tbodyFunc .rowFunc:nth-child(even) {
  background-color: #f9f9f9;
}
.tbodyFunc .rowFunc:nth-child(odd) {
  background-color: #ffffff;
}
.tbodyFunc .rowFunc:hover {
  background-color: #e0f7fa;
}

/* Wrapper com rolagem horizontal opcional para tabelas largas */
.divTableScroll {
  width: 100%;
  overflow-x: hidden;
}

/* Mobile: empilha linhas em cartões com rótulos via data-label */
@media (max-width: 700px) {
  /* A “tabela” vira bloco para empilhamento */
  .divTableFunc {
    display: block;
    border-collapse: initial;
  }

  /* Esconde o cabeçalho tabular visual e usa labels por célula */
  .theadFunc {
    display: none;
  }

  .tbodyFunc {
    display: block;
  }

  .rowFunc {
    display: block;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
  }

  /* Cada célula vira linha com label + valor em duas colunas */
  .cellFunc,
  .headerFunc {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 8px;
    border: 0;
    border-bottom: 1px solid #eee;
    padding: 10px 12px;
    white-space: normal; /* permite quebra de texto no mobile */
  }

  /* Última célula sem borda inferior */
  .rowFunc .cellFunc:last-child {
    border-bottom: 0;
  }

  /* Rótulo acessível visualmente via data-label */
  .cellFunc::before,
  .headerFunc::before {
    content: attr(data-label);
    font-weight: 600;
    color: #333;
  }

  /* Células “chave” que eram headers de linha podem ter 100% de largura */
  .cellFunc.is-rowheader {
    grid-template-columns: 100%;
  }
}