.boton-alfabetico {
  background-color: #005da4 !Important;
  cursor: pointer;
}
.boton-alfabetico:hover {
  background-color: #5eb924 !Important;
  cursor: pointer;
}
.sibdi-button-bar {
  background: #fff;
  padding: 15px 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.sibdi-button-bar button {
  width: 38px;
  height: 38px;
  background: #005baa;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease;
}

.sibdi-button-bar button:hover {
  background: #5eb924!important;
}

@media (max-width:768px) {

  /*Para colocar las 2 columnas en 1 fila cuando es celular */
  #tabla_recursos thead {
    display:none;
  }

  #tabla_recursos tr{
    display:block;
    margin-bottom:15px;
    border:1px solid #ddd;
    padding:10px;
  }

  #tabla_recursos td{
    display:block;
    width:100%;
  }

  #tabla_recursos td:nth-child(1)::before{
    display:block;
    font-weight:bold;
  }

  #tabla_recursos td:nth-child(2)::before{
    display:block;
    font-weight:bold;
  }

}