.lista-table {
   table-layout: auto;
   width: 100%;
   border: 0px solid #000;
   background-color: #eeeefc;
   border-collapse: unset;
   border-radius: 5px 5px 5px 5px;
}

.lista-thead {
   padding: 2px;
   caption-side: bottom;
   color: #000;
   letter-spacing: 0px;
   padding-left: 5px;
   padding-right: 5px;
}



.lista-tbody-even {
   background-color: #FFF;
}

.lista-tbody-even td {
   padding-left: 5px;
   padding-right: 5px;
}

.lista-tbody-odd {
   background-color: rgb(205, 226, 247);
}

.lista-tbody-odd td {
   padding-left: 5px;
   padding-right: 5px;
}

.lista-tbody-even tr:hover {
   background-color: #EBECCD;
}

.lista-tbody-odd tr:hover {
   background-color: #eff199;
}



.lista-tr-even {
   background-color: #FFF;
}

.lista-tr-even td {
   padding-left: 5px;
   padding-right: 5px;
}

.lista-tr-odd {
   background-color: rgb(205, 226, 247);
}

.lista-tr-odd td {
   padding-left: 5px;
   padding-right: 5px;
}

.lista-tr-even:hover {
   background-color: #EBECCD;
}

.lista-tr-odd:hover {
   background-color: #eff199;
}



.lista-barra {
   width: 100% - 10px;
   height: 38px;
   margin: 10px;
   margin-top: 0px;
   padding: 3px;
   padding-top: 5px;
   padding-left: 10px;
   color: #000;
   border: 2px;
   border-style: double;
   border-color: #008FEA;
   background-color: #000;
   text-align: left;
   font-size: "20";
   border-radius: 5px 5px 5px 5px;
}

.lista-filtros-div {
   float: right;
   margin-top: -7px;
   margin-right: 10px;
   padding: 10px;
   color: #000;
   border: 2px;
   border-style: double;
   border-color: #eeeefc;
   background-color: #fff;
   text-align: left;
   font-size: "20";
   border-radius: 10px 10px 10px 10px;
}

.lista-filtros-botao {
   float: right;
   margin-right: 10px;
}

.listar-imagem-navegacao {
   width: 16px;
   height: 16px;
   margin-top: 2px;
   margin-left: 5px;
   text-decoration: none;
}


.scroll-table-container {
   overflow-x: scroll;
   width: calc(97vw - 30px - 200px);
   /* padrão para telas grandes */
}

@media (max-width: 768px) {
   .scroll-table-container {
      width: 100%;
      /* no mobile ocupa toda a largura */
   }
}

@media screen and (max-width: 768px) {
   .responsive-table {
      width: 100% !important;
   }

   .responsive-table thead {
      display: none;
      /* Esconde o cabeçalho no mobile */
   }

   .responsive-table tr {
      display: block;
      margin-bottom: 1rem;
      border: 1px solid #dbdbdb;
      border-radius: 4px;
      overflow: hidden;
      /* Garante que o conteúdo respeite o border-radius */
   }

   .responsive-table td {
      /* Regra principal para as células */
      display: flow-root;
      /* TÉCNICA CHAVE: Contém o float, corrigindo a "escada" */
      padding: 0.1em 0.1em;
      /* Adiciona espaçamento interno para melhor leitura */
      border-bottom: 1px dotted #dbdbdb;
      text-align: left !important;
   }

   .responsive-table td:last-child {
      /* Remove a borda da última célula de cada "card" */
      border-bottom: 0;
   }

   .responsive-table td::before {
      /* Regra principal para os rótulos */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-align: left !important;
      /* Alinha o dado à esquerda */
      /* TÉCNICA CHAVE: Define uma largura para alinhar os dados verticalmente */
      /*width: 45%; */
      padding-right: 0.1em;
      /* Espaço entre o rótulo e o dado */
      box-sizing: border-box;
      /* Garante que o padding não aumente a largura total */
   }

   /* --- Regras especiais para a primeira célula (do radio button) --- */

   .responsive-table tr td:first-child {
      display: flex;
      /* Usa Flexbox para o alinhamento especial */
      align-items: center;
      gap: 1em;
      padding: 0.1em 0.1em;
      /* Ajuste fino do padding para a primeira linha */
      text-align: left !important;
      /* Alinha o dado à esquerda */
   }

   .responsive-table tr td:first-child::before {
      float: none;
      /* Desativa o float, pois Flexbox está no controle */
      width: auto;
      /* Deixa a largura ser automática */
      padding-right: 0;
      /* O 'gap' já cuida do espaçamento */
      text-align: left !important;
      /* Alinha o dado à esquerda */
   }
}